@trackunit/react-components 1.0.12 → 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,
@@ -3938,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.
@@ -4122,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] }));
 };
 
 /**
@@ -4157,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,
@@ -3918,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.
@@ -4102,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] }));
 };
 
 /**
@@ -4137,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.12",
+  "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.
  */