@pega/cosmos-react-core 2.0.0-dev.9.4 → 2.0.0-rc.1

package/lib/components/Menu/Menu.types.d.ts

@@ -1,21 +1,20 @@
 import { Dispatch, ReactNode, Ref, RefObject, SetStateAction, MouseEvent } from 'react';
 import { BaseProps, OmitStrict, PropsWithDefaults } from '../../types';
+import { MetaListProps } from '../MetaList';
 export declare type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;
-export interface MenuItemProps {
-    /** A unique id within the entire tree of menu items. This will be passed back to an item's onClick handler. */
-    id: string;
+export interface MenuItemProps extends MenuObjectProps {
     /** The primary piece of item information as a string. */
     primary: string;
     /** Secondary info about an item. Useful for additional metadata or context. Will be overridden when ancestors are passed as a prop. */
-    secondary?: string[];
+    secondary?: MetaListProps['items'];
     /** A visual to assist identifying an item. e.g. Avatar or Icon. */
     visual?: ReactNode;
     /** A count to assist with number of associated items. */
     count?: number;
     /** An array of MenuItemProps to identify an item's ancestors by their primary value. Useful for flattened tree search results. */
-    ancestors?: MenuItemProps[];
-    /** An array of MenuItemProps children. */
-    items?: MenuItemProps[];
+    ancestors?: (MenuItemProps | MenuGroupProps)[];
+    /** An array of either MenuItemProps or MenuGroupProps children. */
+    items?: (MenuItemProps | MenuGroupProps)[];
     /**
      * For single or multi select menus, selected must be set true|false to render an item's radiobutton or checkbox.
      * May be set on parent or leaf items.
@@ -32,21 +31,31 @@ export interface MenuItemProps {
      * This should be used only for VERY SPECIFIC UX scenarios.
      */
     tooltip?: string;
-    /** Use this function to identify and set item selections. Recommend leveraging top level Menu onClick handler. */
+    /** Use this function to identify and set item selections. Recommend leveraging top level Menu onItemClick handler. */
     onClick?: (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => void;
     onExpand?: MenuItemProps['onClick'];
     /** Determines if the MenuItem will be disabled. */
     disabled?: boolean;
 }
+export interface MenuGroupProps extends MenuObjectProps {
+    /** Label of the group. */
+    label: string;
+    /** An array of MenuItemProps children. */
+    items: MenuItemProps[];
+}
 export declare type ParentMenuItemProps = MenuItemProps & {
     items: NonNullable<MenuItemProps['items']>;
 };
 export interface MenuListHeaderProps {
     /** Text used to indicate an expanded parent item. */
-    text?: string;
+    text: string;
     /** Internal handler. */
     onClick: () => void;
 }
+export interface MenuObjectProps {
+    /** A unique id within the entire tree of menu items. */
+    id: string;
+}
 export interface MenuListProps {
     items: ParentMenuItemProps['items'];
     ref?: Ref<HTMLFieldSetElement>;
@@ -60,7 +69,7 @@ export interface MenuListProps {
 }
 export interface MenuProps extends BaseProps {
     /** An array of MenuItemProps. */
-    items: MenuItemProps[];
+    items: (MenuItemProps | MenuGroupProps)[];
     /**
      * Indicates intent for the menu.
      * As of now item types can not be mixed.
@@ -93,6 +102,11 @@ export interface MenuProps extends BaseProps {
      * Both an item's onClick and this will be called if both are passed.
      */
     onItemClick?: MenuItemProps['onClick'];
+    /**
+     * A top level handler for all item pseudo focus events.
+     * This is convenient way to detect which item is active to react by updating state or performing an action.
+     */
+    onItemActive?: (id: MenuItemProps['id']) => void;
     /**
      * A top level handler for clicks on parent items to expand their child items.
      * This is convenient way to detect when an item is expanded.
@@ -123,6 +137,8 @@ export interface MenuProps extends BaseProps {
     currentItemId?: string;
     /** Override for default active-descendant focus control element in menu */
     focusControlEl?: HTMLElement | undefined;
+    /** Override whether the menu automatically focuses the control element on close */
+    focusElOnClose?: boolean;
     /** Header region. */
     header?: ReactNode;
     /** Footer region. */
@@ -143,9 +159,11 @@ export interface MenuContextProps extends OmitStrict<MenuPropsWithDefaults, 'ref
     componentId: string;
     pushFlyoutId: (id: string) => void;
     flyOutActiveIdStack: string[];
+    focusControl: HTMLElement | null;
     updateActiveDescendants: (options?: {
         preventScroll?: boolean;
     }) => void;
+    setFocusDescendant: Dispatch<SetStateAction<HTMLElement | null>>;
     setFocusReturnEl: Dispatch<SetStateAction<HTMLElement | null | undefined>>;
     getScopedItemId: (itemId: string) => string;
 }

package/lib/components/Menu/Menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Menu/Menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, RefObject, SetStateAction, MouseEvent } from 'react';\n\nimport { BaseProps, OmitStrict, PropsWithDefaults } from '../../types';\n\nexport type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n\nexport interface MenuItemProps {\n  /** A unique id within the entire tree of menu items. This will be passed back to an item's onClick handler. */\n  id: string;\n  /** The primary piece of item information as a string. */\n  primary: string;\n  /** Secondary info about an item. Useful for additional metadata or context. Will be overridden when ancestors are passed as a prop. */\n  secondary?: string[];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: ReactNode;\n  /** A count to assist with number of associated items. */\n  count?: number;\n  /** An array of MenuItemProps to identify an item's ancestors by their primary value. Useful for flattened tree search results. */\n  ancestors?: MenuItemProps[];\n  /** An array of MenuItemProps children. */\n  items?: MenuItemProps[];\n  /**\n   * For single or multi select menus, selected must be set true|false to render an item's radiobutton or checkbox.\n   * May be set on parent or leaf items.\n   */\n  selected?: boolean;\n  /**\n   * FUTURE SUPPORT: Use to indicate an item has a partial selection, some but not all of its descendants are selected.\n   */\n  partial?: boolean;\n  /** Will render the action item as link. Only use for leaf items. */\n  href?: string;\n  /**\n   * Provide a description for an item that will render in a Tooltip when hovering that item.\n   * This should be used only for VERY SPECIFIC UX scenarios.\n   */\n  tooltip?: string;\n  /** Use this function to identify and set item selections. Recommend leveraging top level Menu onClick handler. */\n  onClick?: (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => void;\n  onExpand?: MenuItemProps['onClick'];\n  /** Determines if the MenuItem will be disabled. */\n  disabled?: boolean;\n}\n\nexport type ParentMenuItemProps = MenuItemProps & { items: NonNullable<MenuItemProps['items']> };\n\nexport interface MenuListHeaderProps {\n  /** Text used to indicate an expanded parent item. */\n  text?: string;\n  /** Internal handler. */\n  onClick: () => void;\n}\n\nexport interface MenuListProps {\n  items: ParentMenuItemProps['items'];\n  ref?: Ref<HTMLFieldSetElement>;\n  parent?: {\n    el: HTMLFieldSetElement;\n    item: ParentMenuItemProps;\n    siblingItems: ParentMenuItemProps['items'];\n    setExpandedItem: Dispatch<SetStateAction<ParentMenuItemProps | undefined>>;\n    returnFocusRef: RefObject<HTMLButtonElement>;\n  };\n}\n\nexport interface MenuProps extends BaseProps {\n  /** An array of MenuItemProps. */\n  items: MenuItemProps[];\n  /**\n   * Indicates intent for the menu.\n   * As of now item types can not be mixed.\n   * @default \"action\"\n   */\n  mode?: 'action' | 'multi-select' | 'single-select';\n  /**\n   * Always recommended to go for default drill-down variant for better accessibility.\n   * When flyout variant is selected, its recommended not to have more than 1 nested level\n   * @default \"drill-down\"\n   */\n  variant?: 'drill-down' | 'flyout';\n  /**\n   * Use to accent(make bold) portions of the primary text.\n   * Useful for filter/search results.\n   * If passed a function, that function will be passed each items primary text.\n   */\n  accent?: RegExp | ((primary: string) => RegExp);\n  /**\n   * Item height will grow or shrink based on item count.\n   * Use this indicate at which item the menu should begin its scroll.\n   * @default 7\n   */\n  scrollAt?: number;\n  /** A simple message to display when there are no items. */\n  emptyText?: string;\n  /**\n   * A top level handler for all item clicks.\n   * This is convenient way to detect which item was clicked to react by updating state or performing an action.\n   * Both an item's onClick and this will be called if both are passed.\n   */\n  onItemClick?: MenuItemProps['onClick'];\n  /**\n   * A top level handler for clicks on parent items to expand their child items.\n   * This is convenient way to detect when an item is expanded.\n   * For lazy loading this would be a good time to set an item's items.\n   * Both an item's onExpand and this will be called if both are passed.\n   */\n  onItemExpand?: MenuProps['onItemClick'];\n  /**\n   * A top level handler for capturing when nested items have been collapsed / \"back\" button clicks.\n   */\n  onItemCollapse?: (id: MenuItemProps['id']) => void;\n  /**\n   * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n   * @default false\n   */\n  loading?: boolean;\n  /** Callback to fetch more items */\n  loadMore?: (id?: MenuItemProps['id']) => void;\n  /** Ref placed on the root menu element. */\n  ref?: Ref<HTMLDivElement>;\n  /** HTML ID. */\n  id?: string;\n  /**\n   * Currently highlighted item.\n   * Setting currentItemId assumes synthetic focus is being controlled entirely by the containing component,\n   * and unbinds menu useActiveDescendant keydown controls.\n   * */\n  currentItemId?: string;\n  /** Override for default active-descendant focus control element in menu */\n  focusControlEl?: HTMLElement | undefined;\n  /** Header region. */\n  header?: ReactNode;\n  /** Footer region. */\n  footer?: ReactNode;\n  /**\n   * Flag to indicate that Right/Left arrow navigation for expand/collapse parent items is not available.\n   * Will accept enter if not selectable parent, otherwise falls back to shift + space.\n   */\n  arrowNavigationUnsupported?: boolean;\n  /**\n   * Additional information to announce to screen reader users. Read before menu navigation instructions.\n   */\n  'aria-describedby'?: string;\n}\n\ntype MenuPropsWithDefaults = PropsWithDefaults<\n  MenuProps,\n  'mode' | 'variant' | 'scrollAt' | 'loading'\n>;\nexport interface MenuContextProps extends OmitStrict<MenuPropsWithDefaults, 'ref' | 'items'> {\n  radioName?: string;\n  componentId: string;\n  pushFlyoutId: (id: string) => void;\n  flyOutActiveIdStack: string[];\n  updateActiveDescendants: (options?: { preventScroll?: boolean }) => void;\n  setFocusReturnEl: Dispatch<SetStateAction<HTMLElement | null | undefined>>;\n  getScopedItemId: (itemId: string) => string;\n}\n\nexport interface NavItemsListProps {\n  listRef: RefObject<HTMLUListElement>;\n  cycle?: boolean;\n}\n"]}
+{"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, RefObject, SetStateAction, MouseEvent } from 'react';\n\nimport { BaseProps, OmitStrict, PropsWithDefaults } from '../../types';\nimport { MetaListProps } from '../MetaList';\n\nexport type AcceptedMouseEventElement = HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n\nexport interface MenuItemProps extends MenuObjectProps {\n  /** The primary piece of item information as a string. */\n  primary: string;\n  /** Secondary info about an item. Useful for additional metadata or context. Will be overridden when ancestors are passed as a prop. */\n  secondary?: MetaListProps['items'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: ReactNode;\n  /** A count to assist with number of associated items. */\n  count?: number;\n  /** An array of MenuItemProps to identify an item's ancestors by their primary value. Useful for flattened tree search results. */\n  ancestors?: (MenuItemProps | MenuGroupProps)[];\n  /** An array of either MenuItemProps or MenuGroupProps children. */\n  items?: (MenuItemProps | MenuGroupProps)[];\n  /**\n   * For single or multi select menus, selected must be set true|false to render an item's radiobutton or checkbox.\n   * May be set on parent or leaf items.\n   */\n  selected?: boolean;\n  /**\n   * FUTURE SUPPORT: Use to indicate an item has a partial selection, some but not all of its descendants are selected.\n   */\n  partial?: boolean;\n  /** Will render the action item as link. Only use for leaf items. */\n  href?: string;\n  /**\n   * Provide a description for an item that will render in a Tooltip when hovering that item.\n   * This should be used only for VERY SPECIFIC UX scenarios.\n   */\n  tooltip?: string;\n  /** Use this function to identify and set item selections. Recommend leveraging top level Menu onItemClick handler. */\n  onClick?: (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => void;\n  onExpand?: MenuItemProps['onClick'];\n  /** Determines if the MenuItem will be disabled. */\n  disabled?: boolean;\n}\n\nexport interface MenuGroupProps extends MenuObjectProps {\n  /** Label of the group. */\n  label: string;\n  /** An array of MenuItemProps children. */\n  items: MenuItemProps[];\n}\n\nexport type ParentMenuItemProps = MenuItemProps & { items: NonNullable<MenuItemProps['items']> };\n\nexport interface MenuListHeaderProps {\n  /** Text used to indicate an expanded parent item. */\n  text: string;\n  /** Internal handler. */\n  onClick: () => void;\n}\n\nexport interface MenuObjectProps {\n  /** A unique id within the entire tree of menu items. */\n  id: string;\n}\n\nexport interface MenuListProps {\n  items: ParentMenuItemProps['items'];\n  ref?: Ref<HTMLFieldSetElement>;\n  parent?: {\n    el: HTMLFieldSetElement;\n    item: ParentMenuItemProps;\n    siblingItems: ParentMenuItemProps['items'];\n    setExpandedItem: Dispatch<SetStateAction<ParentMenuItemProps | undefined>>;\n    returnFocusRef: RefObject<HTMLButtonElement>;\n  };\n}\n\nexport interface MenuProps extends BaseProps {\n  /** An array of MenuItemProps. */\n  items: (MenuItemProps | MenuGroupProps)[];\n  /**\n   * Indicates intent for the menu.\n   * As of now item types can not be mixed.\n   * @default \"action\"\n   */\n  mode?: 'action' | 'multi-select' | 'single-select';\n  /**\n   * Always recommended to go for default drill-down variant for better accessibility.\n   * When flyout variant is selected, its recommended not to have more than 1 nested level\n   * @default \"drill-down\"\n   */\n  variant?: 'drill-down' | 'flyout';\n  /**\n   * Use to accent(make bold) portions of the primary text.\n   * Useful for filter/search results.\n   * If passed a function, that function will be passed each items primary text.\n   */\n  accent?: RegExp | ((primary: string) => RegExp);\n  /**\n   * Item height will grow or shrink based on item count.\n   * Use this indicate at which item the menu should begin its scroll.\n   * @default 7\n   */\n  scrollAt?: number;\n  /** A simple message to display when there are no items. */\n  emptyText?: string;\n  /**\n   * A top level handler for all item clicks.\n   * This is convenient way to detect which item was clicked to react by updating state or performing an action.\n   * Both an item's onClick and this will be called if both are passed.\n   */\n  onItemClick?: MenuItemProps['onClick'];\n  /**\n   * A top level handler for all item pseudo focus events.\n   * This is convenient way to detect which item is active to react by updating state or performing an action.\n   */\n  onItemActive?: (id: MenuItemProps['id']) => void;\n  /**\n   * A top level handler for clicks on parent items to expand their child items.\n   * This is convenient way to detect when an item is expanded.\n   * For lazy loading this would be a good time to set an item's items.\n   * Both an item's onExpand and this will be called if both are passed.\n   */\n  onItemExpand?: MenuProps['onItemClick'];\n  /**\n   * A top level handler for capturing when nested items have been collapsed / \"back\" button clicks.\n   */\n  onItemCollapse?: (id: MenuItemProps['id']) => void;\n  /**\n   * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n   * @default false\n   */\n  loading?: boolean;\n  /** Callback to fetch more items */\n  loadMore?: (id?: MenuItemProps['id']) => void;\n  /** Ref placed on the root menu element. */\n  ref?: Ref<HTMLDivElement>;\n  /** HTML ID. */\n  id?: string;\n  /**\n   * Currently highlighted item.\n   * Setting currentItemId assumes synthetic focus is being controlled entirely by the containing component,\n   * and unbinds menu useActiveDescendant keydown controls.\n   * */\n  currentItemId?: string;\n  /** Override for default active-descendant focus control element in menu */\n  focusControlEl?: HTMLElement | undefined;\n  /** Override whether the menu automatically focuses the control element on close */\n  focusElOnClose?: boolean;\n  /** Header region. */\n  header?: ReactNode;\n  /** Footer region. */\n  footer?: ReactNode;\n  /**\n   * Flag to indicate that Right/Left arrow navigation for expand/collapse parent items is not available.\n   * Will accept enter if not selectable parent, otherwise falls back to shift + space.\n   */\n  arrowNavigationUnsupported?: boolean;\n  /**\n   * Additional information to announce to screen reader users. Read before menu navigation instructions.\n   */\n  'aria-describedby'?: string;\n}\n\ntype MenuPropsWithDefaults = PropsWithDefaults<\n  MenuProps,\n  'mode' | 'variant' | 'scrollAt' | 'loading'\n>;\nexport interface MenuContextProps extends OmitStrict<MenuPropsWithDefaults, 'ref' | 'items'> {\n  radioName?: string;\n  componentId: string;\n  pushFlyoutId: (id: string) => void;\n  flyOutActiveIdStack: string[];\n  focusControl: HTMLElement | null;\n  updateActiveDescendants: (options?: { preventScroll?: boolean }) => void;\n  setFocusDescendant: Dispatch<SetStateAction<HTMLElement | null>>;\n  setFocusReturnEl: Dispatch<SetStateAction<HTMLElement | null | undefined>>;\n  getScopedItemId: (itemId: string) => string;\n}\n\nexport interface NavItemsListProps {\n  listRef: RefObject<HTMLUListElement>;\n  cycle?: boolean;\n}\n"]}

package/lib/components/Menu/MenuGroup.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import type { ForwardProps } from '../../types';
+import type { MenuGroupProps } from './Menu.types';
+declare const MenuGroup: FunctionComponent<MenuGroupProps & ForwardProps>;
+export default MenuGroup;
+//# sourceMappingURL=MenuGroup.d.ts.map

package/lib/components/Menu/MenuGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAyB/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Menu/MenuGroup.js

@@ -0,0 +1,17 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import Flex from '../Flex';
+import MenuContext from './Menu.context';
+import { StyledMenuGroupHeader, StyledMenuGroupList } from './Menu.styles';
+import MenuItem from './MenuItem';
+const MenuGroup = ({ id, label, items }) => {
+    const { componentId } = useContext(MenuContext);
+    const groupId = `${componentId}-${id}`;
+    return (_jsxs("li", { children: [_jsx(Flex, { container: { alignItems: 'center', pad: [0.5, 1] }, as: StyledMenuGroupHeader, id: groupId, children: label }, void 0), _jsx(StyledMenuGroupList, { role: 'group', "aria-labelledby": `#${groupId}`, children: items.length > 0 &&
+                    items.map(item => {
+                        return _createElement(MenuItem, { ...item, key: item.id });
+                    }) }, void 0)] }, void 0));
+};
+export default MenuGroup;
+//# sourceMappingURL=MenuGroup.js.map

package/lib/components/Menu/MenuGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroup.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuGroup.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,SAAS,GAAqD,CAAC,EACnE,EAAE,EACF,KAAK,EACL,KAAK,EACyB,EAAE,EAAE;IAClC,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,WAAW,IAAI,EAAE,EAAE,CAAC;IACvC,OAAO,CACL,yBACE,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAClD,EAAE,EAAE,qBAAqB,EACzB,EAAE,EAAE,OAAO,YAEV,KAAK,WACD,EACP,KAAC,mBAAmB,IAAC,IAAI,EAAC,OAAO,qBAAkB,IAAI,OAAO,EAAE,YAC7D,KAAK,CAAC,MAAM,GAAG,CAAC;oBACf,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBACf,OAAO,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CAAC;oBAC9C,CAAC,CAAC,WACgB,YACnB,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, useContext } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\n\nimport MenuContext from './Menu.context';\nimport { StyledMenuGroupHeader, StyledMenuGroupList } from './Menu.styles';\nimport type { MenuGroupProps } from './Menu.types';\nimport MenuItem from './MenuItem';\n\nconst MenuGroup: FunctionComponent<MenuGroupProps & ForwardProps> = ({\n  id,\n  label,\n  items\n}: MenuGroupProps & ForwardProps) => {\n  const { componentId } = useContext(MenuContext);\n\n  const groupId = `${componentId}-${id}`;\n  return (\n    <li>\n      <Flex\n        container={{ alignItems: 'center', pad: [0.5, 1] }}\n        as={StyledMenuGroupHeader}\n        id={groupId}\n      >\n        {label}\n      </Flex>\n      <StyledMenuGroupList role='group' aria-labelledby={`#${groupId}`}>\n        {items.length > 0 &&\n          items.map(item => {\n            return <MenuItem {...item} key={item.id} />;\n          })}\n      </StyledMenuGroupList>\n    </li>\n  );\n};\n\nexport default MenuGroup;\n"]}

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

@@ -1,9 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import { MenuItemProps } from './Menu.types';
-export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    isParentItem: boolean;
-}, never>;
 declare const MenuItem: FunctionComponent<MenuItemProps & ForwardProps>;
 export default MenuItem;
 //# sourceMappingURL=MenuItem.d.ts.map

