npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.22.0 → 3.0.0-dev.23.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.22.0 → 3.0.0-dev.23.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 (89) hide show

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

@@ -12,7 +12,7 @@ import { StyledText } from '../Text';
 import { StyledBackdrop } from '../Backdrop';
 import { StyledEmptyState } from '../EmptyState';
 import { navWidth } from './AppShell.styles';
-export const StyledSearchForm = styled.form(({ theme, collapsed, isMediumOrAbove }) => {
+export const StyledSearch = styled.div(({ theme, collapsed, isMediumOrAbove }) => {
     const backgroundColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
     const maxCollapsedSize = theme.components.input.height;
     const activeColor = tryCatch(() => mix(0.85, theme.base.palette.dark, theme.base.palette.interactive));
@@ -20,13 +20,16 @@ export const StyledSearchForm = styled.form(({ theme, collapsed, isMediumOrAbove
     return css `
       flex-shrink: 0;
       justify-content: center;
-      padding: ${theme.base.spacing} 0;
       --background-color: ${backgroundColor};
       ${StyledMenuListContainer} {
         background: transparent;
       }
+      > form {
+        padding: ${theme.base.spacing} 0;
+      }
       header {
         ${StyledText} {
           color: ${theme.base.palette.light};
@@ -118,7 +121,7 @@ export const StyledSearchForm = styled.form(({ theme, collapsed, isMediumOrAbove
         }
       }
-      > ${StyledSearchInput} {
+      form > ${StyledSearchInput} {
         margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
         ${collapsed &&
         isMediumOrAbove &&
@@ -156,7 +159,7 @@ export const StyledSearchForm = styled.form(({ theme, collapsed, isMediumOrAbove
       }
     `;
 });
-StyledSearchForm.defaultProps = defaultThemeProp;
+StyledSearch.defaultProps = defaultThemeProp;
 export const StyledAppShellSearchDecoration = styled.div(({ theme }) => {
     return css `
     width: ${theme.components.input.height};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShellSearch.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,CAAC,MAAM,~~gBAAgB~~,GAAG,MAAM,CAAC,~~IAAI~~,~~CACzC~~,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE;IACxC,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CACpC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC;IACvD,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACnE,CAAC;IACF,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACnE,CAAC;IAEF,OAAO,GAAG,CAAA;;;~~iBAGG~~,KAAK,CAAC,IAAI,CAAC,OAAO~~;4BACP~~,~~eAAe;;QAEnC,uBAAuB;;;;;UAKrB,~~UAAU;mBACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;;QAInC,cAAc;;;;QAId,gBAAgB;;;mBAGL,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;;QAInC,UAAU;;8BAEY,WAAW;;;UAG/B,UAAU;mBACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;;QAInC,cAAc;iBACL,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;mBAGtB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;;8BAIb,WAAW;;;;8BAIX,UAAU;;;;QAIhC,oBAAoB,KAAK,oBAAoB;4BACzB,eAAe;wBACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;;QAG9C,iBAAiB;;;;UAIf,kBAAkB;0CACc,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;;;UAI1D,kBAAkB;;;;;0BAKF,eAAe;;;;;;;4BAOb,eAAe;;;;;UAKjC,kBAAkB;wBACJ,eAAe;;;;;;;;;;YAU3B,kBAAkB;;;;;;~~UAMpB~~,iBAAiB;~~0BACD~~,QAAQ,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;UACjE,SAAS;QACX,eAAe;QACf,GAAG,CAAA;;SAEF;sBACa,eAAe;;UAE3B,SAAS;QACX,eAAe;QACf,GAAG,CAAA;YACC,kBAAkB;;gBAEd,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;sBAE5E,gBAAgB;qBACjB,gBAAgB;;;;;;;;;;;;;;YAczB,kBAAkB;;;SAGrB;;KAEJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,~~gBAAgB~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAEjD~~,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM;cAC5B,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM;;;;;;;;GAQxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;MAGtD,8BAA8B;;0BAEV,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;;CAG3E,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;eACG,IAAI,CAAC,OAAO;GACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import { lighten, mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport { StyledLink } from '../Link';\nimport { StyledMenuItem } from '../Menu';\nimport { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n StyledCancelButton,\n StyledFiltersPopover,\n StyledResultsPopover,\n StyledSearchButton\n} from '../SearchInput/SearchInput.styles';\nimport { StyledText } from '../Text';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledEmptyState } from '../EmptyState';\n\nimport { navWidth } from './AppShell.styles';\n\nexport const ~~StyledSearchForm~~ = styled.~~form~~<{ collapsed: boolean; isMediumOrAbove: boolean }>(\n ({ theme, collapsed, isMediumOrAbove }) => {\n const backgroundColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const maxCollapsedSize = theme.components.input.height;\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette.dark, theme.base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette.dark, theme.base.palette.interactive)\n );\n\n return css`\n flex-shrink: 0;\n justify-content: center;\n ~~padding: ${theme.base.spacing} 0;\n~~ --background-color: ${backgroundColor};\n\n ${StyledMenuListContainer} {\n background: transparent;\n }\n\n header {\n ${StyledText} {\n color: ${theme.base.palette.light};\n }\n }\n\n ${StyledBackdrop} {\n background: transparent;\n }\n\n ${StyledEmptyState} {\n span,\n svg {\n color: ${theme.base.palette.light};\n }\n }\n\n ${StyledMenu} {\n &[data-active-scope='true'] [data-current='true'] {\n background-color: ${activeColor};\n }\n\n ${StyledLink} {\n color: ${theme.base.palette.light};\n }\n }\n\n ${StyledMenuItem} {\n color: ${theme.base.palette.light};\n\n li {\n color: ${theme.base.palette.light};\n }\n\n &:focus-within {\n background-color: ${activeColor};\n }\n\n &:hover:not([aria-disabled='true']) {\n background-color: ${hoverColor};\n }\n }\n\n ${StyledFiltersPopover}, ${StyledResultsPopover} {\n background-color: ${backgroundColor};\n z-index: calc(${theme.base['z-index'].backdrop} + 1);\n }\n\n ${StyledSearchInput} {\n border: none;\n background: transparent;\n\n ${StyledSearchButton} {\n transition: borderRadius calc(${theme.base.animation.speed} * 2);\n border: none;\n }\n\n ${StyledCancelButton} {\n color: rgba(255, 255, 255, 0.9);\n }\n\n input {\n border-color: ${backgroundColor};\n\n &::placeholder {\n color: rgba(255, 255, 255, 0.4);\n }\n\n &:focus:not([disabled]) {\n border-color: ${backgroundColor};\n }\n }\n\n input,\n ${StyledSearchButton} {\n background: ${backgroundColor};\n color: rgba(255, 255, 255, 0.7);\n border: transparent;\n\n &:focus-within {\n border: transparent;\n }\n }\n\n &:focus-within {\n ${StyledSearchButton} {\n color: rgba(255, 255, 255, 0.9);\n }\n }\n }\n\n > ${StyledSearchInput} {\n margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n ${collapsed &&\n isMediumOrAbove &&\n css`\n overflow: hidden;\n `}\n background: ${backgroundColor};\n\n ${collapsed &&\n isMediumOrAbove &&\n css`\n ${StyledSearchButton} {\n border-radius: calc(\n ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}\n );\n height: ${maxCollapsedSize};\n width: ${maxCollapsedSize};\n padding: 0;\n\n > :not(:first-child) {\n display: none;\n }\n }\n\n input {\n padding: 0;\n max-width: 0;\n overflow: hidden;\n }\n\n ${StyledCancelButton} {\n display: none;\n }\n `}\n }\n `;\n }\n);\n\~~nStyledSearchForm~~.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchDecoration = styled.div(({ theme }) => {\n return css`\n width: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--background-color);\n color: rgba(255, 255, 255, 0.7);\n margin: 0 auto;\n `;\n});\n\nStyledAppShellSearchDecoration.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchButton = styled(BareButton)`\n width: 100%;\n &:focus {\n ${StyledAppShellSearchDecoration} {\n outline: none;\n box-shadow: inset ${props => props.theme.base.shadow['focus-inverted']};\n }\n }\n`;\n\nStyledAppShellSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {\n return css`\n padding: ${base.spacing};\n `;\n});\n\nStyledAppshellSearchContainer.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"AppShellSearch.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten, mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport { StyledLink } from '../Link';\nimport { StyledMenuItem } from '../Menu';\nimport { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n StyledCancelButton,\n StyledFiltersPopover,\n StyledResultsPopover,\n StyledSearchButton\n} from '../SearchInput/SearchInput.styles';\nimport { StyledText } from '../Text';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledEmptyState } from '../EmptyState';\n\nimport { navWidth } from './AppShell.styles';\n\nexport const StyledSearch = styled.div<{ collapsed: boolean; isMediumOrAbove: boolean }>(\n ({ theme, collapsed, isMediumOrAbove }) => {\n const backgroundColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const maxCollapsedSize = theme.components.input.height;\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette.dark, theme.base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette.dark, theme.base.palette.interactive)\n );\n\n return css`\n flex-shrink: 0;\n justify-content: center;\n --background-color: ${backgroundColor};\n\n ${StyledMenuListContainer} {\n background: transparent;\n }\n\n > form {\n padding: ${theme.base.spacing} 0;\n }\n\n header {\n ${StyledText} {\n color: ${theme.base.palette.light};\n }\n }\n\n ${StyledBackdrop} {\n background: transparent;\n }\n\n ${StyledEmptyState} {\n span,\n svg {\n color: ${theme.base.palette.light};\n }\n }\n\n ${StyledMenu} {\n &[data-active-scope='true'] [data-current='true'] {\n background-color: ${activeColor};\n }\n\n ${StyledLink} {\n color: ${theme.base.palette.light};\n }\n }\n\n ${StyledMenuItem} {\n color: ${theme.base.palette.light};\n\n li {\n color: ${theme.base.palette.light};\n }\n\n &:focus-within {\n background-color: ${activeColor};\n }\n\n &:hover:not([aria-disabled='true']) {\n background-color: ${hoverColor};\n }\n }\n\n ${StyledFiltersPopover}, ${StyledResultsPopover} {\n background-color: ${backgroundColor};\n z-index: calc(${theme.base['z-index'].backdrop} + 1);\n }\n\n ${StyledSearchInput} {\n border: none;\n background: transparent;\n\n ${StyledSearchButton} {\n transition: borderRadius calc(${theme.base.animation.speed} * 2);\n border: none;\n }\n\n ${StyledCancelButton} {\n color: rgba(255, 255, 255, 0.9);\n }\n\n input {\n border-color: ${backgroundColor};\n\n &::placeholder {\n color: rgba(255, 255, 255, 0.4);\n }\n\n &:focus:not([disabled]) {\n border-color: ${backgroundColor};\n }\n }\n\n input,\n ${StyledSearchButton} {\n background: ${backgroundColor};\n color: rgba(255, 255, 255, 0.7);\n border: transparent;\n\n &:focus-within {\n border: transparent;\n }\n }\n\n &:focus-within {\n ${StyledSearchButton} {\n color: rgba(255, 255, 255, 0.9);\n }\n }\n }\n\n form > ${StyledSearchInput} {\n margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n ${collapsed &&\n isMediumOrAbove &&\n css`\n overflow: hidden;\n `}\n background: ${backgroundColor};\n\n ${collapsed &&\n isMediumOrAbove &&\n css`\n ${StyledSearchButton} {\n border-radius: calc(\n ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}\n );\n height: ${maxCollapsedSize};\n width: ${maxCollapsedSize};\n padding: 0;\n\n > :not(:first-child) {\n display: none;\n }\n }\n\n input {\n padding: 0;\n max-width: 0;\n overflow: hidden;\n }\n\n ${StyledCancelButton} {\n display: none;\n }\n `}\n }\n `;\n }\n);\n\nStyledSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchDecoration = styled.div(({ theme }) => {\n return css`\n width: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--background-color);\n color: rgba(255, 255, 255, 0.7);\n margin: 0 auto;\n `;\n});\n\nStyledAppShellSearchDecoration.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchButton = styled(BareButton)`\n width: 100%;\n &:focus {\n ${StyledAppShellSearchDecoration} {\n outline: none;\n box-shadow: inset ${props => props.theme.base.shadow['focus-inverted']};\n }\n }\n`;\n\nStyledAppShellSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {\n return css`\n padding: ${base.spacing};\n `;\n});\n\nStyledAppshellSearchContainer.defaultProps = defaultThemeProp;\n"]}

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

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

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

@@ -7,7 +7,7 @@ import Flex from '../Flex';
 import Icon, { registerIcon } from '../Icon';
 import * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';
 import Text from '../Text';
-import { useDirection, useI18n, useTheme } from '../../hooks';
+import { useDirection, useElement, useI18n, useOuterEvent, useTheme } from '../../hooks';
 import Configuration from '../Configuration';
 import { tryCatch } from '../../utils';
 import AppShellContext from './AppShellContext';
@@ -16,6 +16,7 @@ registerIcon(arrowLeftIcon);
 export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }) => {
     const { focusedImperatively } = useContext(AppShellContext);
     const returnFocusRef = useRef();
+    const [drawerEl, setDrawerEl] = useElement();
     const theme = useTheme();
     const backButtonRef = useRef(null);
     const appShellBg = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
@@ -33,6 +34,9 @@ export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setD
     };
     const { ltr, rtl } = useDirection();
     const t = useI18n();
+    useOuterEvent('click', [drawerEl], () => {
+        setDrawerOpen(false);
+    });
     return (_jsx(Configuration, { theme: appShellTheme, children: _jsxs(Drawer, { as: StyledDrawerWrapper, position: 'fixed', placement: 'left', open: drawerOpen, nullWhenClosed: true, onBeforeOpen: () => {
                 returnFocusRef.current = document.activeElement ?? undefined;
             }, onAfterOpen: () => {
@@ -44,6 +48,6 @@ export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setD
             }, onAfterClose: () => {
                 onDrawerClose?.();
                 returnFocusRef.current?.focus();
-            }, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [rtl && _jsx(Text, { children: header }), _jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: 'arrow-left' }) }), ltr && _jsx(Text, { children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, children: content })] }) }));
+            }, ref: setDrawerEl, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [rtl && _jsx(Text, { children: header }), _jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: 'arrow-left' }) }), ltr && _jsx(Text, { children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, children: content })] }) }));
 };
 //# sourceMappingURL=Drawer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAa,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;~~AAC9D~~,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,aAAa,CAAC,CAAC;AAW5B,eAAe,CAAC,EACd,OAAO,EACP,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,aAAa,EACG,EAAE,EAAE;IACpB,MAAM,EAAE,mBAAmB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5D,MAAM,cAAc,GAAG,MAAM,EAAe,CAAC;IAC7C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IACF,MAAM,aAAa,GAAG;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,oBAAoB,EAAE,UAAU;gBAChC,kBAAkB,EAAE,0BAA0B;gBAC9C,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;aAC1C;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;aAC3C;SACF;KACF,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACpC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,aAAa,YACjC,MAAC,MAAM,IACL,EAAE,EAAE,mBAAmB,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,UAAU,EAChB,cAAc,QACd,YAAY,EAAE,GAAG,EAAE;gBACjB,cAAc,CAAC,OAAO,GAAI,QAAQ,CAAC,aAA6B,IAAI,SAAS,CAAC;YAChF,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO,EAAE;oBAC7E,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;oBACnC,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;iBAC/B;gBACD,YAAY,EAAE,EAAE,CAAC;YACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,aAAa,EAAE,EAAE,CAAC;gBAClB,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAClC,CAAC,~~aAED~~,MAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/D,GAAG,IAAI,KAAC,IAAI,cAAE,MAAM,GAAQ,EAC7B,KAAC,UAAU,IACT,EAAE,EAAE,sBAAsB,EAC1B,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,gBACvB,CAAC,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,YAErC,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACf,EACZ,GAAG,IAAI,KAAC,IAAI,cAAE,MAAM,GAAQ,IACxB,EACP,KAAC,IAAI,IAAC,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,YACpE,OAAO,GACH,IACA,GACK,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport { useDirection, useI18n, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n StyledDrawerWrapper,\n StyledDrawerBackButton,\n StyledDrawerHeading,\n StyledDrawerListContainer\n} from './Drawer.styles';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n content: ReactNode;\n header: string;\n onDrawerOpen?: () => void;\n onDrawerClose?: () => void;\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n content,\n header,\n onDrawerOpen,\n onDrawerClose,\n drawerOpen,\n setDrawerOpen\n}: DrawerViewProps) => {\n const { focusedImperatively } = useContext(AppShellContext);\n const returnFocusRef = useRef<HTMLElement>();\n const theme = useTheme();\n\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const appShellBg = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const appShellTheme = {\n base: {\n palette: {\n 'primary-background': appShellBg,\n 'foreground-color': 'rgba(255, 255, 255, 0.7)',\n interactive: theme.base.colors.blue.light\n },\n shadow: {\n focus: theme.base.shadow['focus-inverted']\n }\n }\n };\n\n const { ltr, rtl } = useDirection();\n const t = useI18n();\n\n return (\n <Configuration theme={appShellTheme}>\n <Drawer\n as={StyledDrawerWrapper}\n position='fixed'\n placement='left'\n open={drawerOpen}\n nullWhenClosed\n onBeforeOpen={() => {\n returnFocusRef.current = (document.activeElement as HTMLElement) ?? undefined;\n }}\n onAfterOpen={() => {\n if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n focusedImperatively.current = true;\n backButtonRef.current.focus();\n }\n onDrawerOpen?.();\n }}\n onAfterClose={() => {\n onDrawerClose?.();\n returnFocusRef.current?.focus();\n }}\n >\n <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n {rtl && <Text>{header}</Text>}\n <BareButton\n as={StyledDrawerBackButton}\n ref={backButtonRef}\n onClick={() => setDrawerOpen(false)}\n aria-label={t('close_noun', [header])}\n >\n <Icon name='arrow-left' />\n </BareButton>\n {ltr && <Text>{header}</Text>}\n </Flex>\n <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n {content}\n </Flex>\n </Drawer>\n </Configuration>\n );\n};\n"]}
1	+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport { useDirection, useElement, useI18n, useOuterEvent, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n StyledDrawerWrapper,\n StyledDrawerBackButton,\n StyledDrawerHeading,\n StyledDrawerListContainer\n} from './Drawer.styles';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n content: ReactNode;\n header: string;\n onDrawerOpen?: () => void;\n onDrawerClose?: () => void;\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n content,\n header,\n onDrawerOpen,\n onDrawerClose,\n drawerOpen,\n setDrawerOpen\n}: DrawerViewProps) => {\n const { focusedImperatively } = useContext(AppShellContext);\n const returnFocusRef = useRef<HTMLElement>();\n const [drawerEl, setDrawerEl] = useElement();\n const theme = useTheme();\n\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const appShellBg = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const appShellTheme = {\n base: {\n palette: {\n 'primary-background': appShellBg,\n 'foreground-color': 'rgba(255, 255, 255, 0.7)',\n interactive: theme.base.colors.blue.light\n },\n shadow: {\n focus: theme.base.shadow['focus-inverted']\n }\n }\n };\n\n const { ltr, rtl } = useDirection();\n const t = useI18n();\n\n useOuterEvent('click', [drawerEl], () => {\n setDrawerOpen(false);\n });\n\n return (\n <Configuration theme={appShellTheme}>\n <Drawer\n as={StyledDrawerWrapper}\n position='fixed'\n placement='left'\n open={drawerOpen}\n nullWhenClosed\n onBeforeOpen={() => {\n returnFocusRef.current = (document.activeElement as HTMLElement) ?? undefined;\n }}\n onAfterOpen={() => {\n if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n focusedImperatively.current = true;\n backButtonRef.current.focus();\n }\n onDrawerOpen?.();\n }}\n onAfterClose={() => {\n onDrawerClose?.();\n returnFocusRef.current?.focus();\n }}\n ref={setDrawerEl}\n >\n <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n {rtl && <Text>{header}</Text>}\n <BareButton\n as={StyledDrawerBackButton}\n ref={backButtonRef}\n onClick={() => setDrawerOpen(false)}\n aria-label={t('close_noun', [header])}\n >\n <Icon name='arrow-left' />\n </BareButton>\n {ltr && <Text>{header}</Text>}\n </Flex>\n <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n {content}\n </Flex>\n </Drawer>\n </Configuration>\n );\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EASH,MAAM,OAAO,CAAC;AAsBf,OAAO,EACL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;~~AAmF1B~~,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,~~CAqHnD~~,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA6CpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EASH,MAAM,OAAO,CAAC;AAsBf,OAAO,EACL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AAoF1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAsHnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA6CpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -16,6 +16,7 @@ const NavigationMenu = props => {
     const { navOpen } = useContext(AppShellContext);
     const { visual, primary, secondary, href, onClick, items, onDismiss, actions, forwardedRef, ...restProps } = props;
     const uid = useUID();
+    const { navState } = useContext(AppShellContext);
     const [collapsed, setCollapsed] = useState(true);
     const toggleCollapsed = useCallback((e) => {
         e.stopPropagation();
@@ -30,11 +31,11 @@ const NavigationMenu = props => {
     }, menuRef);
     const { end } = useDirection();
     return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: collapsed, ref: menuRef },
-        _jsxs(BareButton, { id: uid, ref: itemRef, tabIndex: collapsed ? 0 : -1, "aria-expanded": !collapsed, "aria-controls": `${uid}-menu`, "aria-label": primary, onClick: toggleCollapsed, children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }),
+        _jsxs(BareButton, { id: uid, ref: itemRef, tabIndex: collapsed ? 0 : -1, "aria-expanded": !collapsed, "aria-controls": `${uid}-menu`, "aria-label": primary, onClick: toggleCollapsed, children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), navState === 'open' && _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }),
         _jsx(NavigationList, { id: `${uid}-menu`, nestedList: true, items: items, collapsed: !navOpen || collapsed })));
 };
 export const NavigationListItem = ({ visual, primary, secondary, href, onClick, items, collapseItems = false, dismissible = false, onDismiss, actions, forwardedRef, isMenuItem, ...restProps }) => {
-    const { navOpen } = useContext(AppShellContext);
+    const { navOpen, navState } = useContext(AppShellContext);
     const t = useI18n();
     const listItemRef = useConsolidatedRef(forwardedRef);
     const hasItems = (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);
@@ -80,7 +81,7 @@ export const NavigationListItem = ({ visual, primary, secondary, href, onClick,
     return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: true },
         _jsx(NavigationListItemWrapper, { tooltipLabel: secondary ? `${primary} ${secondary}` : primary, label: primary, childElementRef: listItemRef, items: actions || items || caseItems, children: _jsxs(Component, { ...compProps, ref: listItemRef, ...(navOpen && isMenuItem
                     ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }
-                    : {}), children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), (hasItems || actions) && _jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon })] }) }),
+                    : {}), children: [visual, secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), (hasItems || actions) && navState === 'open' && (_jsx(Icon, { name: `caret-${end}`, as: StyledAppShellNavIcon }))] }) }),
         dismissible && navOpen && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
         hasItems && (
         // eslint-disable-next-line @typescript-eslint/no-use-before-define

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ElementType,\n FC,\n isValidElement,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n useTheme,\n useArrows,\n useConsolidatedRef,\n useDirection,\n useUID,\n useI18n,\n useEscape\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport Link from '../Link';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport {\n NavListItemProps,\n NavListItemWrapperProps,\n NavListProps,\n NavMenuProps\n} from './AppShell.types';\nimport {\n StyledNavList,\n StyledNestedNavList,\n StyledAppShellNavIcon,\n StyledNavListItem,\n StyledCaseClose\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\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 [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 tabIndex={collapsed ? 0 : -1}\n aria-expanded={!collapsed}\n aria-controls={`${uid}-menu`}\n aria-label={primary}\n onClick={toggleCollapsed}\n >\n {visual}\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 <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />\n </BareButton>\n {/* eslint-disable-next-line @typescript-eslint/no-use-before-define /}\n <NavigationList\n id={`${uid}-menu`}\n nestedList\n items={items}\n collapsed={!navOpen \|\| collapsed}\n />\n </StyledNavListItem>\n );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n visual,\n primary,\n secondary,\n href,\n onClick,\n items,\n collapseItems = false,\n dismissible = false,\n onDismiss,\n actions,\n forwardedRef,\n isMenuItem,\n ...restProps\n}) => {\n const { navOpen } = useContext(AppShellContext);\n\n const t = useI18n();\n const listItemRef = useConsolidatedRef(forwardedRef);\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 'aria-label': primary\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\n return (\n <StyledNavListItem {...restProps} key={primary} nestedListCollapsed>\n {/ forwardedRef typed as 'any' due to ambiguity of Component element type /}\n <NavigationListItemWrapper\n tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n label={primary}\n childElementRef={listItemRef}\n items={actions \|\| items \|\| caseItems}\n >\n <Component\n {...compProps}\n ref={listItemRef}\n {...(navOpen && isMenuItem\n ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }\n : {})}\n >\n {visual}\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 {(hasItems \|\| actions) && <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />}\n </Component>\n </NavigationListItemWrapper>\n {dismissible && 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 {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> = ({ items = [], nestedList, id, collapsed }) => {\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(item)) return item;\n\n if (item.items && item.items.length > 0 && navOpen) {\n ItemComponent = NavigationMenu;\n } else {\n ItemComponent = NavigationListItem;\n }\n return <ItemComponent key={item.id \|\| item.primary} isMenuItem={nestedList} {...item} />;\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 {\n ElementType,\n FC,\n isValidElement,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n useTheme,\n useArrows,\n useConsolidatedRef,\n useDirection,\n useUID,\n useI18n,\n useEscape\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport Link from '../Link';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport {\n NavListItemProps,\n NavListItemWrapperProps,\n NavListProps,\n NavMenuProps\n} from './AppShell.types';\nimport {\n StyledNavList,\n StyledNestedNavList,\n StyledAppShellNavIcon,\n StyledNavListItem,\n StyledCaseClose\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\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 tabIndex={collapsed ? 0 : -1}\n aria-expanded={!collapsed}\n aria-controls={`${uid}-menu`}\n aria-label={primary}\n onClick={toggleCollapsed}\n >\n {visual}\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 {navState === 'open' && <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />}\n </BareButton>\n {/* eslint-disable-next-line @typescript-eslint/no-use-before-define /}\n <NavigationList\n id={`${uid}-menu`}\n nestedList\n items={items}\n collapsed={!navOpen \|\| collapsed}\n />\n </StyledNavListItem>\n );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n visual,\n primary,\n secondary,\n href,\n onClick,\n items,\n collapseItems = false,\n dismissible = false,\n onDismiss,\n actions,\n forwardedRef,\n isMenuItem,\n ...restProps\n}) => {\n const { navOpen, navState } = useContext(AppShellContext);\n const t = useI18n();\n const listItemRef = useConsolidatedRef(forwardedRef);\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 'aria-label': primary\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\n return (\n <StyledNavListItem {...restProps} key={primary} nestedListCollapsed>\n {/ forwardedRef typed as 'any' due to ambiguity of Component element type /}\n <NavigationListItemWrapper\n tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n label={primary}\n childElementRef={listItemRef}\n items={actions \|\| items \|\| caseItems}\n >\n <Component\n {...compProps}\n ref={listItemRef}\n {...(navOpen && isMenuItem\n ? { tabIndex: -1, role: 'menuitem', 'aria-label': primary }\n : {})}\n >\n {visual}\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 {(hasItems \|\| actions) && navState === 'open' && (\n <Icon name={`caret-${end}`} as={StyledAppShellNavIcon} />\n )}\n </Component>\n </NavigationListItemWrapper>\n {dismissible && 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 {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> = ({ items = [], nestedList, id, collapsed }) => {\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(item)) return item;\n\n if (item.items && item.items.length > 0 && navOpen) {\n ItemComponent = NavigationMenu;\n } else {\n ItemComponent = NavigationListItem;\n }\n return <ItemComponent key={item.id \|\| item.primary} isMenuItem={nestedList} {...item} />;\n })}\n </Component>\n );\n};\n\nexport default NavigationList;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2C,MAAM,OAAO,CAAC;~~AAWpE~~,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;~~AA+B3D~~,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,~~CAqHhD~~,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA2C,MAAM,OAAO,CAAC;AAYpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAsC3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA8KhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -8,8 +8,10 @@ import Popover from '../Popover';
 import Menu from '../Menu';
 import { StyledMenuListContainer } from '../Menu/Menu.styles';
 import { defaultThemeProp } from '../../theme';
+import { calculateFontSize } from '../../styles';
 import AppShellContext from './AppShellContext';
 const StyledNavigationPopover = styled.div(({ theme }) => {
+    const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;
     return css `
     background-color: ${theme.components['app-shell'].nav['background-color']};
     &,
@@ -19,6 +21,12 @@ const StyledNavigationPopover = styled.div(({ theme }) => {
       header {
         color: ${theme.base.palette.light};
         border-bottom: none;
+        opacity: 0.7;
+        h2 {
+          font-weight: ${theme.base['font-weight']['semi-bold']};
+          font-size: ${headingFontSize};
+        }
       }
     }
@@ -37,19 +45,38 @@ const StyledNavigationPopover = styled.div(({ theme }) => {
 StyledNavigationPopover.defaultProps = defaultThemeProp;
 const ListItemWrapper = props => {
     const { children, childElementRef, label, tooltipLabel, items = [], content, onMenuToggle } = props;
-    const { navOpen } = useContext(AppShellContext);
+    const { navOpen, collapsedHoverMenus } = useContext(AppShellContext);
     const popoverRef = useRef(null);
     const [popoverOpen, setPopoverOpen] = useState(false);
     const { end } = useDirection();
+    const mousedOverMenu = useRef(false);
+    const hidePopoverTimeout = useRef();
     const focusWithin = useFocusWithin([popoverRef, childElementRef]);
     const prevFocusWithin = usePrevious(focusWithin);
-    const closePopover = () => {
+    const closePopover = (focusChildEl = true) => {
         if (popoverOpen) {
             setPopoverOpen(false);
-            childElementRef.current?.focus();
+            if (focusChildEl) {
+                childElementRef.current?.focus();
+            }
+            if (hidePopoverTimeout.current) {
+                clearTimeout(hidePopoverTimeout.current);
+                hidePopoverTimeout.current = null;
+            }
+        }
+    };
+    const onMouseEnterContent = () => {
+        if (collapsedHoverMenus) {
+            mousedOverMenu.current = true;
+        }
+    };
+    const onMouseLeaveContent = () => {
+        if (mousedOverMenu.current && collapsedHoverMenus) {
+            mousedOverMenu.current = false;
+            closePopover();
         }
     };
-    useOuterEvent('click', [popoverRef], closePopover);
+    useOuterEvent('click', [popoverRef], () => closePopover());
     useEffect(() => {
         const onClick = (e) => {
             if ((items.length || content) && !navOpen) {
@@ -66,13 +93,43 @@ const ListItemWrapper = props => {
                 setPopoverOpen(true);
             }
         };
+        const onMouseOut = (e) => {
+            if (hidePopoverTimeout.current) {
+                clearTimeout(hidePopoverTimeout.current);
+                hidePopoverTimeout.current = null;
+            }
+            const tag = e.relatedTarget.tagName;
+            // If the mouse is mousing out from this nav item onto another nav item
+            if (['A', 'BUTTON', 'FORM'].includes(tag)) {
+                closePopover(false);
+            }
+            else {
+                hidePopoverTimeout.current = window.setTimeout(() => {
+                    if (!mousedOverMenu.current) {
+                        closePopover(false);
+                    }
+                }, 1000);
+            }
+        };
         childElementRef.current?.addEventListener('click', onClick);
         childElementRef.current?.addEventListener('keydown', onKeyDown);
+        if (collapsedHoverMenus) {
+            childElementRef.current?.addEventListener('mouseenter', onClick);
+            childElementRef.current?.addEventListener('mouseleave', onMouseOut);
+        }
         return () => {
             childElementRef.current?.removeEventListener('click', onClick);
             childElementRef.current?.removeEventListener('keydown', onKeyDown);
+            if (collapsedHoverMenus) {
+                childElementRef.current?.removeEventListener('mouseenter', onClick);
+                childElementRef.current?.removeEventListener('mouseleave', onMouseOut);
+            }
+            if (hidePopoverTimeout.current) {
+                clearTimeout(hidePopoverTimeout.current);
+                hidePopoverTimeout.current = null;
+            }
         };
-    }, [items, content, navOpen]);
+    }, [items, content, navOpen, closePopover, collapsedHoverMenus]);
     useEffect(() => {
         onMenuToggle?.(popoverOpen ? 'open' : 'close');
     }, [popoverOpen]);
@@ -81,9 +138,9 @@ const ListItemWrapper = props => {
             setPopoverOpen(false);
         }
     }, [focusWithin, prevFocusWithin]);
-    useEscape(closePopover, childElementRef, [childElementRef]);
-    useEscape(closePopover, popoverRef, [popoverRef]);
-    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && (_jsx(Tooltip, { target: childElementRef.current, placement: end, showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childElementRef.current, placement: `${end}-start`, ref: popoverRef, as: StyledNavigationPopover, arrow: true, children: content || (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childElementRef.current ?? undefined, scrollAt: 99, items: items.map(item => {
+    useEscape(() => closePopover(), childElementRef, [childElementRef]);
+    useEscape(() => closePopover(), popoverRef, [popoverRef]);
+    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && (_jsx(Tooltip, { target: childElementRef.current, placement: end, showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childElementRef.current, placement: `${end}-start`, ref: popoverRef, as: StyledNavigationPopover, arrow: true, children: content ? (_jsx("div", { onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent, children: content })) : (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childElementRef.current ?? undefined, scrollAt: 99, items: items.map(item => {
                                 return {
                                     id: (item.primary || item.text),
                                     primary: (item.primary || item.text),
@@ -94,7 +151,7 @@ const ListItemWrapper = props => {
                                         setPopoverOpen(false);
                                     }
                                 };
-                            }), header: _jsx(Text, { variant: 'h2', children: label }) })) }))] }))] }));
+                            }), header: _jsx(Text, { variant: 'h2', children: label }), onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent })) }))] }))] }));
 };
 export default ListItemWrapper;
 //# sourceMappingURL=NavigationListItemWrapper.js.map

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":"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","sourcesContent":["import { FC, useContext, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useFocusWithin, useOuterEvent, usePrevious } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\n\nimport { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.components['app-shell'].nav['background-color']};\n &,\n ${StyledMenuListContainer} {\n background-color: ${theme.components['app-shell'].nav['background-color']};\n\n header {\n color: ${theme.base.palette.light};\n border-bottom: none;\n }\n }\n\n ${StyledMenuListContainer} li {\n color: rgba(255, 255, 255, 0.7);\n background-color: transparent;\n\n &:hover,\n &[data-current='true'] {\n color: #ffffff;\n background-color: rgba(255, 255, 255, 0.05);\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 } = useContext(AppShellContext);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [popoverOpen, setPopoverOpen] = useState(false);\n const { end } = useDirection();\n\n const focusWithin = useFocusWithin([popoverRef, childElementRef]);\n const prevFocusWithin = usePrevious(focusWithin);\n\n const closePopover = () => {\n if (popoverOpen) {\n setPopoverOpen(false);\n childElementRef.current?.focus();\n }\n };\n\n useOuterEvent('click', [popoverRef], closePopover);\n\n useEffect(() => {\n const onClick = (e: Event) => {\n if ((items.length \|\| content) && !navOpen) {\n e.stopPropagation();\n e.preventDefault();\n setPopoverOpen(true);\n }\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Tab' && !content) {\n setPopoverOpen(false);\n }\n if (e.key === 'Enter' && items.length) {\n setPopoverOpen(true);\n }\n };\n\n childElementRef.current?.addEventListener('click', onClick);\n childElementRef.current?.addEventListener('keydown', onKeyDown);\n return () => {\n childElementRef.current?.removeEventListener('click', onClick);\n childElementRef.current?.removeEventListener('keydown', onKeyDown);\n };\n }, [items, content, navOpen]);\n\n useEffect(() => {\n onMenuToggle?.(popoverOpen ? 'open' : 'close');\n }, [popoverOpen]);\n\n useEffect(() => {\n if (!focusWithin && prevFocusWithin) {\n setPopoverOpen(false);\n }\n }, [focusWithin, prevFocusWithin]);\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 >\n {content \|\| (\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 />\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 { FC, useContext, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useFocusWithin, useOuterEvent, usePrevious } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nimport { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n return css`\n background-color: ${theme.components['app-shell'].nav['background-color']};\n &,\n ${StyledMenuListContainer} {\n background-color: ${theme.components['app-shell'].nav['background-color']};\n\n header {\n color: ${theme.base.palette.light};\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: rgba(255, 255, 255, 0.7);\n background-color: transparent;\n\n &:hover,\n &[data-current='true'] {\n color: #ffffff;\n background-color: rgba(255, 255, 255, 0.05);\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 } = 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 const focusWithin = useFocusWithin([popoverRef, childElementRef]);\n const prevFocusWithin = usePrevious(focusWithin);\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) && !navOpen) {\n e.stopPropagation();\n e.preventDefault();\n setPopoverOpen(true);\n }\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Tab' && !content) {\n setPopoverOpen(false);\n }\n if (e.key === 'Enter' && items.length) {\n setPopoverOpen(true);\n }\n };\n\n const onMouseOut = (e: MouseEvent) => {\n if (hidePopoverTimeout.current) {\n clearTimeout(hidePopoverTimeout.current);\n hidePopoverTimeout.current = null;\n }\n const tag = (e.relatedTarget as HTMLElement).tagName;\n\n // If the mouse is mousing out from this nav item onto another nav item\n if (['A', 'BUTTON', 'FORM'].includes(tag)) {\n closePopover(false);\n } else {\n hidePopoverTimeout.current = window.setTimeout(() => {\n if (!mousedOverMenu.current) {\n closePopover(false);\n }\n }, 1000);\n }\n };\n\n childElementRef.current?.addEventListener('click', onClick);\n childElementRef.current?.addEventListener('keydown', onKeyDown);\n if (collapsedHoverMenus) {\n childElementRef.current?.addEventListener('mouseenter', onClick);\n childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n }\n return () => {\n childElementRef.current?.removeEventListener('click', onClick);\n childElementRef.current?.removeEventListener('keydown', onKeyDown);\n if (collapsedHoverMenus) {\n childElementRef.current?.removeEventListener('mouseenter', onClick);\n childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n }\n if (hidePopoverTimeout.current) {\n clearTimeout(hidePopoverTimeout.current);\n hidePopoverTimeout.current = null;\n }\n };\n }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n useEffect(() => {\n onMenuToggle?.(popoverOpen ? 'open' : 'close');\n }, [popoverOpen]);\n\n useEffect(() => {\n if (!focusWithin && prevFocusWithin) {\n setPopoverOpen(false);\n }\n }, [focusWithin, prevFocusWithin]);\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 >\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/Button/BareRoleButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BareRoleButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,~~yGAAe~~,CAAC;~~AAEjD~~,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"BareRoleButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Button/BareRoleButton.js CHANGED Viewed

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-export const StyledBareRoleButton = styled.div ``;
+export const StyledBareRoleButton = styled.div `
+  cursor: pointer;
+`;
 const BareRoleButton = forwardRef(({ children, onClick, onKeyDown, ...restProps }, ref) => {
     return (_jsx(StyledBareRoleButton, { ...restProps, tabIndex: 0, role: 'button', onKeyDown: (e) => {
             if ((e.key === ' ' || e.key === 'Enter') && e.target === e.currentTarget) {

package/lib/components/Button/BareRoleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BareRoleButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,~~EAAE,~~CAAC;~~AAEjD~~,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB,EACnE,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;gBACvE,CAAC,CAAC,aAAgC,CAAC,KAAK,EAAE,CAAC;aAC7C;YAED,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;YACzC,IACE,CAAC,CAAC,MAAM,YAAY,OAAO;gBAC3B,mEAAmE;gBACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,CAAC,CAAC,aAAa;gBAEjF,OAAO;YAET,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, MouseEvent, KeyboardEvent, ReactNode, FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface BareRoleButtonProps extends BaseProps {\n children: ReactNode;\n onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBareRoleButton = styled.div~~``;\~~n\nconst BareRoleButton: FunctionComponent<BareRoleButtonProps & ForwardProps> = forwardRef(\n (\n { children, onClick, onKeyDown, ...restProps }: BareRoleButtonProps,\n ref: BareRoleButtonProps['ref']\n ) => {\n return (\n <StyledBareRoleButton\n {...restProps}\n tabIndex={0}\n role='button'\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n if ((e.key === ' ' \|\| e.key === 'Enter') && e.target === e.currentTarget) {\n (e.currentTarget as HTMLDivElement).click();\n }\n\n return onKeyDown?.(e);\n }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof Element &&\n // Ignore clicks on other interactive elements within this element.\n e.target.closest(\"button, a, [role='button'], [role='link']\") !== e.currentTarget\n )\n return;\n\n return onClick?.(e);\n }}\n ref={ref}\n >\n {children}\n </StyledBareRoleButton>\n );\n }\n);\n\nexport default BareRoleButton;\n"]}
1	+ {"version":3,"file":"BareRoleButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB,EACnE,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;gBACvE,CAAC,CAAC,aAAgC,CAAC,KAAK,EAAE,CAAC;aAC7C;YAED,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;YACzC,IACE,CAAC,CAAC,MAAM,YAAY,OAAO;gBAC3B,mEAAmE;gBACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,CAAC,CAAC,aAAa;gBAEjF,OAAO;YAET,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, MouseEvent, KeyboardEvent, ReactNode, FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface BareRoleButtonProps extends BaseProps {\n children: ReactNode;\n onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBareRoleButton = styled.div`\n cursor: pointer;\n`;\n\nconst BareRoleButton: FunctionComponent<BareRoleButtonProps & ForwardProps> = forwardRef(\n (\n { children, onClick, onKeyDown, ...restProps }: BareRoleButtonProps,\n ref: BareRoleButtonProps['ref']\n ) => {\n return (\n <StyledBareRoleButton\n {...restProps}\n tabIndex={0}\n role='button'\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n if ((e.key === ' ' \|\| e.key === 'Enter') && e.target === e.currentTarget) {\n (e.currentTarget as HTMLDivElement).click();\n }\n\n return onKeyDown?.(e);\n }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof Element &&\n // Ignore clicks on other interactive elements within this element.\n e.target.closest(\"button, a, [role='button'], [role='link']\") !== e.currentTarget\n )\n return;\n\n return onClick?.(e);\n }}\n ref={ref}\n >\n {children}\n </StyledBareRoleButton>\n );\n }\n);\n\nexport default BareRoleButton;\n"]}

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ChangeEvent, FC } from 'react';
 import { FormControlProps } from '../FormControl';
 import { RadioCheckProps } from '../RadioCheck';
 import { ForwardProps, NoChildrenProp } from '../../types';
@@ -27,6 +27,8 @@ export interface CheckboxProps extends NoChildrenProp {
     indeterminate?: RadioCheckProps['indeterminate'];
     /** Set visual state based on a validation state. */
     status?: FormControlProps['status'];
+    /** Callback invoked when this particular checkbox changes selection. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const CB: FC<CheckboxProps & ForwardProps>;
 export default CB;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;~~AAE5C~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;~~CACrC~~;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAIxC,CAAC;AAKF,eAAe,EAAE,CAAC"}
1	+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAIxC,CAAC;AAKF,eAAe,EAAE,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,~~EAAM~~,UAAU,EAAO,MAAM,OAAO,CAAC;~~AAG5C~~,OAAO,UAA+B,MAAM,eAAe,CAAC;~~AA8B5D~~,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface CheckboxProps extends NoChildrenProp {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Sets checked prop via onChange when using as controlled component. /\n checked?: RadioCheckProps['checked'];\n /* Initialize checked prop when using as uncontrolled component. /\n defaultChecked?: RadioCheckProps['defaultChecked'];\n /\n Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n * @default false\n /\n indeterminate?: RadioCheckProps['indeterminate'];\n /* Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n <RadioCheck {...props} type='checkbox' ref={ref} />\n )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}
1	+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAO,MAAM,OAAO,CAAC;AAGzD,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgC5D,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { ChangeEvent, FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface CheckboxProps extends NoChildrenProp {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Sets checked prop via onChange when using as controlled component. /\n checked?: RadioCheckProps['checked'];\n /* Initialize checked prop when using as uncontrolled component. /\n defaultChecked?: RadioCheckProps['defaultChecked'];\n /\n Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n * @default false\n /\n indeterminate?: RadioCheckProps['indeterminate'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Callback invoked when this particular checkbox changes selection. */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n <RadioCheck {...props} type='checkbox' ref={ref} />\n )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}

package/lib/components/DateTime/DurationDisplay.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useI18n } from '../../hooks';
+import { useConfiguration } from '../../hooks';
 import Text from '../Text';
 import { formatDuration } from './utils';
 const DurationDisplay = forwardRef(({ value, significantUnits = 4, ...restProps }, ref) => {
-    const t = useI18n();
-    return (_jsx(Text, { ref: ref, ...restProps, children: typeof value === 'number' ? (formatDuration(value, { t, significantUnits })) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" })) }));
+    const { locale } = useConfiguration();
+    return (_jsx(Text, { ref: ref, ...restProps, children: typeof value === 'number' ? (formatDuration(value, { locale, significantUnits })) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" })) }));
 });
 export default DurationDisplay;
 //# sourceMappingURL=DurationDisplay.js.map

package/lib/components/DateTime/DurationDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DurationDisplay.js","sourceRoot":"","sources":["../../../src/components/DateTime/DurationDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,~~OAAO~~,EAAE,MAAM,aAAa,CAAC;~~AAEtC~~,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAazC,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EAAE,KAAK,EAAE,gBAAgB,GAAG,CAAC,EAAE,GAAG,SAAS,EAAyC,EACpF,GAAgC,EAChC,EAAE;IACF,MAAM,~~CAAC~~,GAAG,~~OAAO~~,EAAE,CAAC;~~IAEpB~~,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,cAAc,CAAC,KAAK,EAAE,EAAE,~~CAAC~~,EAAE,gBAAgB,EAAE,CAAC,~~CAC/C~~,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { ~~useI18n~~ } from '../../hooks';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Text from '../Text';\n\nimport { formatDuration } from './utils';\n\nexport interface DurationDisplayProps extends BaseProps {\n /** Number of milliseconds value for controlled input. /\n value?: number;\n /* Determines number of units to be displayed.\n * @default 4\n /\n significantUnits?: 4 \| 3 \| 2 \| 1;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst DurationDisplay: FunctionComponent<DurationDisplayProps & ForwardProps> = forwardRef(\n (\n { value, significantUnits = 4, ...restProps }: PropsWithoutRef<DurationDisplayProps>,\n ref: DurationDisplayProps['ref']\n ) => {\n const t = ~~useI18n~~();\n\n return (\n <Text ref={ref} {...restProps}>\n {typeof value === 'number' ? (\n formatDuration(value, { t, significantUnits })\n ) : (\n <span aria-hidden='true'>––</span>\n )}\n </Text>\n );\n }\n);\n\nexport default DurationDisplay;\n"]}
1	+ {"version":3,"file":"DurationDisplay.js","sourceRoot":"","sources":["../../../src/components/DateTime/DurationDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAazC,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EAAE,KAAK,EAAE,gBAAgB,GAAG,CAAC,EAAE,GAAG,SAAS,EAAyC,EACpF,GAAgC,EAChC,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,cAAc,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,CACpD,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { useConfiguration } from '../../hooks';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Text from '../Text';\n\nimport { formatDuration } from './utils';\n\nexport interface DurationDisplayProps extends BaseProps {\n /** Number of milliseconds value for controlled input. /\n value?: number;\n /* Determines number of units to be displayed.\n * @default 4\n /\n significantUnits?: 4 \| 3 \| 2 \| 1;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst DurationDisplay: FunctionComponent<DurationDisplayProps & ForwardProps> = forwardRef(\n (\n { value, significantUnits = 4, ...restProps }: PropsWithoutRef<DurationDisplayProps>,\n ref: DurationDisplayProps['ref']\n ) => {\n const { locale } = useConfiguration();\n\n return (\n <Text ref={ref} {...restProps}>\n {typeof value === 'number' ? (\n formatDuration(value, { locale, significantUnits })\n ) : (\n <span aria-hidden='true'>––</span>\n )}\n </Text>\n );\n }\n);\n\nexport default DurationDisplay;\n"]}

package/lib/components/DateTime/Input/DateInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMjB,SAAS,EACT,QAAQ,EACR,cAAc,EAGf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AACxE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAgB7E,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAsCF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,~~CA4R~~/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMjB,SAAS,EACT,QAAQ,EACR,cAAc,EAGf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AACxE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAgB7E,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAsCF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA8R/D,CAAC;AAEF,eAAe,SAAS,CAAC"}