@conveyorhq/arrow-ds 1.165.0 → 1.166.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.165.0",
+  "version": "1.166.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Tooltip/Tooltip.d.ts

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { PopoverTooltipSharedProps } from "../Popover";
 export interface TooltipProps extends PopoverTooltipSharedProps {
-    delay?: number;
+    delay?: number | {
+        show?: number;
+        hide?: number;
+    };
     theme?: "light" | "dark";
     hideArrow?: boolean;
     open?: boolean;
     setOpen?(open: boolean): void;
 }
+type ReferenceRenderFunction = (props: {
+    isOpen: boolean;
+}) => ReactElement;
+export declare const TooltipReference: React.ForwardRefExoticComponent<{
+    children: ReferenceRenderFunction | ReactElement;
+} & React.RefAttributes<HTMLDivElement>>;
 export declare const Tooltip: (props: TooltipProps) => React.JSX.Element;
+export {};

package/public/components/Tooltip/Tooltip.js

@@ -26,17 +26,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
+exports.Tooltip = exports.TooltipReference = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
 const hooks_1 = require("../../hooks");
+const Box_1 = require("../Box");
 const Popover_1 = require("../Popover");
 const types_1 = require("../../types");
 const context_1 = require("./context");
+const DEFAULT_DELAY = 200;
 const cn = "Tooltip";
+exports.TooltipReference = react_1.default.forwardRef(({ children, ...props }, ref) => {
+    const { isOpen } = (0, context_1.useTooltipContext)();
+    return (react_1.default.createElement(Box_1.Box, { ref: ref, ...props }, typeof children === "function" ? children({ isOpen }) : children));
+});
 const Tooltip = (props) => {
-    const { isVisible: isVisibleInitial = false, open: isOpenControlled, setOpen: setOpenControlled, children, referenceElement, placement = "bottom", className, delay = 200, theme = "dark", hideArrow, style, ...rest } = props;
+    const { isVisible: isVisibleInitial = false, open: isOpenControlled, setOpen: setOpenControlled, children, referenceElement, placement = "bottom", className, delay, theme = "dark", hideArrow, style, ...rest } = props;
     const [isOpenUncontrolled, setOpenUncontrolled] = (0, react_1.useState)(isVisibleInitial);
     const open = isOpenControlled !== null && isOpenControlled !== void 0 ? isOpenControlled : isOpenUncontrolled;
     const setOpen = setOpenControlled !== null && setOpenControlled !== void 0 ? setOpenControlled : setOpenUncontrolled;
@@ -44,6 +50,24 @@ const Tooltip = (props) => {
     const isHoveringPopoverRef = (0, react_1.useRef)(false);
     const referenceTimoutRef = (0, react_1.useRef)(null);
     const popoverTimoutRef = (0, react_1.useRef)(null);
+    const showDelay = (0, react_1.useMemo)(() => {
+        if (typeof delay === "number") {
+            return delay;
+        }
+        if (typeof delay !== "undefined" && typeof delay.show === "number") {
+            return delay.show;
+        }
+        return DEFAULT_DELAY;
+    }, [delay]);
+    const hideDelay = (0, react_1.useMemo)(() => {
+        if (typeof delay === "number") {
+            return delay;
+        }
+        if (typeof delay !== "undefined" && typeof delay.hide === "number") {
+            return delay.hide;
+        }
+        return DEFAULT_DELAY;
+    }, [delay]);
     (0, react_1.useEffect)(() => {
         if (isVisibleInitial) {
             setOpen(true);
@@ -60,7 +84,7 @@ const Tooltip = (props) => {
         };
     });
     const close = () => {
-        if (!isHoveringPopoverRef.current) {
+        if (!isHoveringPopoverRef.current && !isHoveringReferenceRef.current) {
             setOpen(false);
         }
     };
@@ -71,14 +95,14 @@ const Tooltip = (props) => {
                 if (isHoveringReferenceRef.current) {
                     setOpen(true);
                 }
-            }, delay);
+            }, showDelay);
             referenceTimoutRef.current = referenceTimeout;
         }
     };
     const handleMouseLeave = () => {
         isHoveringReferenceRef.current = false;
         if (open) {
-            const popoverTimeout = setTimeout(close, delay);
+            const popoverTimeout = setTimeout(close, hideDelay);
             popoverTimoutRef.current = popoverTimeout;
         }
     };
