npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.1.9 → 10.0.0-build.2.1 - Mend

@pega/cosmos-react-core 10.0.0-build.1.9 → 10.0.0-build.2.1

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 (99) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,~~EACzB~~,~~wBAAwB,EACzB,~~MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,YAAY,CAAC,aAAa,CAAC,CAAC;~~AAY5B~~,eAAe,CAAC,EACd,OAAO,EACP,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,aAAa,~~EACb~~,~~SAAS,EACO,~~EAAE,EAAE;IACpB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,cAAc,GAAG,MAAM,EAAe,CAAC;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,SAAS,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAE1B,SAAS,CACP,GAAG,EAAE;QACH,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,QAAQ,EACR,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,YAAY,CAAC,SAAS,CAAC,CAAC;IAExB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,QAAQ,GAAG;QACf,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,oBAAoB,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;gBACjE,kBAAkB,EAAE,UAAU;gBAC9B,WAAW;gBACX,MAAM;aACP;SACF;KACF,CAAC;IAEF,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,cAAc,CAAC,OAAO,GAAI,gBAAgB,EAAkB,IAAI,SAAS,CAAC;IAC5E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,CACpB,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,qBACI,QAAQ,EACzB,EAAE,EAAE,mBAAmB,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,~~SAAS,EACpB,SAAS,EAAE,~~KAAK,EAChB,IAAI,EAAE,UAAU,EAChB,cAAc,QACd,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,aAAa,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,EAAE,CAAC;gBAC9E,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACnC,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAChC,CAAC;YACD,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YACjB,aAAa,EAAE,EAAE,CAAC;YAClB,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAClC,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACxC,GAAG,EAAE,SAAS,aAEd,MAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC5E,KAAC,MAAM,IACL,GAAG,EAAE,aAAa,EAClB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACnC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,gBACL,CAAC,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,YAErC,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,GAAI,GACzB,EACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,QAAQ,YAC5B,MAAM,GACF,IACF,EACP,KAAC,IAAI,IACH,EAAE,EAAE,yBAAyB,EAC7B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,qBACjB,QAAQ,YAExB,OAAO,GACH,IACA,CACV,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,IAAI,SAAS,YAChE,~~SAAS,CAAC,CAAC,CAAC,CACX,KAAC,wBAAwB,kBAAa,SAAS,YAAG,~~aAAa,~~GAA4B~~,~~CAC5F,CAAC,CAAC,CAAC,CACF,aAAa,CACd,GACa,~~CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useContext, useLayoutEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport {\n useConsolidatedRef,\n useDirection,\n useElement,\n useEscape,\n useFocusTrap,\n useI18n,\n useTheme,\n useUID\n} from '../../hooks';\nimport { getActiveElement } from '../../utils';\nimport { isSolidColor } from '../../styles';\nimport Button from '../Button';\nimport Configuration from '../Configuration';\n\nimport AppShellContext from './AppShellContext';\nimport {\n StyledDrawerWrapper,\n StyledDrawerHeading,\n StyledDrawerListContainer~~,\n StyledTopNavDrawerOffset~~\n} from './Drawer.styles';\nimport { navContrastColors } from './style-utils';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n content: ReactNode;\n header: string;\n onDrawerOpen?: () => void;\n onDrawerClose?: () => void;\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n ~~topOffset: string;\n~~}\n\nexport default ({\n content,\n header,\n onDrawerOpen,\n onDrawerClose,\n drawerOpen,\n setDrawerOpen~~,\n topOffset~~\n}: DrawerViewProps) => {\n const t = useI18n();\n const theme = useTheme();\n const { focusedImperatively } = useContext(AppShellContext);\n const { start } = useDirection();\n const returnFocusRef = useRef<HTMLElement>();\n const [drawerEl, setDrawerEl] = useElement<HTMLDivElement>();\n const drawerRef = useConsolidatedRef(setDrawerEl);\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const headerId = useUID();\n\n useEscape(\n () => {\n setDrawerOpen(false);\n },\n drawerEl,\n [drawerEl]\n );\n\n useFocusTrap(drawerRef);\n\n const { foreground, interactive, urgent } = navContrastColors(theme);\n const navBg = theme.components['app-shell'].nav.background;\n const navTheme = {\n base: {\n palette: {\n 'primary-background': isSolidColor(navBg) ? navBg : 'transparent',\n 'foreground-color': foreground,\n interactive,\n urgent\n }\n }\n };\n\n // Using layout effect to capture the focused element prior to drawer elements taking focus.\n useLayoutEffect(() => {\n returnFocusRef.current = (getActiveElement() as HTMLElement) ?? undefined;\n }, []);\n\n const drawerContent = (\n <Drawer\n role='dialog'\n aria-labelledby={headerId}\n as={StyledDrawerWrapper}\n position='fixed'\n ~~topOffset={topOffset}\n~~ placement={start}\n open={drawerOpen}\n nullWhenClosed\n onAfterOpen={() => {\n if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {\n focusedImperatively.current = true;\n backButtonRef.current.focus();\n }\n onDrawerOpen?.();\n }}\n onAfterClose={() => {\n onDrawerClose?.();\n returnFocusRef.current?.focus();\n }}\n onOuterClick={() => setDrawerOpen(false)}\n ref={drawerRef}\n >\n <Flex as={StyledDrawerHeading} role='none' container={{ alignItems: 'center' }}>\n <Button\n ref={backButtonRef}\n icon\n variant='simple'\n onClick={() => setDrawerOpen(false)}\n label={t('close')}\n aria-label={t('close_noun', [header])}\n >\n <Icon name={`arrow-${start}`} />\n </Button>\n <Text variant='h2' id={headerId}>\n {header}\n </Text>\n </Flex>\n <Flex\n as={StyledDrawerListContainer}\n container={{ direction: 'column' }}\n aria-labelledby={headerId}\n >\n {content}\n </Flex>\n </Drawer>\n );\n\n return (\n <Configuration theme={navTheme} portalTarget={drawerEl ?? undefined}>\n {~~topOffset ? (\n <StyledTopNavDrawerOffset $topOffset={topOffset}>{~~drawerContent}~~</StyledTopNavDrawerOffset>\n ) : (~~\n ~~drawerContent\n )}\n~~ </Configuration>\n );\n};\n"]}
1	+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useLayoutEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport {\n useConsolidatedRef,\n useDirection,\n useElement,\n useEscape,\n useFocusTrap,\n useI18n,\n useTheme,\n useUID\n} from '../../hooks';\nimport { getActiveElement } from '../../utils';\nimport { isSolidColor } from '../../styles';\nimport Button from '../Button';\nimport Configuration from '../Configuration';\n\nimport AppShellContext from './AppShellContext';\nimport {\n StyledDrawerWrapper,\n StyledDrawerHeading,\n StyledDrawerListContainer\n} from './Drawer.styles';\nimport { navContrastColors } from './style-utils';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n content: ReactNode;\n header: string;\n onDrawerOpen?: () => void;\n onDrawerClose?: () => void;\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n content,\n header,\n onDrawerOpen,\n onDrawerClose,\n drawerOpen,\n setDrawerOpen\n}: DrawerViewProps) => {\n const t = useI18n();\n const theme = useTheme();\n const { focusedImperatively } = useContext(AppShellContext);\n const { start } = useDirection();\n const returnFocusRef = useRef<HTMLElement>();\n const [drawerEl, setDrawerEl] = useElement<HTMLDivElement>();\n const drawerRef = useConsolidatedRef(setDrawerEl);\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const headerId = useUID();\n\n useEscape(\n () => {\n setDrawerOpen(false);\n },\n drawerEl,\n [drawerEl]\n );\n\n useFocusTrap(drawerRef);\n\n const { foreground, interactive, urgent } = navContrastColors(theme);\n const navBg = theme.components['app-shell'].nav.background;\n const navTheme = {\n base: {\n palette: {\n 'primary-background': isSolidColor(navBg) ? navBg : 'transparent',\n 'foreground-color': foreground,\n interactive,\n urgent\n }\n }\n };\n\n // Using layout effect to capture the focused element prior to drawer elements taking focus.\n useLayoutEffect(() => {\n returnFocusRef.current = (getActiveElement() as HTMLElement) ?? undefined;\n }, []);\n\n const drawerContent = (\n <Drawer\n role='dialog'\n aria-labelledby={headerId}\n as={StyledDrawerWrapper}\n position='fixed'\n placement={start}\n open={drawerOpen}\n nullWhenClosed\n onAfterOpen={() => {\n if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {\n focusedImperatively.current = true;\n backButtonRef.current.focus();\n }\n onDrawerOpen?.();\n }}\n onAfterClose={() => {\n onDrawerClose?.();\n returnFocusRef.current?.focus();\n }}\n onOuterClick={() => setDrawerOpen(false)}\n ref={drawerRef}\n >\n <Flex as={StyledDrawerHeading} role='none' container={{ alignItems: 'center' }}>\n <Button\n ref={backButtonRef}\n icon\n variant='simple'\n onClick={() => setDrawerOpen(false)}\n label={t('close')}\n aria-label={t('close_noun', [header])}\n >\n <Icon name={`arrow-${start}`} />\n </Button>\n <Text variant='h2' id={headerId}>\n {header}\n </Text>\n </Flex>\n <Flex\n as={StyledDrawerListContainer}\n container={{ direction: 'column' }}\n aria-labelledby={headerId}\n >\n {content}\n </Flex>\n </Drawer>\n );\n\n return (\n <Configuration theme={navTheme} portalTarget={drawerEl ?? undefined}>\n {drawerContent}\n </Configuration>\n );\n};\n"]}

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

@@ -1,17 +1,5 @@
 import type { DrawerProps } from '../Drawer';
-export declare const StyledDrawerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DrawerProps & {
-    topOffset: string;
-}>> & string;
-/**
- * Fixed-position container that offsets the drawer below the top chrome
- * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
- * The inner Drawer uses position='absolute' relative to this container.
- * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit
- * rounding issues and ensuring the drawer always fills the available height.
- */
-export declare const StyledTopNavDrawerOffset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $topOffset: string;
-}>> & string;
+export declare const StyledDrawerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DrawerProps>> & string;
 export declare const StyledDrawerHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledDrawerList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     displayPins: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB~~;eAAyC~~,~~MAAM;YA6B9E~~,CAAC;~~AAIF;;;;;;GAMG;AACH~~,eAAO,MAAM,~~wBAAwB;gBAA4B,MAAM;YAStE,CAAC;AAIF,eAAO,MAAM,~~mBAAmB,uNAsB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;YAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,iOAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAOlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAMpC,CAAC"}
