@trackunit/react-components 0.4.32 → 0.4.34

package/index.cjs.js

@@ -1437,6 +1437,14 @@ const cvaBreadcrumbForMediumScreen = cssClassVarianceUtilities.cvaMerge(["flex"]
     },
 });
 
+/**
+ * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
+ */
+const BreadcrumbItem = ({ item, dataTestId }) => {
+    const id = sharedUtils.uuidv4();
+    return (jsxRuntime.jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
+};
+
 /**
  * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
  */
@@ -1519,13 +1527,6 @@ const BreadcrumbContainer = ({ dataTestId, breadcrumbItems }) => {
     }
     return jsxRuntime.jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, dataTestId: `largeScreen-${dataTestId}` });
 };
-/**
- * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
- */
-const BreadcrumbItem = ({ item, dataTestId }) => {
-    const id = sharedUtils.uuidv4();
-    return (jsxRuntime.jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
-};
 
 const cvaCard = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -3738,7 +3739,7 @@ const PopoverContent = React.forwardRef(function PopoverContent({ className, dat
     var _a;
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(react.FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
+    return (jsxRuntime.jsx(react.FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -4035,6 +4036,36 @@ const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconB
     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 })] }));
 };
 
+const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
+    "shadow",
+    "rounded-lg",
+    "z-popover",
+    "bg-white",
+    "border",
+    "border-slate-300",
+    "grid",
+    "min-w-[200px]",
+    "max-w-[300px]",
+    "p-1",
+], {
+    variants: {
+        stickyHeader: {
+            true: "grid-rows-min-fr grid overflow-y-hidden",
+            false: "",
+        },
+    },
+});
+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-[290px]");
+
+/**
+ * The MenuDivider component is used to separate items in a menu list.
+ */
+const MenuDivider = () => {
+    return jsxRuntime.jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider" });
+};
+
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -4087,44 +4118,107 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
     },
 });
 
-const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
+/**
+ * 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, variant } = props !== null && props !== void 0 ? props : {};
+    return tailwindMerge.twMerge(cvaMenuItemStyle({ size, variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+};
+const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
         size: {
             small: "py-1",
             medium: "py-2",
         },
+        variant: {
+            primary: [],
+            danger: [
+                "text-danger-600",
+                "hover:!bg-danger-100",
+                "focus:!bg-danger-200",
+                "hover:!text-danger-700",
+                "focus:!text-danger-800",
+            ],
+        },
+        selected: {
+            true: "",
+            false: "",
+        },
+        disabled: {
+            true: "text-black opacity-50",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            /* danger not multi-select enabled */
+            selected: true,
+            variant: "danger",
+            className: ["!bg-white"],
+        },
+    ],
+    defaultVariants: {
+        variant: "primary",
+        selected: false,
+        disabled: false,
     },
 });
-/**
- * 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",
-    "text-ellipsis",
-    "truncate",
-    "group-hover:text-gray-900",
-    "group-active:text-gray-700",
-]);
-const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "text-sm"], {
+const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge(["flex-grow", "truncate", "text-black", "font-normal"], {
+    variants: {
+        variant: {
+            primary: [],
+            danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
+        },
+        disabled: {
+            true: "text-black opacity-50",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
+    },
+});
+const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["text-secondary-400", "hover:text-secondary-500", "focus:text-secondary-500", "h-min", "leading-[0]"], {
     variants: {
         selected: {
-            true: "text-primary-600 hover:text-primary-700",
+            true: "text-secondary-600",
+            false: "",
+        },
+        variant: {
+            primary: [],
+            danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
+        },
+        disabled: {
+            true: "text-secondary opacity-50",
             false: "",
         },
     },
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
+    },
 });
-const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "group-hover:text-slate-600", "h-min", "leading-[0]", "text-sm"], {
+const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-400", "text-sm"], {
     variants: {
         selected: {
-            true: "text-primary-600 hover:text-primary-700",
+            true: "text-secondary-600",
             false: "",
         },
+        variant: {
+            primary: [],
+            danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
+        },
+        disabled: {
+            true: "text-secondary opacity-50",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
     },
 });
 
@@ -4134,46 +4228,81 @@ 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, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaMenuItem({
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, variant = "primary", }) => {
+    /* Handle tab navigation */
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && onClick && !disabled) {
+            stopPropagation && e.stopPropagation();
+            // eslint-disable-next-line local-rules/no-typescript-assertion
+            onClick(e);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
             disabled,
             size,
             className,
-        }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "menu-item", id: id, onClick: e => {
+            variant,
+        }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, role: "menuitem", 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] }));
+        }, 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] }));
 };
 
