npm - @pega/cosmos-react-core - Versions diffs - 9.0.0-build.26.0 → 9.0.0-build.26.2 - Mend

@pega/cosmos-react-core 9.0.0-build.26.0 → 9.0.0-build.26.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/lib/components/AppShell/AppTopNav.styles.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AppTopNav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.styles.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY,uNAkBvB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAE/B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAG5B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAE/B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;;cAAkC,OAAO;mKA6BpE,CAAC;AAIH,eAAO,MAAM,sBAAsB;;0KAyBjC,CAAC;AAIH,eAAO,MAAM,sBAAsB,+NAiBjC,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAiCjC,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAOlC,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;cAlJ4B,OAAO;mBAsJrE,CAAC"}

package/lib/components/AppShell/AppTopNav.styles.js ADDED Viewed

@@ -0,0 +1,184 @@
+import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
+import { defaultThemeProp } from '../../theme';
+import { calculateFontSize } from '../../styles';
+import BareButton, { StyledBareButton } from '../Button/BareButton';
+import Flex from '../Flex';
+import { StyledNavList, StyledNavListItem, StyledNavItemIconBox, StyledCaseTypes, headerHeight, topNavHeight } from './AppShell.styles';
+import { navContrastColors } from './style-utils';
+export const StyledTopNav = styled.nav(({ theme }) => {
+    const { backgroundColor, foreground, border } = navContrastColors(theme);
+    const zBackdrop = theme.base['z-index'].backdrop;
+    return css `
+    position: sticky;
+    inset-block-start: ${headerHeight};
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: ${topNavHeight};
+    z-index: calc(${zBackdrop} - 3);
+    display: flex;
+    align-items: center;
+    gap: ${theme.base.spacing};
+    padding-inline: calc(${theme.base.spacing} * 2);
+    background: ${backgroundColor};
+    color: ${foreground};
+    border-block-end: 0.0625rem solid ${border ?? transparentize(0.8, foreground)};
+  `;
+});
+StyledTopNav.defaultProps = defaultThemeProp;
+export const StyledTopNavSection = styled(Flex) `
+  overflow: hidden;
+`;
+StyledTopNavSection.defaultProps = defaultThemeProp;
+export const StyledTopNavList = styled(Flex) `
+  overflow: hidden;
+  position: relative;
+`;
+StyledTopNavList.defaultProps = defaultThemeProp;
+export const StyledTopNavUtilBar = styled(Flex) `
+  margin-inline-start: auto;
+`;
+StyledTopNavUtilBar.defaultProps = defaultThemeProp;
+export const StyledTopNavItem = styled(BareButton)(({ theme, $active }) => {
+    const { foreground } = navContrastColors(theme);
+    const hoverBg = transparentize(0.9, foreground);
+    const activeBg = transparentize(0.85, foreground);
+    return css `
+    background: ${$active ? activeBg : 'transparent'};
+    display: inline-flex;
+    align-items: center;
+    min-height: ${theme.base['hit-area'].mouse};
+    gap: ${theme.base.spacing};
+    padding: 0 calc(${theme.base.spacing} * 1.5);
+    border-radius: ${theme.components['app-shell'].nav['item-border-radius']};
+    font: inherit;
+    white-space: nowrap;
+    text-decoration: none;
+    & + & {
+      margin-inline-start: 0;
+    }
+    &:hover {
+      background: ${hoverBg};
+    }
+    &:focus-visible {
+      background: ${hoverBg};
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
+  `;
+});
+StyledTopNavItem.defaultProps = defaultThemeProp;
+export const StyledTopNavUtilButton = styled(BareButton)(({ theme }) => {
+    const { foreground } = navContrastColors(theme);
+    const hoverBg = transparentize(0.9, foreground);
+    return css `
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: ${theme.base['hit-area'].mouse};
+    height: ${theme.base['hit-area'].mouse};
+    border-radius: ${theme.base['border-radius']};
+    & + & {
+      margin-inline-start: 0;
+    }
+    &:hover {
+      background: ${hoverBg};
+    }
+    &:focus-visible {
+      background: ${hoverBg};
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
+  `;
+});
+StyledTopNavUtilButton.defaultProps = defaultThemeProp;
+export const StyledTopNavCountBadge = styled.span(({ theme }) => {
+    const { urgent } = navContrastColors(theme);
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    position: absolute;
+    inset-block-start: 0.125rem;
+    inset-inline-end: 0.125rem;
+    background: ${urgent};
+    color: ${theme.base.palette['primary-background']};
+    border-radius: calc(9999 * ${theme.base['border-radius']});
+    min-width: 1rem;
+    height: 1rem;
+    padding-inline: calc(${theme.base.spacing} / 2);
+    font-size: ${fontSize.xxs};
+    line-height: 1rem;
+    text-align: center;
+  `;
+});
+StyledTopNavCountBadge.defaultProps = defaultThemeProp;
+/**
+ * Hosts the side-rail `CaseTypes` component inline in the top bar.
+ * - Strips side-rail width/margin constraints so the button sits inline.
+ * - Hides the "Create" text label visually (kept in aria-label for a11y).
+ * - Makes the button square so it aligns with the nav item hit area.
+ */
+export const StyledTopNavCreateArea = styled(Flex)(({ theme }) => {
+    const hitArea = theme.base['hit-area'].mouse;
+    const borderRadius = theme.base['border-radius'];
+    return css `
+    ${StyledNavList} {
+      min-width: unset;
+    }
+    ${StyledNavListItem} {
+      padding-block-end: 0 !important;
+      &:not(:last-child),
+      &:only-child {
+        margin-block-end: 0 !important;
+      }
+    }
+    /* Make the top-level create button square and icon-only */
+    ${StyledCaseTypes} > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {
+      width: ${hitArea};
+      height: ${hitArea};
+      min-height: ${hitArea};
+      padding: 0;
+      justify-content: center;
+      border-radius: ${borderRadius};
+      /* Hide the "Create" text label visually; aria-label on the button covers a11y.
+         Target all spans except the icon box so SVG icon remains visible. */
+      span:not(${StyledNavItemIconBox}) {
+        display: none;
+      }
+    }
+  `;
+});
+StyledTopNavCreateArea.defaultProps = defaultThemeProp;
+/**
+ * Invisible container used as the hidden measurement row in AppTopNav.
+ * Always rendered at absolute position so useTopNavOverflow can measure all
+ * link widths at full size before deciding which ones are visible.
+ */
+export const StyledTopNavMeasureRow = styled(Flex) `
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+`;
+StyledTopNavMeasureRow.defaultProps = defaultThemeProp;
+/**
+ * Always rendered at absolute position so the hook can measure the More button
+ * width before deciding how many links fit.
+ */
+export const StyledTopNavItemHidden = styled(StyledTopNavItem) `
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+`;
+StyledTopNavItemHidden.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppTopNav.styles.js.map

package/lib/components/AppShell/AppTopNav.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AppTopNav.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,YAAY,EACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC;IACjD,OAAO,GAAG,CAAA;;yBAEa,YAAY;;;cAGvB,YAAY;oBACN,SAAS;;;WAGlB,KAAK,CAAC,IAAI,CAAC,OAAO;2BACF,KAAK,CAAC,IAAI,CAAC,OAAO;kBAC3B,eAAe;aACpB,UAAU;wCACiB,MAAM,IAAI,cAAc,CAAC,GAAG,EAAE,UAAU,CAAC;GAC9E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE9C,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG3C,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE9C,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAwB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/F,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAClD,OAAO,GAAG,CAAA;kBACM,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa;;;kBAGlC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK;WACnC,KAAK,CAAC,IAAI,CAAC,OAAO;sBACP,KAAK,CAAC,IAAI,CAAC,OAAO;qBACnB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,oBAAoB,CAAC;;;;;;;;;;oBAUxD,OAAO;;;;oBAIP,OAAO;oBACP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAChD,OAAO,GAAG,CAAA;;;;;aAKC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK;cAC3B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK;qBACrB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;oBAO5B,OAAO;;;;oBAIP,OAAO;oBACP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;;;;kBAIM,MAAM;aACX,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;iCACpB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;2BAGjC,KAAK,CAAC,IAAI,CAAC,OAAO;iBAC5B,QAAQ,CAAC,GAAG;;;GAG1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACjD,OAAO,GAAG,CAAA;MACN,aAAa;;;;MAIb,iBAAiB;;;;;;;;;;MAUjB,eAAe,MAAM,aAAa,MAAM,iBAAiB,MAAM,gBAAgB;eACtE,OAAO;gBACN,OAAO;oBACH,OAAO;;;uBAGJ,YAAY;;;;iBAIlB,oBAAoB;;;;GAIlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAOjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;;;;CAI7D,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Flex from '../Flex';\n\nimport {\n StyledNavList,\n StyledNavListItem,\n StyledNavItemIconBox,\n StyledCaseTypes,\n headerHeight,\n topNavHeight\n} from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledTopNav = styled.nav(({ theme }) => {\n const { backgroundColor, foreground, border } = navContrastColors(theme);\n const zBackdrop = theme.base['z-index'].backdrop;\n return css`\n position: sticky;\n inset-block-start: ${headerHeight};\n inset-inline-start: 0;\n inset-inline-end: 0;\n height: ${topNavHeight};\n z-index: calc(${zBackdrop} - 3);\n display: flex;\n align-items: center;\n gap: ${theme.base.spacing};\n padding-inline: calc(${theme.base.spacing} * 2);\n background: ${backgroundColor};\n color: ${foreground};\n border-block-end: 0.0625rem solid ${border ?? transparentize(0.8, foreground)};\n `;\n});\n\nStyledTopNav.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavSection = styled(Flex)`\n overflow: hidden;\n`;\n\nStyledTopNavSection.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavList = styled(Flex)`\n overflow: hidden;\n position: relative;\n`;\n\nStyledTopNavList.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavUtilBar = styled(Flex)`\n margin-inline-start: auto;\n`;\n\nStyledTopNavUtilBar.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavItem = styled(BareButton)<{ $active?: boolean }>(({ theme, $active }) => {\n const { foreground } = navContrastColors(theme);\n const hoverBg = transparentize(0.9, foreground);\n const activeBg = transparentize(0.85, foreground);\n return css`\n background: ${$active ? activeBg : 'transparent'};\n display: inline-flex;\n align-items: center;\n min-height: ${theme.base['hit-area'].mouse};\n gap: ${theme.base.spacing};\n padding: 0 calc(${theme.base.spacing} * 1.5);\n border-radius: ${theme.components['app-shell'].nav['item-border-radius']};\n font: inherit;\n white-space: nowrap;\n text-decoration: none;\n\n & + & {\n margin-inline-start: 0;\n }\n\n &:hover {\n background: ${hoverBg};\n }\n\n &:focus-visible {\n background: ${hoverBg};\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nStyledTopNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavUtilButton = styled(BareButton)(({ theme }) => {\n const { foreground } = navContrastColors(theme);\n const hoverBg = transparentize(0.9, foreground);\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${theme.base['hit-area'].mouse};\n height: ${theme.base['hit-area'].mouse};\n border-radius: ${theme.base['border-radius']};\n\n & + & {\n margin-inline-start: 0;\n }\n\n &:hover {\n background: ${hoverBg};\n }\n\n &:focus-visible {\n background: ${hoverBg};\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nStyledTopNavUtilButton.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavCountBadge = styled.span(({ theme }) => {\n const { urgent } = navContrastColors(theme);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n position: absolute;\n inset-block-start: 0.125rem;\n inset-inline-end: 0.125rem;\n background: ${urgent};\n color: ${theme.base.palette['primary-background']};\n border-radius: calc(9999 * ${theme.base['border-radius']});\n min-width: 1rem;\n height: 1rem;\n padding-inline: calc(${theme.base.spacing} / 2);\n font-size: ${fontSize.xxs};\n line-height: 1rem;\n text-align: center;\n `;\n});\n\nStyledTopNavCountBadge.defaultProps = defaultThemeProp;\n\n/**\n * Hosts the side-rail `CaseTypes` component inline in the top bar.\n * - Strips side-rail width/margin constraints so the button sits inline.\n * - Hides the \"Create\" text label visually (kept in aria-label for a11y).\n * - Makes the button square so it aligns with the nav item hit area.\n */\nexport const StyledTopNavCreateArea = styled(Flex)(({ theme }) => {\n const hitArea = theme.base['hit-area'].mouse;\n const borderRadius = theme.base['border-radius'];\n return css`\n ${StyledNavList} {\n min-width: unset;\n }\n\n ${StyledNavListItem} {\n padding-block-end: 0 !important;\n\n &:not(:last-child),\n &:only-child {\n margin-block-end: 0 !important;\n }\n }\n\n /* Make the top-level create button square and icon-only */\n ${StyledCaseTypes} > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {\n width: ${hitArea};\n height: ${hitArea};\n min-height: ${hitArea};\n padding: 0;\n justify-content: center;\n border-radius: ${borderRadius};\n\n /* Hide the \"Create\" text label visually; aria-label on the button covers a11y.\n Target all spans except the icon box so SVG icon remains visible. */\n span:not(${StyledNavItemIconBox}) {\n display: none;\n }\n }\n `;\n});\n\nStyledTopNavCreateArea.defaultProps = defaultThemeProp;\n\n/**\n * Invisible container used as the hidden measurement row in AppTopNav.\n * Always rendered at absolute position so useTopNavOverflow can measure all\n * link widths at full size before deciding which ones are visible.\n */\nexport const StyledTopNavMeasureRow = styled(Flex)`\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n white-space: nowrap;\n inset-block-start: 0;\n inset-inline-start: 0;\n`;\n\nStyledTopNavMeasureRow.defaultProps = defaultThemeProp;\n\n/**\n * Always rendered at absolute position so the hook can measure the More button\n * width before deciding how many links fit.\n */\nexport const StyledTopNavItemHidden = styled(StyledTopNavItem)`\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n`;\n\nStyledTopNavItemHidden.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppTopNav.types.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { AppShellProps, UtilItemProps } from './AppShell.types';
+export interface AppTopNavProps {
+    /** Not currently used by top-bar rendering; reserved for future nav theming. */
+    appInfo?: AppShellProps['appInfo'];
+    links?: AppShellProps['links'];
+    caseTypes?: AppShellProps['caseTypes'];
+    cases?: AppShellProps['cases'];
+    agent?: AppShellProps['agent'];
+    utils?: AppShellProps['utils'];
+    searchInput?: AppShellProps['searchInput'];
+    searchPage?: AppShellProps['searchPage'];
+    searchLabel?: string;
+    /** Called when a utility item with a drawerView is activated. */
+    onUtilItemClick?: (item: UtilItemProps) => void;
+}
+//# sourceMappingURL=AppTopNav.types.d.ts.map

package/lib/components/AppShell/AppTopNav.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AppTopNav.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAErE,MAAM,WAAW,cAAc;IAC7B,gFAAgF;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CACjD"}

package/lib/components/AppShell/AppTopNav.types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=AppTopNav.types.js.map

package/lib/components/AppShell/AppTopNav.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AppTopNav.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AppShellProps, UtilItemProps } from './AppShell.types';\n\nexport interface AppTopNavProps {\n /** Not currently used by top-bar rendering; reserved for future nav theming. */\n appInfo?: AppShellProps['appInfo'];\n links?: AppShellProps['links'];\n caseTypes?: AppShellProps['caseTypes'];\n cases?: AppShellProps['cases'];\n agent?: AppShellProps['agent'];\n utils?: AppShellProps['utils'];\n searchInput?: AppShellProps['searchInput'];\n searchPage?: AppShellProps['searchPage'];\n searchLabel?: string;\n /** Called when a utility item with a drawerView is activated. */\n onUtilItemClick?: (item: UtilItemProps) => void;\n}\n"]}

package/lib/components/AppShell/Drawer.d.ts CHANGED Viewed

@@ -6,7 +6,9 @@ interface DrawerViewProps {
     onDrawerClose?: () => void;
     drawerOpen: boolean;
     setDrawerOpen: (open: boolean) => void;
+    /** When provided, the drawer is offset below the chrome (header + top nav). */
+    topOffset?: string;
 }
-declare const _default: ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }: DrawerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen, topOffset }: DrawerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 //# sourceMappingURL=Drawer.d.ts.map

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

	@@ -1 +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;~~AAiCvC~~,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~~;yBAEe,~~6EAOb~~,eAAe;~~AAPlB~~,~~wBA6FE~~"}
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;AAkCvC,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;IACvC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;yBAEe,wFAQb,eAAe;AARlB,wBAsGE"}

package/lib/components/AppShell/Drawer.js CHANGED Viewed

@@ -11,10 +11,10 @@ import Configuration from '../Configuration/Configuration';
 import { getActiveElement } from '../../utils';
 import { isSolidColor } from '../../styles';
 import AppShellContext from './AppShellContext';
-import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './Drawer.styles';
+import { StyledDrawerWrapper, StyledTopNavDrawerOffset, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './Drawer.styles';
 import { navContrastColors } from './style-utils';
 registerIcon(arrowLeftIcon);
-export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }) => {
+export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen, topOffset }) => {
     const t = useI18n();
     const theme = useTheme();
     const { focusedImperatively } = useContext(AppShellContext);
@@ -44,15 +44,16 @@ export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setD
     useLayoutEffect(() => {
         returnFocusRef.current = getActiveElement() ?? undefined;
     }, []);
-    return (_jsx(Configuration, { theme: navTheme, portalTarget: drawerEl ?? undefined, children: _jsxs(Drawer, { role: 'dialog', "aria-labelledby": headerId, as: StyledDrawerWrapper, position: 'fixed', placement: start, open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
-                if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {
-                    focusedImperatively.current = true;
-                    backButtonRef.current.focus();
-                }
-                onDrawerOpen?.();
-            }, onAfterClose: () => {
-                onDrawerClose?.();
-                returnFocusRef.current?.focus();
-            }, onOuterClick: () => setDrawerOpen(false), ref: drawerRef, children: [_jsxs(Flex, { as: StyledDrawerHeading, role: 'none', container: { alignItems: 'center' }, children: [_jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: `arrow-${start}` }) }), _jsx(Text, { variant: 'h2', id: headerId, children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, "aria-labelledby": headerId, children: content })] }) }));
+    const drawerContent = (_jsxs(Drawer, { role: 'dialog', "aria-labelledby": headerId, as: StyledDrawerWrapper, position: topOffset ? 'absolute' : 'fixed', placement: start, open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
+            if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {
+                focusedImperatively.current = true;
+                backButtonRef.current.focus();
+            }
+            onDrawerOpen?.();
+        }, onAfterClose: () => {
+            onDrawerClose?.();
+            returnFocusRef.current?.focus();
+        }, onOuterClick: () => setDrawerOpen(false), ref: drawerRef, children: [_jsxs(Flex, { as: StyledDrawerHeading, role: 'none', container: { alignItems: 'center' }, children: [_jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: `arrow-${start}` }) }), _jsx(Text, { variant: 'h2', id: headerId, children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, "aria-labelledby": headerId, children: content })] }));
+    return (_jsx(Configuration, { theme: navTheme, portalTarget: drawerEl ?? undefined, children: topOffset ? (_jsx(StyledTopNavDrawerOffset, { "$topOffset": topOffset, children: drawerContent })) : (drawerContent) }));
 };
 //# sourceMappingURL=Drawer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,YAAY,CAAC,aAAa,CAAC,CAAC;~~AAW5B~~,eAAe,CAAC,EACd,OAAO,EACP,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,aAAa,~~EACG~~,EAAE,EAAE;IACpB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,cAAc,GAAG,MAAM,EAAe,CAAC;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,SAAS,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAE1B,SAAS,CACP,GAAG,EAAE;QACH,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,QAAQ,EACR,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,YAAY,CAAC,SAAS,CAAC,CAAC;IAExB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,QAAQ,GAAG;QACf,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,oBAAoB,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;gBACjE,kBAAkB,EAAE,UAAU;gBAC9B,WAAW;gBACX,MAAM;aACP;SACF;KACF,CAAC;IAEF,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,cAAc,CAAC,OAAO,GAAI,gBAAgB,EAAkB,IAAI,SAAS,CAAC;IAC5E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,~~OAAO~~,~~CACL,KAAC,~~aAAa,~~IAAC~~,~~KAAK~~,~~EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,IAAI,SAAS,YACjE,~~MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,qBACI,QAAQ,EACzB,EAAE,EAAE,mBAAmB,EACvB,QAAQ,~~EAAC~~,OAAO,~~EAChB~~,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,UAAU,EAChB,cAAc,QACd,WAAW,EAAE,GAAG,EAAE;~~gBAChB~~,IAAI,aAAa,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,EAAE,CAAC;~~oBAC9E~~,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;~~oBACnC~~,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;~~gBAChC~~,CAAC;~~gBACD~~,YAAY,EAAE,EAAE,CAAC;~~YACnB~~,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;~~gBACjB~~,aAAa,EAAE,EAAE,CAAC;~~gBAClB~~,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;~~YAClC~~,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACxC,GAAG,EAAE,SAAS,aAEd,MAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC5E,KAAC,UAAU,IACT,EAAE,EAAE,sBAAsB,EAC1B,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,gBACvB,CAAC,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,YAErC,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,GAAI,GACrB,EACb,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,QAAQ,YAC5B,MAAM,GACF,IACF,EACP,KAAC,IAAI,IACH,EAAE,EAAE,yBAAyB,EAC7B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,qBACjB,QAAQ,YAExB,OAAO,GACH,IACA,~~GACK~~,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useContext, useLayoutEffect, 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';\nimport { getActiveElement } from '../../utils';\nimport { isSolidColor } from '../../styles';\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 navBg = theme.components['app-shell'].nav.background;\n const navTheme = {\n base: {\n palette: {\n 'primary-background': isSolidColor(navBg) ? navBg : 'transparent',\n 'foreground-color': foreground,\n interactive,\n urgent\n }\n }\n };\n\n // Using layout effect to capture the focused element prior to drawer elements taking focus.\n useLayoutEffect(() => {\n returnFocusRef.current = (getActiveElement() as HTMLElement) ?? undefined;\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 onAfterOpen={() => {\n if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {\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} role='none' 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"]}
1	+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useLayoutEffect, 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';\nimport { getActiveElement } from '../../utils';\nimport { isSolidColor } from '../../styles';\n\nimport AppShellContext from './AppShellContext';\nimport {\n StyledDrawerWrapper,\n StyledTopNavDrawerOffset,\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 /** When provided, the drawer is offset below the chrome (header + top nav). */\n topOffset?: string;\n}\n\nexport default ({\n content,\n header,\n onDrawerOpen,\n onDrawerClose,\n drawerOpen,\n setDrawerOpen,\n topOffset\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 navBg = theme.components['app-shell'].nav.background;\n const navTheme = {\n base: {\n palette: {\n 'primary-background': isSolidColor(navBg) ? navBg : 'transparent',\n 'foreground-color': foreground,\n interactive,\n urgent\n }\n }\n };\n\n // Using layout effect to capture the focused element prior to drawer elements taking focus.\n useLayoutEffect(() => {\n returnFocusRef.current = (getActiveElement() as HTMLElement) ?? undefined;\n }, []);\n\n const drawerContent = (\n <Drawer\n role='dialog'\n aria-labelledby={headerId}\n as={StyledDrawerWrapper}\n position={topOffset ? 'absolute' : 'fixed'}\n placement={start}\n open={drawerOpen}\n nullWhenClosed\n onAfterOpen={() => {\n if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {\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} role='none' 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 );\n\n return (\n <Configuration theme={navTheme} portalTarget={drawerEl ?? undefined}>\n {topOffset ? (\n <StyledTopNavDrawerOffset $topOffset={topOffset}>{drawerContent}</StyledTopNavDrawerOffset>\n ) : (\n drawerContent\n )}\n </Configuration>\n );\n};\n"]}

package/lib/components/AppShell/Drawer.styles.d.ts CHANGED Viewed

@@ -1,5 +1,13 @@
 import type { DrawerProps } from '../Drawer';
 export declare const StyledDrawerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DrawerProps>> & string;
+/**
+ * Fixed-position container that offsets the drawer below the top chrome
+ * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
+ * The inner Drawer uses position='absolute' relative to this container.
+ */
+export declare const StyledTopNavDrawerOffset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $topOffset: string;
+}>> & string;
 export declare const StyledDrawerHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledDrawerBackButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const StyledDrawerList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {

package/lib/components/AppShell/Drawer.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB,gPAwB9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,uNAsB9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,yOAqBjC,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;YAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,iOAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAQlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAOpC,CAAC"}
1	+ {"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB,gPAwB9B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;gBAA4B,MAAM;YAUtE,CAAC;AAIF,eAAO,MAAM,mBAAmB,uNAsB9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,yOAqBjC,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;YAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,iOAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAQlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAOpC,CAAC"}

package/lib/components/AppShell/Drawer.styles.js CHANGED Viewed

@@ -26,6 +26,21 @@ export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
   `;
 });
 StyledDrawerWrapper.defaultProps = defaultThemeProp;
+/**
+ * Fixed-position container that offsets the drawer below the top chrome
+ * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
+ * The inner Drawer uses position='absolute' relative to this container.
+ */
+export const StyledTopNavDrawerOffset = styled.div(({ $topOffset, theme }) => css `
+    position: fixed;
+    inset-block-start: ${$topOffset};
+    inset-inline-start: 0;
+    /* stylelint-disable-next-line unit-allowed-list */
+    height: calc(100dvh - ${$topOffset});
+    width: ${navOpenWidth};
+    z-index: ${theme.base['z-index'].drawer};
+  `);
+StyledTopNavDrawerOffset.defaultProps = defaultThemeProp;
 export const StyledDrawerHeading = styled.header(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { foreground } = navContrastColors(theme);

package/lib/components/AppShell/Drawer.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n const {\n components: {\n 'app-shell': {\n nav: { background: navBg }\n }\n }\n } = theme;\n const { foreground, border: borderColor } = navContrastColors(theme);\n\n return css`\n background: ${navBg};\n width: ${navOpenWidth};\n height: 100%;\n color: ${foreground};\n opacity: ${open ? 1 : 0};\n border-inline-end: ${rem(1)} solid ${borderColor};\n\n ${StyledForm},\n ${StyledLabel},\n ${StyledMetaListItem} {\n color: ${foreground};\n }\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const { foreground } = navContrastColors(theme);\n\n return css`\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n line-height: 1;\n\n h2 {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin: 0 auto;\n position: relative;\n left: -0.7rem;\n }\n\n svg {\n font-size: ${fontSize.xxl};\n cursor: pointer;\n color: ${foreground};\n }\n `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n const { hoverBg, foreground } = navContrastColors(theme);\n\n return css`\n height: ${theme.base['hit-area']['mouse-min']};\n width: ${theme.base['hit-area']['mouse-min']};\n border-radius: calc(\n ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n );\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\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n li {\n color: inherit;\n }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n return css`\n width: calc(4 * ${theme.base.spacing});\n height: calc(4 * ${theme.base.spacing});\n `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n const { hoverBg, foreground } = 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: ${hoverBg};\n color: ${foreground};\n z-index: 1;\n `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n const { foreground, nestedListHeader } = navContrastColors(theme);\n\n return css`\n position: sticky;\n bottom: 0;\n padding: ${theme.base.spacing} 0;\n color: ${foreground};\n background: ${nestedListHeader};\n text-align: center;\n margin-top: 0.0625rem;\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = 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\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n overflow: auto;\n `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n const {\n components: {\n 'app-shell': {\n nav: { background: navBg }\n }\n }\n } = theme;\n const { foreground, border: borderColor } = navContrastColors(theme);\n\n return css`\n background: ${navBg};\n width: ${navOpenWidth};\n height: 100%;\n color: ${foreground};\n opacity: ${open ? 1 : 0};\n border-inline-end: ${rem(1)} solid ${borderColor};\n\n ${StyledForm},\n ${StyledLabel},\n ${StyledMetaListItem} {\n color: ${foreground};\n }\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\n/*\n Fixed-position container that offsets the drawer below the top chrome\n * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.\n * The inner Drawer uses position='absolute' relative to this container.\n /\nexport const StyledTopNavDrawerOffset = styled.div<{ $topOffset: string }>(\n ({ $topOffset, theme }) => css`\n position: fixed;\n inset-block-start: ${$topOffset};\n inset-inline-start: 0;\n / stylelint-disable-next-line unit-allowed-list /\n height: calc(100dvh - ${$topOffset});\n width: ${navOpenWidth};\n z-index: ${theme.base['z-index'].drawer};\n `\n);\n\nStyledTopNavDrawerOffset.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const { foreground } = navContrastColors(theme);\n\n return css`\n padding: ${theme.base.spacing} calc(2 ${theme.base.spacing});\n line-height: 1;\n\n h2 {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin: 0 auto;\n position: relative;\n left: -0.7rem;\n }\n\n svg {\n font-size: ${fontSize.xxl};\n cursor: pointer;\n color: ${foreground};\n }\n `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n const { hoverBg, foreground } = navContrastColors(theme);\n\n return css`\n height: ${theme.base['hit-area']['mouse-min']};\n width: ${theme.base['hit-area']['mouse-min']};\n border-radius: calc(\n ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n );\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\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n li {\n color: inherit;\n }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n return css`\n width: calc(4 * ${theme.base.spacing});\n height: calc(4 * ${theme.base.spacing});\n `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n const { hoverBg, foreground } = 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: ${hoverBg};\n color: ${foreground};\n z-index: 1;\n `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n const { foreground, nestedListHeader } = navContrastColors(theme);\n\n return css`\n position: sticky;\n bottom: 0;\n padding: ${theme.base.spacing} 0;\n color: ${foreground};\n background: ${nestedListHeader};\n text-align: center;\n margin-top: 0.0625rem;\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = 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\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n overflow: auto;\n `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/TopNavMoreMenu.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { LinkProps } from './AppShell.types';
+export interface TopNavMoreMenuProps {
+    items: LinkProps[];
+    label?: string;
+    active?: boolean;
+}
+declare const TopNavMoreMenu: ({ items, label, active }: TopNavMoreMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default TopNavMoreMenu;
+//# sourceMappingURL=TopNavMoreMenu.d.ts.map

package/lib/components/AppShell/TopNavMoreMenu.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"TopNavMoreMenu.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/TopNavMoreMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA+BlD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,cAAc,GAAI,0BAA0B,mBAAmB,4CA6EpE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/TopNavMoreMenu.js ADDED Viewed

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useMemo, useState } from 'react';
+import Icon, { registerIcon } from '../Icon';
+import * as barsIcon from '../Icon/icons/bars.icon';
+import Popover from '../Popover';
+import Menu from '../Menu';
+import { useEscape, useFocusWithin, useI18n } from '../../hooks';
+import { createStringMatcher } from '../../utils';
+import { StyledTopNavItem } from './AppTopNav.styles';
+registerIcon(barsIcon);
+const FILTER_THRESHOLD = 5;
+const linkToMenuItem = (link) => {
+    const userOnClick = link.onClick;
+    const children = link.links?.map(linkToMenuItem);
+    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 TopNavMoreMenu = ({ items, label, active }) => {
+    const t = useI18n();
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const close = useCallback(() => setOpen(false), []);
+    useFocusWithin([triggerRef, popoverRef], useCallback((isFocused) => {
+        if (!isFocused)
+            setOpen(false);
+    }, []));
+    useEscape(useCallback((e) => {
+        if (open) {
+            setOpen(false);
+            e.stopPropagation();
+            triggerRef.current?.focus();
+        }
+    }, [open])
+    // No target: attach to document so Escape works when focus is inside the
+    // Popover portal (events from portal content don't bubble to the trigger element).
+    );
+    const allItems = useMemo(() => items.map(linkToMenuItem), [items]);
+    const showFilter = items.length >= FILTER_THRESHOLD;
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const menuItems = showFilter
+        ? allItems.filter(it => filterRegex.test(String(it.primary ?? '')))
+        : allItems;
+    const handleTriggerClick = () => {
+        if (!open)
+            setFilterValue('');
+        setOpen(v => !v);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledTopNavItem, { ref: triggerRef, "$active": active || open, "aria-haspopup": 'menu', "aria-expanded": open, onClick: handleTriggerClick, children: [_jsx(Icon, { name: 'bars' }), _jsx("span", { children: label ?? t('app_shell_more') })] }), open && (_jsx(Popover, { ref: popoverRef, target: triggerRef.current, placement: 'bottom-end', children: _jsx(Menu, { mode: 'action', variant: 'flyout', "aria-label": label ?? t('app_shell_more'), items: menuItems, onItemClick: close, focusControlEl: triggerRef.current ?? undefined, ...(showFilter
+                        ? {
+                            filterInputProps: {
+                                value: filterValue,
+                                onChange: (e) => setFilterValue(e.target.value)
+                            }
+                        }
+                        : {}) }) }))] }));
+};
+export default TopNavMoreMenu;
+//# sourceMappingURL=TopNavMoreMenu.js.map

package/lib/components/AppShell/TopNavMoreMenu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TopNavMoreMenu.js","sourceRoot":"","sources":["../../../src/components/AppShell/TopNavMoreMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useRef, useMemo, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as barsIcon from '../Icon/icons/bars.icon';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport { useEscape, useFocusWithin, useI18n } from '../../hooks';\nimport { createStringMatcher } from '../../utils';\n\nimport type { LinkProps } from './AppShell.types';\nimport { StyledTopNavItem } from './AppTopNav.styles';\n\nregisterIcon(barsIcon);\n\nconst FILTER_THRESHOLD = 5;\n\ninterface TopNavMenuItem extends MenuItemProps {\n items?: TopNavMenuItem[];\n}\n\nconst linkToMenuItem = (link: LinkProps): TopNavMenuItem => {\n const userOnClick = link.onClick;\n const children = link.links?.map(linkToMenuItem);\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\nexport interface TopNavMoreMenuProps {\n items: LinkProps[];\n label?: string;\n active?: boolean;\n}\n\nconst TopNavMoreMenu = ({ items, label, active }: TopNavMoreMenuProps) => {\n const t = useI18n();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [open, setOpen] = useState(false);\n const [filterValue, setFilterValue] = useState('');\n\n const close = useCallback(() => setOpen(false), []);\n\n useFocusWithin<HTMLElement>(\n [triggerRef, popoverRef],\n useCallback((isFocused: boolean) => {\n if (!isFocused) setOpen(false);\n }, [])\n );\n\n useEscape(\n useCallback(\n (e: KeyboardEvent) => {\n if (open) {\n setOpen(false);\n e.stopPropagation();\n triggerRef.current?.focus();\n }\n },\n [open]\n )\n // No target: attach to document so Escape works when focus is inside the\n // Popover portal (events from portal content don't bubble to the trigger element).\n );\n\n const allItems = useMemo(() => items.map(linkToMenuItem), [items]);\n const showFilter = items.length >= FILTER_THRESHOLD;\n const filterRegex = createStringMatcher(filterValue, 'contains');\n const menuItems = showFilter\n ? allItems.filter(it => filterRegex.test(String(it.primary ?? '')))\n : allItems;\n\n const handleTriggerClick = () => {\n if (!open) setFilterValue('');\n setOpen(v => !v);\n };\n\n return (\n <>\n <StyledTopNavItem\n ref={triggerRef}\n $active={active || open}\n aria-haspopup='menu'\n aria-expanded={open}\n onClick={handleTriggerClick}\n >\n <Icon name='bars' />\n <span>{label ?? t('app_shell_more')}</span>\n </StyledTopNavItem>\n {open && (\n <Popover ref={popoverRef} target={triggerRef.current} placement='bottom-end'>\n <Menu\n mode='action'\n variant='flyout'\n aria-label={label ?? t('app_shell_more')}\n items={menuItems}\n onItemClick={close}\n focusControlEl={triggerRef.current ?? undefined}\n {...(showFilter\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\nexport default TopNavMoreMenu;\n"]}

package/lib/components/AppShell/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 export { default } from './AppShell';
 export { default as AppShellList } from './AppShellList';
 export type { AppShellListProps } from './AppShellList';
-export type { AppHeaderProps, AppShellProps, ContextSwitcherProps, DrawerItemProps, DrawerListProps, ShareAppConfig } from './AppShell.types';
+export type { AppHeaderProps, AppShellProps, ContextSwitcherProps, DrawerItemProps, DrawerListProps, NavOrientation, ShareAppConfig } from './AppShell.types';
 export { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';
 export { default as ContextSwitcher } from './ContextSwitcher';
 export { default as ThemeSwitcher } from './ThemeSwitcher';

package/lib/components/AppShell/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/AppShell/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;~~AAUzD~~,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { default as AppShellList } from './AppShellList';\nexport type { AppShellListProps } from './AppShellList';\nexport type {\n AppHeaderProps,\n AppShellProps,\n ContextSwitcherProps,\n DrawerItemProps,\n DrawerListProps,\n ShareAppConfig\n} from './AppShell.types';\nexport { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';\nexport { default as ContextSwitcher } from './ContextSwitcher';\nexport { default as ThemeSwitcher } from './ThemeSwitcher';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAWzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { default as AppShellList } from './AppShellList';\nexport type { AppShellListProps } from './AppShellList';\nexport type {\n AppHeaderProps,\n AppShellProps,\n ContextSwitcherProps,\n DrawerItemProps,\n DrawerListProps,\n NavOrientation,\n ShareAppConfig\n} from './AppShell.types';\nexport { default as AppShellContext, AppShellDrawerContext } from './AppShellContext';\nexport { default as ContextSwitcher } from './ContextSwitcher';\nexport { default as ThemeSwitcher } from './ThemeSwitcher';\n"]}

package/lib/components/AppShell/useTopNavOverflow.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { RefObject } from 'react';
+import type { LinkProps } from './AppShell.types';
+export interface OverflowResult {
+    visibleCount: number;
+}
+interface UseTopNavOverflowOptions {
+    moreButtonRef?: RefObject<HTMLElement | null>;
+    epsilon?: number;
+}
+interface UseTopNavOverflowReturn {
+    containerRef: RefObject<HTMLDivElement>;
+    measureRef: RefObject<HTMLDivElement>;
+    result: OverflowResult;
+}
+export declare function useTopNavOverflow(items: LinkProps[], opts: UseTopNavOverflowOptions): UseTopNavOverflowReturn;
+export {};
+//# sourceMappingURL=useTopNavOverflow.d.ts.map

package/lib/components/AppShell/useTopNavOverflow.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useTopNavOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/useTopNavOverflow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,wBAAwB;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,MAAM,EAAE,cAAc,CAAC;CACxB;AAcD,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,SAAS,EAAE,EAClB,IAAI,EAAE,wBAAwB,GAC7B,uBAAuB,CAsEzB"}