@pega/cosmos-react-core 6.0.13 → 6.1.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;AAavD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwG9D,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;AAGhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAavD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAoG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect } from 'react';
 import Flex from '../Flex';
 import Image from '../Image';
 import SearchInput from '../SearchInput';
-import { useBreakpoint, useElement } from '../../hooks';
-import BareButton from '../Button/BareButton';
+import { useBreakpoint, useElement, useI18n } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import AppShellOperator from './Operator';
 import ContextSwitcher from './ContextSwitcher';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppHeader.styles';
 import AppShellContext from './AppShellContext';
 const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) {
+    const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
     const [searchContainer, setSearchContainer] = useElement();
     const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);
@@ -25,9 +25,7 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
     let appInfoAs = 'div';
     if (href)
         appInfoAs = 'a';
-    else if (onClick)
-        appInfoAs = BareButton;
-    return (_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: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }), isMediumOrAbove && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden ? 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' }, children: operator.avatar })] }));
+    return (_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: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: 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' }, 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 } 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 } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\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} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\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 isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n\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  else if (onClick) appInfoAs = BareButton;\n\n  return (\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={onClick}\n          target={target}\n        >\n          <Image src={fullImageSrc || imageSrc} alt='' aria-hidden='true' />\n          {isMediumOrAbove && (\n            <>\n              <StyledAppHeaderText\n                as={appNameHidden ? VisuallyHiddenText : 'span'}\n                variant='primary'\n              >\n                {appName}\n              </StyledAppHeaderText>\n              {portalName && (\n                <StyledAppHeaderText\n                  as={appNameHidden ? VisuallyHiddenText : 'span'}\n                  variant='secondary'\n                >\n                  {portalName}\n                </StyledAppHeaderText>\n              )}\n            </>\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      >\n        {operator.avatar}\n      </AppShellOperator>\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEjE,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,OAAO,gBAAgB,MAAM,YAAY,CAAC;AAC1C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,EACE,OAAO,EACP,eAAe,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,EAC/E,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAAM,EACN,aAAa,EACb,QAAQ,EACR,WAAW,EACX,WAAW,EACX,UAAU,EACK,EACjB,GAAiB;IAEjB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,UAAU,EAAe,CAAC;IACxE,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,eAAe,EAAE;YACjC,oBAAoB,CAAC,eAAe,CAAC,CAAC;SACvC;aAAM;YACL,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExD,IAAI,SAAS,GAAgB,KAAK,CAAC;IACnC,IAAI,IAAI;QAAE,SAAS,GAAG,GAAG,CAAC;IAE1B,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,SAAS,EAAE,CAAC,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,aAEP,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,IAAI,CACpD,KAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,oBAAoB,GAC3B,CACH,EAED,KAAC,mBAAmB,IAAC,UAAU,EAAE,CAAC,YAAY,YAC5C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EACzD,EAAE,EAAE,SAAS,EACb,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACnC,MAAM,EAAE,MAAM,aAEd,KAAC,KAAK,IAAC,GAAG,EAAE,YAAY,IAAI,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,kBAAkB,CAAC,GAAI,EACpE,KAAC,mBAAmB,IAClB,EAAE,EAAE,aAAa,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,EACnE,OAAO,EAAC,SAAS,YAEhB,OAAO,GACY,EACrB,UAAU,IAAI,CACb,KAAC,mBAAmB,IAClB,EAAE,EAAE,aAAa,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,EACnE,OAAO,EAAC,WAAW,YAElB,UAAU,GACS,CACvB,IACI,GACa,EACtB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACnD,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,yBAAyB,IACxB,GAAG,EAAE,kBAAkB,EACvB,IAAI,EAAC,QAAQ,gBACD,WAAW,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,YAE/B,CAAC,UAAU,IAAI,KAAC,WAAW,OAAK,WAAW,GAAI,GACtB,CAC7B,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,KAAG,CAC1B,GACI,EAEP,KAAC,gBAAgB,IACf,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAErC,QAAQ,CAAC,MAAM,GACC,IACd,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, useContext, useEffect } 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 } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\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} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\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\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\n  return (\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          <Image src={fullImageSrc || imageSrc} alt={t('application_logo')} />\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      >\n        {operator.avatar}\n      </AppShellOperator>\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAuBjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAuC9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA0B9E,CAAC;AAIF,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;SAqDrF,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAuC9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA0B9E,CAAC;AAIF,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;SAqDrF,CAAC"}

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

@@ -22,14 +22,18 @@ export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
       vertical-align: top;
     }
 