1	+ {"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB,gPA2B9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,uNAsB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;YAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,iOAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAOlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAMpC,CAAC"}

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

@@ -7,44 +7,28 @@ import { StyledLabel } from '../Label';
 import { StyledForm } from '../MultiStepForm/MultiStepForm';
 import { navOpenWidth } from './AppShell.styles';
 import { navContrastColors } from './style-utils';
-export const StyledDrawerWrapper = styled.div(({ theme, open, topOffset }) => {
+export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
     const { components: { 'app-shell': { nav: { background: navBg } } } } = theme;
     const { foreground, border: borderColor } = navContrastColors(theme);
     return css `
-      display: flex;
-      flex-direction: column;
-      background: ${navBg};
-      width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));
-      height: unset;
-      inset-block: ${topOffset} 0;
-      color: ${foreground};
-      opacity: ${open ? 1 : 0};
-      border-inline-end: ${rem(1)} solid ${borderColor};
+    display: flex;
+    flex-direction: column;
+    background: ${navBg};
+    width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));
+    height: unset;
+    inset-block: var(--appshell-top-offset, 0) var(--appshell-bottom-offset, 0);
+    color: ${foreground};
+    opacity: ${open ? 1 : 0};
+    border-inline-end: ${rem(1)} solid ${borderColor};
-      ${StyledForm},
-      ${StyledLabel},
+    ${StyledForm},
+    ${StyledLabel},
     ${StyledMetaListItem} {
-        color: ${foreground};
-      }
-    `;
+      color: ${foreground};
+    }
+  `;
 });
 StyledDrawerWrapper.defaultProps = defaultThemeProp;
-/**
- * Fixed-position container that offsets the drawer below the top chrome
- * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
- * The inner Drawer uses position='absolute' relative to this container.
- * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit
- * rounding issues and ensuring the drawer always fills the available height.
- */
-export const StyledTopNavDrawerOffset = styled.div(({ $topOffset, theme }) => css `
-    position: fixed;
-    inset-block-start: ${$topOffset};
-    inset-inline-start: 0;
-    inset-block-end: 0;
-    width: ${navOpenWidth};
-    z-index: ${theme.base['z-index'].drawer};
-  `);
-StyledTopNavDrawerOffset.defaultProps = defaultThemeProp;
 export const StyledDrawerHeading = styled.header(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { foreground } = navContrastColors(theme);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,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,MAAM,eAAe,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,~~CAC3C~~,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,~~SAAS,~~EAAE,EAAE~~,EAAE~~;~~IAC7B~~,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;;;~~oBAGM~~,KAAK;~~oBACL~~,YAAY~~;;qBAEX~~,~~SAAS;eACf,~~UAAU;~~iBACR~~,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;~~2BACF~~,GAAG,CAAC,CAAC,CAAC,UAAU,WAAW;;~~QAE9C~~,UAAU;~~QACV~~,WAAW;~~MACb~~,kBAAkB;~~iBACP~~,UAAU;;~~KAEtB~~,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD~~;;;;;;GAMG;AACH~~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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps ~~& { topOffset: string }~~>(\n ({ theme, open, ~~topOffset~~ }) => {\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 display: flex;\n flex-direction: column;\n background: ${navBg};\n width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));\n height: unset;\n inset-block: ~~${topOffset}~~ 0;\n color: ${foreground};\n opacity: ${open ? 1 : 0};\n border-inline-end: ${rem(1)} solid ${borderColor};\n\n ${StyledForm},\n ${StyledLabel},\n ${StyledMetaListItem} {\n color: ${foreground};\n }\n `;\n }\n);\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\n/*\n Fixed-position container that offsets the drawer below the top chrome\n * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.\n * The inner Drawer uses position='absolute' relative to this container.\n * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit\n * rounding issues and ensuring the drawer always fills the available height.\n /\nexport const StyledTopNavDrawerOffset = styled.div<{ $topOffset: string }>(\n ({ $topOffset, theme }) => css`\n position: fixed;\n inset-block-start: ${$topOffset};\n inset-inline-start: 0;\n inset-block-end: 0;\n width: ${navOpenWidth};\n z-index: ${theme.base['z-index'].drawer};\n `\n);\n\nStyledTopNavDrawerOffset.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const { foreground } = navContrastColors(theme);\n\n return css`\n padding: ${theme.base.spacing} calc(2 ${theme.base.spacing});\n line-height: 1;\n\n h2 {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin: 0 auto;\n position: relative;\n left: -0.7rem;\n }\n\n svg {\n font-size: ${fontSize.xxl};\n cursor: pointer;\n color: ${foreground};\n }\n `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const 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-visible {\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 `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(() => {\n return css`\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n const {\n components: {\n 'app-shell': {\n nav: { background: navBg }\n }\n }\n } = theme;\n const { foreground, border: borderColor } = navContrastColors(theme);\n\n return css`\n display: flex;\n flex-direction: column;\n background: ${navBg};\n width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));\n height: unset;\n inset-block: var(--appshell-top-offset, 0) var(--appshell-bottom-offset, 0);\n color: ${foreground};\n opacity: ${open ? 1 : 0};\n border-inline-end: ${rem(1)} solid ${borderColor};\n\n ${StyledForm},\n ${StyledLabel},\n ${StyledMetaListItem} {\n color: ${foreground};\n }\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const { foreground } = navContrastColors(theme);\n\n return css`\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n line-height: 1;\n\n h2 {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin: 0 auto;\n position: relative;\n left: -0.7rem;\n }\n\n svg {\n font-size: ${fontSize.xxl};\n cursor: pointer;\n color: ${foreground};\n }\n `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const 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-visible {\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 `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(() => {\n return css`\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -43,7 +43,7 @@ export const StyledAvatar = styled.div(({ hasBrokenImage, hasSrc, size, shape, c
     return css `
       position: relative;
       flex-shrink: 0;
-      background: ${avatarBackground};
+      background: ${backgroundColor && !(hasSrc && !hasBrokenImage) ? bgColor : avatarBackground};
       color: ${iconColor};
       width: ${sizeRem}rem;
       height: ${sizeRem}rem;

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 { 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 { StyledBareButton } from '../Button/BareButton';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor, calculateForegroundColor } 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: {\n background: avatarBackground,\n 'background-color': avatarBackgroundColor,\n 'foreground-color': avatarForegroundColor\n },\n icon: { 'border-radius-multiplier': borderRadiusMultiplier },\n button: { 'focus-shadow': focusShadow }\n }\n }\n }) => {\n const sizeRem = sizeToRem[size];\n const fontSize = fontSizeToRem[size];\n let bgColor =\n hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor \|\| avatarBackgroundColor;\n if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n bgColor = tryCatch(\n () => readableColor(color),\n () => avatarBackgroundColor\n );\n\n const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n const iconColor = color \|\| calculateForegroundColor(bgColor, avatarForegroundColor);\n\n return css`\n position: relative;\n flex-shrink: 0;\n background: ${avatarBackground};\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 ${StyledBareButton}:focus > & {\n box-shadow: ${focusShadow};\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 if (!name) {\n return '';\n }\n\n if (size === 's') {\n return name[0];\n }\n\n const words = name.split(/\\s+/);\n\n return `${words[0][0] ?? ''}${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: nameProp,\n status,\n onImageError,\n ...restProps\n } = props;\n\n const name = nameProp.trim();\n\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')} ${t(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 { StyledBareButton } from '../Button/BareButton';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor, calculateForegroundColor } 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: {\n background: avatarBackground,\n 'background-color': avatarBackgroundColor,\n 'foreground-color': avatarForegroundColor\n },\n icon: { 'border-radius-multiplier': borderRadiusMultiplier },\n button: { 'focus-shadow': focusShadow }\n }\n }\n }) => {\n const sizeRem = sizeToRem[size];\n const fontSize = fontSizeToRem[size];\n let bgColor =\n hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor \|\| avatarBackgroundColor;\n if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n bgColor = tryCatch(\n () => readableColor(color),\n () => avatarBackgroundColor\n );\n\n const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n const iconColor = color \|\| calculateForegroundColor(bgColor, avatarForegroundColor);\n\n return css`\n position: relative;\n flex-shrink: 0;\n background: ${backgroundColor && !(hasSrc && !hasBrokenImage) ? bgColor : avatarBackground};\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 ${StyledBareButton}:focus > & {\n box-shadow: ${focusShadow};\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 if (!name) {\n return '';\n }\n\n if (size === 's') {\n return name[0];\n }\n\n const words = name.split(/\\s+/);\n\n return `${words[0][0] ?? ''}${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: nameProp,\n status,\n onImageError,\n ...restProps\n } = props;\n\n const name = nameProp.trim();\n\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')} ${t(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/Backdrop/Backdrop.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,cAAc,EAEd,UAAU,EAEX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,UAAU,GAAG;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CACF,CAAC;AAEF,KAAK,yBAAyB,GAAG,iBAAiB,CAChD,aAAa,EACb,MAAM,GAAG,iBAAiB,GAAG,OAAO,GAAG,UAAU,CAClD,CAAC;AASF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aACkC,CAAC,GAAG,CAAC;~~oIAmChE~~,CAAC;;;;AAMH,wBA6FE"}
1	+ {"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,cAAc,EAEd,UAAU,EAEX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,UAAU,GAAG;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CACF,CAAC;AAEF,KAAK,yBAAyB,GAAG,iBAAiB,CAChD,aAAa,EACb,MAAM,GAAG,iBAAiB,GAAG,OAAO,GAAG,UAAU,CAClD,CAAC;AASF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aACkC,CAAC,GAAG,CAAC;oIAoChE,CAAC;;;;AAMH,wBA6FE"}

package/lib/components/Backdrop/Backdrop.js CHANGED Viewed

@@ -21,8 +21,9 @@ export const StyledBackdrop = styled(Flex)(props => {
     position: ${position};
     z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};
     inset-inline: 0;
-    inset-block-start: ${position === 'fixed' ? 'var(--appshell-top-offset, 0rem)' : '0'};
-    inset-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};
+    inset-block-start: ${position === 'fixed' ? 'var(--appshell-hard-top-offset, 0rem)' : '0'};
+    inset-block-end: 0;
+    padding-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};
     border-radius: inherit;
     opacity: ${opacity};
     transition-property: opacity;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow, withTestIds } from '../../utils';\nimport type {\n PropsWithDefaults,\n ExcludeStrict,\n WithAttributes,\n RefElement,\n TestIdProp,\n OmitStrict\n} from '../../types';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement, useTestIds } from '../../hooks';\n\nimport { getBackdropTestIds } from './Backdrop.test-ids';\n\nexport type BackdropProps = WithAttributes<\n 'div',\n TestIdProp & {\n /*\n Opacity of the Backdrop.\n * @default 0.4\n /\n alpha?: number;\n /* Props passed to Flex container. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /\n Toggles visibility of Backdrop.\n * @default false\n /\n open?: boolean;\n /\n Determines the color of the Backdrop.\n * @default 'dark'\n /\n variant?: 'dark' \| 'light';\n /\n Transition speed of Backdrop animation.\n * @default 'medium'\n /\n transitionSpeed?: 'slow' \| 'medium' \| 'fast' \| 'none';\n /\n The position of the Backdrop.\n * @default 'fixed'\n /\n position?: 'absolute' \| 'fixed';\n /* Accepts a callback that gets invoked before opening Backdrop. /\n onBeforeTransitionIn?: () => void;\n /* Accepts a callback that gets invoked after opening Backdrop. /\n onAfterTransitionIn?: () => void;\n /* Accepts a callback that gets invoked before closing Backdrop. /\n onBeforeTransitionOut?: () => void;\n /* Accepts a callback that gets invoked after closing Backdrop /\n onAfterTransitionOut?: () => void;\n }\n>;\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n BackdropProps,\n 'open' \| 'transitionSpeed' \| 'alpha' \| 'position'\n>;\n\nconst transitionSpeedToTheme = {\n slow: 2,\n medium: 1,\n fast: 0.5,\n none: 0\n} as const;\n\nexport const StyledBackdrop = styled(Flex)<\n OmitStrict<BackdropPropsWithDefaults, 'open'> & { opacity: 0 \| 1 }\n>(props => {\n const {\n theme: { base }\n } = props;\n const { opacity, alpha, variant, position } = props;\n const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} ${\n base.animation.speed\n }), 1ms)`;\n\n return css`\n position: ${position};\n z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n inset-inline: 0;\n inset-block-start: ${position === 'fixed' ? 'var(--appshell-top-offset, 0rem)' : '0'};\n inset-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};\n border-radius: inherit;\n opacity: ${opacity};\n transition-property: opacity;\n transition-timing-function: ${props.theme.base.animation.timing.ease};\n /* stylelint-disable declaration-block-no-duplicate-properties /\n transition-duration: 1ms;\n transition-duration: ${transitionDuration};\n / stylelint-enable declaration-block-no-duplicate-properties */\n\n ${variant === 'dark' &&\n css`\n background: rgba(0, 0, 0, ${alpha});\n `}\n\n ${variant === 'light' &&\n css`\n background: rgba(255, 255, 255, ${alpha});\n `}\n `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport default withTestIds(\n forwardRef<RefElement<BackdropProps>, PropsWithoutRef<BackdropProps>>(function Backdrop(\n {\n testId,\n children,\n container,\n open = false,\n variant = 'dark',\n transitionSpeed = 'medium',\n alpha = 0.6,\n position = 'fixed',\n onBeforeTransitionIn,\n onAfterTransitionIn,\n onBeforeTransitionOut,\n onAfterTransitionOut,\n ...restProps\n },\n ref\n ) {\n const testIds = useTestIds(testId, getBackdropTestIds);\n const [state, setState] = useState<State>('closed');\n const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.propertyName !== 'opacity' \|\| e.target !== e.currentTarget) return;\n let nextState: State;\n\n if (state === 'closing') {\n nextState = 'closed';\n onAfterTransitionOut?.();\n } else {\n nextState = 'open';\n onAfterTransitionIn?.();\n }\n\n setState(nextState);\n },\n [state, onAfterTransitionOut, onAfterTransitionIn]\n );\n\n useEffect(() => {\n if (open) {\n if (state === 'closed' \|\| state === 'closing') {\n onBeforeTransitionIn?.();\n reflow();\n setState('opening');\n }\n } else if (state === 'open' \|\| state === 'opening') {\n onBeforeTransitionOut?.();\n setState('closing');\n }\n }, [open]);\n\n // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n useEffect(() => {\n if (!backdropRef.current) return;\n const opacity = window.getComputedStyle(backdropRef.current).opacity;\n // If the opacity is already at the destination value, sync the state value.\n if (state === 'closing' && opacity === '0') {\n // Since the transition never ran, we have to pretend it did and call the callback.\n // TODO: This maybe can be fixed with the animation api\n onAfterTransitionOut?.();\n setState('closed');\n }\n if (state === 'opening' && opacity === '1') {\n // ditto, see above...\n onAfterTransitionIn?.();\n setState('open');\n }\n }, [state]);\n\n return !open && state === 'closed' ? null : (\n <Configuration portalTarget={backdropEl ?? undefined}>\n <StyledBackdrop\n data-testid={testIds.root}\n container={{ justify: 'center', alignItems: 'center', ...container }}\n transitionSpeed={transitionSpeed}\n opacity={state === 'opening' \|\| state === 'open' ? 1 : 0}\n alpha={alpha}\n variant={variant}\n position={position}\n onTransitionEnd={onTransitionEnd}\n ref={backdropRef}\n {...restProps}\n >\n {children}\n </StyledBackdrop>\n </Configuration>\n );\n }),\n getBackdropTestIds\n);\n"]}
1	+ {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow, withTestIds } from '../../utils';\nimport type {\n PropsWithDefaults,\n ExcludeStrict,\n WithAttributes,\n RefElement,\n TestIdProp,\n OmitStrict\n} from '../../types';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement, useTestIds } from '../../hooks';\n\nimport { getBackdropTestIds } from './Backdrop.test-ids';\n\nexport type BackdropProps = WithAttributes<\n 'div',\n TestIdProp & {\n /*\n Opacity of the Backdrop.\n * @default 0.4\n /\n alpha?: number;\n /* Props passed to Flex container. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /\n Toggles visibility of Backdrop.\n * @default false\n /\n open?: boolean;\n /\n Determines the color of the Backdrop.\n * @default 'dark'\n /\n variant?: 'dark' \| 'light';\n /\n Transition speed of Backdrop animation.\n * @default 'medium'\n /\n transitionSpeed?: 'slow' \| 'medium' \| 'fast' \| 'none';\n /\n The position of the Backdrop.\n * @default 'fixed'\n /\n position?: 'absolute' \| 'fixed';\n /* Accepts a callback that gets invoked before opening Backdrop. /\n onBeforeTransitionIn?: () => void;\n /* Accepts a callback that gets invoked after opening Backdrop. /\n onAfterTransitionIn?: () => void;\n /* Accepts a callback that gets invoked before closing Backdrop. /\n onBeforeTransitionOut?: () => void;\n /* Accepts a callback that gets invoked after closing Backdrop /\n onAfterTransitionOut?: () => void;\n }\n>;\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n BackdropProps,\n 'open' \| 'transitionSpeed' \| 'alpha' \| 'position'\n>;\n\nconst transitionSpeedToTheme = {\n slow: 2,\n medium: 1,\n fast: 0.5,\n none: 0\n} as const;\n\nexport const StyledBackdrop = styled(Flex)<\n OmitStrict<BackdropPropsWithDefaults, 'open'> & { opacity: 0 \| 1 }\n>(props => {\n const {\n theme: { base }\n } = props;\n const { opacity, alpha, variant, position } = props;\n const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} ${\n base.animation.speed\n }), 1ms)`;\n\n return css`\n position: ${position};\n z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n inset-inline: 0;\n inset-block-start: ${position === 'fixed' ? 'var(--appshell-hard-top-offset, 0rem)' : '0'};\n inset-block-end: 0;\n padding-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};\n border-radius: inherit;\n opacity: ${opacity};\n transition-property: opacity;\n transition-timing-function: ${props.theme.base.animation.timing.ease};\n /* stylelint-disable declaration-block-no-duplicate-properties /\n transition-duration: 1ms;\n transition-duration: ${transitionDuration};\n / stylelint-enable declaration-block-no-duplicate-properties */\n\n ${variant === 'dark' &&\n css`\n background: rgba(0, 0, 0, ${alpha});\n `}\n\n ${variant === 'light' &&\n css`\n background: rgba(255, 255, 255, ${alpha});\n `}\n `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport default withTestIds(\n forwardRef<RefElement<BackdropProps>, PropsWithoutRef<BackdropProps>>(function Backdrop(\n {\n testId,\n children,\n container,\n open = false,\n variant = 'dark',\n transitionSpeed = 'medium',\n alpha = 0.6,\n position = 'fixed',\n onBeforeTransitionIn,\n onAfterTransitionIn,\n onBeforeTransitionOut,\n onAfterTransitionOut,\n ...restProps\n },\n ref\n ) {\n const testIds = useTestIds(testId, getBackdropTestIds);\n const [state, setState] = useState<State>('closed');\n const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.propertyName !== 'opacity' \|\| e.target !== e.currentTarget) return;\n let nextState: State;\n\n if (state === 'closing') {\n nextState = 'closed';\n onAfterTransitionOut?.();\n } else {\n nextState = 'open';\n onAfterTransitionIn?.();\n }\n\n setState(nextState);\n },\n [state, onAfterTransitionOut, onAfterTransitionIn]\n );\n\n useEffect(() => {\n if (open) {\n if (state === 'closed' \|\| state === 'closing') {\n onBeforeTransitionIn?.();\n reflow();\n setState('opening');\n }\n } else if (state === 'open' \|\| state === 'opening') {\n onBeforeTransitionOut?.();\n setState('closing');\n }\n }, [open]);\n\n // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n useEffect(() => {\n if (!backdropRef.current) return;\n const opacity = window.getComputedStyle(backdropRef.current).opacity;\n // If the opacity is already at the destination value, sync the state value.\n if (state === 'closing' && opacity === '0') {\n // Since the transition never ran, we have to pretend it did and call the callback.\n // TODO: This maybe can be fixed with the animation api\n onAfterTransitionOut?.();\n setState('closed');\n }\n if (state === 'opening' && opacity === '1') {\n // ditto, see above...\n onAfterTransitionIn?.();\n setState('open');\n }\n }, [state]);\n\n return !open && state === 'closed' ? null : (\n <Configuration portalTarget={backdropEl ?? undefined}>\n <StyledBackdrop\n data-testid={testIds.root}\n container={{ justify: 'center', alignItems: 'center', ...container }}\n transitionSpeed={transitionSpeed}\n opacity={state === 'opening' \|\| state === 'open' ? 1 : 0}\n alpha={alpha}\n variant={variant}\n position={position}\n onTransitionEnd={onTransitionEnd}\n ref={backdropRef}\n {...restProps}\n >\n {children}\n </StyledBackdrop>\n </Configuration>\n );\n }),\n getBackdropTestIds\n);\n"]}

