From 2e21ef212c23e277e903304a96698d37540d19f9 Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Mon, 6 Mar 2023 17:43:24 -0300
Subject: [PATCH 1/4] feat: expose tooltip placement with classname

---
 src/components/Tooltip/Tooltip.tsx |  9 ++++++++-
 src/utils/compute-positions.ts     | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 5f568040..67c62c5c 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -6,7 +6,7 @@ import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
 import { computeTooltipPosition } from '../../utils/compute-positions'
 import styles from './styles.module.css'
-import type { IPosition, ITooltip } from './TooltipTypes'
+import type { IPosition, ITooltip, PlacesType } from './TooltipTypes'
 
 const Tooltip = ({
   // props
@@ -45,6 +45,7 @@ const Tooltip = ({
   const tooltipArrowRef = useRef<HTMLElement>(null)
   const tooltipShowDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
   const tooltipHideDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const [actualPlacement, setActualPlacement] = useState(place)
   const [inlineStyles, setInlineStyles] = useState({})
   const [inlineArrowStyles, setInlineArrowStyles] = useState({})
   const [show, setShow] = useState(false)
@@ -228,6 +229,7 @@ const Tooltip = ({
       if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
         setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
       }
+      setActualPlacement(computedStylesData.place as PlacesType)
     })
   }
 
@@ -465,6 +467,7 @@ const Tooltip = ({
       if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
         setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
       }
+      setActualPlacement(computedStylesData.place as PlacesType)
     })
   }, [show, activeAnchor, content, html, place, offset, positionStrategy, position])
 
@@ -520,6 +523,10 @@ const Tooltip = ({
         [styles['show']]: canShow,
         [styles['fixed']]: positionStrategy === 'fixed',
         [styles['clickable']]: clickable,
+        'react-tooltip__place-top': actualPlacement === 'top',
+        'react-tooltip__place-right': actualPlacement === 'right',
+        'react-tooltip__place-bottom': actualPlacement === 'bottom',
+        'react-tooltip__place-left': actualPlacement === 'left',
       })}
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
diff --git a/src/utils/compute-positions.ts b/src/utils/compute-positions.ts
index c978b280..78c71138 100644
--- a/src/utils/compute-positions.ts
+++ b/src/utils/compute-positions.ts
@@ -14,11 +14,11 @@ export const computeTooltipPosition = async ({
     // elementReference can be null or undefined and we will not compute the position
     // eslint-disable-next-line no-console
     // console.error('The reference element for tooltip was not defined: ', elementReference)
-    return { tooltipStyles: {}, tooltipArrowStyles: {} }
+    return { tooltipStyles: {}, tooltipArrowStyles: {}, place }
   }
 
   if (tooltipReference === null) {
-    return { tooltipStyles: {}, tooltipArrowStyles: {} }
+    return { tooltipStyles: {}, tooltipArrowStyles: {}, place }
   }
 
   const middleware = middlewares
@@ -51,7 +51,7 @@ export const computeTooltipPosition = async ({
         [staticSide]: '-4px',
       }
 
-      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle }
+      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }
     })
   }
 
@@ -59,9 +59,9 @@ export const computeTooltipPosition = async ({
     placement: 'bottom',
     strategy,
     middleware,
-  }).then(({ x, y }) => {
+  }).then(({ x, y, placement }) => {
     const styles = { left: `${x}px`, top: `${y}px` }
 
-    return { tooltipStyles: styles, tooltipArrowStyles: {} }
+    return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement }
   })
 }

From 7268d19bb90902fd17005ddbbe727e2ac20c426a Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Mon, 6 Mar 2023 17:52:00 -0300
Subject: [PATCH 2/4] test: update ss and add `place` to expected object