-    & > a,
-    & > button {
+    & > :is(a, button) {
       cursor: pointer;
       text-decoration: none;
       user-select: none;
       -webkit-user-select: none;
     }
 
+    & > :is(a, button):focus {
+      box-shadow: ${theme.base.shadow.focus};
+      outline: none;
+    }
+
     ${StyledImage} {
       height: 1.625rem;
 

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n  return css`\n    width: calc(${navWidth} - 2 * ${theme.base.spacing});\n  `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > a,\n    & > button {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    ${StyledImage} {\n      height: 1.625rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({ isMediumOrAbove, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchButton} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n            }\n          }\n        }\n\n        &:focus-within {\n          min-width: 10rem;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? theme.base.palette['foreground-color'],\n        theme.base.transparency['transparent-2']\n      )\n    );\n    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: ${variant === 'secondary' ? secondaryColor : contrastColor};\n      font-size: ${fontSize.s};\n\n      ${variant !== 'secondary' &&\n      css`\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean; drawerOpen: boolean }>(\n  ({ hideTitle, drawerOpen, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\n\n    return css`\n      position: sticky;\n      z-index: calc(${theme.base['z-index'].backdrop} - 1);\n      ${drawerOpen &&\n      css`\n        z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      `}\n      top: 0;\n      gap: ${theme.base.spacing};\n      max-width: 100%;\n      height: ${headerHeight};\n      background-color: ${headerColor};\n      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n\n      ${StyledAppHeaderInfo} {\n        justify-self: flex-start;\n        min-width: 33vw;\n\n        ${hideTitle &&\n        css`\n          min-width: fit-content;\n        `}\n      }\n\n      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background-color: ${headerColor};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${contrastColor};\n            background-color: transparent;\n\n            &:hover,\n            &[data-current='true'] {\n              color: ${hoverColors.foreground};\n              background-color: ${hoverColors.background};\n            }\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n  return css`\n    width: calc(${navWidth} - 2 * ${theme.base.spacing});\n  `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > :is(a, button) {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    & > :is(a, button):focus {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n\n    ${StyledImage} {\n      height: 1.625rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({ isMediumOrAbove, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchButton} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n            }\n          }\n        }\n\n        &:focus-within {\n          min-width: 10rem;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? theme.base.palette['foreground-color'],\n        theme.base.transparency['transparent-2']\n      )\n    );\n    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: ${variant === 'secondary' ? secondaryColor : contrastColor};\n      font-size: ${fontSize.s};\n\n      ${variant !== 'secondary' &&\n      css`\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean; drawerOpen: boolean }>(\n  ({ hideTitle, drawerOpen, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\n\n    return css`\n      position: sticky;\n      z-index: calc(${theme.base['z-index'].backdrop} - 1);\n      ${drawerOpen &&\n      css`\n        z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      `}\n      top: 0;\n      gap: ${theme.base.spacing};\n      max-width: 100%;\n      height: ${headerHeight};\n      background-color: ${headerColor};\n      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n\n      ${StyledAppHeaderInfo} {\n        justify-self: flex-start;\n        min-width: 33vw;\n\n        ${hideTitle &&\n        css`\n          min-width: fit-content;\n        `}\n      }\n\n      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background-color: ${headerColor};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${contrastColor};\n            background-color: transparent;\n\n            &:hover,\n            &[data-current='true'] {\n              color: ${hoverColors.foreground};\n              background-color: ${hoverColors.background};\n            }\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppShell.js

@@ -285,7 +285,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
         }, ref: isSmallOrAbove ? navRef : undefined, as: StyledAppNav, appHeader: showAppHeader, navOpen: mobileNavOpen, onFocus: onFocus, "data-app-region": true, "aria-label": t('app_shell_main_navigation_label'), children: [!showAppHeader && (_jsxs(_Fragment, { children: [_jsxs(StyledAppInfo, { as: Grid, forwardedAs: appInfoAs, variant: 'link', href: appInfoHref, onClick: appInfoOnClick, "aria-label": `${appName}${portalName ? ` - ${portalName}` : ''}`, ...appInfoRestProps, container: {
                             alignItems: 'center',
                             areas: portalName ? '"logo app" "logo portal"' : '"logo app"'
-                        }, ref: setAppInfoEl, icon: true, children: [_jsx(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }), _jsx(Grid, { item: { area: 'app' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: appName }), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: portalName }))] }), navState === 'closed' && !appNameHidden && (_jsx(Tooltip, { target: appInfoEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: appName }))] })), searchInput && !showAppHeader && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: !mobileNavOpen && ['closed', 'closing'].includes(navState), searchInput: searchInput })), _jsxs(StyledScrollWrap, { onClick: isSmallOrAbove
+                        }, ref: setAppInfoEl, icon: true, children: [_jsx(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }), _jsx(Grid, { item: { area: 'app' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: appName }), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: 'span', children: portalName }))] }), navState === 'closed' && (!appNameHidden || portalName) && (_jsx(Tooltip, { target: appInfoEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: `${appNameHidden ? '' : appName} ${portalName ?? ''}`.trim() }))] })), searchInput && !showAppHeader && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: !mobileNavOpen && ['closed', 'closing'].includes(navState), searchInput: searchInput })), _jsxs(StyledScrollWrap, { onClick: isSmallOrAbove
                     ? () => {
                         if (['closing', 'closed'].includes(navState)) {
                             openNav(0);

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  useCallback,\n  useEffect,\n  useMemo,\n  useContext,\n  useRef,\n  isValidElement\n} from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ElementType, FC } from 'react';\n\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as caseSolidIcon from '../Icon/icons/case-solid.icon';\nimport * as barsIcon from '../Icon/icons/bars.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Image from '../Image';\nimport type { ForwardProps } from '../../types';\nimport {\n  useI18n,\n  useBreakpoint,\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useTransitionState,\n  useEvent,\n  useOuterEvent\n} from '../../hooks';\nimport { openCloseStates } from '../../hooks/useTransitionState';\nimport Grid from '../Grid';\nimport Button from '../Button';\nimport Drawer from '../Drawer';\nimport Backdrop from '../Backdrop';\nimport Tooltip from '../Tooltip/Tooltip';\nimport SkipLinks from '../SkipLinks';\nimport type { SkipLinksProps } from '../SkipLinks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Progress from '../Progress';\nimport { registerAction } from '../ShortcutManager';\nimport useShortcut from '../../hooks/useShortcut';\nimport { focusHeadingOrContainer } from '../../utils';\n\nimport AppShellContext, { AppShellDrawerContext } from './AppShellContext';\nimport AppShellDrawer from './Drawer';\nimport AppHeader from './AppHeader';\nimport {\n  StyledAppNav,\n  StyledAppInfo,\n  StyledCaseTypes,\n  StyledScrollWrap,\n  StyledUtils,\n  StyledAppMain,\n  StyledNavCasesList,\n  StyledBannerRegion,\n  StyledCountIcon,\n  StyledUtilIconCount,\n  StyledMobileNav,\n  StyledAppShellTooltip,\n  StyledAppShellToggleButton\n} from './AppShell.styles';\nimport type {\n  AppShellProps,\n  CaseProps,\n  CaseTypeProps,\n  LinkProps,\n  NavListItemProps,\n  UtilItemProps,\n  UtilsProps\n} from './AppShell.types';\nimport NavigationList from './NavigationList';\nimport { AppShellSearch } from './AppShellSearch';\nimport { followingNodes } from './utils';\n\nregisterIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);\nregisterAction(\n  { id: 'NextRegion', defaultKeyBinding: 'F9' },\n  { id: 'PrevRegion', defaultKeyBinding: 'Shift+F9' }\n);\n\nconst CaseTypes: FunctionComponent<{ caseTypes: CaseTypeProps[] }> = ({\n  caseTypes\n}: {\n  caseTypes: CaseTypeProps[];\n}) => {\n  const t = useI18n();\n\n  const transformedCaseTypes = caseTypes.map(caseType => {\n    return {\n      ...caseType,\n      primary: caseType.name\n    };\n  });\n\n  return useMemo(\n    () => (\n      <StyledCaseTypes>\n        <NavigationList\n          items={[\n            {\n              primary: t('app_shell_create'),\n              visual: <Icon name='plus' />,\n              items: transformedCaseTypes\n            }\n          ]}\n        />\n      </StyledCaseTypes>\n    ),\n    [caseTypes]\n  );\n};\n\nconst Links: FunctionComponent<{ links: LinkProps[] }> = (props: { links: LinkProps[] }) => {\n  const { links } = props;\n  const [transformedLinks, setTransformedLinks] = useState<NavListItemProps[]>([]);\n\n  // TODO: Can this be a memo instead of a state and an effect?\n  const mergedNavLinks = (items: LinkProps[]): NavListItemProps[] => {\n    return items.map((link: LinkProps) => {\n      return {\n        ...link,\n        primary: link.name,\n        'aria-current': link.active ? 'page' : null,\n        visual: link.icon ? <Icon name={link.icon} /> : null,\n        onClick: link.links ? undefined : link.onClick,\n        items: link.links ? mergedNavLinks(link.links) : undefined\n      };\n    });\n  };\n\n  useEffect(() => {\n    setTransformedLinks(mergedNavLinks(links));\n  }, [links]);\n\n  return (\n    <div>\n      <NavigationList items={transformedLinks} />\n    </div>\n  );\n};\n\nconst Cases: FunctionComponent<{ cases: CaseProps[] }> = (props: { cases: CaseProps[] }) => {\n  const { cases } = props;\n\n  const setupCases = (items: CaseProps[]): NavListItemProps[] => {\n    return items.map((item: CaseProps) => {\n      const {\n        id,\n        primary,\n        secondary,\n        visual = <Icon name='case-solid' />,\n        active,\n        onClick,\n        onDismiss,\n        ...restProps\n      } = item;\n      return {\n        ...restProps,\n        id,\n        'aria-current': active ? 'page' : undefined,\n        primary,\n        secondary,\n        active: !!active,\n        onClick,\n        onDismiss,\n        visual\n      };\n    });\n  };\n\n  return (\n    <StyledNavCasesList>\n      <NavigationList items={setupCases(cases)} />\n    </StyledNavCasesList>\n  );\n};\n\nexport const Utils: FC<UtilsProps> = ({ contextSwitcher = {}, operator, items, appHeader }) => {\n  const t = useI18n();\n  const {\n    contexts,\n    onContextClick,\n    label: contextSwitcherLabel = t('switch_to')\n  } = contextSwitcher;\n  const { navOpen, navState, drawerOpen, setDrawerOpen } = useContext(AppShellContext);\n  const [item, setItem] = useState<UtilItemProps>();\n\n  useEffect(() => {\n    if (drawerOpen && item) {\n      setItem(\n        items?.find<UtilItemProps>(\n          (utilItem): utilItem is UtilItemProps =>\n            !isValidElement<any>(utilItem) && utilItem.name === item.name\n        )\n      );\n    }\n  }, [items]);\n\n  const operatorInfo: NavListItemProps[] = useMemo(\n    () =>\n      appHeader\n        ? []\n        : [\n            {\n              primary: t('app_shell_user_account'),\n              visual: operator.avatar,\n              items: operator.actions\n            }\n          ],\n    [appHeader, operator.name, operator.avatar, operator.actions]\n  );\n\n  const contextSwitcherUtilItem: UtilItemProps | undefined = useMemo(() => {\n    if (!appHeader && contexts && contexts?.length > 1 && !!onContextClick) {\n      return {\n        name: contextSwitcherLabel,\n        primary: contextSwitcherLabel,\n        visual: <Icon name='dot-9-solid' />,\n        drawerView: (\n          <NavigationList\n            items={contexts!.map(context => ({\n              ...context,\n              primary: context.primary,\n              'aria-current': !!context.selected,\n              visual: context.visual,\n              onClick: e => {\n                onContextClick(context.id, e);\n              }\n            }))}\n            singleSelect\n          />\n        )\n      };\n    }\n  }, [appHeader, contexts, contextSwitcherLabel, onContextClick]);\n\n  const transform = useCallback(\n    (utilItem: UtilItemProps): NavListItemProps => {\n      const uItem = { ...utilItem };\n      delete uItem.onDrawerClose;\n      delete uItem.onDrawerOpen;\n      return {\n        onClick: () => {\n          if (utilItem.drawerView) {\n            setItem(utilItem);\n          }\n        },\n        ...uItem,\n        primary: utilItem.name,\n        visual: utilItem.count ? (\n          <StyledUtilIconCount>\n            {utilItem.visual}\n            <StyledCountIcon variant='urgent' id={`${utilItem.name}-count`}>\n              {utilItem.count}\n            </StyledCountIcon>\n          </StyledUtilIconCount>\n        ) : (\n          utilItem.visual\n        ),\n        collapseItems: !navOpen\n      };\n    },\n    [navOpen]\n  );\n\n  const utilItems = useMemo(() => {\n    return [\n      ...(items ?? []).map(uItem => {\n        return isValidElement<any>(uItem) ? uItem : transform(uItem);\n      }),\n      ...(contextSwitcherUtilItem ? [transform(contextSwitcherUtilItem)] : []),\n      ...operatorInfo\n    ];\n  }, [items, operatorInfo, transform]);\n\n  useEffect(() => {\n    if (item) setDrawerOpen(true);\n  }, [item]);\n\n  useEffect(() => {\n    if (navState === 'closed' || navState === 'closing') setDrawerOpen(false);\n  }, [navState]);\n\n  return (\n    <AppShellDrawerContext.Provider\n      value={useMemo(\n        () => ({\n          drawerOpen,\n          closeDrawer: () => {\n            setDrawerOpen(false);\n          },\n          openDrawer: setItem\n        }),\n        [drawerOpen]\n      )}\n    >\n      <StyledUtils>\n        <NavigationList items={utilItems} collapsed />\n      </StyledUtils>\n\n      {item && (\n        <AppShellDrawer\n          drawerOpen={drawerOpen}\n          setDrawerOpen={setDrawerOpen}\n          content={item.drawerView}\n          header={item.drawerHeader || item.name}\n          onDrawerClose={() => {\n            setItem(undefined);\n            item.onDrawerClose?.();\n          }}\n          onDrawerOpen={item.onDrawerOpen}\n        />\n      )}\n    </AppShellDrawerContext.Provider>\n  );\n};\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n  props: PropsWithoutRef<AppShellProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n\n  const {\n    appInfo,\n    contextSwitcher,\n    searchInput,\n    appHeader,\n    searchPage,\n    searchLabel = t('sitewide'),\n    caseTypes,\n    links,\n    banners,\n    progress,\n    main,\n    operator,\n    utils,\n    cases,\n    defaultExpanded = false,\n    collapsedHoverMenus = false,\n    ...restProps\n  } = props;\n  const {\n    appName,\n    portalName,\n    href: appInfoHref,\n    onClick: appInfoOnClick,\n    imageSrc: logoSrc,\n    appNameHidden,\n    ...appInfoRestProps\n  } = appInfo;\n  let appInfoAs: ElementType = 'div';\n  if (appInfoHref) appInfoAs = Link;\n  else if (appInfoOnClick) appInfoAs = Button;\n\n  const { start, end } = useDirection();\n  const navRef = useConsolidatedRef(ref);\n\n  const [mobileNavOpen, setMobileNavOpen] = useState(false);\n  const [mobileNavBackdrop, setMobileNavBackdrop] = useState(false);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const focusedImperatively = useRef(false);\n  const [headerEl, setHeaderEl] = useElement<HTMLDivElement>();\n  const [mobileHeaderEl, setMobileHeaderEl] = useElement<HTMLDivElement>();\n  const [appInfoEl, setAppInfoEl] = useElement<HTMLAnchorElement>();\n  const [expandCollapseEl, setExpandCollapseEl] = useElement<HTMLButtonElement>();\n\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  const showAppHeader = !!appHeader && isSmallOrAbove;\n  const showMainContent = showAppHeader ? !!(headerEl || mobileHeaderEl) : true;\n\n  const openNavTimeoutId = useRef<ReturnType<typeof setTimeout>>();\n  const closeNavTimeoutId = useRef<ReturnType<typeof setTimeout>>();\n  const previewTriggerRef = useRef<HTMLElement>(null);\n\n  const [searchContainerEl, setSearchContainerEl] = useState<HTMLElement | null>(null);\n\n  const { state: navState, set: setNavState } = useTransitionState({\n    ref: navRef,\n    property: 'width',\n    states: openCloseStates,\n    defaultState: defaultExpanded ? 'open' : 'closed'\n  });\n\n  const skipLinks: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: t('go_to_main_content'),\n        target: { ariaLabel: t('main_content'), selector: 'main' }\n      }\n    ],\n    [t]\n  );\n\n  const openNav = useCallback((delay: number = 0) => {\n    if (closeNavTimeoutId.current) clearTimeout(closeNavTimeoutId.current);\n    openNavTimeoutId.current = setTimeout(() => {\n      setNavState('open');\n    }, delay);\n  }, []);\n\n  const closeNav = useCallback((delay: number = 0) => {\n    if (openNavTimeoutId.current) clearTimeout(openNavTimeoutId.current);\n    closeNavTimeoutId.current = setTimeout(() => {\n      setNavState('closed');\n    }, delay);\n  }, []);\n\n  const onFocus = useCallback(() => {\n    focusedImperatively.current = false;\n  }, [openNav, isSmallOrAbove]);\n\n  const mobileNavRef = useRef<HTMLDivElement>(null);\n\n  useOuterEvent('focusin', [mobileNavRef], () => setMobileNavOpen(false));\n\n  useEffect(() => {\n    if (mobileNavOpen) {\n      const onKeyDown = ({ key }: KeyboardEvent) => {\n        if (key === 'Escape') setMobileNavOpen(false);\n      };\n\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }\n  }, [mobileNavOpen]);\n\n  useEffect(() => {\n    if (isSmallOrAbove && mobileNavOpen) {\n      setMobileNavBackdrop(false);\n      setMobileNavOpen(false);\n    }\n  }, [isSmallOrAbove, mobileNavOpen]);\n\n  const activatedEl = useRef<Element>(document.body);\n  useEvent('click', e => {\n    activatedEl.current = document.elementFromPoint(e.clientX, e.clientY) ?? document.body;\n  });\n\n  useShortcut('NextRegion', () => {\n    const activeElement =\n      document.activeElement && document.activeElement !== document.body\n        ? document.activeElement\n        : activatedEl.current;\n    const regionEls = followingNodes<HTMLElement>(\n      document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT, node =>\n        // safe to treat as Element, as we requested to give us only elements\n        (node as Element).hasAttribute('data-app-region') || node === activeElement\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_SKIP\n      ),\n      activeElement\n    );\n    // try to focus first visibleregion\n    const focusedNode = regionEls.find(node => focusHeadingOrContainer(node, ''));\n    if (!focusedNode) (activeElement as HTMLElement).focus();\n  });\n\n  useShortcut('PrevRegion', () => {\n    const activeElement =\n      document.activeElement && document.activeElement !== document.body\n        ? document.activeElement\n        : activatedEl.current;\n    const regionEls = followingNodes<HTMLElement>(\n      document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT, node =>\n        // safe to treat as HTMLElement, as we requested to give us only elements\n        (node as HTMLElement).hasAttribute('data-app-region') || node === activeElement\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_SKIP\n      ),\n      activeElement\n    );\n    regionEls.reverse();\n    if (regionEls[0].contains(activeElement)) regionEls.splice(0, 1);\n    const focusedNode = regionEls.find(node => focusHeadingOrContainer(node, ''));\n    if (!focusedNode) (activeElement as HTMLElement).focus();\n  });\n\n  const appNav = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: 'column',\n        justify: 'between'\n      }}\n      ref={isSmallOrAbove ? navRef : undefined}\n      as={StyledAppNav}\n      appHeader={showAppHeader}\n      navOpen={mobileNavOpen}\n      onFocus={onFocus}\n      data-app-region\n      aria-label={t('app_shell_main_navigation_label')}\n    >\n      {!showAppHeader && (\n        <>\n          <StyledAppInfo\n            as={Grid}\n            forwardedAs={appInfoAs}\n            variant='link'\n            href={appInfoHref}\n            onClick={appInfoOnClick}\n            aria-label={`${appName}${portalName ? ` - ${portalName}` : ''}`}\n            {...appInfoRestProps}\n            container={{\n              alignItems: 'center',\n              areas: portalName ? '\"logo app\" \"logo portal\"' : '\"logo app\"'\n            }}\n            ref={setAppInfoEl}\n            icon\n          >\n            <Grid item={{ area: 'logo' }} as={Image} src={logoSrc} alt={appName} />\n            <Grid item={{ area: 'app' }} as={appNameHidden ? VisuallyHiddenText : 'span'}>\n              {appName}\n            </Grid>\n            {portalName && (\n              <Grid item={{ area: 'portal' }} as={appNameHidden ? VisuallyHiddenText : 'span'}>\n                {portalName}\n              </Grid>\n            )}\n          </StyledAppInfo>\n          {navState === 'closed' && !appNameHidden && (\n            <Tooltip\n              target={appInfoEl}\n              placement='right'\n              as={StyledAppShellTooltip}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {appName}\n            </Tooltip>\n          )}\n        </>\n      )}\n\n      {searchInput && !showAppHeader && (\n        <AppShellSearch\n          searchLabel={searchLabel}\n          collapsed={!mobileNavOpen && ['closed', 'closing'].includes(navState)}\n          searchInput={searchInput}\n        />\n      )}\n\n      <StyledScrollWrap\n        onClick={\n          isSmallOrAbove\n            ? () => {\n                if (['closing', 'closed'].includes(navState)) {\n                  openNav(0);\n                } else {\n                  closeNav(0);\n                }\n              }\n            : undefined\n        }\n      >\n        {caseTypes && caseTypes.length > 0 && <CaseTypes caseTypes={caseTypes} />}\n        {links && <Links links={links} />}\n        {cases && <Cases cases={cases} />}\n      </StyledScrollWrap>\n\n      <Utils\n        appHeader={showAppHeader}\n        operator={operator}\n        contextSwitcher={contextSwitcher}\n        items={utils}\n      />\n\n      {!mobileNavOpen && (\n        <Flex container={{ justify: 'center' }}>\n          <StyledAppShellToggleButton\n            icon\n            ref={setExpandCollapseEl}\n            compact\n            variant='simple'\n            onClick={() => {\n              setNavState(navState === 'closed' ? 'open' : 'closed');\n            }}\n            aria-label={navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')}\n          >\n            {['closed', 'closing'].includes(navState) ? (\n              <Icon name={`arrow-micro-${end}`} />\n            ) : (\n              <Icon name={`arrow-micro-${start}`} />\n            )}\n          </StyledAppShellToggleButton>\n\n          {['open', 'closed'].includes(navState) && (\n            <Tooltip\n              target={expandCollapseEl}\n              placement='right'\n              as={StyledAppShellTooltip}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')}\n            </Tooltip>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <AppShellContext.Provider\n      value={useMemo(\n        () => ({\n          navOpen: mobileNavOpen || navState === 'open' || navState === 'opening',\n          drawerOpen,\n          setDrawerOpen,\n          collapsedHoverMenus,\n          navState,\n          focusedImperatively,\n          headerEl: headerEl || mobileHeaderEl,\n          previewTriggerRef,\n          searchContainerEl,\n          setSearchContainerEl,\n          mobileNavOpen\n        }),\n        [navState, drawerOpen, mobileNavOpen, headerEl, mobileHeaderEl, searchContainerEl]\n      )}\n    >\n      <SkipLinks items={skipLinks} />\n      {showAppHeader && (\n        <AppHeader\n          {...appInfo}\n          contextSwitcher={contextSwitcher}\n          searchInput={searchInput}\n          searchLabel={searchLabel}\n          operator={operator}\n          searchPage={searchPage}\n          ref={setHeaderEl}\n        />\n      )}\n\n      {isSmallOrAbove ? (\n        appNav\n      ) : (\n        <>\n          <Flex as={StyledMobileNav} container={{ alignItems: 'center' }} ref={setMobileHeaderEl}>\n            <Button\n              variant='simple'\n              onClick={() => setMobileNavBackdrop(true)}\n              aria-label={t('app_shell_open_nav')}\n              icon\n            >\n              <Icon name='bars' />\n            </Button>\n          </Flex>\n\n          <Backdrop\n            open={mobileNavBackdrop}\n            transitionSpeed='none'\n            onAfterTransitionIn={() => setMobileNavOpen(true)}\n            onBeforeTransitionOut={() => setMobileNavOpen(false)}\n            onClick={e => {\n              if (e.currentTarget === e.target) setMobileNavOpen(false);\n            }}\n          >\n            <Drawer\n              open={mobileNavOpen}\n              ref={mobileNavRef}\n              onAfterClose={() => {\n                setMobileNavBackdrop(false);\n              }}\n              position='fixed'\n              placement={start}\n              size='min(18.75rem, calc(100vw - 3.5rem))'\n              nullWhenClosed\n            >\n              {appNav}\n            </Drawer>\n          </Backdrop>\n        </>\n      )}\n      {showMainContent && (\n        <StyledAppMain\n          appHeader={showAppHeader}\n          mobileNav={!isSmallOrAbove}\n          headerOffset={isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight}\n          navOpen={['open', 'opening'].includes(navState)}\n          aria-busy={progress ? 'true' : 'false'}\n          data-app-region\n        >\n          <Progress\n            visible={!!progress}\n            placement='local'\n            message={typeof progress === 'string' ? progress : t('loading')}\n          />\n\n          {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n          {main}\n        </StyledAppMain>\n      )}\n    </AppShellContext.Provider>\n  );\n});\n\nexport default AppShell;\n"]}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  useCallback,\n  useEffect,\n  useMemo,\n  useContext,\n  useRef,\n  isValidElement\n} from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ElementType, FC } from 'react';\n\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as caseSolidIcon from '../Icon/icons/case-solid.icon';\nimport * as barsIcon from '../Icon/icons/bars.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Image from '../Image';\nimport type { ForwardProps } from '../../types';\nimport {\n  useI18n,\n  useBreakpoint,\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useTransitionState,\n  useEvent,\n  useOuterEvent\n} from '../../hooks';\nimport { openCloseStates } from '../../hooks/useTransitionState';\nimport Grid from '../Grid';\nimport Button from '../Button';\nimport Drawer from '../Drawer';\nimport Backdrop from '../Backdrop';\nimport Tooltip from '../Tooltip/Tooltip';\nimport SkipLinks from '../SkipLinks';\nimport type { SkipLinksProps } from '../SkipLinks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Progress from '../Progress';\nimport { registerAction } from '../ShortcutManager';\nimport useShortcut from '../../hooks/useShortcut';\nimport { focusHeadingOrContainer } from '../../utils';\n\nimport AppShellContext, { AppShellDrawerContext } from './AppShellContext';\nimport AppShellDrawer from './Drawer';\nimport AppHeader from './AppHeader';\nimport {\n  StyledAppNav,\n  StyledAppInfo,\n  StyledCaseTypes,\n  StyledScrollWrap,\n  StyledUtils,\n  StyledAppMain,\n  StyledNavCasesList,\n  StyledBannerRegion,\n  StyledCountIcon,\n  StyledUtilIconCount,\n  StyledMobileNav,\n  StyledAppShellTooltip,\n  StyledAppShellToggleButton\n} from './AppShell.styles';\nimport type {\n  AppShellProps,\n  CaseProps,\n  CaseTypeProps,\n  LinkProps,\n  NavListItemProps,\n  UtilItemProps,\n  UtilsProps\n} from './AppShell.types';\nimport NavigationList from './NavigationList';\nimport { AppShellSearch } from './AppShellSearch';\nimport { followingNodes } from './utils';\n\nregisterIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);\nregisterAction(\n  { id: 'NextRegion', defaultKeyBinding: 'F9' },\n  { id: 'PrevRegion', defaultKeyBinding: 'Shift+F9' }\n);\n\nconst CaseTypes: FunctionComponent<{ caseTypes: CaseTypeProps[] }> = ({\n  caseTypes\n}: {\n  caseTypes: CaseTypeProps[];\n}) => {\n  const t = useI18n();\n\n  const transformedCaseTypes = caseTypes.map(caseType => {\n    return {\n      ...caseType,\n      primary: caseType.name\n    };\n  });\n\n  return useMemo(\n    () => (\n      <StyledCaseTypes>\n        <NavigationList\n          items={[\n            {\n              primary: t('app_shell_create'),\n              visual: <Icon name='plus' />,\n              items: transformedCaseTypes\n            }\n          ]}\n        />\n      </StyledCaseTypes>\n    ),\n    [caseTypes]\n  );\n};\n\nconst Links: FunctionComponent<{ links: LinkProps[] }> = (props: { links: LinkProps[] }) => {\n  const { links } = props;\n  const [transformedLinks, setTransformedLinks] = useState<NavListItemProps[]>([]);\n\n  // TODO: Can this be a memo instead of a state and an effect?\n  const mergedNavLinks = (items: LinkProps[]): NavListItemProps[] => {\n    return items.map((link: LinkProps) => {\n      return {\n        ...link,\n        primary: link.name,\n        'aria-current': link.active ? 'page' : null,\n        visual: link.icon ? <Icon name={link.icon} /> : null,\n        onClick: link.links ? undefined : link.onClick,\n        items: link.links ? mergedNavLinks(link.links) : undefined\n      };\n    });\n  };\n\n  useEffect(() => {\n    setTransformedLinks(mergedNavLinks(links));\n  }, [links]);\n\n  return (\n    <div>\n      <NavigationList items={transformedLinks} />\n    </div>\n  );\n};\n\nconst Cases: FunctionComponent<{ cases: CaseProps[] }> = (props: { cases: CaseProps[] }) => {\n  const { cases } = props;\n\n  const setupCases = (items: CaseProps[]): NavListItemProps[] => {\n    return items.map((item: CaseProps) => {\n      const {\n        id,\n        primary,\n        secondary,\n        visual = <Icon name='case-solid' />,\n        active,\n        onClick,\n        onDismiss,\n        ...restProps\n      } = item;\n      return {\n        ...restProps,\n        id,\n        'aria-current': active ? 'page' : undefined,\n        primary,\n        secondary,\n        active: !!active,\n        onClick,\n        onDismiss,\n        visual\n      };\n    });\n  };\n\n  return (\n    <StyledNavCasesList>\n      <NavigationList items={setupCases(cases)} />\n    </StyledNavCasesList>\n  );\n};\n\nexport const Utils: FC<UtilsProps> = ({ contextSwitcher = {}, operator, items, appHeader }) => {\n  const t = useI18n();\n  const {\n    contexts,\n    onContextClick,\n    label: contextSwitcherLabel = t('switch_to')\n  } = contextSwitcher;\n  const { navOpen, navState, drawerOpen, setDrawerOpen } = useContext(AppShellContext);\n  const [item, setItem] = useState<UtilItemProps>();\n\n  useEffect(() => {\n    if (drawerOpen && item) {\n      setItem(\n        items?.find<UtilItemProps>(\n          (utilItem): utilItem is UtilItemProps =>\n            !isValidElement<any>(utilItem) && utilItem.name === item.name\n        )\n      );\n    }\n  }, [items]);\n\n  const operatorInfo: NavListItemProps[] = useMemo(\n    () =>\n      appHeader\n        ? []\n        : [\n            {\n              primary: t('app_shell_user_account'),\n              visual: operator.avatar,\n              items: operator.actions\n            }\n          ],\n    [appHeader, operator.name, operator.avatar, operator.actions]\n  );\n\n  const contextSwitcherUtilItem: UtilItemProps | undefined = useMemo(() => {\n    if (!appHeader && contexts && contexts?.length > 1 && !!onContextClick) {\n      return {\n        name: contextSwitcherLabel,\n        primary: contextSwitcherLabel,\n        visual: <Icon name='dot-9-solid' />,\n        drawerView: (\n          <NavigationList\n            items={contexts!.map(context => ({\n              ...context,\n              primary: context.primary,\n              'aria-current': !!context.selected,\n              visual: context.visual,\n              onClick: e => {\n                onContextClick(context.id, e);\n              }\n            }))}\n            singleSelect\n          />\n        )\n      };\n    }\n  }, [appHeader, contexts, contextSwitcherLabel, onContextClick]);\n\n  const transform = useCallback(\n    (utilItem: UtilItemProps): NavListItemProps => {\n      const uItem = { ...utilItem };\n      delete uItem.onDrawerClose;\n      delete uItem.onDrawerOpen;\n      return {\n        onClick: () => {\n          if (utilItem.drawerView) {\n            setItem(utilItem);\n          }\n        },\n        ...uItem,\n        primary: utilItem.name,\n        visual: utilItem.count ? (\n          <StyledUtilIconCount>\n            {utilItem.visual}\n            <StyledCountIcon variant='urgent' id={`${utilItem.name}-count`}>\n              {utilItem.count}\n            </StyledCountIcon>\n          </StyledUtilIconCount>\n        ) : (\n          utilItem.visual\n        ),\n        collapseItems: !navOpen\n      };\n    },\n    [navOpen]\n  );\n\n  const utilItems = useMemo(() => {\n    return [\n      ...(items ?? []).map(uItem => {\n        return isValidElement<any>(uItem) ? uItem : transform(uItem);\n      }),\n      ...(contextSwitcherUtilItem ? [transform(contextSwitcherUtilItem)] : []),\n      ...operatorInfo\n    ];\n  }, [items, operatorInfo, transform]);\n\n  useEffect(() => {\n    if (item) setDrawerOpen(true);\n  }, [item]);\n\n  useEffect(() => {\n    if (navState === 'closed' || navState === 'closing') setDrawerOpen(false);\n  }, [navState]);\n\n  return (\n    <AppShellDrawerContext.Provider\n      value={useMemo(\n        () => ({\n          drawerOpen,\n          closeDrawer: () => {\n            setDrawerOpen(false);\n          },\n          openDrawer: setItem\n        }),\n        [drawerOpen]\n      )}\n    >\n      <StyledUtils>\n        <NavigationList items={utilItems} collapsed />\n      </StyledUtils>\n\n      {item && (\n        <AppShellDrawer\n          drawerOpen={drawerOpen}\n          setDrawerOpen={setDrawerOpen}\n          content={item.drawerView}\n          header={item.drawerHeader || item.name}\n          onDrawerClose={() => {\n            setItem(undefined);\n            item.onDrawerClose?.();\n          }}\n          onDrawerOpen={item.onDrawerOpen}\n        />\n      )}\n    </AppShellDrawerContext.Provider>\n  );\n};\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n  props: PropsWithoutRef<AppShellProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n\n  const {\n    appInfo,\n    contextSwitcher,\n    searchInput,\n    appHeader,\n    searchPage,\n    searchLabel = t('sitewide'),\n    caseTypes,\n    links,\n    banners,\n    progress,\n    main,\n    operator,\n    utils,\n    cases,\n    defaultExpanded = false,\n    collapsedHoverMenus = false,\n    ...restProps\n  } = props;\n  const {\n    appName,\n    portalName,\n    href: appInfoHref,\n    onClick: appInfoOnClick,\n    imageSrc: logoSrc,\n    appNameHidden,\n    ...appInfoRestProps\n  } = appInfo;\n  let appInfoAs: ElementType = 'div';\n  if (appInfoHref) appInfoAs = Link;\n  else if (appInfoOnClick) appInfoAs = Button;\n\n  const { start, end } = useDirection();\n  const navRef = useConsolidatedRef(ref);\n\n  const [mobileNavOpen, setMobileNavOpen] = useState(false);\n  const [mobileNavBackdrop, setMobileNavBackdrop] = useState(false);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n\n  const focusedImperatively = useRef(false);\n  const [headerEl, setHeaderEl] = useElement<HTMLDivElement>();\n  const [mobileHeaderEl, setMobileHeaderEl] = useElement<HTMLDivElement>();\n  const [appInfoEl, setAppInfoEl] = useElement<HTMLAnchorElement>();\n  const [expandCollapseEl, setExpandCollapseEl] = useElement<HTMLButtonElement>();\n\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  const showAppHeader = !!appHeader && isSmallOrAbove;\n  const showMainContent = showAppHeader ? !!(headerEl || mobileHeaderEl) : true;\n\n  const openNavTimeoutId = useRef<ReturnType<typeof setTimeout>>();\n  const closeNavTimeoutId = useRef<ReturnType<typeof setTimeout>>();\n  const previewTriggerRef = useRef<HTMLElement>(null);\n\n  const [searchContainerEl, setSearchContainerEl] = useState<HTMLElement | null>(null);\n\n  const { state: navState, set: setNavState } = useTransitionState({\n    ref: navRef,\n    property: 'width',\n    states: openCloseStates,\n    defaultState: defaultExpanded ? 'open' : 'closed'\n  });\n\n  const skipLinks: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: t('go_to_main_content'),\n        target: { ariaLabel: t('main_content'), selector: 'main' }\n      }\n    ],\n    [t]\n  );\n\n  const openNav = useCallback((delay: number = 0) => {\n    if (closeNavTimeoutId.current) clearTimeout(closeNavTimeoutId.current);\n    openNavTimeoutId.current = setTimeout(() => {\n      setNavState('open');\n    }, delay);\n  }, []);\n\n  const closeNav = useCallback((delay: number = 0) => {\n    if (openNavTimeoutId.current) clearTimeout(openNavTimeoutId.current);\n    closeNavTimeoutId.current = setTimeout(() => {\n      setNavState('closed');\n    }, delay);\n  }, []);\n\n  const onFocus = useCallback(() => {\n    focusedImperatively.current = false;\n  }, [openNav, isSmallOrAbove]);\n\n  const mobileNavRef = useRef<HTMLDivElement>(null);\n\n  useOuterEvent('focusin', [mobileNavRef], () => setMobileNavOpen(false));\n\n  useEffect(() => {\n    if (mobileNavOpen) {\n      const onKeyDown = ({ key }: KeyboardEvent) => {\n        if (key === 'Escape') setMobileNavOpen(false);\n      };\n\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }\n  }, [mobileNavOpen]);\n\n  useEffect(() => {\n    if (isSmallOrAbove && mobileNavOpen) {\n      setMobileNavBackdrop(false);\n      setMobileNavOpen(false);\n    }\n  }, [isSmallOrAbove, mobileNavOpen]);\n\n  const activatedEl = useRef<Element>(document.body);\n  useEvent('click', e => {\n    activatedEl.current = document.elementFromPoint(e.clientX, e.clientY) ?? document.body;\n  });\n\n  useShortcut('NextRegion', () => {\n    const activeElement =\n      document.activeElement && document.activeElement !== document.body\n        ? document.activeElement\n        : activatedEl.current;\n    const regionEls = followingNodes<HTMLElement>(\n      document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT, node =>\n        // safe to treat as Element, as we requested to give us only elements\n        (node as Element).hasAttribute('data-app-region') || node === activeElement\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_SKIP\n      ),\n      activeElement\n    );\n    // try to focus first visibleregion\n    const focusedNode = regionEls.find(node => focusHeadingOrContainer(node, ''));\n    if (!focusedNode) (activeElement as HTMLElement).focus();\n  });\n\n  useShortcut('PrevRegion', () => {\n    const activeElement =\n      document.activeElement && document.activeElement !== document.body\n        ? document.activeElement\n        : activatedEl.current;\n    const regionEls = followingNodes<HTMLElement>(\n      document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT, node =>\n        // safe to treat as HTMLElement, as we requested to give us only elements\n        (node as HTMLElement).hasAttribute('data-app-region') || node === activeElement\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_SKIP\n      ),\n      activeElement\n    );\n    regionEls.reverse();\n    if (regionEls[0].contains(activeElement)) regionEls.splice(0, 1);\n    const focusedNode = regionEls.find(node => focusHeadingOrContainer(node, ''));\n    if (!focusedNode) (activeElement as HTMLElement).focus();\n  });\n\n  const appNav = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: 'column',\n        justify: 'between'\n      }}\n      ref={isSmallOrAbove ? navRef : undefined}\n      as={StyledAppNav}\n      appHeader={showAppHeader}\n      navOpen={mobileNavOpen}\n      onFocus={onFocus}\n      data-app-region\n      aria-label={t('app_shell_main_navigation_label')}\n    >\n      {!showAppHeader && (\n        <>\n          <StyledAppInfo\n            as={Grid}\n            forwardedAs={appInfoAs}\n            variant='link'\n            href={appInfoHref}\n            onClick={appInfoOnClick}\n            aria-label={`${appName}${portalName ? ` - ${portalName}` : ''}`}\n            {...appInfoRestProps}\n            container={{\n              alignItems: 'center',\n              areas: portalName ? '\"logo app\" \"logo portal\"' : '\"logo app\"'\n            }}\n            ref={setAppInfoEl}\n            icon\n          >\n            <Grid item={{ area: 'logo' }} as={Image} src={logoSrc} alt={appName} />\n            <Grid item={{ area: 'app' }} as={appNameHidden ? VisuallyHiddenText : 'span'}>\n              {appName}\n            </Grid>\n            {portalName && (\n              <Grid item={{ area: 'portal' }} as='span'>\n                {portalName}\n              </Grid>\n            )}\n          </StyledAppInfo>\n          {navState === 'closed' && (!appNameHidden || portalName) && (\n            <Tooltip\n              target={appInfoEl}\n              placement='right'\n              as={StyledAppShellTooltip}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {`${appNameHidden ? '' : appName} ${portalName ?? ''}`.trim()}\n            </Tooltip>\n          )}\n        </>\n      )}\n\n      {searchInput && !showAppHeader && (\n        <AppShellSearch\n          searchLabel={searchLabel}\n          collapsed={!mobileNavOpen && ['closed', 'closing'].includes(navState)}\n          searchInput={searchInput}\n        />\n      )}\n\n      <StyledScrollWrap\n        onClick={\n          isSmallOrAbove\n            ? () => {\n                if (['closing', 'closed'].includes(navState)) {\n                  openNav(0);\n                } else {\n                  closeNav(0);\n                }\n              }\n            : undefined\n        }\n      >\n        {caseTypes && caseTypes.length > 0 && <CaseTypes caseTypes={caseTypes} />}\n        {links && <Links links={links} />}\n        {cases && <Cases cases={cases} />}\n      </StyledScrollWrap>\n\n      <Utils\n        appHeader={showAppHeader}\n        operator={operator}\n        contextSwitcher={contextSwitcher}\n        items={utils}\n      />\n\n      {!mobileNavOpen && (\n        <Flex container={{ justify: 'center' }}>\n          <StyledAppShellToggleButton\n            icon\n            ref={setExpandCollapseEl}\n            compact\n            variant='simple'\n            onClick={() => {\n              setNavState(navState === 'closed' ? 'open' : 'closed');\n            }}\n            aria-label={navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')}\n          >\n            {['closed', 'closing'].includes(navState) ? (\n              <Icon name={`arrow-micro-${end}`} />\n            ) : (\n              <Icon name={`arrow-micro-${start}`} />\n            )}\n          </StyledAppShellToggleButton>\n\n          {['open', 'closed'].includes(navState) && (\n            <Tooltip\n              target={expandCollapseEl}\n              placement='right'\n              as={StyledAppShellTooltip}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')}\n            </Tooltip>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <AppShellContext.Provider\n      value={useMemo(\n        () => ({\n          navOpen: mobileNavOpen || navState === 'open' || navState === 'opening',\n          drawerOpen,\n          setDrawerOpen,\n          collapsedHoverMenus,\n          navState,\n          focusedImperatively,\n          headerEl: headerEl || mobileHeaderEl,\n          previewTriggerRef,\n          searchContainerEl,\n          setSearchContainerEl,\n          mobileNavOpen\n        }),\n        [navState, drawerOpen, mobileNavOpen, headerEl, mobileHeaderEl, searchContainerEl]\n      )}\n    >\n      <SkipLinks items={skipLinks} />\n      {showAppHeader && (\n        <AppHeader\n          {...appInfo}\n          contextSwitcher={contextSwitcher}\n          searchInput={searchInput}\n          searchLabel={searchLabel}\n          operator={operator}\n          searchPage={searchPage}\n          ref={setHeaderEl}\n        />\n      )}\n\n      {isSmallOrAbove ? (\n        appNav\n      ) : (\n        <>\n          <Flex as={StyledMobileNav} container={{ alignItems: 'center' }} ref={setMobileHeaderEl}>\n            <Button\n              variant='simple'\n              onClick={() => setMobileNavBackdrop(true)}\n              aria-label={t('app_shell_open_nav')}\n              icon\n            >\n              <Icon name='bars' />\n            </Button>\n          </Flex>\n\n          <Backdrop\n            open={mobileNavBackdrop}\n            transitionSpeed='none'\n            onAfterTransitionIn={() => setMobileNavOpen(true)}\n            onBeforeTransitionOut={() => setMobileNavOpen(false)}\n            onClick={e => {\n              if (e.currentTarget === e.target) setMobileNavOpen(false);\n            }}\n          >\n            <Drawer\n              open={mobileNavOpen}\n              ref={mobileNavRef}\n              onAfterClose={() => {\n                setMobileNavBackdrop(false);\n              }}\n              position='fixed'\n              placement={start}\n              size='min(18.75rem, calc(100vw - 3.5rem))'\n              nullWhenClosed\n            >\n              {appNav}\n            </Drawer>\n          </Backdrop>\n        </>\n      )}\n      {showMainContent && (\n        <StyledAppMain\n          appHeader={showAppHeader}\n          mobileNav={!isSmallOrAbove}\n          headerOffset={isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight}\n          navOpen={['open', 'opening'].includes(navState)}\n          aria-busy={progress ? 'true' : 'false'}\n          data-app-region\n        >\n          <Progress\n            visible={!!progress}\n            placement='local'\n            message={typeof progress === 'string' ? progress : t('loading')}\n          />\n\n          {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n          {main}\n        </StyledAppMain>\n      )}\n    </AppShellContext.Provider>\n  );\n});\n\nexport default AppShell;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA+BvC,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;sGASE,eAAe;AAPlB,wBAyFE"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA+BvC,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;sGASE,eAAe;AAPlB,wBA0FE"}

package/lib/components/AppShell/Drawer.js

@@ -26,13 +26,14 @@ export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setD
         setDrawerOpen(false);
     }, drawerEl, [drawerEl]);
     useFocusTrap(drawerRef);
