@pega/cosmos-react-core 4.1.1 → 5.0.0-dev.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"ContextSwitcher.js","sourceRoot":"","sources":["../../../src/components/AppShell/ContextSwitcher.tsx"],"names":[],"mappings":";AAEA,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,WAAW,MAAM,gCAAgC,CAAC;AAC9D,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG3D,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,eAAe,GAA2D,CAAC,EAC/E,QAAQ,EACR,cAAc,EACd,KAAK,EACL,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,qBAAqB,KAAM,SAAS,YAC9E,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,WAAW,CAAC,EAC7B,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,aAAa,EAClB,QAAQ,QACR,IAAI,EAAE;gBACJ,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,QAAQ;gBACf,WAAW,EAAE,cAAc;aAC5B,GACD,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport Flex from '../Flex';\nimport { registerIcon } from '../Icon';\nimport * as nineDotIcon from '../Icon/icons/dot-9-solid.icon';\nimport MenuButton from '../MenuButton';\nimport { useI18n } from '../../hooks';\nimport { type ForwardProps } from '../../types';\n\nimport { StyledContextSwitcher } from './AppHeader.styles';\nimport { type ContextSwitcherProps } from './AppShell.types';\n\nregisterIcon(nineDotIcon);\n\nconst ContextSwitcher: FunctionComponent<ContextSwitcherProps & ForwardProps> = ({\n  contexts,\n  onContextClick,\n  label,\n  ...restProps\n}) => {\n  const t = useI18n();\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledContextSwitcher} {...restProps}>\n      <MenuButton\n        text={label ?? t('switch_to')}\n        variant='simple'\n        icon='dot-9-solid'\n        iconOnly\n        menu={{\n          mode: 'single-select',\n          items: contexts,\n          onItemClick: onContextClick\n        }}\n      />\n    </Flex>\n  );\n};\n\nexport default ContextSwitcher;\n"]}
+{"version":3,"file":"ContextSwitcher.js","sourceRoot":"","sources":["../../../src/components/AppShell/ContextSwitcher.tsx"],"names":[],"mappings":";AAEA,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,WAAW,MAAM,gCAAgC,CAAC;AAC9D,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG3D,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,eAAe,GAA2D,CAAC,EAC/E,QAAQ,EACR,cAAc,EACd,KAAK,EACL,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,qBAAqB,KAAM,SAAS,YAC9E,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,WAAW,CAAC,EAC7B,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,aAAa,EAClB,QAAQ,QACR,IAAI,EAAE;gBACJ,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,QAAQ;gBACf,WAAW,EAAE,cAAc;aAC5B,GACD,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport Flex from '../Flex';\nimport { registerIcon } from '../Icon';\nimport * as nineDotIcon from '../Icon/icons/dot-9-solid.icon';\nimport MenuButton from '../MenuButton';\nimport { useI18n } from '../../hooks';\nimport type { ForwardProps } from '../../types';\n\nimport { StyledContextSwitcher } from './AppHeader.styles';\nimport type { ContextSwitcherProps } from './AppShell.types';\n\nregisterIcon(nineDotIcon);\n\nconst ContextSwitcher: FunctionComponent<ContextSwitcherProps & ForwardProps> = ({\n  contexts,\n  onContextClick,\n  label,\n  ...restProps\n}) => {\n  const t = useI18n();\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledContextSwitcher} {...restProps}>\n      <MenuButton\n        text={label ?? t('switch_to')}\n        variant='simple'\n        icon='dot-9-solid'\n        iconOnly\n        menu={{\n          mode: 'single-select',\n          items: contexts,\n          onItemClick: onContextClick\n        }}\n      />\n    </Flex>\n  );\n};\n\nexport default ContextSwitcher;\n"]}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface DrawerViewProps {
     content: ReactNode;
     header: string;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { DrawerProps } from '../Drawer';
+import type { DrawerProps } from '../Drawer';
 export declare const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DrawerProps, never>;
 export declare const StyledDrawerHeading: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDrawerBackButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQxC,eAAO,MAAM,mBAAmB,kHAwB9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,4GAsB9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,4GAqBjC,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;SAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,uGAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAOpC,CAAC"}
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB,kHAwB9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,4GAsB9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,4GAqBjC,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;SAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,uGAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAOpC,CAAC"}

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

@@ -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';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { 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, pxToRem } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  const {\n    components: {\n      'app-shell': {\n        nav: { 'background-color': 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: ${pxToRem(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 } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background-color: ${theme.components['app-shell'].nav['background-color']};\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"]}
+{"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';\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, pxToRem } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  const {\n    components: {\n      'app-shell': {\n        nav: { 'background-color': 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: ${pxToRem(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 } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background-color: ${theme.components['app-shell'].nav['background-color']};\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/NavigationList.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { NavListItemProps, NavListProps } from './AppShell.types';
+import type { FC } from 'react';
+import type { NavListItemProps, NavListProps } from './AppShell.types';
 export declare const NavigationListItem: FC<NavListItemProps>;
 declare const NavigationList: FC<NavListProps>;
 export default NavigationList;

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":"AAAA,OAAO,EAEL,EAAE,EASH,MAAM,OAAO,CAAC;AA0Bf,OAAO,EACL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA0F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAwInD,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;AA0B5E,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA0F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA4InD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA4DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/NavigationList.js

@@ -36,7 +36,7 @@ const NavigationMenu = props => {
     }, menuRef);
     const { end } = useDirection();
     return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: collapsed, ref: menuRef },
