@pega/cosmos-react-core 9.0.0-build.14.1 → 9.0.0-build.14.11

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":";;AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACN,OAAO,EACP,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAG/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AAEjE,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AAOpE,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,+BAA+B,EAC/B,eAAe,EACf,yBAAyB,EACzB,gCAAgC,EAChC,+BAA+B,EAChC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;AAElE,MAAM,cAAc,GAAqB,KAAK,CAAC,EAAE;IAC/C,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAgC,EAAE,EAAE;QACnC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,OAAO,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC3B,CAAC,EAAE,OAAO,CAAC,CAAC;IAEZ,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,eAAC,iBAAiB,OAAK,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO;QAC1F,MAAC,UAAU,IACT,EAAE,EAAE,GAAG,EACP,GAAG,EAAE,OAAO,mBACG,CAAC,SAAS,mBACV,GAAG,GAAG,OAAO,gBAChB,OAAO,EACnB,OAAO,EAAE,eAAe,aAEvB,MAAM,IAAI,KAAC,oBAAoB,cAAE,MAAM,GAAwB,EAE/D,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,aAC3D,yBAAO,OAAO,GAAQ,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAQ,IACvC,CACR,CAAC,CAAC,CAAC,CACF,yBAAO,OAAO,GAAQ,CACvB,EAEA,QAAQ,KAAK,MAAM,IAAI,KAAC,+BAA+B,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,IACtE;QAGb,KAAC,cAAc,IACb,EAAE,EAAE,GAAG,GAAG,OAAO,EACjB,UAAU,QACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,OAAO,IAAI,SAAS,GAChC,CACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAyB,CAAC,EACvD,MAAM,EACN,OAAO,EACP,SAAS,EACT,iBAAiB,EACjB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,SAAS,EACT,OAAO,EACP,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,iBAAiB,EAAE,cAAc,EACjC,cAAc,EAAE,WAAW,EAC3B,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC;IACpD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,QAAQ,EAAE,EAClB,EACF,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,QAAQ,GACZ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/F,MAAM,SAAS,GAMX;QACF,OAAO,EAAE,CAAC,CAAqE,EAAE,EAAE;YACjF,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;QACD,IAAI;KACL,CAAC;IAEF,IAAI,SAAuD,CAAC;IAC5D,IAAI,SAAS,EAAE,CAAC;QACd,SAAS,GAAG;YACV;gBACE,OAAO,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,CAAC;gBACnC,OAAO;aACR;YACD;gBACE,OAAO,EAAE,CAAC,CAAC,cAAc,CAAC;gBAC1B,OAAO,EAAE,SAAS;aACnB;SACF,CAAC;IACJ,CAAC;IAED,IAAI,SAAsB,CAAC;IAE3B,IAAI,IAAI,EAAE,CAAC;QACT,SAAS,GAAG,IAAI,CAAC;IACnB,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,UAAU,CAAC;IACzB,CAAC;IAED,MAAM,wBAAwB,GAAG,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;YACxB,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YACtD,UAAU,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC;QACD,IAAI,OAAO,IAAI,UAAU,IAAI,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,cAAc,CAAC;YACtF,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAE3B,OAAO,CACL,eAAC,iBAAiB,OAAK,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB;QAC7F,KAAC,yBAAyB,IACxB,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,OAAO,EAC7D,KAAK,EAAE,OAAO,EACd,eAAe,EAAE,WAAW,EAC5B,KAAK,EAAE,OAAO,IAAI,KAAK,IAAI,SAAS,EACpC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,YAE1B,MAAC,SAAS,OACJ,SAAS,EACb,GAAG,EAAE,WAAW,KACZ,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,qBACpD,GAAG,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,cAAc,IAAI,EAAE,EAAE,KACtF,CAAC,wBAAwB,IAAI;oBAC/B,eAAe,EAAE,MAAM;oBACvB,eAAe,EAAE,SAAS,KAAK,MAAM;iBACtC,CAAC,kBACY,WAAW,aAExB,YAAY,IAAI,CACf,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,yBAAyB,YAE5B,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GAC7B,CACR,EACA,MAAM,IAAI,CACT,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC5C,EAAE,EAAE,gCAAgC,EACpC,SAAS,EAAE,WAAW,KAAK,MAAM,EACjC,OAAO,EAAE,OAAO,aAEhB,KAAC,oBAAoB,cAAE,MAAM,GAAwB,EACpD,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAChC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,iBAAiB,GAAQ,CACrD,EACA,QAAQ,IAAI,QAAQ,KAAK,QAAQ,IAAI,CACpC,KAAC,+BAA+B,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,CAC1D,IACI,CACR,EAEA,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACvD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAC9C,EAAE,EAAC,MAAM,aAET,eAAM,EAAE,EAAE,SAAS,YAAG,OAAO,GAAQ,EACrC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAQ,IACvC,CACR,CAAC,CAAC,CAAC,CACF,eAAM,EAAE,EAAE,SAAS,YAAG,OAAO,GAAQ,CACtC,EAEA,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,QAAQ,KAAK,MAAM,IAAI,CAAC,YAAY,IAAI,CAChE,KAAC,+BAA+B,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,CAC1D,IACS,GACc;QAE3B,SAAS,IAAI,OAAO,IAAI,CACvB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,cAAc,CAAC,YAE7B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV;QAEA,QAAQ,IAAI;QACX,mEAAmE;QACnE,KAAC,cAAc,IAAC,UAAU,QAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,CAAC,OAAO,IAAI,aAAa,GAAI,CAC7F,CACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAqB,CAAC,EACxC,KAAK,GAAG,EAAE,EACV,UAAU,EACV,EAAE,EACF,SAAS,EACT,YAAY,EACZ,YAAY,EACb,EAAE,EAAE;IACH,IAAI,SAAS,GAAgB,aAAa,CAAC;IAC3C,IAAI,aAA0B,CAAC;IAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEhD,IAAI,QAAQ,GAMR;QACF,SAAS,EAAE,CAAC,CAAC,SAAS;KACvB,CAAC;IAEF,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,GAAG,QAAQ,EAAE,CAAC;IAEf,IAAI,UAAU,EAAE,CAAC;QACf,QAAQ,GAAG;YACT,EAAE,EAAE,cAAc;YAClB,WAAW,EAAE,IAAI;YACjB,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK;YACtF,GAAG,QAAQ;SACZ,CAAC;QAEF,SAAS,GAAG,mBAAmB,CAAC;IAClC,CAAC;IAED,OAAO,CACL,KAAC,SAAS,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAM,QAAQ,YAClE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,IAAI,cAAc,CAAC,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC;YAEtC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpE,aAAa,GAAG,cAAc,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,aAAa,GAAG,kBAAkB,CAAC;YACrC,CAAC;YAED,OAAO,CACL,KAAC,aAAa,IAEZ,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,kBACZ,IAAI,CAAC,cAAc,CAAC,EAClC,YAAY,EAAE,YAAY,KACtB,IAAI,IALH,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,CAM5B,CACH,CAAC;QACJ,CAAC,CAAC,GACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","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/Card/CardHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM7D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAO9E,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yHAgC3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuB/D,CAAC;AAGH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM7D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAO9E,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yHAuC3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuB/D,CAAC;AAGH,eAAe,UAAU,CAAC"}