-    const { foreground, interactive } = navContrastColors(theme);
+    const { foreground, interactive, urgent } = navContrastColors(theme);
     const navTheme = {
         base: {
             palette: {
                 'primary-background': theme.components['app-shell'].nav['background-color'],
                 'foreground-color': foreground,
-                interactive
+                interactive,
+                urgent
             }
         }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport {\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useTheme,\n  useUID\n} from '../../hooks';\nimport Configuration from '../Configuration/Configuration';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './Drawer.styles';\nimport { navContrastColors } from './style-utils';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n  content,\n  header,\n  onDrawerOpen,\n  onDrawerClose,\n  drawerOpen,\n  setDrawerOpen\n}: DrawerViewProps) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const { focusedImperatively } = useContext(AppShellContext);\n  const { start } = useDirection();\n  const returnFocusRef = useRef<HTMLElement>();\n  const [drawerEl, setDrawerEl] = useElement<HTMLDivElement>();\n  const drawerRef = useConsolidatedRef(setDrawerEl);\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const headerId = useUID();\n\n  useEscape(\n    () => {\n      setDrawerOpen(false);\n    },\n    drawerEl,\n    [drawerEl]\n  );\n\n  useFocusTrap(drawerRef);\n\n  const { foreground, interactive } = navContrastColors(theme);\n  const navTheme = {\n    base: {\n      palette: {\n        'primary-background': theme.components['app-shell'].nav['background-color'],\n        'foreground-color': foreground,\n        interactive\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={navTheme} portalTarget={drawerEl ?? undefined}>\n      <Drawer\n        role='dialog'\n        aria-labelledby={headerId}\n        as={StyledDrawerWrapper}\n        position='fixed'\n        placement={start}\n        open={drawerOpen}\n        nullWhenClosed\n        onBeforeOpen={() => {\n          returnFocusRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        }}\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          onDrawerClose?.();\n          returnFocusRef.current?.focus();\n        }}\n        onOuterClick={() => setDrawerOpen(false)}\n        ref={drawerRef}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            aria-label={t('close_noun', [header])}\n          >\n            <Icon name={`arrow-${start}`} />\n          </BareButton>\n          <Text variant='h2' id={headerId}>\n            {header}\n          </Text>\n        </Flex>\n        <Flex\n          as={StyledDrawerListContainer}\n          container={{ direction: 'column' }}\n          aria-labelledby={headerId}\n        >\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport {\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useTheme,\n  useUID\n} from '../../hooks';\nimport Configuration from '../Configuration/Configuration';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './Drawer.styles';\nimport { navContrastColors } from './style-utils';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n  content,\n  header,\n  onDrawerOpen,\n  onDrawerClose,\n  drawerOpen,\n  setDrawerOpen\n}: DrawerViewProps) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const { focusedImperatively } = useContext(AppShellContext);\n  const { start } = useDirection();\n  const returnFocusRef = useRef<HTMLElement>();\n  const [drawerEl, setDrawerEl] = useElement<HTMLDivElement>();\n  const drawerRef = useConsolidatedRef(setDrawerEl);\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const headerId = useUID();\n\n  useEscape(\n    () => {\n      setDrawerOpen(false);\n    },\n    drawerEl,\n    [drawerEl]\n  );\n\n  useFocusTrap(drawerRef);\n\n  const { foreground, interactive, urgent } = navContrastColors(theme);\n  const navTheme = {\n    base: {\n      palette: {\n        'primary-background': theme.components['app-shell'].nav['background-color'],\n        'foreground-color': foreground,\n        interactive,\n        urgent\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={navTheme} portalTarget={drawerEl ?? undefined}>\n      <Drawer\n        role='dialog'\n        aria-labelledby={headerId}\n        as={StyledDrawerWrapper}\n        position='fixed'\n        placement={start}\n        open={drawerOpen}\n        nullWhenClosed\n        onBeforeOpen={() => {\n          returnFocusRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        }}\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          onDrawerClose?.();\n          returnFocusRef.current?.focus();\n        }}\n        onOuterClick={() => setDrawerOpen(false)}\n        ref={drawerRef}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            aria-label={t('close_noun', [header])}\n          >\n            <Icon name={`arrow-${start}`} />\n          </BareButton>\n          <Text variant='h2' id={headerId}>\n            {header}\n          </Text>\n        </Flex>\n        <Flex\n          as={StyledDrawerListContainer}\n          container={{ direction: 'column' }}\n          aria-labelledby={headerId}\n        >\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}

