@pega/cosmos-react-core 8.8.0 → 9.0.0-build.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAevD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA4G9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAgBvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiH9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -6,11 +6,13 @@ import SearchInput from '../SearchInput';
 import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { ThemeOverride } from '../Configuration';
+import useThemeMode from '../../hooks/useThemeMode';
 import AppShellOperator from './Operator';
 import ContextSwitcher from './ContextSwitcher';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator, StyledAppHeaderLogo } from './AppHeader.styles';
 import AppShellContext from './AppShellContext';
 import { getHeaderTheme } from './style-utils';
+import ThemeSwitcher from './ThemeSwitcher';
 const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, imageAltText, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
@@ -26,10 +28,11 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
             setSearchContainerEl(null);
         }
     }, [searchPage, searchContainer, setSearchContainerEl]);
+    const { themeMode, onThemeModeChange } = useThemeMode();
     let appInfoAs = 'div';
     if (href)
         appInfoAs = 'a';
-    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [(fullImageSrc || imageSrc) && (_jsx(StyledAppHeaderLogo, { children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
+    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [(fullImageSrc || imageSrc) && (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledAppHeaderLogo, children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            {(fullImageSrc || imageSrc) && (\n              <StyledAppHeaderLogo>\n                <Image src={fullImageSrc || imageSrc} alt={imageAltText ?? t('application_logo')} />\n              </StyledAppHeaderLogo>\n            )}\n            <StyledAppHeaderText\n              as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n              variant='primary'\n            >\n              {appName}\n            </StyledAppHeaderText>\n            {portalName && (\n              <StyledAppHeaderText\n                as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                variant='secondary'\n              >\n                {portalName}\n              </StyledAppHeaderText>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n          name={operator.name}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\nimport useThemeMode from '../../hooks/useThemeMode';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\nimport ThemeSwitcher from './ThemeSwitcher';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  const { themeMode, onThemeModeChange } = useThemeMode();\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            {(fullImageSrc || imageSrc) && (\n              <Flex container={{ alignItems: 'center' }} as={StyledAppHeaderLogo}>\n                <Image src={fullImageSrc || imageSrc} alt={imageAltText ?? t('application_logo')} />\n              </Flex>\n            )}\n            <StyledAppHeaderText\n              as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n              variant='primary'\n            >\n              {appName}\n            </StyledAppHeaderText>\n            {portalName && (\n              <StyledAppHeaderText\n                as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                variant='secondary'\n              >\n                {portalName}\n              </StyledAppHeaderText>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n        {onThemeModeChange && (\n          <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n        )}\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n          name={operator.name}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\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;AAY/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAoDhE,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAgMhD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAY/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAmDhE,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAgMhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/NavigationListItemWrapper.js

@@ -12,12 +12,11 @@ import { calculateFontSize } from '../../styles';
 import AppShellContext from './AppShellContext';
 import { navContrastColors } from './style-utils';
 const StyledNavigationPopover = styled.div(({ theme }) => {
-    const navBg = theme.components['app-shell'].nav.background;
-    const { hoverBg, foreground } = navContrastColors(theme);
+    const { hoverBg, foreground, backgroundColor } = navContrastColors(theme);
     const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;
     return css `
     display: flex;
-    background: ${navBg};
+    background: ${backgroundColor};
 
     ${StyledMenu} {
       display: flex;
@@ -30,7 +29,7 @@ const StyledNavigationPopover = styled.div(({ theme }) => {
 
     &,
     ${StyledMenuListContainer} {
-      background: ${navBg};
+      background: ${backgroundColor};
 
       header {
         color: ${foreground};

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 { FC, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent } 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(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n  return css`\n    display: flex;\n    background: ${navBg};\n\n    ${StyledMenu} {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ${StyledMenuListWrapper} {\n      overflow: auto;\n    }\n\n    &,\n    ${StyledMenuListContainer} {\n      background: ${navBg};\n\n      header {\n        color: ${foreground};\n        border-bottom: none;\n        opacity: 0.7;\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    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\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      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    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('blur', () => closePopover(false));\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  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                  items={items.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":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/F,OAAO,GAAG,CAAA;;kBAEM,eAAe;;MAE3B,UAAU;;;;;MAKV,qBAAqB;;;;;MAKrB,uBAAuB;oBACT,eAAe;;;iBAGlB,UAAU;;;;;yBAKF,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;uBACxC,eAAe;;;;;MAKhC,uBAAuB;eACd,UAAU;;;;;4BAKG,OAAO;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,eAAe,GAAgC,KAAK,CAAC,EAAE;IAC3D,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,KAAK,EACL,YAAY,EACZ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC/E,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,MAAM,EAAiB,CAAC;IAEnD,MAAM,YAAY,GAAG,CAAC,eAAwB,IAAI,EAAE,EAAE;QACpD,IAAI,WAAW,EAAE,CAAC;YAChB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,IAAI,YAAY,EAAE,CAAC;gBACjB,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACnC,CAAC;YACD,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gBACzC,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,mBAAmB,EAAE,CAAC;YACxB,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,cAAc,CAAC,OAAO,IAAI,mBAAmB,EAAE,CAAC;YAClD,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,IAAI,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,CAAC;gBAC5B,IAAI,CAAC,OAAO,EAAE,CAAC;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC;gBACD,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW;oBAAE,cAAc,CAAC,IAAI,CAAC,CAAC;qBAC9C,CAAC;oBACJ,UAAU,CAAC,GAAG,EAAE;wBACd,YAAY,CAAC,KAAK,CAAC,CAAC;oBACtB,CAAC,EAAE,CAAC,CAAC,CAAC;gBACR,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAChC,cAAc,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gBACzC,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;YACpC,CAAC;YAED,MAAM,GAAG,GAAI,CAAC,CAAC,aAAoC,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC;YAE3E,uEAAuE;YACvE,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjD,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACN,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBAClD,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;wBAC5B,YAAY,CAAC,KAAK,CAAC,CAAC;oBACtB,CAAC;gBACH,CAAC,EAAE,IAAI,CAAC,CAAC;YACX,CAAC;QACH,CAAC,CAAC;QAEF,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC5D,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7E,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChE,IAAI,mBAAmB,EAAE,CAAC;YACxB,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YACjE,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC/D,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnE,IAAI,mBAAmB,EAAE,CAAC;gBACxB,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;gBACpE,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;YACzE,CAAC;YACD,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gBACzC,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAE1D,OAAO,CACL,8BACG,QAAQ,EACR,CAAC,OAAO,IAAI,CACX,8BACG,CAAC,WAAW,IAAI,CACf,KAAC,OAAO,IACN,MAAM,EAAE,eAAe,CAAC,OAAO,EAC/B,SAAS,EAAE,GAAG,EACd,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,MAAM,YAEf,YAAY,GACL,CACX,EACA,WAAW,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAC3C,KAAC,OAAO,IACN,MAAM,EAAE,eAAe,CAAC,OAAO,EAC/B,SAAS,EAAE,GAAG,GAAG,QAAQ,EACzB,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,uBAAuB,EAC3B,KAAK,QACL,SAAS,EACP,QAAQ;4BACN,CAAC,CAAC;gCACE;oCACE,IAAI,EAAE,iBAAiB;oCACvB,OAAO,EAAE;wCACP,OAAO,EAAE;4CACP,GAAG,EAAE,QAAQ,CAAC,YAAY,GAAG,CAAC;4CAC9B,KAAK,EAAE,CAAC;4CACR,MAAM,EAAE,CAAC;4CACT,IAAI,EAAE,CAAC;yCACR;qCACF;iCACF;6BACF;4BACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,CAAC,CAAkC,EAAE,EAAE;4BAC9C,CAAC,CAAC,eAAe,EAAE,CAAC;wBACtB,CAAC,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,YACtE,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,QAAQ,EAChB,cAAc,EAAE,eAAe,CAAC,OAAO,IAAI,SAAS,EACpD,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gCACtB,OAAO;oCACL,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAW;oCACzC,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAW;oCAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;oCACf,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wCAChB,CAAC,CAAC,eAAe,EAAE,CAAC;wCACpB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;wCAClB,cAAc,CAAC,KAAK,CAAC,CAAC;oCACxB,CAAC;iCACF,CAAC;4BACJ,CAAC,CAAC,EACF,MAAM,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EACzC,YAAY,EAAE,mBAAmB,EACjC,YAAY,EAAE,mBAAmB,GACjC,CACH,GACO,CACX,IACA,CACJ,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useContext, useEffect, useRef, useState } from 'react';\nimport type { FC, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent } 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(({ 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        opacity: 0.7;\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    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\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      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    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('blur', () => closePopover(false));\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  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                  items={items.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/AppShell/ThemeSwitcher.d.ts

@@ -0,0 +1,9 @@
+import type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp, TestIdProp } from '../../types';
+import { type ConfigurationProps } from '../Configuration';
+export interface ThemeSwitcherProps extends BaseProps, NoChildrenProp, TestIdProp {
+    themeMode: NonNullable<ConfigurationProps['themeMode']>;
+    onThemeModeChange: (mode: ThemeSwitcherProps['themeMode']) => void;
+}
+declare const ThemeSwitcher: ForwardRefForwardPropsComponent<ThemeSwitcherProps>;
+export default ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAa1E,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC/E,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;IACxD,iBAAiB,EAAE,CAAC,IAAI,EAAE,kBAAkB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACpE;AAED,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAgEtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/AppShell/ThemeSwitcher.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo } from 'react';
+import { menuHelpers } from '../Menu';
+import { useI18n, useTestIds } from '../../hooks';
+import Flex from '../Flex';
+import { ThemeOverride } from '../Configuration';
+import MenuButton from '../MenuButton';
+import { withTestIds } from '../../utils';
+import Icon from '../Icon';
+import { getThemeSwitcherTestIds } from './ThemeSwitcher.test-ids';
+const ThemeModeIconMap = {
+    light: 'sun',
+    dark: 'moon',
+    system: 'circle-mixed-left'
+};
+const ThemeSwitcher = withTestIds(forwardRef(function ThemeSwitcher({ testId, themeMode, onThemeModeChange }) {
+    const t = useI18n();
+    const testIds = useTestIds(testId, getThemeSwitcherTestIds);
+    const [items, setItems] = useState(() => [
+        {
+            id: 'light',
+            primary: 'Light',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.light, set: 'budicon' }),
+            selected: themeMode === 'light'
+        },
+        {
+            id: 'dark',
+            primary: 'Dark',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.dark, set: 'budicon' }),
+            selected: themeMode === 'dark'
+        },
+        {
+            id: 'system',
+            primary: 'System',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.system, set: 'budicon' }),
+            selected: !themeMode || themeMode === 'system'
+        }
+    ]);
+    const handleMenuItemClick = (id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+        onThemeModeChange?.(id);
+    };
+    const selectedThemeIcon = useMemo(() => {
+        const selected = menuHelpers.getSelected(items)[0];
+        return selected
+            ? ThemeModeIconMap[selected.id]
+            : ThemeModeIconMap.system;
+    }, [items]);
+    return (_jsx(Flex, { container: {
+            alignItems: 'center'
+        }, children: _jsx(ThemeOverride, { theme: { base: { 'icon-set': 'budicon' } }, children: _jsx(MenuButton, { text: t('theme_mode'), "data-testid": testIds.root, icon: selectedThemeIcon, iconOnly: true, variant: 'simple', menu: {
+                    mode: 'single-select',
+                    items,
+                    onItemClick: handleMenuItemClick
+                } }) }) }));
+}), getThemeSwitcherTestIds);
+export default ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.js","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { menuHelpers } from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport { useI18n, useTestIds } from '../../hooks';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  RefElement,\n  TestIdProp\n} from '../../types';\nimport Flex from '../Flex';\nimport { ThemeOverride, type ConfigurationProps } from '../Configuration';\nimport MenuButton from '../MenuButton';\nimport { withTestIds } from '../../utils';\nimport Icon from '../Icon';\n\nimport { getThemeSwitcherTestIds } from './ThemeSwitcher.test-ids';\n\nconst ThemeModeIconMap = {\n  light: 'sun',\n  dark: 'moon',\n  system: 'circle-mixed-left'\n} as const;\n\nexport interface ThemeSwitcherProps extends BaseProps, NoChildrenProp, TestIdProp {\n  themeMode: NonNullable<ConfigurationProps['themeMode']>;\n  onThemeModeChange: (mode: ThemeSwitcherProps['themeMode']) => void;\n}\n\nconst ThemeSwitcher: ForwardRefForwardPropsComponent<ThemeSwitcherProps> = withTestIds(\n  forwardRef<RefElement<ThemeSwitcherProps>, PropsWithoutRef<ThemeSwitcherProps>>(\n    function ThemeSwitcher({ testId, themeMode, onThemeModeChange }) {\n      const t = useI18n();\n      const testIds = useTestIds(testId, getThemeSwitcherTestIds);\n\n      const [items, setItems] = useState<MenuProps['items']>(() => [\n        {\n          id: 'light',\n          primary: 'Light',\n          visual: <Icon name={ThemeModeIconMap.light} set='budicon' />,\n          selected: themeMode === 'light'\n        },\n        {\n          id: 'dark',\n          primary: 'Dark',\n          visual: <Icon name={ThemeModeIconMap.dark} set='budicon' />,\n          selected: themeMode === 'dark'\n        },\n        {\n          id: 'system',\n          primary: 'System',\n          visual: <Icon name={ThemeModeIconMap.system} set='budicon' />,\n          selected: !themeMode || themeMode === 'system'\n        }\n      ]);\n\n      const handleMenuItemClick = (id: MenuItemProps['id']) => {\n        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n        onThemeModeChange?.(id as ThemeSwitcherProps['themeMode']);\n      };\n\n      const selectedThemeIcon = useMemo(() => {\n        const selected = menuHelpers.getSelected(items)[0];\n        return selected\n          ? ThemeModeIconMap[selected.id as keyof typeof ThemeModeIconMap]\n          : ThemeModeIconMap.system;\n      }, [items]);\n\n      return (\n        <Flex\n          container={{\n            alignItems: 'center'\n          }}\n        >\n          <ThemeOverride theme={{ base: { 'icon-set': 'budicon' } }}>\n            <MenuButton\n              text={t('theme_mode')}\n              data-testid={testIds.root}\n              icon={selectedThemeIcon}\n              iconOnly\n              variant='simple'\n              menu={{\n                mode: 'single-select',\n                items,\n                onItemClick: handleMenuItemClick\n              }}\n            />\n          </ThemeOverride>\n        </Flex>\n      );\n    }\n  ),\n  getThemeSwitcherTestIds\n);\n\nexport default ThemeSwitcher;\n"]}

package/lib/components/AppShell/ThemeSwitcher.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getThemeSwitcherTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
+//# sourceMappingURL=ThemeSwitcher.test-ids.d.ts.map

package/lib/components/AppShell/ThemeSwitcher.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,mGAA+C,CAAC"}

package/lib/components/AppShell/ThemeSwitcher.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getThemeSwitcherTestIds = createTestIds('theme-switcher', []);
+//# sourceMappingURL=ThemeSwitcher.test-ids.js.map

package/lib/components/AppShell/ThemeSwitcher.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.test-ids.js","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getThemeSwitcherTestIds = createTestIds('theme-switcher', [] as const);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAgBhF,eAAO,MAAM,iBAAiB,kKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;aAEZ,OAAO;qBACC,OAAO;SAyE3B,CAAC;AAIF,eAAO,MAAM,YAAY;;0FA6BvB,CAAC;;;;AAqFH,wBAAqD"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAgBhF,eAAO,MAAM,iBAAiB,kKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;aAEZ,OAAO;qBACC,OAAO;SAyE3B,CAAC;AAIF,eAAO,MAAM,YAAY;;0FA6BvB,CAAC;;;;AA+FH,wBAAqD"}

package/lib/components/Avatar/Avatar.js

@@ -114,9 +114,14 @@ StyledStatus.defaultProps = defaultThemeProp;
  * @param size
  */
 const getInitials = (name, size) => {
-    const words = name.split(' ');
-    const firstInitial = words[0][0];
-    return words.length === 1 || size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;
+    if (!name) {
+        return '';
+    }
+    if (size === 's') {
+        return name[0];
+    }
+    const words = name.split(/\s+/);
+    return `${words[0][0] ?? ''}${words[1]?.[0] ?? ''}`;
 };
 /**
  * Generally, avatars are used to distinguish between different operators and
@@ -124,7 +129,8 @@ const getInitials = (name, size) => {
  * can upload a custom avatar of their choice.
  */
 const Avatar = forwardRef(function Avatar(props, ref) {
-    const { testId, shape = 'circle', size = 'm', imageSrc, icon, name, status, onImageError, ...restProps } = props;
+    const { testId, shape = 'circle', size = 'm', imageSrc, icon, name: nameProp, status, onImageError, ...restProps } = props;
+    const name = nameProp.trim();
     const [hasBrokenImage, setHasBrokenImage] = useState();
     const t = useI18n();
     const testIds = useTestIds(testId, getAvatarTestIds);

package/lib/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: string;\n  /**\n   * Shape of the Avatar.\n   * @default 'circle'\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default 'm'\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5,\n  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n  height: fit-content;\n  width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    color,\n    backgroundColor,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        avatar: { 'background-color': avatarBackground },\n        icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n      }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackground;\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatarBackground\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      flex-shrink: 0;\n      background-color: ${bgColor};\n      color: ${iconColor};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      vertical-align: top;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n  size,\n  theme\n}) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  const words = name.split(' ');\n  const firstInitial = words[0][0];\n\n  return words.length === 1 || size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: ForwardRefForwardPropsComponent<AvatarProps> = forwardRef(function Avatar(\n  props: PropsWithoutRef<AvatarProps>,\n  ref: AvatarProps['ref']\n) {\n  const {\n    testId,\n    shape = 'circle',\n    size = 'm',\n    imageSrc,\n    icon,\n    name,\n    status,\n    onImageError,\n    ...restProps\n  } = props;\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAvatarTestIds);\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [imageSrc]);\n\n  const content = useMemo(() => {\n    if (icon) {\n      return <Icon name={icon} />;\n    }\n    if (imageSrc && !hasBrokenImage) {\n      return (\n        <StyledAvatarImage\n          src={imageSrc}\n          alt={name}\n          onError={(e: SyntheticEvent<HTMLImageElement>) => {\n            setHasBrokenImage(true);\n            onImageError?.(e);\n          }}\n          onLoad={() => {\n            setHasBrokenImage(false);\n          }}\n        />\n      );\n    }\n    return getInitials(name, size);\n  }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n  return (\n    <StyledAvatar\n      data-testid={testIds.root}\n      role='img'\n      hasSrc={!!imageSrc}\n      hasBrokenImage={hasBrokenImage}\n      shape={shape}\n      size={size}\n      ref={ref}\n      aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n      {...restProps}\n    >\n      {content}\n      {status === 'active' && <StyledStatus size={size} variant='success' />}\n    </StyledAvatar>\n  );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: string;\n  /**\n   * Shape of the Avatar.\n   * @default 'circle'\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default 'm'\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5,\n  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n  height: fit-content;\n  width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    color,\n    backgroundColor,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        avatar: { 'background-color': avatarBackground },\n        icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n      }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackground;\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatarBackground\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      flex-shrink: 0;\n      background-color: ${bgColor};\n      color: ${iconColor};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      vertical-align: top;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n  size,\n  theme\n}) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  if (!name) {\n    return '';\n  }\n\n  if (size === 's') {\n    return name[0];\n  }\n\n  const words = name.split(/\\s+/);\n\n  return `${words[0][0] ?? ''}${words[1]?.[0] ?? ''}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: ForwardRefForwardPropsComponent<AvatarProps> = forwardRef(function Avatar(\n  props: PropsWithoutRef<AvatarProps>,\n  ref: AvatarProps['ref']\n) {\n  const {\n    testId,\n    shape = 'circle',\n    size = 'm',\n    imageSrc,\n    icon,\n    name: nameProp,\n    status,\n    onImageError,\n    ...restProps\n  } = props;\n\n  const name = nameProp.trim();\n\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAvatarTestIds);\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [imageSrc]);\n\n  const content = useMemo(() => {\n    if (icon) {\n      return <Icon name={icon} />;\n    }\n    if (imageSrc && !hasBrokenImage) {\n      return (\n        <StyledAvatarImage\n          src={imageSrc}\n          alt={name}\n          onError={(e: SyntheticEvent<HTMLImageElement>) => {\n            setHasBrokenImage(true);\n            onImageError?.(e);\n          }}\n          onLoad={() => {\n            setHasBrokenImage(false);\n          }}\n        />\n      );\n    }\n    return getInitials(name, size);\n  }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n  return (\n    <StyledAvatar\n      data-testid={testIds.root}\n      role='img'\n      hasSrc={!!imageSrc}\n      hasBrokenImage={hasBrokenImage}\n      shape={shape}\n      size={size}\n      ref={ref}\n      aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n      {...restProps}\n    >\n      {content}\n      {status === 'active' && <StyledStatus size={size} variant='success' />}\n    </StyledAvatar>\n  );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}

package/lib/components/Banner/Banner.js

@@ -115,7 +115,7 @@ const prepareMessages = (messages, testId) => {
         if (typeof msg === 'string') {
             return [_jsx(BannerMessageItem, { label: msg })];
         }
-        if (msg.items) {
+        if (msg.items && msg.items.length > 0) {
             const { items, ...restMsg } = msg;
             const subMessages = prepareMessages(items, testId);
             return [_jsx(BannerMessageItem, { ...restMsg, testId: testId }), subMessages];

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, Fragment, useMemo, useImperativeHandle, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds } from '../../hooks';\nimport Flex from '../Flex';\nimport Text, { StyledText } from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as aiIcon from '../Icon/icons/polaris-solid.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\nimport { readableColor } from '../../styles';\n\nimport { getBannerTestIds } from './Banner.test-ids';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  diamondMinusIcon,\n  informationSolidIcon,\n  checkIcon,\n  aiIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\ntype Label =\n  | string\n  | {\n      text: string;\n      onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n      href?: string;\n    };\n\nexport interface BannerMessage {\n  label: Label | Label[];\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport type BannerProps = WithAttributes<\n  'div',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Controls the styling of the Banner. */\n      variant: 'urgent' | 'warning' | 'success' | 'info' | 'ai';\n      /** Custom heading text. Default varies by variant. */\n      headingText?: string;\n      /**\n       * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n       * @default 'h2'\n       */\n      headingTag?: HeadingTag;\n      /** Pass one or more descriptive messages to inform the user. */\n      messages: (string | BannerMessage)[];\n      /** Callback when user explicitly dismisses the Banner. */\n      onDismiss?: MouseEventHandler;\n      /** Ref that can be used to access the imperative handle. */\n      handle?: Ref<BannerHandleValue>;\n    }\n>;\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n      min-inline-size: 100%;\n      inline-size: 0;\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n\n      ${headingTag}${StyledText} {\n        word-break: break-word;\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2.125rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  TestIdProp & OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {\n  const testIds = useTestIds(testId, getBannerTestIds);\n\n  const labelArray = Array.isArray(label) ? label : [label];\n\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span data-testid={testIds.messageLabel}>\n        {labelArray.map((item, idx) =>\n          typeof item === 'string' ? (\n            // eslint-disable-next-line react/no-array-index-key\n            <Fragment key={idx}>{item}</Fragment>\n          ) : (\n            // eslint-disable-next-line react/no-array-index-key\n            <Button variant='link' href={item.href} onClick={item.onClick} key={idx}>\n              {item.text}\n            </Button>\n          )\n        )}\n      </span>\n      {description && (\n        <>\n          {' '}\n          <Text data-testid={testIds.messageDescription} variant='secondary'>\n            {description}\n          </Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button\n              data-testid={testIds.messageAction}\n              variant='link'\n              href={action.href}\n              onClick={action.onClick}\n              {...action}\n            >\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[],\n  testId: TestIdProp['testId']\n): ReactNode[] => {\n  return messages.flatMap(msg => {\n    if (typeof msg === 'string') {\n      return [<BannerMessageItem label={msg} />];\n    }\n\n    if (msg.items) {\n      const { items, ...restMsg } = msg;\n      const subMessages = prepareMessages(items, testId);\n      return [<BannerMessageItem {...restMsg} testId={testId} />, subMessages];\n    }\n\n    return [<BannerMessageItem {...msg} testId={testId} />];\n  });\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n    { testId, variant, headingText, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBannerTestIds);\n    const messagesToRender = useMemo(() => prepareMessages(messages, testId), [messages]);\n    const firstMessageHasChildren =\n      messages.length > 0 &&\n      typeof messages[0] === 'object' &&\n      Array.isArray(messages[0].items) &&\n      messages[0].items.length > 0;\n    const count = messages.length;\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    const bannerRef = useConsolidatedRef(ref);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n\n    let heading = headingText;\n    let icon: string;\n    let role: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading ??= t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading ??= t('warning');\n        icon = 'diamond-minus';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading ??= t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'ai':\n        heading ??= t('ai_generated');\n        icon = 'polaris-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading ??= t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        focus: () => {\n          // Empty timeout ensures that the banner will take focus after any other programmatic focus events\n          setTimeout(() => {\n            if (expandCollapseBtnRef.current) {\n              expandCollapseBtnRef.current.focus();\n            } else if (bannerRef.current) {\n              focusHeadingOrContainer(bannerRef.current, heading);\n            }\n          });\n        }\n      }),\n      []\n    );\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        headingTag={headingTag}\n        ref={bannerRef}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        {count === 1 && !firstMessageHasChildren && headingText === undefined ? (\n          <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n            <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n            <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n              {typeof messages[0] === 'string' ? (\n                <BannerMessageItem testId={testId} label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} testId={testId} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                data-testid={testIds.dismiss}\n                onClick={onDismiss}\n                label={t('dismiss')}\n                aria-label={t('banner_dismiss_button_label_a11y')}\n                variant='simple'\n                icon\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        ) : (\n          <StyledBannerContent expandable>\n            <Grid\n              as={StyledBannerHeader}\n              container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n            >\n              <Grid\n                data-testid={testIds.heading}\n                container={{\n                  cols: 'fit-content(100%) max-content',\n                  gap: 0.5,\n                  alignItems: 'center'\n                }}\n                item={{ area: 'heading', alignSelf: 'center' }}\n                as={Text}\n                forwardedAs={headingTag}\n                variant='h2'\n              >\n                {heading} <Count>{count}</Count>\n              </Grid>\n              <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n                <Button\n                  data-testid={testIds.expandCollapse}\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'collapse')}\n                  aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [heading])}\n                  aria-expanded={!collapsed}\n                  variant='simple'\n                  icon\n                  ref={expandCollapseBtnRef}\n                >\n                  <Icon name='caret-right' />\n                </Button>\n              </Grid>\n              <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n                {onDismiss && (\n                  <Button\n                    data-testid={testIds.dismiss}\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Grid>\n            </Grid>\n            <ExpandCollapse collapsed={collapsed}>\n              <StyledBannerMessageList items={messagesToRender} />\n            </ExpandCollapse>\n          </StyledBannerContent>\n        )}\n      </Grid>\n    );\n  }),\n  getBannerTestIds\n);\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, Fragment, useMemo, useImperativeHandle, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds } from '../../hooks';\nimport Flex from '../Flex';\nimport Text, { StyledText } from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as aiIcon from '../Icon/icons/polaris-solid.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\nimport { readableColor } from '../../styles';\n\nimport { getBannerTestIds } from './Banner.test-ids';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  diamondMinusIcon,\n  informationSolidIcon,\n  checkIcon,\n  aiIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\ntype Label =\n  | string\n  | {\n      text: string;\n      onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n      href?: string;\n    };\n\nexport interface BannerMessage {\n  label: Label | Label[];\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport type BannerProps = WithAttributes<\n  'div',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Controls the styling of the Banner. */\n      variant: 'urgent' | 'warning' | 'success' | 'info' | 'ai';\n      /** Custom heading text. Default varies by variant. */\n      headingText?: string;\n      /**\n       * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n       * @default 'h2'\n       */\n      headingTag?: HeadingTag;\n      /** Pass one or more descriptive messages to inform the user. */\n      messages: (string | BannerMessage)[];\n      /** Callback when user explicitly dismisses the Banner. */\n      onDismiss?: MouseEventHandler;\n      /** Ref that can be used to access the imperative handle. */\n      handle?: Ref<BannerHandleValue>;\n    }\n>;\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n      min-inline-size: 100%;\n      inline-size: 0;\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n\n      ${headingTag}${StyledText} {\n        word-break: break-word;\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2.125rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  TestIdProp & OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {\n  const testIds = useTestIds(testId, getBannerTestIds);\n\n  const labelArray = Array.isArray(label) ? label : [label];\n\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span data-testid={testIds.messageLabel}>\n        {labelArray.map((item, idx) =>\n          typeof item === 'string' ? (\n            // eslint-disable-next-line react/no-array-index-key\n            <Fragment key={idx}>{item}</Fragment>\n          ) : (\n            // eslint-disable-next-line react/no-array-index-key\n            <Button variant='link' href={item.href} onClick={item.onClick} key={idx}>\n              {item.text}\n            </Button>\n          )\n        )}\n      </span>\n      {description && (\n        <>\n          {' '}\n          <Text data-testid={testIds.messageDescription} variant='secondary'>\n            {description}\n          </Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button\n              data-testid={testIds.messageAction}\n              variant='link'\n              href={action.href}\n              onClick={action.onClick}\n              {...action}\n            >\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[],\n  testId: TestIdProp['testId']\n): ReactNode[] => {\n  return messages.flatMap(msg => {\n    if (typeof msg === 'string') {\n      return [<BannerMessageItem label={msg} />];\n    }\n\n    if (msg.items && msg.items.length > 0) {\n      const { items, ...restMsg } = msg;\n      const subMessages = prepareMessages(items, testId);\n      return [<BannerMessageItem {...restMsg} testId={testId} />, subMessages];\n    }\n\n    return [<BannerMessageItem {...msg} testId={testId} />];\n  });\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n    { testId, variant, headingText, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBannerTestIds);\n    const messagesToRender = useMemo(() => prepareMessages(messages, testId), [messages]);\n    const firstMessageHasChildren =\n      messages.length > 0 &&\n      typeof messages[0] === 'object' &&\n      Array.isArray(messages[0].items) &&\n      messages[0].items.length > 0;\n    const count = messages.length;\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    const bannerRef = useConsolidatedRef(ref);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n\n    let heading = headingText;\n    let icon: string;\n    let role: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading ??= t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading ??= t('warning');\n        icon = 'diamond-minus';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading ??= t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'ai':\n        heading ??= t('ai_generated');\n        icon = 'polaris-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading ??= t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        focus: () => {\n          // Empty timeout ensures that the banner will take focus after any other programmatic focus events\n          setTimeout(() => {\n            if (expandCollapseBtnRef.current) {\n              expandCollapseBtnRef.current.focus();\n            } else if (bannerRef.current) {\n              focusHeadingOrContainer(bannerRef.current, heading);\n            }\n          });\n        }\n      }),\n      []\n    );\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        headingTag={headingTag}\n        ref={bannerRef}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        {count === 1 && !firstMessageHasChildren && headingText === undefined ? (\n          <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n            <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n            <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n              {typeof messages[0] === 'string' ? (\n                <BannerMessageItem testId={testId} label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} testId={testId} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                data-testid={testIds.dismiss}\n                onClick={onDismiss}\n                label={t('dismiss')}\n                aria-label={t('banner_dismiss_button_label_a11y')}\n                variant='simple'\n                icon\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        ) : (\n          <StyledBannerContent expandable>\n            <Grid\n              as={StyledBannerHeader}\n              container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n            >\n              <Grid\n                data-testid={testIds.heading}\n                container={{\n                  cols: 'fit-content(100%) max-content',\n                  gap: 0.5,\n                  alignItems: 'center'\n                }}\n                item={{ area: 'heading', alignSelf: 'center' }}\n                as={Text}\n                forwardedAs={headingTag}\n                variant='h2'\n              >\n                {heading} <Count>{count}</Count>\n              </Grid>\n              <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n                <Button\n                  data-testid={testIds.expandCollapse}\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'collapse')}\n                  aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [heading])}\n                  aria-expanded={!collapsed}\n                  variant='simple'\n                  icon\n                  ref={expandCollapseBtnRef}\n                >\n                  <Icon name='caret-right' />\n                </Button>\n              </Grid>\n              <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n                {onDismiss && (\n                  <Button\n                    data-testid={testIds.dismiss}\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Grid>\n            </Grid>\n            <ExpandCollapse collapsed={collapsed}>\n              <StyledBannerMessageList items={messagesToRender} />\n            </ExpandCollapse>\n          </StyledBannerContent>\n        )}\n      </Grid>\n    );\n  }),\n  getBannerTestIds\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,wBAqWE"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,wBA6WE"}

package/lib/components/ComboBox/ComboBox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import Icon, { registerIcon } from '../Icon';
 import * as caretDownIcon from '../Icon/icons/caret-down.icon';
 import * as caretUpIcon from '../Icon/icons/caret-up.icon';
@@ -20,7 +20,7 @@ registerIcon(caretDownIcon, caretUpIcon);
 const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
 export default withTestIds(forwardRef(function ComboBox(props, ref) {
     const uid = useUID();
-    const { testId, additionalInfo, value, required, id = uid, label, labelHidden, info, status, readOnly, disabled, mode = 'single-select', selected, onChange, actions, onFocus, onBlur, onResolveSuggestion, onDropdownButtonClick: onDropdownButtonClickProp, onMenuOpen, onClick, onKeyDown, menu, className, ...restProps } = props;
+    const { testId, additionalInfo, value, required, id = uid, label, labelHidden, info, status, readOnly, disabled, mode = 'single-select', selected, onChange, actions, onFocus, onBlur, onResolveSuggestion, onDropdownButtonClick: onDropdownButtonClickProp, onMenuOpen, onClick, onKeyDown, menu, className, handle, ...restProps } = props;
     const testIds = useTestIds(testId, getComboBoxTestIds);
     const bodyRef = useRef(document.body);
     const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);
@@ -68,6 +68,11 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
         }
     }, [open]);
     useEscape(handleEscape, containerRef, [handleEscape]);
+    useImperativeHandle(handle, () => ({
+        focusInput: () => {
+            inputRef.current?.focus();
+        }
+    }));
     const onInputKeyDown = useCallback((e) => {
         if (!menu || readOnly)
             return;
@@ -151,7 +156,7 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
     // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.
     // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.
     const inputActions = (_jsxs(_Fragment, { children: [dropdownButton, actions] }));
-    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, "data-testid": label ? undefined : testIds.root, children: [_jsx(ComboBoxInput, { "data-testid": testIds.control, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-haspopup": 'listbox', "aria-describedby": ariaDescribedBy, className: createClassName('combo-box', className, { mode }), selected: selected?.items, spellCheck: false, id: id, readOnly: readOnly, disabled: disabled, onChange: onChange, value: value, mode: mode, status: status, onResolveSuggestion: onResolveSuggestion, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, onSelectedFocus: () => {
+    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, "data-testid": label ? undefined : testIds.root, children: [_jsx(ComboBoxInput, { "data-testid": testIds.control, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-haspopup": 'listbox', "aria-describedby": ariaDescribedBy, className: createClassName('combo-box', className, { status, mode }), selected: selected?.items, spellCheck: false, id: id, readOnly: readOnly, disabled: disabled, onChange: onChange, value: value, mode: mode, status: status, onResolveSuggestion: onResolveSuggestion, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, onSelectedFocus: () => {
                     toggleSelectedDescendantsActive(true);
                 }, onSelectedBlur: () => {
                     toggleSelectedDescendantsActive(false);
@@ -193,6 +198,6 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
                             selected?.onNew?.(clickedItem?.primary);
                         }
                     }, "aria-label": t('menu_option_list'), pauseDescendantEvaluation: pauseMenuDescendantEvaluation, arrowNavigationUnsupported: true })) })] }));
-    return (_jsxs(_Fragment, { children: [label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, additionalInfo: additionalInfo, children: Comp })) : (Comp), _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, "aria-hidden": true, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, "aria-hidden": true, children: t('combobox_search_instructions') }), _jsx(VisuallyHiddenText, { id: `${id}-multiselectDescription`, "aria-hidden": true, children: t('multiselect_instructions', [start]) })] }));
+    return (_jsxs(_Fragment, { children: [label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, additionalInfo: additionalInfo, children: Comp })) : (Comp), _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, "aria-hidden": true, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, "aria-hidden": true, children: t('combobox_search_instructions') }), _jsx(VisuallyHiddenText, { id: `${id}-multiselectDescription`, "aria-hidden": true, children: t('multiselect_instructions', [start]) })] }));
 }), getComboBoxTestIds);
 //# sourceMappingURL=ComboBox.js.map