package/lib/components/Card/CardHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { StyledTabs } from '../Tabs/Tabs.styles';
+import { StyledAllTabsWrapper, StyledTabs } from '../Tabs/Tabs.styles';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import { StyledPopover } from '../Popover';
@@ -13,23 +13,30 @@ export const StyledCardHeader = styled.header(({ theme, onClick }) => {
     ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {
       padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
 
-      &:has(${StyledTabs}:first-child) {
+      &:has(${StyledTabs}:first-child),
+      &:has(${StyledAllTabsWrapper}:first-child) {
         padding-block-start: 0;
       }
 
-      > ${StyledTabs} {
+      &:has(+ [role='tabpanel']) {
+        padding-block-end: 0;
+      }
+
+      > ${StyledTabs}, > ${StyledAllTabsWrapper} {
         min-inline-size: calc(100% + ${theme.components.card.padding} * 4);
         margin-inline-start: calc(${theme.components.card.padding} * -2);
       }
 
       + ${StyledCardContent} {
         padding-block-start: 0;
+
         ${StyledProgressBackdrop} {
           border-end-start-radius: ${theme.components.card['border-radius']};
           border-end-end-radius: ${theme.components.card['border-radius']};
         }
 
         /* Plain selector is used instead of StyledTabPanel due to cyclic dependency. */
+
         > [role='tabpanel'] {
           padding-block-start: 0;
         }

package/lib/components/Card/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;MACN,aAAa,aAAa,UAAU,IAAI,UAAU;4BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;cAEvE,UAAU;;;;UAId,UAAU;uCACmB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;oCAChC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;UAGvD,iBAAiB;;UAEjB,sBAAsB;qCACK,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;mCACxC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;UAU/D,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;;;GAG/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAoC,EACrE,GAA2B;IAE3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,KAChB,SAAS,EACb,GAAG,EAAE,GAAG,YAEP,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACzD,QAAQ,GACJ,EACP,wBAAM,OAAO,GAAO,IACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { StyledTabs } from '../Tabs/Tabs.styles';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { StyledPopover } from '../Popover';\nimport { StyledProgressBackdrop } from '../Progress';\n\nimport { StyledCard } from './Card';\nimport { StyledCardContent } from './CardContent';\n\nexport interface CardHeaderProps extends BaseProps {\n  /** The Card header content. */\n  children: ReactNode;\n  /** Action Buttons that will render within the header. */\n  actions?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCardHeader = styled.header<CardHeaderProps>(({ theme, onClick }) => {\n  return css`\n    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      &:has(${StyledTabs}:first-child) {\n        padding-block-start: 0;\n      }\n\n      > ${StyledTabs} {\n        min-inline-size: calc(100% + ${theme.components.card.padding} * 4);\n        margin-inline-start: calc(${theme.components.card.padding} * -2);\n      }\n\n      + ${StyledCardContent} {\n        padding-block-start: 0;\n        ${StyledProgressBackdrop} {\n          border-end-start-radius: ${theme.components.card['border-radius']};\n          border-end-end-radius: ${theme.components.card['border-radius']};\n        }\n\n        /* Plain selector is used instead of StyledTabPanel due to cyclic dependency. */\n        > [role='tabpanel'] {\n          padding-block-start: 0;\n        }\n      }\n\n      &:hover {\n        ${onClick ? 'cursor: pointer;' : undefined}\n      }\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nconst CardHeader: ForwardRefForwardPropsComponent<CardHeaderProps> = forwardRef(function CardHeader(\n  { children, actions, ...restProps }: PropsWithoutRef<CardHeaderProps>,\n  ref: CardHeaderProps['ref']\n) {\n  return (\n    <Flex\n      container={{ alignItems: 'center', justify: 'between' }}\n      as={StyledCardHeader}\n      {...restProps}\n      ref={ref}\n    >\n      {actions ? (\n        <>\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }}>\n            {children}\n          </Flex>\n          <div>{actions}</div>\n        </>\n      ) : (\n        children\n      )}\n    </Flex>\n  );\n});\n\nCardHeader.displayName = 'CardHeader';\nexport default CardHeader;\n"]}
+{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;MACN,aAAa,aAAa,UAAU,IAAI,UAAU;4BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;cAEvE,UAAU;cACV,oBAAoB;;;;;;;;UAQxB,UAAU,OAAO,oBAAoB;uCACR,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;oCAChC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;UAGvD,iBAAiB;;;UAGjB,sBAAsB;qCACK,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;mCACxC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;UAW/D,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;;;GAG/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAoC,EACrE,GAA2B;IAE3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,KAChB,SAAS,EACb,GAAG,EAAE,GAAG,YAEP,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACzD,QAAQ,GACJ,EACP,wBAAM,OAAO,GAAO,IACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { StyledAllTabsWrapper, StyledTabs } from '../Tabs/Tabs.styles';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { StyledPopover } from '../Popover';\nimport { StyledProgressBackdrop } from '../Progress';\n\nimport { StyledCard } from './Card';\nimport { StyledCardContent } from './CardContent';\n\nexport interface CardHeaderProps extends BaseProps {\n  /** The Card header content. */\n  children: ReactNode;\n  /** Action Buttons that will render within the header. */\n  actions?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCardHeader = styled.header<CardHeaderProps>(({ theme, onClick }) => {\n  return css`\n    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      &:has(${StyledTabs}:first-child),\n      &:has(${StyledAllTabsWrapper}:first-child) {\n        padding-block-start: 0;\n      }\n\n      &:has(+ [role='tabpanel']) {\n        padding-block-end: 0;\n      }\n\n      > ${StyledTabs}, > ${StyledAllTabsWrapper} {\n        min-inline-size: calc(100% + ${theme.components.card.padding} * 4);\n        margin-inline-start: calc(${theme.components.card.padding} * -2);\n      }\n\n      + ${StyledCardContent} {\n        padding-block-start: 0;\n\n        ${StyledProgressBackdrop} {\n          border-end-start-radius: ${theme.components.card['border-radius']};\n          border-end-end-radius: ${theme.components.card['border-radius']};\n        }\n\n        /* Plain selector is used instead of StyledTabPanel due to cyclic dependency. */\n\n        > [role='tabpanel'] {\n          padding-block-start: 0;\n        }\n      }\n\n      &:hover {\n        ${onClick ? 'cursor: pointer;' : undefined}\n      }\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nconst CardHeader: ForwardRefForwardPropsComponent<CardHeaderProps> = forwardRef(function CardHeader(\n  { children, actions, ...restProps }: PropsWithoutRef<CardHeaderProps>,\n  ref: CardHeaderProps['ref']\n) {\n  return (\n    <Flex\n      container={{ alignItems: 'center', justify: 'between' }}\n      as={StyledCardHeader}\n      {...restProps}\n      ref={ref}\n    >\n      {actions ? (\n        <>\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }}>\n            {children}\n          </Flex>\n          <div>{actions}</div>\n        </>\n      ) : (\n        children\n      )}\n    </Flex>\n  );\n});\n\nCardHeader.displayName = 'CardHeader';\nexport default CardHeader;\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts

@@ -53,6 +53,9 @@ export declare const StyledGroupContainer: import("styled-components").StyledCom
     collapsed?: boolean;
     border?: boolean;
 }, never>;
+export declare const StyledDescription: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../HTML").HTMLProps> & {
+    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
 declare const FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps>;
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.d.ts.map

package/lib/components/FieldGroup/FieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAY7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAgCJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB,gKAAiB,CAAC;AAEhD,eAAO,MAAM,uBAAuB,gKAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAA4B,OAAO;aAAW,OAAO;SA+BrF,CAAC;AAiCF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuF/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAY7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AAgCJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB,gKAAiB,CAAC;AAEhD,eAAO,MAAM,uBAAuB,gKAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAA4B,OAAO;aAAW,OAAO;SA+BrF,CAAC;AAiCF,eAAO,MAAM,iBAAiB;;uDAI5B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAyF/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -105,10 +105,16 @@ StyledGroupContainer.defaultProps = defaultThemeProp;
 const FieldGroupLegend = ({ name, contextualLabel, children, collapsed, actions, additionalInfo }) => {
     return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledFieldHeader, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: contextualLabel || name, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions, contextualLabel: contextualLabel })] }) }));
 };
