infinity-ui-elements 1.15.1 → 1.15.3

package/dist/index.js

@@ -5335,7 +5335,10 @@ var Content2 = HoverCardContent;
 var Arrow2 = HoverCardArrow;
 
 const tooltipVariants = classVarianceAuthority.cva("z-[9998] bg-popup-fill-intense text-action-ink-on-primary-normal border border-popup-outline-subtle flex flex-col p-4 rounded-xlarge min-w-[200px] max-w-[300px] shadow-[0_4px_20px_rgba(0,0,0,0.15)]");
-const Tooltip = React__namespace.forwardRef(({ children, heading, description, placement = "top", showArrow = true, className, delay = 200, disabled = false, }, ref) => {
+const Tooltip = React__namespace.forwardRef(({ children, heading, description, placement = "top", showArrow = true, className, delay = 200, disabled = false, trigger = "hover", }, ref) => {
+    const [open, setOpen] = React__namespace.useState(false);
+    const triggerRef = React__namespace.useRef(null);
+    const contentRef = React__namespace.useRef(null);
     const { side, align } = React__namespace.useMemo(() => {
         switch (placement) {
             case "top-start":
@@ -5353,10 +5356,65 @@ const Tooltip = React__namespace.forwardRef(({ children, heading, description, p
                 return { side: "top", align: "center" };
         }
     }, [placement]);
-    if (disabled) {
-        return children;
-    }
-    return (jsxRuntime.jsxs(Root2, { openDelay: delay, closeDelay: 250, children: [jsxRuntime.jsx(Trigger, { asChild: true, children: children }), jsxRuntime.jsx(Portal, { children: jsxRuntime.jsxs(Content2, { ref: ref, role: "tooltip", side: side, align: align, sideOffset: 14, collisionPadding: 8, className: cn(tooltipVariants(), className), children: [showArrow && (jsxRuntime.jsx(Arrow2, { width: 12, height: 6, className: "fill-popup-fill-intense" })), jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-2", children: [heading && (jsxRuntime.jsx(Text, { variant: "body", size: "medium", weight: "semibold", color: "onPrimary", children: heading })), jsxRuntime.jsx(Text, { variant: "body", size: "small", weight: "regular", color: "onPrimary", children: description })] })] }) })] }));
+    const mergeRefs = (...refs) => {
+        return (node) => {
+            refs.forEach((currentRef) => {
+                if (typeof currentRef === "function") {
+                    currentRef(node);
+                    return;
+                }
+                if (currentRef && typeof currentRef === "object") {
+                    currentRef.current = node;
+                }
+            });
+        };
+    };
+    const triggerChild = React__namespace.cloneElement(children, {
+        ref: mergeRefs(triggerRef, children.ref),
+        onClick: (event) => {
+            if (trigger === "click" && !disabled) {
+                setOpen((prev) => !prev);
+            }
+            children.props.onClick?.(event);
+        },
+    });
+    React__namespace.useEffect(() => {
+        if (disabled || trigger !== "click" || !open)
+            return;
+        const handlePointerDownOutside = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            if (triggerRef.current?.contains(target) ||
+                contentRef.current?.contains(target)) {
+                return;
+            }
+            setOpen(false);
+        };
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handlePointerDownOutside);
+        document.addEventListener("touchstart", handlePointerDownOutside);
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDownOutside);
+            document.removeEventListener("touchstart", handlePointerDownOutside);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [disabled, open, trigger]);
+    React__namespace.useEffect(() => {
+        if (disabled) {
+            setOpen(false);
+        }
+    }, [disabled]);
+    return (jsxRuntime.jsxs(Root2, { open: trigger === "click" || disabled ? (disabled ? false : open) : undefined, onOpenChange: (nextOpen) => {
+            if (!disabled && trigger === "hover") {
+                setOpen(nextOpen);
+            }
+        }, openDelay: delay, closeDelay: 250, children: [jsxRuntime.jsx(Trigger, { asChild: true, children: triggerChild }), jsxRuntime.jsx(Portal, { children: jsxRuntime.jsxs(Content2, { ref: mergeRefs(contentRef, ref), role: "tooltip", side: side, align: align, sideOffset: 14, collisionPadding: 8, className: cn(tooltipVariants(), className), children: [showArrow && (jsxRuntime.jsx(Arrow2, { width: 12, height: 6, className: "fill-popup-fill-intense" })), jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-2", children: [heading && (jsxRuntime.jsx(Text, { variant: "body", size: "medium", weight: "semibold", color: "onPrimary", children: heading })), typeof description === "string" ? (jsxRuntime.jsx(Text, { variant: "body", size: "small", weight: "regular", color: "onPrimary", children: description })) : (description)] })] }) })] }));
 });
 Tooltip.displayName = "Tooltip";
 
@@ -6837,7 +6895,7 @@ const TextField = React__namespace.forwardRef(({ label, helperText, errorText, s
 });
 TextField.displayName = "TextField";
 
-const Select = React__namespace.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, showLeadingIcon = false, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+const Select = React__namespace.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, showLeadingIcon = false, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, onClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
@@ -6866,16 +6924,31 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
             setIsOpen(newOpen);
         }
     };
-    const handleTriggerContainerClick = (event) => {
+    const shouldIgnoreOpenInteraction = (target) => {
+        if (!(target instanceof HTMLElement))
+            return true;
+        if (dropdownContainerRef.current?.contains(target))
+            return true;
+        if (target.closest("button") || target.closest("a"))
+            return true;
+        return false;
+    };
+    /** Open dropdown from any pointer activation on the composite (label, helper, input row, icons). */
+    const handleCompositePointerActivate = (target) => {
         if (isDisabled || isLoading)
             return;
-        const target = event.target;
-        // Let clear/other explicit buttons and links behave normally.
-        if (target.closest("button") || target.closest("a"))
+        if (shouldIgnoreOpenInteraction(target))
             return;
-        // Open the dropdown when clicking anywhere on the trigger area.
         handleOpenChange(true);
     };
+    const handleTriggerContainerPointerDownCapture = (event) => {
+        if (event.button !== undefined && event.button !== 0)
+            return;
+        handleCompositePointerActivate(event.target);
+    };
+    const handleTriggerContainerClickCapture = (event) => {
+        handleCompositePointerActivate(event.target);
+    };
     const handleSelect = (option) => {
         if (controlledValue === undefined) {
             setUncontrolledValue(option.value);
@@ -7022,7 +7095,11 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
     const displaySuffix = suffix ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
     // Render dropdown menu content
     const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: isMobile ? "full" : widthStyle, unstyled: isMobile }));
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: "relative w-full", onClickCapture: handleTriggerContainerClick, children: [jsxRuntime.jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: () => handleOpenChange(true), onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative w-full min-w-0", !isDisabled && !isLoading && "cursor-pointer"), onPointerDownCapture: handleTriggerContainerPointerDownCapture, onClickCapture: handleTriggerContainerClickCapture, children: [jsxRuntime.jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: (event) => {
+                    onClick?.(event);
+                    if (!isDisabled && !isLoading)
+                        handleOpenChange(true);
+                }, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
                     ? "top-full mt-1"
                     : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
 });