npm - @pega/cosmos-react-core - Versions diffs - 8.0.0-build.3.2 → 8.0.0-build.30.0 - Mend

@pega/cosmos-react-core 8.0.0-build.3.2 → 8.0.0-build.30.0

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

Files changed (3384) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7E,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,~~kBAAkB~~,EAAE,KAAK,EAAE,~~EACnC~~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~~IAEhD~~,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,OAAO;aACpB,UAAU;~~wBACC~~,~~KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC~~;;;;;;~~oBAMzD~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;kCACsB,WAAW;;;GAG1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,QAAQ,CAAC,GAAG;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","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"]}
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 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: 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, nestedListHeader } = navContrastColors(theme);\n\n return css`\n position: sticky;\n bottom: 0;\n padding: ${theme.base.spacing} 0;\n color: ${foreground};\n background: ${nestedListHeader};\n text-align: center;\n margin-top: 0.0625rem;\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n const { border: borderColor } = navContrastColors(theme);\n\n return css`\n border-top: 0.0625rem solid ${borderColor};\n min-height: max(20%, 8rem);\n overflow-y: auto;\n `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n overflow: auto;\n `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACN,OAAO,EACP,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAG/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AAEjE,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AAOpE,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,+BAA+B,EAC/B,eAAe,EACf,yBAAyB,EACzB,gCAAgC,EACjC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;AAElE,MAAM,cAAc,GAAqB,KAAK,CAAC,EAAE;IAC/C,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAgC,EAAE,EAAE;QACnC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,OAAO,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC3B,CAAC,EAAE,OAAO,CAAC,CAAC;IAEZ,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,eAAC,iBAAiB,OAAK,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO;QAC1F,MAAC,UAAU,IACT,EAAE,EAAE,GAAG,EACP,GAAG,EAAE,OAAO,mBACG,CAAC,SAAS,mBACV,GAAG,GAAG,OAAO,gBAChB,OAAO,EACnB,OAAO,EAAE,eAAe,aAEvB,MAAM,IAAI,KAAC,oBAAoB,cAAE,MAAM,GAAwB,EAE/D,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,aAC3D,yBAAO,OAAO,GAAQ,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAQ,IACvC,CACR,CAAC,CAAC,CAAC,CACF,yBAAO,OAAO,GAAQ,CACvB,EAEA,QAAQ,KAAK,MAAM,IAAI,KAAC,+BAA+B,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,IACtE;QAGb,KAAC,cAAc,IACb,EAAE,EAAE,GAAG,GAAG,OAAO,EACjB,UAAU,QACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,OAAO,IAAI,SAAS,GAChC,CACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAyB,CAAC,EACvD,MAAM,EACN,OAAO,EACP,SAAS,EACT,iBAAiB,EACjB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,SAAS,EACT,OAAO,EACP,YAAY,EACZ,UAAU,EACV,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,iBAAiB,EAAE,cAAc,EACjC,cAAc,EAAE,WAAW,EAC3B,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC1D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,MAAM,QAAQ,GACZ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/F,MAAM,SAAS,GAMX;QACF,OAAO,EAAE,CAAC,CAAqE,EAAE,EAAE;YACjF,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;QACD,IAAI;KACL,CAAC;IAEF,IAAI,SAAuD,CAAC;IAC5D,IAAI,SAAS,EAAE;QACb,SAAS,GAAG;YACV;gBACE,OAAO,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,CAAC;gBACnC,OAAO;aACR;YACD;gBACE,OAAO,EAAE,CAAC,CAAC,cAAc,CAAC;gBAC1B,OAAO,EAAE,SAAS;aACnB;SACF,CAAC;KACH;IAED,IAAI,SAAsB,CAAC;IAE3B,IAAI,IAAI,EAAE;QACR,SAAS,GAAG,IAAI,CAAC;KAClB;SAAM;QACL,SAAS,GAAG,UAAU,CAAC;KACxB;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,OAAO,EAAE;YACvB,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YACtD,UAAU,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;SAChC;QACD,IAAI,OAAO,IAAI,UAAU,IAAI,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,cAAc,CAAC;YACtF,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAE3B,OAAO,CACL,eAAC,iBAAiB,OAAK,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB;QAC7F,KAAC,yBAAyB,IACxB,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,OAAO,EAC7D,KAAK,EAAE,OAAO,EACd,eAAe,EAAE,WAAW,EAC5B,KAAK,EAAE,OAAO,IAAI,KAAK,IAAI,SAAS,EACpC,YAAY,EAAE,YAAY,YAE1B,MAAC,SAAS,OACJ,SAAS,EACb,GAAG,EAAE,WAAW,KACZ,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,qBACpD,GAAG,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,cAAc,IAAI,EAAE,EAAE,KACtF,CAAC,QAAQ,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,KAAK,MAAM,EAAE,CAAC,kBACtE,WAAW,aAExB,YAAY,IAAI,CACf,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,yBAAyB,YAE5B,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GAC7B,CACR,EACA,MAAM,IAAI,CACT,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC5C,EAAE,EAAE,gCAAgC,EACpC,SAAS,EAAE,WAAW,KAAK,MAAM,aAEjC,KAAC,oBAAoB,cAAE,MAAM,GAAwB,EACpD,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAChC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,iBAAiB,GAAQ,CACrD,IACI,CACR,EAEA,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACvD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAC,MAAM,aAET,eAAM,EAAE,EAAE,SAAS,YAAG,OAAO,GAAQ,EACrC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAQ,IACvC,CACR,CAAC,CAAC,CAAC,CACF,eAAM,EAAE,EAAE,SAAS,YAAG,OAAO,GAAQ,CACtC,EAEA,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,QAAQ,KAAK,MAAM,IAAI,CAC/C,KAAC,+BAA+B,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,CAC1D,IACS,GACc;QAE3B,SAAS,IAAI,OAAO,IAAI,CACvB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,cAAc,CAAC,YAE7B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV;QAEA,QAAQ,IAAI;QACX,mEAAmE;QACnE,KAAC,cAAc,IAAC,UAAU,QAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,CAAC,OAAO,IAAI,aAAa,GAAI,CAC7F,CACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAqB,CAAC,EACxC,KAAK,GAAG,EAAE,EACV,UAAU,EACV,EAAE,EACF,SAAS,EACT,YAAY,EACb,EAAE,EAAE;IACH,IAAI,SAAS,GAAgB,aAAa,CAAC;IAC3C,IAAI,aAA0B,CAAC;IAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEhD,IAAI,QAAQ,GAMR;QACF,SAAS,EAAE,CAAC,CAAC,SAAS;KACvB,CAAC;IAEF,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,GAAG,QAAQ,EAAE,CAAC;IAEf,IAAI,UAAU,EAAE;QACd,QAAQ,GAAG;YACT,EAAE,EAAE,cAAc;YAClB,WAAW,EAAE,IAAI;YACjB,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK;YACtF,GAAG,QAAQ;SACZ,CAAC;QAEF,SAAS,GAAG,mBAAmB,CAAC;KACjC;IAED,OAAO,CACL,KAAC,SAAS,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAM,QAAQ,YAClE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,IAAI,cAAc,CAAM,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC;YAE3C,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,EAAE;gBAClD,aAAa,GAAG,cAAc,CAAC;aAChC;iBAAM;gBACL,aAAa,GAAG,kBAAkB,CAAC;aACpC;YAED,OAAO,CACL,KAAC,aAAa,IAEZ,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,kBACZ,IAAI,CAAC,cAAc,CAAC,KAC9B,IAAI,IAJH,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,CAK5B,CACH,CAAC;QACJ,CAAC,CAAC,GACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","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 StyledNavListItemVisualContainer\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 collapsedItemInfo,\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\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 {visual && (\n <Flex\n container={{ direction: 'column', gap: 0.5 }}\n as={StyledNavListItemVisualContainer}\n isCurrent={ariaCurrent === 'page'}\n >\n <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>\n {!navOpen && collapsedItemInfo && (\n <Text variant='secondary'>{collapsedItemInfo}</Text>\n )}\n </Flex>\n )}\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"]}
1	+ {"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 StyledNavListItemVisualContainer\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 collapsedItemInfo,\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\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 {visual && (\n <Flex\n container={{ direction: 'column', gap: 0.5 }}\n as={StyledNavListItemVisualContainer}\n isCurrent={ariaCurrent === 'page'}\n >\n <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>\n {!navOpen && collapsedItemInfo && (\n <Text variant='secondary'>{collapsedItemInfo}</Text>\n )}\n </Flex>\n )}\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.js CHANGED Viewed

@@ -12,12 +12,12 @@ import { calculateFontSize } from '../../styles';
 import AppShellContext from './AppShellContext';
 import { navContrastColors } from './style-utils';
 const StyledNavigationPopover = styled.div(({ theme }) => {
-    const navBg = theme.components['app-shell'].nav['background-color'];
+    const navBg = theme.components['app-shell'].nav.background;
     const { hoverBg, foreground } = navContrastColors(theme);
     const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;
     return css `
     display: flex;
-    background-color: ${navBg};
+    background: ${navBg};
     ${StyledMenu} {
       display: flex;
@@ -30,7 +30,7 @@ const StyledNavigationPopover = styled.div(({ theme }) => {
     &,
     ${StyledMenuListContainer} {
-      background-color: ${navBg};
+      background: ${navBg};
       header {
         color: ${foreground};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/F,OAAO,GAAG,CAAA;;wBAEY,KAAK;;MAEvB,UAAU;;;;;MAKV,qBAAqB;;;;;MAKrB,uBAAuB;0BACH,KAAK;;;iBAGd,UAAU;;;;;yBAKF,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;uBACxC,eAAe;;;;;MAKhC,uBAAuB;eACd,UAAU;;;;;4BAKG,OAAO;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,eAAe,GAAgC,KAAK,CAAC,EAAE;IAC3D,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,KAAK,EACL,YAAY,EACZ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC/E,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,MAAM,EAAiB,CAAC;IAEnD,MAAM,YAAY,GAAG,CAAC,eAAwB,IAAI,EAAE,EAAE;QACpD,IAAI,WAAW,EAAE;YACf,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,IAAI,YAAY,EAAE;gBAChB,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAClC;YACD,IAAI,kBAAkB,CAAC,OAAO,EAAE;gBAC9B,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gBACzC,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;aACnC;SACF;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,mBAAmB,EAAE;YACvB,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,cAAc,CAAC,OAAO,IAAI,mBAAmB,EAAE;YACjD,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,YAAY,EAAE,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,IAAI,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE;gBAC3B,IAAI,CAAC,OAAO,EAAE;oBACZ,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;iBACpB;gBACD,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW;oBAAE,cAAc,CAAC,IAAI,CAAC,CAAC;qBAC9C;oBACH,UAAU,CAAC,GAAG,EAAE;wBACd,YAAY,CAAC,KAAK,CAAC,CAAC;oBACtB,CAAC,EAAE,CAAC,CAAC,CAAC;iBACP;aACF;QACH,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,OAAO,EAAE;gBAC/B,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,kBAAkB,CAAC,OAAO,EAAE;gBAC9B,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gBACzC,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;aACnC;YAED,MAAM,GAAG,GAAI,CAAC,CAAC,aAAoC,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC;YAE3E,uEAAuE;YACvE,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAChD,YAAY,CAAC,KAAK,CAAC,CAAC;aACrB;iBAAM;gBACL,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBAClD,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;wBAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;qBACrB;gBACH,CAAC,EAAE,IAAI,CAAC,CAAC;aACV;QACH,CAAC,CAAC;QAEF,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC5D,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7E,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChE,IAAI,mBAAmB,EAAE;YACvB,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YACjE,eAAe,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;SACrE;QACD,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC/D,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnE,IAAI,mBAAmB,EAAE;gBACvB,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;gBACpE,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;aACxE;YACD,IAAI,kBAAkB,CAAC,OAAO,EAAE;gBAC9B,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gBACzC,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;aACnC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAE1D,OAAO,CACL,8BACG,QAAQ,EACR,CAAC,OAAO,IAAI,CACX,8BACG,CAAC,WAAW,IAAI,CACf,KAAC,OAAO,IACN,MAAM,EAAE,eAAe,CAAC,OAAO,EAC/B,SAAS,EAAE,GAAG,EACd,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,MAAM,YAEf,YAAY,GACL,CACX,EACA,WAAW,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAC3C,KAAC,OAAO,IACN,MAAM,EAAE,eAAe,CAAC,OAAO,EAC/B,SAAS,EAAE,GAAG,GAAG,QAAQ,EACzB,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,uBAAuB,EAC3B,KAAK,QACL,SAAS,EACP,QAAQ;4BACN,CAAC,CAAC;gCACE;oCACE,IAAI,EAAE,iBAAiB;oCACvB,OAAO,EAAE;wCACP,OAAO,EAAE;4CACP,GAAG,EAAE,QAAQ,CAAC,YAAY,GAAG,CAAC;4CAC9B,KAAK,EAAE,CAAC;4CACR,MAAM,EAAE,CAAC;4CACT,IAAI,EAAE,CAAC;yCACR;qCACF;iCACF;6BACF;4BACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,CAAC,CAAkC,EAAE,EAAE;4BAC9C,CAAC,CAAC,eAAe,EAAE,CAAC;wBACtB,CAAC,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,YACtE,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,QAAQ,EAChB,cAAc,EAAE,eAAe,CAAC,OAAO,IAAI,SAAS,EACpD,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gCACtB,OAAO;oCACL,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAW;oCACzC,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAW;oCAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;oCACf,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wCAChB,CAAC,CAAC,eAAe,EAAE,CAAC;wCACpB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;wCAClB,cAAc,CAAC,KAAK,CAAC,CAAC;oCACxB,CAAC;iCACF,CAAC;4BACJ,CAAC,CAAC,EACF,MAAM,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EACzC,YAAY,EAAE,mBAAmB,EACjC,YAAY,EAAE,mBAAmB,GACjC,CACH,GACO,CACX,IACA,CACJ,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","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('blur', () => closePopover(false));\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"]}
1	+ {"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;\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: ${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: ${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('blur', () => closePopover(false));\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 CHANGED Viewed

@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
 import type { PopoverProps } from '../Popover';
-import type { AsProp } from '../../types';
+import type { AsProp, OmitStrict } from '../../types';
 import type { OperatorProps } from './AppShell.types';
 declare const Operator: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
-    actions: OperatorProps['actions'];
-    popover?: Pick<PopoverProps<string>, "ref" | "className" | "placement" | "arrow" | "modifiers" | "strategy" | "portal" | "showDelay" | "hideDelay" | "groupId" | "hideOnTargetHidden" | "onHide" | "onShow"> | undefined;
+    actions: OperatorProps["actions"];
+    popover?: OmitStrict<PopoverProps, "show" | "target" | "children">;
 } & AsProp & import("react").RefAttributes<HTMLButtonElement>>;
 export default Operator;
 //# sourceMappingURL=Operator.d.ts.map

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

	@@ -1 +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;AAK/C,OAAO,KAAK,EAAE,MAAM,~~EAAc~~,MAAM,aAAa,CAAC;AAItD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,QAAA,MAAM,QAAQ;cAOA,SAAS;aACV,aAAa,CAAC,SAAS,CAAC~~;;8DAqEnC~~,CAAC;AAEH,eAAe,QAAQ,CAAC"}
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;AAK/C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAItD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,QAAA,MAAM,QAAQ;cAOA,SAAS;aACV,aAAa,CAAC,SAAS,CAAC;cACvB,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;8DAoEpE,CAAC;AAEH,eAAe,QAAQ,CAAC"}

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

@@ -24,7 +24,7 @@ const Operator = forwardRef(function Operator({ children, actions, popover, as }
         if (!navOpen)
             setShowMenu(false);
     }, [navOpen]);
-    return (_jsxs(_Fragment, { children: [_jsx(BareButton, { as: as, ref: buttonRef, "aria-expanded": showMenu ? 'true' : 'false', "aria-haspopup": 'menu', onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(BareButton, { as: as, ref: buttonRef, "aria-expanded": showMenu, "aria-haspopup": 'menu', onClick: () => {
                     setShowMenu(cur => !cur);
                 }, onKeyDown: (e) => {
                     if (e.key === 'Escape')

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

	@@ -1 +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,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,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;IAC1C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,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,IACN,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,MAAM,YAEf,CAAC,CAAC,wBAAwB,CAAC,GACpB,EACV,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, useI18n } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\nimport Tooltip from '../Tooltip';\n\nimport AppShellContext from './AppShellContext';\nimport type { OperatorProps } from './AppShell.types';\nimport { StyledAppShellTooltip } from './AppShell.styles';\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 const t = useI18n();\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 <Tooltip\n target={buttonRef.current}\n as={StyledAppShellTooltip}\n showDelay='none'\n hideDelay='none'\n >\n {t('app_shell_user_account')}\n </Tooltip>\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"]}
1	+ {"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"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","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, useI18n } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\nimport Tooltip from '../Tooltip';\n\nimport AppShellContext from './AppShellContext';\nimport type { OperatorProps } from './AppShell.types';\nimport { StyledAppShellTooltip } from './AppShell.styles';\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 const t = useI18n();\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}\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 <Tooltip\n target={buttonRef.current}\n as={StyledAppShellTooltip}\n showDelay='none'\n hideDelay='none'\n >\n {t('app_shell_user_account')}\n </Tooltip>\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 CHANGED Viewed

@@ -5,7 +5,10 @@ export declare const navContrastColors: (theme: DefaultTheme) => {
     foreground: string;
     border: string;
     interactive: string;
+    urgent: string;
     nestedList: string;
+    backgroundColor: string;
+    nestedListHeader: string;
 };
 export declare const getHeaderTheme: (theme: DefaultTheme) => DefaultSettableTheme;
 export declare const pxToRem: (n: number) => string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;~~AAGtD~~,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,eAAO,MAAM,iBAAiB,UACrB,YAAY;~~aAEV~~,MAAM;~~gBACH~~,MAAM;~~YACV~~,MAAM;~~iBACD~~,MAAM;~~gBACP~~,MAAM;~~CAkCnB~~,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,~~oBA0CrD~~,CAAC;AAEF,eAAO,MAAM,OAAO,MAAO,MAAM,KAAG,MAA4B,CAAC"}
1	+ {"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,eAAO,MAAM,iBAAiB,UACrB,YAAY,KAClB;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;CA+C1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,oBAgDrD,CAAC;AAEF,eAAO,MAAM,OAAO,MAAO,MAAM,KAAG,MAA4B,CAAC"}

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

@@ -1,36 +1,50 @@
 import { darken, getContrast, lighten, transparentize } from 'polished';
-import { readableColor, readableHue } from '../../styles';
+import { calculateBackgroundAndContrastColor, calculateForegroundColor, isSolidColor, readableHue } from '../../styles';
 export const navContrastColors = (theme) => {
-    const { base: { palette: { interactive } }, components: { 'app-shell': { nav: { 'background-color': navBg } } } } = theme;
-    let hoverBg = darken(0.05, navBg);
-    if (getContrast(navBg, hoverBg) === 1) {
-        hoverBg = lighten(0.15, navBg);
-    }
-    let nestedListBg = darken(0.075, navBg);
-    if (getContrast(navBg, nestedListBg) === 1) {
+    const { base: { palette: { interactive, urgent } }, components: { 'app-shell': { nav: { background: navBg, 'foreground-color': navFgColor } } } } = theme;
+    const computedFgColor = calculateForegroundColor(navBg, navFgColor);
+    const isGradientBackground = !isSolidColor(navBg);
+    const { backgroundColor, contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);
+    let nestedListBg = darken(0.075, backgroundColor);
+    if (getContrast(backgroundColor, nestedListBg) === 1) {
         nestedListBg = lighten(0.2, nestedListBg);
     }
-    const foregroundColor = readableColor(navBg);
-    const borderColor = transparentize(0.8, foregroundColor);
-    const interactiveColor = readableHue(interactive, navBg);
+    if (isGradientBackground) {
+        nestedListBg = transparentize(0.9, computedFgColor);
+    }
+    let nestedListHeader = nestedListBg;
+    if (isGradientBackground) {
+        nestedListHeader = lighten(0.9, computedFgColor);
+        if (getContrast(computedFgColor, nestedListHeader) === 1) {
+            nestedListHeader = darken(0.9, computedFgColor);
+        }
+    }
+    const borderColor = transparentize(0.8, computedFgColor);
+    const interactiveColor = readableHue(interactive, backgroundColor);
+    const urgentColor = readableHue(urgent, backgroundColor);
     return {
-        hoverBg,
-        foreground: foregroundColor,
+        hoverBg: contrastColor,
+        foreground: computedFgColor,
         border: borderColor,
         interactive: interactiveColor,
-        nestedList: nestedListBg
+        urgent: urgentColor,
+        nestedList: nestedListBg,
+        backgroundColor,
+        nestedListHeader
     };
 };
-export const getHeaderTheme = ({ base: { palette: { interactive } }, components: { 'app-shell': { header: { 'background-color': headerBg } } } }) => {
-    const foregroundColor = readableColor(headerBg);
+export const getHeaderTheme = ({ base: { palette: { interactive } }, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFg } } } }) => {
+    const foregroundColor = calculateForegroundColor(headerBg, headerFg);
+    const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFg);
+    const computedBgColor = !isSolidColor(headerBg) ? backgroundColor : headerBg;
     const hoverBorderColor = transparentize(0.3, foregroundColor);
     const borderLineColor = transparentize(0.8, foregroundColor);
-    const interactiveColor = readableHue(interactive, headerBg);
+    const interactiveColor = readableHue(interactive, computedBgColor);
     const formControlBorderColor = transparentize(0.5, foregroundColor);
     return {
         base: {
             palette: {
-                'primary-background': headerBg,
+                'primary-background': computedBgColor,
                 'foreground-color': foregroundColor,
                 'border-line': borderLineColor,
                 interactive: interactiveColor
@@ -42,7 +56,7 @@ export const getHeaderTheme = ({ base: { palette: { interactive } }, components:
                 ':hover': {
                     'border-color': hoverBorderColor
                 },
-                'background-color': headerBg
+                'background-color': computedBgColor
             },
             input: {
                 'border-color': formControlBorderColor
@@ -51,6 +65,9 @@ export const getHeaderTheme = ({ base: { palette: { interactive } }, components:
                 ':checked': {
                     'background-color': interactiveColor
                 }
+            },
+            card: {
+                background: computedBgColor
             }
         }
     };

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

	@@ -1 +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,cAAc,EAAE,MAAM,UAAU,CAAC;AAGxE,OAAO,~~EAAE~~,~~aAAa~~,~~EAAE~~,WAAW,~~EAAE~~,MAAM,cAAc,CAAC;~~AAG1D~~,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAmB,~~EAOnB~~,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;IAEV,~~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~~,IAAI,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE,~~KAAK~~,CAAC,CAAC;~~IACxC~~,IAAI,WAAW,CAAC,~~KAAK~~,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE;~~QAC1C~~,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;~~KAC3C~~;~~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;QAC7B,UAAU,EAAE,YAAY;~~KACzB~~,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAkD,CAAC,EAC5E,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,EACzB,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,MAAM,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE,~~EACzC~~,EACF,EACF,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,~~aAAa~~,CAAC,QAAQ,CAAC,CAAC;~~IAChD~~,MAAM,gBAAgB,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,EAAE,~~QAAQ~~,CAAC,CAAC;~~IAC5D~~,MAAM,sBAAsB,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACpE,OAAO;QACL,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,oBAAoB,EAAE,~~QAAQ~~;~~gBAC9B~~,kBAAkB,EAAE,eAAe;gBACnC,aAAa,EAAE,eAAe;gBAC9B,WAAW,EAAE,gBAAgB;aAC9B;SACF;QACD,UAAU,EAAE;YACV,cAAc,EAAE;gBACd,cAAc,EAAE,sBAAsB;gBACtC,QAAQ,EAAE;oBACR,cAAc,EAAE,gBAAgB;iBACjC;gBACD,kBAAkB,EAAE,~~QAAQ~~;~~aAC7B~~;YACD,KAAK,EAAE;gBACL,cAAc,EAAE,sBAAsB;aACvC;YACD,aAAa,EAAE;gBACb,UAAU,EAAE;oBACV,kBAAkB,EAAE,gBAAgB;iBACrC;aACF;SACF;KACF,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, transparentize } from 'polished';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { ~~readableColor,~~ readableHue } from '../../styles';\nimport type { DefaultSettableTheme } from '../../theme';\n\nexport const navContrastColors = (\n theme: DefaultTheme\n): {\n hoverBg: string;\n foreground: string;\n border: string;\n interactive: string;\n nestedList: 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\n let ~~hoverBg~~ = darken(0.05, ~~navBg~~);\n if (getContrast(~~navBg~~, ~~hoverBg~~) === 1) {\n ~~hoverBg~~ = lighten(0.15, ~~navBg~~);\n }\n\n let nestedListBg = ~~darken~~(0.~~075~~, ~~navBg~~);\n if (getContrast(~~navBg~~, ~~nestedListBg~~) === 1) {\n ~~nestedListBg~~ = ~~lighten~~(0.2, ~~nestedListBg~~);\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 nestedList: nestedListBg\n };\n};\n\nexport const getHeaderTheme: (theme: DefaultTheme) => DefaultSettableTheme = ({\n base: {\n palette: { interactive }\n },\n components: {\n 'app-shell': {\n header: { '~~background~~-color': ~~headerBg~~ }\n }\n }\n}) => {\n const foregroundColor = ~~readableColor~~(headerBg);\n const hoverBorderColor = transparentize(0.3, foregroundColor);\n const borderLineColor = transparentize(0.8, foregroundColor);\n const interactiveColor = readableHue(interactive, ~~headerBg~~);\n const formControlBorderColor = transparentize(0.5, foregroundColor);\n return {\n base: {\n palette: {\n 'primary-background': ~~headerBg~~,\n 'foreground-color': foregroundColor,\n 'border-line': borderLineColor,\n interactive: interactiveColor\n }\n },\n components: {\n 'form-control': {\n 'border-color': formControlBorderColor,\n ':hover': {\n 'border-color': hoverBorderColor\n },\n 'background-color': ~~headerBg~~\n },\n input: {\n 'border-color': formControlBorderColor\n },\n 'radio-check': {\n ':checked': {\n 'background-color': interactiveColor\n }\n }\n }\n };\n};\n\nexport const pxToRem = (n: number): string => `${n * 0.0625}rem`;\n"]}
1	+ {"version":3,"file":"style-utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten, transparentize } from 'polished';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n calculateBackgroundAndContrastColor,\n calculateForegroundColor,\n isSolidColor,\n readableHue\n} from '../../styles';\nimport type { DefaultSettableTheme } from '../../theme';\n\nexport const navContrastColors = (\n theme: DefaultTheme\n): {\n hoverBg: string;\n foreground: string;\n border: string;\n interactive: string;\n urgent: string;\n nestedList: string;\n backgroundColor: string;\n nestedListHeader: string;\n} => {\n const {\n base: {\n palette: { interactive, urgent }\n },\n components: {\n 'app-shell': {\n nav: { background: navBg, 'foreground-color': navFgColor }\n }\n }\n } = theme;\n\n const computedFgColor = calculateForegroundColor(navBg, navFgColor);\n const isGradientBackground = !isSolidColor(navBg);\n const { backgroundColor, contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n let nestedListBg = darken(0.075, backgroundColor);\n if (getContrast(backgroundColor, nestedListBg) === 1) {\n nestedListBg = lighten(0.2, nestedListBg);\n }\n if (isGradientBackground) {\n nestedListBg = transparentize(0.9, computedFgColor);\n }\n\n let nestedListHeader = nestedListBg;\n if (isGradientBackground) {\n nestedListHeader = lighten(0.9, computedFgColor);\n if (getContrast(computedFgColor, nestedListHeader) === 1) {\n nestedListHeader = darken(0.9, computedFgColor);\n }\n }\n\n const borderColor = transparentize(0.8, computedFgColor);\n const interactiveColor = readableHue(interactive, backgroundColor);\n const urgentColor = readableHue(urgent, backgroundColor);\n\n return {\n hoverBg: contrastColor,\n foreground: computedFgColor,\n border: borderColor,\n interactive: interactiveColor,\n urgent: urgentColor,\n nestedList: nestedListBg,\n backgroundColor,\n nestedListHeader\n };\n};\n\nexport const getHeaderTheme: (theme: DefaultTheme) => DefaultSettableTheme = ({\n base: {\n palette: { interactive }\n },\n components: {\n 'app-shell': {\n header: { background: headerBg, 'foreground-color': headerFg }\n }\n }\n}) => {\n const foregroundColor = calculateForegroundColor(headerBg, headerFg);\n const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFg);\n const computedBgColor = !isSolidColor(headerBg) ? backgroundColor : headerBg;\n\n const hoverBorderColor = transparentize(0.3, foregroundColor);\n const borderLineColor = transparentize(0.8, foregroundColor);\n const interactiveColor = readableHue(interactive, computedBgColor);\n const formControlBorderColor = transparentize(0.5, foregroundColor);\n return {\n base: {\n palette: {\n 'primary-background': computedBgColor,\n 'foreground-color': foregroundColor,\n 'border-line': borderLineColor,\n interactive: interactiveColor\n }\n },\n components: {\n 'form-control': {\n 'border-color': formControlBorderColor,\n ':hover': {\n 'border-color': hoverBorderColor\n },\n 'background-color': computedBgColor\n },\n input: {\n 'border-color': formControlBorderColor\n },\n 'radio-check': {\n ':checked': {\n 'background-color': interactiveColor\n }\n },\n card: {\n background: computedBgColor\n }\n }\n };\n};\n\nexport const pxToRem = (n: number): string => `${n * 0.0625}rem`;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,~~2BAA4B~~,YAAY,gBAAgB,IAAI,~~QActF~~,CAAC"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,IAAI,UAAU,YAAY,gBAAgB,IAAI,KAAG,CAAC,EAc1F,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAiB,MAAoB,EAAE,YAAkB,EAAO,EAAE;IAC9F,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,QAAQ,EAAE,CAAC;IAClB,OAAO,MAAM,CAAC,aAAa,KAAK,IAAI,IAAI,MAAM,CAAC,aAAa,KAAK,YAAY,EAAE;~~QAC7E~~,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,EAAE,CAAC;~~KACnB~~;IAED,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,OAAO,MAAM,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;~~QACjC~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;~~KAClC~~;IAED,OAAO,KAAK,CAAC,MAAM,CAAC,SAAS,CAAQ,CAAC;AACxC,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport const followingNodes = <T extends Node>(source: NodeIterator, startingNode: Node): T[] => {\n const prevNodes = [];\n source.nextNode();\n while (source.referenceNode !== null && source.referenceNode !== startingNode) {\n prevNodes.push(source.referenceNode);\n source.nextNode();\n }\n\n const nodes = [];\n while (source.nextNode() !== null) {\n nodes.push(source.referenceNode);\n }\n\n return nodes.concat(prevNodes) as T[];\n};\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/utils.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAiB,MAAoB,EAAE,YAAkB,EAAO,EAAE;IAC9F,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,QAAQ,EAAE,CAAC;IAClB,OAAO,MAAM,CAAC,aAAa,KAAK,IAAI,IAAI,MAAM,CAAC,aAAa,KAAK,YAAY,EAAE,CAAC;QAC9E,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC;IAED,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,OAAO,MAAM,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC;QAClC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC;IAED,OAAO,KAAK,CAAC,MAAM,CAAC,SAAS,CAAQ,CAAC;AACxC,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport const followingNodes = <T extends Node>(source: NodeIterator, startingNode: Node): T[] => {\n const prevNodes = [];\n source.nextNode();\n while (source.referenceNode !== null && source.referenceNode !== startingNode) {\n prevNodes.push(source.referenceNode);\n source.nextNode();\n }\n\n const nodes = [];\n while (source.nextNode() !== null) {\n nodes.push(source.referenceNode);\n }\n\n return nodes.concat(prevNodes) as T[];\n};\n"]}

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

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref, SyntheticEvent } from 'react';
-import type { BaseProps, ForwardProps, PropsWithDefaults, NoChildrenProp, TestIdProp } from '../../types';
+import type { Ref, SyntheticEvent } from 'react';
+import type { BaseProps, ForwardRefForwardPropsComponent, PropsWithDefaults, NoChildrenProp, TestIdProp } from '../../types';
 export interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {
     /** The name of the identity the Avatar represents. */
     name: string;
@@ -29,16 +29,16 @@ export interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {
     ref?: Ref<HTMLDivElement | HTMLImageElement>;
 }
 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" | "testId" | "imageSrc" | "onImageError"> & {
-    hasSrc?: boolean | undefined;
-    hasBrokenImage?: boolean | undefined;
+export declare const StyledAvatarImage: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Image").ImageProps>, 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" | "className" | "shape" | "status" | "testId" | "imageSrc" | "onImageError"> & {
+    hasSrc?: boolean;
+    hasBrokenImage?: boolean;
 }, never>;
 export declare const StyledStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Badges").AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, Pick<AvatarPropsWithDefaults, "size">, never>;
-declare const _default: FunctionComponent<AvatarProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+declare const _default: ForwardRefForwardPropsComponent<AvatarProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=Avatar.d.ts.map

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

	@@ -1 +1 @@
1	- {"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;AAUrB,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;;0FA6BvB,CAAC;;;;AAqFH,wBAAqD"}
1	+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,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,kKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;aAEZ,OAAO;qBACC,OAAO;SAyE3B,CAAC;AAIF,eAAO,MAAM,YAAY;;0FA6BvB,CAAC;;;;AAqFH,wBAAqD"}

package/lib/components/Avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n BaseProps,\n ForwardProps,\n PropsWithDefaults,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The name of the identity the Avatar represents. /\n name: string;\n /* Content of the Avatar as an image source url. /\n imageSrc?: string;\n /* An icon to render as the content of the avatar. imageSrc will take precedence if passed. /\n icon?: string;\n /* Optional color for the icon to be rendered /\n color?: string;\n /* Optional background color for the avatar. Will be auto computed if not passed /\n backgroundColor?: string;\n /\n Shape of the Avatar.\n * @default 'circle'\n /\n shape?: 'circle' \| 'squircle';\n /\n Avatar size.\n * @default 'm'\n /\n size?: 's' \| 'm' \| 'l' \| 'xl';\n /* If defined, will render status icon on the avatar. /\n status?: 'active';\n /* Optional error handler in the event an image fails to load. /\n onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement \| HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' \| 'size'>;\n\nconst sizeToRem = {\n s: 1,\n m: 2,\n l: 2.5,\n xl: 4\n};\n\nconst fontSizeToRem = {\n s: 0.5625,\n m: 0.8125,\n l: 1,\n xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n min-height: 100%;\n min-width: 100%;\n aspect-ratio: 1 / 1;\n object-fit: cover;\n border-radius: inherit;\n height: fit-content;\n width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n OmitStrict<AvatarPropsWithDefaults, 'name' \| 'children'> & {\n hasSrc?: boolean;\n hasBrokenImage?: boolean;\n }\n>(\n ({\n hasBrokenImage,\n hasSrc,\n size,\n shape,\n color,\n backgroundColor,\n theme: {\n base: {\n palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n 'border-radius': baseBorderRadius\n },\n components: {\n avatar: { 'background-color': avatarBackground },\n icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n }\n }\n }) => {\n const sizeRem = sizeToRem[size];\n const fontSize = fontSizeToRem[size];\n let bgColor =\n hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor \|\| avatarBackground;\n if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n bgColor = tryCatch(\n () => readableColor(color),\n () => avatarBackground\n );\n const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n const iconColor = color \|\| tryCatch(() => readableColor(bgColor));\n\n return css`\n position: relative;\n flex-shrink: 0;\n background-color: ${bgColor};\n color: ${iconColor};\n width: ${sizeRem}rem;\n height: ${sizeRem}rem;\n min-width: ${sizeRem}rem;\n min-height: ${sizeRem}rem;\n font-size: ${fontSize}rem;\n text-transform: uppercase;\n line-height: ${sizeRem}rem;\n text-align: center;\n vertical-align: top;\n display: inline-block;\n border-radius: 100%;\n user-select: none;\n -webkit-user-select: none;\n\n ${shape === 'squircle' &&\n css`\n border-radius: calc(${borderRadiusMultiplier} ${baseBorderRadius});\n `}\n\n ${StyledIcon} {\n width: 50%;\n height: 100%;\n vertical-align: initial;\n }\n\n ::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n }\n `;\n }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n size,\n theme\n}) => {\n /** Scales alert badge dimensions based on size of avatar /\n const sizeDimensions = (0.625 sizeToRem[size]) / sizeToRem.m;\n\n return css`\n position: absolute;\n height: ${sizeDimensions}rem;\n width: ${sizeDimensions}rem;\n inset-block-end: 0;\n inset-inline-end: 0;\n z-index: 1;\n animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n @keyframes pop {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n }\n `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/*\n Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n /\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n const words = name.split(' ');\n const firstInitial = words[0][0];\n\n return words.length === 1 \|\| size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;\n};\n\n/\n Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: FunctionComponent<AvatarProps & ForwardProps> = forwardRef(function Avatar(\n props: PropsWithoutRef<AvatarProps>,\n ref: Ref<HTMLDivElement \| HTMLImageElement>\n) {\n const {\n testId,\n shape = 'circle',\n size = 'm',\n imageSrc,\n icon,\n name,\n status,\n onImageError,\n ...restProps\n } = props;\n const [hasBrokenImage, setHasBrokenImage] = useState<undefined \| boolean>();\n const t = useI18n();\n const testIds = useTestIds(testId, getAvatarTestIds);\n\n useEffect(() => {\n setHasBrokenImage(undefined);\n }, [imageSrc]);\n\n const content = useMemo(() => {\n if (icon) {\n return <Icon name={icon} />;\n }\n if (imageSrc && !hasBrokenImage) {\n return (\n <StyledAvatarImage\n src={imageSrc}\n alt={name}\n onError={(e: SyntheticEvent<HTMLImageElement>) => {\n setHasBrokenImage(true);\n onImageError?.(e);\n }}\n onLoad={() => {\n setHasBrokenImage(false);\n }}\n />\n );\n }\n return getInitials(name, size);\n }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n return (\n <StyledAvatar\n data-testid={testIds.root}\n role='img'\n hasSrc={!!imageSrc}\n hasBrokenImage={hasBrokenImage}\n shape={shape}\n size={size}\n ref={ref}\n aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n {...restProps}\n >\n {content}\n {status === 'active' && <StyledStatus size={size} variant='success' />}\n </StyledAvatar>\n );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}
1	+ {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The name of the identity the Avatar represents. /\n name: string;\n /* Content of the Avatar as an image source url. /\n imageSrc?: string;\n /* An icon to render as the content of the avatar. imageSrc will take precedence if passed. /\n icon?: string;\n /* Optional color for the icon to be rendered /\n color?: string;\n /* Optional background color for the avatar. Will be auto computed if not passed /\n backgroundColor?: string;\n /\n Shape of the Avatar.\n * @default 'circle'\n /\n shape?: 'circle' \| 'squircle';\n /\n Avatar size.\n * @default 'm'\n /\n size?: 's' \| 'm' \| 'l' \| 'xl';\n /* If defined, will render status icon on the avatar. /\n status?: 'active';\n /* Optional error handler in the event an image fails to load. /\n onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement \| HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' \| 'size'>;\n\nconst sizeToRem = {\n s: 1,\n m: 2,\n l: 2.5,\n xl: 4\n};\n\nconst fontSizeToRem = {\n s: 0.5625,\n m: 0.8125,\n l: 1,\n xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n min-height: 100%;\n min-width: 100%;\n aspect-ratio: 1 / 1;\n object-fit: cover;\n border-radius: inherit;\n height: fit-content;\n width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n OmitStrict<AvatarPropsWithDefaults, 'name' \| 'children'> & {\n hasSrc?: boolean;\n hasBrokenImage?: boolean;\n }\n>(\n ({\n hasBrokenImage,\n hasSrc,\n size,\n shape,\n color,\n backgroundColor,\n theme: {\n base: {\n palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n 'border-radius': baseBorderRadius\n },\n components: {\n avatar: { 'background-color': avatarBackground },\n icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n }\n }\n }) => {\n const sizeRem = sizeToRem[size];\n const fontSize = fontSizeToRem[size];\n let bgColor =\n hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor \|\| avatarBackground;\n if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n bgColor = tryCatch(\n () => readableColor(color),\n () => avatarBackground\n );\n const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n const iconColor = color \|\| tryCatch(() => readableColor(bgColor));\n\n return css`\n position: relative;\n flex-shrink: 0;\n background-color: ${bgColor};\n color: ${iconColor};\n width: ${sizeRem}rem;\n height: ${sizeRem}rem;\n min-width: ${sizeRem}rem;\n min-height: ${sizeRem}rem;\n font-size: ${fontSize}rem;\n text-transform: uppercase;\n line-height: ${sizeRem}rem;\n text-align: center;\n vertical-align: top;\n display: inline-block;\n border-radius: 100%;\n user-select: none;\n -webkit-user-select: none;\n\n ${shape === 'squircle' &&\n css`\n border-radius: calc(${borderRadiusMultiplier} ${baseBorderRadius});\n `}\n\n ${StyledIcon} {\n width: 50%;\n height: 100%;\n vertical-align: initial;\n }\n\n ::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n }\n `;\n }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n size,\n theme\n}) => {\n /** Scales alert badge dimensions based on size of avatar /\n const sizeDimensions = (0.625 sizeToRem[size]) / sizeToRem.m;\n\n return css`\n position: absolute;\n height: ${sizeDimensions}rem;\n width: ${sizeDimensions}rem;\n inset-block-end: 0;\n inset-inline-end: 0;\n z-index: 1;\n animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n @keyframes pop {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n }\n `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/*\n Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n /\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n const words = name.split(' ');\n const firstInitial = words[0][0];\n\n return words.length === 1 \|\| size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;\n};\n\n/\n Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: ForwardRefForwardPropsComponent<AvatarProps> = forwardRef(function Avatar(\n props: PropsWithoutRef<AvatarProps>,\n ref: AvatarProps['ref']\n) {\n const {\n testId,\n shape = 'circle',\n size = 'm',\n imageSrc,\n icon,\n name,\n status,\n onImageError,\n ...restProps\n } = props;\n const [hasBrokenImage, setHasBrokenImage] = useState<undefined \| boolean>();\n const t = useI18n();\n const testIds = useTestIds(testId, getAvatarTestIds);\n\n useEffect(() => {\n setHasBrokenImage(undefined);\n }, [imageSrc]);\n\n const content = useMemo(() => {\n if (icon) {\n return <Icon name={icon} />;\n }\n if (imageSrc && !hasBrokenImage) {\n return (\n <StyledAvatarImage\n src={imageSrc}\n alt={name}\n onError={(e: SyntheticEvent<HTMLImageElement>) => {\n setHasBrokenImage(true);\n onImageError?.(e);\n }}\n onLoad={() => {\n setHasBrokenImage(false);\n }}\n />\n );\n }\n return getInitials(name, size);\n }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n return (\n <StyledAvatar\n data-testid={testIds.root}\n role='img'\n hasSrc={!!imageSrc}\n hasBrokenImage={hasBrokenImage}\n shape={shape}\n size={size}\n ref={ref}\n aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n {...restProps}\n >\n {content}\n {status === 'active' && <StyledStatus size={size} variant='success' />}\n </StyledAvatar>\n );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}

package/lib/components/Avatar/Avatar.test-ids.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const getAvatarTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
+export declare const getAvatarTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
 //# sourceMappingURL=Avatar.test-ids.d.ts.map

package/lib/components/Avatar/Avatar.test-ids.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,~~wFAAuC~~,CAAC"}
1	+ {"version":3,"file":"Avatar.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,mGAAuC,CAAC"}