@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  useMemo\n} from 'react';\n\nimport { useConsolidatedRef, useUID, useActiveDescendant, useI18n, usePrevious } from '../../hooks';\nimport { ForwardProps } from '../../types';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledAriaDescription, StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { MenuContextProps, MenuProps } from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MenuProps>, ref: MenuProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      items = [],\n      mode = 'action',\n      accent,\n      scrollAt = 7,\n      emptyText,\n      onItemClick,\n      onItemExpand,\n      loadMore,\n      onItemCollapse,\n      loading = false,\n      currentItemId,\n      header,\n      footer,\n      variant = 'drill-down',\n      focusControlEl,\n      arrowNavigationUnsupported,\n      'aria-describedby': ariaDescribedBy,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const radioName = useUID();\n    const menuRef = useConsolidatedRef(ref);\n    const previousItemCount = useRef(0);\n    const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n    const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState([id]);\n    const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n    const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n    const activeFlyoutSelector = useMemo(\n      () =>\n        `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n      [flyOutActiveIdStack]\n    );\n    const focusControl = useMemo(() => {\n      return focusControlEl || menuRef.current;\n    }, [focusControlEl, menuRef.current]);\n\n    const pushFlyoutId = useCallback(\n      (flyoutId: string) => {\n        setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n      },\n      [flyOutActiveIdStack]\n    );\n\n    const getScopedItemId = useCallback(\n      (itemId: string) => {\n        return `${id}-item-${itemId}`;\n      },\n      [id]\n    );\n\n    const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n      ({ preventScroll = false } = {}) => {\n        setPreventInitialScroll(preventScroll);\n        setActiveDescendantUpdateId(Math.random());\n      },\n      []\n    );\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: focusControl,\n        scope: menuRef.current,\n        scopeSelector:\n          variant === 'drill-down'\n            ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n            : activeFlyoutSelector,\n        selector: '[role=\"menuitem\"], legend button' as keyof HTMLElementTagNameMap,\n        focusReturnEl,\n        clearFocusReturn: () => {\n          setFocusReturnEl(null);\n        },\n        currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n        preventInitialScroll,\n        clearPreventScroll: () => {\n          setPreventInitialScroll(false);\n        }\n      }),\n      [\n        focusControl,\n        menuRef.current,\n        activeFlyoutSelector,\n        focusReturnEl,\n        currentItemId,\n        preventInitialScroll\n      ]\n    );\n\n    const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n      activeDescendantUpdateId\n    ]);\n\n    const previousActiveDescendant = usePrevious(activeDescendant);\n\n    // ## Bind Menu-specific navigation keyDown.\n    useEffect(() => {\n      const expandOrCollapse = () => {\n        if (activeDescendant) {\n          if (activeDescendant.dataset.expand === 'true') {\n            (activeDescendant!.querySelector('button') as HTMLElement)?.click();\n\n            return;\n          }\n\n          if (activeDescendant.dataset.collapse === 'true') {\n            activeDescendant.click();\n          }\n        }\n      };\n\n      const additionalKeydown = (e: KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowRight': {\n            if (arrowNavigationUnsupported) break;\n            expandOrCollapse();\n            break;\n          }\n          case 'ArrowLeft': {\n            if (arrowNavigationUnsupported) break;\n            expandOrCollapse();\n            break;\n          }\n          case 'Escape': {\n            if (variant === 'flyout' && flyOutActiveIdStack.length > 1) {\n              e.preventDefault();\n              e.stopPropagation();\n\n              const newStack = [...flyOutActiveIdStack];\n              newStack.pop();\n              setFlyoutActiveIdStack(newStack);\n            }\n            break;\n          }\n          default:\n            break;\n        }\n\n        if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n          e.preventDefault();\n          expandOrCollapse();\n        }\n      };\n\n      focusControl?.addEventListener('keydown', additionalKeydown);\n\n      return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n    }, [focusControl, activeDescendant]);\n\n    // ## Update useActiveDescendant on change of items, not selection of items.\n    useEffect(() => {\n      // Next tick for DOM updates.\n      setTimeout(() => {\n        if (items.length === previousItemCount.current) {\n          const previousDescendantIds = descendants?.map(node => node.id);\n          const newDescendants = uadConfig.scope\n            ?.querySelector(uadConfig.scopeSelector)\n            ?.querySelectorAll(uadConfig.selector);\n\n          if (!newDescendants) {\n            updateActiveDescendants();\n            return;\n          }\n\n          const scopedDescendants = Array.from(newDescendants);\n\n          if (scopedDescendants?.length !== previousDescendantIds?.length) {\n            updateActiveDescendants();\n            return;\n          }\n\n          const itemsUnchanged = scopedDescendants.every(\n            (node, index) => node.id === previousDescendantIds[index]\n          );\n\n          if (!itemsUnchanged) {\n            updateActiveDescendants();\n          }\n\n          return;\n        }\n\n        previousItemCount.current = items.length;\n        updateActiveDescendants();\n      }, 0);\n    }, [items]);\n\n    // ## Bump scroll & set return element when descendant focused in loading state.\n    useEffect(() => {\n      const activeDescendantChanged = previousActiveDescendant?.id !== activeDescendant?.id;\n      if (!activeDescendantChanged) return;\n\n      if (loading && descendants && descendants.length && activeDescendant) {\n        const descendantList = [...descendants];\n        const lastItem = descendantList.pop();\n        const lastId = lastItem?.id || undefined;\n\n        if (lastId === activeDescendant.id) {\n          const scrollRegion = uadConfig.scope\n            ?.querySelector(uadConfig.scopeSelector)\n            ?.querySelector('ul');\n\n          if (scrollRegion) {\n            scrollRegion.scrollTop = scrollRegion.scrollHeight - scrollRegion.offsetHeight;\n          }\n\n          if (focusReturnEl?.id !== activeDescendant.id) {\n            // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.\n            setTimeout(() => {\n              setFocusReturnEl(lastItem);\n            }, 0);\n          }\n        } else if (focusReturnEl?.id !== activeDescendant.id) {\n          // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.\n          setTimeout(() => {\n            setFocusReturnEl(activeDescendant);\n          }, 0);\n        }\n      }\n    }, [\n      loading,\n      descendants,\n      previousActiveDescendant,\n      activeDescendant,\n      uadConfig,\n      focusReturnEl\n    ]);\n\n    return (\n      <StyledMenu\n        id={id}\n        role='menu'\n        aria-describedby={!focusControlEl ? `${id}-menuDescription` : undefined}\n        {...restProps}\n        ref={menuRef}\n      >\n        {!focusControlEl && (\n          <StyledAriaDescription id={`${id}-menuDescription`}>\n            {t('menu_selection_instructions')} {ariaDescribedBy && ` ${ariaDescribedBy}`}\n          </StyledAriaDescription>\n        )}\n\n        {header && <header>{header}</header>}\n\n        <StyledMenuListWrapper>\n          <MenuContext.Provider\n            value={{\n              componentId: id,\n              mode,\n              arrowNavigationUnsupported,\n              onItemClick,\n              onItemExpand,\n              onItemCollapse,\n              accent,\n              scrollAt,\n              emptyText,\n              radioName,\n              loadMore,\n              loading,\n              variant,\n              updateActiveDescendants,\n              setFocusReturnEl,\n              getScopedItemId,\n              pushFlyoutId,\n              flyOutActiveIdStack\n            }}\n          >\n            {variant === 'drill-down' ? (\n              <MenuList items={items} />\n            ) : (\n              <FlyoutMenuList items={items} />\n            )}\n          </MenuContext.Provider>\n        </StyledMenuListWrapper>\n        {footer && <footer>{footer}</footer>}\n      </StyledMenu>\n    );\n  }\n);\n\nexport default Menu;\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  useMemo\n} from 'react';\n\nimport {\n  useConsolidatedRef,\n  useUID,\n  useActiveDescendant,\n  useI18n,\n  usePrevious,\n  useDirection\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledAriaDescription, StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { MenuContextProps, MenuProps } from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MenuProps>, ref: MenuProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      items = [],\n      mode = 'action',\n      accent,\n      scrollAt = 7,\n      emptyText,\n      onItemClick,\n      onItemActive,\n      onItemExpand,\n      loadMore,\n      onItemCollapse,\n      loading = false,\n      currentItemId,\n      header,\n      footer,\n      variant = 'drill-down',\n      focusControlEl,\n      focusElOnClose = true,\n      arrowNavigationUnsupported,\n      'aria-describedby': ariaDescribedBy,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const { end: endDirection, start: startDirection } = useDirection();\n    const radioName = useUID();\n    const menuRef = useConsolidatedRef(ref);\n    const previousItemCount = useRef(0);\n    const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState([id]);\n    const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n    const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n    const activeFlyoutSelector = useMemo(\n      () =>\n        `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n      [flyOutActiveIdStack]\n    );\n    const focusControl = useMemo(() => {\n      return focusControlEl || menuRef.current;\n    }, [focusControlEl, menuRef.current]);\n\n    const pushFlyoutId = useCallback(\n      (flyoutId: string) => {\n        setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n      },\n      [flyOutActiveIdStack]\n    );\n\n    const getScopedItemId = useCallback(\n      (itemId: string) => {\n        return `${id}-item-${itemId}`;\n      },\n      [id]\n    );\n\n    const getUnscopedItemId = useCallback(\n      (itemId: string) => {\n        return itemId.split(`${id}-item-`)[1];\n      },\n      [id]\n    );\n\n    const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n      ({ preventScroll = false } = {}) => {\n        setPreventInitialScroll(preventScroll);\n        setActiveDescendantUpdateId(Math.random());\n      },\n      []\n    );\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: focusControl,\n        scope: menuRef.current,\n        scopeSelector:\n          variant === 'drill-down'\n            ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n            : activeFlyoutSelector,\n        selector: '[role=\"menuitem\"], legend button' as keyof HTMLElementTagNameMap,\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n          if (focusElOnClose) focusControl?.focus();\n        },\n        focusReturnEl,\n        clearFocusReturn: () => {\n          setFocusReturnEl(null);\n        },\n        currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n        preventInitialScroll,\n        clearPreventScroll: () => {\n          setPreventInitialScroll(false);\n        }\n      }),\n      [\n        focusControl,\n        menuRef.current,\n        activeFlyoutSelector,\n        focusReturnEl,\n        focusDescendant,\n        currentItemId,\n        preventInitialScroll\n      ]\n    );\n\n    const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n      activeDescendantUpdateId\n    ]);\n\n    const previousActiveDescendant = usePrevious(activeDescendant);\n\n    // ## Bind Menu-specific navigation keyDown.\n    useEffect(() => {\n      const expandOrCollapse: (action?: 'collapse' | 'expand' | null) => void = (action = null) => {\n        if (activeDescendant) {\n          // expand\n          if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {\n            (activeDescendant!.querySelector('button') as HTMLElement)?.click();\n\n            return;\n          }\n\n          // collapse\n          if (activeDescendant.dataset.collapse === 'true' && action !== 'expand') {\n            activeDescendant.click();\n          }\n        }\n      };\n\n      const additionalKeydown = (e: KeyboardEvent) => {\n        switch (e.key) {\n          case `Arrow${cap(endDirection)}`: {\n            if (arrowNavigationUnsupported) break;\n            expandOrCollapse('expand');\n            break;\n          }\n          case `Arrow${cap(startDirection)}`: {\n            if (arrowNavigationUnsupported) break;\n            expandOrCollapse('collapse');\n            break;\n          }\n          case 'Escape': {\n            if (variant === 'flyout' && flyOutActiveIdStack.length > 1) {\n              e.preventDefault();\n              e.stopPropagation();\n\n              const newStack = [...flyOutActiveIdStack];\n              newStack.pop();\n              setFlyoutActiveIdStack(newStack);\n            }\n            break;\n          }\n          default:\n            break;\n        }\n\n        if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n          e.preventDefault();\n          expandOrCollapse();\n        }\n      };\n\n      if (activeDescendant) onItemActive?.(getUnscopedItemId(activeDescendant.id));\n\n      focusControl?.addEventListener('keydown', additionalKeydown);\n\n      return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n    }, [focusControl, activeDescendant]);\n\n    // ## Update useActiveDescendant on change of items, not selection of items.\n    useEffect(() => {\n      // Next tick for DOM updates.\n      setTimeout(() => {\n        if (items.length === previousItemCount.current) {\n          const previousDescendantIds = descendants?.map(node => node.id);\n          const newDescendants = uadConfig.scope\n            ?.querySelector(uadConfig.scopeSelector)\n            ?.querySelectorAll(uadConfig.selector);\n\n          if (!newDescendants) {\n            updateActiveDescendants();\n            return;\n          }\n\n          const scopedDescendants = Array.from(newDescendants);\n\n          if (scopedDescendants?.length !== previousDescendantIds?.length) {\n            updateActiveDescendants();\n            return;\n          }\n\n          const itemsUnchanged = scopedDescendants.every(\n            (node, index) => node.id === previousDescendantIds[index]\n          );\n\n          if (!itemsUnchanged) {\n            updateActiveDescendants();\n          }\n\n          return;\n        }\n\n        previousItemCount.current = items.length;\n        updateActiveDescendants();\n      }, 0);\n    }, [items]);\n\n    // ## Bump scroll & set return element when descendant focused in loading state.\n    useEffect(() => {\n      const activeDescendantChanged = previousActiveDescendant?.id !== activeDescendant?.id;\n      if (!activeDescendantChanged) return;\n\n      if (loading && descendants && descendants.length && activeDescendant) {\n        const descendantList = [...descendants];\n        const lastItem = descendantList.pop();\n        const lastId = lastItem?.id || undefined;\n\n        if (lastId === activeDescendant.id) {\n          const scrollRegion = uadConfig.scope\n            ?.querySelector(uadConfig.scopeSelector)\n            ?.querySelector('ul');\n\n          if (scrollRegion) {\n            scrollRegion.scrollTop = scrollRegion.scrollHeight - scrollRegion.offsetHeight;\n          }\n\n          if (focusReturnEl?.id !== activeDescendant.id) {\n            // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.\n            setTimeout(() => {\n              setFocusReturnEl(lastItem);\n            }, 0);\n          }\n        } else if (focusReturnEl?.id !== activeDescendant.id) {\n          // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.\n          setTimeout(() => {\n            setFocusReturnEl(activeDescendant);\n          }, 0);\n        }\n      }\n    }, [\n      loading,\n      descendants,\n      previousActiveDescendant,\n      activeDescendant,\n      uadConfig,\n      focusReturnEl\n    ]);\n\n    const contextValue = useMemo(() => {\n      return {\n        componentId: id,\n        mode,\n        arrowNavigationUnsupported,\n        onItemClick,\n        onItemActive,\n        onItemExpand,\n        onItemCollapse,\n        accent,\n        scrollAt,\n        emptyText,\n        radioName,\n        loadMore,\n        loading,\n        variant,\n        focusControl,\n        updateActiveDescendants,\n        setFocusReturnEl,\n        setFocusDescendant,\n        getScopedItemId,\n        pushFlyoutId,\n        flyOutActiveIdStack\n      };\n    }, [\n      id,\n      mode,\n      arrowNavigationUnsupported,\n      onItemClick,\n      onItemActive,\n      onItemExpand,\n      onItemCollapse,\n      accent,\n      scrollAt,\n      emptyText,\n      radioName,\n      loadMore,\n      loading,\n      variant,\n      focusControl,\n      updateActiveDescendants,\n      setFocusReturnEl,\n      setFocusDescendant,\n      getScopedItemId,\n      pushFlyoutId,\n      flyOutActiveIdStack\n    ]);\n\n    return (\n      <StyledMenu\n        id={id}\n        role='menu'\n        aria-describedby={!focusControlEl ? `${id}-menuDescription` : undefined}\n        {...restProps}\n        ref={menuRef}\n      >\n        {!focusControlEl && (\n          <StyledAriaDescription id={`${id}-menuDescription`}>\n            {t('menu_selection_instructions')} {ariaDescribedBy && ` ${ariaDescribedBy}`}\n          </StyledAriaDescription>\n        )}\n\n        {header && <header>{header}</header>}\n\n        <StyledMenuListWrapper>\n          <MenuContext.Provider value={contextValue}>\n            {variant === 'drill-down' ? (\n              <MenuList items={items} />\n            ) : (\n              <FlyoutMenuList items={items} />\n            )}\n          </MenuContext.Provider>\n        </StyledMenuListWrapper>\n        {footer && <footer>{footer}</footer>}\n      </StyledMenu>\n    );\n  }\n);\n\nexport default Menu;\n"]}

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