package/lib/components/AppShell/style-utils.d.ts

@@ -4,6 +4,7 @@ export declare const navContrastColors: (theme: DefaultTheme) => {
     foreground: string;
     border: string;
     interactive: string;
+    urgent: string;
 };
 export declare const pxToRem: (n: number) => string;
 //# sourceMappingURL=style-utils.d.ts.map

package/lib/components/AppShell/style-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB,UACrB,YAAY;aAEV,MAAM;gBACH,MAAM;YACV,MAAM;iBACD,MAAM;CA2BpB,CAAC;AAEF,eAAO,MAAM,OAAO,MAAO,MAAM,KAAG,MAA4B,CAAC"}
+{"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB,UACrB,YAAY;aAEV,MAAM;gBACH,MAAM;YACV,MAAM;iBACD,MAAM;YACX,MAAM;CA6Bf,CAAC;AAEF,eAAO,MAAM,OAAO,MAAO,MAAM,KAAG,MAA4B,CAAC"}

package/lib/components/AppShell/style-utils.js

@@ -1,7 +1,7 @@
 import { darken, getContrast, lighten, readableColor, transparentize } from 'polished';
 import { readableHue } from '../../styles';
 export const navContrastColors = (theme) => {
-    const { base: { palette: { interactive } }, components: { 'app-shell': { nav: { 'background-color': navBg } } } } = theme;
+    const { base: { palette: { interactive, urgent } }, components: { 'app-shell': { nav: { 'background-color': navBg } } } } = theme;
     let hoverBg = darken(0.05, navBg);
     if (getContrast(navBg, hoverBg) === 1) {
         hoverBg = lighten(0.15, navBg);
@@ -9,11 +9,13 @@ export const navContrastColors = (theme) => {
     const foregroundColor = readableColor(navBg);
     const borderColor = transparentize(0.8, foregroundColor);
     const interactiveColor = readableHue(interactive, navBg);
+    const urgentColor = readableHue(urgent, navBg);
     return {
         hoverBg,
         foreground: foregroundColor,
         border: borderColor,
-        interactive: interactiveColor
+        interactive: interactiveColor,
+        urgent: urgentColor
     };
 };
 export const pxToRem = (n) => `${n * 0.0625}rem`;

package/lib/components/AppShell/style-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAGvF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAmB,EAMnB,EAAE;IACF,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,EACzB,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EACnC,EACF,EACF,GAAG,KAAK,CAAC;IACV,IAAI,OAAO,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClC,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE;QACrC,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAChC;IAED,MAAM,eAAe,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACzD,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAEzD,OAAO;QACL,OAAO;QACP,UAAU,EAAE,eAAe;QAC3B,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,gBAAgB;KAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,KAAK,CAAC","sourcesContent":["import { darken, getContrast, lighten, readableColor, transparentize } from 'polished';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { readableHue } from '../../styles';\n\nexport const navContrastColors = (\n  theme: DefaultTheme\n): {\n  hoverBg: string;\n  foreground: string;\n  border: string;\n  interactive: string;\n} => {\n  const {\n    base: {\n      palette: { interactive }\n    },\n    components: {\n      'app-shell': {\n        nav: { 'background-color': navBg }\n      }\n    }\n  } = theme;\n  let hoverBg = darken(0.05, navBg);\n  if (getContrast(navBg, hoverBg) === 1) {\n    hoverBg = lighten(0.15, navBg);\n  }\n\n  const foregroundColor = readableColor(navBg);\n  const borderColor = transparentize(0.8, foregroundColor);\n  const interactiveColor = readableHue(interactive, navBg);\n\n  return {\n    hoverBg,\n    foreground: foregroundColor,\n    border: borderColor,\n    interactive: interactiveColor\n  };\n};\n\nexport const pxToRem = (n: number): string => `${n * 0.0625}rem`;\n"]}
+{"version":3,"file":"style-utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAGvF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAmB,EAOnB,EAAE;IACF,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EACjC,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EACnC,EACF,EACF,GAAG,KAAK,CAAC;IACV,IAAI,OAAO,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClC,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE;QACrC,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAChC;IAED,MAAM,eAAe,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACzD,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAE/C,OAAO;QACL,OAAO;QACP,UAAU,EAAE,eAAe;QAC3B,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,gBAAgB;QAC7B,MAAM,EAAE,WAAW;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,KAAK,CAAC","sourcesContent":["import { darken, getContrast, lighten, readableColor, transparentize } from 'polished';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { readableHue } from '../../styles';\n\nexport const navContrastColors = (\n  theme: DefaultTheme\n): {\n  hoverBg: string;\n  foreground: string;\n  border: string;\n  interactive: string;\n  urgent: string;\n} => {\n  const {\n    base: {\n      palette: { interactive, urgent }\n    },\n    components: {\n      'app-shell': {\n        nav: { 'background-color': navBg }\n      }\n    }\n  } = theme;\n  let hoverBg = darken(0.05, navBg);\n  if (getContrast(navBg, hoverBg) === 1) {\n    hoverBg = lighten(0.15, navBg);\n  }\n\n  const foregroundColor = readableColor(navBg);\n  const borderColor = transparentize(0.8, foregroundColor);\n  const interactiveColor = readableHue(interactive, navBg);\n  const urgentColor = readableHue(urgent, navBg);\n\n  return {\n    hoverBg,\n    foreground: foregroundColor,\n    border: borderColor,\n    interactive: interactiveColor,\n    urgent: urgentColor\n  };\n};\n\nexport const pxToRem = (n: number): string => `${n * 0.0625}rem`;\n"]}

package/lib/components/Badges/Selection.js

@@ -90,7 +90,7 @@ const Selectable = forwardRef(function Selectable({ testId, id, children, onSele
             onRemove?.(id);
         }
     };
-    return (_jsxs(StyledSelectable, { "data-testid": testIds.root, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [_jsx("span", { children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: '-1', onClick: handleCloseClick, "aria-label": t('remove'), children: _jsx(Icon, { name: 'times' }) }))] }));
+    return (_jsxs(StyledSelectable, { "data-testid": testIds.root, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [_jsx("span", { "aria-hidden": true, children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: '-1', onClick: handleCloseClick, "aria-label": t('remove_noun', [children]), children: _jsx(Icon, { name: 'times' }) }))] }));
 });
 export default withTestIds(Selectable, getSelectableTestIds);
 //# sourceMappingURL=Selection.js.map