@@ -90,7 +114,7 @@ const Tooltip = (props) => {
     const handlePopoverMouseLeave = () => {
         isHoveringPopoverRef.current = false;
         if (open) {
-            const popoverTimeout = setTimeout(close, delay);
+            const popoverTimeout = setTimeout(close, hideDelay);
             popoverTimoutRef.current = popoverTimeout;
         }
     };

package/src/components/Tooltip/Tooltip.stories.mdx

@@ -11,6 +11,7 @@ import { Stack } from "../Stack";
 import { Link } from "../Link";
 import { Text } from "../Text";
 import { Tooltip } from "./Tooltip";
+import { TooltipLink } from "./TooltipLink";
 import { useTooltipContext } from "./context";
 
 <Meta title="Components/Popovers/Tooltip" component={Tooltip} />
@@ -323,3 +324,33 @@ export const MyButton = React.forwardRef((props, ref) => {
     </Box>
   </Story>
 </Canvas>
+
+## Delay
+
+The default delay is 200ms. The delay is necessary to keep the popover open when
+the mouse moves from the reference element to the popover. This is important if
+the popover has a link or some other content that can be interacted with.
+
+The delay can be a number in ms, or it can be an object with `show` and `hide`
+keys. Both object keys are optional, and if either are omitted, then the default
+delay will be used.
+
+<Canvas>
+  <Story name="Tooltip delay">
+    <Box className="px-8">
+      <Tooltip
+        placement="right"
+        delay={{
+          show: 100,
+          hide: 1000,
+        }}
+        referenceElement={<Stack className="inline-flex p-1">Hover me</Stack>}
+      >
+        <Flex className="flex-col" style={{ width: "150px" }}>
+          <Flex>I have a 100ms show delay and 1000ms hide delay</Flex>
+          <TooltipLink href="/">This is a Tooltip link</TooltipLink>
+        </Flex>
+      </Tooltip>
+    </Box>
+  </Story>
+</Canvas>

package/src/components/Tooltip/Tooltip.tsx

@@ -4,21 +4,28 @@ import React, {
   useEffect,
   useMemo,
   useState,
+  ReactElement,
 } from "react";
 import classnames from "classnames";
 
 import { bem } from "../../utilities/bem";
 import { useKeyPress } from "../../hooks";
 
+import { Box } from "../Box";
 import { Popover, PopoverTooltipSharedProps } from "../Popover";
 import { KEY_CODE } from "../../types";
-import { TooltipContext } from "./context";
+import { TooltipContext, useTooltipContext } from "./context";
 
 export interface TooltipProps extends PopoverTooltipSharedProps {
   /**
    * Number of milliseconds to delay the disclosure of the tooltip
    */
-  delay?: number;
+  delay?:
+    | number
+    | {
+        show?: number;
+        hide?: number;
+      };
   /**
    * Controls the background and text color
    */
@@ -37,8 +44,26 @@ export interface TooltipProps extends PopoverTooltipSharedProps {
   setOpen?(open: boolean): void;
 }
 
+const DEFAULT_DELAY = 200;
 const cn = "Tooltip";
 
+type ReferenceRenderFunction = (props: { isOpen: boolean }) => ReactElement;
+
+export const TooltipReference = React.forwardRef<
+  HTMLDivElement,
+  {
+    children: ReferenceRenderFunction | ReactElement;
+  }
+>(({ children, ...props }, ref) => {
+  const { isOpen } = useTooltipContext();
+
+  return (
+    <Box ref={ref} {...props}>
+      {typeof children === "function" ? children({ isOpen }) : children}
+    </Box>
+  );
+});
+
 export const Tooltip = (props: TooltipProps) => {
   const {
     isVisible: isVisibleInitial = false,
@@ -48,7 +73,7 @@ export const Tooltip = (props: TooltipProps) => {
     referenceElement,
     placement = "bottom",
     className,
-    delay = 200,
+    delay,
     theme = "dark",
     hideArrow,
     style,
@@ -63,6 +88,30 @@ export const Tooltip = (props: TooltipProps) => {
   const referenceTimoutRef = useRef<null | NodeJS.Timeout>(null);
   const popoverTimoutRef = useRef<null | NodeJS.Timeout>(null);
 
+  const showDelay = useMemo(() => {
+    if (typeof delay === "number") {
+      return delay;
+    }
+
+    if (typeof delay !== "undefined" && typeof delay.show === "number") {
+      return delay.show;
+    }
+
+    return DEFAULT_DELAY;
+  }, [delay]);
+
+  const hideDelay = useMemo(() => {
+    if (typeof delay === "number") {
+      return delay;
+    }
+
+    if (typeof delay !== "undefined" && typeof delay.hide === "number") {
+      return delay.hide;
+    }
+
+    return DEFAULT_DELAY;
+  }, [delay]);
+
   useEffect(() => {
     if (isVisibleInitial) {
       setOpen(true);
@@ -81,7 +130,7 @@ export const Tooltip = (props: TooltipProps) => {
   });
 
   const close = () => {
-    if (!isHoveringPopoverRef.current) {
+    if (!isHoveringPopoverRef.current && !isHoveringReferenceRef.current) {
       setOpen(false);
     }
   };
@@ -94,7 +143,7 @@ export const Tooltip = (props: TooltipProps) => {
         if (isHoveringReferenceRef.current) {
           setOpen(true);
         }
-      }, delay);
+      }, showDelay);
       referenceTimoutRef.current = referenceTimeout;
     }
   };
@@ -103,7 +152,7 @@ export const Tooltip = (props: TooltipProps) => {
     isHoveringReferenceRef.current = false;
 
     if (open) {
-      const popoverTimeout = setTimeout(close, delay);
+      const popoverTimeout = setTimeout(close, hideDelay);
       popoverTimoutRef.current = popoverTimeout;
     }
   };
@@ -118,7 +167,7 @@ export const Tooltip = (props: TooltipProps) => {
     isHoveringPopoverRef.current = false;
 
     if (open) {
-      const popoverTimeout = setTimeout(close, delay);
+      const popoverTimeout = setTimeout(close, hideDelay);
       popoverTimoutRef.current = popoverTimeout;
     }
   };