@trackunit/react-components 0.4.33 → 0.5.0

package/index.esm.js

@@ -14,7 +14,6 @@ import { Slottable, Slot } from '@radix-ui/react-slot';
 import isEqual from 'lodash/isEqual';
 import { Link, useBlocker } from '@tanstack/react-router';
 import { useCopyToClipboard } from 'usehooks-ts';
-import { useSwipeable } from 'react-swipeable';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
 import { twMerge } from 'tailwind-merge';
@@ -1861,331 +1860,6 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
-const cvaDialog = cvaMerge([
-    "z-toast",
-    "pointer-events-auto",
-    "absolute",
-    "transform",
-    "flex-col",
-    "bg-neutral-50",
-    "transition-transform",
-    "duration-300",
-    "ease-in-out",
-    "shadow-lg",
-], {
-    variants: {
-        position: {
-            left: "left-0 top-0 h-full w-fit rounded-r-lg",
-            right: "right-0 top-0 h-full w-fit rounded-l-lg",
-            top: "left-0 top-0 h-fit w-full rounded-b-lg",
-            bottom: "bottom-0 left-0 right-0 h-fit w-full rounded-t-lg",
-        },
-        sidebarMode: {
-            "semi-closed": "translate-y-[calc(100%-2.2rem)]",
-            "1/3": "translate-y-2/3",
-            "2/3": "translate-y-1/3",
-            full: "translate-y-0",
-            "semi-full": "translate-y-5",
-            closed: "translate-y-full",
-        },
-        isLargeScreen: {
-            true: "",
-            false: "bottom-0 left-0 right-0 h-full w-full rounded-t-lg",
-        },
-        open: {
-            true: "",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            isLargeScreen: false,
-            open: false,
-            className: "translate-y-full",
-        },
-        {
-            isLargeScreen: true,
-            open: true,
-            position: "left",
-            className: "translate-x-0",
-        },
-        {
-            isLargeScreen: true,
-            open: false,
-            position: "left",
-            className: "-translate-x-full",
-        },
-        {
-            isLargeScreen: true,
-            open: true,
-            position: "right",
-            className: "translate-x-0",
-        },
-        {
-            isLargeScreen: true,
-            open: false,
-            position: "right",
-            className: "translate-x-full",
-        },
-        {
-            isLargeScreen: true,
-            open: true,
-            position: "top",
-            className: "translate-y-0",
-        },
-        {
-            isLargeScreen: true,
-            open: false,
-            position: "top",
-            className: "-translate-y-full",
-        },
-        {
-            isLargeScreen: true,
-            open: true,
-            position: "bottom",
-            className: "translate-y-0",
-        },
-        {
-            isLargeScreen: true,
-            open: false,
-            position: "bottom",
-            className: "translate-y-full",
-        },
-    ],
-});
-const cvaDialogContainer = cvaMerge(["flex", "flex-col", "overflow-hidden", "rounded-[inherit]"], {
-    variants: {
-        sidebarMode: {
-            "semi-closed": "h-auto",
-            "1/3": "h-[34%]",
-            "2/3": "h-[67%]",
-            "semi-full": "h-[calc(100%-1.25rem)]",
-            full: "h-full",
-            closed: "h-auto",
-        },
-    },
-});
-const cvaSwipeContainer = cvaMerge(["my-4", "flex", "items-center", "justify-center", "lg:hidden"]);
-const cvaSwipeIcon = cvaMerge(["block", "h-1", "w-10", "rounded-full", "bg-gray-400"]);
-const cvaToogleContainer = cvaMerge(["z-8", "absolute"], {
-    variants: {
-        position: {
-            left: "right-[-24px] top-[calc(50%-24px)]",
-            right: "left-[-24px] top-[calc(50%-24px)]",
-            top: "bottom-[-24px] left-[calc(50%-24px)]",
-            bottom: "left-[calc(50%-24px)] top-[-24px]",
-        },
-    },
-    defaultVariants: {
-        position: "left",
-    },
-});
-const cvaToogleButton = cvaMerge([
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "border-gray-300",
-    "bg-neutral-50",
-    "bg-center",
-    "bg-no-repeat",
-    "shadow-md",
-], {
-    variants: {
-        position: {
-            left: "h-12 w-6 rounded-r-lg",
-            right: "h-12 w-6 rounded-l-lg",
-            top: "h-6 w-12 rounded-b-lg",
-            bottom: "h-6 w-12 rounded-t-lg",
-        },
-    },
-    defaultVariants: {
-        position: "left",
-    },
-});
-const cvaOverlayContainer = cvaMerge([
-    "absolute",
-    "flex",
-    "items-center",
-    "justify-center",
-    "inset-0",
-    "bg-black/30",
-    "bg-opacity-50",
-    "transition-opacity",
-    "duration-200",
-    "ease-in-out",
-    "opacity-100",
-], {
-    variants: {
-        open: {
-            true: "opacity-1 z-popover",
-            false: "z-[-1] opacity-0",
-        },
-    },
-});
-
-/**
- * Overlay Component
- *
- * @param {object} props - The Overlay component properties
- * @param {boolean} props.open - Open status of the Overlay
- * @param {Function} props.onClose - Callback function when Overlay is closed
- * @returns {JSX.Element|null} The Overlay component
- */
-const Overlay = ({ open, onClose }) => {
-    useEffect(() => {
-        if (!onClose) {
-            return;
-        }
-        const handleEscape = (event) => {
-            if (event.key === "Escape") {
-                onClose(event);
-            }
-        };
-        if (open) {
-            window.addEventListener("keyup", handleEscape);
-        }
-        return () => {
-            window.removeEventListener("keyup", handleEscape);
-        };
-    }, [open, onClose]);
-    const handleClick = (event) => {
-        if (onClose) {
-            onClose(event);
-        }
-    };
-    return (jsx("div", { "aria-hidden": open, className: cvaOverlayContainer({ open }), "data-testid": "sidebar-overlay", onClick: handleClick }));
-};
-
-const getIconName = (open, position) => {
-    switch (position) {
-        case "left":
-            return open ? "ChevronLeft" : "ChevronRight";
-        case "right":
-            return open ? "ChevronRight" : "ChevronLeft";
-        case "top":
-            return open ? "ChevronUp" : "ChevronDown";
-        case "bottom":
-            return open ? "ChevronDown" : "ChevronUp";
-        default:
-            return open ? "ChevronLeft" : "ChevronRight";
-    }
-};
-/**
- * ToggleButton is a React functional component that returns a button with a chevron icon.
- * The direction of the chevron changes depending on the state of the 'open' prop and
- * the side the button is positioned ('position' prop).
- * The button might be disabled based on the 'disableButton' prop.
- *
- * @param {object} props - The properties passed to the component
- * @param {boolean} props.open - Indicates if the button is in "open" state
- * @param {Function} [props.onToggle] - Optional callback function for when the button is clicked
- * @param {Position} props.position - The position of the button relative to its container
- */
-const ToogleButton = ({ open, position, onToggle }) => {
-    const name = getIconName(open, position);
-    return (jsx("div", { className: cvaToogleContainer({ position }), children: jsx("button", { className: cvaToogleButton({ position }), "data-testid": "toggle-button", onClick: onToggle, children: jsx(Icon, { name: name }) }) }));
-};
-
-/**
- * MapSidebar is a sidebar component used with Maps.
- * It provides a slide over sidebar drawer which can be used for displaying map related information or controls.
- *
- * @param {DrawerProps} props - The props for the MapSidebar component
- * @returns {JSX.Element | null} Drawer component
- */
-const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, className, dialogClassName, }) => {
-    const { width } = useResize();
-    const isLargeScreen = width >= 1024;
-    const initialSidebarMode = () => {
-        if (!open) {
-            return "closed";
-        }
-        return isLargeScreen ? "full" : "2/3";
-    };
-    const [sidebarMode, setSidebarMode] = useState(initialSidebarMode);
-    const [isVisible, setIsVisible] = useState(open);
-    const [isAnimationStart, setStartAnimation] = useState(open);
-    useEffect(() => {
-        if (!isLargeScreen && open) {
-            setSidebarMode("2/3");
-        }
-        if (onToggle) {
-            setStartAnimation(open);
-            return;
-        }
-        manageVisibilityAndAnimation(open);
-    }, [onToggle, isLargeScreen, open]);
-    const manageVisibilityAndAnimation = (isOpen) => {
-        if (!isOpen) {
-            setStartAnimation(false);
-            return;
-        }
-        setIsVisible(true);
-        setTimeout(() => {
-            setStartAnimation(true);
-        }, 150);
-    };
-    const handlers = useSwipeable({
-        onSwipedUp: () => !isLargeScreen && handleSwipedUp(),
-        onSwipedDown: () => !isLargeScreen && handleSwipedDown(),
-        trackMouse: true,
-    });
-    const handleSwipedUp = () => {
-        setSidebarMode(prev => {
-            switch (prev) {
-                case "semi-closed":
-                    return "1/3";
-                case "1/3":
-                    return "2/3";
-                case "2/3":
-                    return "semi-full";
-                default:
-                    return prev;
-            }
-        });
-    };
-    const handleSwipedDown = () => {
-        setSidebarMode(prev => {
-            switch (prev) {
-                case "semi-full":
-                    return "2/3";
-                case "2/3":
-                    return "1/3";
-                case "1/3":
-                    return onClose ? "closed" : "semi-closed";
-                default:
-                    return prev;
-            }
-        });
-        /*
-         * Within a mobile device context, when swiping down,
-         * if the Drawer is open a third and no onToggle function is provided,
-         * the Drawer will automatically be closed using the onClose function.
-         */
-        if (sidebarMode === "1/3" && !onToggle && onClose) {
-            onClose();
-        }
-    };
-    const handleAnimationEnd = () => {
-        if (!open && !onToggle) {
-            setIsVisible(false);
-        }
-    };
-    if (!isVisible && !onToggle) {
-        return null;
-    }
-    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [!disableOverlay ? jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsxs("div", { ...handlers, className: cvaDialog({
-                    sidebarMode: isLargeScreen ? null : sidebarMode,
-                    isLargeScreen,
-                    open: isAnimationStart,
-                    position: isLargeScreen ? position : undefined,
-                    className: dialogClassName,
-                }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, onTransitionEnd: handleAnimationEnd, children: [isLargeScreen && onToggle ? jsx(ToogleButton, { onToggle: onToggle, open: open, position: position }) : null, jsxs("div", { className: cvaDialogContainer({
-                            sidebarMode: isLargeScreen ? "full" : sidebarMode,
-                        }), children: [jsx("div", { className: cvaSwipeContainer(), children: jsx("div", { className: cvaSwipeIcon() }) }), children] })] })] }));
-};
-
 const cvaSkeletonLine = cvaMerge([
     "rounded-md",
     "h-3",
@@ -3719,7 +3393,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,
@@ -4016,6 +3690,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.
  *
@@ -4068,45 +3772,108 @@ 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,
+    },
 });
 
 /**
@@ -4115,46 +3882,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.
@@ -4172,7 +3974,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"]);
@@ -4588,7 +4390,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: () => {
@@ -4596,6 +4398,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] }));
@@ -5003,4 +4806,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, 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, 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 };