@trackunit/react-components 1.10.3 → 1.10.4

package/index.cjs.js

@@ -3082,7 +3082,13 @@ const cvaPopoverTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "it
 const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-neutral-500"]);
 
 /**
+ * The PopoverContent component displays the content inside a popover overlay.
  *
+ * This component must be used within a `<Popover>` component. It renders the content
+ * in a portal and manages focus, positioning, and accessibility features.
+ *
+ * @param {PopoverContentProps} props - The props for the PopoverContent component
+ * @returns {ReactElement} The popover content element
  */
 const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
@@ -4028,7 +4034,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
             "not-allowed": "cursor-not-allowed",
         },
         selection: {
-            selected: ["bg-primary-50", "hover:bg-primary-50", "focus-within:bg-primary-50"],
+            selected: ["bg-primary-50", "hover:bg-primary-100", "focus-within:bg-primary-50"],
             unselected: "",
             auto: [
                 "hover:bg-neutral-100",
@@ -4083,25 +4089,37 @@ const ListItem = ({ className, dataTestId, onClick, details, title, description,
                                 })) })) : null, meta ? (jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center pt-0.5", children: jsxRuntime.jsx(Text, { className: "truncate text-xs text-neutral-400", dataTestId: dataTestId ? `${dataTestId}-meta` : undefined, weight: "bold", children: meta }) })) : null] })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 text-nowrap pl-2", children: [details, onClick ? jsxRuntime.jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
 };
 
-const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
+// These must be two separate divs (menu and menulist) so that the overflow-clip can be applied to the parent and the overflow-y-auto can be applied to the child.
+// * Note that the cvaMenu is also used for Select component
+const cvaMenu = cssClassVarianceUtilities.cvaMerge([
     "shadow",
     "rounded-lg",
-    "z-popover",
     "bg-white",
     "border",
     "border-neutral-300",
+    "z-popover",
     "grid",
     "min-w-[200px]",
-    "max-w-[300px]",
-    "p-1",
+    "overflow-clip",
 ], {
     variants: {
-        stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden",
+        limitWidth: {
+            true: "max-w-[300px]",
             false: "",
         },
     },
+    defaultVariants: {
+        limitWidth: true,
+    },
 });
+// * Note that the cvaMenuList is also used for Select component
+const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
+    "p-1",
+    "gap-y-0.5",
+    "grid",
+    "max-h-[max(40dvh,var(--spacing-64))]",
+    "overflow-y-auto",
+]);
 const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-neutral-300"]);
 const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
 const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
@@ -4126,12 +4144,12 @@ const cvaMenuItem = (props) => {
         focus: focused === true ? "focused" : "unfocused",
     }), className);
 };