-        _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(Icon, { name: `caret-${end}`, as: StyledNavListItemExpandCollapse })] }),
+        _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, href, onClick, items, collapseItems = false, onDismiss, actions, forwardedRef, isMenuItem, count, singleSelect, selected, 'aria-labelledby': ariaLabelledBy, 'aria-current': ariaCurrent, ...restProps }) => {
@@ -85,7 +85,7 @@ export const NavigationListItem = ({ visual, primary, secondary, href, onClick,
     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}`, ...(hasItems && { '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 && _jsx(StyledNavItemIconBox, { children: visual }), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { id: primaryId, children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { id: primaryId, children: primary })), (hasItems || actions) && navState === 'open' && (_jsx(Icon, { name: `caret-${end}`, as: StyledNavListItemExpandCollapse }))] }) }),
+        _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}`, ...(hasItems && { '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 && _jsx(StyledNavItemIconBox, { children: visual }), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, item: { shrink: 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}` }))] }) }),
         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

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FC,\n  isValidElement,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useEscape\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport Link from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledNavItemIconBox,\n  StyledNavListItem,\n  StyledNavListItemExpandCollapse,\n  StyledCaseClose,\n  StyledSingleSelectIconBox\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nregisterIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const { navState } = useContext(AppShellContext);\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  useEscape(() => {\n    setCollapsed(true);\n    itemRef.current?.focus();\n  }, menuRef);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n\n        {navState === 'open' && <Icon name={`caret-${end}`} as={StyledNavListItemExpandCollapse} />}\n      </BareButton>\n\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n  visual,\n  primary,\n  secondary,\n  href,\n  onClick,\n  items,\n  collapseItems = false,\n  onDismiss,\n  actions,\n  forwardedRef,\n  isMenuItem,\n  count,\n  singleSelect,\n  selected,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-current': ariaCurrent,\n  ...restProps\n}) => {\n  const { navOpen, navState } = useContext(AppShellContext);\n  const t = useI18n();\n  const listItemRef = useConsolidatedRef(forwardedRef);\n  const [menuState, setMenuState] = useState('');\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n  const primaryId = useUID();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} singleSelect={singleSelect} nestedListCollapsed>\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childElementRef={listItemRef}\n        items={actions || items || caseItems}\n        onMenuToggle={setMenuState}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef}\n          {...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {})}\n          aria-labelledby={`${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy}`}\n          {...(hasItems && { 'aria-haspopup': 'menu', 'aria-expanded': menuState === 'open' })}\n          aria-current={ariaCurrent}\n        >\n          {singleSelect && (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledSingleSelectIconBox}\n            >\n              {selected && <Icon name='check' />}\n            </Flex>\n          )}\n\n          {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n          {secondary ? (\n            <Flex container={{ direction: 'column', alignItems: 'start' }}>\n              <span id={primaryId}>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span id={primaryId}>{primary}</span>\n          )}\n\n          {(hasItems || actions) && navState === 'open' && (\n            <Icon name={`caret-${end}`} as={StyledNavListItemExpandCollapse} />\n          )}\n        </Component>\n      </NavigationListItemWrapper>\n\n      {onDismiss && navOpen && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={onDismiss}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = ({\n  items = [],\n  nestedList,\n  id,\n  collapsed,\n  singleSelect\n}) => {\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items.map(item => {\n        if (isValidElement<any>(item)) return item;\n\n        if (item.items && item.items.length > 0 && navOpen) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n\n        return (\n          <ItemComponent\n            key={item.id || item.primary}\n            isMenuItem={nestedList}\n            singleSelect={singleSelect}\n            aria-current={item['aria-current']}\n            {...item}\n          />\n        );\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isValidElement, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport type { ElementType, FC, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useEscape\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport type { OmitStrict } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport Link from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport type {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledNavItemIconBox,\n  StyledNavListItem,\n  StyledNavListItemExpandCollapse,\n  StyledCaseClose,\n  StyledSingleSelectIconBox\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nregisterIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const { navState } = useContext(AppShellContext);\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  useEscape(() => {\n    setCollapsed(true);\n    itemRef.current?.focus();\n  }, menuRef);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n\n        {navState === 'open' && <StyledNavListItemExpandCollapse name={`caret-${end}`} />}\n      </BareButton>\n\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n  visual,\n  primary,\n  secondary,\n  href,\n  onClick,\n  items,\n  collapseItems = false,\n  onDismiss,\n  actions,\n  forwardedRef,\n  isMenuItem,\n  count,\n  singleSelect,\n  selected,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-current': ariaCurrent,\n  ...restProps\n}) => {\n  const { navOpen, navState } = useContext(AppShellContext);\n  const t = useI18n();\n  const listItemRef = useConsolidatedRef(forwardedRef);\n  const [menuState, setMenuState] = useState('');\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n  const primaryId = useUID();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} singleSelect={singleSelect} nestedListCollapsed>\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childElementRef={listItemRef}\n        items={actions || items || caseItems}\n        onMenuToggle={setMenuState}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef}\n          {...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {})}\n          aria-labelledby={`${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy}`}\n          {...(hasItems && { 'aria-haspopup': 'menu', 'aria-expanded': menuState === 'open' })}\n          aria-current={ariaCurrent}\n        >\n          {singleSelect && (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledSingleSelectIconBox}\n            >\n              {selected && <Icon name='check' />}\n            </Flex>\n          )}\n\n          {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n          {secondary ? (\n            <Flex\n              container={{ direction: 'column', alignItems: 'start' }}\n              item={{ shrink: 0 }}\n              as='span'\n            >\n              <span id={primaryId}>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span id={primaryId}>{primary}</span>\n          )}\n\n          {(hasItems || actions) && navState === 'open' && (\n            <StyledNavListItemExpandCollapse name={`caret-${end}`} />\n          )}\n        </Component>\n      </NavigationListItemWrapper>\n\n      {onDismiss && navOpen && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={onDismiss}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = ({\n  items = [],\n  nestedList,\n  id,\n  collapsed,\n  singleSelect\n}) => {\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items.map(item => {\n        if (isValidElement<any>(item)) return item;\n\n        if (item.items && item.items.length > 0 && navOpen) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n\n        return (\n          <ItemComponent\n            key={item.id || item.primary}\n            isMenuItem={nestedList}\n            singleSelect={singleSelect}\n            aria-current={item['aria-current']}\n            {...item}\n          />\n        );\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { NavListItemWrapperProps } from './AppShell.types';
+import type { FC } from 'react';
+import type { NavListItemWrapperProps } from './AppShell.types';
 declare const ListItemWrapper: FC<NavListItemWrapperProps>;
 export default ListItemWrapper;
 //# sourceMappingURL=NavigationListItemWrapper.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAYnG,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAoD3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA+LhD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAY/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAoDhE,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA+LhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nimport { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors } from './style-utils';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav['background-color'];\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n  return css`\n    display: flex;\n    background-color: ${navBg};\n\n    ${StyledMenu} {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ${StyledMenuListWrapper} {\n      overflow: auto;\n    }\n\n    &,\n    ${StyledMenuListContainer} {\n      background-color: ${navBg};\n\n      header {\n        color: ${foreground};\n        border-bottom: none;\n        opacity: 0.7;\n\n        h2 {\n          font-weight: ${theme.base['font-weight']['semi-bold']};\n          font-size: ${headingFontSize};\n        }\n      }\n    }\n\n    ${StyledMenuListContainer} li {\n      color: ${foreground};\n      background-color: transparent;\n\n      &:hover,\n      &[data-current='true'] {\n        background-color: ${hoverBg};\n      }\n    }\n  `;\n});\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childElementRef,\n    label,\n    tooltipLabel,\n    items = [],\n    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const { end } = useDirection();\n  const mousedOverMenu = useRef(false);\n  const hidePopoverTimeout = useRef<number | null>();\n\n  const closePopover = (focusChildEl: boolean = true) => {\n    if (popoverOpen) {\n      setPopoverOpen(false);\n      if (focusChildEl) {\n        childElementRef.current?.focus();\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    }\n  };\n\n  const onMouseEnterContent = () => {\n    if (collapsedHoverMenus) {\n      mousedOverMenu.current = true;\n    }\n  };\n\n  const onMouseLeaveContent = () => {\n    if (mousedOverMenu.current && collapsedHoverMenus) {\n      mousedOverMenu.current = false;\n      closePopover();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef], () => closePopover());\n\n  useEffect(() => {\n    const onClick = (e: Event) => {\n      if (items.length || content) {\n        if (!navOpen) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        if (!navOpen && !popoverOpen) setPopoverOpen(true);\n        else {\n          setTimeout(() => {\n            closePopover(false);\n          }, 0);\n        }\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !content) {\n        setPopoverOpen(false);\n      }\n    };\n\n    const onMouseOut = (e: MouseEvent) => {\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n\n      const tag = (e.relatedTarget as HTMLElement | null)?.tagName.toLowerCase();\n\n      // If the mouse is mousing out from this nav item onto another nav item\n      if (tag && ['a', 'button', 'form'].includes(tag)) {\n        closePopover(false);\n      } else {\n        hidePopoverTimeout.current = window.setTimeout(() => {\n          if (!mousedOverMenu.current) {\n            closePopover(false);\n          }\n        }, 1000);\n      }\n    };\n\n    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('keydown', onKeyDown);\n    if (collapsedHoverMenus) {\n      childElementRef.current?.addEventListener('mouseenter', onClick);\n      childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n    }\n    return () => {\n      childElementRef.current?.removeEventListener('click', onClick);\n      childElementRef.current?.removeEventListener('keydown', onKeyDown);\n      if (collapsedHoverMenus) {\n        childElementRef.current?.removeEventListener('mouseenter', onClick);\n        childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    };\n  }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEscape(() => closePopover(), childElementRef, [childElementRef]);\n\n  useEscape(() => closePopover(), popoverRef, [popoverRef]);\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && (\n            <Tooltip\n              target={childElementRef.current}\n              placement={end}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childElementRef.current}\n              placement={`${end}-start`}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n              modifiers={\n                headerEl\n                  ? [\n                      {\n                        name: 'preventOverflow',\n                        options: {\n                          padding: {\n                            top: headerEl.offsetHeight + 8,\n                            right: 8,\n                            bottom: 8,\n                            left: 8\n                          }\n                        }\n                      }\n                    ]\n                  : undefined\n              }\n              onClick={(e: ReactMouseEvent<HTMLDivElement>) => {\n                e.stopPropagation();\n              }}\n            >\n              {content ? (\n                <div onMouseEnter={onMouseEnterContent} onMouseLeave={onMouseLeaveContent}>\n                  {content}\n                </div>\n              ) : (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childElementRef.current ?? undefined}\n                  scrollAt={99}\n                  items={items.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href,\n                      onClick: (_, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                  onMouseEnter={onMouseEnterContent}\n                  onMouseLeave={onMouseLeaveContent}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}
+{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useRef, useState } from 'react';\nimport type { FC, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nimport type { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors } from './style-utils';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav['background-color'];\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n  return css`\n    display: flex;\n    background-color: ${navBg};\n\n    ${StyledMenu} {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ${StyledMenuListWrapper} {\n      overflow: auto;\n    }\n\n    &,\n    ${StyledMenuListContainer} {\n      background-color: ${navBg};\n\n      header {\n        color: ${foreground};\n        border-bottom: none;\n        opacity: 0.7;\n\n        h2 {\n          font-weight: ${theme.base['font-weight']['semi-bold']};\n          font-size: ${headingFontSize};\n        }\n      }\n    }\n\n    ${StyledMenuListContainer} li {\n      color: ${foreground};\n      background-color: transparent;\n\n      &:hover,\n      &[data-current='true'] {\n        background-color: ${hoverBg};\n      }\n    }\n  `;\n});\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childElementRef,\n    label,\n    tooltipLabel,\n    items = [],\n    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const { end } = useDirection();\n  const mousedOverMenu = useRef(false);\n  const hidePopoverTimeout = useRef<number | null>();\n\n  const closePopover = (focusChildEl: boolean = true) => {\n    if (popoverOpen) {\n      setPopoverOpen(false);\n      if (focusChildEl) {\n        childElementRef.current?.focus();\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    }\n  };\n\n  const onMouseEnterContent = () => {\n    if (collapsedHoverMenus) {\n      mousedOverMenu.current = true;\n    }\n  };\n\n  const onMouseLeaveContent = () => {\n    if (mousedOverMenu.current && collapsedHoverMenus) {\n      mousedOverMenu.current = false;\n      closePopover();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef], () => closePopover());\n\n  useEffect(() => {\n    const onClick = (e: Event) => {\n      if (items.length || content) {\n        if (!navOpen) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        if (!navOpen && !popoverOpen) setPopoverOpen(true);\n        else {\n          setTimeout(() => {\n            closePopover(false);\n          }, 0);\n        }\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !content) {\n        setPopoverOpen(false);\n      }\n    };\n\n    const onMouseOut = (e: MouseEvent) => {\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n\n      const tag = (e.relatedTarget as HTMLElement | null)?.tagName.toLowerCase();\n\n      // If the mouse is mousing out from this nav item onto another nav item\n      if (tag && ['a', 'button', 'form'].includes(tag)) {\n        closePopover(false);\n      } else {\n        hidePopoverTimeout.current = window.setTimeout(() => {\n          if (!mousedOverMenu.current) {\n            closePopover(false);\n          }\n        }, 1000);\n      }\n    };\n\n    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('keydown', onKeyDown);\n    if (collapsedHoverMenus) {\n      childElementRef.current?.addEventListener('mouseenter', onClick);\n      childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n    }\n    return () => {\n      childElementRef.current?.removeEventListener('click', onClick);\n      childElementRef.current?.removeEventListener('keydown', onKeyDown);\n      if (collapsedHoverMenus) {\n        childElementRef.current?.removeEventListener('mouseenter', onClick);\n        childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    };\n  }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEscape(() => closePopover(), childElementRef, [childElementRef]);\n\n  useEscape(() => closePopover(), popoverRef, [popoverRef]);\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && (\n            <Tooltip\n              target={childElementRef.current}\n              placement={end}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childElementRef.current}\n              placement={`${end}-start`}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n              modifiers={\n                headerEl\n                  ? [\n                      {\n                        name: 'preventOverflow',\n                        options: {\n                          padding: {\n                            top: headerEl.offsetHeight + 8,\n                            right: 8,\n                            bottom: 8,\n                            left: 8\n                          }\n                        }\n                      }\n                    ]\n                  : undefined\n              }\n              onClick={(e: ReactMouseEvent<HTMLDivElement>) => {\n                e.stopPropagation();\n              }}\n            >\n              {content ? (\n                <div onMouseEnter={onMouseEnterContent} onMouseLeave={onMouseLeaveContent}>\n                  {content}\n                </div>\n              ) : (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childElementRef.current ?? undefined}\n                  scrollAt={99}\n                  items={items.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href,\n                      onClick: (_, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                  onMouseEnter={onMouseEnterContent}\n                  onMouseLeave={onMouseLeaveContent}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { PopoverProps } from '../Popover';
 import type { AsProp } from '../../types';
-import { OperatorProps } from './AppShell.types';
+import type { OperatorProps } from './AppShell.types';
 declare const Operator: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
     actions: OperatorProps['actions'];

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

@@ -1 +1 @@
-{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,SAAS,EAAuB,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,QAAQ;cAOA,SAAS;aACV,aAAa,CAAC,SAAS,CAAC;;8DA4DnC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,SAAS,EAAuB,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK/C,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,aAAa,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,QAAA,MAAM,QAAQ;cAOA,SAAS;aACV,aAAa,CAAC,SAAS,CAAC;;8DA4DnC,CAAC;AAEH,eAAe,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAuB,MAAM,SAAS,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC;IAEvC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAgB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACtF,EAAE,EAAE,EAAE,IAAI,OAAO;YACjB,OAAO;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAClC,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,mBACC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC7C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,YAEA,QAAQ,GACE,EACb,KAAC,OAAO,OAAK,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,YAC7D,KAAC,IAAI,IACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB;oBACxB,2GAA2G;oBAC3G,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,IACG,CAAgF;6BAC9E,MAAM,GAAG,CAAC,EACb;4BACA,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;oBACH,CAAC,GACD,GACM,IACT,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu, { MenuItemProps } from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\n\nimport AppShellContext from './AppShellContext';\nimport { OperatorProps } from './AppShell.types';\n\nconst Operator = forwardRef(function Operator(\n  {\n    children,\n    actions,\n    popover,\n    as\n  }: {\n    children: ReactNode;\n    actions: OperatorProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n  } & AsProp,\n  ref: Ref<HTMLButtonElement> | undefined\n) {\n  const { navOpen } = useContext(AppShellContext);\n  const buttonRef = useConsolidatedRef(ref);\n\n  const operatorMenuItems = useMemo(() => {\n    return actions.flat().map<MenuItemProps>(({ id, primary, onClick: click, ...rest }) => ({\n      id: id || primary,\n      primary,\n      onClick: (menuId, e) => click?.(e),\n      ...rest\n    }));\n  }, [actions]);\n\n  const [showMenu, setShowMenu] = useState(false);\n\n  useEffect(() => {\n    if (!navOpen) setShowMenu(false);\n  }, [navOpen]);\n\n  return (\n    <>\n      <BareButton\n        as={as}\n        ref={buttonRef}\n        aria-expanded={showMenu ? 'true' : 'false'}\n        aria-haspopup='menu'\n        onClick={() => {\n          setShowMenu(cur => !cur);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Escape') setShowMenu(false);\n        }}\n        onBlur={() => {\n          setShowMenu(false);\n        }}\n      >\n        {children}\n      </BareButton>\n      <Popover {...popover} show={showMenu} target={buttonRef.current}>\n        <Menu\n          focusControlEl={buttonRef.current ?? undefined}\n          mode='action'\n          items={operatorMenuItems}\n          /** @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated. */\n          onItemClick={(_, e) => {\n            if (\n              (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                .detail > 0\n            ) {\n              setShowMenu(false);\n            }\n          }}\n        />\n      </Popover>\n    </>\n  );\n});\n\nexport default Operator;\n"]}
+{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC;IAEvC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAgB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACtF,EAAE,EAAE,EAAE,IAAI,OAAO;YACjB,OAAO;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAClC,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,mBACC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC7C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,YAEA,QAAQ,GACE,EACb,KAAC,OAAO,OAAK,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,YAC7D,KAAC,IAAI,IACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB;oBACxB,2GAA2G;oBAC3G,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,IACG,CAAgF;6BAC9E,MAAM,GAAG,CAAC,EACb;4BACA,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;oBACH,CAAC,GACD,GACM,IACT,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\n\nimport AppShellContext from './AppShellContext';\nimport type { OperatorProps } from './AppShell.types';\n\nconst Operator = forwardRef(function Operator(\n  {\n    children,\n    actions,\n    popover,\n    as\n  }: {\n    children: ReactNode;\n    actions: OperatorProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n  } & AsProp,\n  ref: Ref<HTMLButtonElement> | undefined\n) {\n  const { navOpen } = useContext(AppShellContext);\n  const buttonRef = useConsolidatedRef(ref);\n\n  const operatorMenuItems = useMemo(() => {\n    return actions.flat().map<MenuItemProps>(({ id, primary, onClick: click, ...rest }) => ({\n      id: id || primary,\n      primary,\n      onClick: (menuId, e) => click?.(e),\n      ...rest\n    }));\n  }, [actions]);\n\n  const [showMenu, setShowMenu] = useState(false);\n\n  useEffect(() => {\n    if (!navOpen) setShowMenu(false);\n  }, [navOpen]);\n\n  return (\n    <>\n      <BareButton\n        as={as}\n        ref={buttonRef}\n        aria-expanded={showMenu ? 'true' : 'false'}\n        aria-haspopup='menu'\n        onClick={() => {\n          setShowMenu(cur => !cur);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Escape') setShowMenu(false);\n        }}\n        onBlur={() => {\n          setShowMenu(false);\n        }}\n      >\n        {children}\n      </BareButton>\n      <Popover {...popover} show={showMenu} target={buttonRef.current}>\n        <Menu\n          focusControlEl={buttonRef.current ?? undefined}\n          mode='action'\n          items={operatorMenuItems}\n          /** @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated. */\n          onItemClick={(_, e) => {\n            if (\n              (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                .detail > 0\n            ) {\n              setShowMenu(false);\n            }\n          }}\n        />\n      </Popover>\n    </>\n  );\n});\n\nexport default Operator;\n"]}

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

@@ -1,4 +1,4 @@
-import { DefaultTheme } from 'styled-components';
+import type { DefaultTheme } from 'styled-components';
 export declare const navContrastColors: (theme: DefaultTheme) => {
     hoverBg: string;
     foreground: string;

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { FunctionComponent, Ref, SyntheticEvent } from 'react';
-import { BaseProps, ForwardProps, PropsWithDefaults, NoChildrenProp } from '../../types';
-export interface AvatarProps extends BaseProps, NoChildrenProp {
+import type { FunctionComponent, Ref, SyntheticEvent } from 'react';
+import type { BaseProps, ForwardProps, PropsWithDefaults, NoChildrenProp, TestIdProp } from '../../types';
+export interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {
     /** The name of the identity the Avatar represents. */
     name: string;
     /** Content of the Avatar as an image source url. */
@@ -30,16 +30,15 @@ export interface AvatarProps extends BaseProps, NoChildrenProp {
 }
 type AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;
 export declare const StyledAvatarImage: import("styled-components").StyledComponent<FunctionComponent<import("../Image").ImageProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAvatar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "color" | "size" | "icon" | "backgroundColor" | "ref" | "status" | "className" | "shape" | "imageSrc" | "onImageError"> & {
+export declare const StyledAvatar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "color" | "size" | "icon" | "backgroundColor" | "ref" | "status" | "className" | "shape" | "testId" | "imageSrc" | "onImageError"> & {
     hasSrc?: boolean | undefined;
     hasBrokenImage?: boolean | undefined;
 }, never>;
-export declare const StyledStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "size">, never>;
-/**
- * Generally, avatars are used to distinguish between different operators and
- * objects when they are shown in a list or in a small space. Users of applications
- * can upload a custom avatar of their choice.
- */
-declare const Avatar: FunctionComponent<AvatarProps & ForwardProps>;
-export default Avatar;
+export declare const StyledStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Badges").AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "size">, never>;
+declare const _default: FunctionComponent<AvatarProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAEjB,GAAG,EAEH,cAAc,EAIf,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,cAAc,EAEf,MAAM,aAAa,CAAC;AAOrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAuBhF,eAAO,MAAM,iBAAiB,mKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAwExB,CAAC;AAIF,eAAO,MAAM,YAAY,4IA0BvB,CAAC;AAiBH;;;;GAIG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA0DxD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKrF,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AASrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAgBhF,eAAO,MAAM,iBAAiB,mKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SA4ExB,CAAC;AAIF,eAAO,MAAM,YAAY;;0FA4BxB,CAAC;;;;AAqFF,wBAAqD"}

package/lib/components/Avatar/Avatar.js

@@ -6,8 +6,9 @@ import Image from '../Image';
 import { defaultThemeProp } from '../../theme';
 import Icon, { StyledIcon } from '../Icon';
 import { Alert } from '../Badges';
-import { useI18n } from '../../hooks';
-import { tryCatch } from '../../utils';
+import { useI18n, useTestIds } from '../../hooks';
+import { tryCatch, withTestIds } from '../../utils';
+import { getAvatarTestIds } from './Avatar.test-ids';
 const sizeToRem = {
     s: 1,
     m: 2,
@@ -20,12 +21,6 @@ const fontSizeToRem = {
     l: 1,
     xl: 1.5
 };
-const sizeToBorderRadius = {
-    s: 0.25,
-    m: 0.5,
-    l: 1,
-    xl: 1
-};
 export const StyledAvatarImage = styled(Image) `
   min-height: 100%;
   min-width: 100%;
@@ -35,12 +30,12 @@ export const StyledAvatarImage = styled(Image) `
   height: fit-content;
   width: fit-content;
 `;
-export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, color, backgroundColor, theme: { base: { palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground } }, components: { avatar } } }) => {
+export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, color, backgroundColor, theme: { base: { palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground }, 'border-radius': baseBorderRadius }, components: { avatar: { 'background-color': avatarBackground }, icon: { 'border-radius-multiplier': borderRadiusMultiplier } } } }) => {
     const sizeRem = sizeToRem[size];
     const fontSize = fontSizeToRem[size];
-    let bgColor = hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatar['background-color'];
+    let bgColor = hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackground;
     if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))
-        bgColor = tryCatch(() => readableColor(color), () => avatar['background-color']);
+        bgColor = tryCatch(() => readableColor(color), () => avatarBackground);
     const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));
     const iconColor = color || tryCatch(() => readableColor(bgColor));
     return css `
@@ -64,7 +59,7 @@ export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, c
 
       ${shape === 'squircle' &&
         css `
-        border-radius: calc(${sizeToBorderRadius[size]} * ${avatar['border-radius']});
+        border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});
       `}
 
       ${StyledIcon} {
@@ -84,31 +79,31 @@ export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, c
     `;
 });
 StyledAvatar.defaultProps = defaultThemeProp;
-export const StyledStatus = styled.div(({ size, theme }) => {
+export const StyledStatus = styled(Alert)(({ size, theme }) => {
     /** Scales alert badge dimensions based on size of avatar */
     const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;
     return css `
-    position: absolute;
-    height: ${sizeDimensions}rem;
-    width: ${sizeDimensions}rem;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    z-index: 1;
-    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);
+      position: absolute;
+      height: ${sizeDimensions}rem;
+      width: ${sizeDimensions}rem;
+      inset-block-end: 0;
+      inset-inline-end: 0;
+      z-index: 1;
+      animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);
 
-    @keyframes pop {
-      0% {
-        opacity: 0;
-        transform: scale(0);
-      }
-      50% {
-        opacity: 1;
-      }
-      100% {
-        transform: scale(1);
+      @keyframes pop {
+        0% {
+          opacity: 0;
+          transform: scale(0);
+        }
+        50% {
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1);
+        }
       }
-    }
-  `;
+    `;
 });
 StyledStatus.defaultProps = defaultThemeProp;
 /**
@@ -128,9 +123,10 @@ const getInitials = (name, size) => {
  * can upload a custom avatar of their choice.
  */
 const Avatar = forwardRef(function Avatar(props, ref) {
-    const { shape = 'circle', size = 'm', imageSrc, icon, name, status, onImageError, ...restProps } = props;
+    const { testId, shape = 'circle', size = 'm', imageSrc, icon, name, status, onImageError, ...restProps } = props;
     const [hasBrokenImage, setHasBrokenImage] = useState();
     const t = useI18n();
+    const testIds = useTestIds(testId, getAvatarTestIds);
     useEffect(() => {
         setHasBrokenImage(undefined);
     }, [imageSrc]);
@@ -148,7 +144,7 @@ const Avatar = forwardRef(function Avatar(props, ref) {
         }
         return getInitials(name, size);
     }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);
-    return (_jsxs(StyledAvatar, { role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, ref: ref, "aria-label": `${name}${status ? ` ${t('status')} ${status}` : ''}`, ...restProps, children: [content, status === 'active' && _jsx(Alert, { as: StyledStatus, size: size, variant: 'success' })] }));
+    return (_jsxs(StyledAvatar, { "data-testid": testIds.root, role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, ref: ref, "aria-label": `${name}${status ? ` ${t('status')} ${status}` : ''}`, ...restProps, children: [content, status === 'active' && _jsx(StyledStatus, { size: size, variant: 'success' })] }));
 });
-export default Avatar;
+export default withTestIds(Avatar, getAvatarTestIds);
 //# sourceMappingURL=Avatar.js.map