@pega/cosmos-react-core 9.0.0-build.14.8 → 9.0.0-build.15.0

package/lib/components/AppShell/NavigationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport type { ElementType, FC, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useEscape\n} from '../../hooks';\nimport { isValidElement } from '../../utils';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport type { OmitStrict } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport Link from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport type {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledNavItemIconBox,\n  StyledNavListItem,\n  StyledNavListItemExpandCollapse,\n  StyledCaseClose,\n  StyledSingleSelectIconBox,\n  StyledNavListItemVisualContainer,\n  StyledNavListItemGroupIndicator\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nregisterIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const { navState } = useContext(AppShellContext);\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  useEscape(() => {\n    setCollapsed(true);\n    itemRef.current?.focus();\n  }, menuRef);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n\n        {navState === 'open' && <StyledNavListItemExpandCollapse name={`caret-${end}`} />}\n      </BareButton>\n\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n  visual,\n  primary,\n  secondary,\n  collapsedItemInfo,\n  href,\n  onClick,\n  items,\n  collapseItems = false,\n  onDismiss,\n  actions,\n  forwardedRef,\n  isMenuItem,\n  count,\n  singleSelect,\n  selected,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-current': ariaCurrent,\n  ...restProps\n}) => {\n  const { navOpen, navState } = useContext(AppShellContext);\n  const t = useI18n();\n  const listItemRef = useConsolidatedRef(forwardedRef);\n  const [menuState, setMenuState] = useState('');\n  const {\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = useTheme();\n\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  const shouldShowMenuAttributes = hasItems || (onDismiss && !navOpen);\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n  const primaryId = useUID();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} singleSelect={singleSelect} nestedListCollapsed>\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childElementRef={listItemRef}\n        items={actions || items || caseItems}\n        onMenuToggle={setMenuState}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef}\n          {...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {})}\n          aria-labelledby={`${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy ?? ''}`}\n          {...(shouldShowMenuAttributes && {\n            'aria-haspopup': 'menu',\n            'aria-expanded': menuState === 'open'\n          })}\n          aria-current={ariaCurrent}\n        >\n          {singleSelect && (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledSingleSelectIconBox}\n            >\n              {selected && <Icon name='check' />}\n            </Flex>\n          )}\n          {visual && (\n            <Flex\n              container={{ direction: 'column', gap: 0.5 }}\n              as={StyledNavListItemVisualContainer}\n              isCurrent={ariaCurrent === 'page'}\n              navOpen={navOpen}\n            >\n              <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>\n              {!navOpen && collapsedItemInfo && (\n                <Text variant='secondary'>{collapsedItemInfo}</Text>\n              )}\n              {hasItems && navState === 'closed' && (\n                <StyledNavListItemGroupIndicator name={`caret-${end}`} />\n              )}\n            </Flex>\n          )}\n\n          {secondary ? (\n            <Flex\n              container={{ direction: 'column', alignItems: 'start' }}\n              item={{ shrink: !navOpen && detached ? 1 : 0 }}\n              as='span'\n            >\n              <span id={primaryId}>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span id={primaryId}>{primary}</span>\n          )}\n\n          {(hasItems || actions) && navState === 'open' && (\n            <StyledNavListItemExpandCollapse name={`caret-${end}`} />\n          )}\n        </Component>\n      </NavigationListItemWrapper>\n\n      {onDismiss && navOpen && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={onDismiss}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = ({\n  items = [],\n  nestedList,\n  id,\n  collapsed,\n  singleSelect\n}) => {\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items.map(item => {\n        if (isValidElement(item)) return item;\n\n        if (item.items && item.items.length > 0 && navOpen) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n\n        return (\n          <ItemComponent\n            key={item.id || item.primary}\n            isMenuItem={nestedList}\n            singleSelect={singleSelect}\n            aria-current={item['aria-current']}\n            {...item}\n          />\n        );\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport type { ElementType, FC, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useEscape\n} from '../../hooks';\nimport { isValidElement } from '../../utils';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport type { OmitStrict } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport Link from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport type {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledNavItemIconBox,\n  StyledNavListItem,\n  StyledNavListItemExpandCollapse,\n  StyledCaseClose,\n  StyledSingleSelectIconBox,\n  StyledNavListItemVisualContainer,\n  StyledNavListItemGroupIndicator\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nregisterIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const { navState } = useContext(AppShellContext);\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  useEscape(() => {\n    setCollapsed(true);\n    itemRef.current?.focus();\n  }, menuRef);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n\n        {navState === 'open' && <StyledNavListItemExpandCollapse name={`caret-${end}`} />}\n      </BareButton>\n\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n  visual,\n  primary,\n  secondary,\n  collapsedItemInfo,\n  href,\n  onClick,\n  items,\n  collapseItems = false,\n  onDismiss,\n  actions,\n  forwardedRef,\n  isMenuItem,\n  mobileNavBar,\n  count,\n  singleSelect,\n  selected,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-current': ariaCurrent,\n  ...restProps\n}) => {\n  const { navOpen: navOpenValue, navState } = useContext(AppShellContext);\n  const navOpen = mobileNavBar ? false : navOpenValue;\n  const t = useI18n();\n  const listItemRef = useConsolidatedRef(forwardedRef);\n  const [menuState, setMenuState] = useState('');\n  const {\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = useTheme();\n\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  const shouldShowMenuAttributes = hasItems || (onDismiss && !navOpen);\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n  const primaryId = useUID();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} singleSelect={singleSelect} nestedListCollapsed>\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childElementRef={listItemRef}\n        items={actions || items || caseItems}\n        onMenuToggle={setMenuState}\n        mobileNavBar={mobileNavBar}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef}\n          {...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {})}\n          aria-labelledby={`${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy ?? ''}`}\n          {...(shouldShowMenuAttributes && {\n            'aria-haspopup': 'menu',\n            'aria-expanded': menuState === 'open'\n          })}\n          aria-current={ariaCurrent}\n        >\n          {singleSelect && (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledSingleSelectIconBox}\n            >\n              {selected && <Icon name='check' />}\n            </Flex>\n          )}\n          {visual && (\n            <Flex\n              container={{ direction: 'column', gap: 0.5 }}\n              as={StyledNavListItemVisualContainer}\n              isCurrent={ariaCurrent === 'page'}\n              navOpen={navOpen}\n            >\n              <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>\n              {!navOpen && collapsedItemInfo && (\n                <Text variant='secondary'>{collapsedItemInfo}</Text>\n              )}\n              {hasItems && navState === 'closed' && (\n                <StyledNavListItemGroupIndicator name={`caret-${end}`} />\n              )}\n            </Flex>\n          )}\n\n          {secondary ? (\n            <Flex\n              container={{ direction: 'column', alignItems: 'start' }}\n              item={{ shrink: !navOpen && detached ? 1 : 0 }}\n              as='span'\n            >\n              <span id={primaryId}>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span id={primaryId}>{primary}</span>\n          )}\n\n          {(hasItems || actions) && navState === 'open' && !mobileNavBar && (\n            <StyledNavListItemExpandCollapse name={`caret-${end}`} />\n          )}\n        </Component>\n      </NavigationListItemWrapper>\n\n      {onDismiss && navOpen && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={onDismiss}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = ({\n  items = [],\n  nestedList,\n  id,\n  collapsed,\n  singleSelect,\n  mobileNavBar\n}) => {\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items.map(item => {\n        if (isValidElement(item)) return item;\n\n        if (item.items && item.items.length > 0 && navOpen && !mobileNavBar) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n\n        return (\n          <ItemComponent\n            key={item.id || item.primary}\n            isMenuItem={nestedList}\n            singleSelect={singleSelect}\n            aria-current={item['aria-current']}\n            mobileNavBar={mobileNavBar}\n            {...item}\n          />\n        );\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}

package/lib/components/AppShell/NavigationListItemWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AAa5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAkDhE,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAkOhD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AAa5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAwDhE,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAqPhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/NavigationListItemWrapper.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { remToPx, stripUnit } from 'polished';
 import { useContext, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { useDirection, useEscape, useOuterEvent, useUID } from '../../hooks';
+import { tryCatch, createStringMatcher, isInstance } from '../../utils';
+import { useDirection, useEscape, useOuterEvent, useTheme, useUID } from '../../hooks';
 import Text from '../Text';
 import Tooltip from '../Tooltip';
 import Popover from '../Popover';
@@ -9,54 +11,57 @@ import Menu from '../Menu';
 import { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
-import { createStringMatcher, isInstance } from '../../utils';
 import AppShellContext from './AppShellContext';
 import { navContrastColors } from './style-utils';
-const StyledNavigationPopover = styled.div(({ theme }) => {
+const StyledNavigationPopover = styled.div(({ theme, mobileNavBar }) => {
     const { hoverBg, foreground, backgroundColor } = navContrastColors(theme);
     const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;
     return css `
-    display: flex;
-    background: ${backgroundColor};
-
-    ${StyledMenu} {
       display: flex;
-      flex-direction: column;
-    }
+      background: ${backgroundColor};
 
-    ${StyledMenuListWrapper} {
-      overflow: auto;
-    }
+      ${StyledMenu} {
+        display: flex;
+        flex-direction: column;
+        ${mobileNavBar &&
+        css `
+          width: calc(100vw - (2 * ${theme.base.spacing}));
+        `}
+      }
 
-    &,
-    ${StyledMenuListContainer} {
-      background: ${backgroundColor};
+      ${StyledMenuListWrapper} {
+        overflow: auto;
+      }
 
-      header {
-        color: ${foreground};
-        border-bottom: none;
+      &,
+      ${StyledMenuListContainer} {
+        background: ${backgroundColor};
 
-        h2 {
-          font-weight: ${theme.base['font-weight']['semi-bold']};
-          font-size: ${headingFontSize};
+        header {
+          color: ${foreground};
+          border-bottom: none;
+
+          h2 {
+            font-weight: ${theme.base['font-weight']['semi-bold']};
+            font-size: ${headingFontSize};
+          }
         }
       }
-    }
 
-    ${StyledMenuListContainer} li {
-      color: ${foreground};
-      background-color: transparent;
+      ${StyledMenuListContainer} li {
+        color: ${foreground};
+        background-color: transparent;
 
-      &:hover,
-      &[data-current='true'] {
-        background-color: ${hoverBg};
+        &:hover,
+        &[data-current='true'] {
+          background-color: ${hoverBg};
+        }
       }
-    }
-  `;
+    `;
 });
 StyledNavigationPopover.defaultProps = defaultThemeProp;
 const ListItemWrapper = props => {
-    const { children, childElementRef, label, tooltipLabel, items = [], filterAt = 5, content, onMenuToggle } = props;
+    const { children, childElementRef, label, tooltipLabel, items = [], filterAt = 5, content, onMenuToggle, mobileNavBar } = props;
     const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);
     const popoverRef = useRef(null);
     const filterElRef = useRef(null);
@@ -67,6 +72,7 @@ const ListItemWrapper = props => {
     const { end } = useDirection();
     const mousedOverMenu = useRef(false);
     const hidePopoverTimeout = useRef();
+    const theme = useTheme();
     const closePopover = (focusChildEl = true) => {
         if (popoverOpen) {
             setFilterValue('');
@@ -176,23 +182,38 @@ const ListItemWrapper = props => {
             onBlur: () => closePopover(false)
         }
         : undefined;
-    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && (_jsx(Tooltip, { target: childElementRef.current, placement: end, showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childElementRef.current, placement: `${end}-start`, ref: popoverRef, as: StyledNavigationPopover, arrow: true, modifiers: headerEl
-                            ? [
-                                {
-                                    name: 'preventOverflow',
-                                    options: {
-                                        padding: {
-                                            top: headerEl.offsetHeight + 8,
-                                            right: 8,
-                                            bottom: 8,
-                                            left: 8
+    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && (_jsx(Tooltip, { target: childElementRef.current, placement: mobileNavBar ? 'top' : end, showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childElementRef.current, placement: `${mobileNavBar ? 'top' : end}-start`, ref: popoverRef, as: StyledNavigationPopover, arrow: true, modifiers: [
+                            ...(headerEl
+                                ? [
+                                    {
+                                        name: 'preventOverflow',
+                                        options: {
+                                            padding: {
+                                                top: headerEl.offsetHeight + 8,
+                                                right: 8,
+                                                bottom: 8,
+                                                left: 8
+                                            }
+                                        }
+                                    }
+                                ]
+                                : []),
+                            ...(mobileNavBar
+                                ? [
+                                    {
+                                        name: 'offset',
+                                        options: {
+                                            offset: [
+                                                0,
+                                                tryCatch(() => 5.5 + Number(stripUnit(remToPx(theme.base.spacing))), () => 5.5 + 8)
+                                            ]
                                         }
                                     }
-                                }
-                            ]
-                            : undefined, onClick: (e) => {
+                                ]
+                                : [])
+                        ], onClick: (e) => {
                             e.stopPropagation();
-                        }, children: content ? (_jsx("div", { onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent, children: content })) : (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childElementRef.current ?? undefined, scrollAt: 99, listId: searchListId, filterInputProps: filterInputProps, items: itemsToRender.map(item => {
+                        }, mobileNavBar: mobileNavBar, children: content ? (_jsx("div", { onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent, children: content })) : (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childElementRef.current ?? undefined, scrollAt: 99, listId: searchListId, filterInputProps: filterInputProps, items: itemsToRender.map(item => {
                                 return {
                                     id: (item.primary || item.text),
                                     primary: (item.primary || item.text),

package/lib/components/AppShell/NavigationListItemWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent, FC, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent, useUID } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { createStringMatcher, isInstance } from '../../utils';\n\nimport type { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors } from './style-utils';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n  const { hoverBg, foreground, backgroundColor } = navContrastColors(theme);\n\n  const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n  return css`\n    display: flex;\n    background: ${backgroundColor};\n\n    ${StyledMenu} {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ${StyledMenuListWrapper} {\n      overflow: auto;\n    }\n\n    &,\n    ${StyledMenuListContainer} {\n      background: ${backgroundColor};\n\n      header {\n        color: ${foreground};\n        border-bottom: none;\n\n        h2 {\n          font-weight: ${theme.base['font-weight']['semi-bold']};\n          font-size: ${headingFontSize};\n        }\n      }\n    }\n\n    ${StyledMenuListContainer} li {\n      color: ${foreground};\n      background-color: transparent;\n\n      &:hover,\n      &[data-current='true'] {\n        background-color: ${hoverBg};\n      }\n    }\n  `;\n});\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childElementRef,\n    label,\n    tooltipLabel,\n    items = [],\n    filterAt = 5,\n    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const filterElRef = useRef<HTMLInputElement>(null);\n  const renderFilter = items.length >= filterAt;\n\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n\n  const { end } = useDirection();\n  const mousedOverMenu = useRef(false);\n  const hidePopoverTimeout = useRef<number | null>();\n\n  const closePopover = (focusChildEl: boolean = true) => {\n    if (popoverOpen) {\n      setFilterValue('');\n      setPopoverOpen(false);\n      if (focusChildEl) {\n        childElementRef.current?.focus();\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    }\n  };\n\n  const onMouseEnterContent = () => {\n    if (collapsedHoverMenus) {\n      mousedOverMenu.current = true;\n    }\n  };\n\n  const onMouseLeaveContent = () => {\n    if (mousedOverMenu.current && collapsedHoverMenus) {\n      mousedOverMenu.current = false;\n      closePopover();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef], () => closePopover());\n\n  useEffect(() => {\n    const onClick = (e: Event) => {\n      if (items.length || content) {\n        if (!navOpen) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        if (!navOpen && !popoverOpen) setPopoverOpen(true);\n        else {\n          setTimeout(() => {\n            closePopover(false);\n          }, 0);\n        }\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !content) {\n        setPopoverOpen(false);\n      }\n    };\n\n    const onMouseOut = (e: MouseEvent) => {\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n\n      const tag = (e.relatedTarget as HTMLElement | null)?.tagName.toLowerCase();\n\n      // If the mouse is mousing out from this nav item onto another nav item\n      if (tag && ['a', 'button', 'form'].includes(tag)) {\n        closePopover(false);\n      } else {\n        hidePopoverTimeout.current = window.setTimeout(() => {\n          if (!mousedOverMenu.current) {\n            closePopover(false);\n          }\n        }, 1000);\n      }\n    };\n\n    const onBlur = (e: FocusEvent) => {\n      if (isInstance(e.relatedTarget, Node) && popoverRef.current?.contains(e.relatedTarget)) {\n        return;\n      }\n      closePopover(false);\n    };\n\n    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('blur', e => onBlur(e));\n    childElementRef.current?.addEventListener('keydown', onKeyDown);\n    if (collapsedHoverMenus) {\n      childElementRef.current?.addEventListener('mouseenter', onClick);\n      childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n    }\n    return () => {\n      childElementRef.current?.removeEventListener('click', onClick);\n      childElementRef.current?.removeEventListener('keydown', onKeyDown);\n      if (collapsedHoverMenus) {\n        childElementRef.current?.removeEventListener('mouseenter', onClick);\n        childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    };\n  }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEscape(() => closePopover(), childElementRef, [childElementRef]);\n\n  useEscape(() => closePopover(), popoverRef, [popoverRef]);\n\n  const searchListId = useUID();\n\n  const itemsToRender = renderFilter\n    ? items.filter(item => {\n        return filterRegex.test(item.primary);\n      })\n    : items;\n\n  const filterInputProps = renderFilter\n    ? {\n        value: filterValue,\n        ref: filterElRef,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value),\n        onBlur: () => closePopover(false)\n      }\n    : undefined;\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && (\n            <Tooltip\n              target={childElementRef.current}\n              placement={end}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childElementRef.current}\n              placement={`${end}-start`}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n              modifiers={\n                headerEl\n                  ? [\n                      {\n                        name: 'preventOverflow',\n                        options: {\n                          padding: {\n                            top: headerEl.offsetHeight + 8,\n                            right: 8,\n                            bottom: 8,\n                            left: 8\n                          }\n                        }\n                      }\n                    ]\n                  : undefined\n              }\n              onClick={(e: ReactMouseEvent<HTMLDivElement>) => {\n                e.stopPropagation();\n              }}\n            >\n              {content ? (\n                <div onMouseEnter={onMouseEnterContent} onMouseLeave={onMouseLeaveContent}>\n                  {content}\n                </div>\n              ) : (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childElementRef.current ?? undefined}\n                  scrollAt={99}\n                  listId={searchListId}\n                  filterInputProps={filterInputProps}\n                  items={itemsToRender.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href,\n                      onClick: (_, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                  onMouseEnter={onMouseEnterContent}\n                  onMouseLeave={onMouseLeaveContent}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}
+{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useContext, useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent, FC, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { tryCatch, createStringMatcher, isInstance } from '../../utils';\nimport { useDirection, useEscape, useOuterEvent, useTheme, useUID } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nimport type { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors } from './style-utils';\n\nconst StyledNavigationPopover = styled.div<{ mobileNavBar?: boolean }>(\n  ({ theme, mobileNavBar }) => {\n    const { hoverBg, foreground, backgroundColor } = navContrastColors(theme);\n\n    const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n    return css`\n      display: flex;\n      background: ${backgroundColor};\n\n      ${StyledMenu} {\n        display: flex;\n        flex-direction: column;\n        ${mobileNavBar &&\n        css`\n          width: calc(100vw - (2 * ${theme.base.spacing}));\n        `}\n      }\n\n      ${StyledMenuListWrapper} {\n        overflow: auto;\n      }\n\n      &,\n      ${StyledMenuListContainer} {\n        background: ${backgroundColor};\n\n        header {\n          color: ${foreground};\n          border-bottom: none;\n\n          h2 {\n            font-weight: ${theme.base['font-weight']['semi-bold']};\n            font-size: ${headingFontSize};\n          }\n        }\n      }\n\n      ${StyledMenuListContainer} li {\n        color: ${foreground};\n        background-color: transparent;\n\n        &:hover,\n        &[data-current='true'] {\n          background-color: ${hoverBg};\n        }\n      }\n    `;\n  }\n);\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childElementRef,\n    label,\n    tooltipLabel,\n    items = [],\n    filterAt = 5,\n    content,\n    onMenuToggle,\n    mobileNavBar\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const filterElRef = useRef<HTMLInputElement>(null);\n  const renderFilter = items.length >= filterAt;\n\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n\n  const { end } = useDirection();\n  const mousedOverMenu = useRef(false);\n  const hidePopoverTimeout = useRef<number | null>();\n  const theme = useTheme();\n\n  const closePopover = (focusChildEl: boolean = true) => {\n    if (popoverOpen) {\n      setFilterValue('');\n      setPopoverOpen(false);\n      if (focusChildEl) {\n        childElementRef.current?.focus();\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    }\n  };\n\n  const onMouseEnterContent = () => {\n    if (collapsedHoverMenus) {\n      mousedOverMenu.current = true;\n    }\n  };\n\n  const onMouseLeaveContent = () => {\n    if (mousedOverMenu.current && collapsedHoverMenus) {\n      mousedOverMenu.current = false;\n      closePopover();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef], () => closePopover());\n\n  useEffect(() => {\n    const onClick = (e: Event) => {\n      if (items.length || content) {\n        if (!navOpen) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        if (!navOpen && !popoverOpen) setPopoverOpen(true);\n        else {\n          setTimeout(() => {\n            closePopover(false);\n          }, 0);\n        }\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !content) {\n        setPopoverOpen(false);\n      }\n    };\n\n    const onMouseOut = (e: MouseEvent) => {\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n\n      const tag = (e.relatedTarget as HTMLElement | null)?.tagName.toLowerCase();\n\n      // If the mouse is mousing out from this nav item onto another nav item\n      if (tag && ['a', 'button', 'form'].includes(tag)) {\n        closePopover(false);\n      } else {\n        hidePopoverTimeout.current = window.setTimeout(() => {\n          if (!mousedOverMenu.current) {\n            closePopover(false);\n          }\n        }, 1000);\n      }\n    };\n\n    const onBlur = (e: FocusEvent) => {\n      if (isInstance(e.relatedTarget, Node) && popoverRef.current?.contains(e.relatedTarget)) {\n        return;\n      }\n      closePopover(false);\n    };\n\n    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('blur', e => onBlur(e));\n    childElementRef.current?.addEventListener('keydown', onKeyDown);\n    if (collapsedHoverMenus) {\n      childElementRef.current?.addEventListener('mouseenter', onClick);\n      childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n    }\n    return () => {\n      childElementRef.current?.removeEventListener('click', onClick);\n      childElementRef.current?.removeEventListener('keydown', onKeyDown);\n      if (collapsedHoverMenus) {\n        childElementRef.current?.removeEventListener('mouseenter', onClick);\n        childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    };\n  }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEscape(() => closePopover(), childElementRef, [childElementRef]);\n\n  useEscape(() => closePopover(), popoverRef, [popoverRef]);\n\n  const searchListId = useUID();\n\n  const itemsToRender = renderFilter\n    ? items.filter(item => {\n        return filterRegex.test(item.primary);\n      })\n    : items;\n\n  const filterInputProps = renderFilter\n    ? {\n        value: filterValue,\n        ref: filterElRef,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value),\n        onBlur: () => closePopover(false)\n      }\n    : undefined;\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && (\n            <Tooltip\n              target={childElementRef.current}\n              placement={mobileNavBar ? 'top' : end}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childElementRef.current}\n              placement={`${mobileNavBar ? 'top' : end}-start`}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n              modifiers={[\n                ...(headerEl\n                  ? [\n                      {\n                        name: 'preventOverflow',\n                        options: {\n                          padding: {\n                            top: headerEl.offsetHeight + 8,\n                            right: 8,\n                            bottom: 8,\n                            left: 8\n                          }\n                        }\n                      }\n                    ]\n                  : []),\n                ...(mobileNavBar\n                  ? [\n                      {\n                        name: 'offset',\n                        options: {\n                          offset: [\n                            0,\n                            tryCatch(\n                              () => 5.5 + Number(stripUnit(remToPx(theme.base.spacing))),\n                              () => 5.5 + 8\n                            )\n                          ]\n                        }\n                      }\n                    ]\n                  : [])\n              ]}\n              onClick={(e: ReactMouseEvent<HTMLDivElement>) => {\n                e.stopPropagation();\n              }}\n              mobileNavBar={mobileNavBar}\n            >\n              {content ? (\n                <div onMouseEnter={onMouseEnterContent} onMouseLeave={onMouseLeaveContent}>\n                  {content}\n                </div>\n              ) : (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childElementRef.current ?? undefined}\n                  scrollAt={99}\n                  listId={searchListId}\n                  filterInputProps={filterInputProps}\n                  items={itemsToRender.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href,\n                      onClick: (_, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                  onMouseEnter={onMouseEnterContent}\n                  onMouseLeave={onMouseLeaveContent}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}

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":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,kBAAkB,oLAE9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,0KAAiB,CAAC;AAElD,eAAO,MAAM,cAAc;kBACX,OAAO;WACd,SAAS,CAAC,MAAM,CAAC;iBACX,SAAS,CAAC,YAAY,CAAC;gBACxB,OAAO;uBACA,OAAO;SAkM3B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAS3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,uGAElC,CAAC;AAEF,eAAO,MAAM,eAAe,wGAM1B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAUhC,CAAC;AAIH,eAAO,MAAM,oBAAoB,4GA6C/B,CAAC;AAIH,eAAO,MAAM,cAAc,wGAiB1B,CAAC;AAIF,eAAO,MAAM,uBAAuB,8GAMlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,8GAEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,UAAU,yGAmDrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAqC3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0KAiB3B,CAAC"}
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,kBAAkB,oLAE9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,0KAAiB,CAAC;AAElD,eAAO,MAAM,cAAc;kBACX,OAAO;WACd,SAAS,CAAC,MAAM,CAAC;iBACX,SAAS,CAAC,YAAY,CAAC;gBACxB,OAAO;uBACA,OAAO;SA2O3B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAS3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,uGAElC,CAAC;AAEF,eAAO,MAAM,eAAe,wGAM1B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAUhC,CAAC;AAIH,eAAO,MAAM,oBAAoB,4GA6C/B,CAAC;AAIH,eAAO,MAAM,cAAc,wGAiB1B,CAAC;AAIF,eAAO,MAAM,uBAAuB,8GAMlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,8GAEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,UAAU,yGAmDrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAqC3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0KAiB3B,CAAC"}

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

@@ -8,7 +8,7 @@ import { tryCatch } from '../../utils';
 import { StyledText } from '../Text';
 import { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';
 import { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';
-import Button from '../Button';
+import Button, { StyledButton } from '../Button';
 import { readableColor } from '../../styles';
 import { StyledPrimary, StyledSecondary, StyledSummaryItem, StyledSummaryItemActions, StyledVisual } from '../SummaryItem';
 import { ellipsisOverflow } from '../../styles/mixins';
@@ -30,6 +30,29 @@ export const StyledMenuItem = styled.li(({ theme: { base, components }, isParent
       padding-inline: ${base.spacing};
       cursor: pointer;
 
+      > ${StyledSummaryItem} {
+        ${StyledSummaryItemActions}, ${StyledVisual} {
+          display: grid;
+          align-items: center;
+        }
+
+        > ${StyledVisual}:has(> :nth-child(2)) {
+          grid-template-columns: auto auto;
+          grid-column-gap: ${base.spacing};
+        }
+
+        ${itemLayout === 'stacked' &&
+        css `
+          &:has(${StyledSecondary})
+            > ${StyledVisual},
+            &:has(${StyledSecondary})
+            > ${StyledSummaryItemActions} {
+            height: ${base['hit-area']['mouse-min']};
+            align-self: start;
+          }
+        `}
+      }
+
       ${itemLayout === 'inline' &&
         css `
         justify-content: flex-start;
@@ -109,6 +132,15 @@ export const StyledMenuItem = styled.li(({ theme: { base, components }, isParent
 
       @media (pointer: coarse) {
         min-height: ${base['hit-area']['finger-min']};
+        ${itemLayout === 'stacked' &&
+        css `
+          &:has(${StyledSecondary})
+            > ${StyledVisual},
+            &:has(${StyledSecondary})
+            > ${StyledSummaryItemActions} {
+            height: ${base['hit-area']['finger-min']};
+          }
+        `}
       }
 
       &:focus-within {
@@ -143,6 +175,15 @@ export const StyledMenuItem = styled.li(({ theme: { base, components }, isParent
         color: inherit;
       }
 
+      /* The enclosing menu item has required min-height already set */
+      ${isParentItem &&
+        selectableParent &&
+        css `
+        ${StyledSummaryItemActions} ${StyledButton} {
+          min-height: unset;
+        }
+      `}
+
       ${isParentItem &&
         !selectableParent &&
         (mode === 'multi-select' || mode === 'single-select') &&

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';\nimport Button from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItem,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\nimport { StyledFormControl } from '../FormControl';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n  align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n  isParentItem: boolean;\n  mode?: MenuProps['mode'];\n  itemLayout?: MenuProps['itemLayout'];\n  isChecked?: boolean;\n  selectableParent?: boolean;\n}>(\n  ({\n    theme: { base, components },\n    isParentItem,\n    itemLayout,\n    mode = 'action',\n    'aria-selected': isChecked = false,\n    selectableParent = false\n  }) => {\n    const activeColor = tryCatch(() =>\n      mix(0.85, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverColor = tryCatch(() =>\n      mix(0.95, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverCheckColor = tryCatch(() =>\n      rgba(\n        components['radio-check'][':checked']['background-color'],\n        base.transparency['transparent-5']\n      )\n    );\n\n    const checkedBackground = components['radio-check'][':checked']['background-color'];\n    const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n    return css`\n      min-height: ${base['hit-area']['mouse-min']};\n      padding-block: calc(0.75 * ${base.spacing});\n      padding-inline: ${base.spacing};\n      cursor: pointer;\n\n      ${itemLayout === 'inline' &&\n      css`\n        justify-content: flex-start;\n\n        ${StyledSummaryItem} {\n          /* Sets grid columns based on SummaryItem content combinations */\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary secondary actions';\n            grid-template-columns: auto auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n            grid-template-areas: 'visual primary secondary';\n            grid-template-columns: auto auto 1fr;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'visual primary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'primary secondary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary secondary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n              ${StyledSummaryItemActions}\n            ) {\n            grid-template-areas: 'primary actions';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary';\n            grid-template-columns: 1fr;\n            flex-grow: 0;\n          }\n\n          & > ${StyledPrimary} {\n            ${ellipsisOverflow};\n          }\n\n          & > ${StyledSecondary} {\n            ${ellipsisOverflow};\n\n            ul {\n              li {\n                ${ellipsisOverflow};\n              }\n              justify-content: end;\n            }\n          }\n\n          & > ${StyledSummaryItemActions} > ${StyledFlex} {\n            justify-content: end;\n          }\n        }\n      `}\n\n      @media (pointer: coarse) {\n        min-height: ${base['hit-area']['finger-min']};\n      }\n\n      &:focus-within {\n        background-color: ${activeColor};\n      }\n\n      &:hover {\n        ${StyledCheckMarkIcon} {\n          visibility: visible;\n          ${mode === 'single-select' &&\n          css`\n            color: ${isChecked ? checkedBackground : hoverCheckColor};\n          `}\n          ${mode === 'multi-select' &&\n          css`\n            ${!isChecked &&\n            css`\n              border-color: ${components['form-control'][':hover']['border-color']};\n            `}\n          `}\n        }\n      }\n\n      &:hover:not([aria-disabled='true']) {\n        background-color: ${hoverColor};\n      }\n\n      a:first-of-type {\n        display: block;\n        width: 100%;\n        text-decoration: none;\n        color: inherit;\n      }\n\n      ${isParentItem &&\n      !selectableParent &&\n      (mode === 'multi-select' || mode === 'single-select') &&\n      css`\n        padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n      `}\n\n      ${StyledGrid} {\n        flex-grow: 1;\n      }\n\n      ${StyledCheckMarkIcon} {\n        margin-inline-start: 0;\n        ${mode === 'single-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedBackground};\n              `\n            : css`\n                visibility: hidden;\n              `}\n        `}\n        ${mode === 'multi-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedForeground};\n                background-color: ${checkedBackground};\n                border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n              `\n            : css`\n                color: transparent;\n                border: 0.0625rem solid ${components['radio-check']['border-color']};\n              `}\n          border-radius: min(\n            calc(${base['border-radius']} * ${components.checkbox['border-radius']}),\n            0.25rem\n          );\n        `}\n      }\n\n      &[aria-disabled='true'] {\n        cursor: not-allowed;\n        background-color: ${components['form-control'][':disabled']['background-color']};\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n  ${StyledIcon} {\n    width: 1em;\n    height: 1em;\n  }\n\n  & > ${StyledText} {\n    ${ellipsisOverflow};\n  }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n  ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n  return css`\n    height: 0.0625rem;\n    background-color: ${theme.base.palette['border-line']};\n    margin: ${theme.base.spacing} 0;\n  `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n  return css`\n    min-height: ${theme.base['hit-area']['mouse-min']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    background-color: ${theme.base.palette['secondary-background']};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.95, base.palette['primary-background'], base.palette.interactive)\n  );\n  const activeColor = tryCatch(() =>\n    mix(0.85, base.palette['primary-background'], base.palette.interactive)\n  );\n\n  return css`\n    cursor: pointer;\n    width: 100%;\n    background-color: ${base.palette['primary-background']};\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    &:focus-within {\n      box-shadow: ${base.shadow['focus-inset']};\n      background-color: ${activeColor};\n    }\n\n    &:hover:not([aria-disabled='true']):not([data-current='true']) {\n      background-color: ${hoverColor};\n    }\n    color: ${base.palette['foreground-color']};\n    padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n    text-align: start;\n    border-radius: inherit;\n\n    > ${StyledGrid} {\n      grid-column-gap: ${base.spacing};\n    }\n\n    ${StyledIcon} {\n      /* Fixes vertical align issue increasing box size beyond square */\n      display: block;\n    }\n  `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n  ({ theme }) => css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style: none;\n    height: 100%;\n    border-radius: inherit;\n\n    ${StyledEmptyState} {\n      padding: ${theme.base.spacing};\n      height: auto;\n    }\n\n    li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n      margin-block-start: ${theme.base.spacing};\n    }\n  `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border: 0;\n    border-radius: inherit;\n  `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n  min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n  display: block;\n  position: relative;\n  height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n  ({ theme }) => css`\n    position: relative;\n    overflow: hidden;\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\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    ${StyledMetaList} ${StyledMetaListItem} * {\n      display: inline;\n      vertical-align: baseline;\n      margin: 0;\n    }\n  `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n  const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n\n    &,\n    ${StyledMenuListWrapper} {\n      max-height: inherit;\n    }\n\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\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    &[data-active-scope='true'] [data-current='true'] {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledVisuallyHiddenText}:first-child {\n      + ${StyledMenuListWrapper}, + header {\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n    }\n\n    > header,\n    > footer {\n      padding: ${theme.base.spacing};\n    }\n\n    > header {\n      border-bottom: ${borderStyle};\n    }\n\n    > footer {\n      border-top: ${borderStyle};\n    }\n  `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuFilter = styled.div(({ theme }) => {\n  const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n  return css`\n    position: relative;\n    min-height: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n      min-width: ${theme.base['hit-area']['finger-min']};\n    }\n\n    ${StyledFormControl} {\n      height: 100%;\n      border-radius: ${borderRadius};\n      padding-inline-start: calc(1.5 * ${theme.components.input.padding});\n      padding-inline-end: calc(4 * ${theme.components.input.padding});\n\n      &::-webkit-search-cancel-button {\n        display: none;\n      }\n\n      ::-webkit-search-decoration {\n        -webkit-appearance: none;\n      }\n\n      &:focus:not([disabled]) {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n        border-color: ${theme.components['form-control']['border-color']};\n\n        :hover {\n          border-color: ${theme.components['form-control'][':hover']['border-color']};\n        }\n      }\n    }\n  `;\n});\n\nStyledMenuFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterIcon = styled(Icon)(({ theme }) => {\n  const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));\n\n  return css`\n    position: absolute;\n    color: ${iconColor};\n    inset-inline-end: calc(1.5 * ${theme.components.input.padding});\n    /* stylelint-disable unit-allowed-list */\n    inset-block-start: calc(0.5 * (${theme.components.input.height} - max(1.125rem, 14px)));\n\n    @media (pointer: coarse) {\n      inset-block-start: calc(\n        0.5 * (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px))\n      );\n    }\n    /* stylelint-enable unit-allowed-list */\n  `;\n});\n\nStyledFilterIcon.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';\nimport Button, { StyledButton } from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItem,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\nimport { StyledFormControl } from '../FormControl';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n  align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n  isParentItem: boolean;\n  mode?: MenuProps['mode'];\n  itemLayout?: MenuProps['itemLayout'];\n  isChecked?: boolean;\n  selectableParent?: boolean;\n}>(\n  ({\n    theme: { base, components },\n    isParentItem,\n    itemLayout,\n    mode = 'action',\n    'aria-selected': isChecked = false,\n    selectableParent = false\n  }) => {\n    const activeColor = tryCatch(() =>\n      mix(0.85, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverColor = tryCatch(() =>\n      mix(0.95, base.palette['primary-background'], base.palette.interactive)\n    );\n    const hoverCheckColor = tryCatch(() =>\n      rgba(\n        components['radio-check'][':checked']['background-color'],\n        base.transparency['transparent-5']\n      )\n    );\n\n    const checkedBackground = components['radio-check'][':checked']['background-color'];\n    const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n    return css`\n      min-height: ${base['hit-area']['mouse-min']};\n      padding-block: calc(0.75 * ${base.spacing});\n      padding-inline: ${base.spacing};\n      cursor: pointer;\n\n      > ${StyledSummaryItem} {\n        ${StyledSummaryItemActions}, ${StyledVisual} {\n          display: grid;\n          align-items: center;\n        }\n\n        > ${StyledVisual}:has(> :nth-child(2)) {\n          grid-template-columns: auto auto;\n          grid-column-gap: ${base.spacing};\n        }\n\n        ${itemLayout === 'stacked' &&\n        css`\n          &:has(${StyledSecondary})\n            > ${StyledVisual},\n            &:has(${StyledSecondary})\n            > ${StyledSummaryItemActions} {\n            height: ${base['hit-area']['mouse-min']};\n            align-self: start;\n          }\n        `}\n      }\n\n      ${itemLayout === 'inline' &&\n      css`\n        justify-content: flex-start;\n\n        ${StyledSummaryItem} {\n          /* Sets grid columns based on SummaryItem content combinations */\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary secondary actions';\n            grid-template-columns: auto auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n            grid-template-areas: 'visual primary secondary';\n            grid-template-columns: auto auto 1fr;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'visual primary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'visual primary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n            grid-template-areas: 'primary secondary actions';\n            grid-template-columns: auto 1fr auto;\n          }\n\n          &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary secondary';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n              ${StyledSummaryItemActions}\n            ) {\n            grid-template-areas: 'primary actions';\n            grid-template-columns: auto 1fr;\n          }\n\n          &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n              :has(${StyledSummaryItemActions})\n            ) {\n            grid-template-areas: 'primary';\n            grid-template-columns: 1fr;\n            flex-grow: 0;\n          }\n\n          & > ${StyledPrimary} {\n            ${ellipsisOverflow};\n          }\n\n          & > ${StyledSecondary} {\n            ${ellipsisOverflow};\n\n            ul {\n              li {\n                ${ellipsisOverflow};\n              }\n              justify-content: end;\n            }\n          }\n\n          & > ${StyledSummaryItemActions} > ${StyledFlex} {\n            justify-content: end;\n          }\n        }\n      `}\n\n      @media (pointer: coarse) {\n        min-height: ${base['hit-area']['finger-min']};\n        ${itemLayout === 'stacked' &&\n        css`\n          &:has(${StyledSecondary})\n            > ${StyledVisual},\n            &:has(${StyledSecondary})\n            > ${StyledSummaryItemActions} {\n            height: ${base['hit-area']['finger-min']};\n          }\n        `}\n      }\n\n      &:focus-within {\n        background-color: ${activeColor};\n      }\n\n      &:hover {\n        ${StyledCheckMarkIcon} {\n          visibility: visible;\n          ${mode === 'single-select' &&\n          css`\n            color: ${isChecked ? checkedBackground : hoverCheckColor};\n          `}\n          ${mode === 'multi-select' &&\n          css`\n            ${!isChecked &&\n            css`\n              border-color: ${components['form-control'][':hover']['border-color']};\n            `}\n          `}\n        }\n      }\n\n      &:hover:not([aria-disabled='true']) {\n        background-color: ${hoverColor};\n      }\n\n      a:first-of-type {\n        display: block;\n        width: 100%;\n        text-decoration: none;\n        color: inherit;\n      }\n\n      /* The enclosing menu item has required min-height already set */\n      ${isParentItem &&\n      selectableParent &&\n      css`\n        ${StyledSummaryItemActions} ${StyledButton} {\n          min-height: unset;\n        }\n      `}\n\n      ${isParentItem &&\n      !selectableParent &&\n      (mode === 'multi-select' || mode === 'single-select') &&\n      css`\n        padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n      `}\n\n      ${StyledGrid} {\n        flex-grow: 1;\n      }\n\n      ${StyledCheckMarkIcon} {\n        margin-inline-start: 0;\n        ${mode === 'single-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedBackground};\n              `\n            : css`\n                visibility: hidden;\n              `}\n        `}\n        ${mode === 'multi-select' &&\n        css`\n          ${isChecked\n            ? css`\n                color: ${checkedForeground};\n                background-color: ${checkedBackground};\n                border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n              `\n            : css`\n                color: transparent;\n                border: 0.0625rem solid ${components['radio-check']['border-color']};\n              `}\n          border-radius: min(\n            calc(${base['border-radius']} * ${components.checkbox['border-radius']}),\n            0.25rem\n          );\n        `}\n      }\n\n      &[aria-disabled='true'] {\n        cursor: not-allowed;\n        background-color: ${components['form-control'][':disabled']['background-color']};\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n  ${StyledIcon} {\n    width: 1em;\n    height: 1em;\n  }\n\n  & > ${StyledText} {\n    ${ellipsisOverflow};\n  }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n  ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n  return css`\n    height: 0.0625rem;\n    background-color: ${theme.base.palette['border-line']};\n    margin: ${theme.base.spacing} 0;\n  `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n  return css`\n    min-height: ${theme.base['hit-area']['mouse-min']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    background-color: ${theme.base.palette['secondary-background']};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.95, base.palette['primary-background'], base.palette.interactive)\n  );\n  const activeColor = tryCatch(() =>\n    mix(0.85, base.palette['primary-background'], base.palette.interactive)\n  );\n\n  return css`\n    cursor: pointer;\n    width: 100%;\n    background-color: ${base.palette['primary-background']};\n\n    &:first-child {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n\n    &:last-child {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    &:focus-within {\n      box-shadow: ${base.shadow['focus-inset']};\n      background-color: ${activeColor};\n    }\n\n    &:hover:not([aria-disabled='true']):not([data-current='true']) {\n      background-color: ${hoverColor};\n    }\n    color: ${base.palette['foreground-color']};\n    padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n    text-align: start;\n    border-radius: inherit;\n\n    > ${StyledGrid} {\n      grid-column-gap: ${base.spacing};\n    }\n\n    ${StyledIcon} {\n      /* Fixes vertical align issue increasing box size beyond square */\n      display: block;\n    }\n  `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n  ({ theme }) => css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style: none;\n    height: 100%;\n    border-radius: inherit;\n\n    ${StyledEmptyState} {\n      padding: ${theme.base.spacing};\n      height: auto;\n    }\n\n    li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n      margin-block-start: ${theme.base.spacing};\n    }\n  `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border: 0;\n    border-radius: inherit;\n  `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n  min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n  display: block;\n  position: relative;\n  height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n  ({ theme }) => css`\n    position: relative;\n    overflow: hidden;\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\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    ${StyledMetaList} ${StyledMetaListItem} * {\n      display: inline;\n      vertical-align: baseline;\n      margin: 0;\n    }\n  `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n  const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n\n    &,\n    ${StyledMenuListWrapper} {\n      max-height: inherit;\n    }\n\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\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    &[data-active-scope='true'] [data-current='true'] {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledVisuallyHiddenText}:first-child {\n      + ${StyledMenuListWrapper}, + header {\n        border-top-left-radius: inherit;\n        border-top-right-radius: inherit;\n      }\n    }\n\n    > header,\n    > footer {\n      padding: ${theme.base.spacing};\n    }\n\n    > header {\n      border-bottom: ${borderStyle};\n    }\n\n    > footer {\n      border-top: ${borderStyle};\n    }\n  `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuFilter = styled.div(({ theme }) => {\n  const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n  return css`\n    position: relative;\n    min-height: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n\n    @media (pointer: coarse) {\n      min-height: ${theme.base['hit-area']['finger-min']};\n      min-width: ${theme.base['hit-area']['finger-min']};\n    }\n\n    ${StyledFormControl} {\n      height: 100%;\n      border-radius: ${borderRadius};\n      padding-inline-start: calc(1.5 * ${theme.components.input.padding});\n      padding-inline-end: calc(4 * ${theme.components.input.padding});\n\n      &::-webkit-search-cancel-button {\n        display: none;\n      }\n\n      ::-webkit-search-decoration {\n        -webkit-appearance: none;\n      }\n\n      &:focus:not([disabled]) {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n        border-color: ${theme.components['form-control']['border-color']};\n\n        :hover {\n          border-color: ${theme.components['form-control'][':hover']['border-color']};\n        }\n      }\n    }\n  `;\n});\n\nStyledMenuFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterIcon = styled(Icon)(({ theme }) => {\n  const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));\n\n  return css`\n    position: absolute;\n    color: ${iconColor};\n    inset-inline-end: calc(1.5 * ${theme.components.input.padding});\n    /* stylelint-disable unit-allowed-list */\n    inset-block-start: calc(0.5 * (${theme.components.input.height} - max(1.125rem, 14px)));\n\n    @media (pointer: coarse) {\n      inset-block-start: calc(\n        0.5 * (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px))\n      );\n    }\n    /* stylelint-enable unit-allowed-list */\n  `;\n});\n\nStyledFilterIcon.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgBhD,OAAO,KAAK,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;;;;AAwP7E,wBAAyD"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgBhD,OAAO,KAAK,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;;;;AA4P7E,wBAAyD"}

package/lib/components/Menu/MenuItem.js

@@ -34,7 +34,7 @@ const AncestorPath = ({ ancestors = [] }) => {
             return (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'secondary', children: label }), i < arr.length - 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', children: _jsx(Icon, { name: `caret-${end}` }) }), truncatedPath && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', children: "\u2026" }), _jsx(Text, { variant: 'secondary', children: _jsx(Icon, { name: `caret-${end}` }) })] }))] }))] }, ancestor.id));
         }) }));
 };
-const MenuItem = ({ testId, id, primary, secondary, ancestors, visual, count, items, selected, partial, href, tooltip, onClick, onExpand, disabled, role = 'menuitem', ...restProps }) => {
+const MenuItem = ({ testId, id, primary, secondary, ancestors, visual: visualProp, count, items, selected, partial, href, tooltip, onClick, onExpand, disabled, role = 'menuitem', ...restProps }) => {
     const t = useI18n();
     const { mode, onItemClick, itemLayout, accent, variant: menuVariant, setFocusDescendant, getScopedItemId, arrowNavigationUnsupported } = useContext(MenuContext);
     const testIds = useTestIds(testId, getMenuItemTestIds);
@@ -67,6 +67,7 @@ const MenuItem = ({ testId, id, primary, secondary, ancestors, visual, count, it
     }
     const secondaryContent = ancestors ? (_jsx(AncestorPath, { ancestors: ancestors })) : (secondary && _jsx(MetaList, { items: secondary, id: secondaryId }));
     const [summaryItemRef, setSummaryItemRef] = useElement();
+    const visual = (_jsxs(_Fragment, { children: [selectionMode && (!items || selectableParent) && !disabled && (_jsx(StyledCheckMarkIcon, { name: 'check' })), visualProp] }));
     const summaryItem = (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { ref: setSummaryItemRef, primary: accentedPrimary || (!items ? _jsx(Text, { children: primary }) : primary), secondary: secondaryContent, layout: itemLayout, visual: visual, actions: items || count ? (_jsxs(Flex, { container: { gap: 1, alignItems: 'center', justify: 'center' }, children: [count !== undefined && (_jsx(Count, { id: itemCountId, "aria-label": t('menu_item_count', [count]), children: count })), items && _jsx(DrillDown, { expandHandler: selectableParent ? expandHandler : undefined })] })) : undefined, container: {
                     colGap: 1
                 } }), tooltip && (_jsx(Tooltip, { target: summaryItemRef, hideDelay: 'none', showDelay: 'short', children: tooltip }))] }));
@@ -95,14 +96,14 @@ const MenuItem = ({ testId, id, primary, secondary, ancestors, visual, count, it
             idString = '';
         return idString;
     }, [items, secondary, itemCountId, secondaryId]);
-    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { alignItems: 'center', justify: 'between', gap: 1 }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": ariaDescribedBy, role: role, "aria-disabled": disabled, "data-expand": !!items, itemLayout: itemLayout, tabIndex: -1, onMouseDown: (e) => {
+    return (_jsx(Flex, { "data-testid": testIds.root, ...restProps, container: { alignItems: 'center', justify: 'between', gap: 1 }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": ariaDescribedBy, role: role, "aria-disabled": disabled, "data-expand": !!items, itemLayout: itemLayout, tabIndex: -1, onMouseDown: (e) => {
             e.preventDefault();
         }, onClick: (e) => {
             if (disabled) {
                 return;
             }
             return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);
-        }, onMouseEnter: menuVariant === 'flyout' ? expandHandler : undefined, href: href, mode: mode, isParentItem: !!items, "aria-selected": selectionMode && (!items || selectableParent) ? !!selected : undefined, selectableParent: selectableParent, children: [selectionMode && (!items || selectableParent) && !disabled && (_jsx(StyledCheckMarkIcon, { name: 'check' })), href && !selectionMode ? (_jsx(BareButton, { href: href, tabIndex: '-1', children: summaryItem })) : (summaryItem)] }));
+        }, onMouseEnter: menuVariant === 'flyout' ? expandHandler : undefined, href: href, mode: mode, isParentItem: !!items, "aria-selected": selectionMode && (!items || selectableParent) ? !!selected : undefined, selectableParent: selectableParent, children: href && !selectionMode ? (_jsx(BareButton, { href: href, tabIndex: '-1', children: summaryItem })) : (summaryItem) }));
 };
 export default withTestIds(MenuItem, getMenuItemTestIds);
 //# sourceMappingURL=MenuItem.js.map