@cypress-design/react-tooltip 0.6.2 → 0.6.3

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 29.8s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 30.4s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-tooltip
 
+## 0.6.3
+
+### Patch Changes
+
+- [#259](https://github.com/cypress-io/cypress-design/pull/259) [`fdd8839`](https://github.com/cypress-io/cypress-design/commit/fdd883952476a852973adc671dadc817883251ec) Thanks [@elevatebart](https://github.com/elevatebart)! - when tooltip overflows, shift it back
+
 ## 0.6.2
 
 ### Patch Changes

package/Tooltip.tsx

@@ -5,6 +5,7 @@ import {
   offset,
   flip,
   arrow,
+  shift,
   autoUpdate,
   useFloating,
   useInteractions,
@@ -104,6 +105,7 @@ export const Tooltip: React.FC<
         : flip(),
       offset(interactive ? 0 : 16),
       arrow({ element: arrowRef, padding: 24 }),
+      shift({ padding: 16 }),
     ],
     whileElementsMounted: autoUpdate,
   })

package/TooltipReact.cy.tsx

@@ -2,12 +2,99 @@
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import TooltipStory from './Tooltip.rootstory'
+import { Placement } from '@floating-ui/react-dom-interactions'
 import assertions from '../assertions'
+import Tooltip from './Tooltip'
+
+const TooltipStoryMulti = ({
+  color = 'light',
+  placement,
+  disabled,
+  tabindex = 1,
+}: {
+  color?: 'light' | 'dark'
+  placement?: Placement
+  disabled?: boolean
+  tabindex?: number
+} = {}) => (
+  <div className="flex flex-col items-center center gap-20">
+    <Tooltip
+      className="w-1/2 p-4 bg-red-200"
+      popper={<div className="p-4 text-gray-800 bg-jade-200">PopovDyn</div>}
+      color={color}
+      placement={placement}
+      tabIndex={tabindex}
+      disabled={disabled}
+    >
+      <div>Hover Me (dynamic: {placement?.toString()})</div>
+    </Tooltip>
+    <Tooltip
+      className="w-1/2 p-4 bg-red-200"
+      popper={
+        <div className="h-[200px] flex items-center justify-center">Popov</div>
+      }
+      color={color}
+      placement="top"
+      forcePlacement
+    >
+      <div>Force Placement to the top</div>
+    </Tooltip>
+    <Tooltip
+      className="w-1/2 p-4 bg-red-200"
+      popper={<div>PopovInt</div>}
+      color={color}
+      placement={placement}
+      interactive
+    >
+      <div>Interactive {placement?.toString()}</div>
+    </Tooltip>
+    {(['top', 'right', 'bottom', 'left', 'top-start'] as const).map(
+      (placement) => (
+        <Tooltip
+          className="w-1/2 p-4 bg-indigo-200"
+          placement={placement}
+          key={placement}
+          color={color}
+          tabIndex={tabindex}
+          disabled={disabled}
+          popper={
+            <div className="p-4 text-gray-800 bg-jade-200">
+              Popover ({placement})
+            </div>
+          }
+        >
+          <div>Hover Me ({placement})</div>
+        </Tooltip>
+      )
+    )}
+  </div>
+)
 
 describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
-  function mountStory(options: Parameters<typeof TooltipStory>[0] = {}) {
-    mount(<TooltipStory {...options} tabindex={1} />)
+  function mountStory(
+    options: { single?: boolean } & Parameters<typeof TooltipStoryMulti>[0] = {}
+  ) {
+    const { single, tabindex = 1, ...rest } = options
+    if (single) {
+      mount(
+        <Tooltip
+          {...rest}
+          tabIndex={tabindex}
+          popper={
+            <div className="w-[300px]">
+              popit: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Quisquam, voluptatum.
+            </div>
+          }
+          className="m-4 p-4 bg-red-300 w-[150px]"
+        >
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+          voluptatum.
+        </Tooltip>
+      )
+    } else {
+      mount(<TooltipStoryMulti {...rest} tabindex={tabindex} />)
+    }
   }
 
   assertions(mountStory, 'react')

package/dist/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"./","sources":["Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAaV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAiL/C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"./","sources":["Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAcV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAkL/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.mjs

@@ -630,6 +630,88 @@ const offset = function (value) {
   };
 };
 
+function getCrossAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+
+/**
+ * Shifts the floating element in order to keep it in view when it will overflow
+ * a clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return {
+    name: 'shift',
+    options,
+
+    async fn(middlewareArguments) {
+      const {
+        x,
+        y,
+        placement
+      } = middlewareArguments;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = options;
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+      const mainAxis = getMainAxisFromPlacement(getSide(placement));
+      const crossAxis = getCrossAxis(mainAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = within(min, mainAxisCoord, max);
+      }
+
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = within(min, crossAxisCoord, max);
+      }
+
+      const limitedCoords = limiter.fn({ ...middlewareArguments,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return { ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y
+        }
+      };
+    }
+
+  };
+};
+
 function isWindow(value) {
   return value && value.document && value.location && value.alert && value.setInterval;
 }
@@ -33462,6 +33544,7 @@ var Tooltip = function (_a) {
                 : flip(),
             offset(interactive ? 0 : 16),
             arrow({ element: arrowRef, padding: 24 }),
+            shift({ padding: 16 }),
         ],
         whileElementsMounted: autoUpdate,
     }), x = _e.x, y = _e.y, reference = _e.reference, floating = _e.floating, strategy = _e.strategy, calculatedPlacement = _e.placement, context = _e.context, _f = _e.middlewareData.arrow, _g = _f === void 0 ? {} : _f, arrowX = _g.x, arrowY = _g.y;