@@ -1,3 +1,14 @@
+export declare const StyledExpandButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledItemLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    isParentItem: boolean;
+}, never>;
+export declare const StyledAncestors: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledVisibilityHidden: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMenuGroupList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMenuGroupHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMenuListHeader: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMenuList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMenuListContainer: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFlyoutMenuListContainer: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,wGAY1B,CAAC;AAIF,eAAO,MAAM,uBAAuB,8GAMlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,8GAEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAqBjC,CAAC;AAIF,eAAO,MAAM,qBAAqB,uGAEjC,CAAC;AAEF,eAAO,MAAM,UAAU,yGAiCrB,CAAC"}
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,kBAAkB,qMAE9B,CAAC;AAEF,eAAO,MAAM,eAAe,2GA8D1B,CAAC;AAIH,eAAO,MAAM,cAAc;kBAA6B,OAAO;SA0C9D,CAAC;AAIF,eAAO,MAAM,eAAe,yGAW3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,uGAElC,CAAC;AAEF,eAAO,MAAM,eAAe,wGAM1B,CAAC;AAIH,eAAO,MAAM,mBAAmB,wGAM9B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAUhC,CAAC;AAIH,eAAO,MAAM,oBAAoB,4GAgD/B,CAAC;AAIH,eAAO,MAAM,cAAc,wGAgB1B,CAAC;AAIF,eAAO,MAAM,uBAAuB,8GAMlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,8GAEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAqBjC,CAAC;AAIF,eAAO,MAAM,qBAAqB,uGAEjC,CAAC;AAEF,eAAO,MAAM,UAAU,yGAiCrB,CAAC"}