-const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
+const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
     variants: {
         fieldSize: {
             small: ["text-xs", "py-1.5"],
-            medium: "",
-            large: "",
+            medium: ["text-sm", "py-2"],
+            large: ["text-sm", "py-2"],
         },
         variant: {
             primary: [],
@@ -4161,6 +4179,7 @@ const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-
         },
     ],
     defaultVariants: {
+        fieldSize: "medium",
         variant: "primary",
         selected: false,
         disabled: false,
@@ -4274,7 +4293,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected = false, fo
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */
-const MenuList = ({ dataTestId, className, children, withStickyHeader = false, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
+const MenuList = ({ dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = react.Children.toArray(children);
     const [internalSelectedItems, setInternalSelectedItems] = react.useState(controlledSelectedItems ?? []);
     const selectedItems = controlledSelectedItems ?? internalSelectedItems;
@@ -4291,28 +4310,28 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
             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) => {
-            if (react.isValidElement(menuItem)) {
-                const isSelected = (selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected) ?? false;
-                return react.cloneElement(menuItem, {
-                    ...menuItem.props,
-                    key: index,
-                    onClick: (event) => {
-                        menuItem.props.onClick?.(event);
-                        if (menuItem.props.disabled !== true) {
-                            handleItemClick(menuItem.props.id ?? `${index}`);
-                        }
-                    },
-                    className: isMulti && isSelected
-                        ? cvaMenuListMultiSelect({ className: menuItem.props.className })
-                        : cvaMenuListItem({ className: menuItem.props.className }),
-                    selected: isSelected,
-                    suffix: menuItem.props.suffix ??
-                        (isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
-                });
-            }
-            return null;
-        }) }));
+    return (jsxRuntime.jsx("div", { className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, role: "list", tabIndex: 0, children: jsxRuntime.jsx("div", { className: cvaMenuList(), children: childrenArr.map((menuItem, index) => {
+                if (react.isValidElement(menuItem)) {
+                    const isSelected = (selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected) ?? false;
+                    return react.cloneElement(menuItem, {
+                        ...menuItem.props,
+                        key: index,
+                        onClick: (event) => {
+                            menuItem.props.onClick?.(event);
+                            if (menuItem.props.disabled !== true) {
+                                handleItemClick(menuItem.props.id ?? `${index}`);
+                            }
+                        },
+                        className: isMulti && isSelected
+                            ? cvaMenuListMultiSelect({ className: menuItem.props.className })
+                            : cvaMenuListItem({ className: menuItem.props.className }),
+                        selected: isSelected,
+                        suffix: menuItem.props.suffix ??
+                            (isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                    });
+                }
+                return null;
+            }) }) }));
 };
 
 const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
@@ -5345,11 +5364,16 @@ exports.cvaInteractableItem = cvaInteractableItem;
 exports.cvaList = cvaList;
 exports.cvaListContainer = cvaListContainer;
 exports.cvaListItem = cvaListItem$1;
+exports.cvaMenu = cvaMenu;
 exports.cvaMenuItem = cvaMenuItem;
 exports.cvaMenuItemLabel = cvaMenuItemLabel;
 exports.cvaMenuItemPrefix = cvaMenuItemPrefix;
 exports.cvaMenuItemStyle = cvaMenuItemStyle;
 exports.cvaMenuItemSuffix = cvaMenuItemSuffix;
+exports.cvaMenuList = cvaMenuList;
+exports.cvaMenuListDivider = cvaMenuListDivider;
+exports.cvaMenuListItem = cvaMenuListItem;
+exports.cvaMenuListMultiSelect = cvaMenuListMultiSelect;
 exports.cvaPageHeader = cvaPageHeader;
 exports.cvaPageHeaderContainer = cvaPageHeaderContainer;
 exports.cvaPageHeaderHeading = cvaPageHeaderHeading;

package/index.esm.js

@@ -3080,7 +3080,13 @@ const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1
 const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
 
 /**
+ * The PopoverContent component displays the content inside a popover overlay.
  *
+ * This component must be used within a `<Popover>` component. It renders the content
+ * in a portal and manages focus, positioning, and accessibility features.
+ *
+ * @param {PopoverContentProps} props - The props for the PopoverContent component
+ * @returns {ReactElement} The popover content element
  */
 const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
@@ -4026,7 +4032,7 @@ const cvaInteractableItem = cvaMerge("", {
             "not-allowed": "cursor-not-allowed",
         },
         selection: {
-            selected: ["bg-primary-50", "hover:bg-primary-50", "focus-within:bg-primary-50"],
+            selected: ["bg-primary-50", "hover:bg-primary-100", "focus-within:bg-primary-50"],
             unselected: "",
             auto: [
                 "hover:bg-neutral-100",
@@ -4081,25 +4087,37 @@ const ListItem = ({ className, dataTestId, onClick, details, title, description,
                                 })) })) : null, meta ? (jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center pt-0.5", children: jsx(Text, { className: "truncate text-xs text-neutral-400", dataTestId: dataTestId ? `${dataTestId}-meta` : undefined, weight: "bold", children: meta }) })) : null] })] }), jsxs("div", { className: "flex items-center gap-0.5 text-nowrap pl-2", children: [details, onClick ? jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
 };
 
-const cvaMenuList = cvaMerge([
+// These must be two separate divs (menu and menulist) so that the overflow-clip can be applied to the parent and the overflow-y-auto can be applied to the child.
+// * Note that the cvaMenu is also used for Select component
+const cvaMenu = cvaMerge([
     "shadow",
     "rounded-lg",
-    "z-popover",
     "bg-white",
     "border",
     "border-neutral-300",
+    "z-popover",
     "grid",
     "min-w-[200px]",
-    "max-w-[300px]",
-    "p-1",
+    "overflow-clip",
 ], {
     variants: {
-        stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden",
+        limitWidth: {
+            true: "max-w-[300px]",
             false: "",
         },
     },
+    defaultVariants: {
+        limitWidth: true,
+    },
 });
+// * Note that the cvaMenuList is also used for Select component
+const cvaMenuList = cvaMerge([
+    "p-1",
+    "gap-y-0.5",
+    "grid",
+    "max-h-[max(40dvh,var(--spacing-64))]",
+    "overflow-y-auto",
+]);
 const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-neutral-300"]);
 const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
 const cvaMenuListItem = cvaMerge("max-w-full");
@@ -4124,12 +4142,12 @@ const cvaMenuItem = (props) => {
         focus: focused === true ? "focused" : "unfocused",
     }), className);
 };
