@pega/cosmos-react-core 9.0.0-build.14.8 → 9.0.0-build.14.9

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

@@ -1,6 +1,11 @@
 import styled, { css } from 'styled-components';
 import { darken, getContrast, lighten, transparentize } from 'polished';
 import { useContext } from 'react';
+import { StyledAlert } from '../Badges/Alert';
+import { ellipsisOverflow } from '../../styles/mixins';
+import { StyledLink } from '../Link/Link';
+import { StyledDrawer } from '../Drawer/Drawer';
+import Backdrop from '../Backdrop/Backdrop';
 import { Count } from '../Badges';
 import { StyledAvatar } from '../Avatar';
 import { StyledIcon } from '../Icon';
@@ -21,6 +26,7 @@ import { navContrastColors, pxToRem } from './style-utils';
 export const navWidth = '4rem';
 export const navOpenWidth = '18.75rem';
 export const headerHeight = '3rem';
+export const mobileHeaderHeight = '3.75rem';
 const iconWidth = '1.125rem';
 const iconBoxSize = `calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2)`;
 export const StyledAppInfo = styled.a(({ theme }) => {
@@ -119,6 +125,7 @@ export const StyledUtilIconCount = styled.span `
 export const StyledNavItemIconBox = styled.span(({ theme }) => {
     return css `
     flex-shrink: 0;
+
     > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {
       margin-inline: ${iconBoxSize};
     }
@@ -152,10 +159,6 @@ export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
       padding-block-end: ${theme.base.spacing};
       border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};
       border-color: ${theme.components['app-shell'].nav['border-color']};
-      ${!showEnv &&
-        css `
-        padding-block-start: ${theme.base.spacing};
-      `}
       @media (pointer: coarse) {
         max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
       }
@@ -165,6 +168,10 @@ export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
         overflow-x: clip;
       }
 
+      ${!showEnv &&
+        css `
+        padding-block-start: ${theme.base.spacing};
+      `}
       /* App navigation can be focused with shortcut */
       :focus-visible {
         box-shadow: ${theme.base.shadow['focus-inset']};
@@ -270,7 +277,6 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, single
         border-radius: calc(var(--item-height) / 2);
         transition: border-radius ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
       `}
-
       ${detached &&
         css `
         &:not(:only-child) {
@@ -280,7 +286,6 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, single
           border-end-end-radius: 0;
         }
       `}
-
       span:not(${StyledCountIcon}) {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -331,7 +336,6 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, single
           margin-inline: calc(${theme.base.spacing} - var(--nav-padding));
         }
       `}
-
       ${StyledSingleSelectIconBox} + span {
         margin-inline-start: ${theme.base.spacing};
       }