package/lib/components/Menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAqExE,eAAO,MAAM,cAAc;kBAA6B,OAAO;SA0C9D,CAAC;AAoDF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkP7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAc3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAmDxE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAgQ7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Menu/MenuItem.js

@@ -1,170 +1,71 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useCallback, useContext, useEffect, useRef, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { hideVisually, mix, readableColor, rgba } from 'polished';
-import { defaultThemeProp } from '../../theme';
 import MetaList from '../MetaList';
 import SummaryItem from '../SummaryItem';
 import Flex from '../Flex';
-import Icon, { StyledIcon } from '../Icon';
-import Text, { StyledText } from '../Text';
+import Icon, { registerIcon } from '../Icon';
+import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
+import * as caretRightIcon from '../Icon/icons/caret-right.icon';
+import Text from '../Text';
 import { Count } from '../Badges';
-import BareButton, { StyledBareButton } from '../Button/BareButton';
+import BareButton from '../Button/BareButton';
 import { StyledPrimary } from '../SummaryItem/SummaryItem';
-import { replaceMatchWithElement, tryCatch } from '../../utils';
-import Button from '../Button';
-import { StyledGrid } from '../Grid';
-import { useElement, useI18n, usePrevious } from '../../hooks';
+import { replaceMatchWithElement } from '../../utils';
+import { useElement, useI18n, usePrevious, useDirection } from '../../hooks';
 import Tooltip from '../Tooltip';
