@cypress-design/react-tooltip 0.0.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @cypress-design/react-tooltip
 
+## 0.3.0
+
+### Minor Changes
+
+- [#58](https://github.com/cypress-io/cypress-design/pull/58) [`ee05fa5`](https://github.com/cypress-io/cypress-design/commit/ee05fa5bf0caddf16521636ce7a26a19a5103025) Thanks [@elevatebart](https://github.com/elevatebart)! - Add interactive & forcePlacement props
+
+## 0.2.0
+
+### Minor Changes
+
+- [#53](https://github.com/cypress-io/cypress-design/pull/53) [`a9a616b`](https://github.com/cypress-io/cypress-design/commit/a9a616bc4684252fcd71e4a82d2141bdfbea32bc) Thanks [@elevatebart](https://github.com/elevatebart)! - - add a default font color when light and dark mode are used
+  - add disabled prop to tooltip
+
+* [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
+## 0.1.0
+
+### Minor Changes
+
+- [#44](https://github.com/cypress-io/cypress-design/pull/44) [`2fdaf6b`](https://github.com/cypress-io/cypress-design/commit/2fdaf6be6f81a2a851761258347ed213577c5b26) Thanks [@elevatebart](https://github.com/elevatebart)! - Add missing descriptions of props in button, tooltip, checkbox
+
 ## 0.0.2
 
 ### Patch Changes

package/Tooltip.rootstory.tsx

@@ -5,10 +5,12 @@ import Tooltip from './Tooltip'
 export default ({
   color = 'light',
   placement,
+  disabled,
   tabIndex,
 }: {
   color?: 'light' | 'dark'
   placement?: Placement
+  disabled?: boolean
   tabIndex?: number
 } = {}) => (
   <div className="center flex flex-col items-center gap-20">
@@ -18,9 +20,30 @@ export default ({
       color={color}
       placement={placement}
       tabIndex={tabIndex}
+      disabled={disabled}
     >
       <div>Hover Me (dynamic: {placement?.toString()})</div>
     </Tooltip>
+    <Tooltip
+      className="bg-red-200 p-4 w-1/2"
+      popper={
+        <div className="h-200px flex items-center justify-center">Popover</div>
+      }
+      color={color}
+      placement="top"
+      forcePlacement
+    >
+      <div>Force Placement to the top</div>
+    </Tooltip>
+    <Tooltip
+      className="bg-red-200 p-4 w-1/2"
+      popper={<div>Popover</div>}
+      color={color}
+      placement={placement}
+      interactive
+    >
+      <div>Interactive {placement?.toString()}</div>
+    </Tooltip>
     {(['top', 'right', 'bottom', 'left', 'top-start'] as const).map(
       (placement) => (
         <Tooltip
@@ -29,6 +52,7 @@ export default ({
           key={placement}
           color={color}
           tabIndex={tabIndex}
+          disabled={disabled}
           popper={
             <div className="bg-jade-200 text-gray-800 p-4">
               Popover ({placement})

package/Tooltip.tsx

@@ -17,12 +17,34 @@ import {
 } from '@floating-ui/react-dom-interactions'
 
 export interface TooltipProps {
+  /**
+   * Where the tooltip should be placed relative to the target.
+   */
   placement?: Placement
+  /**
+   * background color of the tooltip.
+   */
   color?: 'light' | 'dark'
   className?: string
   tabIndex?: number | string
   children?: React.ReactNode
+  /**
+   * The content of the tooltip.
+   */
   popper?: React.ReactNode
+  /**
+   * Disable the tooltip.
+   * This hides the popper and makes the tooltip inactive.
+   */
+  disabled?: boolean
+  /**
+   * If true, the tooltip will be hidden when hovering the popper/tooltip
+   */
+  interactive?: boolean
+  /**
+   * If set, the tooltip will always respect the given placement
+   */
+  forcePlacement?: boolean
 }
 
 const ROTATE_MAP = {
@@ -34,7 +56,17 @@ const ROTATE_MAP = {
 
 export const Tooltip: React.FC<
   TooltipProps & React.HTMLProps<HTMLDivElement>
-> = ({ placement, color = 'light', className, children, popper, ...rest }) => {
+> = ({
+  placement,
+  color = 'light',
+  className,
+  children,
+  popper,
+  disabled,
+  interactive,
+  forcePlacement,
+  ...rest
+}) => {
   const arrowRef = React.useRef(null)
   const [open, setOpen] = React.useState(false)
 
@@ -64,20 +96,34 @@ export const Tooltip: React.FC<
     placement,
     open,
     onOpenChange: setOpen,
-    middleware: [flip(), offset(0), arrow({ element: arrowRef, padding: 24 })],
+    middleware: [
+      forcePlacement
+        ? {
+            name: 'no-flip',
+            fn: (obj) => obj,
+          }
+        : flip(),
+      offset(0),
+      arrow({ element: arrowRef, padding: 24 }),
+    ],
     whileElementsMounted: autoUpdate,
   })
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, {
-      handleClose: safePolygon(),
+      handleClose: interactive ? safePolygon() : undefined,
+      enabled: !disabled,
+    }),
+    useFocus(context, {
+      enabled: !disabled,
     }),
-    useFocus(context),
     useRole(context, { role: 'tooltip' }),
     useDismiss(context),
   ])
 
-  const placementSide = calculatedPlacement.split('-')[0]
+  const placementSide = calculatedPlacement.split(
+    '-'
+  )[0] as keyof typeof ROTATE_MAP
   const arrowRotate = ROTATE_MAP[placementSide]
 
   let arrowXRule = 'left',
@@ -94,6 +140,27 @@ export const Tooltip: React.FC<
     arrowYRule = 'top'
   }
 
+  const getColors = () => {
+    switch (color) {
+      case 'light':
+        return {
+          svg: 'stroke-gray-100 fill-white',
+          block: 'text-gray-900 border-gray-100 shadow-gray-100',
+          background: 'bg-white',
+        }
+      case 'dark':
+        return {
+          svg: 'stroke-gray-800 fill-gray-900',
+          block: 'text-white shadow-gray-800 border-gray-800',
+          background: 'bg-gray-900',
+        }
+      default:
+        return {}
+    }
+  }
+
+  const colors = getColors()
+
   return (
     <>
       <div
@@ -105,7 +172,7 @@ export const Tooltip: React.FC<
         {children}
       </div>
       <FloatingPortal>
-        {open && (
+        {open && !disabled && (
           <div
             {...getFloatingProps({
               ref: floating,
@@ -117,45 +184,44 @@ export const Tooltip: React.FC<
               },
             })}
           >
-            <svg
-              ref={arrowRef}
-              viewBox="0 0 48 48"
-              width="24"
-              height="24"
-              className={clsx('absolute', [
-                color === 'dark' && 'stroke-gray-800 fill-gray-900',
-                color === 'light' && 'stroke-gray-100 fill-white',
-              ])}
-              style={{
-                transform: `rotate(${arrowRotate}deg)`,
-                filter:
-                  placementSide === 'bottom' || color === 'dark'
-                    ? undefined
-                    : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
-                [arrowXRule]: `${arrowX ?? -6}px`,
-                [arrowYRule]: `${arrowY ?? -6}px`,
-              }}
-              fill="none"
-            >
-              <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
-              <path
-                d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
-                stroke-width="2"
-              />
-            </svg>
             <div
-              className={clsx(
-                'rounded shadow border p-8px text-16px leading-24px min-w-160px text-center',
-                [
-                  color === 'dark' &&
-                    'bg-gray-900 shadow-gray-800 border-gray-800',
-                  color === 'light' &&
-                    'bg-white shadow-gray-100 border-gray-100',
-                  (!x || !y) && 'invisible',
-                ]
-              )}
+              className={clsx('rounded shadow border', [
+                colors.background,
+                colors.block,
+                (!x || !y) && 'invisible',
+              ])}
             >
-              {popper}
+              <svg
+                ref={arrowRef}
+                viewBox="0 0 48 48"
+                width="24"
+                height="24"
+                className={clsx('absolute z-10', colors.svg)}
+                style={{
+                  transform: `rotate(${arrowRotate}deg)`,
+                  filter:
+                    placementSide === 'bottom' || color === 'dark'
+                      ? undefined
+                      : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
+                  [arrowXRule]: `${arrowX ?? -6}px`,
+                  [arrowYRule]: `${arrowY ?? -6}px`,
+                }}
+                fill="none"
+              >
+                <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
+                <path
+                  d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
+                  strokeWidth="2"
+                />
+              </svg>
+              <div
+                className={clsx(
+                  'rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20',
+                  colors.background
+                )}
+              >
+                {popper}
+              </div>
             </div>
           </div>
         )}

package/dist/Tooltip.d.ts

@@ -1,12 +1,34 @@
 import * as React from 'react';
 import { Placement } from '@floating-ui/react-dom-interactions';
 export interface TooltipProps {
+    /**
+     * Where the tooltip should be placed relative to the target.
+     */
     placement?: Placement;
+    /**
+     * background color of the tooltip.
+     */
     color?: 'light' | 'dark';
     className?: string;
     tabIndex?: number | string;
     children?: React.ReactNode;
+    /**
+     * The content of the tooltip.
+     */
     popper?: React.ReactNode;
+    /**
+     * Disable the tooltip.
+     * This hides the popper and makes the tooltip inactive.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the tooltip will be hidden when hovering the popper/tooltip
+     */
+    interactive?: boolean;
+    /**
+     * If set, the tooltip will always respect the given placement
+     */
+    forcePlacement?: 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,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAiI/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,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,MAAM,GAAG,MAAM,CAAA;IAC1B,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,CA6K/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.js

@@ -30316,7 +30316,7 @@ 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, rest = __rest(_a, ["placement", "color", "className", "children", "popper"]);
+    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 arrowRef = React.useRef(null);
     var _d = React.useState(false), open = _d[0], setOpen = _d[1];
     var container = React.useState(function () {
@@ -30334,14 +30334,26 @@ var Tooltip = function (_a) {
         placement: placement,
         open: open,
         onOpenChange: setOpen,
-        middleware: [flip(), offset(0), arrow({ element: arrowRef, padding: 24 })],
+        middleware: [
+            forcePlacement
+                ? {
+                    name: 'no-flip',
+                    fn: function (obj) { return obj; }
+                }
+                : flip(),
+            offset(0),
+            arrow({ element: arrowRef, padding: 24 }),
+        ],
         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([
         useHover(context, {
-            handleClose: safePolygon()
+            handleClose: interactive ? safePolygon() : undefined,
+            enabled: !disabled
+        }),
+        useFocus(context, {
+            enabled: !disabled
         }),
-        useFocus(context),
         useRole(context, { role: 'tooltip' }),
         useDismiss(context),
     ]), getReferenceProps = _h.getReferenceProps, getFloatingProps = _h.getFloatingProps;
@@ -30360,9 +30372,28 @@ var Tooltip = function (_a) {
         arrowXRule = placementSide === 'left' ? 'right' : 'left';
         arrowYRule = 'top';
     }
+    var getColors = function () {
+        switch (color) {
+            case 'light':
+                return {
+                    svg: 'stroke-gray-100 fill-white',
+                    block: 'text-gray-900 border-gray-100 shadow-gray-100',
+                    background: 'bg-white'
+                };
+            case 'dark':
+                return {
+                    svg: 'stroke-gray-800 fill-gray-900',
+                    block: 'text-white shadow-gray-800 border-gray-800',
+                    background: 'bg-gray-900'
+                };
+            default:
+                return {};
+        }
+    };
+    var colors = getColors();
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, getReferenceProps(), { ref: reference, className: className }, rest), children),
-        React.createElement(FloatingPortal, null, open && (React.createElement("div", __assign({}, getFloatingProps({
+        React.createElement(FloatingPortal, null, open && !disabled && (React.createElement("div", __assign({}, getFloatingProps({
             ref: floating,
             style: {
                 position: strategy,
@@ -30371,28 +30402,26 @@ var Tooltip = function (_a) {
                 padding: '16px'
             }
         })),
-            React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 48", width: "24", height: "24", className: clsx('absolute', [
-                    color === 'dark' && 'stroke-gray-800 fill-gray-900',
-                    color === 'light' && 'stroke-gray-100 fill-white',
-                ]), style: (_b = {
-                        transform: "rotate(".concat(arrowRotate, "deg)"),
-                        filter: placementSide === 'bottom' || color === 'dark'
-                            ? undefined
-                            : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
-                    },
-                    _b[arrowXRule] = "".concat(arrowX !== null && arrowX !== void 0 ? arrowX : -6, "px"),
-                    _b[arrowYRule] = "".concat(arrowY !== null && arrowY !== void 0 ? arrowY : -6, "px"),
-                    _b), fill: "none" },
-                React.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
-                React.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", "stroke-width": "2" })),
-            React.createElement("div", { className: clsx('rounded shadow border p-8px text-16px leading-24px min-w-160px text-center', [
-                    color === 'dark' &&
-                        'bg-gray-900 shadow-gray-800 border-gray-800',
-                    color === 'light' &&
-                        'bg-white shadow-gray-100 border-gray-100',
+            React.createElement("div", { className: clsx('rounded shadow border', [
+                    colors.background,
+                    colors.block,
                     (!x || !y) && 'invisible',
-                ]) }, popper))))));
+                ]) },
+                React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 48", width: "24", height: "24", className: clsx('absolute z-10', colors.svg), style: (_b = {
+                            transform: "rotate(" + arrowRotate + "deg)",
+                            filter: placementSide === 'bottom' || color === 'dark'
+                                ? undefined
+                                : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
+                        },
+                        _b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : -6) + "px",
+                        _b[arrowYRule] = (arrowY !== null && arrowY !== void 0 ? arrowY : -6) + "px",
+                        _b), fill: "none" },
+                    React.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
+                    React.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", strokeWidth: "2" })),
+                React.createElement("div", { className: clsx('rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20', colors.background) }, popper)))))));
 };
 
 export { Tooltip as default };
+/* <windicss-keep class="container stroke-gray-100 fill-white text-gray-900 border-gray-100 shadow-gray-100 bg-white stroke-gray-800 fill-gray-900 text-white shadow-gray-800 border-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 text-16px leading-24px min-w-160px text-center p-8px relative z-20"> */
+
 //# sourceMappingURL=index.es.js.map