@@ -473,33 +477,133 @@ export const StyledUtils = styled.div(({ theme }) => {
   `;
 });
 StyledUtils.defaultProps = defaultThemeProp;
-export const StyledMobileNav = styled.header(({ theme }) => {
+export const StyledMobileNav = styled.header(({ theme, navOpen }) => {
+    const { base: { 'hit-area': { 'finger-min': hitAreaFinger }, 'border-radius': borderRadius }, components: { button: { 'focus-shadow': focusShadow } } } = theme;
     const mobileNavColor = theme.components['app-shell'].nav.background;
     const { foreground } = navContrastColors(theme);
     return css `
     min-width: 100%;
-    min-height: ${headerHeight};
+    min-height: ${mobileHeaderHeight};
     z-index: ${theme.base['z-index'].drawer};
     background: ${mobileNavColor};
     color: ${foreground};
-    padding-inline-start: ${theme.base.spacing};
+    padding: ${theme.base.spacing};
+    position: fixed;
+    /* stylelint-disable-next-line unit-allowed-list */
+    inset-block-start: calc(100dvh - ${mobileHeaderHeight});
 
-    @media (pointer: coarse) {
-      padding-inline-start: 0;
+    ${navOpen &&
+        css `
+      z-index: calc(${theme.base['z-index'].backdrop} + 1);
+    `}
+    > div:has(> ${StyledNavList}),
+    > div:has(> ${StyledNavList}) > ${StyledNavList} {
+      display: contents;
+
+      ${StyledNavListItem} {
+        width: calc(${hitAreaFinger} + (2.5 * ${theme.base.spacing}));
+        padding: 0;
+        margin: 0;
+
+        ${StyledBareButton}, ${StyledLink} {
+          flex-direction: column;
+          justify-content: center;
+          gap: calc(0.5 * ${theme.base.spacing});
+          height: ${hitAreaFinger};
+          padding: 0 ${theme.base.spacing};
+          border-radius: ${borderRadius};
+          border-block: none;
+
+          &::before {
+            width: 0;
+          }
+
+          span:not(${StyledCountIcon}) {
+            width: inherit;
+            text-align: center;
+          }
+
+          &:enabled:focus,
+          &:not([disabled]):focus {
+            box-shadow: ${focusShadow};
+          }
+
+          ${StyledNavListItemVisualContainer} {
+            padding: 0;
+            margin: 0;
+
+            ${StyledNavItemIconBox} {
+              display: flex;
+            }
+          }
+        }
+      }
+    }
+  `;
+});
+StyledMobileNav.defaultProps = defaultThemeProp;
+export const StyledMobileButton = styled(Button)(({ theme }) => {
+    const { base: { 'hit-area': { 'finger-min': hitAreaFinger }, 'border-radius': borderRadius }, components: { button: { 'border-width': borderWidth } } } = theme;
+    const { mobileNavOpen } = useContext(AppShellContext);
+    const { foreground } = navContrastColors(theme);
+    return css `
+    flex-direction: column;
+    flex-shrink: 0;
+    gap: calc(0.5 * ${theme.base.spacing});
+    height: ${hitAreaFinger};
+    width: calc(${hitAreaFinger} + (2.5 * ${theme.base.spacing}));
+    border-radius: ${borderRadius};
+    border: none;
+
+    span {
+      width: inherit;
+      padding-inline: ${theme.base.spacing};
+      ${ellipsisOverflow}
     }
 
-    @media (height >= ${theme.base.breakpoints.sm}) {
+    ${mobileNavOpen &&
+        css `
+      ::before {
+        content: '';
+        position: absolute;
+        inset: calc(${borderWidth} * -1);
+        border-radius: inherit;
+        background: ${transparentize(0.85, foreground)};
+      }
+    `}
+    ${StyledAlert} {
+      position: absolute;
       inset-block-start: 0;
-      position: sticky;
+      inset-inline-start: calc(50% + (0.625rem / 2));
     }
   `;
 });
-StyledMobileNav.defaultProps = defaultThemeProp;
+StyledMobileButton.defaultProps = defaultThemeProp;
+export const StyledMobileBackdrop = styled(Backdrop) `
+  /* stylelint-disable-next-line unit-allowed-list */
+  height: calc(100dvh - ${mobileHeaderHeight});
+
+  > ${StyledDrawer} {
+    bottom: ${mobileHeaderHeight};
+
+    > ${StyledAppNav}, ${StyledDrawer} {
+      width: 100vw;
+      max-width: inherit;
+      /* stylelint-disable-next-line unit-allowed-list */
+      height: calc(100dvh - ${mobileHeaderHeight});
+      border-inline-end: none;
+    }
+  }
+`;
+StyledMobileBackdrop.defaultProps = defaultThemeProp;
 export const StyledLoading = styled.div `
   font-size: 2rem;
 `;
 export const StyledAppMain = styled.main(({ appHeader, mobileNav, navOpen, previewActive, headerOffset = 0, theme }) => {
-    const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';
+    let heightOffset = appHeader ? headerHeight : '0rem';
+    if (mobileNav) {
+        heightOffset = mobileHeaderHeight;
+    }
     const appBackground = theme.base.palette['app-background'];
     return css `
     --appshell-offset: ${headerOffset}px;
@@ -511,27 +615,34 @@ export const StyledAppMain = styled.main(({ appHeader, mobileNav, navOpen, previ
     }
     position: relative;
     margin-inline-start: ${mobileNav ? 0 : navWidth};
-    min-height: calc(100vh - ${heightOffset});
+    /* stylelint-disable-next-line unit-allowed-list */
+    min-height: calc(100dvh - ${heightOffset});
     background: ${appBackground};
 
     :focus {
       outline: none;
     }
 
+    ${mobileNav &&
+        css `
+      --appshell-bottom-offset: ${mobileHeaderHeight};
+      /* stylelint-disable-next-line unit-allowed-list */
+      height: calc(100dvh - ${heightOffset});
+      overflow: auto;
+    `}
     ${navOpen &&
         !mobileNav &&
         css `
       margin-inline-start: ${navOpenWidth};
     `}
-
     ${!mobileNav &&
         css `
       transition: margin-inline-start
         ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
     `}
-
     & > ${StyledProgressBackdrop} {
-      max-height: calc(100vh - ${heightOffset});
+      /* stylelint-disable-next-line unit-allowed-list */
+      max-height: calc(100dvh - ${heightOffset});
       max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});
       inset-block-start: ${heightOffset};
       inset-inline-start: ${navOpen ? navOpenWidth : navWidth};
@@ -567,10 +678,12 @@ export const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {
     return css `
     background-color: ${bg};
     padding: 0;
+
     header {
       color: ${color};
       border-bottom: none;
     }
+
     ${StyledMenuItem} {
       background-color: ${bg};
       color: ${color};

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { darken, getContrast, lighten, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { Count } from '../Badges';\nimport { StyledAvatar } from '../Avatar';\nimport { StyledIcon } from '../Icon';\nimport { StyledImage } from '../Image/Image';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  calculateFontSize,\n  calculateForegroundColor,\n  calculateBackgroundAndContrastColor,\n  readableColor\n} from '../../styles';\nimport { StyledMenuItem } from '../Menu/Menu.styles';\nimport { useDirection } from '../../hooks';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledTooltip } from '../Tooltip';\nimport { StyledProgressBackdrop } from '../Progress';\nimport Icon from '../Icon/Icon';\nimport { StyledText } from '../Text';\nimport { resizeDrawerMaxWidth } from '../../styles/constants';\n\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const navWidth = '4rem';\nexport const navOpenWidth = '18.75rem';\nexport const headerHeight = '3rem';\nconst iconWidth = '1.125rem';\nconst iconBoxSize = `calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2)`;\n\nexport const StyledAppInfo = styled.a(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(${navWidth} / 4);\n    grid-template-columns: calc(${navWidth} / 2) auto;\n    column-gap: calc(${navWidth} / 4);\n    vertical-align: middle;\n\n    &:hover,\n    button&:hover {\n      background-color: ${hoverBg};\n      text-decoration: none;\n    }\n\n    &:focus:not([disabled]) {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledImage} {\n      display: inline-block;\n      width: calc(${navWidth} / 2);\n      margin-inline-end: calc(${theme.base.spacing} * 2);\n      vertical-align: middle;\n    }\n\n    span {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      vertical-align: middle;\n    }\n\n    span:last-of-type {\n      font-size: ${fontSize.xs};\n      color: ${foreground};\n    }\n\n    span:first-of-type {\n      font-size: ${fontSize.s};\n      color: ${foreground};\n      margin-inline-end: calc(${theme.base.spacing});\n      vertical-align: middle;\n    }\n  `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(({ theme }) => {\n  return css`\n    flex-grow: 1;\n    overflow-x: hidden;\n    overflow-y: auto;\n    @media (height <= ${theme.base.breakpoints.sm}) {\n      overflow: visible;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)`\n  position: absolute;\n  /* stylelint-disable-next-line unit-allowed-list */\n  inset-block-start: 0.25lh;\n  inset-inline-start: calc((${navWidth} / 2) - var(--nav-padding));\n`;\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSingleSelectIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSingleSelectIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItemExpandCollapse = styled(Icon)``;\n\nexport const StyledNavListItemGroupIndicator = styled(Icon)(({\n  theme: {\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  }\n}) => {\n  return css`\n    position: absolute;\n    width: 0.75rem;\n    height: 0.75rem;\n    margin-block-start: calc(${iconWidth} / 8);\n    margin-inline-start: 2.5rem;\n    ${detached &&\n    css`\n      margin-inline-start: calc(${navWidth} / 2 - ${iconWidth} / 6);\n    `}\n  `;\n});\n\nStyledNavListItemGroupIndicator.defaultProps = defaultThemeProp;\n\nexport const StyledUtilIconCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledNavItemIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {\n      margin-inline: ${iconBoxSize};\n    }\n\n    ${StyledAvatar} {\n      margin-inline: calc(\n        (${navWidth} - ${theme.base['hit-area']['mouse-min']} - 2 * var(--nav-padding)) / 2\n      );\n      margin-block: calc(0.5 * ${theme.base.spacing});\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledNavItemIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledAppNav = styled.nav<{ appHeader: boolean; showEnv: boolean }>(\n  ({ appHeader, showEnv, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n\n    const navBg = theme.components['app-shell'].nav.background;\n    const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(navBg, navFgColor);\n\n    return css`\n      position: fixed;\n      z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      background: ${navBg};\n      color: ${foregroundColor};\n      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});\n      width: ${navOpen ? navOpenWidth : navWidth};\n      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});\n      overflow: hidden;\n      white-space: nowrap;\n      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n      padding-block-end: ${theme.base.spacing};\n      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};\n      border-color: ${theme.components['app-shell'].nav['border-color']};\n      ${!showEnv &&\n      css`\n        padding-block-start: ${theme.base.spacing};\n      `}\n      @media (pointer: coarse) {\n        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});\n      }\n\n      @media (height <= ${theme.base.breakpoints.sm}) {\n        overflow-y: auto;\n        overflow-x: clip;\n      }\n\n      /* App navigation can be focused with shortcut */\n      :focus-visible {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${theme.base['custom-scrollbar'] &&\n      css`\n        * {\n          scrollbar-width: thin;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppNav.defaultProps = defaultThemeProp;\n\nexport const StyledCaseClose = styled.button``;\n\nexport const StyledNavListItemVisualContainer = styled.div<{\n  isCurrent: boolean;\n  navOpen: boolean;\n}>(\n  ({\n    theme: {\n      base: { spacing },\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    },\n    isCurrent,\n    navOpen\n  }) => {\n    return css`\n      max-width: ${navWidth};\n\n      & > ${StyledText} {\n        padding-inline: ${isCurrent\n          ? `${spacing} calc(0.5 * ${spacing})`\n          : `calc(0.5 * ${spacing})`};\n\n        ${!navOpen &&\n        detached &&\n        css`\n          padding-inline: 0;\n        `}\n      }\n    `;\n  }\n);\n\nStyledNavListItemVisualContainer.defaultProps = defaultThemeProp;\n\nexport const StyledNavListExpandCollapse = styled(StyledNavListItemVisualContainer)`\n  display: flex;\n  justify-content: center;\n  min-width: ${navWidth};\n`;\n\nexport const StyledNavListItem = styled.li<{\n  nestedListCollapsed: boolean;\n  singleSelect: boolean;\n}>(({ theme, nestedListCollapsed, singleSelect }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': semiBold }\n    },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground, nestedList } = navContrastColors(theme);\n  const { rtl } = useDirection();\n\n  const nestedListColor =\n    theme.components['app-shell'].nav['nested-list-background'] === 'auto'\n      ? nestedList\n      : theme.components['app-shell'].nav['nested-list-background'];\n\n  return css`\n    display: block;\n    position: relative;\n    padding-block: 0;\n    padding-inline: var(--nav-padding);\n\n    ${StyledIcon} {\n      font-size: 1.25rem;\n    }\n\n    ${StyledCaseClose} {\n      display: flex;\n      position: absolute;\n      opacity: 0;\n      left: ${navOpen ? 'auto' : '100%'};\n      top: 50%;\n      bottom: 50%;\n      margin: auto 0;\n      color: ${foreground};\n      transition-property: transform, opacity;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n      ${navOpen &&\n      css`\n        inset-inline-end: 1rem;\n\n        &:hover,\n        &:focus {\n          opacity: 1;\n        }\n      `}\n    }\n\n    &:first-child ${StyledNavListItemGroupIndicator} {\n      display: none;\n    }\n\n    > :first-child {\n      position: relative;\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding-block: ${theme.base.spacing};\n      padding-inline: 0;\n      white-space: nowrap;\n      color: ${foreground};\n      cursor: pointer;\n      text-decoration: none;\n      border-block: ${pxToRem(1)} solid transparent;\n\n      ${detached &&\n      css`\n        --item-height: 2.5rem;\n        padding: 0;\n        height: var(--item-height);\n        border: none;\n        border-radius: calc(var(--item-height) / 2);\n        transition: border-radius ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      `}\n\n      ${detached &&\n      css`\n        &:not(:only-child) {\n          background: ${nestedListColor};\n          margin-block-end: 0.125rem;\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n      `}\n\n      span:not(${StyledCountIcon}) {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: inherit;\n        white-space: nowrap;\n      }\n\n      &:hover,\n      &:focus {\n        color: ${foreground};\n        background: ${transparentize(0.9, foreground)};\n      }\n\n      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {\n        ${navOpen &&\n        css`\n          opacity: 1;\n        `}\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${StyledNavListItemExpandCollapse} {\n        position: absolute;\n        left: ${navOpen ? 'auto' : '100%'};\n        ${navOpen &&\n        css`\n          inset-inline-end: 1rem;\n        `}\n        margin: 0;\n        opacity: ${navOpen ? '1' : '0'};\n        transition-property: transform, opacity;\n        transition-duration: ${theme.base.animation.speed};\n        transition-timing-function: ${theme.base.animation.timing.ease};\n\n        ${!nestedListCollapsed &&\n        css`\n          transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n        `}\n      }\n\n      ${singleSelect &&\n      css`\n        ${StyledNavItemIconBox} > ${StyledIcon} {\n          margin-inline: calc(${theme.base.spacing} - var(--nav-padding));\n        }\n      `}\n\n      ${StyledSingleSelectIconBox} + span {\n        margin-inline-start: ${theme.base.spacing};\n      }\n    }\n\n    [aria-expanded='true'] {\n      ${StyledNavListItemGroupIndicator} {\n        display: none;\n      }\n    }\n\n    [aria-current='page'],\n    [aria-expanded='false']:has(+ ul [aria-current='page']) {\n      position: relative;\n      font-weight: ${semiBold};\n      border-block: ${pxToRem(1)} solid ${theme.components['app-shell'].nav['border-color']};\n      background: ${transparentize(0.85, foreground)};\n      ${detached &&\n      css`\n        background: ${transparentize(0.9, foreground)};\n      `}\n\n      ${!detached &&\n      css`\n        &::before {\n          content: '';\n          position: absolute;\n          width: ${pxToRem(4)};\n          inset-inline-start: 0;\n          top: 0;\n          bottom: 0;\n          background-color: ${foreground};\n        }\n      `}\n    }\n  `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(\n  ({\n    theme: {\n      base,\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    }\n  }) => {\n    return css`\n      --nav-padding: ${detached ? '0.75rem' : '0px'};\n      min-width: ${navWidth};\n\n      & > ${StyledNavListItem} {\n        &:not(:last-child),\n        &:only-child {\n          margin-block-end: calc(${base.spacing} / 2);\n        }\n      }\n    `;\n  }\n);\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNavCasesList = styled.div(({ theme }) => {\n  return css`\n    ${StyledNavListItem} {\n      > :first-child {\n        padding: ${theme.base.spacing} 0;\n      }\n    }\n  `;\n});\n\nStyledNavCasesList.defaultProps = defaultThemeProp;\n\nexport const StyledNestedNavList = styled(StyledNavList)(({ theme }) => {\n  const {\n    base: { 'border-radius': borderRadius, spacing },\n\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { nestedList } = navContrastColors(theme);\n\n  const nestedListColor =\n    theme.components['app-shell'].nav['nested-list-background'] === 'auto'\n      ? nestedList\n      : theme.components['app-shell'].nav['nested-list-background'];\n\n  return css`\n    background: ${nestedListColor};\n    border-radius: ${detached ? borderRadius : '0px'};\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n\n    ${StyledNavListItem} {\n      &:first-child {\n        border-block-start: ${spacing} solid transparent;\n      }\n\n      &:last-child {\n        border-block-end: calc(0.5 * ${spacing}) solid transparent;\n      }\n\n      &:not(:last-child) {\n        margin-block-end: calc(${spacing} / 2);\n      }\n\n      > :first-child {\n        &:has(${StyledIcon}) {\n          padding-inline-start: calc(((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2));\n        }\n\n        &:not(:has(${StyledIcon})) {\n          padding-inline-start: calc(\n            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconBoxSize}\n          );\n        }\n      }\n    }\n  `;\n});\n\nStyledNestedNavList.defaultProps = defaultThemeProp;\n\nexport const StyledCaseTypes = styled.div(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    button {\n      ${StyledNavItemIconBox} {\n        transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='false'] ${StyledNavItemIconBox} {\n        transform: none;\n      }\n\n      &[aria-expanded='true'] ${StyledNavItemIconBox} {\n        transform: rotateZ(45deg);\n      }\n    }\n\n    > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {\n      background: ${theme.components['app-shell'].nav['create-button-background']};\n\n      &:hover,\n      &:focus {\n        background: ${transparentize(0.9, foreground)};\n      }\n    }\n  `;\n});\n\nStyledCaseTypes.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  return css`\n    border-block-start: 0.0625rem solid ${theme.components['app-shell'].nav['border-color']};\n    margin-block-start: calc(${theme.base.spacing} / 2);\n\n    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {\n      margin: 0 calc((${navWidth} - ${iconWidth}) / 2);\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.header(({ theme }) => {\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    min-width: 100%;\n    min-height: ${headerHeight};\n    z-index: ${theme.base['z-index'].drawer};\n    background: ${mobileNavColor};\n    color: ${foreground};\n    padding-inline-start: ${theme.base.spacing};\n\n    @media (pointer: coarse) {\n      padding-inline-start: 0;\n    }\n\n    @media (height >= ${theme.base.breakpoints.sm}) {\n      inset-block-start: 0;\n      position: sticky;\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledLoading = styled.div`\n  font-size: 2rem;\n`;\n\nexport const StyledAppMain = styled.main<{\n  appHeader: boolean;\n  mobileNav: boolean;\n  navOpen: boolean;\n  previewActive: boolean;\n  headerOffset?: number;\n}>(({ appHeader, mobileNav, navOpen, previewActive, headerOffset = 0, theme }) => {\n  const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';\n  const appBackground = theme.base.palette['app-background'];\n\n  return css`\n    --appshell-offset: ${headerOffset}px;\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --appshell-horizontal-offset: 0rem;\n\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};\n    }\n    position: relative;\n    margin-inline-start: ${mobileNav ? 0 : navWidth};\n    min-height: calc(100vh - ${heightOffset});\n    background: ${appBackground};\n\n    :focus {\n      outline: none;\n    }\n\n    ${navOpen &&\n    !mobileNav &&\n    css`\n      margin-inline-start: ${navOpenWidth};\n    `}\n\n    ${!mobileNav &&\n    css`\n      transition: margin-inline-start\n        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n    `}\n\n    & > ${StyledProgressBackdrop} {\n      max-height: calc(100vh - ${heightOffset});\n      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});\n      inset-block-start: ${heightOffset};\n      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};\n      position: fixed;\n      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    }\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      transition: margin-inline-end ${!mobileNav ? ', margin-inline-start' : ''};\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      ${previewActive &&\n      css`\n        transition: none;\n        margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n      `}\n    }\n  `;\n});\n\nStyledAppMain.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {\n  const bg = theme.components.tooltip['background-color'];\n  const color = readableColor(bg);\n\n  return css`\n    background-color: ${bg};\n    padding: 0;\n    header {\n      color: ${color};\n      border-bottom: none;\n    }\n    ${StyledMenuItem} {\n      background-color: ${bg};\n      color: ${color};\n\n      &:hover,\n      &:focus {\n        background-color: ${bg};\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledAppShellTooltip.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n  let bg = darken(0.2, backgroundColor);\n\n  if (getContrast(backgroundColor, bg) < 1.3) {\n    bg = lighten(0.2, backgroundColor);\n  }\n\n  return css`\n    background: ${bg};\n    color: ${navFgColor};\n    border: none;\n    margin-top: calc(1 * ${theme.base.spacing});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { darken, getContrast, lighten, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { StyledAlert } from '../Badges/Alert';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledLink } from '../Link/Link';\nimport { StyledDrawer } from '../Drawer/Drawer';\nimport Backdrop from '../Backdrop/Backdrop';\nimport { Count } from '../Badges';\nimport { StyledAvatar } from '../Avatar';\nimport { StyledIcon } from '../Icon';\nimport { StyledImage } from '../Image/Image';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  calculateFontSize,\n  calculateForegroundColor,\n  calculateBackgroundAndContrastColor,\n  readableColor\n} from '../../styles';\nimport { StyledMenuItem } from '../Menu/Menu.styles';\nimport { useDirection } from '../../hooks';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledTooltip } from '../Tooltip';\nimport { StyledProgressBackdrop } from '../Progress';\nimport Icon from '../Icon/Icon';\nimport { StyledText } from '../Text';\nimport { resizeDrawerMaxWidth } from '../../styles/constants';\n\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const navWidth = '4rem';\nexport const navOpenWidth = '18.75rem';\nexport const headerHeight = '3rem';\nexport const mobileHeaderHeight = '3.75rem';\nconst iconWidth = '1.125rem';\nconst iconBoxSize = `calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2)`;\n\nexport const StyledAppInfo = styled.a(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(${navWidth} / 4);\n    grid-template-columns: calc(${navWidth} / 2) auto;\n    column-gap: calc(${navWidth} / 4);\n    vertical-align: middle;\n\n    &:hover,\n    button&:hover {\n      background-color: ${hoverBg};\n      text-decoration: none;\n    }\n\n    &:focus:not([disabled]) {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledImage} {\n      display: inline-block;\n      width: calc(${navWidth} / 2);\n      margin-inline-end: calc(${theme.base.spacing} * 2);\n      vertical-align: middle;\n    }\n\n    span {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      vertical-align: middle;\n    }\n\n    span:last-of-type {\n      font-size: ${fontSize.xs};\n      color: ${foreground};\n    }\n\n    span:first-of-type {\n      font-size: ${fontSize.s};\n      color: ${foreground};\n      margin-inline-end: calc(${theme.base.spacing});\n      vertical-align: middle;\n    }\n  `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(({ theme }) => {\n  return css`\n    flex-grow: 1;\n    overflow-x: hidden;\n    overflow-y: auto;\n    @media (height <= ${theme.base.breakpoints.sm}) {\n      overflow: visible;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)`\n  position: absolute;\n  /* stylelint-disable-next-line unit-allowed-list */\n  inset-block-start: 0.25lh;\n  inset-inline-start: calc((${navWidth} / 2) - var(--nav-padding));\n`;\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSingleSelectIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSingleSelectIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItemExpandCollapse = styled(Icon)``;\n\nexport const StyledNavListItemGroupIndicator = styled(Icon)(({\n  theme: {\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  }\n}) => {\n  return css`\n    position: absolute;\n    width: 0.75rem;\n    height: 0.75rem;\n    margin-block-start: calc(${iconWidth} / 8);\n    margin-inline-start: 2.5rem;\n    ${detached &&\n    css`\n      margin-inline-start: calc(${navWidth} / 2 - ${iconWidth} / 6);\n    `}\n  `;\n});\n\nStyledNavListItemGroupIndicator.defaultProps = defaultThemeProp;\n\nexport const StyledUtilIconCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledNavItemIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n\n    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {\n      margin-inline: ${iconBoxSize};\n    }\n\n    ${StyledAvatar} {\n      margin-inline: calc(\n        (${navWidth} - ${theme.base['hit-area']['mouse-min']} - 2 * var(--nav-padding)) / 2\n      );\n      margin-block: calc(0.5 * ${theme.base.spacing});\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledNavItemIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledAppNav = styled.nav<{ appHeader: boolean; showEnv: boolean }>(\n  ({ appHeader, showEnv, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n\n    const navBg = theme.components['app-shell'].nav.background;\n    const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(navBg, navFgColor);\n\n    return css`\n      position: fixed;\n      z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      background: ${navBg};\n      color: ${foregroundColor};\n      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});\n      width: ${navOpen ? navOpenWidth : navWidth};\n      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});\n      overflow: hidden;\n      white-space: nowrap;\n      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n      padding-block-end: ${theme.base.spacing};\n      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};\n      border-color: ${theme.components['app-shell'].nav['border-color']};\n      @media (pointer: coarse) {\n        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});\n      }\n\n      @media (height <= ${theme.base.breakpoints.sm}) {\n        overflow-y: auto;\n        overflow-x: clip;\n      }\n\n      ${!showEnv &&\n      css`\n        padding-block-start: ${theme.base.spacing};\n      `}\n      /* App navigation can be focused with shortcut */\n      :focus-visible {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${theme.base['custom-scrollbar'] &&\n      css`\n        * {\n          scrollbar-width: thin;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppNav.defaultProps = defaultThemeProp;\n\nexport const StyledCaseClose = styled.button``;\n\nexport const StyledNavListItemVisualContainer = styled.div<{\n  isCurrent: boolean;\n  navOpen: boolean;\n}>(\n  ({\n    theme: {\n      base: { spacing },\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    },\n    isCurrent,\n    navOpen\n  }) => {\n    return css`\n      max-width: ${navWidth};\n\n      & > ${StyledText} {\n        padding-inline: ${isCurrent\n          ? `${spacing} calc(0.5 * ${spacing})`\n          : `calc(0.5 * ${spacing})`};\n\n        ${!navOpen &&\n        detached &&\n        css`\n          padding-inline: 0;\n        `}\n      }\n    `;\n  }\n);\n\nStyledNavListItemVisualContainer.defaultProps = defaultThemeProp;\n\nexport const StyledNavListExpandCollapse = styled(StyledNavListItemVisualContainer)`\n  display: flex;\n  justify-content: center;\n  min-width: ${navWidth};\n`;\n\nexport const StyledNavListItem = styled.li<{\n  nestedListCollapsed: boolean;\n  singleSelect: boolean;\n}>(({ theme, nestedListCollapsed, singleSelect }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': semiBold }\n    },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground, nestedList } = navContrastColors(theme);\n  const { rtl } = useDirection();\n\n  const nestedListColor =\n    theme.components['app-shell'].nav['nested-list-background'] === 'auto'\n      ? nestedList\n      : theme.components['app-shell'].nav['nested-list-background'];\n\n  return css`\n    display: block;\n    position: relative;\n    padding-block: 0;\n    padding-inline: var(--nav-padding);\n\n    ${StyledIcon} {\n      font-size: 1.25rem;\n    }\n\n    ${StyledCaseClose} {\n      display: flex;\n      position: absolute;\n      opacity: 0;\n      left: ${navOpen ? 'auto' : '100%'};\n      top: 50%;\n      bottom: 50%;\n      margin: auto 0;\n      color: ${foreground};\n      transition-property: transform, opacity;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n      ${navOpen &&\n      css`\n        inset-inline-end: 1rem;\n\n        &:hover,\n        &:focus {\n          opacity: 1;\n        }\n      `}\n    }\n\n    &:first-child ${StyledNavListItemGroupIndicator} {\n      display: none;\n    }\n\n    > :first-child {\n      position: relative;\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding-block: ${theme.base.spacing};\n      padding-inline: 0;\n      white-space: nowrap;\n      color: ${foreground};\n      cursor: pointer;\n      text-decoration: none;\n      border-block: ${pxToRem(1)} solid transparent;\n\n      ${detached &&\n      css`\n        --item-height: 2.5rem;\n        padding: 0;\n        height: var(--item-height);\n        border: none;\n        border-radius: calc(var(--item-height) / 2);\n        transition: border-radius ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      `}\n      ${detached &&\n      css`\n        &:not(:only-child) {\n          background: ${nestedListColor};\n          margin-block-end: 0.125rem;\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n      `}\n      span:not(${StyledCountIcon}) {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: inherit;\n        white-space: nowrap;\n      }\n\n      &:hover,\n      &:focus {\n        color: ${foreground};\n        background: ${transparentize(0.9, foreground)};\n      }\n\n      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {\n        ${navOpen &&\n        css`\n          opacity: 1;\n        `}\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${StyledNavListItemExpandCollapse} {\n        position: absolute;\n        left: ${navOpen ? 'auto' : '100%'};\n        ${navOpen &&\n        css`\n          inset-inline-end: 1rem;\n        `}\n        margin: 0;\n        opacity: ${navOpen ? '1' : '0'};\n        transition-property: transform, opacity;\n        transition-duration: ${theme.base.animation.speed};\n        transition-timing-function: ${theme.base.animation.timing.ease};\n\n        ${!nestedListCollapsed &&\n        css`\n          transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n        `}\n      }\n\n      ${singleSelect &&\n      css`\n        ${StyledNavItemIconBox} > ${StyledIcon} {\n          margin-inline: calc(${theme.base.spacing} - var(--nav-padding));\n        }\n      `}\n      ${StyledSingleSelectIconBox} + span {\n        margin-inline-start: ${theme.base.spacing};\n      }\n    }\n\n    [aria-expanded='true'] {\n      ${StyledNavListItemGroupIndicator} {\n        display: none;\n      }\n    }\n\n    [aria-current='page'],\n    [aria-expanded='false']:has(+ ul [aria-current='page']) {\n      position: relative;\n      font-weight: ${semiBold};\n      border-block: ${pxToRem(1)} solid ${theme.components['app-shell'].nav['border-color']};\n      background: ${transparentize(0.85, foreground)};\n      ${detached &&\n      css`\n        background: ${transparentize(0.9, foreground)};\n      `}\n\n      ${!detached &&\n      css`\n        &::before {\n          content: '';\n          position: absolute;\n          width: ${pxToRem(4)};\n          inset-inline-start: 0;\n          top: 0;\n          bottom: 0;\n          background-color: ${foreground};\n        }\n      `}\n    }\n  `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(\n  ({\n    theme: {\n      base,\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    }\n  }) => {\n    return css`\n      --nav-padding: ${detached ? '0.75rem' : '0px'};\n      min-width: ${navWidth};\n\n      & > ${StyledNavListItem} {\n        &:not(:last-child),\n        &:only-child {\n          margin-block-end: calc(${base.spacing} / 2);\n        }\n      }\n    `;\n  }\n);\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNavCasesList = styled.div(({ theme }) => {\n  return css`\n    ${StyledNavListItem} {\n      > :first-child {\n        padding: ${theme.base.spacing} 0;\n      }\n    }\n  `;\n});\n\nStyledNavCasesList.defaultProps = defaultThemeProp;\n\nexport const StyledNestedNavList = styled(StyledNavList)(({ theme }) => {\n  const {\n    base: { 'border-radius': borderRadius, spacing },\n\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { nestedList } = navContrastColors(theme);\n\n  const nestedListColor =\n    theme.components['app-shell'].nav['nested-list-background'] === 'auto'\n      ? nestedList\n      : theme.components['app-shell'].nav['nested-list-background'];\n\n  return css`\n    background: ${nestedListColor};\n    border-radius: ${detached ? borderRadius : '0px'};\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n\n    ${StyledNavListItem} {\n      &:first-child {\n        border-block-start: ${spacing} solid transparent;\n      }\n\n      &:last-child {\n        border-block-end: calc(0.5 * ${spacing}) solid transparent;\n      }\n\n      &:not(:last-child) {\n        margin-block-end: calc(${spacing} / 2);\n      }\n\n      > :first-child {\n        &:has(${StyledIcon}) {\n          padding-inline-start: calc(((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2));\n        }\n\n        &:not(:has(${StyledIcon})) {\n          padding-inline-start: calc(\n            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconBoxSize}\n          );\n        }\n      }\n    }\n  `;\n});\n\nStyledNestedNavList.defaultProps = defaultThemeProp;\n\nexport const StyledCaseTypes = styled.div(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    button {\n      ${StyledNavItemIconBox} {\n        transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='false'] ${StyledNavItemIconBox} {\n        transform: none;\n      }\n\n      &[aria-expanded='true'] ${StyledNavItemIconBox} {\n        transform: rotateZ(45deg);\n      }\n    }\n\n    > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {\n      background: ${theme.components['app-shell'].nav['create-button-background']};\n\n      &:hover,\n      &:focus {\n        background: ${transparentize(0.9, foreground)};\n      }\n    }\n  `;\n});\n\nStyledCaseTypes.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  return css`\n    border-block-start: 0.0625rem solid ${theme.components['app-shell'].nav['border-color']};\n    margin-block-start: calc(${theme.base.spacing} / 2);\n\n    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {\n      margin: 0 calc((${navWidth} - ${iconWidth}) / 2);\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.header<{\n  navOpen: boolean;\n}>(({ theme, navOpen }) => {\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow }\n    }\n  } = theme;\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    min-width: 100%;\n    min-height: ${mobileHeaderHeight};\n    z-index: ${theme.base['z-index'].drawer};\n    background: ${mobileNavColor};\n    color: ${foreground};\n    padding: ${theme.base.spacing};\n    position: fixed;\n    /* stylelint-disable-next-line unit-allowed-list */\n    inset-block-start: calc(100dvh - ${mobileHeaderHeight});\n\n    ${navOpen &&\n    css`\n      z-index: calc(${theme.base['z-index'].backdrop} + 1);\n    `}\n    > div:has(> ${StyledNavList}),\n    > div:has(> ${StyledNavList}) > ${StyledNavList} {\n      display: contents;\n\n      ${StyledNavListItem} {\n        width: calc(${hitAreaFinger} + (2.5 * ${theme.base.spacing}));\n        padding: 0;\n        margin: 0;\n\n        ${StyledBareButton}, ${StyledLink} {\n          flex-direction: column;\n          justify-content: center;\n          gap: calc(0.5 * ${theme.base.spacing});\n          height: ${hitAreaFinger};\n          padding: 0 ${theme.base.spacing};\n          border-radius: ${borderRadius};\n          border-block: none;\n\n          &::before {\n            width: 0;\n          }\n\n          span:not(${StyledCountIcon}) {\n            width: inherit;\n            text-align: center;\n          }\n\n          &:enabled:focus,\n          &:not([disabled]):focus {\n            box-shadow: ${focusShadow};\n          }\n\n          ${StyledNavListItemVisualContainer} {\n            padding: 0;\n            margin: 0;\n\n            ${StyledNavItemIconBox} {\n              display: flex;\n            }\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileButton = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius\n    },\n    components: {\n      button: { 'border-width': borderWidth }\n    }\n  } = theme;\n  const { mobileNavOpen } = useContext(AppShellContext);\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    flex-direction: column;\n    flex-shrink: 0;\n    gap: calc(0.5 * ${theme.base.spacing});\n    height: ${hitAreaFinger};\n    width: calc(${hitAreaFinger} + (2.5 * ${theme.base.spacing}));\n    border-radius: ${borderRadius};\n    border: none;\n\n    span {\n      width: inherit;\n      padding-inline: ${theme.base.spacing};\n      ${ellipsisOverflow}\n    }\n\n    ${mobileNavOpen &&\n    css`\n      ::before {\n        content: '';\n        position: absolute;\n        inset: calc(${borderWidth} * -1);\n        border-radius: inherit;\n        background: ${transparentize(0.85, foreground)};\n      }\n    `}\n    ${StyledAlert} {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: calc(50% + (0.625rem / 2));\n    }\n  `;\n});\n\nStyledMobileButton.defaultProps = defaultThemeProp;\n\nexport const StyledMobileBackdrop = styled(Backdrop)`\n  /* stylelint-disable-next-line unit-allowed-list */\n  height: calc(100dvh - ${mobileHeaderHeight});\n\n  > ${StyledDrawer} {\n    bottom: ${mobileHeaderHeight};\n\n    > ${StyledAppNav}, ${StyledDrawer} {\n      width: 100vw;\n      max-width: inherit;\n      /* stylelint-disable-next-line unit-allowed-list */\n      height: calc(100dvh - ${mobileHeaderHeight});\n      border-inline-end: none;\n    }\n  }\n`;\n\nStyledMobileBackdrop.defaultProps = defaultThemeProp;\n\nexport const StyledLoading = styled.div`\n  font-size: 2rem;\n`;\n\nexport const StyledAppMain = styled.main<{\n  appHeader: boolean;\n  mobileNav: boolean;\n  navOpen: boolean;\n  previewActive: boolean;\n  headerOffset?: number;\n}>(({ appHeader, mobileNav, navOpen, previewActive, headerOffset = 0, theme }) => {\n  let heightOffset = appHeader ? headerHeight : '0rem';\n  if (mobileNav) {\n    heightOffset = mobileHeaderHeight;\n  }\n  const appBackground = theme.base.palette['app-background'];\n\n  return css`\n    --appshell-offset: ${headerOffset}px;\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --appshell-horizontal-offset: 0rem;\n\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};\n    }\n    position: relative;\n    margin-inline-start: ${mobileNav ? 0 : navWidth};\n    /* stylelint-disable-next-line unit-allowed-list */\n    min-height: calc(100dvh - ${heightOffset});\n    background: ${appBackground};\n\n    :focus {\n      outline: none;\n    }\n\n    ${mobileNav &&\n    css`\n      --appshell-bottom-offset: ${mobileHeaderHeight};\n      /* stylelint-disable-next-line unit-allowed-list */\n      height: calc(100dvh - ${heightOffset});\n      overflow: auto;\n    `}\n    ${navOpen &&\n    !mobileNav &&\n    css`\n      margin-inline-start: ${navOpenWidth};\n    `}\n    ${!mobileNav &&\n    css`\n      transition: margin-inline-start\n        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n    `}\n    & > ${StyledProgressBackdrop} {\n      /* stylelint-disable-next-line unit-allowed-list */\n      max-height: calc(100dvh - ${heightOffset});\n      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});\n      inset-block-start: ${heightOffset};\n      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};\n      position: fixed;\n      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    }\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      transition: margin-inline-end ${!mobileNav ? ', margin-inline-start' : ''};\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      ${previewActive &&\n      css`\n        transition: none;\n        margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n      `}\n    }\n  `;\n});\n\nStyledAppMain.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {\n  const bg = theme.components.tooltip['background-color'];\n  const color = readableColor(bg);\n\n  return css`\n    background-color: ${bg};\n    padding: 0;\n\n    header {\n      color: ${color};\n      border-bottom: none;\n    }\n\n    ${StyledMenuItem} {\n      background-color: ${bg};\n      color: ${color};\n\n      &:hover,\n      &:focus {\n        background-color: ${bg};\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledAppShellTooltip.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n  let bg = darken(0.2, backgroundColor);\n\n  if (getContrast(backgroundColor, bg) < 1.3) {\n    bg = lighten(0.2, backgroundColor);\n  }\n\n  return css`\n    background: ${bg};\n    color: ${navFgColor};\n    border: none;\n    margin-top: calc(1 * ${theme.base.spacing});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n"]}

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

@@ -155,6 +155,7 @@ export interface NavListProps extends AsProp, BaseProps {
     id?: string;
     /** Whether the list is of single-select style options */
     singleSelect?: boolean;
+    mobileNavBar?: boolean;
 }
 export interface NavListItemWrapperProps extends ForwardProps {
     label: string;
@@ -165,6 +166,7 @@ export interface NavListItemWrapperProps extends ForwardProps {
     filterAt?: number;
     onMenuToggle?: (state: 'open' | 'close') => void;
     childElementRef: RefObject<HTMLElement>;
+    mobileNavBar?: boolean;
 }
 export interface NavListItemProps extends AsProp, BaseProps, ForwardProps, NoChildrenProp {
     id?: string;
@@ -185,6 +187,7 @@ export interface NavListItemProps extends AsProp, BaseProps, ForwardProps, NoChi
     singleSelect?: NavListProps['singleSelect'];
     /** Whether the item is selected */
     selected?: boolean;
+    mobileNavBar?: boolean;
 }
 export interface NavMenuProps extends NavListItemProps {
     forwardedRef?: Ref<HTMLButtonElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,qBAAqB;AAErB,MAAM,WAAW,YAAY;IAC3B,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wFAAwF;IACxF,QAAQ,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC5B,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6GAA6G;IAC7G,YAAY,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACjC,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC5F,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACrC;AAED,UAAU,sBAAuB,SAAQ,SAAS;IAChD,8CAA8C;IAC9C,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,qDAAqD;IACrD,cAAc,EAAE,CACd,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EACvB,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,cAAc,CAAC,KACrF,IAAI,CAAC;IACV;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAElF,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D,6CAA6C;IAC7C,OAAO,EAAE,YAAY,CAAC;IACtB,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,QAAQ,EAAE,aAAa,CAAC;IACxB,oHAAoH;IACpH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,oGAAoG;IACpG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C,gGAAgG;IAChG,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,YAAY,CAAC,EAAE,CAAC;IACzC,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uFAAuF;IACvF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,oCAAoC;IACpC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,aAAa;IAC5B,iDAAiD;IACjD,MAAM,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;IACpF,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7F,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/D,0CAA0C;IAC1C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,gGAAgG;IAChG,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,YAAY,CAAC,EAAE,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM,EAAE,SAAS;IACrD,KAAK,CAAC,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAAC,EAAE,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,iBAAiB;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,gBAAiB,SAAQ,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc;IACvF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,cAAc,CAAC,CAAC;IACpF,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,cAAc,GAAG,iBAAiB,CAAC,CAAC;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACvC;AAED,sBAAsB;AAEtB,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,YAAY;IAC7D,eAAe,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/D,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,mBAAmB;AAEnB,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,CAAC,eAAe,GAAG,YAAY,CAAC,EAAE,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,GAAG,YAAY,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7F,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yCAAyC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5F,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  KeyboardEvent,\n  MouseEvent,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefObject\n} from 'react';\n\nimport type { AsProp, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport type { ImageProps } from '../Image';\nimport type { ProgressProps } from '../Progress';\nimport type { SearchInputProps } from '../SearchInput';\nimport type { MenuItemProps } from '../Menu';\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n  /** The primary text to render in the header. */\n  appName: string;\n  /** If true, the appName will not be visibly displayed on screen. */\n  appNameHidden?: boolean;\n  /** The source for a small application image or logo that is rendered in the nav bar. */\n  imageSrc: ImageProps['src'];\n  /** The alt text for the image. Defaults to \"Application logo\" */\n  imageAltText?: string;\n  /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n  fullImageSrc?: ImageProps['src'];\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** The secondary text to render in the header. */\n  portalName?: string;\n  /** Specifies where to open the link href. */\n  target?: string;\n}\n\nexport interface ContextItem extends Pick<MenuItemProps, 'id' | 'primary' | 'visual' | 'href'> {\n  selected: MenuItemProps['selected'];\n}\n\ninterface ContextSwitcherOptions extends BaseProps {\n  /** Application contexts available to user. */\n  contexts: ContextItem[];\n  /** Callback on click of item in context switcher. */\n  onContextClick: (\n    id: MenuItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement | HTMLDivElement>\n  ) => void;\n  /** Label of context being modified; i.e: \"Switch Application\", \"Switch Studio\"\n   * @default 'Switch to…'\n   */\n  label?: string;\n}\n\nexport type ContextSwitcherProps = ContextSwitcherOptions | Record<string, never>;\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n  /** Props related to the App Shell header. */\n  appInfo: AppInfoProps;\n  /** The content of the application. */\n  main: ReactNode;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** If true, a header will render containing the logo and name of the app as well as search and operator regions. */\n  appHeader?: boolean;\n  /** Context switcher configuration. */\n  contextSwitcher?: ContextSwitcherProps;\n  /** If true, the search results page will replace the search input in the app header with its own */\n  searchPage?: boolean;\n  /** Props related to the Search Input. */\n  searchInput?: SearchInputProps;\n  /**\n   * The aria-label for the search input.\n   * @default 'Sitewide'\n   */\n  searchLabel?: string;\n  /** A set of cases that will render in an expanded list within the App Shell. */\n  caseTypes?: CaseTypeProps[];\n  /** A set of links that will render as a flat list in the App Shell. */\n  links?: LinkProps[];\n  /** A set of cases that will render as a flat list in the App Shell. */\n  cases?: CaseProps[];\n  /** Place the main content of the application into a loading state by way of a boolean or a custom message. */\n  progress?: boolean | ProgressProps['message'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  utils?: (UtilItemProps | ReactElement)[];\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n  defaultExpanded?: boolean;\n  /** When the navigation is collapsed menus will be shown on hover instead of on click */\n  collapsedHoverMenus?: boolean;\n}\n\nexport interface CaseTypeProps {\n  /** The display name of the case. */\n  name: string;\n  /** The icon for the case. */\n  icon?: string;\n  /** Click handler for the case. */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** The display name of the link. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** The name of the Cosmos Icon to render as a visual. */\n  icon?: string;\n  /** Determines if the link represents the active page. */\n  active?: boolean;\n  /** A set of nested links. */\n  links?: LinkProps[];\n  /** Click handler for the link. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface CaseProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** Name of the case or some primary information like title. */\n  primary: string;\n  /** Additional info of a case like timestamp. */\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  /** A visual element identifying the case. If not passed will render case-solid icon */\n  visual?: ReactNode;\n  /** Determines if the case represents the active page. */\n  active?: boolean;\n  /** Click handler for the case . */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Dismiss handler for the case. */\n  onDismiss?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface OperatorProps {\n  /** A visual element identifying the operator. */\n  avatar: ReactNode;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n  /** The name of the operator. */\n  name: string;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n  /** The display name of an utility item. */\n  name: string;\n  /** Number when given displays on top-right of a given icon. */\n  count?: number;\n  /** View that renders on an appShell drawer onClick of an item */\n  drawerView?: ReactNode;\n  /** Heading for view that renders */\n  drawerHeader?: string;\n  /** Callback that fires on appshell drawer open */\n  onDrawerOpen?: () => void;\n  /** Callback that fires on appshell drawer close */\n  onDrawerClose?: () => void;\n}\n\nexport interface UtilsProps {\n  /** Context switcher config. */\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  /** The active user of the application. */\n  operator: AppShellProps['operator'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  items?: (UtilItemProps | ReactElement)[];\n  appHeader?: boolean;\n}\n\nexport interface NavListProps extends AsProp, BaseProps {\n  items?: (NavListItemProps | ReactElement)[];\n  nestedList?: boolean;\n  collapsed?: boolean;\n  id?: string;\n  /** Whether the list is of single-select style options */\n  singleSelect?: boolean;\n}\n\nexport interface NavListItemWrapperProps extends ForwardProps {\n  label: string;\n  tooltipLabel: string;\n  content?: ReactNode;\n  items?: NavListItemProps[];\n  /** @default 5 */\n  filterAt?: number;\n  onMenuToggle?: (state: 'open' | 'close') => void;\n  childElementRef: RefObject<HTMLElement>;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps, ForwardProps, NoChildrenProp {\n  id?: string;\n  visual?: ReactNode;\n  primary: string;\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n  items?: NavListItemProps[];\n  collapseItems?: boolean;\n  actions?: OperatorProps['actions'];\n  onDismiss?: MouseEventHandler<HTMLElement>;\n  forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n  isMenuItem?: boolean;\n  /** Whether the item is a single-select option */\n  singleSelect?: NavListProps['singleSelect'];\n  /** Whether the item is selected */\n  selected?: boolean;\n}\n\nexport interface NavMenuProps extends NavListItemProps {\n  forwardedRef?: Ref<HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  operator: AppShellProps['operator'];\n  searchInput?: AppShellProps['searchInput'];\n  searchLabel?: AppShellProps['searchLabel'];\n  searchPage?: AppShellProps['searchPage'];\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n  items: (DrawerItemProps & ForwardProps)[];\n  loading?: boolean;\n  viewAll?: {\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport interface DrawerItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** A flag indicating if the item has been pinned or not. */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n  headingText?: string;\n  emptyText: string;\n  displayRecents: boolean;\n  displayPins?: boolean;\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  KeyboardEvent,\n  MouseEvent,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefObject\n} from 'react';\n\nimport type { AsProp, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport type { ImageProps } from '../Image';\nimport type { ProgressProps } from '../Progress';\nimport type { SearchInputProps } from '../SearchInput';\nimport type { MenuItemProps } from '../Menu';\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n  /** The primary text to render in the header. */\n  appName: string;\n  /** If true, the appName will not be visibly displayed on screen. */\n  appNameHidden?: boolean;\n  /** The source for a small application image or logo that is rendered in the nav bar. */\n  imageSrc: ImageProps['src'];\n  /** The alt text for the image. Defaults to \"Application logo\" */\n  imageAltText?: string;\n  /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n  fullImageSrc?: ImageProps['src'];\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** The secondary text to render in the header. */\n  portalName?: string;\n  /** Specifies where to open the link href. */\n  target?: string;\n}\n\nexport interface ContextItem extends Pick<MenuItemProps, 'id' | 'primary' | 'visual' | 'href'> {\n  selected: MenuItemProps['selected'];\n}\n\ninterface ContextSwitcherOptions extends BaseProps {\n  /** Application contexts available to user. */\n  contexts: ContextItem[];\n  /** Callback on click of item in context switcher. */\n  onContextClick: (\n    id: MenuItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement | HTMLDivElement>\n  ) => void;\n  /** Label of context being modified; i.e: \"Switch Application\", \"Switch Studio\"\n   * @default 'Switch to…'\n   */\n  label?: string;\n}\n\nexport type ContextSwitcherProps = ContextSwitcherOptions | Record<string, never>;\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n  /** Props related to the App Shell header. */\n  appInfo: AppInfoProps;\n  /** The content of the application. */\n  main: ReactNode;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** If true, a header will render containing the logo and name of the app as well as search and operator regions. */\n  appHeader?: boolean;\n  /** Context switcher configuration. */\n  contextSwitcher?: ContextSwitcherProps;\n  /** If true, the search results page will replace the search input in the app header with its own */\n  searchPage?: boolean;\n  /** Props related to the Search Input. */\n  searchInput?: SearchInputProps;\n  /**\n   * The aria-label for the search input.\n   * @default 'Sitewide'\n   */\n  searchLabel?: string;\n  /** A set of cases that will render in an expanded list within the App Shell. */\n  caseTypes?: CaseTypeProps[];\n  /** A set of links that will render as a flat list in the App Shell. */\n  links?: LinkProps[];\n  /** A set of cases that will render as a flat list in the App Shell. */\n  cases?: CaseProps[];\n  /** Place the main content of the application into a loading state by way of a boolean or a custom message. */\n  progress?: boolean | ProgressProps['message'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  utils?: (UtilItemProps | ReactElement)[];\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n  defaultExpanded?: boolean;\n  /** When the navigation is collapsed menus will be shown on hover instead of on click */\n  collapsedHoverMenus?: boolean;\n}\n\nexport interface CaseTypeProps {\n  /** The display name of the case. */\n  name: string;\n  /** The icon for the case. */\n  icon?: string;\n  /** Click handler for the case. */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** The display name of the link. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** The name of the Cosmos Icon to render as a visual. */\n  icon?: string;\n  /** Determines if the link represents the active page. */\n  active?: boolean;\n  /** A set of nested links. */\n  links?: LinkProps[];\n  /** Click handler for the link. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface CaseProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** Name of the case or some primary information like title. */\n  primary: string;\n  /** Additional info of a case like timestamp. */\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  /** A visual element identifying the case. If not passed will render case-solid icon */\n  visual?: ReactNode;\n  /** Determines if the case represents the active page. */\n  active?: boolean;\n  /** Click handler for the case . */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Dismiss handler for the case. */\n  onDismiss?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface OperatorProps {\n  /** A visual element identifying the operator. */\n  avatar: ReactNode;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n  /** The name of the operator. */\n  name: string;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n  /** The display name of an utility item. */\n  name: string;\n  /** Number when given displays on top-right of a given icon. */\n  count?: number;\n  /** View that renders on an appShell drawer onClick of an item */\n  drawerView?: ReactNode;\n  /** Heading for view that renders */\n  drawerHeader?: string;\n  /** Callback that fires on appshell drawer open */\n  onDrawerOpen?: () => void;\n  /** Callback that fires on appshell drawer close */\n  onDrawerClose?: () => void;\n}\n\nexport interface UtilsProps {\n  /** Context switcher config. */\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  /** The active user of the application. */\n  operator: AppShellProps['operator'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  items?: (UtilItemProps | ReactElement)[];\n  appHeader?: boolean;\n}\n\nexport interface NavListProps extends AsProp, BaseProps {\n  items?: (NavListItemProps | ReactElement)[];\n  nestedList?: boolean;\n  collapsed?: boolean;\n  id?: string;\n  /** Whether the list is of single-select style options */\n  singleSelect?: boolean;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavListItemWrapperProps extends ForwardProps {\n  label: string;\n  tooltipLabel: string;\n  content?: ReactNode;\n  items?: NavListItemProps[];\n  /** @default 5 */\n  filterAt?: number;\n  onMenuToggle?: (state: 'open' | 'close') => void;\n  childElementRef: RefObject<HTMLElement>;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps, ForwardProps, NoChildrenProp {\n  id?: string;\n  visual?: ReactNode;\n  primary: string;\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n  items?: NavListItemProps[];\n  collapseItems?: boolean;\n  actions?: OperatorProps['actions'];\n  onDismiss?: MouseEventHandler<HTMLElement>;\n  forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n  isMenuItem?: boolean;\n  /** Whether the item is a single-select option */\n  singleSelect?: NavListProps['singleSelect'];\n  /** Whether the item is selected */\n  selected?: boolean;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavMenuProps extends NavListItemProps {\n  forwardedRef?: Ref<HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  operator: AppShellProps['operator'];\n  searchInput?: AppShellProps['searchInput'];\n  searchLabel?: AppShellProps['searchLabel'];\n  searchPage?: AppShellProps['searchPage'];\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n  items: (DrawerItemProps & ForwardProps)[];\n  loading?: boolean;\n  viewAll?: {\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport interface DrawerItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** A flag indicating if the item has been pinned or not. */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n  headingText?: string;\n  emptyText: string;\n  displayRecents: boolean;\n  displayPins?: boolean;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AA2B5E,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAwKnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA4DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AA2B5E,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA2KnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA8DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/NavigationList.js

@@ -40,8 +40,9 @@ const NavigationMenu = props => {
         _jsxs(BareButton, { id: uid, ref: itemRef, "aria-expanded": !collapsed, "aria-controls": `${uid}-menu`, "aria-label": primary, onClick: toggleCollapsed, children: [visual && _jsx(StyledNavItemIconBox, { children: visual }), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), navState === 'open' && _jsx(StyledNavListItemExpandCollapse, { name: `caret-${end}` })] }),
         _jsx(NavigationList, { id: `${uid}-menu`, nestedList: true, items: items, collapsed: !navOpen || collapsed })));
 };
-export const NavigationListItem = ({ visual, primary, secondary, collapsedItemInfo, href, onClick, items, collapseItems = false, onDismiss, actions, forwardedRef, isMenuItem, count, singleSelect, selected, 'aria-labelledby': ariaLabelledBy, 'aria-current': ariaCurrent, ...restProps }) => {
-    const { navOpen, navState } = useContext(AppShellContext);
+export const NavigationListItem = ({ visual, primary, secondary, collapsedItemInfo, href, onClick, items, collapseItems = false, onDismiss, actions, forwardedRef, isMenuItem, mobileNavBar, count, singleSelect, selected, 'aria-labelledby': ariaLabelledBy, 'aria-current': ariaCurrent, ...restProps }) => {
+    const { navOpen: navOpenValue, navState } = useContext(AppShellContext);
+    const navOpen = mobileNavBar ? false : navOpenValue;
     const t = useI18n();
     const listItemRef = useConsolidatedRef(forwardedRef);
     const [menuState, setMenuState] = useState('');
@@ -88,16 +89,16 @@ export const NavigationListItem = ({ visual, primary, secondary, collapsedItemIn
     const { end } = useDirection();
     const primaryId = useUID();
     return (_createElement(StyledNavListItem, { ...restProps, key: primary, singleSelect: singleSelect, nestedListCollapsed: true },
-        _jsx(NavigationListItemWrapper, { tooltipLabel: secondary ? `${primary} ${secondary}` : primary, label: primary, childElementRef: listItemRef, items: actions || items || caseItems, onMenuToggle: setMenuState, children: _jsxs(Component, { ...compProps, ref: listItemRef, ...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {}), "aria-labelledby": `${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy ?? ''}`, ...(shouldShowMenuAttributes && {
+        _jsx(NavigationListItemWrapper, { tooltipLabel: secondary ? `${primary} ${secondary}` : primary, label: primary, childElementRef: listItemRef, items: actions || items || caseItems, onMenuToggle: setMenuState, mobileNavBar: mobileNavBar, children: _jsxs(Component, { ...compProps, ref: listItemRef, ...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {}), "aria-labelledby": `${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy ?? ''}`, ...(shouldShowMenuAttributes && {
                     'aria-haspopup': 'menu',
                     'aria-expanded': menuState === 'open'
-                }), "aria-current": ariaCurrent, children: [singleSelect && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledSingleSelectIconBox, children: selected && _jsx(Icon, { name: 'check' }) })), visual && (_jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, as: StyledNavListItemVisualContainer, isCurrent: ariaCurrent === 'page', navOpen: navOpen, children: [_jsx(StyledNavItemIconBox, { children: visual }), !navOpen && collapsedItemInfo && (_jsx(Text, { variant: 'secondary', children: collapsedItemInfo })), hasItems && navState === 'closed' && (_jsx(StyledNavListItemGroupIndicator, { name: `caret-${end}` }))] })), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, item: { shrink: !navOpen && detached ? 1 : 0 }, as: 'span', children: [_jsx("span", { id: primaryId, children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { id: primaryId, children: primary })), (hasItems || actions) && navState === 'open' && (_jsx(StyledNavListItemExpandCollapse, { name: `caret-${end}` }))] }) }),
+                }), "aria-current": ariaCurrent, children: [singleSelect && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledSingleSelectIconBox, children: selected && _jsx(Icon, { name: 'check' }) })), visual && (_jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, as: StyledNavListItemVisualContainer, isCurrent: ariaCurrent === 'page', navOpen: navOpen, children: [_jsx(StyledNavItemIconBox, { children: visual }), !navOpen && collapsedItemInfo && (_jsx(Text, { variant: 'secondary', children: collapsedItemInfo })), hasItems && navState === 'closed' && (_jsx(StyledNavListItemGroupIndicator, { name: `caret-${end}` }))] })), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, item: { shrink: !navOpen && detached ? 1 : 0 }, as: 'span', children: [_jsx("span", { id: primaryId, children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { id: primaryId, children: primary })), (hasItems || actions) && navState === 'open' && !mobileNavBar && (_jsx(StyledNavListItemExpandCollapse, { name: `caret-${end}` }))] }) }),
         onDismiss && navOpen && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
         hasItems && (
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         _jsx(NavigationList, { nestedList: true, items: actions || items, collapsed: !navOpen || collapseItems }))));
 };
-const NavigationList = ({ items = [], nestedList, id, collapsed, singleSelect }) => {
+const NavigationList = ({ items = [], nestedList, id, collapsed, singleSelect, mobileNavBar }) => {
     let Component = StyledNavList;
     let ItemComponent;
     const { navOpen } = useContext(AppShellContext);
@@ -118,13 +119,13 @@ const NavigationList = ({ items = [], nestedList, id, collapsed, singleSelect })
     return (_jsx(Component, { ...(nestedList ? { role: 'menu', id } : {}), ...fwdProps, children: items.map(item => {
             if (isValidElement(item))
                 return item;
-            if (item.items && item.items.length > 0 && navOpen) {
+            if (item.items && item.items.length > 0 && navOpen && !mobileNavBar) {
                 ItemComponent = NavigationMenu;
             }
             else {
                 ItemComponent = NavigationListItem;
             }
-            return (_jsx(ItemComponent, { isMenuItem: nestedList, singleSelect: singleSelect, "aria-current": item['aria-current'], ...item }, item.id || item.primary));
+            return (_jsx(ItemComponent, { isMenuItem: nestedList, singleSelect: singleSelect, "aria-current": item['aria-current'], mobileNavBar: mobileNavBar, ...item }, item.id || item.primary));
         }) }));
 };
 export default NavigationList;