@cypress-design/react-tooltip 0.6.2 → 0.7.0

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 42.9s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @cypress-design/react-tooltip
 
+## 0.7.0
+
+### Minor Changes
+
+- [#265](https://github.com/cypress-io/cypress-design/pull/265) [`a69b7ee`](https://github.com/cypress-io/cypress-design/commit/a69b7ee3e7ca0900362b463f9925ba6ff6f4332f) Thanks [@elevatebart](https://github.com/elevatebart)! - add forceOpen prop
+
+### Patch Changes
+
+- [#265](https://github.com/cypress-io/cypress-design/pull/265) [`a69b7ee`](https://github.com/cypress-io/cypress-design/commit/a69b7ee3e7ca0900362b463f9925ba6ff6f4332f) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid creating empty divs
+
+## 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,
@@ -44,6 +45,11 @@ export interface TooltipProps {
    * If set, the tooltip will always respect the given placement
    */
   forcePlacement?: boolean
+  /**
+   * Make sure the tooltip stays always open.
+   * This is useful for debugging.
+   */
+  forceOpen?: boolean
 }
 
 const ROTATE_MAP = {
@@ -64,23 +70,17 @@ export const Tooltip: React.FC<
   disabled,
   interactive,
   forcePlacement,
+  forceOpen = false,
   ...rest
 }) => {
   const arrowRef = React.useRef(null)
   const [open, setOpen] = React.useState(false)
 
-  const [container] = React.useState(() => {
-    // This will be executed only on the initial render
-    // https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-    return document.createElement('div')
-  })
-
   React.useEffect(() => {
-    document.body.appendChild(container)
-    return () => {
-      document.body.removeChild(container)
+    if (forceOpen) {
+      setOpen(true)
     }
-  }, [])
+  }, [forceOpen])
 
   const {
     x,
@@ -104,6 +104,7 @@ export const Tooltip: React.FC<
         : flip(),
       offset(interactive ? 0 : 16),
       arrow({ element: arrowRef, padding: 24 }),
+      shift({ padding: 16 }),
     ],
     whileElementsMounted: autoUpdate,
   })
@@ -111,13 +112,13 @@ export const Tooltip: React.FC<
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, {
       handleClose: interactive ? safePolygon() : undefined,
-      enabled: !disabled,
+      enabled: !disabled && !forceOpen,
     }),
     useFocus(context, {
-      enabled: !disabled,
+      enabled: !disabled && !forceOpen,
     }),
     useRole(context, { role: 'tooltip' }),
-    useDismiss(context),
+    ...(!forceOpen ? [useDismiss(context)] : []),
   ])
 
   const placementSide = calculatedPlacement.split(

package/TooltipReact.cy.tsx

@@ -2,13 +2,115 @@
 
 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')
+
+  it('forceOpen', () => {
+    mount(
+      <div className="text-center">
+        <Tooltip
+          className="border inline-block m-16 p-3"
+          popper="should be visible"
+          forceOpen
+        >
+          make sure its open
+        </Tooltip>
+      </div>
+    )
+    cy.findByText('should be visible').should('be.visible')
+  })
 })

package/dist/Tooltip.d.ts

@@ -28,6 +28,11 @@ export interface TooltipProps {
      * If set, the tooltip will always respect the given placement
      */
     forcePlacement?: boolean;
+    /**
+     * Make sure the tooltip stays always open.
+     * This is useful for debugging.
+     */
+    forceOpen?: boolean;
 }
 export declare const Tooltip: React.FC<TooltipProps & React.HTMLProps<HTMLDivElement>>;
 export default Tooltip;

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;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA4K/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.mjs

@@ -40,6 +40,16 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 function getSide(placement) {
@@ -630,6 +640,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;
 }
@@ -33435,21 +33527,15 @@ var ROTATE_MAP = {
 };
 var Tooltip = function (_a) {
     var _b;
-    var placement = _a.placement, _c = _a.color, color = _c === void 0 ? 'light' : _c, className = _a.className, children = _a.children, popper = _a.popper, disabled = _a.disabled, interactive = _a.interactive, forcePlacement = _a.forcePlacement, rest = __rest(_a, ["placement", "color", "className", "children", "popper", "disabled", "interactive", "forcePlacement"]);
+    var placement = _a.placement, _c = _a.color, color = _c === void 0 ? 'light' : _c, className = _a.className, children = _a.children, popper = _a.popper, disabled = _a.disabled, interactive = _a.interactive, forcePlacement = _a.forcePlacement, _d = _a.forceOpen, forceOpen = _d === void 0 ? false : _d, rest = __rest(_a, ["placement", "color", "className", "children", "popper", "disabled", "interactive", "forcePlacement", "forceOpen"]);
     var arrowRef = React.useRef(null);
-    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
-    var container = React.useState(function () {
-        // This will be executed only on the initial render
-        // https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-        return document.createElement('div');
-    })[0];
+    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
     React.useEffect(function () {
-        document.body.appendChild(container);
-        return function () {
-            document.body.removeChild(container);
-        };
-    }, []);
-    var _e = useFloating({
+        if (forceOpen) {
+            setOpen(true);
+        }
+    }, [forceOpen]);
+    var _f = useFloating({
         placement: placement,
         open: open,
         onOpenChange: setOpen,
@@ -33462,20 +33548,20 @@ 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;
-    var _h = useInteractions([
+    }), x = _f.x, y = _f.y, reference = _f.reference, floating = _f.floating, strategy = _f.strategy, calculatedPlacement = _f.placement, context = _f.context, _g = _f.middlewareData.arrow, _h = _g === void 0 ? {} : _g, arrowX = _h.x, arrowY = _h.y;
+    var _j = useInteractions(__spreadArray([
         useHover(context, {
             handleClose: interactive ? safePolygon() : undefined,
-            enabled: !disabled,
+            enabled: !disabled && !forceOpen,
         }),
         useFocus(context, {
-            enabled: !disabled,
+            enabled: !disabled && !forceOpen,
         }),
-        useRole(context, { role: 'tooltip' }),
-        useDismiss(context),
-    ]), getReferenceProps = _h.getReferenceProps, getFloatingProps = _h.getFloatingProps;
+        useRole(context, { role: 'tooltip' })
+    ], (!forceOpen ? [useDismiss(context)] : []), true)), getReferenceProps = _j.getReferenceProps, getFloatingProps = _j.getFloatingProps;
     var placementSide = calculatedPlacement.split('-')[0];
     var arrowRotate = ROTATE_MAP[placementSide];
     var arrowXRule = 'left', arrowYRule = 'top';
@@ -33538,4 +33624,4 @@ var Tooltip = function (_a) {
 export { Tooltip as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="container stroke-none fill-white block text-gray-900 shadow-gray-100 border-transparent bg-white fill-gray-900 text-white shadow-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 transform filter text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20 drop-shadow"> */
+/* <wind-keep class="stroke-none fill-white block text-gray-900 shadow-gray-100 border-transparent bg-white fill-gray-900 text-white shadow-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 transform filter text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20 drop-shadow"> */