-const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
-    variants: {
-        stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden",
-            false: "",
-        },
-    },
-});
-const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge([
-    "file:w-full",
-    "selection:col-span-full",
-    "selection:h-px",
-    "selection:bg-slate-200",
-]);
-
 /**
- * The MenuList component is used for menus and selects.
- 
+ * The MenuList is a popover menu that appears above all other content on the page. The menu offers a list of actions or functions that a user can access by clicking on a trigger.
+ *
+ * **When to use**
+ * - Use the MenuList if you have limited space and need to display overflow actions in a list.
+ * - Use the MenuList for actions that are not essential to completing workflows.
+ * - Don’t use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
+ *
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-const MenuList = ({ dataTestId, className, children, withStickyHeader = false, showDivider = false, ...args }) => {
+const MenuList = ({ dataTestId, className, children, withStickyHeader = false, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = React.Children.toArray(children);
-    const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsxRuntime.jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId, onClick: args.onClick, role: "list", tabIndex: 0, children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsxRuntime.jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
+    const [internalSelectedItems, setInternalSelectedItems] = React.useState(controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : []);
+    const selectedItems = controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : internalSelectedItems;
+    const handleItemClick = React.useCallback((id, disabled) => {
+        if (disabled) {
+            return;
+        }
+        const newSelectedItems = isMulti
+            ? selectedItems.includes(id)
+                ? selectedItems.filter(item => item !== id)
+                : [...selectedItems, id]
+            : [id];
+        if (onSelectionChange) {
+            onSelectionChange(newSelectedItems);
+        }
+        else {
+            setInternalSelectedItems(newSelectedItems);
+        }
+    }, [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;
+            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: "h-5 text-blue-600", name: "Check", size: "medium", type: "solid" })) : null,
+                    }) }, index));
+            }
+            return null;
+        }) }));
 };
 
-const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-4"]);
+const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
 
 /**
  * A kebab menu component.
@@ -4191,7 +4320,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsxRuntime.jsx(IconButton, { ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) }) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -4607,7 +4736,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                 }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, { iconButtonProps: {
                     circular: false,
                     variant: "ghost-neutral",
-                }, popoverProps: { placement: "bottom-end" }, ...moreMenuProps, className: tailwindMerge.twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React.Children.map(children, child => {
+                }, ...moreMenuProps, className: moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React.cloneElement(child, {
                                 onClick: () => {
@@ -4615,6 +4744,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                                     (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                                     close();
                                 },
+                                className: "w-full",
                             })
                             : null;
                     }) })) })) : null] }));
@@ -5026,7 +5156,6 @@ exports.Alert = Alert;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbContainer = BreadcrumbContainer;
-exports.BreadcrumbItem = BreadcrumbItem;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardBody = CardBody;
@@ -5044,6 +5173,7 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Indicator = Indicator;
 exports.KPICard = KPICard;
+exports.MenuDivider = MenuDivider;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.MoreMenu = MoreMenu;

package/index.esm.js

@@ -1417,6 +1417,14 @@ const cvaBreadcrumbForMediumScreen = cvaMerge(["flex"], {
     },
 });
 
+/**
+ * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
+ */
+const BreadcrumbItem = ({ item, dataTestId }) => {
+    const id = uuidv4();
+    return (jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
+};
+
 /**
  * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
  */
@@ -1499,13 +1507,6 @@ const BreadcrumbContainer = ({ dataTestId, breadcrumbItems }) => {
     }
     return jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, dataTestId: `largeScreen-${dataTestId}` });
 };