package/lib/components/ClassificationMarking/ClassificationMarking.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClassificationMarking.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"~~AAKA~~;;;GAGG;AACH,eAAO,MAAM,gCAAgC;YACnC,MAAM;EAKf,CAAC;AAEF,eAAO,MAAM,aAAa;gBACZ,MAAM;WACX,MAAM;YACL,MAAM;eACH,MAAM;iBACJ,MAAM;eACR,KAAK,GAAG,QAAQ;~~YAgB3B~~,CAAC;AAIH,eAAO,MAAM,uBAAuB;YAC1B,MAAM;~~YAmCd~~,CAAC"}
1	+ {"version":3,"file":"ClassificationMarking.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,gCAAgC;YACnC,MAAM;EAKf,CAAC;AAEF,eAAO,MAAM,aAAa;gBACZ,MAAM;WACX,MAAM;YACL,MAAM;eACH,MAAM;iBACJ,MAAM;eACR,KAAK,GAAG,QAAQ;YAkB3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;YAC1B,MAAM;YAKd,CAAC"}

package/lib/components/ClassificationMarking/ClassificationMarking.styles.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import styled, { css, createGlobalStyle } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';
 /**
  * Promotes --marking-height to :root so portaled elements
  * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.
@@ -15,7 +14,9 @@ export const StyledMarking = styled.div(({ background, color, height, fontSize,
     position: fixed;
     ${placement}: 0;
     inset-inline: 0;
-    height: ${height};
+    height: ${placement === 'bottom'
+        ? `calc(${height} + var(--safe-area-inset-block-end, 0))`
+        : height};
     line-height: ${height};
     text-align: center;
     font-weight: ${theme.base['font-weight'].bold};
@@ -27,39 +28,9 @@ export const StyledMarking = styled.div(({ background, color, height, fontSize,
   `;
 });
 StyledMarking.defaultProps = defaultThemeProp;
-export const StyledClassifiedContent = styled.div(({ height, theme }) => {
+export const StyledClassifiedContent = styled.div(({ height }) => {
     return css `
     --marking-height: ${height};
-    --top-offset: calc(${headerHeight} + var(--marking-height));
-    --remaining-height: calc(100vh - (${headerHeight} + (var(--marking-height) * 2)));
-    height: calc(100% - var(--marking-height));
-    min-height: calc(100% - var(--marking-height));
-    /* Header layout fix: position below top banner */
-    & > header:not(${StyledMobileNav}) {
-      position: fixed;
-      top: var(--marking-height);
-      width: 100%;
-    }
-    /* Desktop only: nav and main top offset and min-height */
-    @media (width > ${theme.base.breakpoints.sm}) {
-      & nav[data-app-region],
-      & nav[data-app-region] [role='dialog'],
-      & main[data-app-region] {
-        top: var(--top-offset);
-        min-height: var(--remaining-height);
-      }
-      /* Nav height */
-      & nav[data-app-region] {
-        height: var(--remaining-height);
-      }
-      & main[data-app-region] {
-        padding-block-end: var(--marking-height);
-      }
-    }
   `;
 });
 StyledClassifiedContent.defaultProps = defaultThemeProp;

package/lib/components/ClassificationMarking/ClassificationMarking.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClassificationMarking.styles.js","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;~~AAC~~/C~~,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE5E~~;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,iBAAiB,CAE/D;;wBAEsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAOpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;MAEN,SAAS;;cAED,MAAM;~~mBACD~~,MAAM;;mBAEN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;MAC3C,UAAU,CAAC,CAAC,CAAC,gBAAgB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,QAAQ,CAAC,CAAC,CAAC,cAAc,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;eAChC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;kBACtB,UAAU;aACf,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAE9C,CAAC,EAAE,MAAM,EAAE,~~KAAK,~~EAAE,EAAE~~,EAAE~~;~~IACvB~~,OAAO,GAAG,CAAA;wBACY,MAAM;~~yBACL~~,~~YAAY;wCACG,YAAY;;;;;qBAK/B,eAAe;;;;;;;sBAOd,KAAK,~~CAAC~~,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;;;;;;;;;;;;;GAiB5C,CAAC~~;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, createGlobalStyle } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\~~nimport { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';\~~n\n/*\n Promotes --marking-height to :root so portaled elements\n * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.\n /\nexport const ClassificationMarkingGlobalStyle = createGlobalStyle<{\n height: string;\n}>`\n :root {\n --marking-height: ${({ height }) => height};\n }\n`;\n\nexport const StyledMarking = styled.div<{\n background: string;\n color: string;\n height: string;\n fontSize?: string;\n fontFamily?: string;\n placement: 'top' \| 'bottom';\n}>(({ background, color, height, fontSize, fontFamily, placement, theme }) => {\n return css`\n position: fixed;\n ${placement}: 0;\n inset-inline: 0;\n height: ${height};\n line-height: ${height};\n text-align: center;\n font-weight: ${theme.base['font-weight'].bold};\n ${fontFamily ? `font-family: ${fontFamily};` : ''}\n ${fontSize ? `font-size: ${fontSize};` : ''}\n z-index: ${theme.base['z-index'].max};\n background: ${background};\n color: ${color};\n `;\n});\n\nStyledMarking.defaultProps = defaultThemeProp;\n\nexport const StyledClassifiedContent = styled.div<{\n height: string;\n}>(({ height, ~~theme~~ }) => {\n return css`\n --marking-height: ${height};\n --top-offset: calc(${headerHeight} + var(--marking-height));\n --remaining-height: calc(100vh - (${headerHeight} + (var(--marking-height) 2)));\n height: calc(100% - var(--marking-height));\n min-height: calc(100% - var(--marking-height));\n\n /* Header layout fix: position below top banner /\n & > header:not(${StyledMobileNav}) {\n position: fixed;\n top: var(--marking-height);\n width: 100%;\n }\n\n / Desktop only: nav and main top offset and min-height /\n @media (width > ${theme.base.breakpoints.sm}) {\n & nav[data-app-region],\n & nav[data-app-region] [role='dialog'],\n & main[data-app-region] {\n top: var(--top-offset);\n min-height: var(--remaining-height);\n }\n\n / Nav height */\n & nav[data-app-region] {\n height: var(--remaining-height);\n }\n\n & main[data-app-region] {\n padding-block-end: var(--marking-height);\n }\n }\n `;\n});\n\nStyledClassifiedContent.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"ClassificationMarking.styles.js","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,iBAAiB,CAE/D;;wBAEsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAOpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;MAEN,SAAS;;cAED,SAAS,KAAK,QAAQ;QAC9B,CAAC,CAAC,QAAQ,MAAM,yCAAyC;QACzD,CAAC,CAAC,MAAM;mBACK,MAAM;;mBAEN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;MAC3C,UAAU,CAAC,CAAC,CAAC,gBAAgB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,QAAQ,CAAC,CAAC,CAAC,cAAc,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;eAChC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;kBACtB,UAAU;aACf,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAE9C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAChB,OAAO,GAAG,CAAA;wBACY,MAAM;GAC3B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, createGlobalStyle } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\n/*\n Promotes --marking-height to :root so portaled elements\n * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.\n */\nexport const ClassificationMarkingGlobalStyle = createGlobalStyle<{\n height: string;\n}>`\n :root {\n --marking-height: ${({ height }) => height};\n }\n`;\n\nexport const StyledMarking = styled.div<{\n background: string;\n color: string;\n height: string;\n fontSize?: string;\n fontFamily?: string;\n placement: 'top' \| 'bottom';\n}>(({ background, color, height, fontSize, fontFamily, placement, theme }) => {\n return css`\n position: fixed;\n ${placement}: 0;\n inset-inline: 0;\n height: ${placement === 'bottom'\n ? `calc(${height} + var(--safe-area-inset-block-end, 0))`\n : height};\n line-height: ${height};\n text-align: center;\n font-weight: ${theme.base['font-weight'].bold};\n ${fontFamily ? `font-family: ${fontFamily};` : ''}\n ${fontSize ? `font-size: ${fontSize};` : ''}\n z-index: ${theme.base['z-index'].max};\n background: ${background};\n color: ${color};\n `;\n});\n\nStyledMarking.defaultProps = defaultThemeProp;\n\nexport const StyledClassifiedContent = styled.div<{\n height: string;\n}>(({ height }) => {\n return css`\n --marking-height: ${height};\n `;\n});\n\nStyledClassifiedContent.defaultProps = defaultThemeProp;\n"]}

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

@@ -3,8 +3,10 @@ import type { ForwardProps } from '../../../types';
 import type DatePickerProps from '../Picker/DatePicker.types';
 import type { FormControlProps } from '../../FormControl';
 import type DateTimeProps from '../DateTime.types';
+import type { DateTimeCallbackParameter } from '../DateTime.types';
 export interface DateInputHandleValue {
     setOpen: Dispatch<SetStateAction<boolean>>;
+    getCurrentValue: () => DateTimeCallbackParameter;
 }
 type AutoFillDate = AutoFillBase | `${OptionalPrefixToken<AutoFillSection>}bday`;
 export interface DateInputProps extends DateTimeProps {

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":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,QAAQ,EACR,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,OAAO,KAAK,eAAe,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;~~AA2BnD~~,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;~~CAC5C~~;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,GAAG,mBAAmB,CAAC,eAAe,CAAC,MAAM,CAAC;AAEjF,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,aAAa,CAAC;QACxB,aAAa,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC;KACzD,CAAC;IACF,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,eAAe;;4BAE3B,CAAC;;;;~~AAuYF~~,wBAA2D"}
1	+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,QAAQ,EACR,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,OAAO,KAAK,eAAe,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA0BnE,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,eAAe,EAAE,MAAM,yBAAyB,CAAC;CAClD;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,GAAG,mBAAmB,CAAC,eAAe,CAAC,MAAM,CAAC;AAEjF,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,aAAa,CAAC;QACxB,aAAa,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC;KACzD,CAAC;IACF,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,eAAe;;4BAE3B,CAAC;;;;AA2YF,wBAA2D"}

package/lib/components/DateTime/Input/DateInput.js CHANGED Viewed

@@ -144,7 +144,10 @@ const DateInput = forwardRef(function DateInput(props, ref) {
                     ? autoComplete.replace('bday', 'bday-year')
                     : autoComplete), ref: yearInputRef }), _jsx(HiddenText, { id: yearPartId, children: t('year_input_description') })] }, 'year'));
     useFocusWithin([containerRef], onFocusChange);
-    useImperativeHandle(handle, () => ({ setOpen }));
+    useImperativeHandle(handle, () => ({
+        setOpen,
+        getCurrentValue: () => convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts())
+    }));
     const PickerButton = (_jsxs(_Fragment, { children: [_jsx(StyledInputButton, { "data-testid": testIds.openClosePicker, variant: 'simple', icon: true, ref: setDatePickerButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: 'calendar' }) }), open && datePickerButtonEl && (_jsx(StyledDatePickerDialog, { ref: setPopoverRef, target: datePickerButtonEl, placement: 'bottom-end', "aria-label": t('choose_date'), children: _jsx(Flex, { container: { direction: 'column' }, as: StyledDialogContent, children: _jsx(PickerComp, { testId: testIds.picker, selected: currentlySelectedDate(), min: min, max: max, showWeekNumber: showWeekNumber, timeZone: timeZone, ...rendererProps, onChange: selected => {
                             setInputValue(selected);
                             setOpen(false);