+export const StyledDescription = styled(HTML)(({ theme }) => {
+    return css `
+    max-width: ${theme.base['content-width'].xl};
+  `;
+});
+StyledDescription.defaultProps = defaultThemeProp;
 const FieldGroup = forwardRef(function FieldGroup({ children, description, name, contextualLabel, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, ...restProps }, ref) {
     const t = useI18n();
     const uid = useUID();
-    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
+    const descAndChildren = (_jsxs(StyledFieldGroupContent, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [description && (_jsx(StyledDescription, { id: `${uid}-description`, forwardedAs: 'p', content: description })), _jsx("div", { children: children })] }));
     return (_jsx(StyledGroupContainer, { border: variant === 'form-group', collapsed: collapsed, children: _jsxs(StyledFieldGroup, { "aria-label": contextualLabel || name, "aria-describedby": description ? `${uid}-description` : undefined, as: name ? 'fieldset' : 'div', ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, contextualLabel: contextualLabel, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed?.();
                         }, "aria-expanded": !collapsed, "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)``;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n      <div>{children}</div>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Provides a contextual label for the name. */\n        contextualLabel?: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        contextualLabel?: never;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n  contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)``;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  contextualLabel,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo\n              heading={additionalInfo.heading}\n              contextualLabel={contextualLabel || name}\n            >\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nexport const StyledDescription = styled(HTML)(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].xl};\n  `;\n});\n\nStyledDescription.defaultProps = defaultThemeProp;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    name,\n    contextualLabel,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {description && (\n        <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n      )}\n      <div>{children}</div>\n    </StyledFieldGroupContent>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n      <StyledFieldGroup\n        aria-label={contextualLabel || name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        as={name ? 'fieldset' : 'div'}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n            contextualLabel={contextualLabel}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n                  contextualLabel || name\n                ])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\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;SAiM3B,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"}