@cypress-design/react-tooltip 0.6.3 → 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 30.4s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 42.9s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/Tooltip.tsx

@@ -45,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 = {
@@ -65,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,
@@ -113,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

@@ -98,4 +98,19 @@ describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
   }
 
   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,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"}
+{"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) {
@@ -33517,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,
@@ -33547,18 +33551,17 @@ var Tooltip = function (_a) {
             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';
@@ -33621,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"> */