@trackunit/react-components 1.7.36 → 1.7.41

package/index.cjs.js

@@ -3157,7 +3157,7 @@ const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-
         disabled: false,
     },
 });
-const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge(["flex-grow", "truncate", "text-black", "font-normal"], {
+const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge(["flex-grow", "truncate", "text-black", "font-normal", "flex", "items-center"], {
     variants: {
         variant: {
             primary: [],
@@ -3173,7 +3173,15 @@ const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge(["flex-grow", "trunc
         disabled: false,
     },
 });
-const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["text-secondary-400", "hover:text-secondary-500", "focus:text-secondary-500", "h-min", "leading-[0]"], {
+const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
+    "text-secondary-400",
+    "hover:text-secondary-500",
+    "focus:text-secondary-500",
+    "h-min",
+    "leading-[0]",
+    "flex",
+    "items-center",
+], {
     variants: {
         selected: {
             true: "text-secondary-600",
@@ -3193,7 +3201,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
         disabled: false,
     },
 });
-const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-400", "text-sm"], {
+const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-400", "text-sm", "flex", "items-center"], {
     variants: {
         selected: {
             true: "text-secondary-600",
@@ -3220,7 +3228,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -3243,7 +3251,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
                 e.stopPropagation();
             }
             onClick?.(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (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 ?? label, optionLabelDescription ? jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled, className: "flex items-center" }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (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: [optionPrefix ? optionPrefix : null, 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] }));
 };
 
 /**

package/index.esm.js

@@ -3155,7 +3155,7 @@ const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row",
         disabled: false,
     },
 });
-const cvaMenuItemLabel = cvaMerge(["flex-grow", "truncate", "text-black", "font-normal"], {
+const cvaMenuItemLabel = cvaMerge(["flex-grow", "truncate", "text-black", "font-normal", "flex", "items-center"], {
     variants: {
         variant: {
             primary: [],
@@ -3171,7 +3171,15 @@ const cvaMenuItemLabel = cvaMerge(["flex-grow", "truncate", "text-black", "font-
         disabled: false,
     },
 });
-const cvaMenuItemPrefix = cvaMerge(["text-secondary-400", "hover:text-secondary-500", "focus:text-secondary-500", "h-min", "leading-[0]"], {
+const cvaMenuItemPrefix = cvaMerge([
+    "text-secondary-400",
+    "hover:text-secondary-500",
+    "focus:text-secondary-500",
+    "h-min",
+    "leading-[0]",
+    "flex",
+    "items-center",
+], {
     variants: {
         selected: {
             true: "text-secondary-600",
@@ -3191,7 +3199,7 @@ const cvaMenuItemPrefix = cvaMerge(["text-secondary-400", "hover:text-secondary-
         disabled: false,
     },
 });
-const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
+const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm", "flex", "items-center"], {
     variants: {
         selected: {
             true: "text-secondary-600",
@@ -3218,7 +3226,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -3241,7 +3249,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
                 e.stopPropagation();
             }
             onClick?.(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (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 ?? label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled, className: "flex items-center" }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (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: [optionPrefix ? optionPrefix : null, 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] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.7.36",
+  "version": "1.7.41",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.28",
-    "@trackunit/css-class-variance-utilities": "1.6.27",
-    "@trackunit/shared-utils": "1.8.27",
-    "@trackunit/ui-icons": "1.6.26",
-    "@trackunit/react-table-pagination": "1.6.26",
-    "@trackunit/react-test-setup": "1.3.27",
+    "@trackunit/ui-design-tokens": "1.6.31",
+    "@trackunit/css-class-variance-utilities": "1.6.30",
+    "@trackunit/shared-utils": "1.8.30",
+    "@trackunit/ui-icons": "1.6.29",
+    "@trackunit/react-table-pagination": "1.6.29",
+    "@trackunit/react-test-setup": "1.3.30",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

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

@@ -71,6 +71,11 @@ export interface MenuItemProps extends CommonProps {
      * Adds a suffixed description to the label, ie. (CustomerID 1234)
      */
     optionLabelDescription?: string;
+    /**
+     * Adds a prefix to the label
+     * This is typically used to render an icon.
+     */
+    optionPrefix?: ReactNode;
     /**
      * The size of the field.
      *
@@ -85,4 +90,4 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, fieldSize, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;