@conveyorhq/arrow-ds 1.62.0 → 2.0.0-beta.10

package/public/components/Tooltip/Tooltip.js

@@ -1,81 +1,110 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = 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 Popover_1 = require("../Popover");
+const react_1 = __importDefault(require("react"));
+const Overlay_1 = __importDefault(require("react-overlays/Overlay"));
+const auto_id_1 = require("@reach/auto-id");
 const types_1 = require("../../types");
-const context_1 = require("./context");
-const cn = "Tooltip";
-const Tooltip = (props) => {
-    const { isVisible: isVisibleProp = false, children, referenceElement, placement = "bottom", className, delay = 200, style, ...rest } = props;
-    const { isOpen, onOpen, onClose } = hooks_1.useDisclosure(isVisibleProp);
-    const isHoveringReferenceRef = react_1.useRef(false);
-    const isHoveringPopoverRef = react_1.useRef(false);
-    const referenceTimoutRef = react_1.useRef(null);
-    const popoverTimoutRef = react_1.useRef(null);
-    react_1.useEffect(() => {
-        if (isVisibleProp) {
-            onOpen();
+const hooks_1 = require("../../hooks");
+const utilities_1 = require("../../utilities");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
+const Box_1 = require("../Box");
+const cn = utilities_1.bemHOF("Tooltip");
+const TooltipArrow = react_1.default.forwardRef(({ placement, style }, forwaredRef) => {
+    const generatePositionStyles = () => {
+        if (placement.startsWith("top")) {
+            return { bottom: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
         }
-    }, [isVisibleProp, onOpen]);
-    react_1.useEffect(() => {
-        return () => {
-            if (referenceTimoutRef.current) {
-                clearTimeout(referenceTimoutRef.current);
-            }
-            if (popoverTimoutRef.current) {
-                clearTimeout(popoverTimoutRef.current);
-            }
-        };
-    });
-    const close = () => {
+        if (placement.startsWith("right")) {
+            return { left: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
+        }
+        if (placement.startsWith("bottom")) {
+            return { top: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
+        }
+        if (placement.startsWith("left")) {
+            return { right: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
+        }
+        return {};
+    };
+    const positionStyles = generatePositionStyles();
+    return (react_1.default.createElement(Box_1.Box, { ref: forwaredRef, className: cn({ e: "arrow" }), style: {
+            ...style,
+            ...positionStyles,
+        } },
+        react_1.default.createElement(Box_1.Box, null)));
+});
+const Tooltip = ({ children, content, placement = "auto", delay = 200, }) => {
+    const { isOpen, onOpen, onClose } = hooks_1.useDisclosure();
+    const triggerRef = react_1.default.useRef(null);
+    const rootRef = react_1.default.useRef(null);
+    const id = `ads-tooltip-${auto_id_1.useId()}`;
+    const isHoveringTriggerRef = react_1.default.useRef(false);
+    const isHoveringPopoverRef = react_1.default.useRef(false);
+    const triggerTimoutRef = react_1.default.useRef(null);
+    const popoverTimoutRef = react_1.default.useRef(null);
+    const onHide = () => {
         if (!isHoveringPopoverRef.current) {
             onClose();
         }
     };
-    const handleMouseEnter = () => {
-        isHoveringReferenceRef.current = true;
+    const onHideDelay = () => {
+        isHoveringTriggerRef.current = false;
+        isHoveringPopoverRef.current = false;
+        if (isOpen) {
+            const popoverTimeout = setTimeout(onHide, delay);
+            popoverTimoutRef.current = popoverTimeout;
+        }
+    };
+    const onShow = () => {
+        if (!isOpen) {
+            onOpen();
+        }
+    };
+    const onShowDelay = () => {
+        isHoveringTriggerRef.current = true;
+        isHoveringPopoverRef.current = true;
         if (!isOpen) {
             const referenceTimeout = setTimeout(() => {
-                if (isHoveringReferenceRef.current) {
+                if (isHoveringTriggerRef.current) {
                     onOpen();
                 }
             }, delay);
-            referenceTimoutRef.current = referenceTimeout;
+            triggerTimoutRef.current = referenceTimeout;
         }
     };
-    const handleMouseLeave = () => {
-        isHoveringReferenceRef.current = false;
+    react_1.default.useEffect(() => {
+        return () => {
+            if (triggerTimoutRef.current) {
+                clearTimeout(triggerTimoutRef.current);
+            }
+            if (popoverTimoutRef.current) {
+                clearTimeout(popoverTimoutRef.current);
+            }
+        };
+    });
+    hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
         if (isOpen) {
-            const popoverTimeout = setTimeout(close, delay);
-            popoverTimoutRef.current = popoverTimeout;
+            onHide();
         }
-    };
+    });
+    const triggerProps = ({ onMouseEnter, onMouseLeave, onMouseDown, onFocus, onBlur, onKeyDown, ...rest }) => ({
+        ref: triggerRef,
+        "aria-describedby": isOpen ? id : undefined,
+        onMouseEnter: utilities_1.mergeEventHandlers(onMouseEnter, onShowDelay),
+        onMouseLeave: utilities_1.mergeEventHandlers(onMouseLeave, onHideDelay),
+        onMouseDown: utilities_1.mergeEventHandlers(onMouseDown, onHideDelay),
+        onFocus: utilities_1.mergeEventHandlers(onFocus, onShow),
+        onBlur: utilities_1.mergeEventHandlers(onBlur, onHide),
+        onKeyDown: utilities_1.mergeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                onHide();
+            }
+        }),
+        ...rest,
+    });
     const handlePopoverMouseEnter = () => {
         if (!isHoveringPopoverRef.current) {
             isHoveringPopoverRef.current = true;
@@ -84,48 +113,18 @@ const Tooltip = (props) => {
     const handlePopoverMouseLeave = () => {
         isHoveringPopoverRef.current = false;
         if (isOpen) {
-            const popoverTimeout = setTimeout(close, delay);
+            const popoverTimeout = setTimeout(onHide, delay);
             popoverTimoutRef.current = popoverTimeout;
         }
     };
-    hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
-        if (isOpen && !isVisibleProp) {
-            close();
-        }
-    });
-    const referenceElementWithMouseHandlers = !isVisibleProp
-        ? react_1.cloneElement(referenceElement, {
-            onMouseEnter: () => {
-                handleMouseEnter();
-                if (typeof referenceElement.props.onMouseEnter === "function") {
-                    referenceElement.props.onMouseEnter();
-                }
-            },
-            onMouseLeave: () => {
-                handleMouseLeave();
-                if (typeof referenceElement.props.onMouseLeave === "function") {
-                    referenceElement.props.onMouseLeave();
-                }
-            },
-            onFocus: () => {
-                handleMouseEnter();
-                if (typeof referenceElement.props.onFocus === "function") {
-                    referenceElement.props.onFocus();
-                }
-            },
-            onBlur: () => {
-                handleMouseLeave();
-                if (typeof referenceElement.props.onBlur === "function") {
-                    referenceElement.props.onBlur();
-                }
-            },
-            tabIndex: 0,
-        })
-        : referenceElement;
-    const context = react_1.useMemo(() => ({
-        isOpen,
-    }), [isOpen]);
-    return children ? (react_1.default.createElement(context_1.TooltipContext.Provider, { value: context },
-        react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: true, isVisible: isOpen, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default(bem_1.bem(cn), className), onMouseEnter: !isVisibleProp ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleProp ? handlePopoverMouseLeave : undefined, style: style }, rest), children))) : (referenceElement);
+    return content ? (react_1.default.createElement(Box_1.Box, { ref: rootRef },
+        react_1.default.cloneElement(react_1.default.Children.only(children), {
+            ...triggerProps(children.props),
+        }),
+        content && (react_1.default.createElement(Overlay_1.default, { rootClose: true, show: isOpen, offset: [0, 8], onHide: onHide, container: rootRef, target: triggerRef, placement: placement, flip: placement && placement.indexOf("auto") !== -1 }, ({ props: contentProps, arrowProps, placement: overlayPlacement, }) => {
+            return (react_1.default.createElement(Box_1.Box, Object.assign({ id: id, className: cn(), "data-component": "tooltip", onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave }, contentProps),
+                react_1.default.createElement(TooltipArrow, { ref: arrowProps.ref, placement: overlayPlacement, style: arrowProps.style }),
+                content));
+        })))) : (children);
 };
 exports.Tooltip = Tooltip;