@cypress-design/react-tooltip 0.6.3 → 0.7.1

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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @cypress-design/react-tooltip
 
+## 0.7.1
+
+### Patch Changes
+
+- [#310](https://github.com/cypress-io/cypress-design/pull/310) [`a3a323f`](https://github.com/cypress-io/cypress-design/commit/a3a323fde7acf5e5407b298b4faa0c90314c6139) Thanks [@elevatebart](https://github.com/elevatebart)! - Add-eslint-react-hooks
+
+## 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,
@@ -110,20 +109,22 @@ export const Tooltip: React.FC<
     whileElementsMounted: autoUpdate,
   })
 
+  const contextHook = useDismiss(context)
+
   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 ? [contextHook] : []),
   ])
 
   const placementSide = calculatedPlacement.split(
-    '-'
+    '-',
   )[0] as keyof typeof ROTATE_MAP
   const arrowRotate = ROTATE_MAP[placementSide]
 
@@ -221,7 +222,7 @@ export const Tooltip: React.FC<
                 <div
                   className={clsx(
                     'rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20',
-                    colors.background
+                    colors.background,
                   )}
                 >
                   {popper}

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,CA8K/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.mjs

@@ -16,7 +16,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -40,7 +40,22 @@ 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));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 function getSide(placement) {
   return placement.split('-')[0];
@@ -33517,21 +33532,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 +33556,18 @@ 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 contextHook = useDismiss(context);
+    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 ? [contextHook] : []), true)), getReferenceProps = _j.getReferenceProps, getFloatingProps = _j.getFloatingProps;
     var placementSide = calculatedPlacement.split('-')[0];
     var arrowRotate = ROTATE_MAP[placementSide];
     var arrowXRule = 'left', arrowYRule = 'top';
@@ -33621,4 +33630,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"> */