@pega/cosmos-react-core 2.0.0-dev.2.0 → 2.0.0-dev.21.1

package/lib/components/Menu/Menu.js

@@ -1,77 +1,24 @@
-import React, { forwardRef, useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { hideVisually } from 'polished';
-import { useConsolidatedRef, useUID, useActiveDescendant, useI18n } from '../../hooks';
-import { defaultThemeProp } from '../../theme';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import { useConsolidatedRef, useUID, useActiveDescendant, useI18n, usePrevious, useDirection } from '../../hooks';
+import { cap } from '../../utils';
 import FlyoutMenuList from './FlyoutMenuList';
 import MenuContext from './Menu.context';
+import { StyledAriaDescription, StyledMenu, StyledMenuListWrapper } from './Menu.styles';
 import MenuList from './MenuList';
-export const StyledMenuListWrapper = styled.div(({ theme }) => css `
-    position: relative;
-    overflow: hidden;
-    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
-
-    & > fieldset:first-child {
-      position: relative;
-    }
-
-    &:first-child {
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
-    }
-
-    &:last-child {
-      border-bottom-left-radius: inherit;
-      border-bottom-right-radius: inherit;
-    }
-  `);
-StyledMenuListWrapper.defaultProps = defaultThemeProp;
-const StyledAriaDescription = styled.p `
-  ${hideVisually}
-`;
-export const StyledMenu = styled.div(({ theme }) => {
-    const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;
-    return css `
-    &:first-child {
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
-    }
-
-    ${StyledAriaDescription}:first-child {
-      + ${StyledMenuListWrapper}, + header {
-        border-top-left-radius: inherit;
-        border-top-right-radius: inherit;
-      }
-    }
-
-    &:last-child {
-      border-bottom-left-radius: inherit;
-      border-bottom-right-radius: inherit;
-    }
-
-    > header,
-    > footer {
-      padding: ${theme.base.spacing};
-    }
-
-    > header {
-      border-bottom: ${borderStyle};
-    }
-
-    > footer {
-      border-top: ${borderStyle};
-    }
-  `;
-});
-StyledMenu.defaultProps = defaultThemeProp;
-const Menu = forwardRef(({ id = useUID(), items = [], mode = 'action', accent, scrollAt = 7, emptyText, onItemClick, onItemExpand, loadMore, onItemCollapse, loading = false, currentItemId, header, footer, variant = 'drill-down', focusControlEl, arrowNavigationUnsupported, 'aria-describedby': ariaDescribedBy, ...restProps }, ref) => {
+const Menu = forwardRef((props, ref) => {
+    const uid = useUID();
+    const { id = uid, items = [], mode = 'action', accent, scrollAt = 7, emptyText, onItemClick, onItemActive, onItemExpand, loadMore, onItemCollapse, loading = false, currentItemId, header, footer, variant = 'drill-down', focusControlEl, focusElOnClose = true, arrowNavigationUnsupported, 'aria-describedby': ariaDescribedBy, ...restProps } = props;
     const t = useI18n();
+    const { end: endDirection, start: startDirection } = useDirection();
     const radioName = useUID();
     const menuRef = useConsolidatedRef(ref);
     const previousItemCount = useRef(0);
     const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);
+    const [focusDescendant, setFocusDescendant] = useState(null);
     const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState([id]);
     const [focusReturnEl, setFocusReturnEl] = useState();
+    const [preventInitialScroll, setPreventInitialScroll] = useState(false);
     const activeFlyoutSelector = useMemo(() => `fieldset[data-flyout-menu-id="${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}"]`, [flyOutActiveIdStack]);
     const focusControl = useMemo(() => {
         return focusControlEl || menuRef.current;
@@ -82,7 +29,13 @@ const Menu = forwardRef(({ id = useUID(), items = [], mode = 'action', accent, s
     const getScopedItemId = useCallback((itemId) => {
         return `${id}-item-${itemId}`;
     }, [id]);
-    const updateActiveDescendants = useCallback(() => setActiveDescendantUpdateId(Math.random()), []);
+    const getUnscopedItemId = useCallback((itemId) => {
+        return itemId.split(`${id}-item-`)[1];
+    }, [id]);
+    const updateActiveDescendants = useCallback(({ preventScroll = false } = {}) => {
+        setPreventInitialScroll(preventScroll);
+        setActiveDescendantUpdateId(Math.random());
+    }, []);
     const uadConfig = useMemo(() => ({
         focusEl: focusControl,
         scope: menuRef.current,
@@ -90,41 +43,61 @@ const Menu = forwardRef(({ id = useUID(), items = [], mode = 'action', accent, s
             ? 'fieldset[aria-hidden="false"]'
             : activeFlyoutSelector,
         selector: '[role="menuitem"], legend button',
+        focusDescendantEl: focusDescendant,
+        clearFocusDescendant: () => {
+            setFocusDescendant(null);
+            if (focusElOnClose)
+                focusControl?.focus();
+        },
         focusReturnEl,
         clearFocusReturn: () => {
             setFocusReturnEl(null);
         },
-        currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined
-    }), [focusControl, menuRef.current, activeFlyoutSelector, focusReturnEl, currentItemId]);
+        currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,
+        preventInitialScroll,
+        clearPreventScroll: () => {
+            setPreventInitialScroll(false);
+        }
+    }), [
+        focusControl,
+        menuRef.current,
+        activeFlyoutSelector,
+        focusReturnEl,
+        focusDescendant,
+        currentItemId,
+        preventInitialScroll
+    ]);
     const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [
         activeDescendantUpdateId
     ]);
+    const previousActiveDescendant = usePrevious(activeDescendant);
     // ## Bind Menu-specific navigation keyDown.
     useEffect(() => {
-        const expandOrCollapse = () => {
-            var _a;
+        const expandOrCollapse = (action = null) => {
             if (activeDescendant) {
-                if (activeDescendant.dataset.expand === 'true') {
-                    (_a = activeDescendant.querySelector('button')) === null || _a === void 0 ? void 0 : _a.click();
+                // expand
+                if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {
+                    activeDescendant.querySelector('button')?.click();
                     return;
                 }
-                if (activeDescendant.dataset.collapse === 'true') {
+                // collapse
+                if (activeDescendant.dataset.collapse === 'true' && action !== 'expand') {
                     activeDescendant.click();
                 }
             }
         };
         const additionalKeydown = (e) => {
             switch (e.key) {
-                case 'ArrowRight': {
+                case `Arrow${cap(endDirection)}`: {
                     if (arrowNavigationUnsupported)
                         break;
-                    expandOrCollapse();
+                    expandOrCollapse('expand');
                     break;
                 }
-                case 'ArrowLeft': {
+                case `Arrow${cap(startDirection)}`: {
                     if (arrowNavigationUnsupported)
                         break;
-                    expandOrCollapse();
+                    expandOrCollapse('collapse');
                     break;
                 }
                 case 'Escape': {
@@ -145,88 +118,125 @@ const Menu = forwardRef(({ id = useUID(), items = [], mode = 'action', accent, s
                 expandOrCollapse();
             }
         };
-        focusControl === null || focusControl === void 0 ? void 0 : focusControl.addEventListener('keydown', additionalKeydown);
-        return () => focusControl === null || focusControl === void 0 ? void 0 : focusControl.removeEventListener('keydown', additionalKeydown);
+        if (activeDescendant)
+            onItemActive?.(getUnscopedItemId(activeDescendant.id));
+        focusControl?.addEventListener('keydown', additionalKeydown);
+        return () => focusControl?.removeEventListener('keydown', additionalKeydown);
     }, [focusControl, activeDescendant]);
     // ## Update useActiveDescendant on change of items, not selection of items.
     useEffect(() => {
-        var _a, _b;
-        if (items.length === previousItemCount.current) {
-            const previousDescendantIds = descendants === null || descendants === void 0 ? void 0 : descendants.map(node => node.id);
-            const newDescendants = (_b = (_a = uadConfig.scope) === null || _a === void 0 ? void 0 : _a.querySelector(uadConfig.scopeSelector)) === null || _b === void 0 ? void 0 : _b.querySelectorAll(uadConfig.selector);
-            if (!newDescendants) {
-                updateActiveDescendants();
-                return;
-            }
-            const scopedDescendants = Array.from(newDescendants);
-            if ((scopedDescendants === null || scopedDescendants === void 0 ? void 0 : scopedDescendants.length) !== (previousDescendantIds === null || previousDescendantIds === void 0 ? void 0 : previousDescendantIds.length)) {
-                updateActiveDescendants();
+        // Next tick for DOM updates.
+        setTimeout(() => {
+            if (items.length === previousItemCount.current) {
+                const previousDescendantIds = descendants?.map(node => node.id);
+                const newDescendants = uadConfig.scope
+                    ?.querySelector(uadConfig.scopeSelector)
+                    ?.querySelectorAll(uadConfig.selector);
+                if (!newDescendants) {
+                    updateActiveDescendants();
+                    return;
+                }
+                const scopedDescendants = Array.from(newDescendants);
+                if (scopedDescendants?.length !== previousDescendantIds?.length) {
+                    updateActiveDescendants();
+                    return;
+                }
+                const itemsUnchanged = scopedDescendants.every((node, index) => node.id === previousDescendantIds[index]);
+                if (!itemsUnchanged) {
+                    updateActiveDescendants();
+                }
                 return;
             }
-            const itemsUnchanged = scopedDescendants.every((node, index) => node.id === previousDescendantIds[index]);
-            if (!itemsUnchanged) {
-                updateActiveDescendants();
-            }
-            return;
-        }
-        previousItemCount.current = items.length;
-        updateActiveDescendants();
+            previousItemCount.current = items.length;
+            updateActiveDescendants();
+        }, 0);
     }, [items]);
     // ## Bump scroll & set return element when descendant focused in loading state.
     useEffect(() => {
-        var _a, _b;
+        const activeDescendantChanged = previousActiveDescendant?.id !== activeDescendant?.id;
+        if (!activeDescendantChanged)
+            return;
         if (loading && descendants && descendants.length && activeDescendant) {
             const descendantList = [...descendants];
             const lastItem = descendantList.pop();
-            const lastId = (lastItem === null || lastItem === void 0 ? void 0 : lastItem.id) || undefined;
+            const lastId = lastItem?.id || undefined;
             if (lastId === activeDescendant.id) {
-                const scrollRegion = (_b = (_a = uadConfig.scope) === null || _a === void 0 ? void 0 : _a.querySelector(uadConfig.scopeSelector)) === null || _b === void 0 ? void 0 : _b.querySelector('ul');
+                const scrollRegion = uadConfig.scope
+                    ?.querySelector(uadConfig.scopeSelector)
+                    ?.querySelector('ul');
                 if (scrollRegion) {
                     scrollRegion.scrollTop = scrollRegion.scrollHeight - scrollRegion.offsetHeight;
                 }
-                if ((focusReturnEl === null || focusReturnEl === void 0 ? void 0 : focusReturnEl.id) !== activeDescendant.id) {
+                if (focusReturnEl?.id !== activeDescendant.id) {
                     // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.
                     setTimeout(() => {
                         setFocusReturnEl(lastItem);
                     }, 0);
                 }
             }
-            else if ((focusReturnEl === null || focusReturnEl === void 0 ? void 0 : focusReturnEl.id) !== activeDescendant.id) {
+            else if (focusReturnEl?.id !== activeDescendant.id) {
                 // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.
                 setTimeout(() => {
                     setFocusReturnEl(activeDescendant);
                 }, 0);
             }
         }
-    }, [loading, descendants, activeDescendant, uadConfig, focusReturnEl]);
-    return (React.createElement(StyledMenu, { id: id, role: 'menu', "aria-describedby": !focusControlEl ? `${id}-menuDescription` : undefined, ...restProps, ref: menuRef },
-        !focusControlEl && (React.createElement(StyledAriaDescription, { id: `${id}-menuDescription` },
-            t('menu_selection_instructions'),
-            " ",
-            ariaDescribedBy && ` ${ariaDescribedBy}`)),
-        header && React.createElement("header", null, header),
-        React.createElement(StyledMenuListWrapper, null,
-            React.createElement(MenuContext.Provider, { value: {
-                    componentId: id,
-                    mode,
-                    arrowNavigationUnsupported,
-                    onItemClick,
-                    onItemExpand,
-                    onItemCollapse,
-                    accent,
-                    scrollAt,
-                    emptyText,
-                    radioName,
-                    loadMore,
-                    loading,
-                    variant,
-                    updateActiveDescendants,
-                    setFocusReturnEl,
-                    getScopedItemId,
-                    pushFlyoutId,
-                    flyOutActiveIdStack
-                } }, variant === 'drill-down' ? (React.createElement(MenuList, { items: items })) : (React.createElement(FlyoutMenuList, { items: items })))),
-        footer && React.createElement("footer", null, footer)));
+    }, [
+        loading,
+        descendants,
+        previousActiveDescendant,
+        activeDescendant,
+        uadConfig,
+        focusReturnEl
+    ]);
+    const contextValue = useMemo(() => {
+        return {
+            componentId: id,
+            mode,
+            arrowNavigationUnsupported,
+            onItemClick,
+            onItemActive,
+            onItemExpand,
+            onItemCollapse,
+            accent,
+            scrollAt,
+            emptyText,
+            radioName,
+            loadMore,
+            loading,
+            variant,
+            focusControl,
+            updateActiveDescendants,
+            setFocusReturnEl,
+            setFocusDescendant,
+            getScopedItemId,
+            pushFlyoutId,
+            flyOutActiveIdStack
+        };
+    }, [
+        id,
+        mode,
+        arrowNavigationUnsupported,
+        onItemClick,
+        onItemActive,
+        onItemExpand,
+        onItemCollapse,
+        accent,
+        scrollAt,
+        emptyText,
+        radioName,
+        loadMore,
+        loading,
+        variant,
+        focusControl,
+        updateActiveDescendants,
+        setFocusReturnEl,
+        setFocusDescendant,
+        getScopedItemId,
+        pushFlyoutId,
+        flyOutActiveIdStack
+    ]);
+    return (_jsxs(StyledMenu, { id: id, role: 'menu', "aria-describedby": !focusControlEl ? `${id}-menuDescription` : undefined, ...restProps, ref: menuRef, children: [!focusControlEl && (_jsxs(StyledAriaDescription, { id: `${id}-menuDescription`, children: [t('menu_selection_instructions'), " ", ariaDescribedBy && ` ${ariaDescribedBy}`] }, void 0)), header && _jsx("header", { children: header }, void 0), _jsx(StyledMenuListWrapper, { children: _jsx(MenuContext.Provider, { value: contextValue, children: variant === 'drill-down' ? (_jsx(MenuList, { items: items }, void 0)) : (_jsx(FlyoutMenuList, { items: items }, void 0)) }, void 0) }, void 0), footer && _jsx("footer", { children: footer }, void 0)] }, void 0));
 });
 export default Menu;
 //# sourceMappingURL=Menu.js.map

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 React, {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { useConsolidatedRef, useUID, useActiveDescendant, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { MenuProps } from './Menu.types';\nimport MenuList from './MenuList';\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\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);\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nconst 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});\nStyledMenu.defaultProps = defaultThemeProp;\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(\n  (\n    {\n      id = useUID(),\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    }: PropsWithoutRef<MenuProps>,\n    ref: MenuProps['ref']\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 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 = useCallback(\n      () => setActiveDescendantUpdateId(Math.random()),\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      }),\n      [focusControl, menuRef.current, activeFlyoutSelector, focusReturnEl, currentItemId]\n    );\n\n    const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n      activeDescendantUpdateId\n    ]);\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      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    }, [items]);\n\n    // ## Bump scroll & set return element when descendant focused in loading state.\n    useEffect(() => {\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    }, [loading, descendants, activeDescendant, uadConfig, focusReturnEl]);\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,5 +1,18 @@
+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>;
 export declare const StyledLoadingItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMenuListWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAriaDescription: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Menu.styles.d.ts.map

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":"AAKA,eAAO,MAAM,cAAc,wGAY1B,CAAC;AAIF,eAAO,MAAM,uBAAuB,8GAMlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,8GAEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wGAI7B,CAAC"}
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"AAWA,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"}