@trackunit/react-components 0.1.410 → 0.1.412

package/README.md

@@ -1,7 +1,3 @@
-> **⚠️ Beta**
->
-> This is a beta version and subject to change without notice.
-
 # Trackunit React Components
 The `@trackunit/react-components` package is the home of Trackunits public UI library.
 

package/index.cjs.js

@@ -50,25 +50,6 @@ const docs = {
     },
 };
 
-/**
- * Utility for common props on containers.
- *
- * @param {UseContainerProps} ContainerProps - Props for the utility
- * @param {string} ContainerProps.className - Optional custom className
- * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
- * @returns {UseContainerProps} - Object with undefined values removed
- */
-const useContainerProps = ({ className, dataTestId }) => {
-    const containerProps = { className, "data-testid": dataTestId };
-    if (containerProps["data-testid"] === undefined) {
-        delete containerProps["data-testid"];
-    }
-    if (containerProps.className === undefined) {
-        delete containerProps.className;
-    }
-    return containerProps;
-};
-
 const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-grid", "relative"], {
     variants: {
         color: {
@@ -862,13 +843,11 @@ const initLocalStorageState = ({ key, defaultState, schema, }) => {
     if (!localStorageItem) {
         return defaultState;
     }
-    const parsedState = JSON.parse(localStorageItem);
-    if (schema) {
-        return validateState({ state: parsedState, defaultState, schema });
-    }
-    else {
-        return parsedState;
+    const localStorageItemJSON = JSON.parse(localStorageItem);
+    if (!schema) {
+        return localStorageItemJSON;
     }
+    return validateState({ state: localStorageItemJSON, defaultState, schema });
 };
 
 /**
@@ -3694,7 +3673,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger({ children, rend
     }
 });
 
-const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex", "hover:cursor-pointer"]);
+const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3710,18 +3689,18 @@ const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge(["pointer-events-no
 const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
     variants: {
         placement: {
-            top: "top-full left-2/4 ml-[-5px]",
-            "top-start": "top-full left-[5%]",
-            "top-end": "top-full right-[5%]",
+            top: "left-2/4 top-full ml-[-5px]",
+            "top-start": "left-[5%] top-full",
+            "top-end": "right-[5%] top-full",
             bottom: "bottom-full right-2/4 mr-[-6px] ",
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
-            left: "top-2/4 left-full mt-[-6px]",
-            "left-start": "top-1/4 top-[8%]",
-            "left-end": "bottom-1/4 bottom-[8%]",
-            right: "top-2/4 right-full mt-[-6px] ",
-            "right-start": "top-1/4 top-[8%]",
-            "right-end": "bottom-1/4 bottom-[8%]",
+            left: "left-full top-2/4 mt-[-6px]",
+            "left-start": "top-[8%]",
+            "left-end": "bottom-[8%]",
+            right: "right-full top-2/4 mt-[-6px] ",
+            "right-start": "top-[8%]",
+            "right-end": "bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3767,7 +3746,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, }) => {
+const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const arrowRef = React__namespace.useRef(null);
     const { refs, floatingStyles, context } = react.useFloating({
@@ -3778,11 +3757,10 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         whileElementsMounted: react.autoUpdate,
     });
     const { isMounted } = react.useTransitionStatus(context);
-    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : null, children: children }));
     if (disabled) {
-        return wrappedChildren;
+        return children;
     }
-    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { dataTestId: 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}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (jsxRuntime.jsx("span", { className: cvaTooltipContainer(), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children })) }), 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}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -3944,76 +3922,58 @@ const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconB
 };
 
 /**
- * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
- * To be used for elements that do not have typical interactive roles and behaviors, such as divs, table rows, cards etc.
+ * Applies standardized interaction-related styles to an element.
  *
- * To not be used for buttons, links, or other elements that have their own specific interactive roles.
+ * Prefer using the "auto" settings — only resort to manual control if necessary!
+ * - selected: "auto" will apply styling when it contains a `checked` input aka. `:has(:checked)`.
+ * - focused: "auto" will apply styling when the element or it's children has focus aka. `:focus-within`.
  *
- * @returns a cva function that takes in the selected, disabled, showPointer, and focusRing props
+ * To be used for elements that do not have typical interactive roles and behaviors,
+ * such as divs, table rows, cards etc.
+ *
+ * To not be used for buttons, links, or other elements that have their own intrinsic interactive roles.
+ *
+ * @returns tailwind class names on the basis on the provided props.
  */
-const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge(["outline-none"], {
+const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
     variants: {
-        showPointer: {
-            true: "cursor-pointer",
-            false: "",
+        cursor: {
+            pointer: "cursor-pointer",
+            auto: "cursor-auto",
+            help: "cursor-help",
+            "zoom-in": "cursor-zoom-in",
+            "zoom-out": "cursor-zoom-out",
+            default: "cursor-default",
+            "not-allowed": "cursor-not-allowed",
         },
         selected: {
-            true: "bg-primary-600/[.08] hover:bg-primary-600/[.12] [&:has(:focus-visible)]:bg-primary-600/[.12] focus-visible:bg-primary-600/[.12]", // opacity 8% and 12% selected based on example at https://mui.com/x/react-data-grid/row-selection/#disable-row-selection-on-click
+            true: ["bg-primary-600/[.08]", "hover:bg-primary-600/[.12]", "focus-within:bg-primary-600/[.12]"],
             false: "",
+            auto: [
+                "has-[:checked]:bg-primary-600/[.08]",
+                "hover:has-[:checked]:bg-primary-600/[.12]",
+                "focus-within:has-[:checked]:bg-primary-600/[.12]",
+            ],
         },
         disabled: {
-            true: "pointer-events-none !bg-neutral-100",
-            false: "",
+            true: ["pointer-events-none", "!bg-neutral-100", "!cursor-not-allowed"],
+            false: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
         },
-        focusRing: {
-            // necessary for accessibility during keyboard navigation
-            // used in compound variant below since it depends on other conditions to be applied
-            true: "",
+        focused: {
+            true: "outline-native",
             false: "",
+            auto: "[&:has(:focus-visible)]:outline-native",
         },
     },
-    compoundVariants: [
-        {
-            disabled: false,
-            selected: false,
-            className: "hover:bg-neutral-600/5 focus-visible:bg-neutral-600/5 [&:has(:focus-visible)]:bg-neutral-600/5",
-        },
-        {
-            disabled: false,
-            focusRing: true,
-            className: 
-            // focus-visible is a pseudo-class that is used to style an element when it is focused, and the user is navigating using the keyboard.
-            // here we are targeting the parent element of the focus-visible element (so the parent containing a checkbox or radio button)
-            "[&:has(:focus-visible)]:ring-primary-700 focus-visible:ring-primary-700 focus-visible:ring-2 focus-visible:ring-inset [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-inset",
-        },
-    ],
     defaultVariants: {
-        showPointer: false,
-        selected: false,
+        cursor: "auto",
+        selected: "auto",
         disabled: false,
-        focusRing: false,
+        focused: "auto",
     },
 });
 
-/**
- * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
- * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
- */
-const cvaMenuItem = ({ size, selected, disabled, focusRing, className } = {}) => tailwindMerge.twMerge(cvaMenuItemStyle({ size }), cvaInteractableItem({ selected, disabled, showPointer: true, focusRing }), className);
-const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge([
-    "py-2",
-    "pl-2",
-    "pr-3",
-    "w-full",
-    "h-auto",
-    "cursor-pointer",
-    "flex",
-    "flex-row",
-    "items-center",
-    "gap-x-2",
-    "select-none",
-    "rounded",
-], {
+const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "pl-2", "pr-3", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
     variants: {
         size: {
             small: "py-1",
@@ -4021,6 +3981,14 @@ const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
+/**
+ * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
+ * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
+ */
+const cvaMenuItem = (props) => {
+    const { size, selected, disabled, focused, className } = props !== null && props !== void 0 ? props : {};
+    return tailwindMerge.twMerge(cvaMenuItemStyle({ size }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+};
 const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge([
     "flex-grow",
     "text-gray-700",
@@ -4029,7 +3997,7 @@ const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge([
     "group-hover:text-gray-900",
     "group-active:text-gray-700",
 ]);
-const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["self-center", "flex-grow-0", "text-slate-400"], {
+const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "text-sm"], {
     variants: {
         selected: {
             true: "text-primary-600 hover:text-primary-700",
@@ -4037,7 +4005,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["self-center", "fl
         },
     },
 });
-const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "group-hover:text-slate-600", "h-min", "leading-[0]"], {
+const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "group-hover:text-slate-600", "h-min", "leading-[0]", "text-sm"], {
     variants: {
         selected: {
             true: "text-primary-600 hover:text-primary-700",
@@ -4052,25 +4020,23 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "fl
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, focusRing = true, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
-    const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
-    return (jsxRuntime.jsxs("div", { ...containerProps, className: cvaMenuItem({
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaMenuItem({
             selected,
             disabled,
-            focusRing,
             size,
-            className: containerProps.className,
-        }), id: id, onClick: e => {
+            className,
+        }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
-            onClick && onClick(e);
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
-const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden !p-0",
-            false: "",
+            true: "grid-rows-min-fr grid overflow-y-hidden p-0",
+            false: "p-1",
         },
     },
 });
@@ -5004,7 +4970,6 @@ exports.iconColorNames = iconColorNames;
 exports.iconPalette = iconPalette;
 exports.setLocalStorage = setLocalStorage;
 exports.useClickOutside = useClickOutside;
-exports.useContainerProps = useContainerProps;
 exports.useContinuousTimeout = useContinuousTimeout;
 exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;

package/index.esm.js

@@ -30,25 +30,6 @@ const docs = {
     },
 };
 
-/**
- * Utility for common props on containers.
- *
- * @param {UseContainerProps} ContainerProps - Props for the utility
- * @param {string} ContainerProps.className - Optional custom className
- * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
- * @returns {UseContainerProps} - Object with undefined values removed
- */
-const useContainerProps = ({ className, dataTestId }) => {
-    const containerProps = { className, "data-testid": dataTestId };
-    if (containerProps["data-testid"] === undefined) {
-        delete containerProps["data-testid"];
-    }
-    if (containerProps.className === undefined) {
-        delete containerProps.className;
-    }
-    return containerProps;
-};
-
 const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
     variants: {
         color: {
@@ -842,13 +823,11 @@ const initLocalStorageState = ({ key, defaultState, schema, }) => {
     if (!localStorageItem) {
         return defaultState;
     }
-    const parsedState = JSON.parse(localStorageItem);
-    if (schema) {
-        return validateState({ state: parsedState, defaultState, schema });
-    }
-    else {
-        return parsedState;
+    const localStorageItemJSON = JSON.parse(localStorageItem);
+    if (!schema) {
+        return localStorageItemJSON;
     }
+    return validateState({ state: localStorageItemJSON, defaultState, schema });
 };
 
 /**
@@ -3674,7 +3653,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButt
     }
 });
 
-const cvaTooltipFlexContainer = cvaMerge(["inline-flex", "hover:cursor-pointer"]);
+const cvaTooltipContainer = cvaMerge(["inline-flex"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3690,18 +3669,18 @@ const cvaTooltipPopover = cvaMerge(["pointer-events-none", "origin-center"]);
 const cvaTooltipPopoverTail = cvaMerge("", {
     variants: {
         placement: {
-            top: "top-full left-2/4 ml-[-5px]",
-            "top-start": "top-full left-[5%]",
-            "top-end": "top-full right-[5%]",
+            top: "left-2/4 top-full ml-[-5px]",
+            "top-start": "left-[5%] top-full",
+            "top-end": "right-[5%] top-full",
             bottom: "bottom-full right-2/4 mr-[-6px] ",
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
-            left: "top-2/4 left-full mt-[-6px]",
-            "left-start": "top-1/4 top-[8%]",
-            "left-end": "bottom-1/4 bottom-[8%]",
-            right: "top-2/4 right-full mt-[-6px] ",
-            "right-start": "top-1/4 top-[8%]",
-            "right-end": "bottom-1/4 bottom-[8%]",
+            left: "left-full top-2/4 mt-[-6px]",
+            "left-start": "top-[8%]",
+            "left-end": "bottom-[8%]",
+            right: "right-full top-2/4 mt-[-6px] ",
+            "right-start": "top-[8%]",
+            "right-end": "bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3747,7 +3726,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, }) => {
+const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const arrowRef = React.useRef(null);
     const { refs, floatingStyles, context } = useFloating({
@@ -3758,11 +3737,10 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         whileElementsMounted: autoUpdate,
     });
     const { isMounted } = useTransitionStatus(context);
-    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : null, children: children }));
     if (disabled) {
-        return wrappedChildren;
+        return children;
     }
-    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, { dataTestId: 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}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (jsx("span", { className: cvaTooltipContainer(), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children })) }), 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}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
@@ -3924,76 +3902,58 @@ const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconB
 };
 
 /**
- * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
- * To be used for elements that do not have typical interactive roles and behaviors, such as divs, table rows, cards etc.
+ * Applies standardized interaction-related styles to an element.
  *
- * To not be used for buttons, links, or other elements that have their own specific interactive roles.
+ * Prefer using the "auto" settings — only resort to manual control if necessary!
+ * - selected: "auto" will apply styling when it contains a `checked` input aka. `:has(:checked)`.
+ * - focused: "auto" will apply styling when the element or it's children has focus aka. `:focus-within`.
  *
- * @returns a cva function that takes in the selected, disabled, showPointer, and focusRing props
+ * To be used for elements that do not have typical interactive roles and behaviors,
+ * such as divs, table rows, cards etc.
+ *
+ * To not be used for buttons, links, or other elements that have their own intrinsic interactive roles.
+ *
+ * @returns tailwind class names on the basis on the provided props.
  */
-const cvaInteractableItem = cvaMerge(["outline-none"], {
+const cvaInteractableItem = cvaMerge("", {
     variants: {
-        showPointer: {
-            true: "cursor-pointer",
-            false: "",
+        cursor: {
+            pointer: "cursor-pointer",
+            auto: "cursor-auto",
+            help: "cursor-help",
+            "zoom-in": "cursor-zoom-in",
+            "zoom-out": "cursor-zoom-out",
+            default: "cursor-default",
+            "not-allowed": "cursor-not-allowed",
         },
         selected: {
-            true: "bg-primary-600/[.08] hover:bg-primary-600/[.12] [&:has(:focus-visible)]:bg-primary-600/[.12] focus-visible:bg-primary-600/[.12]", // opacity 8% and 12% selected based on example at https://mui.com/x/react-data-grid/row-selection/#disable-row-selection-on-click
+            true: ["bg-primary-600/[.08]", "hover:bg-primary-600/[.12]", "focus-within:bg-primary-600/[.12]"],
             false: "",
+            auto: [
+                "has-[:checked]:bg-primary-600/[.08]",
+                "hover:has-[:checked]:bg-primary-600/[.12]",
+                "focus-within:has-[:checked]:bg-primary-600/[.12]",
+            ],
         },
         disabled: {
-            true: "pointer-events-none !bg-neutral-100",
-            false: "",
+            true: ["pointer-events-none", "!bg-neutral-100", "!cursor-not-allowed"],
+            false: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
         },
-        focusRing: {
-            // necessary for accessibility during keyboard navigation
-            // used in compound variant below since it depends on other conditions to be applied
-            true: "",
+        focused: {
+            true: "outline-native",
             false: "",
+            auto: "[&:has(:focus-visible)]:outline-native",
         },
     },
-    compoundVariants: [
-        {
-            disabled: false,
-            selected: false,
-            className: "hover:bg-neutral-600/5 focus-visible:bg-neutral-600/5 [&:has(:focus-visible)]:bg-neutral-600/5",
-        },
-        {
-            disabled: false,
-            focusRing: true,
-            className: 
-            // focus-visible is a pseudo-class that is used to style an element when it is focused, and the user is navigating using the keyboard.
-            // here we are targeting the parent element of the focus-visible element (so the parent containing a checkbox or radio button)
-            "[&:has(:focus-visible)]:ring-primary-700 focus-visible:ring-primary-700 focus-visible:ring-2 focus-visible:ring-inset [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-inset",
-        },
-    ],
     defaultVariants: {
-        showPointer: false,
-        selected: false,
+        cursor: "auto",
+        selected: "auto",
         disabled: false,
-        focusRing: false,
+        focused: "auto",
     },
 });
 
-/**
- * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
- * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
- */
-const cvaMenuItem = ({ size, selected, disabled, focusRing, className } = {}) => twMerge(cvaMenuItemStyle({ size }), cvaInteractableItem({ selected, disabled, showPointer: true, focusRing }), className);
-const cvaMenuItemStyle = cvaMerge([
-    "py-2",
-    "pl-2",
-    "pr-3",
-    "w-full",
-    "h-auto",
-    "cursor-pointer",
-    "flex",
-    "flex-row",
-    "items-center",
-    "gap-x-2",
-    "select-none",
-    "rounded",
-], {
+const cvaMenuItemStyle = cvaMerge(["py-2", "pl-2", "pr-3", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
     variants: {
         size: {
             small: "py-1",
@@ -4001,6 +3961,14 @@ const cvaMenuItemStyle = cvaMerge([
         },
     },
 });
+/**
+ * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
+ * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
+ */
+const cvaMenuItem = (props) => {
+    const { size, selected, disabled, focused, className } = props !== null && props !== void 0 ? props : {};
+    return twMerge(cvaMenuItemStyle({ size }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+};
 const cvaMenuItemLabel = cvaMerge([
     "flex-grow",
     "text-gray-700",
@@ -4009,7 +3977,7 @@ const cvaMenuItemLabel = cvaMerge([
     "group-hover:text-gray-900",
     "group-active:text-gray-700",
 ]);
-const cvaMenuItemSuffix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400"], {
+const cvaMenuItemSuffix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "text-sm"], {
     variants: {
         selected: {
             true: "text-primary-600 hover:text-primary-700",
@@ -4017,7 +3985,7 @@ const cvaMenuItemSuffix = cvaMerge(["self-center", "flex-grow-0", "text-slate-40
         },
     },
 });
-const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "group-hover:text-slate-600", "h-min", "leading-[0]"], {
+const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "group-hover:text-slate-600", "h-min", "leading-[0]", "text-sm"], {
     variants: {
         selected: {
             true: "text-primary-600 hover:text-primary-700",
@@ -4032,25 +4000,23 @@ const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, focusRing = true, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
-    const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
-    return (jsxs("div", { ...containerProps, className: cvaMenuItem({
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
+    return (jsxs("div", { className: cvaMenuItem({
             selected,
             disabled,
-            focusRing,
             size,
-            className: containerProps.className,
-        }), id: id, onClick: e => {
+            className,
+        }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
-            onClick && onClick(e);
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
-const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
+const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden !p-0",
-            false: "",
+            true: "grid-rows-min-fr grid overflow-y-hidden p-0",
+            false: "p-1",
         },
     },
 });
@@ -4903,4 +4869,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.410",
+  "version": "0.1.412",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/common/index.d.ts

@@ -3,4 +3,3 @@ export * from "./CommonProps";
 export * from "./Density";
 export * from "./Size";
 export * from "./StorybookProps";
-export * from "./useContainerProps";

package/src/components/InteractableItem/InteractableItem.variants.d.ts

@@ -1,14 +1,20 @@
 /**
- * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
- * To be used for elements that do not have typical interactive roles and behaviors, such as divs, table rows, cards etc.
+ * Applies standardized interaction-related styles to an element.
  *
- * To not be used for buttons, links, or other elements that have their own specific interactive roles.
+ * Prefer using the "auto" settings — only resort to manual control if necessary!
+ * - selected: "auto" will apply styling when it contains a `checked` input aka. `:has(:checked)`.
+ * - focused: "auto" will apply styling when the element or it's children has focus aka. `:focus-within`.
  *
- * @returns a cva function that takes in the selected, disabled, showPointer, and focusRing props
+ * To be used for elements that do not have typical interactive roles and behaviors,
+ * such as divs, table rows, cards etc.
+ *
+ * To not be used for buttons, links, or other elements that have their own intrinsic interactive roles.
+ *
+ * @returns tailwind class names on the basis on the provided props.
  */
 export declare const cvaInteractableItem: (props?: ({
-    showPointer?: boolean | null | undefined;
-    selected?: boolean | null | undefined;
+    cursor?: "default" | "pointer" | "auto" | "help" | "zoom-in" | "zoom-out" | "not-allowed" | null | undefined;
+    selected?: boolean | "auto" | null | undefined;
     disabled?: boolean | null | undefined;
-    focusRing?: boolean | null | undefined;
+    focused?: boolean | "auto" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -27,7 +27,7 @@ export interface MenuItemProps extends CommonProps {
      * This is typically used to render an icon.
      *
      */
-    suffix?: JSX.Element;
+    suffix?: React.ReactNode;
     /**
      * An boolean flag to turn on/off selected state
      * This is typically used highlight that item is selected
@@ -41,13 +41,6 @@ export interface MenuItemProps extends CommonProps {
      * @memberof MenuItemProps
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /**
-     * An boolean flag to turn on/off focus rings
-     * This is used for keyboard navigation
-     *
-     * @memberof MenuItemProps
-     */
-    focusRing?: boolean;
     /**
      * A boolean prop to set menu item to disabled state
      * used in disabled select options
@@ -66,5 +59,5 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, focusRing, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -1,18 +1,17 @@
-interface CvaMenuItemProps {
+import { type VariantProps } from "@trackunit/css-class-variance-utilities";
+import { MappedOmit } from "@trackunit/shared-utils";
+import { cvaInteractableItem } from "../../InteractableItem/InteractableItem.variants";
+export declare const cvaMenuItemStyle: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
     size?: "small" | "medium";
-    selected?: boolean;
-    disabled?: boolean;
-    focusRing?: boolean;
-    className?: string;
-}
+};
 /**
  * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
-export declare const cvaMenuItem: ({ size, selected, disabled, focusRing, className }?: CvaMenuItemProps) => string;
-export declare const cvaMenuItemStyle: (props?: ({
-    size?: "small" | "medium" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuItem: (props?: CvaMenuItemProps) => string;
 export declare const cvaMenuItemLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaMenuItemSuffix: (props?: ({
     selected?: boolean | null | undefined;

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

@@ -42,4 +42,4 @@ export interface TooltipProps extends CommonProps {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => React.ReactNode;

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

@@ -1,4 +1,4 @@
-export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTooltipIcon: (props?: ({
     color?: "light" | "dark" | null | undefined;
     defaultVariants?: "color" | null | undefined;