-/**
- * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
- */
-const BreadcrumbItem = ({ item, dataTestId }) => {
-    const id = uuidv4();
-    return (jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
-};
 
 const cvaCard = cvaMerge([
     "flex",
@@ -3718,7 +3719,7 @@ const PopoverContent = React__default.forwardRef(function PopoverContent({ class
     var _a;
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
+    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -4015,6 +4016,36 @@ const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconB
     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 })] }));
 };
 
+const cvaMenuList = cvaMerge([
+    "shadow",
+    "rounded-lg",
+    "z-popover",
+    "bg-white",
+    "border",
+    "border-slate-300",
+    "grid",
+    "min-w-[200px]",
+    "max-w-[300px]",
+    "p-1",
+], {
+    variants: {
+        stickyHeader: {
+            true: "grid-rows-min-fr grid overflow-y-hidden",
+            false: "",
+        },
+    },
+});
+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-[290px]");
+
+/**
+ * The MenuDivider component is used to separate items in a menu list.
+ */
+const MenuDivider = () => {
+    return jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider" });
+};
+
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -4067,44 +4098,107 @@ const cvaInteractableItem = cvaMerge("", {
     },
 });
 
-const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
+/**
+ * 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, variant } = props !== null && props !== void 0 ? props : {};
+    return twMerge(cvaMenuItemStyle({ size, variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+};
+const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
         size: {
             small: "py-1",
             medium: "py-2",
         },
+        variant: {
+            primary: [],
+            danger: [
+                "text-danger-600",
+                "hover:!bg-danger-100",
+                "focus:!bg-danger-200",
+                "hover:!text-danger-700",
+                "focus:!text-danger-800",
+            ],
+        },
+        selected: {
+            true: "",
+            false: "",
+        },
+        disabled: {
+            true: "text-black opacity-50",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            /* danger not multi-select enabled */
+            selected: true,
+            variant: "danger",
+            className: ["!bg-white"],
+        },
+    ],
+    defaultVariants: {
+        variant: "primary",
+        selected: false,
+        disabled: false,
     },
 });
-/**
- * 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",
-    "text-ellipsis",
-    "truncate",
-    "group-hover:text-gray-900",
-    "group-active:text-gray-700",
-]);
-const cvaMenuItemSuffix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "text-sm"], {
+const cvaMenuItemLabel = cvaMerge(["flex-grow", "truncate", "text-black", "font-normal"], {
+    variants: {
+        variant: {
+            primary: [],
+            danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
+        },
+        disabled: {
+            true: "text-black opacity-50",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
+    },
+});
+const cvaMenuItemPrefix = cvaMerge(["text-secondary-400", "hover:text-secondary-500", "focus:text-secondary-500", "h-min", "leading-[0]"], {
     variants: {
         selected: {
-            true: "text-primary-600 hover:text-primary-700",
+            true: "text-secondary-600",
+            false: "",
+        },
+        variant: {
+            primary: [],
+            danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
+        },
+        disabled: {
+            true: "text-secondary opacity-50",
             false: "",
         },
     },
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
+    },
 });
-const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-400", "group-hover:text-slate-600", "h-min", "leading-[0]", "text-sm"], {
+const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
     variants: {
         selected: {
-            true: "text-primary-600 hover:text-primary-700",
+            true: "text-secondary-600",
             false: "",
         },
+        variant: {
+            primary: [],
+            danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
+        },
+        disabled: {
+            true: "text-secondary opacity-50",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
     },
 });
 
@@ -4114,46 +4208,81 @@ 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, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
-    return (jsxs("div", { className: cvaMenuItem({
+const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, variant = "primary", }) => {
+    /* Handle tab navigation */
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && onClick && !disabled) {
+            stopPropagation && e.stopPropagation();
+            // eslint-disable-next-line local-rules/no-typescript-assertion
+            onClick(e);
+        }
+    };
+    return (jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
             disabled,
             size,
             className,
-        }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "menu-item", id: id, onClick: e => {
+            variant,
+        }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, role: "menuitem", 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] }));
+        }, 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] }));
 };
 