+import menuHelpers from './helpers';
 import MenuContext from './Menu.context';
-const StyledItemLabel = styled.label(({ theme }) => {
-    const hoverCheckColor = tryCatch(() => rgba(theme.components['radio-check'][':checked']['background-color'], theme.base.transparency['transparent-5']));
-    const checkedBackground = theme.components['radio-check'][':checked']['background-color'];
-    const checkedForeground = tryCatch(() => readableColor(checkedBackground));
-    return css `
-    padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};
-    cursor: pointer;
-
-    &:hover {
-      & > input[type='radio']:not(:checked) + ${StyledIcon} {
-        color: ${hoverCheckColor};
-      }
-
-      & > input[type='checkbox'] + ${StyledIcon} {
-        border-color: ${theme.components['form-control'][':hover']['border-color']};
-      }
-    }
-
-    > ${StyledGrid} {
-      flex-grow: 1;
-    }
-
-    > input {
-      ${hideVisually}
-
-      & + ${StyledIcon} {
-        margin-inline-start: 0;
-        flex-shrink: 0;
-      }
-
-      &[type='radio'] + ${StyledIcon} {
-        color: transparent;
-      }
-
-      &[type='radio']:checked + ${StyledIcon} {
-        color: ${checkedBackground};
-      }
-
-      &[type='checkbox'] + ${StyledIcon} {
-        border: 0.0625rem solid ${theme.components['radio-check']['border-color']};
-        border-radius: min(
-          calc(${theme.base['border-radius']} * ${theme.components.checkbox['border-radius']}),
-          0.25rem
-        );
-        color: transparent;
-        background-color: ${theme.components['radio-check']['background-color']};
-      }
-
-      &[type='checkbox']:checked + ${StyledIcon} {
-        background-color: ${checkedBackground};
-        border-color: ${theme.components['radio-check'][':checked']['border-color']};
-        color: ${checkedForeground};
-      }
-    }
-  `;
-});
-StyledItemLabel.defaultProps = defaultThemeProp;
-export const StyledMenuItem = styled.li(({ theme: { base, components }, isParentItem }) => {
-    const hoverColor = tryCatch(() => mix(0.85, base.palette['primary-background'], base.palette.interactive));
-    return css `
-      min-height: ${base.sizes['touch-mouse']};
-
-      @media (pointer: coarse) {
-        min-height: ${base.sizes['touch-finger']};
-      }
-
-      &:focus-within,
-      &:hover:not([aria-disabled='true']),
-      &[aria-current='true'] {
-        background-color: ${hoverColor};
-      }
-
-      > button:first-child,
-      > a:first-child {
-        display: block;
-        width: 100%;
-        padding: calc(0.5 * ${base.spacing}) ${base.spacing};
-        text-align: start;
-        text-decoration: none;
-        color: inherit;
-        ${isParentItem &&
-        css `
-          padding-inline-start: calc(1.125rem + 2 * ${base.spacing});
-        `}
-      }
-
-      &[aria-disabled='true'] {
-        label,
-        ${StyledBareButton} {
-          background-color: ${components['form-control'][':disabled']['background-color']};
-          opacity: ${base['disabled-opacity']};
-        }
-      }
-    `;
-});
-StyledMenuItem.defaultProps = defaultThemeProp;
-const StyledAncestors = styled.div `
-  & > ${StyledText} {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-const StyledVisibilityHidden = styled.p `
-  ${hideVisually}
-`;
+import { StyledAncestors, StyledExpandButton, StyledItemLabel, StyledMenuItem, StyledVisibilityHidden } from './Menu.styles';
+registerIcon(caretLeftIcon, caretRightIcon);
 const AncestorPath = ({ ancestors = [] }) => {
     const truncatedPath = ancestors.length > 2;
     const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;
-    return (_jsx(Flex, Object.assign({ container: { gap: 0.5, alignItems: 'center' }, as: StyledAncestors, title: pathParts.map(a => a.primary).join(' > ') }, { children: pathParts.map((ancestor, i, arr) => {
-            return (_jsxs(Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: ancestor.primary }), void 0),
-                    i < arr.length - 1 && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: _jsx(Icon, { name: 'caret-right' }, void 0) }), void 0),
-                            truncatedPath && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: "..." }), void 0),
-                                    _jsx(Text, Object.assign({ variant: 'secondary' }, { children: _jsx(Icon, { name: 'caret-right' }, void 0) }), void 0)] }, void 0))] }, void 0))] }, ancestor.primary));
-        }) }), void 0));
+    const { end } = useDirection();
+    return (_jsx(Flex, { container: { gap: 0.5, alignItems: 'center' }, as: StyledAncestors, title: ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > '), children: pathParts.map((ancestor, i, arr) => {
+            const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;
+            return (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'secondary', children: label }, void 0), i < arr.length - 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', children: _jsx(Icon, { name: `caret-${end}` }, void 0) }, void 0), truncatedPath && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', children: "\u2026" }, void 0), _jsx(Text, { variant: 'secondary', children: _jsx(Icon, { name: `caret-${end}` }, void 0) }, void 0)] }, void 0))] }, void 0))] }, label));
+        }) }, void 0));
 };
 const MenuItem = ({ id, primary, secondary, ancestors, visual, count, items, selected, partial, href, tooltip, onClick, onExpand, disabled, ...restProps }) => {
     const t = useI18n();
-    const { mode, onItemClick, accent, radioName, variant: menuVariant, getScopedItemId, arrowNavigationUnsupported } = useContext(MenuContext);
+    const { mode, onItemClick, accent, radioName, variant: menuVariant, setFocusDescendant, getScopedItemId, arrowNavigationUnsupported } = useContext(MenuContext);
     const previouslySelected = usePrevious(selected);
     const selectionMode = mode === 'single-select' || mode === 'multi-select';
     const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);
     const selectableParent = isParentItem && typeof selected === 'boolean';
     const inputRef = useRef(null);
     const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);
+    const { end } = useDirection();
     const clickHandler = useCallback((e) => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(id, e);
-        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(id, e);
+        const mouseClick = e.detail !== 0;
+        if (mouseClick) {
+            const target = e.target;
+            const focusAtEl = target.getAttribute('role') === 'menuitem'
+                ? target
+                : target.closest('li[role="menuitem"]');
+            if (focusAtEl)
+                setFocusDescendant(focusAtEl);
+        }
+        onClick?.(id, e);
+        onItemClick?.(id, e);
     }, [onClick, onItemClick, id]);
     const expandHandler = useCallback((e) => {
-        onExpand === null || onExpand === void 0 ? void 0 : onExpand(id, e);
+        onExpand?.(id, e);
     }, [onExpand, id]);
     const navigationInteractionId = `${id}-description`;
     const secondaryId = `${id}-secondary`;
     let accentedPrimary;
     if (accent && !items) {
         const accentRegex = typeof accent === 'function' ? accent(primary) : accent;
-        const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (_jsx(StyledPrimary, Object.assign({ as: 'span', isString: true }, { children: str }), void 0)));
+        const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (_jsx(StyledPrimary, { as: 'span', isString: true, children: str }, void 0)));
         if (accentedArr.length > 1)
             accentedPrimary = accentedArr;
     }
-    const secondaryContent = ancestors ? (_jsx(AncestorPath, { ancestors: ancestors }, void 0)) : (secondary && _jsx(MetaList, { items: secondary, id: secondaryId }, void 0));
+    const secondaryContent = ancestors ? (_jsx(AncestorPath, { ancestors: ancestors }, void 0)) : (secondary && _jsx(MetaList, { items: secondary, id: secondaryId, wrapItems: false }, void 0));
     const [summaryItemRef, setSummaryItemRef] = useElement();
-    const summaryItem = (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { ref: setSummaryItemRef, primary: accentedPrimary || (!items ? _jsx(Text, { children: primary }, void 0) : primary), secondary: secondaryContent, visual: visual, actions: _jsxs(Flex, Object.assign({ container: { gap: 1 } }, { children: [_jsx(Count, { children: count !== null && count !== void 0 ? count : null }, void 0),
-                        items && !selectableParent && _jsx(Icon, { name: 'caret-right' }, void 0)] }), void 0), container: {
+    const summaryItem = (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { ref: setSummaryItemRef, primary: accentedPrimary || (!items ? _jsx(Text, { children: primary }, void 0) : primary), secondary: secondaryContent, visual: visual, actions: (items && !selectableParent) || count ? (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Count, { children: count ?? null }, void 0), items && !selectableParent && _jsx(Icon, { name: `caret-${end}` }, void 0)] }, void 0)) : undefined, container: {
                     colGap: 1
-                } }, void 0),
-            tooltip && (_jsx(Tooltip, Object.assign({ target: summaryItemRef, hideDelay: 'none', showDelay: 'none', portal: true }, { children: tooltip }), void 0))] }, void 0));
+                } }, void 0), tooltip && (_jsx(Tooltip, { target: summaryItemRef, hideDelay: 'none', showDelay: 'none', portal: true, children: tooltip }, void 0))] }, void 0));
     let InteractiveWrap;
     if (href) {
         InteractiveWrap = href ? 'a' : BareButton;
@@ -172,9 +73,9 @@ const MenuItem = ({ id, primary, secondary, ancestors, visual, count, items, sel
     else if (mode === 'action' || items) {
         InteractiveWrap = BareButton;
     }
-    const itemChild = InteractiveWrap ? (_jsx(InteractiveWrap, Object.assign({ onMouseDown: (e) => {
+    const itemChild = InteractiveWrap ? (_jsx(InteractiveWrap, { onMouseDown: (e) => {
             e.preventDefault();
-        }, onClick: items ? expandHandler : clickHandler, onMouseEnter: menuVariant === 'flyout' ? expandHandler : undefined, href: href, tabIndex: '-1', disabled: disabled }, { children: summaryItem }), void 0)) : (summaryItem);
+        }, onClick: items ? expandHandler : clickHandler, onMouseEnter: menuVariant === 'flyout' ? expandHandler : undefined, href: href, tabIndex: '-1', disabled: disabled, children: summaryItem }, void 0)) : (summaryItem);
     useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = !!partial;
@@ -182,8 +83,8 @@ const MenuItem = ({ id, primary, secondary, ancestors, visual, count, items, sel
     }, [partial]);
     const labelRef = useRef(null);
     const itemLabel = useMemo(() => {
-        const label = selected ? t('noun_checked', primary) : primary;
-        return isParentItem ? t('expand_noun', label) : label;
+        const label = selected ? t('checked_noun', [primary]) : primary;
+        return isParentItem ? t('expand_noun', [label]) : label;
     }, [selected, primary, isParentItem]);
     const describedBy = useMemo(() => {
         const hasItems = !!items;
@@ -199,43 +100,35 @@ const MenuItem = ({ id, primary, secondary, ancestors, visual, count, items, sel
     }, [items, secondary, navigationInteractionId, secondaryId]);
     const navigationInstructions = useMemo(() => {
         if (arrowNavigationUnsupported) {
-            if (selectableParent)
-                return t('menu_item_selectable_parent');
-            return t('menu_item_expand_enter');
+            return t('menu_item_shift_space_expand_collapse');
         }
         return t('menu_item_expand_arrow');
     }, []);
     const interactionNotification = useMemo(() => {
         if (previouslySelected === undefined)
             return '';
-        return `${selected ? t('noun_selected', primary) : t('noun_deselected', primary)}`;
+        return `${selected ? t('selected_noun', [primary]) : t('deselected_noun', [primary])}`;
     }, [selected]);
-    return (_jsx(_Fragment, { children: _jsxs(Flex, Object.assign({}, restProps, { container: { alignItems: 'stretch', justify: 'between' }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": describedBy, isParentItem: isParentItem, role: 'menuitem', "aria-disabled": disabled, "aria-expanded": items ? 'false' : undefined, "data-expand": !!items, tabIndex: '-1' }, { children: [selectionMode && typeof selected === 'boolean' ? (_jsxs(_Fragment, { children: [_jsxs(Flex, Object.assign({ ref: labelRef, as: StyledItemLabel, container: { alignItems: 'center', gap: 1 }, item: { grow: 1 }, onMouseDown: (e) => {
+    return (_jsxs(Flex, { ...restProps, container: { alignItems: 'stretch', justify: 'between' }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": describedBy, isParentItem: isParentItem, role: 'menuitem', "aria-disabled": disabled, "data-expand": !!items, tabIndex: '-1', children: [selectionMode && typeof selected === 'boolean' ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { ref: labelRef, as: StyledItemLabel, container: { alignItems: 'center', gap: 1 }, item: { grow: 1 }, onMouseDown: (e) => {
+                            e.preventDefault();
+                        }, 
+                        // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus
+                        onClick: (e) => {
+                            if (labelRef.current?.control !== e.target) {
                                 e.preventDefault();
-                            }, 
-                            // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus
-                            onClick: (e) => {
-                                var _a, _b, _c;
-                                if (((_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.control) !== e.target) {
+                                // Preserve detail property (lost with .click()).
+                                const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);
+                                labelRef.current?.control?.dispatchEvent(event);
+                            }
+                        }, children: [_jsx("input", { ref: inputRef, type: mode === 'single-select' ? 'radio' : 'checkbox', name: mode === 'single-select' ? radioName : undefined, "aria-label": primary, checked: !!selected, disabled: disabled, onClick: clickHandler, onKeyDown: (e) => {
+                                    if (mode === 'single-select' && e.key === 'Enter') {
+                                        e.currentTarget.click();
+                                    }
+                                }, 
+                                // no-op since React will complain about a controlled input without an onChange
+                                onChange: () => { }, onMouseDown: e => {
                                     e.preventDefault();
-                                    // Preserve detail property (lost with .click()).
-                                    const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);
-                                    (_c = (_b = labelRef.current) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.dispatchEvent(event);
-                                }
-                            } }, { children: [_jsx("input", { ref: inputRef, type: mode === 'single-select' ? 'radio' : 'checkbox', name: mode === 'single-select' ? radioName : undefined, "aria-label": primary, checked: !!selected, disabled: disabled, onClick: clickHandler, onKeyDown: (e) => {
-                                        if (mode === 'single-select' && e.key === 'Enter') {
-                                            e.currentTarget.click();
-                                        }
-                                    }, 
-                                    // no-op since React will complain about a controlled input without an onChange
-                                    onChange: () => { }, onMouseDown: e => {
-                                        e.preventDefault();
-                                    } }, void 0),
-                                (mode === 'single-select' || mode === 'multi-select') && _jsx(Icon, { name: 'check' }, void 0),
-                                summaryItem] }), void 0),
-                        isParentItem && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', onClick: expandHandler, tabIndex: '-1' }, { children: _jsx(Icon, { name: 'caret-right' }, void 0) }), void 0))] }, void 0)) : (itemChild),
-                _jsx(StyledVisibilityHidden, Object.assign({ id: navigationInteractionId }, { children: navigationInstructions }), void 0),
-                _jsx(StyledVisibilityHidden, Object.assign({ role: 'alert' }, { children: interactionNotification }), void 0)] }), void 0) }, void 0));
+                                }, tabIndex: -1 }, void 0), (mode === 'single-select' || mode === 'multi-select') && _jsx(Icon, { name: 'check' }, void 0), summaryItem] }, void 0), isParentItem && (_jsx(StyledExpandButton, { icon: true, variant: 'simple', onClick: expandHandler, tabIndex: '-1', children: _jsx(Icon, { name: `caret-${end}` }, void 0) }, void 0))] }, void 0)) : (itemChild), !!items && (_jsx(StyledVisibilityHidden, { id: navigationInteractionId, children: navigationInstructions }, void 0)), _jsx(StyledVisibilityHidden, { role: 'alert', children: interactionNotification }, void 0)] }, void 0));
 };
 export default MenuItem;
 //# sourceMappingURL=MenuItem.js.map