@trackunit/react-components 0.5.22 → 0.5.24

package/index.cjs.js

@@ -4068,7 +4068,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -4086,7 +4086,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }), "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.jsx("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: children !== null && children !== void 0 ? children : label })), 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] }));
 };
 
 /**
@@ -4692,7 +4692,7 @@ const cvaTimelineDot = cssClassVarianceUtilities.cvaMerge(["flex", "space-x-4",
  * - with an indicator (dot)
  * - a header (next to the dot)
  * - and a body.
- 
+ *
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {JSX.Element} Timeline component
  */
@@ -4717,7 +4717,7 @@ const formattedDate = (date, showTime) => {
         dateFormat: "medium",
         timeFormat: "short",
         selectFormat: !showTime ? "dateOnly" : undefined,
-    }, undefined, undefined, "h23");
+    });
 };
 
 const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);

package/index.esm.js

@@ -4048,7 +4048,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -4066,7 +4066,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }), "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) : (jsx("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: children !== null && children !== void 0 ? children : label })), 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] }));
 };
 
 /**
@@ -4672,7 +4672,7 @@ const cvaTimelineDot = cvaMerge(["flex", "space-x-4", "items-start", "ml-[calc(-
  * - with an indicator (dot)
  * - a header (next to the dot)
  * - and a body.
- 
+ *
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {JSX.Element} Timeline component
  */
@@ -4697,7 +4697,7 @@ const formattedDate = (date, showTime) => {
         dateFormat: "medium",
         timeFormat: "short",
         selectFormat: !showTime ? "dateOnly" : undefined,
-    }, undefined, undefined, "h23");
+    });
 };
 
 const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);

package/package.json

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

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

@@ -62,6 +62,10 @@ export interface MenuItemProps extends CommonProps {
      * The button's variant. Values are primary and danger.
      */
     variant?: MenuItemVariant;
+    /**
+     * Adds a suffixed description to the label, ie. (CustomerID 1234)
+     */
+    optionLabelDescription?: string;
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -69,5 +73,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, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Timeline/Timeline.d.ts

@@ -7,7 +7,7 @@ export interface TimelineProps extends CommonProps {
  * - with an indicator (dot)
  * - a header (next to the dot)
  * - and a body.
- 
+ *
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {JSX.Element} Timeline component
  */