@cypress-design/react-tooltip 0.2.0 → 0.3.0

package/CHANGELOG.md

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

package/Tooltip.rootstory.tsx

@@ -24,6 +24,26 @@ export default ({
     >
       <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

package/Tooltip.tsx

@@ -37,6 +37,14 @@ export interface TooltipProps {
    * 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 = {
@@ -55,6 +63,8 @@ export const Tooltip: React.FC<
   children,
   popper,
   disabled,
+  interactive,
+  forcePlacement,
   ...rest
 }) => {
   const arrowRef = React.useRef(null)
@@ -86,13 +96,22 @@ 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, {
@@ -121,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
@@ -144,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

@@ -21,6 +21,14 @@ export interface TooltipProps {
      * 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;;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;CACnB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA8I/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, disabled = _a.disabled, rest = __rest(_a, ["placement", "color", "className", "children", "popper", "disabled"]);
+    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,12 +30334,21 @@ 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, {
@@ -30363,6 +30372,25 @@ 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 && !disabled && (React.createElement("div", __assign({}, getFloatingProps({
@@ -30374,30 +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(" + 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", "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 absolute stroke-gray-800 fill-gray-900 stroke-gray-100 fill-white rounded shadow border p-8px text-16px leading-24px min-w-160px text-center bg-gray-900 shadow-gray-800 border-gray-800 bg-white shadow-gray-100 border-gray-100 invisible"> */
+/* <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