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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, mix, readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon } from '../Icon';\nimport Text, { StyledText } from '../Text';\nimport { Count } from '../Badges';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport { StyledPrimary } from '../SummaryItem/SummaryItem';\nimport { replaceMatchWithElement, tryCatch } from '../../utils';\nimport Button from '../Button';\nimport { StyledGrid } from '../Grid';\nimport { useElement, useI18n, usePrevious } from '../../hooks';\nimport Tooltip from '../Tooltip';\n\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\n\nconst 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.sizes['touch-mouse']};\n\n      @media (pointer: coarse) {\n        min-height: ${base.sizes['touch-finger']};\n      }\n\n      &:focus-within,\n      &:hover:not([aria-disabled='true']),\n      &[aria-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\nconst StyledAncestors = styled.div`\n  & > ${StyledText} {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nconst StyledVisibilityHidden = styled.p`\n  ${hideVisually}\n`;\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n  const truncatedPath = ancestors.length > 2;\n  const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n  return (\n    <Flex\n      container={{ gap: 0.5, alignItems: 'center' }}\n      as={StyledAncestors}\n      title={pathParts.map(a => a.primary).join(' > ')}\n    >\n      {pathParts.map((ancestor, i, arr) => {\n        return (\n          <Fragment key={ancestor.primary}>\n            <Text variant='secondary'>{ancestor.primary}</Text>\n            {i < arr.length - 1 && (\n              <>\n                <Text variant='secondary'>\n                  <Icon name='caret-right' />\n                </Text>\n                {truncatedPath && (\n                  <>\n                    <Text variant='secondary'>...</Text>\n                    <Text variant='secondary'>\n                      <Icon name='caret-right' />\n                    </Text>\n                  </>\n                )}\n              </>\n            )}\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n  id,\n  primary,\n  secondary,\n  ancestors,\n  visual,\n  count,\n  items,\n  selected,\n  partial,\n  href,\n  tooltip,\n  onClick,\n  onExpand,\n  disabled,\n  ...restProps\n}: MenuItemProps & ForwardProps) => {\n  const t = useI18n();\n  const {\n    mode,\n    onItemClick,\n    accent,\n    radioName,\n    variant: menuVariant,\n    getScopedItemId,\n    arrowNavigationUnsupported\n  } = useContext(MenuContext);\n  const previouslySelected = usePrevious(selected);\n  const selectionMode = mode === 'single-select' || mode === 'multi-select';\n  const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n  const selectableParent = isParentItem && typeof selected === 'boolean';\n  const inputRef = useRef<HTMLInputElement>(null);\n  const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n  const clickHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      onClick?.(id, e);\n      onItemClick?.(id, e);\n    },\n    [onClick, onItemClick, id]\n  );\n\n  const expandHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      onExpand?.(id, e);\n    },\n    [onExpand, id]\n  );\n\n  const navigationInteractionId = `${id}-description`;\n  const secondaryId = `${id}-secondary`;\n\n  let accentedPrimary;\n  if (accent && !items) {\n    const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n    const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (\n      <StyledPrimary as='span' isString>\n        {str}\n      </StyledPrimary>\n    ));\n\n    if (accentedArr.length > 1) accentedPrimary = accentedArr;\n  }\n\n  const secondaryContent = ancestors ? (\n    <AncestorPath ancestors={ancestors} />\n  ) : (\n    secondary && <MetaList items={secondary} id={secondaryId} />\n  );\n\n  const [summaryItemRef, setSummaryItemRef] = useElement();\n\n  const summaryItem = (\n    <>\n      <SummaryItem\n        ref={setSummaryItemRef}\n        primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n        secondary={secondaryContent}\n        visual={visual}\n        actions={\n          <Flex container={{ gap: 1 }}>\n            <Count>{count ?? null}</Count>\n\n            {items && !selectableParent && <Icon name='caret-right' />}\n          </Flex>\n        }\n        container={{\n          colGap: 1\n        }}\n      />\n      {tooltip && (\n        <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n          {tooltip}\n        </Tooltip>\n      )}\n    </>\n  );\n\n  let InteractiveWrap;\n  if (href) {\n    InteractiveWrap = href ? 'a' : BareButton;\n  } else if (mode === 'action' || items) {\n    InteractiveWrap = BareButton;\n  }\n\n  const itemChild = InteractiveWrap ? (\n    <InteractiveWrap\n      onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n        e.preventDefault();\n      }}\n      onClick={items ? expandHandler : clickHandler}\n      onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n      href={href}\n      tabIndex='-1'\n      disabled={disabled}\n    >\n      {summaryItem}\n    </InteractiveWrap>\n  ) : (\n    summaryItem\n  );\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!partial;\n    }\n  }, [partial]);\n\n  const labelRef = useRef<HTMLLabelElement>(null);\n\n  const itemLabel = useMemo(() => {\n    const label = selected ? t('noun_checked', primary) : primary;\n\n    return isParentItem ? t('expand_noun', label) : label;\n  }, [selected, primary, isParentItem]);\n\n  const describedBy = useMemo(() => {\n    const hasItems = !!items;\n    const hasSecondary = !!secondary;\n    let idString = hasSecondary ? secondaryId : undefined;\n\n    if (hasItems) {\n      if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n      else idString = navigationInteractionId;\n    }\n\n    return idString;\n  }, [items, secondary, navigationInteractionId, secondaryId]);\n\n  const navigationInstructions = useMemo(() => {\n    if (arrowNavigationUnsupported) {\n      if (selectableParent) return t('menu_item_selectable_parent');\n      return t('menu_item_expand_enter');\n    }\n\n    return t('menu_item_expand_arrow');\n  }, []);\n\n  const interactionNotification = useMemo(() => {\n    if (previouslySelected === undefined) return '';\n\n    return `${selected ? t('noun_selected', primary) : t('noun_deselected', primary)}`;\n  }, [selected]);\n\n  return (\n    <>\n      <Flex\n        {...restProps}\n        container={{ alignItems: 'stretch', justify: 'between' }}\n        id={itemId}\n        as={StyledMenuItem}\n        aria-label={itemLabel}\n        aria-describedby={describedBy}\n        isParentItem={isParentItem}\n        role='menuitem'\n        aria-disabled={disabled}\n        aria-expanded={items ? 'false' : undefined}\n        data-expand={!!items}\n        tabIndex='-1'\n      >\n        {selectionMode && typeof selected === 'boolean' ? (\n          <>\n            <Flex\n              ref={labelRef}\n              as={StyledItemLabel}\n              container={{ alignItems: 'center', gap: 1 }}\n              item={{ grow: 1 }}\n              onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n                e.preventDefault();\n              }}\n              // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n              onClick={(e: MouseEvent<HTMLLabelElement>) => {\n                if (labelRef.current?.control !== e.target) {\n                  e.preventDefault();\n\n                  // Preserve detail property (lost with .click()).\n                  const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n                  labelRef.current?.control?.dispatchEvent(event);\n                }\n              }}\n            >\n              <input\n                ref={inputRef}\n                type={mode === 'single-select' ? 'radio' : 'checkbox'}\n                name={mode === 'single-select' ? radioName : undefined}\n                aria-label={primary}\n                checked={!!selected}\n                disabled={disabled}\n                onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n                onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n                  if (mode === 'single-select' && e.key === 'Enter') {\n                    e.currentTarget.click();\n                  }\n                }}\n                // no-op since React will complain about a controlled input without an onChange\n                onChange={() => {}}\n                onMouseDown={e => {\n                  e.preventDefault();\n                }}\n              />\n              {(mode === 'single-select' || mode === 'multi-select') && <Icon name='check' />}\n              {summaryItem}\n            </Flex>\n\n            {isParentItem && (\n              <Button icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n                <Icon name='caret-right' />\n              </Button>\n            )}\n          </>\n        ) : (\n          itemChild\n        )}\n\n        <StyledVisibilityHidden id={navigationInteractionId}>\n          {navigationInstructions}\n        </StyledVisibilityHidden>\n\n        <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n      </Flex>\n    </>\n  );\n};\n\nexport default MenuItem;\n"]}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useMemo\n} from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { StyledPrimary } from '../SummaryItem/SummaryItem';\nimport { replaceMatchWithElement } from '../../utils';\nimport { useElement, useI18n, usePrevious, useDirection } from '../../hooks';\nimport Tooltip from '../Tooltip';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport {\n  StyledAncestors,\n  StyledExpandButton,\n  StyledItemLabel,\n  StyledMenuItem,\n  StyledVisibilityHidden\n} from './Menu.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n  const truncatedPath = ancestors.length > 2;\n  const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n  const { end } = useDirection();\n\n  return (\n    <Flex\n      container={{ gap: 0.5, alignItems: 'center' }}\n      as={StyledAncestors}\n      title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n    >\n      {pathParts.map((ancestor, i, arr) => {\n        const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n        return (\n          <Fragment key={label}>\n            <Text variant='secondary'>{label}</Text>\n            {i < arr.length - 1 && (\n              <>\n                <Text variant='secondary'>\n                  <Icon name={`caret-${end}`} />\n                </Text>\n                {truncatedPath && (\n                  <>\n                    <Text variant='secondary'>…</Text>\n                    <Text variant='secondary'>\n                      <Icon name={`caret-${end}`} />\n                    </Text>\n                  </>\n                )}\n              </>\n            )}\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n  id,\n  primary,\n  secondary,\n  ancestors,\n  visual,\n  count,\n  items,\n  selected,\n  partial,\n  href,\n  tooltip,\n  onClick,\n  onExpand,\n  disabled,\n  ...restProps\n}: MenuItemProps & ForwardProps) => {\n  const t = useI18n();\n  const {\n    mode,\n    onItemClick,\n    accent,\n    radioName,\n    variant: menuVariant,\n    setFocusDescendant,\n    getScopedItemId,\n    arrowNavigationUnsupported\n  } = useContext(MenuContext);\n  const previouslySelected = usePrevious(selected);\n  const selectionMode = mode === 'single-select' || mode === 'multi-select';\n  const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n  const selectableParent = isParentItem && typeof selected === 'boolean';\n  const inputRef = useRef<HTMLInputElement>(null);\n  const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n  const { end } = useDirection();\n\n  const clickHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      const mouseClick = e.detail !== 0;\n\n      if (mouseClick) {\n        const target = e.target as HTMLElement;\n        const focusAtEl =\n          target.getAttribute('role') === 'menuitem'\n            ? target\n            : target.closest('li[role=\"menuitem\"]');\n\n        if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n      }\n\n      onClick?.(id, e);\n      onItemClick?.(id, e);\n    },\n    [onClick, onItemClick, id]\n  );\n\n  const expandHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      onExpand?.(id, e);\n    },\n    [onExpand, id]\n  );\n\n  const navigationInteractionId = `${id}-description`;\n  const secondaryId = `${id}-secondary`;\n\n  let accentedPrimary;\n  if (accent && !items) {\n    const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n    const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (\n      <StyledPrimary as='span' isString>\n        {str}\n      </StyledPrimary>\n    ));\n\n    if (accentedArr.length > 1) accentedPrimary = accentedArr;\n  }\n\n  const secondaryContent = ancestors ? (\n    <AncestorPath ancestors={ancestors} />\n  ) : (\n    secondary && <MetaList items={secondary} id={secondaryId} wrapItems={false} />\n  );\n\n  const [summaryItemRef, setSummaryItemRef] = useElement();\n\n  const summaryItem = (\n    <>\n      <SummaryItem\n        ref={setSummaryItemRef}\n        primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n        secondary={secondaryContent}\n        visual={visual}\n        actions={\n          (items && !selectableParent) || count ? (\n            <Flex container={{ gap: 1 }}>\n              <Count>{count ?? null}</Count>\n              {items && !selectableParent && <Icon name={`caret-${end}`} />}\n            </Flex>\n          ) : undefined\n        }\n        container={{\n          colGap: 1\n        }}\n      />\n      {tooltip && (\n        <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n          {tooltip}\n        </Tooltip>\n      )}\n    </>\n  );\n\n  let InteractiveWrap;\n  if (href) {\n    InteractiveWrap = href ? 'a' : BareButton;\n  } else if (mode === 'action' || items) {\n    InteractiveWrap = BareButton;\n  }\n\n  const itemChild = InteractiveWrap ? (\n    <InteractiveWrap\n      onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n        e.preventDefault();\n      }}\n      onClick={items ? expandHandler : clickHandler}\n      onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n      href={href}\n      tabIndex='-1'\n      disabled={disabled}\n    >\n      {summaryItem}\n    </InteractiveWrap>\n  ) : (\n    summaryItem\n  );\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!partial;\n    }\n  }, [partial]);\n\n  const labelRef = useRef<HTMLLabelElement>(null);\n\n  const itemLabel = useMemo(() => {\n    const label = selected ? t('checked_noun', [primary]) : primary;\n\n    return isParentItem ? t('expand_noun', [label]) : label;\n  }, [selected, primary, isParentItem]);\n\n  const describedBy = useMemo(() => {\n    const hasItems = !!items;\n    const hasSecondary = !!secondary;\n    let idString = hasSecondary ? secondaryId : undefined;\n\n    if (hasItems) {\n      if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n      else idString = navigationInteractionId;\n    }\n\n    return idString;\n  }, [items, secondary, navigationInteractionId, secondaryId]);\n\n  const navigationInstructions = useMemo(() => {\n    if (arrowNavigationUnsupported) {\n      return t('menu_item_shift_space_expand_collapse');\n    }\n\n    return t('menu_item_expand_arrow');\n  }, []);\n\n  const interactionNotification = useMemo(() => {\n    if (previouslySelected === undefined) return '';\n\n    return `${selected ? t('selected_noun', [primary]) : t('deselected_noun', [primary])}`;\n  }, [selected]);\n\n  return (\n    <Flex\n      {...restProps}\n      container={{ alignItems: 'stretch', justify: 'between' }}\n      id={itemId}\n      as={StyledMenuItem}\n      aria-label={itemLabel}\n      aria-describedby={describedBy}\n      isParentItem={isParentItem}\n      role='menuitem'\n      aria-disabled={disabled}\n      data-expand={!!items}\n      tabIndex='-1'\n    >\n      {selectionMode && typeof selected === 'boolean' ? (\n        <>\n          <Flex\n            ref={labelRef}\n            as={StyledItemLabel}\n            container={{ alignItems: 'center', gap: 1 }}\n            item={{ grow: 1 }}\n            onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n              e.preventDefault();\n            }}\n            // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n            onClick={(e: MouseEvent<HTMLLabelElement>) => {\n              if (labelRef.current?.control !== e.target) {\n                e.preventDefault();\n\n                // Preserve detail property (lost with .click()).\n                const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n                labelRef.current?.control?.dispatchEvent(event);\n              }\n            }}\n          >\n            <input\n              ref={inputRef}\n              type={mode === 'single-select' ? 'radio' : 'checkbox'}\n              name={mode === 'single-select' ? radioName : undefined}\n              aria-label={primary}\n              checked={!!selected}\n              disabled={disabled}\n              onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n                if (mode === 'single-select' && e.key === 'Enter') {\n                  e.currentTarget.click();\n                }\n              }}\n              // no-op since React will complain about a controlled input without an onChange\n              onChange={() => {}}\n              onMouseDown={e => {\n                e.preventDefault();\n              }}\n              tabIndex={-1}\n            />\n            {(mode === 'single-select' || mode === 'multi-select') && <Icon name='check' />}\n            {summaryItem}\n          </Flex>\n\n          {isParentItem && (\n            <StyledExpandButton icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n              <Icon name={`caret-${end}`} />\n            </StyledExpandButton>\n          )}\n        </>\n      ) : (\n        itemChild\n      )}\n\n      {!!items && (\n        <StyledVisibilityHidden id={navigationInteractionId}>\n          {navigationInstructions}\n        </StyledVisibilityHidden>\n      )}\n\n      <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n    </Flex>\n  );\n};\n\nexport default MenuItem;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,aAAa,EAAuB,MAAM,cAAc,CAAC;AAgBlE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAoL7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAYlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,KAAK,EAEV,aAAa,EAGd,MAAM,cAAc,CAAC;AAsBtB,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkM7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Menu/MenuList.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState, useMemo } from 'react';
+import { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState, useMemo, Fragment, useCallback } from 'react';
 import Drawer from '../Drawer';
-import { useAfterInitialEffect, useConsolidatedRef, useItemIntersection } from '../../hooks';
+import { useAfterInitialEffect, useConsolidatedRef, useItemIntersection, useDirection } from '../../hooks';
 import Progress from '../Progress';
-import NoItems from '../NoItems';
+import EmptyState from '../EmptyState';
 import MenuContext from './Menu.context';
 import MenuListHeader from './MenuListHeader';
 import MenuItem from './MenuItem';
 import helpers from './helpers';
-import { StyledLoadingItem, StyledMenuList, StyledMenuListContainer } from './Menu.styles';
+import { StyledLoadingItem, StyledMenuList, StyledMenuListContainer, StyledSeparator } from './Menu.styles';
 import { resizeRootEl } from './NavItemsList';
+import MenuGroup from './MenuGroup';
 const setParentDisabled = (fieldset, bool) => {
     fieldset.disabled = bool;
     const legendButton = fieldset.querySelector('legend button');
@@ -25,10 +26,11 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
     const returnFocusRef = useRef(null);
     const [open, setOpen] = useState(!parent);
     const [expandedItem, setExpandedItem] = useState();
-    const { scrollAt, loadMore, loading, emptyText, currentItemId, onItemExpand, updateActiveDescendants, setFocusReturnEl, onItemCollapse } = useContext(MenuContext);
+    const { scrollAt, loadMore, loading, emptyText, currentItemId, onItemExpand, focusControl, updateActiveDescendants, setFocusReturnEl, onItemCollapse } = useContext(MenuContext);
+    const { end } = useDirection();
     useItemIntersection(ulRef, items.length - 1, () => {
-        var _a;
-        loadMore === null || loadMore === void 0 ? void 0 : loadMore((_a = parent === null || parent === void 0 ? void 0 : parent.item) === null || _a === void 0 ? void 0 : _a.id);
+        if (!loading)
+            loadMore?.(parent?.item?.id);
     });
     useLayoutEffect(() => {
         if (!selfRef.current || expandedItem)
@@ -48,37 +50,34 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
     useAfterInitialEffect(() => {
         if (currentItemId) {
             // if there is ancestor item of the controlled item, set it to expanded.
-            const ancestor = items.find(item => { var _a; return ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && helpers.getItem(item.items, currentItemId) !== undefined; });
+            const ancestor = items.find(item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined);
             if (ancestor) {
                 setExpandedItem(ancestor);
                 updateActiveDescendants({ preventScroll: true });
             }
         }
     }, [currentItemId, items, parent]);
+    const onExpandCallback = useCallback((id, e) => {
+        const item = helpers.getItem(items, id);
+        returnFocusRef.current = e.currentTarget;
+        setExpandedItem(item); // FIXME
+        item?.onExpand?.(id, e);
+        onItemExpand?.(id, e);
+        updateActiveDescendants({ preventScroll: true });
+    }, [items]);
     const listContent = useMemo(() => {
         if (items.length) {
-            return items.map(item => {
-                return (_createElement(MenuItem, { ...item, key: item.id, onExpand: item.items
-                        ? (id, e) => {
-                            var _a;
-                            returnFocusRef.current = e.currentTarget;
-                            setExpandedItem(item); // FIXME
-                            (_a = item === null || item === void 0 ? void 0 : item.onExpand) === null || _a === void 0 ? void 0 : _a.call(// FIXME
-                            item, id, e);
-                            onItemExpand === null || onItemExpand === void 0 ? void 0 : onItemExpand(id, e);
-                            updateActiveDescendants({ preventScroll: true });
-                        }
-                        : undefined }));
+            return items.map((item, index) => {
+                return helpers.isItem(item) ? (_createElement(MenuItem, { ...item, key: item.id, onExpand: item.items ? onExpandCallback : undefined })) : (_jsxs(Fragment, { children: [_jsx(MenuGroup, { ...item }, void 0), items[index + 1] && helpers.isItem(items[index + 1]) && (_jsx(StyledSeparator, { role: 'separator' }, void 0))] }, item.id));
             });
         }
         if (!loading) {
-            return _jsx(NoItems, { message: emptyText, forwardedAs: 'li' }, void 0);
+            return _jsx(EmptyState, { message: emptyText, forwardedAs: 'li' }, void 0);
         }
         return null;
     }, [items, loading, emptyText]);
-    const list = (_jsxs(StyledMenuList, Object.assign({ ref: ulRef, role: 'menu' }, { children: [listContent,
-            loading && !expandedItem && (_jsx(StyledLoadingItem, { children: _jsx(Progress, { placement: 'local' }, void 0) }, void 0))] }), void 0));
-    return (_jsxs(_Fragment, { children: [_jsxs(Drawer, Object.assign({ "aria-hidden": !!expandedItem, as: StyledMenuListContainer, ref: selfRef, open: open, style: { opacity: expandedItem ? 0 : 1 }, disabled: !!expandedItem, onBeforeOpen: () => {
+    const list = (_jsxs(StyledMenuList, { ref: ulRef, role: 'menu', children: [listContent, loading && !expandedItem && (_jsx(StyledLoadingItem, { children: _jsx(Progress, { placement: 'local' }, void 0) }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer, { "aria-hidden": !!expandedItem, as: StyledMenuListContainer, ref: selfRef, open: open, style: { opacity: expandedItem ? 0 : 1 }, disabled: !!expandedItem, placement: end, onBeforeOpen: () => {
                     if (parent) {
                         parent.el.style.opacity = '0';
                     }
@@ -100,19 +99,18 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
                     }
                 }, onAfterClose: () => {
                     if (parent) {
+                        focusControl?.focus();
                         const expandBtn = parent.returnFocusRef.current;
                         parent.setExpandedItem(undefined);
                         if (expandBtn) {
-                            setFocusReturnEl(expandBtn === null || expandBtn === void 0 ? void 0 : expandBtn.closest('li'));
+                            setFocusReturnEl(expandBtn?.closest('li'));
                         }
-                        onItemCollapse === null || onItemCollapse === void 0 ? void 0 : onItemCollapse(parent.item.id);
+                        onItemCollapse?.(parent.item.id);
                         updateActiveDescendants();
                     }
-                } }, { children: [parent && (_jsx(MenuListHeader, { text: parent.item.primary, onClick: () => {
+                }, children: [parent && (_jsx(MenuListHeader, { text: parent.item.primary, onClick: () => {
                             setOpen(false);
-                        } }, void 0)),
-                    list] }), void 0),
-            expandedItem && selfRef.current && (_jsx(MenuList, { items: expandedItem.items, parent: {
+                        } }, void 0)), list] }, void 0), expandedItem && selfRef.current && (_jsx(MenuList, { items: expandedItem.items, parent: {
                     el: selfRef.current,
                     item: expandedItem,
                     siblingItems: items,

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

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useMemo\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport { useAfterInitialEffect, useConsolidatedRef, useItemIntersection } from '../../hooks';\nimport Progress from '../Progress';\nimport NoItems from '../NoItems';\n\nimport { MenuListProps, ParentMenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport { StyledLoadingItem, StyledMenuList, StyledMenuListContainer } from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n  fieldset.disabled = bool;\n  const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n  if (legendButton) {\n    legendButton.disabled = bool;\n  }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n  ({ items, parent }: PropsWithoutRef<MenuListProps>, ref: MenuListProps['ref']) => {\n    const menuListWrapperRef: MutableRefObject<HTMLElement | null> = useRef(null);\n    const selfRef = useConsolidatedRef(ref);\n    const ulRef = useRef<HTMLUListElement>(null);\n    const returnFocusRef: MutableRefObject<HTMLButtonElement | null> = useRef(null);\n    const [open, setOpen] = useState(!parent);\n    const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n    const {\n      scrollAt,\n      loadMore,\n      loading,\n      emptyText,\n      currentItemId,\n      onItemExpand,\n      updateActiveDescendants,\n      setFocusReturnEl,\n      onItemCollapse\n    } = useContext(MenuContext);\n\n    useItemIntersection(ulRef, items.length - 1, () => {\n      loadMore?.(parent?.item?.id);\n    });\n\n    useLayoutEffect(() => {\n      if (!selfRef.current || expandedItem) return;\n      menuListWrapperRef.current = selfRef.current.parentElement;\n      resizeRootEl(\n        selfRef.current,\n        menuListWrapperRef.current as HTMLElement,\n        items.length,\n        scrollAt\n      );\n    });\n\n    useEffect(() => {\n      if (parent) setOpen(true);\n    }, []);\n\n    useAfterInitialEffect(() => {\n      if (expandedItem) {\n        setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n      }\n    }, [expandedItem, items]);\n\n    useAfterInitialEffect(() => {\n      if (currentItemId) {\n        // if there is ancestor item of the controlled item, set it to expanded.\n        const ancestor = items.find(\n          item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n        );\n\n        if (ancestor) {\n          setExpandedItem(ancestor as ParentMenuItemProps);\n          updateActiveDescendants({ preventScroll: true });\n        }\n      }\n    }, [currentItemId, items, parent]);\n\n    const listContent = useMemo(() => {\n      if (items.length) {\n        return items.map(item => {\n          return (\n            <MenuItem\n              {...item}\n              key={item.id}\n              onExpand={\n                item.items\n                  ? (id, e) => {\n                      returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n                      setExpandedItem(item as ParentMenuItemProps); // FIXME\n                      item?.onExpand?.(id, e);\n                      onItemExpand?.(id, e);\n                      updateActiveDescendants({ preventScroll: true });\n                    }\n                  : undefined\n              }\n            />\n          );\n        });\n      }\n\n      if (!loading) {\n        return <NoItems message={emptyText} forwardedAs='li' />;\n      }\n\n      return null;\n    }, [items, loading, emptyText]);\n\n    const list = (\n      <StyledMenuList ref={ulRef} role='menu'>\n        {listContent}\n        {loading && !expandedItem && (\n          <StyledLoadingItem>\n            <Progress placement='local' />\n          </StyledLoadingItem>\n        )}\n      </StyledMenuList>\n    );\n\n    return (\n      <>\n        <Drawer\n          aria-hidden={!!expandedItem}\n          as={StyledMenuListContainer}\n          ref={selfRef}\n          open={open}\n          style={{ opacity: expandedItem ? 0 : 1 }}\n          disabled={!!expandedItem}\n          onBeforeOpen={() => {\n            if (parent) {\n              parent.el.style.opacity = '0';\n            }\n\n            if (selfRef.current) {\n              selfRef.current.style.opacity = '1';\n            }\n          }}\n          onAfterOpen={() => {\n            if (parent) {\n              setParentDisabled(parent.el, true);\n            }\n          }}\n          onBeforeClose={() => {\n            if (parent && menuListWrapperRef.current) {\n              setParentDisabled(parent.el, false);\n              parent.el.style.opacity = '1';\n              resizeRootEl(\n                parent.el,\n                menuListWrapperRef.current,\n                parent.siblingItems.length,\n                scrollAt\n              );\n            }\n\n            if (selfRef.current) {\n              selfRef.current.style.opacity = '0';\n            }\n          }}\n          onAfterClose={() => {\n            if (parent) {\n              const expandBtn = parent.returnFocusRef.current;\n              parent.setExpandedItem(undefined);\n\n              if (expandBtn) {\n                setFocusReturnEl(expandBtn?.closest('li'));\n              }\n\n              onItemCollapse?.(parent.item.id);\n              updateActiveDescendants();\n            }\n          }}\n        >\n          {parent && (\n            <MenuListHeader\n              text={parent.item.primary}\n              onClick={() => {\n                setOpen(false);\n              }}\n            />\n          )}\n\n          {list}\n        </Drawer>\n\n        {expandedItem && selfRef.current && (\n          <MenuList\n            items={expandedItem.items}\n            parent={{\n              el: selfRef.current,\n              item: expandedItem,\n              siblingItems: items,\n              setExpandedItem,\n              returnFocusRef\n            }}\n          />\n        )}\n      </>\n    );\n  }\n);\n\nexport default MenuList;\n"]}
+{"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useMemo,\n  Fragment,\n  useCallback,\n  MouseEvent\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useItemIntersection,\n  useDirection\n} from '../../hooks';\nimport Progress from '../Progress';\nimport EmptyState from '../EmptyState';\n\nimport type {\n  AcceptedMouseEventElement,\n  MenuListProps,\n  ParentMenuItemProps,\n  MenuItemProps\n} from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport {\n  StyledLoadingItem,\n  StyledMenuList,\n  StyledMenuListContainer,\n  StyledSeparator\n} from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\nimport MenuGroup from './MenuGroup';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n  fieldset.disabled = bool;\n  const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n  if (legendButton) {\n    legendButton.disabled = bool;\n  }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n  ({ items, parent }: PropsWithoutRef<MenuListProps>, ref: MenuListProps['ref']) => {\n    const menuListWrapperRef: MutableRefObject<HTMLElement | null> = useRef(null);\n    const selfRef = useConsolidatedRef(ref);\n    const ulRef = useRef<HTMLUListElement>(null);\n    const returnFocusRef: MutableRefObject<HTMLButtonElement | null> = useRef(null);\n    const [open, setOpen] = useState(!parent);\n    const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n    const {\n      scrollAt,\n      loadMore,\n      loading,\n      emptyText,\n      currentItemId,\n      onItemExpand,\n      focusControl,\n      updateActiveDescendants,\n      setFocusReturnEl,\n      onItemCollapse\n    } = useContext(MenuContext);\n    const { end } = useDirection();\n\n    useItemIntersection(ulRef, items.length - 1, () => {\n      if (!loading) loadMore?.(parent?.item?.id);\n    });\n\n    useLayoutEffect(() => {\n      if (!selfRef.current || expandedItem) return;\n      menuListWrapperRef.current = selfRef.current.parentElement;\n      resizeRootEl(\n        selfRef.current,\n        menuListWrapperRef.current as HTMLElement,\n        items.length,\n        scrollAt\n      );\n    });\n\n    useEffect(() => {\n      if (parent) setOpen(true);\n    }, []);\n\n    useAfterInitialEffect(() => {\n      if (expandedItem) {\n        setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n      }\n    }, [expandedItem, items]);\n\n    useAfterInitialEffect(() => {\n      if (currentItemId) {\n        // if there is ancestor item of the controlled item, set it to expanded.\n        const ancestor = items.find(\n          item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n        );\n\n        if (ancestor) {\n          setExpandedItem(ancestor as ParentMenuItemProps);\n          updateActiveDescendants({ preventScroll: true });\n        }\n      }\n    }, [currentItemId, items, parent]);\n\n    const onExpandCallback = useCallback(\n      (id: MenuItemProps['id'], e: MouseEvent<AcceptedMouseEventElement>) => {\n        const item = helpers.getItem(items, id);\n        returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n        setExpandedItem(item as ParentMenuItemProps); // FIXME\n        item?.onExpand?.(id, e);\n        onItemExpand?.(id, e);\n        updateActiveDescendants({ preventScroll: true });\n      },\n      [items]\n    );\n\n    const listContent = useMemo(() => {\n      if (items.length) {\n        return items.map((item, index) => {\n          return helpers.isItem(item) ? (\n            <MenuItem\n              {...item}\n              key={item.id}\n              onExpand={item.items ? onExpandCallback : undefined}\n            />\n          ) : (\n            <Fragment key={item.id}>\n              <MenuGroup {...item} />\n              {items[index + 1] && helpers.isItem(items[index + 1]) && (\n                <StyledSeparator role='separator' />\n              )}\n            </Fragment>\n          );\n        });\n      }\n\n      if (!loading) {\n        return <EmptyState message={emptyText} forwardedAs='li' />;\n      }\n\n      return null;\n    }, [items, loading, emptyText]);\n\n    const list = (\n      <StyledMenuList ref={ulRef} role='menu'>\n        {listContent}\n        {loading && !expandedItem && (\n          <StyledLoadingItem>\n            <Progress placement='local' />\n          </StyledLoadingItem>\n        )}\n      </StyledMenuList>\n    );\n\n    return (\n      <>\n        <Drawer\n          aria-hidden={!!expandedItem}\n          as={StyledMenuListContainer}\n          ref={selfRef}\n          open={open}\n          style={{ opacity: expandedItem ? 0 : 1 }}\n          disabled={!!expandedItem}\n          placement={end}\n          onBeforeOpen={() => {\n            if (parent) {\n              parent.el.style.opacity = '0';\n            }\n\n            if (selfRef.current) {\n              selfRef.current.style.opacity = '1';\n            }\n          }}\n          onAfterOpen={() => {\n            if (parent) {\n              setParentDisabled(parent.el, true);\n            }\n          }}\n          onBeforeClose={() => {\n            if (parent && menuListWrapperRef.current) {\n              setParentDisabled(parent.el, false);\n              parent.el.style.opacity = '1';\n              resizeRootEl(\n                parent.el,\n                menuListWrapperRef.current,\n                parent.siblingItems.length,\n                scrollAt\n              );\n            }\n\n            if (selfRef.current) {\n              selfRef.current.style.opacity = '0';\n            }\n          }}\n          onAfterClose={() => {\n            if (parent) {\n              focusControl?.focus();\n\n              const expandBtn = parent.returnFocusRef.current;\n              parent.setExpandedItem(undefined);\n\n              if (expandBtn) {\n                setFocusReturnEl(expandBtn?.closest('li'));\n              }\n\n              onItemCollapse?.(parent.item.id);\n              updateActiveDescendants();\n            }\n          }}\n        >\n          {parent && (\n            <MenuListHeader\n              text={parent.item.primary}\n              onClick={() => {\n                setOpen(false);\n              }}\n            />\n          )}\n\n          {list}\n        </Drawer>\n\n        {expandedItem && selfRef.current && (\n          <MenuList\n            items={expandedItem.items}\n            parent={{\n              el: selfRef.current,\n              item: expandedItem,\n              siblingItems: items,\n              setExpandedItem,\n              returnFocusRef\n            }}\n          />\n        )}\n      </>\n    );\n  }\n);\n\nexport default MenuList;\n"]}

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

@@ -1,7 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import { MenuListHeaderProps } from './Menu.types';
-export declare const StyledMenuListHeader: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
 declare const MenuListHeader: FunctionComponent<MenuListHeaderProps & ForwardProps>;
 export default MenuListHeader;
 //# sourceMappingURL=MenuListHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA0C,MAAM,OAAO,CAAC;AAMlF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,eAAO,MAAM,oBAAoB,4GAgD/B,CAAC;AAIH,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MenuListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA0C,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}