-const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
-    variants: {
-        stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden",
-            false: "",
-        },
-    },
-});
-const cvaMenuListDivider = cvaMerge([
-    "file:w-full",
-    "selection:col-span-full",
-    "selection:h-px",
-    "selection:bg-slate-200",
-]);
-
 /**
- * The MenuList component is used for menus and selects.
- 
+ * The MenuList is a popover menu that appears above all other content on the page. The menu offers a list of actions or functions that a user can access by clicking on a trigger.
+ *
+ * **When to use**
+ * - Use the MenuList if you have limited space and need to display overflow actions in a list.
+ * - Use the MenuList for actions that are not essential to completing workflows.
+ * - Don’t use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
+ *
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-const MenuList = ({ dataTestId, className, children, withStickyHeader = false, showDivider = false, ...args }) => {
+const MenuList = ({ dataTestId, className, children, withStickyHeader = false, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = Children.toArray(children);
-    const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId, onClick: args.onClick, role: "list", tabIndex: 0, children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
+    const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : []);
+    const selectedItems = controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : internalSelectedItems;
+    const handleItemClick = useCallback((id, disabled) => {
+        if (disabled) {
+            return;
+        }
+        const newSelectedItems = isMulti
+            ? selectedItems.includes(id)
+                ? selectedItems.filter(item => item !== id)
+                : [...selectedItems, id]
+            : [id];
+        if (onSelectionChange) {
+            onSelectionChange(newSelectedItems);
+        }
+        else {
+            setInternalSelectedItems(newSelectedItems);
+        }
+    }, [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;
+            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: "h-5 text-blue-600", name: "Check", size: "medium", type: "solid" })) : null,
+                    }) }, index));
+            }
+            return null;
+        }) }));
 };
 
-const cvaMoreMenu = cvaMerge(["p-4"]);
+const cvaMoreMenu = cvaMerge(["p-0"]);
 
 /**
  * A kebab menu component.
@@ -4171,7 +4300,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, { ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsx(IconButton, { ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) }) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cvaMerge(["flex", "items-center"]);
@@ -4587,7 +4716,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                 }) }), overflowItemCount > 0 ? (jsx(MoreMenu, { iconButtonProps: {
                     circular: false,
                     variant: "ghost-neutral",
-                }, popoverProps: { placement: "bottom-end" }, ...moreMenuProps, className: twMerge(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, "!p-0"), dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default.Children.map(children, child => {
+                }, ...moreMenuProps, className: moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React__default.cloneElement(child, {
                                 onClick: () => {
@@ -4595,6 +4724,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                                     (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                                     close();
                                 },
+                                className: "w-full",
                             })
                             : null;
                     }) })) })) : null] }));
@@ -5002,4 +5132,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, ToggleItem, 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, usePrevious, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, 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, ToggleItem, 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, usePrevious, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };

package/package.json

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

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,4 @@
-import { BreadcrumbContainerProps, BreadcrumbItemRenderProps, BreadcrumbProps } from "./utils/types";
+import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
 /**
  * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
  *
@@ -19,7 +19,3 @@ export declare const Breadcrumb: ({ className, dataTestId, breadcrumbItems, back
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
 export declare const BreadcrumbContainer: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
- */
-export declare const BreadcrumbItem: ({ item, dataTestId }: BreadcrumbItemRenderProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbItemRenderProps } from "./utils/types";
+/**
+ * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
+ */
+export declare const BreadcrumbItem: ({ item, dataTestId }: BreadcrumbItemRenderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+/**
+ * The MenuDivider component is used to separate items in a menu list.
+ */
+export declare const MenuDivider: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,10 @@
-import * as React from "react";
 import { CommonProps, Size } from "../../../common";
 type MenuItemSize = Extract<Size, "small" | "medium">;
+export type MenuItemVariant = "primary" | "danger";
 export interface MenuItemProps extends CommonProps {
+    /**
+     * The unique id for the menu item
+     */
     id?: string;
     /**
      * Label of the menu item
@@ -51,7 +54,14 @@ export interface MenuItemProps extends CommonProps {
      * used in Menu and Select components
      */
     stopPropagation?: boolean;
+    /**
+     * The tab index of the menu item.
+     */
     tabIndex?: number;
+    /**
+     * The button's variant. Values are primary and danger.
+     */
+    variant?: MenuItemVariant;
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -59,5 +69,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, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+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 {};

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

@@ -1,22 +1,35 @@
 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;
+import { MenuItemVariant } from "./MenuItem";
 type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
     size?: "small" | "medium";
+    variant?: MenuItemVariant;
+    selected?: boolean | null | undefined;
 };
 /**
  * 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: (props?: CvaMenuItemProps) => string;
-export declare const cvaMenuItemLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaMenuItemSuffix: (props?: ({
+export declare const cvaMenuItemStyle: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    variant?: "primary" | "danger" | null | undefined;
     selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuItemLabel: (props?: ({
+    variant?: "primary" | "danger" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaMenuItemPrefix: (props?: ({
     selected?: boolean | null | undefined;
+    variant?: "primary" | "danger" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuItemSuffix: (props?: ({
+    selected?: boolean | null | undefined;
+    variant?: "primary" | "danger" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export {};

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

@@ -1,17 +1,9 @@
 import { CommonProps } from "../../../common";
-import { MenuItemProps } from "../MenuItem/MenuItem";
-export interface MenuListItemProps extends MenuItemProps {
-    showDivider?: boolean;
-}
 export interface MenuListProps extends CommonProps {
     /**
      * List of menu items to be rendered.
      */
     children: React.ReactNode;
-    /**
-     * List of menu items to be rendered.
-     */
-    showDivider?: boolean;
     /**
      * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
      *
@@ -20,11 +12,30 @@ export interface MenuListProps extends CommonProps {
     withStickyHeader?: boolean;
     /** Click handler - typically used to trigger close action. when propagation is NOT prevented on menuItem */
     onClick?: () => void;
+    /**
+     * Enable multi-selection in the menu list.
+     *
+     * @default false
+     */
+    isMulti?: boolean;
+    /**
+     * Array of IDs representing the currently selected items.
+     */
+    selectedItems?: string[];
+    /**
+     * Callback triggered when selected items change.
+     */
+    onSelectionChange?: (selected: string[]) => void;
 }
 /**
- * The MenuList component is used for menus and selects.
- 
+ * The MenuList is a popover menu that appears above all other content on the page. The menu offers a list of actions or functions that a user can access by clicking on a trigger.
+ *
+ * **When to use**
+ * - Use the MenuList if you have limited space and need to display overflow actions in a list.
+ * - Use the MenuList for actions that are not essential to completing workflows.
+ * - Don’t use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
+ *
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, showDivider, ...args }: MenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ...args }: MenuListProps) => JSX.Element;

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

@@ -2,3 +2,5 @@ export declare const cvaMenuList: (props?: ({
     stickyHeader?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaMenuListDivider: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMenuListMultiSelect: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMenuListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -1,3 +1,4 @@
+export * from "./MenuDivider/MenuDivider";
 export * from "./MenuItem/MenuItem";
 export * from "./MenuList/MenuList";
 export * from "./MoreMenu/MoreMenu";