@trackunit/react-components 1.0.11 → 1.0.13

package/index.cjs.js

@@ -1138,8 +1138,8 @@ function getDevicePixelRatio(options) {
 
 /**
  * Use this hook if you want to optionally elevate the state of a component.
- * Useful when you want to optionally be able to control the state of a component
- * from a parent componentbut keep the simplicity of not having to.
+ * Useful when you _want_ to be able to control the state of a component
+ * from a parent component but keep the simplicity of not _having_ to.
  *
  * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
  */
@@ -3316,7 +3316,7 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
-const PADDING$1 = 16;
+const PADDING = 12;
 /**
  * Converts a width size value into a CSS dimension value for max constraints
  *
@@ -3332,7 +3332,7 @@ const getMaxWidthValue = ({ value, referenceWidth, availableWidth }) => {
         }
         case undefined:
         case "none": {
-            return `${availableWidth - PADDING$1 * 2}px`;
+            return `${availableWidth - PADDING * 2}px`;
         }
         default: {
             if (typeof value === "number") {
@@ -3377,7 +3377,7 @@ const getMaxHeightValue = ({ value, availableHeight }) => {
     switch (value) {
         case undefined:
         case "none": {
-            return `${availableHeight - PADDING$1 * 2}px`;
+            return `${availableHeight - PADDING * 2}px`;
         }
         default: {
             if (typeof value === "number") {
@@ -3409,7 +3409,6 @@ const getMinHeightValue = ({ value }) => {
 };
 
 const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
-const PADDING = 16;
 const DEFAULT_DISMISSAL = {
     enabled: true,
     outsidePress: true,
@@ -3905,17 +3904,16 @@ const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "div";
     const isSmallVariant = variant === "small";
-    const TrendIndicator = () => {
-        var _a, _b;
-        if (!trend) {
-            return null;
-        }
-        return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPICardTrendPercentage({ color: (_b = trend.variant) === null || _b === void 0 ? void 0 : _b.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
-    };
-    const CardContent = () => (jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsxRuntime.jsx(LoadingContent, {})) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPICardValueContainer({
-                            isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
-                        }), children: [jsxRuntime.jsxs("span", { children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, {})] }) })] })) }));
-    return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsxRuntime.jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(CardContent, {}) })) : (jsxRuntime.jsx(CardContent, {})), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
+    return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsxRuntime.jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsxRuntime.jsx(LoadingContent, {})) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPICardValueContainer({
+                                        isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
+                                    }), children: [jsxRuntime.jsxs("span", { children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
+};
+const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
+    var _a, _b;
+    if (!trend) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPICardTrendPercentage({ color: (_b = trend.variant) === null || _b === void 0 ? void 0 : _b.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
@@ -3939,7 +3937,7 @@ const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
 });
 const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
 const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-[292px]");
+const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
 
 /**
  * The MenuDivider component is used to separate items in a menu list.
@@ -4123,7 +4121,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children !== null && children !== void 0 ? children : label, optionLabelDescription ? jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0), children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children !== null && children !== void 0 ? children : label, optionLabelDescription ? jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -4158,22 +4156,23 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
         }
     }, [isMulti, selectedItems, onSelectionChange]);
     return (jsxRuntime.jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, role: "list", tabIndex: 0, children: childrenArr.map((menuItem, index) => {
-            var _a;
+            var _a, _b;
             if (React.isValidElement(menuItem)) {
                 const isSelected = selectedItems.includes((_a = menuItem.props.id) !== null && _a !== void 0 ? _a : `${index}`) || menuItem.props.selected;
-                return (jsxRuntime.jsx("div", { children: React.cloneElement(menuItem, {
-                        ...menuItem.props,
-                        onClick: (event) => {
-                            var _a, _b, _c;
-                            (_b = (_a = menuItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-                            handleItemClick((_c = menuItem.props.id) !== null && _c !== void 0 ? _c : `${index}`, menuItem.props.disabled);
-                        },
-                        className: isMulti && isSelected
-                            ? cvaMenuListMultiSelect({ className: menuItem.props.className })
-                            : cvaMenuListItem({ className: menuItem.props.className }),
-                        selected: isSelected,
-                        suffix: isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null,
-                    }) }, index));
+                return React.cloneElement(menuItem, {
+                    ...menuItem.props,
+                    key: index,
+                    onClick: (event) => {
+                        var _a, _b, _c;
+                        (_b = (_a = menuItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                        handleItemClick((_c = menuItem.props.id) !== null && _c !== void 0 ? _c : `${index}`, menuItem.props.disabled);
+                    },
+                    className: isMulti && isSelected
+                        ? cvaMenuListMultiSelect({ className: menuItem.props.className })
+                        : cvaMenuListItem({ className: menuItem.props.className }),
+                    selected: isSelected,
+                    suffix: (_b = menuItem.props.suffix) !== null && _b !== void 0 ? _b : (isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                });
             }
             return null;
         }) }));

package/index.esm.js

@@ -1118,8 +1118,8 @@ function getDevicePixelRatio(options) {
 
 /**
  * Use this hook if you want to optionally elevate the state of a component.
- * Useful when you want to optionally be able to control the state of a component
- * from a parent componentbut keep the simplicity of not having to.
+ * Useful when you _want_ to be able to control the state of a component
+ * from a parent component but keep the simplicity of not _having_ to.
  *
  * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
  */
@@ -3296,7 +3296,7 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
-const PADDING$1 = 16;
+const PADDING = 12;
 /**
  * Converts a width size value into a CSS dimension value for max constraints
  *
@@ -3312,7 +3312,7 @@ const getMaxWidthValue = ({ value, referenceWidth, availableWidth }) => {
         }
         case undefined:
         case "none": {
-            return `${availableWidth - PADDING$1 * 2}px`;
+            return `${availableWidth - PADDING * 2}px`;
         }
         default: {
             if (typeof value === "number") {
@@ -3357,7 +3357,7 @@ const getMaxHeightValue = ({ value, availableHeight }) => {
     switch (value) {
         case undefined:
         case "none": {
-            return `${availableHeight - PADDING$1 * 2}px`;
+            return `${availableHeight - PADDING * 2}px`;
         }
         default: {
             if (typeof value === "number") {
@@ -3389,7 +3389,6 @@ const getMinHeightValue = ({ value }) => {
 };
 
 const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
-const PADDING = 16;
 const DEFAULT_DISMISSAL = {
     enabled: true,
     outsidePress: true,
@@ -3885,17 +3884,16 @@ const LoadingContent = () => (jsx("div", { className: "flex flex-row items-cente
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? Slot : "div";
     const isSmallVariant = variant === "small";
-    const TrendIndicator = () => {
-        var _a, _b;
-        if (!trend) {
-            return null;
-        }
-        return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaKPICardTrendPercentage({ color: (_b = trend.variant) === null || _b === void 0 ? void 0 : _b.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
-    };
-    const CardContent = () => (jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsx(LoadingContent, {})) : (jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPICardValueContainer({
-                            isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
-                        }), children: [jsxs("span", { children: [value, " ", unit] }), jsx(TrendIndicator, {})] }) })] })) }));
-    return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsx(CardContent, {}) })) : (jsx(CardContent, {})), !loading && jsx(Slottable, { children: rest.children })] }));
+    return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsx(LoadingContent, {})) : (jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPICardValueContainer({
+                                        isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
+                                    }), children: [jsxs("span", { children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsx(Slottable, { children: rest.children })] }));
+};
+const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
+    var _a, _b;
+    if (!trend) {
+        return null;
+    }
+    return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaKPICardTrendPercentage({ color: (_b = trend.variant) === null || _b === void 0 ? void 0 : _b.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
 const cvaMenuList = cvaMerge([
@@ -3919,7 +3917,7 @@ const cvaMenuList = cvaMerge([
 });
 const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
 const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cvaMerge("max-w-[292px]");
+const cvaMenuListItem = cvaMerge("max-w-full");
 
 /**
  * The MenuDivider component is used to separate items in a menu list.
@@ -4103,7 +4101,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children !== null && children !== void 0 ? children : label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0), children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children !== null && children !== void 0 ? children : label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -4138,22 +4136,23 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
         }
     }, [isMulti, selectedItems, onSelectionChange]);
     return (jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, role: "list", tabIndex: 0, children: childrenArr.map((menuItem, index) => {
-            var _a;
+            var _a, _b;
             if (isValidElement(menuItem)) {
                 const isSelected = selectedItems.includes((_a = menuItem.props.id) !== null && _a !== void 0 ? _a : `${index}`) || menuItem.props.selected;
-                return (jsx("div", { children: cloneElement(menuItem, {
-                        ...menuItem.props,
-                        onClick: (event) => {
-                            var _a, _b, _c;
-                            (_b = (_a = menuItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-                            handleItemClick((_c = menuItem.props.id) !== null && _c !== void 0 ? _c : `${index}`, menuItem.props.disabled);
-                        },
-                        className: isMulti && isSelected
-                            ? cvaMenuListMultiSelect({ className: menuItem.props.className })
-                            : cvaMenuListItem({ className: menuItem.props.className }),
-                        selected: isSelected,
-                        suffix: isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null,
-                    }) }, index));
+                return cloneElement(menuItem, {
+                    ...menuItem.props,
+                    key: index,
+                    onClick: (event) => {
+                        var _a, _b, _c;
+                        (_b = (_a = menuItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                        handleItemClick((_c = menuItem.props.id) !== null && _c !== void 0 ? _c : `${index}`, menuItem.props.disabled);
+                    },
+                    className: isMulti && isSelected
+                        ? cvaMenuListMultiSelect({ className: menuItem.props.className })
+                        : cvaMenuListItem({ className: menuItem.props.className }),
+                    selected: isSelected,
+                    suffix: (_b = menuItem.props.suffix) !== null && _b !== void 0 ? _b : (isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                });
             }
             return null;
         }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -22,7 +22,7 @@
     "@trackunit/ui-design-tokens": "^1.0.1",
     "@trackunit/css-class-variance-utilities": "^1.0.1",
     "@trackunit/shared-utils": "^1.0.3",
-    "@trackunit/ui-icons": "^1.0.2",
+    "@trackunit/ui-icons": "^1.0.3",
     "@trackunit/react-table-pagination": "^1.0.1"
   },
   "module": "./index.esm.js",

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

@@ -1,5 +1,5 @@
 import { HeightSizeLimit, WidthSizeLimit } from "./PopoverTypes";
-export declare const PADDING = 16;
+export declare const PADDING = 12;
 type WidthValueParams = {
     value: WidthSizeLimit | undefined;
     referenceWidth: number;

package/src/hooks/useElevatedState.d.ts

@@ -1,8 +1,8 @@
 import { Dispatch, SetStateAction } from "react";
 /**
  * Use this hook if you want to optionally elevate the state of a component.
- * Useful when you want to optionally be able to control the state of a component
- * from a parent componentbut keep the simplicity of not having to.
+ * Useful when you _want_ to be able to control the state of a component
+ * from a parent component but keep the simplicity of not _having_ to.
  *
  * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
  */