-const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
+const cvaMenuItemStyle = cvaMerge(["px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
     variants: {
         fieldSize: {
             small: ["text-xs", "py-1.5"],
-            medium: "",
-            large: "",
+            medium: ["text-sm", "py-2"],
+            large: ["text-sm", "py-2"],
         },
         variant: {
             primary: [],
@@ -4159,6 +4177,7 @@ const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row",
         },
     ],
     defaultVariants: {
+        fieldSize: "medium",
         variant: "primary",
         selected: false,
         disabled: false,
@@ -4272,7 +4291,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected = false, fo
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */
-const MenuList = ({ dataTestId, className, children, withStickyHeader = false, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
+const MenuList = ({ dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = Children.toArray(children);
     const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems ?? []);
     const selectedItems = controlledSelectedItems ?? internalSelectedItems;
@@ -4289,28 +4308,28 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
             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) => {
-            if (isValidElement(menuItem)) {
-                const isSelected = (selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected) ?? false;
-                return cloneElement(menuItem, {
-                    ...menuItem.props,
-                    key: index,
-                    onClick: (event) => {
-                        menuItem.props.onClick?.(event);
-                        if (menuItem.props.disabled !== true) {
-                            handleItemClick(menuItem.props.id ?? `${index}`);
-                        }
-                    },
-                    className: isMulti && isSelected
-                        ? cvaMenuListMultiSelect({ className: menuItem.props.className })
-                        : cvaMenuListItem({ className: menuItem.props.className }),
-                    selected: isSelected,
-                    suffix: menuItem.props.suffix ??
-                        (isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
-                });
-            }
-            return null;
-        }) }));
+    return (jsx("div", { className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, role: "list", tabIndex: 0, children: jsx("div", { className: cvaMenuList(), children: childrenArr.map((menuItem, index) => {
+                if (isValidElement(menuItem)) {
+                    const isSelected = (selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected) ?? false;
+                    return cloneElement(menuItem, {
+                        ...menuItem.props,
+                        key: index,
+                        onClick: (event) => {
+                            menuItem.props.onClick?.(event);
+                            if (menuItem.props.disabled !== true) {
+                                handleItemClick(menuItem.props.id ?? `${index}`);
+                            }
+                        },
+                        className: isMulti && isSelected
+                            ? cvaMenuListMultiSelect({ className: menuItem.props.className })
+                            : cvaMenuListItem({ className: menuItem.props.className }),
+                        selected: isSelected,
+                        suffix: menuItem.props.suffix ??
+                            (isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                    });
+                }
+                return null;
+            }) }) }));
 };
 
 const cvaMoreMenu = cvaMerge(["p-0"]);
@@ -5262,4 +5281,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

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

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

@@ -5,12 +5,6 @@ export interface MenuListProps extends CommonProps {
      * List of menu items to be rendered.
      */
     children: ReactNode;
-    /**
-     * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
-     *
-     * @default false
-     */
-    withStickyHeader?: boolean;
     /** Click handler - typically used to trigger close action. when propagation is NOT prevented on menuItem */
     onClick?: () => void;
     /**
@@ -39,4 +33,4 @@ export interface MenuListProps extends CommonProps {
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ...args }: MenuListProps) => ReactElement;
+export declare const MenuList: ({ dataTestId, className, children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ...args }: MenuListProps) => ReactElement;

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

@@ -1,6 +1,7 @@
-export declare const cvaMenuList: (props?: ({
-    stickyHeader?: boolean | null | undefined;
+export declare const cvaMenu: (props?: ({
+    limitWidth?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuList: (props?: 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,4 +1,5 @@
 export * from "./MenuDivider/MenuDivider";
 export * from "./MenuItem/MenuItem";
 export * from "./MenuList/MenuList";
+export * from "./MenuList/MenuList.variants";
 export * from "./MoreMenu/MoreMenu";

package/src/components/Popover/PopoverContent.d.ts

@@ -2,6 +2,30 @@ import { HTMLProps, ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common";
 export type PopoverContentChildren = ((close: () => void) => ReactNode) | ReactNode;
 export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "children">, CommonProps {
+    /**
+     * The content to display inside the popover.
+     *
+     * Can be either:
+     * - **ReactNode**: Any valid React content (elements, text, components, etc.)
+     * - **Function**: A render function that receives a `close` callback to programmatically close the popover
+     *
+     * @example
+     * // Static content
+     * <PopoverContent>
+     *   <Card><CardBody>Hello</CardBody></Card>
+     * </PopoverContent>
+     * @example
+     * // Dynamic content with close button
+     * <PopoverContent>
+     *   {close => (
+     *     <Card>
+     *       <CardBody>
+     *         <Button onClick={close}>Close</Button>
+     *       </CardBody>
+     *     </Card>
+     *   )}
+     * </PopoverContent>
+     */
     children: PopoverContentChildren;
     /**
      * Custom dom id to use for portalling the popover content
@@ -13,6 +37,12 @@ export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "ch
     ref?: Ref<HTMLDivElement>;
 }
 /**
+ * The PopoverContent component displays the content inside a popover overlay.
+ *
+ * This component must be used within a `<Popover>` component. It renders the content
+ * in a portal and manages focus, positioning, and accessibility features.
  *
+ * @param {PopoverContentProps} props - The props for the PopoverContent component
+ * @returns {ReactElement} The popover content element
  */
 export declare const PopoverContent: ({ className, dataTestId, children, portalId, ref: propRef, ...props }: PopoverContentProps) => ReactElement;