@trackunit/react-components 1.17.33-alpha-3fb17ca5f15.0 → 1.17.34

package/index.cjs.js

@@ -2875,7 +2875,7 @@ function createGrid() {
                 layout(config) {
                     // At runtime, config properties are always valid arrays (error types only exist at compile-time)
                     // We need to cast and copy readonly arrays to mutable arrays for storage
-                    // eslint-disable-next-line local-rules/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
+                    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
                     const runtimeConfig = config;
                     layouts.push({
                         layout: runtimeConfig.layout.map(row => [...row]),
@@ -2987,7 +2987,7 @@ function GridAreas({ slots, css, containerProps, validationRef, className, child
  *
  * @see https://tailwindcss.com/docs/responsive-design#container-queries
  */
-// eslint-disable-next-line local-rules/no-typescript-assertion
+// eslint-disable-next-line @trackunit/no-typescript-assertion
 const CONTAINER_BREAKPOINTS = Object.fromEntries(Object.entries(uiDesignTokens.themeContainerSize).map(([key, value]) => [`@${key}`, value]));
 
 /**
@@ -3060,7 +3060,7 @@ function isContainerBreakpoint(value) {
  * Each slot contains a data-slot attribute and gridArea style.
  */
 function createSlots(areas) {
-    // eslint-disable-next-line local-rules/no-typescript-assertion -- Object.fromEntries loses key type information
+    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Object.fromEntries loses key type information
     return Object.fromEntries(areas.map(area => [area, { "data-slot": area, style: { gridArea: area } }]));
 }
 /**
@@ -4226,8 +4226,13 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
         keyboardHandlers: resolvedActivation.keyboardHandlers,
     });
     const dismissInteraction = react$1.useDismiss(popoverContext, resolvedDismissal);
+    const hoverOptions = typeof resolvedActivation.hover === "object" ? resolvedActivation.hover : undefined;
+    const hoverEnabled = hoverOptions ? (hoverOptions.active ?? true) : resolvedActivation.hover === true;
+    const hoverInteractable = hoverOptions?.interactable ?? true;
     const hoverInteraction = react$1.useHover(popoverContext, {
-        enabled: resolvedActivation.hover,
+        enabled: hoverEnabled,
+        delay: hoverOptions?.delayed === true ? { open: 400 } : undefined,
+        handleClose: hoverEnabled === true && hoverInteractable === true ? react$1.safePolygon() : undefined,
     });
     const roleInteraction = react$1.useRole(popoverContext);
     const combinedInteractions = react$1.useInteractions([
@@ -4507,7 +4512,7 @@ const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "
         },
     },
 });
-const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge(["pointer-events-none", "origin-center"]);
+const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge(["origin-center"]);
 const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
     variants: {
         placement: {
@@ -4596,7 +4601,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, }) => {
     const [isOpen, setIsOpen] = react.useState(false);
     const arrowRef = react.useRef(null);
     const { refs, floatingStyles, context } = react$1.useFloating({
@@ -4614,12 +4619,12 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label,
         whileElementsMounted: react$1.autoUpdate,
     });
     const { isMounted } = react$1.useTransitionStatus(context);
-    // Please don't try to move this into the component body directly
-    // I tried and it caused infinite re-renders some places (for whatever reason)
+    // Please don't move this into the component body directly without testing it first
+    // I tried and it caused infinite re-renders some places
     const wrappedChildren = react.useMemo(() => {
         return jsxRuntime.jsx(reactSlot.Slot, { children: children });
     }, [children]);
-    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsxRuntime.jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, children: [jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxRuntime.jsxs(Popover, { activation: { hover: { delayed, interactable } }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsxRuntime.jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, children: [jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["inline-flex", "items-center"]);
@@ -6181,7 +6186,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
             if (stopPropagation) {
                 e.stopPropagation();
             }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
+            // eslint-disable-next-line @trackunit/no-typescript-assertion
             onClick(e);
         }
     };
@@ -8024,7 +8029,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
         setSlidingWidth(width);
     }, [validIndex]);
     return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, ref: ref, style: 
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         {
             "--sliding-left": `${slidingLeft}px`,
             "--sliding-width": `${slidingWidth}px`,
@@ -8409,7 +8414,7 @@ const useClickOutside = (el, options) => {
     const els = Array.isArray(el) ? el : [el];
     const active = options.active !== undefined ? options.active : true;
     const handler = (ev) => {
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         const target = ev.target;
         if (els.every(ref => !ref.current || !ref.current.contains(target))) {
             options.onClick(ev);

package/index.esm.js

@@ -13,7 +13,7 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import { Link, useBlocker } from '@tanstack/react-router';
 import { isEqual, omit } from 'es-toolkit';
 import { twMerge } from 'tailwind-merge';
-import { useFloating, offset, flip, shift, size, autoUpdate, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
+import { useFloating, offset, flip, shift, size, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List as List$1, Root } from '@radix-ui/react-tabs';
@@ -2873,7 +2873,7 @@ function createGrid() {
                 layout(config) {
                     // At runtime, config properties are always valid arrays (error types only exist at compile-time)
                     // We need to cast and copy readonly arrays to mutable arrays for storage
-                    // eslint-disable-next-line local-rules/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
+                    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Error tuple types only exist at compile-time; runtime values are always valid arrays
                     const runtimeConfig = config;
                     layouts.push({
                         layout: runtimeConfig.layout.map(row => [...row]),
@@ -2985,7 +2985,7 @@ function GridAreas({ slots, css, containerProps, validationRef, className, child
  *
  * @see https://tailwindcss.com/docs/responsive-design#container-queries
  */
-// eslint-disable-next-line local-rules/no-typescript-assertion
+// eslint-disable-next-line @trackunit/no-typescript-assertion
 const CONTAINER_BREAKPOINTS = Object.fromEntries(Object.entries(themeContainerSize).map(([key, value]) => [`@${key}`, value]));
 
 /**
@@ -3058,7 +3058,7 @@ function isContainerBreakpoint(value) {
  * Each slot contains a data-slot attribute and gridArea style.
  */
 function createSlots(areas) {
-    // eslint-disable-next-line local-rules/no-typescript-assertion -- Object.fromEntries loses key type information
+    // eslint-disable-next-line @trackunit/no-typescript-assertion -- Object.fromEntries loses key type information
     return Object.fromEntries(areas.map(area => [area, { "data-slot": area, style: { gridArea: area } }]));
 }
 /**
@@ -4224,8 +4224,13 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
         keyboardHandlers: resolvedActivation.keyboardHandlers,
     });
     const dismissInteraction = useDismiss(popoverContext, resolvedDismissal);
+    const hoverOptions = typeof resolvedActivation.hover === "object" ? resolvedActivation.hover : undefined;
+    const hoverEnabled = hoverOptions ? (hoverOptions.active ?? true) : resolvedActivation.hover === true;
+    const hoverInteractable = hoverOptions?.interactable ?? true;
     const hoverInteraction = useHover$1(popoverContext, {
-        enabled: resolvedActivation.hover,
+        enabled: hoverEnabled,
+        delay: hoverOptions?.delayed === true ? { open: 400 } : undefined,
+        handleClose: hoverEnabled === true && hoverInteractable === true ? safePolygon() : undefined,
     });
     const roleInteraction = useRole(popoverContext);
     const combinedInteractions = useInteractions([
@@ -4505,7 +4510,7 @@ const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor
         },
     },
 });
-const cvaTooltipPopover = cvaMerge(["pointer-events-none", "origin-center"]);
+const cvaTooltipPopover = cvaMerge(["origin-center"]);
 const cvaTooltipPopoverTail = cvaMerge("", {
     variants: {
         placement: {
@@ -4594,7 +4599,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
@@ -4612,12 +4617,12 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label,
         whileElementsMounted: autoUpdate,
     });
     const { isMounted } = useTransitionStatus(context);
-    // Please don't try to move this into the component body directly
-    // I tried and it caused infinite re-renders some places (for whatever reason)
+    // Please don't move this into the component body directly without testing it first
+    // I tried and it caused infinite re-renders some places
     const wrappedChildren = useMemo(() => {
         return jsx(Slot, { children: children });
     }, [children]);
-    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, children: [jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxs(Popover, { activation: { hover: { delayed, interactable } }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, children: [jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["inline-flex", "items-center"]);
@@ -6179,7 +6184,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
             if (stopPropagation) {
                 e.stopPropagation();
             }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
+            // eslint-disable-next-line @trackunit/no-typescript-assertion
             onClick(e);
         }
     };
@@ -8022,7 +8027,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
         setSlidingWidth(width);
     }, [validIndex]);
     return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, ref: ref, style: 
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         {
             "--sliding-left": `${slidingLeft}px`,
             "--sliding-width": `${slidingWidth}px`,
@@ -8407,7 +8412,7 @@ const useClickOutside = (el, options) => {
     const els = Array.isArray(el) ? el : [el];
     const active = options.active !== undefined ? options.active : true;
     const handler = (ev) => {
-        // eslint-disable-next-line local-rules/no-typescript-assertion
+        // eslint-disable-next-line @trackunit/no-typescript-assertion
         const target = ev.target;
         if (els.every(ref => !ref.current || !ref.current.contains(target))) {
             options.onClick(ev);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.33-alpha-3fb17ca5f15.0",
+  "version": "1.17.34",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.49-alpha-3fb17ca5f15.0",
-    "@trackunit/css-class-variance-utilities": "1.11.49-alpha-3fb17ca5f15.0",
-    "@trackunit/shared-utils": "1.13.49-alpha-3fb17ca5f15.0",
-    "@trackunit/ui-icons": "1.11.48-alpha-3fb17ca5f15.0",
+    "@trackunit/ui-design-tokens": "1.11.49",
+    "@trackunit/css-class-variance-utilities": "1.11.49",
+    "@trackunit/shared-utils": "1.13.49",
+    "@trackunit/ui-icons": "1.11.48",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/components/Popover/PopoverTypes.d.ts

@@ -1,9 +1,30 @@
 import { ExtendedRefs, ReferenceType, UseDismissProps, UseFloatingReturn } from "@floating-ui/react";
 import { Dispatch, HTMLProps, SetStateAction } from "react";
 import { CommonProps } from "../../common/CommonProps";
+export type PopoverHoverOptions = {
+    /**
+     * Whether hover activation is enabled.
+     *
+     * @default true
+     */
+    active?: boolean;
+    /**
+     * Whether to add a 400ms delay before the floating element opens on hover.
+     *
+     * @default false
+     */
+    delayed?: boolean;
+    /**
+     * Whether the cursor can reach and interact with the floating element.
+     * Enables safePolygon so the element stays open while the cursor moves toward it.
+     *
+     * @default true
+     */
+    interactable?: boolean;
+};
 export type PopoverActivation = {
     click?: boolean;
-    hover?: boolean;
+    hover?: boolean | PopoverHoverOptions;
     keyboardHandlers?: boolean;
 };
 export type PopoverDismissal = Pick<UseDismissProps, "ancestorScroll" | "enabled" | "outsidePress">;

package/src/components/Tooltip/Tooltip.d.ts

@@ -3,6 +3,7 @@ import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Styleable } from "../../common/Styleable";
 import { IconProps } from "../Icon/Icon";
+import { PopoverHoverOptions } from "../Popover/PopoverTypes";
 export type TooltipPlacement = Placement | "auto";
 export interface TooltipProps extends Omit<CommonProps, "className">, Styleable {
     /**
@@ -33,6 +34,19 @@ export interface TooltipProps extends Omit<CommonProps, "className">, Styleable
      * Ihe id of the html element
      */
     id?: string;
+    /**
+     * Whether to add a 400ms delay before the tooltip opens on hover.
+     *
+     * @default false
+     */
+    delayed?: Pick<PopoverHoverOptions, "delayed">["delayed"];
+    /**
+     * Whether the cursor can reach and interact with the tooltip content.
+     * Enables safePolygon so the tooltip stays open while the cursor moves toward it.
+     *
+     * @default true
+     */
+    interactable?: Pick<PopoverHoverOptions, "interactable">["interactable"];
 }
 /**
  * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
@@ -75,4 +89,4 @@ export interface TooltipProps extends Omit<CommonProps, "className">, Styleable
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, label, placement, mode, iconProps, id, style, }: TooltipProps) => ReactElement;
+export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, label, placement, mode, iconProps, id, style, delayed, interactable, }: TooltipProps) => ReactElement;