package/lib/components/Badges/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport type { ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius },\n      components: {\n        badges: { selectable }\n      }\n    }\n  }) => {\n    const { foreground, background } = selectable.base;\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, background, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, background, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const height = 1.125;\n    return css`\n      background: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${foreground};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        line-height: normal;\n      }\n\n      &:hover {\n        color: ${interactive};\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${background};\n      }\n\n      &:focus {\n        color: ${interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(function Selectable(\n  {\n    testId,\n    id,\n    children,\n    onSelect,\n    onRemove,\n    onClick,\n    onKeyUp,\n    ...restProps\n  }: PropsWithoutRef<SelectableProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const consolidatedRef = useConsolidatedRef(ref);\n  const t = useI18n();\n  const testIds = useTestIds(testId, getSelectableTestIds);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onSelect?.(id);\n  };\n\n  const handleCloseClick = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onRemove?.(id);\n  };\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    onKeyUp?.(e);\n    if (e.key === 'Enter') {\n      onSelect?.(id);\n    }\n\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      onRemove?.(id);\n    }\n  };\n\n  return (\n    <StyledSelectable\n      data-testid={testIds.root}\n      ref={consolidatedRef}\n      onClick={handleClick}\n      onKeyUp={handleKeyUp}\n      {...restProps}\n    >\n      <span>{children}</span>\n      {onRemove && (\n        <BareButton\n          data-testid={testIds.remove}\n          tabIndex='-1'\n          onClick={handleCloseClick}\n          aria-label={t('remove')}\n        >\n          <Icon name='times' />\n        </BareButton>\n      )}\n    </StyledSelectable>\n  );\n});\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport type { ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n  onSelect?: (id: string) => void;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler called when the Badge is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius },\n      components: {\n        badges: { selectable }\n      }\n    }\n  }) => {\n    const { foreground, background } = selectable.base;\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = tryCatch(() => mix(0.15, background, primaryBackground));\n    const hoverBorder = tryCatch(() => mix(0.3, background, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const height = 1.125;\n    return css`\n      background: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${foreground};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        line-height: normal;\n      }\n\n      &:hover {\n        color: ${interactive};\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${background};\n      }\n\n      &:focus {\n        color: ${interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${interactive};\n        }\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(function Selectable(\n  {\n    testId,\n    id,\n    children,\n    onSelect,\n    onRemove,\n    onClick,\n    onKeyUp,\n    ...restProps\n  }: PropsWithoutRef<SelectableProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const consolidatedRef = useConsolidatedRef(ref);\n  const t = useI18n();\n  const testIds = useTestIds(testId, getSelectableTestIds);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onSelect?.(id);\n  };\n\n  const handleCloseClick = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onRemove?.(id);\n  };\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    onKeyUp?.(e);\n    if (e.key === 'Enter') {\n      onSelect?.(id);\n    }\n\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      onRemove?.(id);\n    }\n  };\n\n  return (\n    <StyledSelectable\n      data-testid={testIds.root}\n      ref={consolidatedRef}\n      onClick={handleClick}\n      onKeyUp={handleKeyUp}\n      {...restProps}\n    >\n      <span aria-hidden>{children}</span>\n      {onRemove && (\n        <BareButton\n          data-testid={testIds.remove}\n          tabIndex='-1'\n          onClick={handleCloseClick}\n          aria-label={t('remove_noun', [children])}\n        >\n          <Icon name='times' />\n        </BareButton>\n      )}\n    </StyledSelectable>\n  );\n});\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAc1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAShD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAc1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAmFzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldGroup/FieldGroupList.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
 import Icon, { registerIcon } from '../Icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
 import { useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
+import { getActiveElement, getFocusables } from '../../utils';
 import FieldGroup, { StyledFieldGroup } from './FieldGroup';
 registerIcon(plusIcon);
 const StyledFieldGroupList = styled.div(({ theme }) => css `
@@ -35,7 +36,25 @@ const StyledAddButton = styled(Button)(({ theme }) => css `
 StyledAddButton.defaultProps = defaultThemeProp;
 const FieldGroupList = forwardRef(function FieldGroupList({ items, onAdd, onDelete, ...restProps }, ref) {
     const t = useI18n();
-    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, headingTag, onDelete: itemOnDelete, ...restItemProps }) => {
+    const lastItemRef = useRef(null);
+    const addBtnRef = useRef(null);
+    useEffect(() => {
+        const currentActiveEl = getActiveElement();
+        if (currentActiveEl === addBtnRef.current && lastItemRef.current) {
+            const groupItemLegend = lastItemRef.current.querySelector(':scope > legend');
+            const focusables = getFocusables(lastItemRef.current);
+            const groupActionButtons = focusables.filter(focusable => groupItemLegend?.contains(focusable));
+            const groupContentFocusables = focusables.filter(focusable => !groupItemLegend?.contains(focusable));
+            if (groupContentFocusables.length > 0) {
+                groupContentFocusables[0].focus();
+            }
+            else {
+                groupActionButtons[0]?.focus();
+            }
+        }
+    }, [items.length]);
+    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, headingTag, onDelete: itemOnDelete, ...restItemProps }, index) => {
+                const isLastItem = index === items.length - 1;
                 return (_jsx(StyledListItem, { name: name, headingTag: headingTag, ...restItemProps, actions: onDelete || itemOnDelete
                         ? [
                             {
@@ -49,8 +68,8 @@ const FieldGroupList = forwardRef(function FieldGroupList({ items, onAdd, onDele
                                 }
                             }
                         ]
-                        : undefined, children: children }, id));
-            }), onAdd && (_jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, children: [_jsx(Icon, { name: 'plus' }), " ", t('add')] }))] }));
+                        : undefined, ref: isLastItem ? lastItemRef : undefined, children: children }, id));
+            }), onAdd && (_jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, ref: addBtnRef, children: [_jsx(Icon, { name: 'plus' }), " ", t('add')] }))] }));
 });
 export default FieldGroupList;
 //# sourceMappingURL=FieldGroupList.js.map