---
 .../__snapshots__/tooltip-attributes.spec.js.snap  |  4 ++--
 src/test/__snapshots__/tooltip-props.spec.js.snap  | 14 +++++++-------
 src/test/utils.spec.js                             |  6 ++++--
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/test/__snapshots__/tooltip-attributes.spec.js.snap b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
index 848cdcf6..15c3ba94 100644
--- a/src/test/__snapshots__/tooltip-attributes.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
@@ -9,7 +9,7 @@ exports[`tooltip attributes basic tooltip 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -30,7 +30,7 @@ exports[`tooltip attributes tooltip with place 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-right"
     role="tooltip"
   >
     Hello World!
diff --git a/src/test/__snapshots__/tooltip-props.spec.js.snap b/src/test/__snapshots__/tooltip-props.spec.js.snap
index 03fb4c21..49aa69e7 100644
--- a/src/test/__snapshots__/tooltip-props.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-props.spec.js.snap
@@ -8,7 +8,7 @@ exports[`tooltip props basic tooltip 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -27,7 +27,7 @@ exports[`tooltip props clickable tooltip 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip undefined"
+    class="react-tooltip undefined react-tooltip__place-top"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -50,7 +50,7 @@ exports[`tooltip props tooltip with custom position 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -79,7 +79,7 @@ exports[`tooltip props tooltip with delay show 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -98,7 +98,7 @@ exports[`tooltip props tooltip with float 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -117,7 +117,7 @@ exports[`tooltip props tooltip with html 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     <span>
@@ -141,7 +141,7 @@ exports[`tooltip props tooltip with place 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-right"
     role="tooltip"
   >
     Hello World!
diff --git a/src/test/utils.spec.js b/src/test/utils.spec.js
index 1f37a885..8c4cde1a 100644
--- a/src/test/utils.spec.js
+++ b/src/test/utils.spec.js
@@ -12,7 +12,7 @@ describe('compute positions', () => {
       tooltipArrowReference: null,
     })
 
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
+    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {}, place: 'top' })
   })
 
   test('empty tooltip reference element', async () => {
@@ -23,7 +23,7 @@ describe('compute positions', () => {
       tooltipArrowReference: null,
     })
 
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
+    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {}, place: 'top' })
   })
 
   test('empty tooltip arrow reference element', async () => {
@@ -41,6 +41,7 @@ describe('compute positions', () => {
         left: '5px',
         top: '10px',
       },
+      place: 'bottom',
     })
   })
 
@@ -65,6 +66,7 @@ describe('compute positions', () => {
         left: '5px',
         top: '-10px',
       },
+      place: 'top',
     })
   })
 })

From 481ec7917bbba231fe21950895936e14e6443632 Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Mon, 6 Mar 2023 17:57:11 -0300
Subject: [PATCH 3/4] refactor: class name with interpolated placement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤦‍♀️
---
 src/components/Tooltip/Tooltip.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 67c62c5c..eec3337a 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -519,15 +519,18 @@ const Tooltip = ({
     <WrapperElement
       id={id}
       role="tooltip"
-      className={classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
-        [styles['show']]: canShow,
-        [styles['fixed']]: positionStrategy === 'fixed',
-        [styles['clickable']]: clickable,
-        'react-tooltip__place-top': actualPlacement === 'top',
-        'react-tooltip__place-right': actualPlacement === 'right',
-        'react-tooltip__place-bottom': actualPlacement === 'bottom',
-        'react-tooltip__place-left': actualPlacement === 'left',
-      })}
+      className={classNames(
+        'react-tooltip',
+        styles['tooltip'],
+        styles[variant],
+        className,
+        `react-tooltip__place-${actualPlacement}`,
+        {
+          [styles['show']]: canShow,
+          [styles['fixed']]: positionStrategy === 'fixed',
+          [styles['clickable']]: clickable,
+        },
+      )}
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
     >

From 07a11b914309f71e2cbed803fd5aca3ba0bed538 Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Mon, 6 Mar 2023 18:17:00 -0300
Subject: [PATCH 4/4] test: update snapshot

---
 src/test/__snapshots__/tooltip-props.spec.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/test/__snapshots__/tooltip-props.spec.js.snap b/src/test/__snapshots__/tooltip-props.spec.js.snap
index 49aa69e7..fda5432e 100644
--- a/src/test/__snapshots__/tooltip-props.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-props.spec.js.snap
@@ -27,7 +27,7 @@ exports[`tooltip props clickable tooltip 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip undefined react-tooltip__place-top"
+    class="react-tooltip react-tooltip__place-top undefined"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >