@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledSummaryItem } from '../SummaryItem';\nimport { StyledText } from '../Text';\n\nimport { navContrastColors } from './style-utils';\n\n/* AppShellList styles */\nexport const StyledAppShellListWrapper = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    max-height: 100%;\n    white-space: nowrap;\n\n    ${StyledSummaryItem} {\n      position: relative;\n      &::after {\n        content: '';\n        position: absolute;\n        top: calc(100% - 0.03125rem);\n        inset-inline-end: 1rem;\n        inset-inline-start: 1rem;\n        height: 0.0625rem;\n        background-color: ${borderColor};\n      }\n    }\n  `;\n});\n\nStyledAppShellListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellList = styled.ul``;\n\nStyledAppShellList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSummaryList = styled.li(({ theme }) => {\n  const { hoverBg } = navContrastColors(theme);\n\n  return css`\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n      color: inherit;\n      background-color: transparent;\n      border: none;\n      text-decoration: none;\n      cursor: pointer;\n      text-align: start;\n      white-space: normal;\n      width: 100%;\n\n      &:hover,\n      &:focus {\n        background-color: ${hoverBg};\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\n\nStyledAppShellSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledAppShellPinButton = styled.button(({ theme }) => {\n  const { foreground, hoverBg: listHoverBg } = navContrastColors(theme);\n  let hoverBg = darken(0.1, listHoverBg);\n\n  if (getContrast(hoverBg, listHoverBg) < 1.3) {\n    hoverBg = lighten(0.1, listHoverBg);\n  }\n\n  return css`\n    color: inherit;\n    border: none;\n    background-color: transparent;\n\n    &:hover,\n    &:focus {\n      color: ${foreground};\n      background-color: ${hoverBg};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledAppShellPinButton.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean; visualIncluded?: boolean }>(\n  ({ theme, unread, visualIncluded }) => {\n    const { foreground } = navContrastColors(theme);\n\n    return css`\n      position: relative;\n      ${StyledAlert} {\n        display: ${unread ? 'auto' : 'none'};\n        position: absolute;\n        inset-inline-start: -0.65625rem;\n        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};\n        background-color: ${foreground};\n        height: 0.3125rem;\n        width: 0.3125rem;\n      }\n    `;\n  }\n);\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    font-weight: ${unread\n      ? theme.base['font-weight'].bold\n      : theme.base['font-weight']['semi-bold']};\n    color: ${foreground};\n  `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n  ({ theme, unread }) => {\n    return css`\n      ${StyledText} {\n        opacity: ${unread\n          ? theme.base.transparency['transparent-1']\n          : theme.base.transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const EmptyStateColorContrast = styled.div(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    ${StyledEmptyState} {\n      span,\n      svg {\n        color: ${foreground};\n      }\n    }\n  `;\n});\n\nEmptyStateColorContrast.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledAppShellListSection.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListHeading = styled.h3(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${nestedListHeader};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledAppShellListHeading.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppShellList.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledSummaryItem } from '../SummaryItem';\nimport { StyledText } from '../Text';\n\nimport { navContrastColors } from './style-utils';\n\n/* AppShellList styles */\nexport const StyledAppShellListWrapper = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    max-height: 100%;\n    white-space: nowrap;\n\n    ${StyledSummaryItem} {\n      position: relative;\n      &::after {\n        content: '';\n        position: absolute;\n        top: calc(100% - 0.03125rem);\n        inset-inline-end: 1rem;\n        inset-inline-start: 1rem;\n        height: 0.0625rem;\n        background-color: ${borderColor};\n      }\n    }\n  `;\n});\n\nStyledAppShellListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellList = styled.ul``;\n\nStyledAppShellList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSummaryList = styled.li(({ theme }) => {\n  const { hoverBg } = navContrastColors(theme);\n\n  return css`\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n      color: inherit;\n      background-color: transparent;\n      border: none;\n      text-decoration: none;\n      cursor: pointer;\n      text-align: start;\n      white-space: normal;\n      width: 100%;\n\n      &:hover,\n      &:focus {\n        background-color: ${hoverBg};\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\n\nStyledAppShellSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledAppShellPinButton = styled.button(({ theme }) => {\n  const { foreground, hoverBg: listHoverBg } = navContrastColors(theme);\n  let hoverBg = darken(0.1, listHoverBg);\n\n  if (getContrast(hoverBg, listHoverBg) < 1.3) {\n    hoverBg = lighten(0.1, listHoverBg);\n  }\n\n  return css`\n    color: inherit;\n    border: none;\n    background-color: transparent;\n\n    &:hover,\n    &:focus {\n      color: ${foreground};\n      background-color: ${hoverBg};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledAppShellPinButton.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean; visualIncluded?: boolean }>(\n  ({ theme, unread, visualIncluded }) => {\n    const { foreground } = navContrastColors(theme);\n\n    return css`\n      position: relative;\n      ${StyledAlert} {\n        display: ${unread ? 'auto' : 'none'};\n        position: absolute;\n        inset-inline-start: -0.65625rem;\n        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};\n        background-color: ${foreground};\n        height: 0.3125rem;\n        width: 0.3125rem;\n      }\n    `;\n  }\n);\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    font-weight: ${unread\n      ? theme.base['font-weight'].bold\n      : theme.base['font-weight']['semi-bold']};\n    color: ${foreground};\n  `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n  ({ theme, unread }) => {\n    return css`\n      ${StyledText} {\n        opacity: ${unread\n          ? theme.base.transparency['transparent-1']\n          : theme.base.transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const EmptyStateColorContrast = styled.div(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    ${StyledEmptyState} {\n      span,\n      svg {\n        color: ${foreground};\n      }\n    }\n  `;\n});\n\nEmptyStateColorContrast.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n  `;\n});\n\nStyledAppShellListSection.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListHeading = styled.h3(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${nestedListHeader};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledAppShellListHeading.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellSearch.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAO3C,OAAO,KAAK,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAS/E,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAiElD,CAAC"}
+{"version":3,"file":"AppShellSearch.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAO3C,OAAO,KAAK,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAQ/E,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAgElD,CAAC"}

package/lib/components/AppShell/AppShellSearch.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useContext } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useBreakpoint, useI18n } from '../../hooks';
 import Icon from '../Icon';
 import SearchInput from '../SearchInput';
 import NavigationListItemWrapper from './NavigationListItemWrapper';
 import { StyledAppShellSearchButton, StyledAppshellSearchContainer, StyledAppShellSearchDecoration, StyledSearch } from './AppShellSearch.styles';
-import AppShellContext from './AppShellContext';
 export const AppShellSearch = ({ collapsed, searchLabel, searchInput }) => {
     const btnElRef = useRef(null);
     const formElRef = useRef(null);
@@ -13,7 +12,6 @@ export const AppShellSearch = ({ collapsed, searchLabel, searchInput }) => {
     const t = useI18n();
     const [menuOpen, setMenuOpen] = useState(false);
     const isMediumOrAbove = useBreakpoint('md');
-    const { navState, mobileNavOpen } = useContext(AppShellContext);
     const onMenuToggle = state => {
         setMenuOpen(state === 'open');
     };
@@ -34,6 +32,6 @@ export const AppShellSearch = ({ collapsed, searchLabel, searchInput }) => {
         'aria-label': searchLabel,
         onSubmit: (e) => e.preventDefault()
     };
-    return (_jsx(StyledSearch, { collapsed: collapsed, isMediumOrAbove: isMediumOrAbove, children: navState === 'closed' && !mobileNavOpen ? (_jsx(NavigationListItemWrapper, { childElementRef: formElRef, label: t('search_placeholder_default'), tooltipLabel: t('search_placeholder_default'), onMenuToggle: onMenuToggle, content: _jsx(StyledAppshellSearchContainer, { children: _jsx(SearchInput, { ...searchInput, resultsPopover: false, ref: searchRef }) }), children: _jsx("form", { ...searchFormProps, ref: formElRef, children: _jsx(StyledAppShellSearchButton, { "aria-label": t('search'), ref: btnElRef, children: _jsx(StyledAppShellSearchDecoration, { children: _jsx(Icon, { name: 'search' }) }) }) }) })) : (_jsx("form", { ...searchFormProps, children: _jsx(SearchInput, { ...searchInput }) })) }));
+    return (_jsx(StyledSearch, { collapsed: collapsed, isMediumOrAbove: isMediumOrAbove, children: collapsed ? (_jsx(NavigationListItemWrapper, { childElementRef: formElRef, label: t('search_placeholder_default'), tooltipLabel: t('search_placeholder_default'), onMenuToggle: onMenuToggle, content: _jsx(StyledAppshellSearchContainer, { children: _jsx(SearchInput, { ...searchInput, resultsPopover: false, ref: searchRef }) }), children: _jsx("form", { ...searchFormProps, ref: formElRef, children: _jsx(StyledAppShellSearchButton, { "aria-label": t('search'), ref: btnElRef, children: _jsx(StyledAppShellSearchDecoration, { children: _jsx(Icon, { name: 'search' }) }) }) }) })) : (_jsx("form", { ...searchFormProps, children: _jsx(SearchInput, { ...searchInput }) })) }));
 };
 //# sourceMappingURL=AppShellSearch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellSearch.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, useContext } from 'react';\nimport type { FC, FormEvent } from 'react';\n\nimport { useBreakpoint, useI18n } from '../../hooks';\nimport Icon from '../Icon';\nimport SearchInput from '../SearchInput';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport type { AppShellProps, NavListItemWrapperProps } from './AppShell.types';\nimport {\n  StyledAppShellSearchButton,\n  StyledAppshellSearchContainer,\n  StyledAppShellSearchDecoration,\n  StyledSearch\n} from './AppShellSearch.styles';\nimport AppShellContext from './AppShellContext';\n\nexport interface AppShellSearchProps {\n  collapsed: boolean;\n  searchLabel: string;\n  searchInput: AppShellProps['searchInput'];\n}\n\nexport const AppShellSearch: FC<AppShellSearchProps> = ({\n  collapsed,\n  searchLabel,\n  searchInput\n}) => {\n  const btnElRef = useRef<HTMLButtonElement>(null);\n  const formElRef = useRef<HTMLFormElement>(null);\n  const searchRef = useRef<HTMLInputElement>();\n  const t = useI18n();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const isMediumOrAbove = useBreakpoint('md');\n  const { navState, mobileNavOpen } = useContext(AppShellContext);\n\n  const onMenuToggle: NavListItemWrapperProps['onMenuToggle'] = state => {\n    setMenuOpen(state === 'open');\n  };\n\n  useEffect(() => {\n    const onTab = (e: KeyboardEvent) => {\n      if (menuOpen && e.key === 'Tab') {\n        e.preventDefault();\n        searchRef.current?.focus();\n      }\n    };\n    btnElRef.current?.addEventListener('keydown', onTab);\n    return () => {\n      btnElRef.current?.removeEventListener('keydown', onTab);\n    };\n  }, [searchRef, menuOpen]);\n\n  const searchFormProps = {\n    role: 'search',\n    'aria-label': searchLabel,\n    onSubmit: (e: FormEvent) => e.preventDefault()\n  };\n\n  return (\n    <StyledSearch collapsed={collapsed} isMediumOrAbove={isMediumOrAbove}>\n      {navState === 'closed' && !mobileNavOpen ? (\n        <NavigationListItemWrapper\n          childElementRef={formElRef}\n          label={t('search_placeholder_default')}\n          tooltipLabel={t('search_placeholder_default')}\n          onMenuToggle={onMenuToggle}\n          content={\n            <StyledAppshellSearchContainer>\n              <SearchInput {...searchInput} resultsPopover={false} ref={searchRef} />\n            </StyledAppshellSearchContainer>\n          }\n        >\n          <form {...searchFormProps} ref={formElRef}>\n            <StyledAppShellSearchButton aria-label={t('search')} ref={btnElRef}>\n              <StyledAppShellSearchDecoration>\n                <Icon name='search' />\n              </StyledAppShellSearchDecoration>\n            </StyledAppShellSearchButton>\n          </form>\n        </NavigationListItemWrapper>\n      ) : (\n        <form {...searchFormProps}>\n          <SearchInput {...searchInput} />\n        </form>\n      )}\n    </StyledSearch>\n  );\n};\n"]}
+{"version":3,"file":"AppShellSearch.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,EAC7B,8BAA8B,EAC9B,YAAY,EACb,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,SAAS,EACT,WAAW,EACX,WAAW,EACZ,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,MAAM,EAAoB,CAAC;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE5C,MAAM,YAAY,GAA4C,KAAK,CAAC,EAAE;QACpE,WAAW,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACrD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,MAAM,eAAe,GAAG;QACtB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,WAAW;QACzB,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;KAC/C,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,IAAC,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,YACjE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,yBAAyB,IACxB,eAAe,EAAE,SAAS,EAC1B,KAAK,EAAE,CAAC,CAAC,4BAA4B,CAAC,EACtC,YAAY,EAAE,CAAC,CAAC,4BAA4B,CAAC,EAC7C,YAAY,EAAE,YAAY,EAC1B,OAAO,EACL,KAAC,6BAA6B,cAC5B,KAAC,WAAW,OAAK,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,GAAI,GACzC,YAGlC,kBAAU,eAAe,EAAE,GAAG,EAAE,SAAS,YACvC,KAAC,0BAA0B,kBAAa,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,YAChE,KAAC,8BAA8B,cAC7B,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACS,GACN,GACxB,GACmB,CAC7B,CAAC,CAAC,CAAC,CACF,kBAAU,eAAe,YACvB,KAAC,WAAW,OAAK,WAAW,GAAI,GAC3B,CACR,GACY,CAChB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { FC, FormEvent } from 'react';\n\nimport { useBreakpoint, useI18n } from '../../hooks';\nimport Icon from '../Icon';\nimport SearchInput from '../SearchInput';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport type { AppShellProps, NavListItemWrapperProps } from './AppShell.types';\nimport {\n  StyledAppShellSearchButton,\n  StyledAppshellSearchContainer,\n  StyledAppShellSearchDecoration,\n  StyledSearch\n} from './AppShellSearch.styles';\n\nexport interface AppShellSearchProps {\n  collapsed: boolean;\n  searchLabel: string;\n  searchInput: AppShellProps['searchInput'];\n}\n\nexport const AppShellSearch: FC<AppShellSearchProps> = ({\n  collapsed,\n  searchLabel,\n  searchInput\n}) => {\n  const btnElRef = useRef<HTMLButtonElement>(null);\n  const formElRef = useRef<HTMLFormElement>(null);\n  const searchRef = useRef<HTMLInputElement>();\n  const t = useI18n();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const isMediumOrAbove = useBreakpoint('md');\n\n  const onMenuToggle: NavListItemWrapperProps['onMenuToggle'] = state => {\n    setMenuOpen(state === 'open');\n  };\n\n  useEffect(() => {\n    const onTab = (e: KeyboardEvent) => {\n      if (menuOpen && e.key === 'Tab') {\n        e.preventDefault();\n        searchRef.current?.focus();\n      }\n    };\n    btnElRef.current?.addEventListener('keydown', onTab);\n    return () => {\n      btnElRef.current?.removeEventListener('keydown', onTab);\n    };\n  }, [searchRef, menuOpen]);\n\n  const searchFormProps = {\n    role: 'search',\n    'aria-label': searchLabel,\n    onSubmit: (e: FormEvent) => e.preventDefault()\n  };\n\n  return (\n    <StyledSearch collapsed={collapsed} isMediumOrAbove={isMediumOrAbove}>\n      {collapsed ? (\n        <NavigationListItemWrapper\n          childElementRef={formElRef}\n          label={t('search_placeholder_default')}\n          tooltipLabel={t('search_placeholder_default')}\n          onMenuToggle={onMenuToggle}\n          content={\n            <StyledAppshellSearchContainer>\n              <SearchInput {...searchInput} resultsPopover={false} ref={searchRef} />\n            </StyledAppshellSearchContainer>\n          }\n        >\n          <form {...searchFormProps} ref={formElRef}>\n            <StyledAppShellSearchButton aria-label={t('search')} ref={btnElRef}>\n              <StyledAppShellSearchDecoration>\n                <Icon name='search' />\n              </StyledAppShellSearchDecoration>\n            </StyledAppShellSearchButton>\n          </form>\n        </NavigationListItemWrapper>\n      ) : (\n        <form {...searchFormProps}>\n          <SearchInput {...searchInput} />\n        </form>\n      )}\n    </StyledSearch>\n  );\n};\n"]}

package/lib/components/AppShell/AppShellSearch.styles.d.ts

@@ -1,8 +1,10 @@
-export declare const StyledSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledSearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     collapsed: boolean;
     isMediumOrAbove: boolean;
-}, never>;
-export declare const StyledAppShellSearchDecoration: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppShellSearchButton: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppshellSearchContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+}>> & string;
+export declare const StyledAppShellSearchDecoration: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAppShellSearchButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledAppshellSearchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=AppShellSearch.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellSearch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"AAwBA,eAAO,MAAM,YAAY;eAA2B,OAAO;qBAAmB,OAAO;SAwJpF,CAAC;AAIF,eAAO,MAAM,8BAA8B,yGAczC,CAAC;AAIH,eAAO,MAAM,0BAA0B,mMAQtC,CAAC;AAIF,eAAO,MAAM,6BAA6B,yGAIxC,CAAC"}
+{"version":3,"file":"AppShellSearch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"AAwBA,eAAO,MAAM,YAAY;eAA2B,OAAO;qBAAmB,OAAO;YAwJpF,CAAC;AAIF,eAAO,MAAM,8BAA8B,6NAczC,CAAC;AAIH,eAAO,MAAM,0BAA0B;;0KAQtC,CAAC;AAIF,eAAO,MAAM,6BAA6B,6NAIxC,CAAC"}

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

@@ -1,4 +1,4 @@
-import { darken, getContrast, lighten, transparentize } from 'polished';
+import { darken, getContrast, lighten, rem, transparentize } from 'polished';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import BareButton from '../Button/BareButton';
@@ -11,7 +11,7 @@ import { StyledText } from '../Text';
 import { StyledBackdrop } from '../Backdrop';
 import { StyledEmptyState } from '../EmptyState';
 import { navWidth } from './AppShell.styles';
-import { navContrastColors, pxToRem } from './style-utils';
+import { navContrastColors } from './style-utils';
 export const StyledSearch = styled.div(({ theme, collapsed, isMediumOrAbove }) => {
     const navBg = theme.components['app-shell'].nav.background;
     const { hoverBg, foreground, border: borderColor, backgroundColor } = navContrastColors(theme);
@@ -106,7 +106,7 @@ export const StyledSearch = styled.div(({ theme, collapsed, isMediumOrAbove }) =
           }
 
           &:hover {
-            border-inline-start: ${pxToRem(1)} solid ${borderColor};
+            border-inline-start: ${rem(1)} solid ${borderColor};
           }
         }
 

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellSearch.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport { StyledLink } from '../Link';\nimport { StyledMenuItem } from '../Menu';\nimport { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n  StyledClearButton,\n  StyledFiltersPopover,\n  StyledSearchFiltersButton,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchIcon\n} from '../SearchInput/SearchInput.styles';\nimport { StyledText } from '../Text';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledEmptyState } from '../EmptyState';\n\nimport { navWidth } from './AppShell.styles';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const StyledSearch = styled.div<{ collapsed: boolean; isMediumOrAbove: boolean }>(\n  ({ theme, collapsed, isMediumOrAbove }) => {\n    const navBg = theme.components['app-shell'].nav.background;\n    const { hoverBg, foreground, border: borderColor, backgroundColor } = navContrastColors(theme);\n    const maxCollapsedSize = theme.components.input.height;\n    let activeColor = hoverBg;\n    let hoverColor = lighten(0.1, hoverBg);\n\n    if (getContrast(backgroundColor, hoverColor) < 1.3) {\n      activeColor = darken(0.2, hoverBg);\n      hoverColor = hoverBg;\n    }\n\n    return css`\n      flex-shrink: 0;\n      justify-content: center;\n\n      ${StyledMenuListContainer} {\n        background: transparent;\n      }\n\n      > form {\n        padding: ${theme.base.spacing} 0;\n      }\n\n      header {\n        ${StyledText} {\n          color: ${transparentize(0.1, foreground)};\n        }\n      }\n\n      ${StyledBackdrop} {\n        background: transparent;\n      }\n\n      ${StyledEmptyState} {\n        span,\n        svg {\n          color: ${foreground};\n        }\n      }\n\n      ${StyledMenu} {\n        background: ${navBg};\n\n        &[data-active-scope='true'] [data-current='true'] {\n          background-color: ${activeColor};\n        }\n\n        ${StyledLink} {\n          color: ${foreground};\n        }\n      }\n\n      ${StyledMenuItem} {\n        color: ${foreground};\n\n        li {\n          color: ${foreground};\n        }\n\n        &:focus-within {\n          background-color: ${activeColor};\n        }\n\n        &:hover:not([aria-disabled='true']) {\n          background-color: ${hoverColor};\n        }\n      }\n\n      ${StyledFiltersPopover}, ${StyledResultsPopover} {\n        background-color: ${navBg};\n        z-index: calc(${theme.base['z-index'].backdrop} + 1);\n      }\n\n      ${StyledSearchInput} {\n        border: none;\n        background: transparent;\n\n        ${StyledSearchButton} {\n          transition: borderRadius calc(${theme.base.animation.speed} * 2);\n          border: none;\n          border-start-start-radius: inherit;\n          border-end-start-radius: inherit;\n        }\n\n        ${StyledClearButton},\n        ${StyledSearchIcon} {\n          color: ${foreground};\n        }\n\n        input {\n          &::placeholder {\n            color: ${transparentize(0.4, foreground)};\n          }\n\n          &:hover {\n            border-inline-start: ${pxToRem(1)} solid ${borderColor};\n          }\n        }\n\n        input,\n        ${StyledSearchFiltersButton}, ${StyledSearchButton} {\n          background: ${hoverBg};\n          color: ${foreground};\n          border-color: transparent;\n\n          &:focus-within {\n            border-color: transparent;\n          }\n\n          &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within),\n          &:hover {\n            border-color: ${borderColor};\n          }\n        }\n      }\n\n      form > ${StyledSearchInput} {\n        background: ${hoverBg};\n        margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n\n        ${collapsed &&\n        isMediumOrAbove &&\n        css`\n          overflow: hidden;\n          ${StyledSearchButton} {\n            border-radius: calc(\n              ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}\n            );\n            height: ${maxCollapsedSize};\n            width: ${maxCollapsedSize};\n            padding: 0;\n\n            > :not(:first-child) {\n              display: none;\n            }\n          }\n\n          input {\n            padding: 0;\n            max-width: 0;\n            overflow: hidden;\n          }\n\n          ${StyledClearButton} {\n            display: none;\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchDecoration = styled.div(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    width: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: ${hoverBg};\n    color: ${foreground};\n    margin: 0 auto;\n  `;\n});\n\nStyledAppShellSearchDecoration.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchButton = styled(BareButton)`\n  width: 100%;\n  &:focus {\n    ${StyledAppShellSearchDecoration} {\n      outline: none;\n      box-shadow: ${props => props.theme.base.shadow['focus-inset']};\n    }\n  }\n`;\n\nStyledAppShellSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {\n  return css`\n    padding: ${base.spacing};\n  `;\n});\n\nStyledAppshellSearchContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppShellSearch.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten, rem, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport { StyledLink } from '../Link';\nimport { StyledMenuItem } from '../Menu';\nimport { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n  StyledClearButton,\n  StyledFiltersPopover,\n  StyledSearchFiltersButton,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchIcon\n} from '../SearchInput/SearchInput.styles';\nimport { StyledText } from '../Text';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledEmptyState } from '../EmptyState';\n\nimport { navWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledSearch = styled.div<{ collapsed: boolean; isMediumOrAbove: boolean }>(\n  ({ theme, collapsed, isMediumOrAbove }) => {\n    const navBg = theme.components['app-shell'].nav.background;\n    const { hoverBg, foreground, border: borderColor, backgroundColor } = navContrastColors(theme);\n    const maxCollapsedSize = theme.components.input.height;\n    let activeColor = hoverBg;\n    let hoverColor = lighten(0.1, hoverBg);\n\n    if (getContrast(backgroundColor, hoverColor) < 1.3) {\n      activeColor = darken(0.2, hoverBg);\n      hoverColor = hoverBg;\n    }\n\n    return css`\n      flex-shrink: 0;\n      justify-content: center;\n\n      ${StyledMenuListContainer} {\n        background: transparent;\n      }\n\n      > form {\n        padding: ${theme.base.spacing} 0;\n      }\n\n      header {\n        ${StyledText} {\n          color: ${transparentize(0.1, foreground)};\n        }\n      }\n\n      ${StyledBackdrop} {\n        background: transparent;\n      }\n\n      ${StyledEmptyState} {\n        span,\n        svg {\n          color: ${foreground};\n        }\n      }\n\n      ${StyledMenu} {\n        background: ${navBg};\n\n        &[data-active-scope='true'] [data-current='true'] {\n          background-color: ${activeColor};\n        }\n\n        ${StyledLink} {\n          color: ${foreground};\n        }\n      }\n\n      ${StyledMenuItem} {\n        color: ${foreground};\n\n        li {\n          color: ${foreground};\n        }\n\n        &:focus-within {\n          background-color: ${activeColor};\n        }\n\n        &:hover:not([aria-disabled='true']) {\n          background-color: ${hoverColor};\n        }\n      }\n\n      ${StyledFiltersPopover}, ${StyledResultsPopover} {\n        background-color: ${navBg};\n        z-index: calc(${theme.base['z-index'].backdrop} + 1);\n      }\n\n      ${StyledSearchInput} {\n        border: none;\n        background: transparent;\n\n        ${StyledSearchButton} {\n          transition: borderRadius calc(${theme.base.animation.speed} * 2);\n          border: none;\n          border-start-start-radius: inherit;\n          border-end-start-radius: inherit;\n        }\n\n        ${StyledClearButton},\n        ${StyledSearchIcon} {\n          color: ${foreground};\n        }\n\n        input {\n          &::placeholder {\n            color: ${transparentize(0.4, foreground)};\n          }\n\n          &:hover {\n            border-inline-start: ${rem(1)} solid ${borderColor};\n          }\n        }\n\n        input,\n        ${StyledSearchFiltersButton}, ${StyledSearchButton} {\n          background: ${hoverBg};\n          color: ${foreground};\n          border-color: transparent;\n\n          &:focus-within {\n            border-color: transparent;\n          }\n\n          &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within),\n          &:hover {\n            border-color: ${borderColor};\n          }\n        }\n      }\n\n      form > ${StyledSearchInput} {\n        background: ${hoverBg};\n        margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n\n        ${collapsed &&\n        isMediumOrAbove &&\n        css`\n          overflow: hidden;\n          ${StyledSearchButton} {\n            border-radius: calc(\n              ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}\n            );\n            height: ${maxCollapsedSize};\n            width: ${maxCollapsedSize};\n            padding: 0;\n\n            > :not(:first-child) {\n              display: none;\n            }\n          }\n\n          input {\n            padding: 0;\n            max-width: 0;\n            overflow: hidden;\n          }\n\n          ${StyledClearButton} {\n            display: none;\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchDecoration = styled.div(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    width: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: ${hoverBg};\n    color: ${foreground};\n    margin: 0 auto;\n  `;\n});\n\nStyledAppShellSearchDecoration.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchButton = styled(BareButton)`\n  width: 100%;\n  &:focus {\n    ${StyledAppShellSearchDecoration} {\n      outline: none;\n      box-shadow: ${props => props.theme.base.shadow['focus-inset']};\n    }\n  }\n`;\n\nStyledAppShellSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {\n  return css`\n    padding: ${base.spacing};\n  `;\n});\n\nStyledAppshellSearchContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppTopNav.d.ts

@@ -0,0 +1,4 @@
+import type { AppTopNavProps } from './AppTopNav.types';
+declare const AppTopNav: ({ caseTypes, links, cases, agent, utils, onUtilItemClick }: AppTopNavProps) => import("react/jsx-runtime").JSX.Element;
+export default AppTopNav;
+//# sourceMappingURL=AppTopNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppTopNav.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA+PxD,QAAA,MAAM,SAAS,GAAI,4DAA4D,cAAc,4CAwI5F,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppTopNav.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import Icon, { registerIcon } from '../Icon';
+import * as caretDownIcon from '../Icon/icons/caret-down.icon';
+import { useEscape, useFocusWithin, useI18n, useTheme } from '../../hooks';
+import { createStringMatcher, isValidElement } from '../../utils';
+import { isSolidColor } from '../../styles';
+import { ThemeOverride } from '../Configuration';
+import Popover from '../Popover';
+import Menu from '../Menu';
+import { StyledTopNav, StyledTopNavList, StyledTopNavMeasureRow, StyledTopNavSection, StyledTopNavUtilBar, StyledTopNavItem, StyledTopNavItemHidden, StyledTopNavUtilButton, StyledTopNavCountBadge, StyledTopNavCreateArea } from './AppTopNav.styles';
+import { navContrastColors } from './style-utils';
+import { CaseTypes } from './AppNavigationPanel';
+import TopNavMoreMenu from './TopNavMoreMenu';
+import { useTopNavOverflow } from './useTopNavOverflow';
+import { AppShellDrawerContext } from './AppShellContext';
+registerIcon(caretDownIcon);
+const hasActiveDescendant = (link) => {
+    if (link.active)
+        return true;
+    return link.links?.some(hasActiveDescendant) ?? false;
+};
+const linkToFlyoutItem = (link) => {
+    const userOnClick = link.onClick;
+    const children = link.links?.map(linkToFlyoutItem);
+    const hasChildren = children && children.length > 0;
+    return {
+        id: link.id || link.name,
+        primary: link.name,
+        visual: link.icon ? _jsx(Icon, { name: link.icon }) : undefined,
+        href: hasChildren ? undefined : link.href,
+        // MenuItem uses `typeof selected !== 'boolean'` to decide expand vs click.
+        selected: hasChildren ? undefined : link.active || undefined,
+        onClick: userOnClick
+            ? (_id, e) => {
+                userOnClick(e);
+            }
+            : undefined,
+        items: hasChildren ? children : undefined
+    };
+};
+const TopNavMeasureItem = ({ link }) => {
+    const hasChildren = !!link.links && link.links.length > 0;
+    return (_jsxs(StyledTopNavItem, { as: 'span', tabIndex: -1, children: [link.icon && _jsx(Icon, { name: link.icon }), _jsx("span", { children: link.name }), hasChildren && _jsx(Icon, { name: 'caret-down' })] }));
+};
+const TopNavLink = ({ link }) => {
+    const hasChildren = !!link.links && link.links.length > 0;
+    const active = hasActiveDescendant(link);
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const close = useCallback(() => setPopoverOpen(false), []);
+    useFocusWithin([triggerRef, popoverRef], useCallback((isFocused) => {
+        if (!isFocused)
+            setPopoverOpen(false);
+    }, []));
+    useEscape(useCallback((e) => {
+        if (popoverOpen) {
+            setPopoverOpen(false);
+            e.stopPropagation();
+            triggerRef.current?.focus();
+        }
+    }, [popoverOpen])
+    // No target: attach to document so Escape works when focus is inside the
+    // Popover portal (events don't bubble to the trigger element across portals).
+    );
+    if (hasChildren && link.links) {
+        const allItems = link.links.map(linkToFlyoutItem);
+        const useFilter = allItems.length >= 5;
+        const filterRegex = createStringMatcher(filterValue, 'contains');
+        const items = useFilter
+            ? allItems.filter(it => filterRegex.test(String(it.primary ?? '')))
+            : allItems;
+        const handleTriggerClick = () => {
+            if (!popoverOpen)
+                setFilterValue('');
+            setPopoverOpen(v => !v);
+        };
+        return (_jsxs(_Fragment, { children: [_jsxs(StyledTopNavItem, { ref: triggerRef, "$active": active, "aria-haspopup": 'menu', "aria-expanded": popoverOpen, onClick: handleTriggerClick, children: [link.icon && _jsx(Icon, { name: link.icon }), _jsx("span", { children: link.name }), _jsx(Icon, { name: 'caret-down' })] }), popoverOpen && (_jsx(Popover, { ref: popoverRef, target: triggerRef.current, placement: 'bottom-start', children: _jsx(Menu, { mode: 'action', variant: 'flyout', "aria-label": link.name, items: items, onItemClick: close, focusControlEl: triggerRef.current ?? undefined, ...(useFilter
+                            ? {
+                                filterInputProps: {
+                                    value: filterValue,
+                                    onChange: (e) => setFilterValue(e.target.value)
+                                }
+                            }
+                            : {}) }) }))] }));
+    }
+    const handleClick = e => {
+        link.onClick?.(e);
+    };
+    return (_jsxs(StyledTopNavItem, { href: link.href, onClick: handleClick, "$active": active, "aria-current": link.active ? 'page' : undefined, children: [link.icon && _jsx(Icon, { name: link.icon }), _jsx("span", { children: link.name })] }));
+};
+const TopNavUtilItem = ({ item, onUtilItemClick }) => {
+    const hasMenu = !!item.actions && item.actions.length > 0;
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const close = useCallback(() => setPopoverOpen(false), []);
+    useFocusWithin([triggerRef, popoverRef], useCallback((isFocused) => {
+        if (!isFocused)
+            setPopoverOpen(false);
+    }, []));
+    useEscape(useCallback((e) => {
+        if (popoverOpen) {
+            setPopoverOpen(false);
+            e.stopPropagation();
+            triggerRef.current?.focus();
+        }
+    }, [popoverOpen]));
+    if (hasMenu && item.actions) {
+        return (_jsxs(_Fragment, { children: [_jsxs(StyledTopNavUtilButton, { ref: triggerRef, "aria-label": item.count ? `${item.name}, ${String(item.count)}` : item.name, "aria-haspopup": 'menu', "aria-expanded": popoverOpen, onClick: () => setPopoverOpen(v => !v), children: [item.visual, !!item.count && (_jsx(StyledTopNavCountBadge, { "aria-hidden": 'true', children: item.count }))] }), popoverOpen && (_jsx(Popover, { ref: popoverRef, target: triggerRef.current, placement: 'bottom-end', children: _jsx(Menu, { mode: 'action', variant: 'flyout', "aria-label": item.name, items: item.actions.map((act) => ({
+                            id: act.id ?? act.primary,
+                            primary: act.primary,
+                            visual: act.visual,
+                            href: act.href,
+                            onClick: act.onClick
+                                ? (_id, e) => {
+                                    act.onClick?.(e);
+                                    close();
+                                }
+                                : undefined
+                        })), onItemClick: close, focusControlEl: triggerRef.current ?? undefined }) }))] }));
+    }
+    return (_jsxs(StyledTopNavUtilButton, { "aria-label": item.count ? `${item.name}, ${String(item.count)}` : item.name, onClick: (e) => {
+            if (item.drawerView) {
+                onUtilItemClick?.(item);
+            }
+            item.onClick?.(e);
+        }, children: [item.visual, !!item.count && (_jsx(StyledTopNavCountBadge, { "aria-hidden": 'true', children: item.count }))] }));
+};
+const isUtilItemProps = (u) => !isValidElement(u);
+const AppTopNav = ({ caseTypes, links, cases, agent, utils, onUtilItemClick }) => {
+    const t = useI18n();
+    const theme = useTheme();
+    const { openDrawer, drawerOpen, openItemName, refreshDrawer } = useContext(AppShellDrawerContext);
+    useEffect(() => {
+        if (!drawerOpen || !openItemName || !utils)
+            return;
+        const freshItem = utils.filter(isUtilItemProps).find(u => u.name === openItemName);
+        if (freshItem)
+            refreshDrawer(freshItem);
+    }, [utils, drawerOpen, openItemName, refreshDrawer]);
+    const handleUtilItemClick = (item) => {
+        if (onUtilItemClick) {
+            onUtilItemClick(item);
+            return;
+        }
+        if (item.drawerView) {
+            openDrawer(item);
+        }
+    };
+    const navTheme = useMemo(() => {
+        const { foreground, interactive, urgent, backgroundColor } = navContrastColors(theme);
+        const navBg = theme.components['app-shell'].nav.background;
+        return {
+            base: {
+                palette: {
+                    'primary-background': isSolidColor(navBg) ? backgroundColor : 'transparent',
+                    'foreground-color': foreground,
+                    interactive,
+                    urgent
+                }
+            }
+        };
+    }, [theme]);
+    const linkList = links ?? [];
+    const moreButtonRef = useRef(null);
+    const { containerRef, measureRef, result } = useTopNavOverflow(linkList, { moreButtonRef });
+    const visibleLinks = linkList.slice(0, result.visibleCount);
+    const overflowLinks = linkList.slice(result.visibleCount);
+    return (_jsx(ThemeOverride, { theme: navTheme, children: _jsxs(StyledTopNav, { "aria-label": t('app_shell_main_navigation_label'), "data-app-region": true, children: [caseTypes && caseTypes.length > 0 && (_jsx(StyledTopNavCreateArea, { container: { alignItems: 'center' }, item: { shrink: 0 }, children: _jsx(CaseTypes, { caseTypes: caseTypes }) })), _jsxs(StyledTopNavList, { ref: containerRef, container: { alignItems: 'center', gap: 1 }, item: { grow: 1 }, children: [_jsx(StyledTopNavMeasureRow, { ref: measureRef, container: { alignItems: 'center', gap: 1 }, "aria-hidden": 'true', children: linkList.map(link => (_jsx(TopNavMeasureItem, { link: link }, link.id))) }), visibleLinks.map(link => (_jsx(TopNavLink, { link: link }, link.id))), _jsxs(StyledTopNavItemHidden, { ref: moreButtonRef, type: 'button', "aria-hidden": 'true', tabIndex: -1, children: [_jsx(Icon, { name: 'bars' }), _jsx("span", { children: t('app_shell_more') })] }), overflowLinks.length > 0 && (_jsx(TopNavMoreMenu, { items: overflowLinks, label: t('app_shell_more'), active: overflowLinks.some(hasActiveDescendant) }))] }), cases && cases.length > 0 && (_jsx(StyledTopNavSection, { container: { alignItems: 'center', gap: 1 }, item: {}, role: 'group', "aria-label": t('active_cases'), children: cases.map(c => (_jsxs(StyledTopNavItem, { onClick: c.onClick, "$active": !!c.active, "aria-current": c.active ? 'page' : undefined, children: [c.visual ?? _jsx(Icon, { name: 'case-solid' }), _jsx("span", { children: c.primary })] }, c.id))) })), _jsxs(StyledTopNavUtilBar, { container: { alignItems: 'center', gap: 1 }, item: { shrink: 0 }, children: [agent && (_jsx(StyledTopNavUtilButton, { "aria-label": agent.name, "aria-current": agent.active ? 'page' : undefined, onClick: (e) => {
+                                agent.onClick?.(e);
+                            }, children: agent.icon })), utils?.map((util, idx) => {
+                            if (isValidElement(util)) {
+                                const utilKey = util.key ?? `util-el-${String(idx)}`;
+                                return _jsx("span", { children: util }, utilKey);
+                            }
+                            return (_jsx(TopNavUtilItem, { item: util, onUtilItemClick: handleUtilItemClick }, util.name));
+                        })] })] }) }));
+};
+export default AppTopNav;
+//# sourceMappingURL=AppTopNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppTopNav.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEvent, MouseEvent, MouseEventHandler, ReactElement } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport { useEscape, useFocusWithin, useI18n, useTheme } from '../../hooks';\nimport { createStringMatcher, isValidElement } from '../../utils';\nimport { isSolidColor } from '../../styles';\nimport { ThemeOverride } from '../Configuration';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\n\nimport type { AppTopNavProps } from './AppTopNav.types';\nimport type { LinkProps, OperatorProps, UtilItemProps } from './AppShell.types';\nimport {\n  StyledTopNav,\n  StyledTopNavList,\n  StyledTopNavMeasureRow,\n  StyledTopNavSection,\n  StyledTopNavUtilBar,\n  StyledTopNavItem,\n  StyledTopNavItemHidden,\n  StyledTopNavUtilButton,\n  StyledTopNavCountBadge,\n  StyledTopNavCreateArea\n} from './AppTopNav.styles';\nimport { navContrastColors } from './style-utils';\nimport { CaseTypes } from './AppNavigationPanel';\nimport TopNavMoreMenu from './TopNavMoreMenu';\nimport { useTopNavOverflow } from './useTopNavOverflow';\nimport { AppShellDrawerContext } from './AppShellContext';\n\nregisterIcon(caretDownIcon);\n\nconst hasActiveDescendant = (link: LinkProps): boolean => {\n  if (link.active) return true;\n  return link.links?.some(hasActiveDescendant) ?? false;\n};\n\nconst linkToFlyoutItem = (link: LinkProps): MenuItemProps => {\n  const userOnClick = link.onClick;\n  const children = link.links?.map(linkToFlyoutItem);\n  const hasChildren = children && children.length > 0;\n  return {\n    id: link.id || link.name,\n    primary: link.name,\n    visual: link.icon ? <Icon name={link.icon} /> : undefined,\n    href: hasChildren ? undefined : link.href,\n    // MenuItem uses `typeof selected !== 'boolean'` to decide expand vs click.\n    selected: hasChildren ? undefined : link.active || undefined,\n    onClick: userOnClick\n      ? (_id, e) => {\n          userOnClick(e);\n        }\n      : undefined,\n    items: hasChildren ? children : undefined\n  };\n};\n\nconst TopNavMeasureItem = ({ link }: { link: LinkProps }) => {\n  const hasChildren = !!link.links && link.links.length > 0;\n  return (\n    <StyledTopNavItem as='span' tabIndex={-1}>\n      {link.icon && <Icon name={link.icon} />}\n      <span>{link.name}</span>\n      {hasChildren && <Icon name='caret-down' />}\n    </StyledTopNavItem>\n  );\n};\n\nconst TopNavLink = ({ link }: { link: LinkProps }) => {\n  const hasChildren = !!link.links && link.links.length > 0;\n  const active = hasActiveDescendant(link);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n\n  const close = useCallback(() => setPopoverOpen(false), []);\n\n  useFocusWithin<HTMLElement>(\n    [triggerRef, popoverRef],\n    useCallback((isFocused: boolean) => {\n      if (!isFocused) setPopoverOpen(false);\n    }, [])\n  );\n\n  useEscape(\n    useCallback(\n      (e: KeyboardEvent) => {\n        if (popoverOpen) {\n          setPopoverOpen(false);\n          e.stopPropagation();\n          triggerRef.current?.focus();\n        }\n      },\n      [popoverOpen]\n    )\n    // No target: attach to document so Escape works when focus is inside the\n    // Popover portal (events don't bubble to the trigger element across portals).\n  );\n\n  if (hasChildren && link.links) {\n    const allItems = link.links.map(linkToFlyoutItem);\n    const useFilter = allItems.length >= 5;\n    const filterRegex = createStringMatcher(filterValue, 'contains');\n    const items = useFilter\n      ? allItems.filter(it => filterRegex.test(String(it.primary ?? '')))\n      : allItems;\n\n    const handleTriggerClick = () => {\n      if (!popoverOpen) setFilterValue('');\n      setPopoverOpen(v => !v);\n    };\n\n    return (\n      <>\n        <StyledTopNavItem\n          ref={triggerRef}\n          $active={active}\n          aria-haspopup='menu'\n          aria-expanded={popoverOpen}\n          onClick={handleTriggerClick}\n        >\n          {link.icon && <Icon name={link.icon} />}\n          <span>{link.name}</span>\n          <Icon name='caret-down' />\n        </StyledTopNavItem>\n        {popoverOpen && (\n          <Popover ref={popoverRef} target={triggerRef.current} placement='bottom-start'>\n            <Menu\n              mode='action'\n              variant='flyout'\n              aria-label={link.name}\n              items={items}\n              onItemClick={close}\n              focusControlEl={triggerRef.current ?? undefined}\n              {...(useFilter\n                ? {\n                    filterInputProps: {\n                      value: filterValue,\n                      onChange: (e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)\n                    }\n                  }\n                : {})}\n            />\n          </Popover>\n        )}\n      </>\n    );\n  }\n\n  const handleClick: MouseEventHandler<HTMLElement> = e => {\n    link.onClick?.(e);\n  };\n\n  return (\n    <StyledTopNavItem\n      href={link.href}\n      onClick={handleClick}\n      $active={active}\n      aria-current={link.active ? 'page' : undefined}\n    >\n      {link.icon && <Icon name={link.icon} />}\n      <span>{link.name}</span>\n    </StyledTopNavItem>\n  );\n};\n\nconst TopNavUtilItem = ({\n  item,\n  onUtilItemClick\n}: {\n  item: UtilItemProps;\n  onUtilItemClick?: (item: UtilItemProps) => void;\n}) => {\n  const hasMenu = !!item.actions && item.actions.length > 0;\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const close = useCallback(() => setPopoverOpen(false), []);\n\n  useFocusWithin<HTMLElement>(\n    [triggerRef, popoverRef],\n    useCallback((isFocused: boolean) => {\n      if (!isFocused) setPopoverOpen(false);\n    }, [])\n  );\n\n  useEscape(\n    useCallback(\n      (e: KeyboardEvent) => {\n        if (popoverOpen) {\n          setPopoverOpen(false);\n          e.stopPropagation();\n          triggerRef.current?.focus();\n        }\n      },\n      [popoverOpen]\n    )\n  );\n\n  if (hasMenu && item.actions) {\n    return (\n      <>\n        <StyledTopNavUtilButton\n          ref={triggerRef}\n          aria-label={item.count ? `${item.name}, ${String(item.count)}` : item.name}\n          aria-haspopup='menu'\n          aria-expanded={popoverOpen}\n          onClick={() => setPopoverOpen(v => !v)}\n        >\n          {item.visual}\n          {!!item.count && (\n            <StyledTopNavCountBadge aria-hidden='true'>{item.count}</StyledTopNavCountBadge>\n          )}\n        </StyledTopNavUtilButton>\n        {popoverOpen && (\n          <Popover ref={popoverRef} target={triggerRef.current} placement='bottom-end'>\n            <Menu\n              mode='action'\n              variant='flyout'\n              aria-label={item.name}\n              items={item.actions.map(\n                (act: OperatorProps['actions'][number]): MenuItemProps => ({\n                  id: act.id ?? act.primary,\n                  primary: act.primary,\n                  visual: act.visual,\n                  href: act.href,\n                  onClick: act.onClick\n                    ? (_id, e) => {\n                        act.onClick?.(e);\n                        close();\n                      }\n                    : undefined\n                })\n              )}\n              onItemClick={close}\n              focusControlEl={triggerRef.current ?? undefined}\n            />\n          </Popover>\n        )}\n      </>\n    );\n  }\n\n  return (\n    <StyledTopNavUtilButton\n      aria-label={item.count ? `${item.name}, ${String(item.count)}` : item.name}\n      onClick={(e: MouseEvent<HTMLElement>) => {\n        if (item.drawerView) {\n          onUtilItemClick?.(item);\n        }\n        item.onClick?.(e);\n      }}\n    >\n      {item.visual}\n      {!!item.count && (\n        <StyledTopNavCountBadge aria-hidden='true'>{item.count}</StyledTopNavCountBadge>\n      )}\n    </StyledTopNavUtilButton>\n  );\n};\n\nconst isUtilItemProps = (u: UtilItemProps | ReactElement): u is UtilItemProps => !isValidElement(u);\n\nconst AppTopNav = ({ caseTypes, links, cases, agent, utils, onUtilItemClick }: AppTopNavProps) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const { openDrawer, drawerOpen, openItemName, refreshDrawer } = useContext(AppShellDrawerContext);\n\n  useEffect(() => {\n    if (!drawerOpen || !openItemName || !utils) return;\n    const freshItem = utils.filter(isUtilItemProps).find(u => u.name === openItemName);\n    if (freshItem) refreshDrawer(freshItem);\n  }, [utils, drawerOpen, openItemName, refreshDrawer]);\n\n  const handleUtilItemClick = (item: UtilItemProps) => {\n    if (onUtilItemClick) {\n      onUtilItemClick(item);\n      return;\n    }\n    if (item.drawerView) {\n      openDrawer(item);\n    }\n  };\n\n  const navTheme = useMemo(() => {\n    const { foreground, interactive, urgent, backgroundColor } = navContrastColors(theme);\n    const navBg = theme.components['app-shell'].nav.background;\n    return {\n      base: {\n        palette: {\n          'primary-background': isSolidColor(navBg) ? backgroundColor : 'transparent',\n          'foreground-color': foreground,\n          interactive,\n          urgent\n        }\n      }\n    };\n  }, [theme]);\n\n  const linkList = links ?? [];\n  const moreButtonRef = useRef<HTMLButtonElement>(null);\n  const { containerRef, measureRef, result } = useTopNavOverflow(linkList, { moreButtonRef });\n\n  const visibleLinks = linkList.slice(0, result.visibleCount);\n  const overflowLinks = linkList.slice(result.visibleCount);\n\n  return (\n    <ThemeOverride theme={navTheme}>\n      <StyledTopNav aria-label={t('app_shell_main_navigation_label')} data-app-region>\n        {caseTypes && caseTypes.length > 0 && (\n          <StyledTopNavCreateArea container={{ alignItems: 'center' }} item={{ shrink: 0 }}>\n            <CaseTypes caseTypes={caseTypes} />\n          </StyledTopNavCreateArea>\n        )}\n\n        <StyledTopNavList\n          ref={containerRef}\n          container={{ alignItems: 'center', gap: 1 }}\n          item={{ grow: 1 }}\n        >\n          <StyledTopNavMeasureRow\n            ref={measureRef}\n            container={{ alignItems: 'center', gap: 1 }}\n            aria-hidden='true'\n          >\n            {linkList.map(link => (\n              <TopNavMeasureItem key={link.id} link={link} />\n            ))}\n          </StyledTopNavMeasureRow>\n\n          {visibleLinks.map(link => (\n            <TopNavLink key={link.id} link={link} />\n          ))}\n\n          <StyledTopNavItemHidden\n            ref={moreButtonRef}\n            type='button'\n            aria-hidden='true'\n            tabIndex={-1}\n          >\n            <Icon name='bars' />\n            <span>{t('app_shell_more')}</span>\n          </StyledTopNavItemHidden>\n\n          {overflowLinks.length > 0 && (\n            <TopNavMoreMenu\n              items={overflowLinks}\n              label={t('app_shell_more')}\n              active={overflowLinks.some(hasActiveDescendant)}\n            />\n          )}\n        </StyledTopNavList>\n\n        {cases && cases.length > 0 && (\n          <StyledTopNavSection\n            container={{ alignItems: 'center', gap: 1 }}\n            item={{}}\n            role='group'\n            aria-label={t('active_cases')}\n          >\n            {cases.map(c => (\n              <StyledTopNavItem\n                key={c.id}\n                onClick={c.onClick}\n                $active={!!c.active}\n                aria-current={c.active ? 'page' : undefined}\n              >\n                {c.visual ?? <Icon name='case-solid' />}\n                <span>{c.primary}</span>\n              </StyledTopNavItem>\n            ))}\n          </StyledTopNavSection>\n        )}\n\n        <StyledTopNavUtilBar container={{ alignItems: 'center', gap: 1 }} item={{ shrink: 0 }}>\n          {agent && (\n            <StyledTopNavUtilButton\n              aria-label={agent.name}\n              aria-current={agent.active ? 'page' : undefined}\n              onClick={(e: MouseEvent<HTMLElement>) => {\n                agent.onClick?.(e);\n              }}\n            >\n              {agent.icon}\n            </StyledTopNavUtilButton>\n          )}\n          {utils?.map((util, idx) => {\n            if (isValidElement(util)) {\n              const utilKey = util.key ?? `util-el-${String(idx)}`;\n              return <span key={utilKey}>{util}</span>;\n            }\n            return (\n              <TopNavUtilItem key={util.name} item={util} onUtilItemClick={handleUtilItemClick} />\n            );\n          })}\n        </StyledTopNavUtilBar>\n      </StyledTopNav>\n    </ThemeOverride>\n  );\n};\n\nexport default AppTopNav;\n"]}