package/lib/components/Menu/Menu.styles.js

@@ -1,7 +1,202 @@
-import { hideVisually } from 'polished';
+import { hideVisually, mix, readableColor, rgba } from 'polished';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import { StyledNoItems } from '../NoItems';
+import { StyledEmptyState } from '../EmptyState';
+import { StyledIcon } from '../Icon';
+import { StyledGrid } from '../Grid';
+import { StyledBareButton } from '../Button/BareButton';
+import { tryCatch } from '../../utils';
+import { StyledText } from '../Text';
+import Button from '../Button';
+export const StyledExpandButton = styled(Button) `
+  align-self: center;
+`;
+export 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['hit-area']['mouse-min']};
+
+      @media (pointer: coarse) {
+        min-height: ${base['hit-area']['finger-min']};
+      }
+
+      &:focus-within,
+      &:hover:not([aria-disabled='true']),
+      &[data-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;
+export const StyledAncestors = styled.div `
+  ${StyledIcon} {
+    width: 1em;
+    height: 1em;
+  }
+
+  & > ${StyledText} {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+export const StyledVisibilityHidden = styled.p `
+  ${hideVisually}
+`;
+export const StyledSeparator = styled.li(({ theme }) => {
+    return css `
+    height: 0.0625rem;
+    background-color: ${theme.base.palette['border-line']};
+    margin: ${theme.base.spacing} 0;
+  `;
+});
+StyledSeparator.defaultProps = defaultThemeProp;
+export const StyledMenuGroupList = styled.ul(({ theme }) => {
+    return css `
+    ${StyledMenuItem} button {
+      padding-inline-start: calc(1.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledMenuGroupList.defaultProps = defaultThemeProp;
+export const StyledMenuGroupHeader = styled.div(({ theme }) => {
+    return css `
+    min-height: ${theme.base['hit-area']['mouse-min']};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+    background-color: ${theme.base.palette['secondary-background']};
+
+    @media (pointer: coarse) {
+      min-height: ${theme.base['hit-area']['finger-min']};
+    }
+  `;
+});
+StyledMenuGroupHeader.defaultProps = defaultThemeProp;
+export const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {
+    const hoverColor = tryCatch(() => mix(0.85, base.palette['primary-background'], base.palette.interactive));
+    return css `
+    width: 100%;
+    background-color: ${base.palette['primary-background']};
+
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+
+    &:focus-within {
+      box-shadow: inset ${base.shadow.focus};
+      background-color: ${hoverColor};
+    }
+
+    &:hover {
+      background-color: ${hoverColor};
+    }
+
+    & > ${StyledBareButton}, & > button {
+      color: ${base.palette['foreground-color']};
+      width: 100%;
+      padding: calc(0.5 * ${base.spacing}) ${base.spacing};
+      text-align: start;
+      border-radius: inherit;
+
+      > ${StyledGrid} {
+        grid-column-gap: ${base.spacing};
+      }
+
+      ${StyledIcon} {
+        /* Fixes vertical align issue increasing box size beyond square */
+        display: block;
+      }
+    }
+
+    > button[data-current='true'] {
+      background-color: ${hoverColor};
+    }
+  `;
+});
+StyledMenuListHeader.defaultProps = defaultThemeProp;
 export const StyledMenuList = styled.ul(({ theme }) => css `
     overflow-x: hidden;
     overflow-y: auto;
@@ -9,9 +204,13 @@ export const StyledMenuList = styled.ul(({ theme }) => css `
     height: 100%;
     border-radius: inherit;
 
-    ${StyledNoItems} {
+    ${StyledEmptyState} {
       padding: ${theme.base.spacing};
     }
+
+    li:not(:first-child) > ${StyledMenuGroupHeader} {
+      margin-block-start: ${theme.base.spacing};
+    }
   `);
 StyledMenuList.defaultProps = defaultThemeProp;
 export const StyledMenuListContainer = styled.fieldset(({ theme }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;MAOd,aAAa;iBACF,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEhC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAA;;CAE3E,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAIzC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;yBAGK,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;;;;;;;;;;;GAgBpF,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,CAAC,CAAA;IACzC,YAAY;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,MAAM,WAAW,GAAG,mBAAmB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC;IAC3E,OAAO,GAAG,CAAA;;;;;;MAMN,qBAAqB;UACjB,qBAAqB;;;;;;;;;;;;;iBAad,KAAK,CAAC,IAAI,CAAC,OAAO;;;;uBAIZ,WAAW;;;;oBAId,WAAW;;GAE5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import { hideVisually } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledNoItems } from '../NoItems';\n\nexport const StyledMenuList = styled.ul(\n  ({ theme }) => css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style: none;\n    height: 100%;\n    border-radius: inherit;\n\n    ${StyledNoItems} {\n      padding: ${theme.base.spacing};\n    }\n  `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border: 0;\n    border-radius: inherit;\n  `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n  min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n  display: block;\n  position: relative;\n  height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n  ({ theme }) => css`\n    position: relative;\n    overflow: hidden;\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    max-height: 50vh;\n\n    & > fieldset:first-child {\n      position: relative;\n    }\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n  `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n  const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n  return css`\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    ${StyledAriaDescription}:first-child {\n      + ${StyledMenuListWrapper}, + header {\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    > header,\n    > footer {\n      padding: ${theme.base.spacing};\n    }\n\n    > header {\n      border-bottom: ${borderStyle};\n    }\n\n    > footer {\n      border-top: ${borderStyle};\n    }\n  `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { StyledBareButton } from '../Button/BareButton';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport Button from '../Button';\n\nexport const StyledExpandButton = styled(Button)`\n  align-self: center;\n`;\n\nexport const StyledItemLabel = styled.label(({ theme }) => {\n  const hoverCheckColor = tryCatch(() =>\n    rgba(\n      theme.components['radio-check'][':checked']['background-color'],\n      theme.base.transparency['transparent-5']\n    )\n  );\n\n  const checkedBackground = theme.components['radio-check'][':checked']['background-color'];\n  const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n  return css`\n    padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n    cursor: pointer;\n\n    &:hover {\n      & > input[type='radio']:not(:checked) + ${StyledIcon} {\n        color: ${hoverCheckColor};\n      }\n\n      & > input[type='checkbox'] + ${StyledIcon} {\n        border-color: ${theme.components['form-control'][':hover']['border-color']};\n      }\n    }\n\n    > ${StyledGrid} {\n      flex-grow: 1;\n    }\n\n    > input {\n      ${hideVisually}\n\n      & + ${StyledIcon} {\n        margin-inline-start: 0;\n        flex-shrink: 0;\n      }\n\n      &[type='radio'] + ${StyledIcon} {\n        color: transparent;\n      }\n\n      &[type='radio']:checked + ${StyledIcon} {\n        color: ${checkedBackground};\n      }\n\n      &[type='checkbox'] + ${StyledIcon} {\n        border: 0.0625rem solid ${theme.components['radio-check']['border-color']};\n        border-radius: min(\n          calc(${theme.base['border-radius']} * ${theme.components.checkbox['border-radius']}),\n          0.25rem\n        );\n        color: transparent;\n        background-color: ${theme.components['radio-check']['background-color']};\n      }\n\n      &[type='checkbox']:checked + ${StyledIcon} {\n        background-color: ${checkedBackground};\n        border-color: ${theme.components['radio-check'][':checked']['border-color']};\n        color: ${checkedForeground};\n      }\n    }\n  `;\n});\n\nStyledItemLabel.defaultProps = defaultThemeProp;\n\nexport const StyledMenuItem = styled.li<{ isParentItem: boolean }>(\n  ({ theme: { base, components }, isParentItem }) => {\n    const hoverColor = tryCatch(() =>\n      mix(0.85, base.palette['primary-background'], base.palette.interactive)\n    );\n\n    return css`\n      min-height: ${base['hit-area']['mouse-min']};\n\n      @media (pointer: coarse) {\n        min-height: ${base['hit-area']['finger-min']};\n      }\n\n      &:focus-within,\n      &:hover:not([aria-disabled='true']),\n      &[data-current='true'] {\n        background-color: ${hoverColor};\n      }\n\n      > button:first-child,\n      > a:first-child {\n        display: block;\n        width: 100%;\n        padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n        text-align: start;\n        text-decoration: none;\n        color: inherit;\n        ${isParentItem &&\n        css`\n          padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n        `}\n      }\n\n      &[aria-disabled='true'] {\n        label,\n        ${StyledBareButton} {\n          background-color: ${components['form-control'][':disabled']['background-color']};\n          opacity: ${base['disabled-opacity']};\n        }\n      }\n    `;\n  }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n  ${StyledIcon} {\n    width: 1em;\n    height: 1em;\n  }\n\n  & > ${StyledText} {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n  ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n  return css`\n    height: 0.0625rem;\n    background-color: ${theme.base.palette['border-line']};\n    margin: ${theme.base.spacing} 0;\n  `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupList = styled.ul(({ theme }) => {\n  return css`\n    ${StyledMenuItem} button {\n      padding-inline-start: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledMenuGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n  return css`\n    min-height: ${theme.base['hit-area']['mouse-min']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    background-color: ${theme.base.palette['secondary-background']};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, base.palette['primary-background'], base.palette.interactive)\n  );\n\n  return css`\n    width: 100%;\n    background-color: ${base.palette['primary-background']};\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    &:focus-within {\n      box-shadow: inset ${base.shadow.focus};\n      background-color: ${hoverColor};\n    }\n\n    &:hover {\n      background-color: ${hoverColor};\n    }\n\n    & > ${StyledBareButton}, & > button {\n      color: ${base.palette['foreground-color']};\n      width: 100%;\n      padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n      text-align: start;\n      border-radius: inherit;\n\n      > ${StyledGrid} {\n        grid-column-gap: ${base.spacing};\n      }\n\n      ${StyledIcon} {\n        /* Fixes vertical align issue increasing box size beyond square */\n        display: block;\n      }\n    }\n\n    > button[data-current='true'] {\n      background-color: ${hoverColor};\n    }\n  `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n  ({ theme }) => css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style: none;\n    height: 100%;\n    border-radius: inherit;\n\n    ${StyledEmptyState} {\n      padding: ${theme.base.spacing};\n    }\n\n    li:not(:first-child) > ${StyledMenuGroupHeader} {\n      margin-block-start: ${theme.base.spacing};\n    }\n  `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border: 0;\n    border-radius: inherit;\n  `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n  min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n  display: block;\n  position: relative;\n  height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n  ({ theme }) => css`\n    position: relative;\n    overflow: hidden;\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    max-height: 50vh;\n\n    & > fieldset:first-child {\n      position: relative;\n    }\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n  `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n  const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n  return css`\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    ${StyledAriaDescription}:first-child {\n      + ${StyledMenuListWrapper}, + header {\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    > header,\n    > footer {\n      padding: ${theme.base.spacing};\n    }\n\n    > header {\n      border-bottom: ${borderStyle};\n    }\n\n    > footer {\n      border-top: ${borderStyle};\n    }\n  `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n"]}

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 { BaseProps, NoChildrenProp, 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>;
@@ -58,9 +67,9 @@ export interface MenuListProps {
         returnFocusRef: RefObject<HTMLButtonElement>;
     };
 }
-export interface MenuProps extends BaseProps {
+export interface MenuProps extends BaseProps, NoChildrenProp {
     /** 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":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,oBAAY,yBAAyB,GAAG,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAEjG,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD,yDAAyD;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,uIAAuI;IACvI,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kIAAkI;IAClI,SAAS,CAAC,EAAE,CAAC,aAAa,GAAG,cAAc,CAAC,EAAE,CAAC;IAC/C,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,cAAc,CAAC,EAAE,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sHAAsH;IACtH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;IACtF,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACpC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,oBAAY,mBAAmB,GAAG,aAAa,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAA;CAAE,CAAC;AAEjG,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE;QACP,EAAE,EAAE,mBAAmB,CAAC;QACxB,IAAI,EAAE,mBAAmB,CAAC;QAC1B,YAAY,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAC3C,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;QAC3E,cAAc,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;KAC9C,CAAC;CACH;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,iCAAiC;IACjC,KAAK,EAAE,CAAC,aAAa,GAAG,cAAc,CAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC;IACnD;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAChD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACjD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACxC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,eAAe;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;SAIK;IACL,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC,mFAAmF;IACnF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,aAAK,qBAAqB,GAAG,iBAAiB,CAC5C,SAAS,EACT,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAC5C,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,UAAU,CAAC,qBAAqB,EAAE,KAAK,GAAG,OAAO,CAAC;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,uBAAuB,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACzE,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACjE,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;IAC3E,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

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, NoChildrenProp, 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, NoChildrenProp {\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"}