npm - @cloudscape-design/components - Versions diffs - 3.0.974 → 3.0.976 - Mend

@cloudscape-design/components 3.0.974 → 3.0.976

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

package/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,eAAe,GACf,eAAe,GACf,eAAe,GACf,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,wBAAwB,GACxB,YAAY,GACZ,gBAAgB,GAChB,iBAAiB,GACjB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,CACd;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;~~CACpB~~;AAED,eAAO,MAAM,cAAc,~~4FAwG1B~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,eAAe,GACf,eAAe,GACf,eAAe,GACf,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,wBAAwB,GACxB,YAAY,GACZ,gBAAgB,GAChB,iBAAiB,GACjB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,CACd;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,+BAA+B,EAAE,OAAO,CAAC;CAC1C;AAED,eAAO,MAAM,cAAc,4FAyH1B,CAAC"}

package/app-layout/visual-refresh-toolbar/skeleton/index.js CHANGED Viewed

@@ -10,7 +10,7 @@ import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 const contentTypeCustomWidths = ['dashboard', 'cards', 'table'];
-export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVariant, contentHeader, content, navigation, navigationOpen, navigationWidth, tools, globalTools, toolsOpen, toolsWidth, toolbar, sideSplitPanel, bottomSplitPanel, splitPanelOpen, placement, contentType, maxContentWidth, disableContentPaddings, globalToolsOpen, navigationAnimationDisabled, isNested, }, ref) => {
+export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVariant, contentHeader, content, navigation, navigationOpen, navigationWidth, tools, globalTools, toolsOpen, toolsWidth, toolbar, sideSplitPanel, bottomSplitPanel, splitPanelOpen, placement, contentType, maxContentWidth, disableContentPaddings, globalToolsOpen, navigationAnimationDisabled, isNested, drawerExpandedMode, drawerExpandedModeInChildLayout, }, ref) => {
     const isMobile = useMobile();
     const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
     const anyPanelOpen = navigationOpen || toolsOpen;
@@ -18,6 +18,7 @@ export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVa
         React.createElement("div", { ref: ref, className: clsx(styles.root, testutilStyles.root, {
                 [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
                 [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
+                [styles['drawer-expanded-mode']]: drawerExpandedMode,
             }), style: {
                 minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
                 [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
@@ -25,16 +26,16 @@ export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVa
                 [customCssProps.toolsWidth]: `${toolsWidth}px`,
             } },
             toolbar,
-            navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']) }, navigation)),
-            React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile']) },
+            navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'], (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden) }, navigation)),
+            React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'], drawerExpandedMode && styles.hidden) },
                 notifications && (React.createElement("div", { className: clsx(styles['notifications-background'], headerVariant === 'high-contrast' && highContrastHeaderClassName) })),
                 notifications,
                 React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }), style: style },
                     contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
                     React.createElement("div", { className: clsx(styles.content, testutilStyles.content) }, content)),
                 bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
-            sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden']) }, sideSplitPanel)),
-            React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open']) }, tools),
+            sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'], drawerExpandedMode && styles.hidden) }, sideSplitPanel)),
+            React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open'], drawerExpandedMode && styles.hidden) }, tools),
             React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) }, globalTools))));
 });
 //# sourceMappingURL=index.js.map

package/app-layout/visual-refresh-toolbar/skeleton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,aAAa,MAAM,6CAA6C,CAAC;AACxE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAG3F,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,uBAAuB,GAA8B,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;~~AA+B3F~~,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,CACE,EACE,KAAK,EACL,aAAa,EACb,aAAa,EACb,aAAa,EACb,OAAO,EACP,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,EACL,WAAW,EACX,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,WAAW,EACX,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,2BAA2B,EAC3B,QAAQ,~~GACT~~,EACD,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,UAAU,GAAG,eAAe,KAAK,MAAM,CAAC,SAAS,IAAI,eAAe,KAAK,MAAM,CAAC,gBAAgB,CAAC;IACvG,MAAM,YAAY,GAAG,cAAc,IAAI,SAAS,CAAC;IACjD,OAAO,CACL,oBAAC,aAAa,IAAC,WAAW,EAAC,oBAAoB;QAC7C,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE;gBAChD,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC,EAAE,CAAC,uBAAuB,CAAC,QAAQ,CAAC,WAAW,CAAC;gBACvF,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,EAAE,WAAW,KAAK,WAAW;~~aACvE~~,CAAC,EACF,KAAK,EAAE;gBACL,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,SAAS,CAAC,eAAe,GAAG,SAAS,CAAC,aAAa,KAAK;gBAC1G,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,CAAC,CAAC,CAAC,EAAE;gBACrG,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI;gBACxD,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,GAAG,UAAU,IAAI;aAC/C;YAEA,OAAO;YACP,UAAU,IAAI,CACb,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,CAAC,2BAA2B,IAAI,YAAY,CAAC,wBAAwB,CAAC,~~CACvE~~,IAEA,UAAU,CACP,CACP;YACD,~~8BAAM~~,SAAS,EAAE,IAAI,~~CAAC~~,MAAM,CAAC,eAAe,CAAC,~~EAAE~~,QAAQ,IAAI,YAAY,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC;~~gBACrG~~,aAAa,IAAI,CAChB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,aAAa,KAAK,eAAe,IAAI,2BAA2B,CACjE,GACI,CACR;gBACA,aAAa;gBACd,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,sBAAsB,EAAE,CAAC,EAC3F,KAAK,EAAE,KAAK;oBAEX,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,aAAa,CAAO;oBACjF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,IAAG,OAAO,CAAO,CACzE;gBACL,gBAAgB,IAAI,CACnB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,CAAC,aAAa,EAAE,IAClG,gBAAgB,CACb,CACP,CACI;YACN,cAAc,IAAI,CACjB,~~6BAAK~~,SAAS,EAAE,IAAI,~~CAAC~~,MAAM,CAAC,kBAAkB,CAAC,~~EAAE~~,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,~~IACxF~~,cAAc,CACX,CACP;YACD,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,CAAC,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EACpC,YAAY,CAAC,wBAAwB,CAAC,EACtC,cAAc,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC5D,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,~~CAClC~~,IAEA,KAAK,CACF;YACN,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC,eAAe,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,IAAG,WAAW,CAAO,CACzG,CACQ,CACjB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string \| undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n extends Pick<\n AppLayoutPropsWithDefaults,\n \| 'notifications'\n \| 'headerVariant'\n \| 'contentHeader'\n \| 'content'\n \| 'contentType'\n \| 'maxContentWidth'\n \| 'disableContentPaddings'\n \| 'navigation'\n \| 'navigationOpen'\n \| 'navigationWidth'\n \| 'tools'\n \| 'toolsOpen'\n \| 'toolsWidth'\n \| 'placement'\n > {\n style?: React.CSSProperties;\n toolbar?: React.ReactNode;\n splitPanelOpen?: boolean;\n sideSplitPanel?: React.ReactNode;\n bottomSplitPanel?: React.ReactNode;\n globalTools?: React.ReactNode;\n globalToolsOpen?: boolean;\n navigationAnimationDisabled?: boolean;\n isNested?: boolean;\n}\n\nexport const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(\n (\n {\n style,\n notifications,\n headerVariant,\n contentHeader,\n content,\n navigation,\n navigationOpen,\n navigationWidth,\n tools,\n globalTools,\n toolsOpen,\n toolsWidth,\n toolbar,\n sideSplitPanel,\n bottomSplitPanel,\n splitPanelOpen,\n placement,\n contentType,\n maxContentWidth,\n disableContentPaddings,\n globalToolsOpen,\n navigationAnimationDisabled,\n isNested,\n },\n ref\n ) => {\n const isMobile = useMobile();\n const isMaxWidth = maxContentWidth === Number.MAX_VALUE \|\| maxContentWidth === Number.MAX_SAFE_INTEGER;\n const anyPanelOpen = navigationOpen \|\| toolsOpen;\n return (\n <VisualContext contextName=\"app-layout-toolbar\">\n <div\n ref={ref}\n className={clsx(styles.root, testutilStyles.root, {\n [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n })}\n style={{\n minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,\n [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n [customCssProps.navigationWidth]: `${navigationWidth}px`,\n [customCssProps.toolsWidth]: `${toolsWidth}px`,\n }}\n >\n {toolbar}\n {navigation && (\n <div\n className={clsx(\n styles.navigation,\n !navigationOpen && styles['panel-hidden'],\n toolsOpen && styles['unfocusable-mobile'],\n !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']\n )}\n >\n {navigation}\n </div>\n )}\n <main className={clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'])}>\n {notifications && (\n <div\n className={clsx(\n styles['notifications-background'],\n headerVariant === 'high-contrast' && highContrastHeaderClassName\n )}\n ></div>\n )}\n {notifications}\n <div\n className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}\n style={style}\n >\n {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n </div>\n {bottomSplitPanel && (\n <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n {bottomSplitPanel}\n </div>\n )}\n </main>\n {sideSplitPanel && (\n <div className={clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'])}>\n {sideSplitPanel}\n </div>\n )}\n <div\n className={clsx(\n styles.tools,\n !toolsOpen && styles['panel-hidden'],\n sharedStyles['with-motion-horizontal'],\n navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n toolsOpen && styles['tools-open']\n )}\n >\n {tools}\n </div>\n <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>\n </div>\n </VisualContext>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string \| undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n extends Pick<\n AppLayoutPropsWithDefaults,\n \| 'notifications'\n \| 'headerVariant'\n \| 'contentHeader'\n \| 'content'\n \| 'contentType'\n \| 'maxContentWidth'\n \| 'disableContentPaddings'\n \| 'navigation'\n \| 'navigationOpen'\n \| 'navigationWidth'\n \| 'tools'\n \| 'toolsOpen'\n \| 'toolsWidth'\n \| 'placement'\n > {\n style?: React.CSSProperties;\n toolbar?: React.ReactNode;\n splitPanelOpen?: boolean;\n sideSplitPanel?: React.ReactNode;\n bottomSplitPanel?: React.ReactNode;\n globalTools?: React.ReactNode;\n globalToolsOpen?: boolean;\n navigationAnimationDisabled?: boolean;\n isNested?: boolean;\n drawerExpandedMode: boolean;\n drawerExpandedModeInChildLayout: boolean;\n}\n\nexport const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(\n (\n {\n style,\n notifications,\n headerVariant,\n contentHeader,\n content,\n navigation,\n navigationOpen,\n navigationWidth,\n tools,\n globalTools,\n toolsOpen,\n toolsWidth,\n toolbar,\n sideSplitPanel,\n bottomSplitPanel,\n splitPanelOpen,\n placement,\n contentType,\n maxContentWidth,\n disableContentPaddings,\n globalToolsOpen,\n navigationAnimationDisabled,\n isNested,\n drawerExpandedMode,\n drawerExpandedModeInChildLayout,\n },\n ref\n ) => {\n const isMobile = useMobile();\n const isMaxWidth = maxContentWidth === Number.MAX_VALUE \|\| maxContentWidth === Number.MAX_SAFE_INTEGER;\n const anyPanelOpen = navigationOpen \|\| toolsOpen;\n return (\n <VisualContext contextName=\"app-layout-toolbar\">\n <div\n ref={ref}\n className={clsx(styles.root, testutilStyles.root, {\n [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n [styles['drawer-expanded-mode']]: drawerExpandedMode,\n })}\n style={{\n minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,\n [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n [customCssProps.navigationWidth]: `${navigationWidth}px`,\n [customCssProps.toolsWidth]: `${toolsWidth}px`,\n }}\n >\n {toolbar}\n {navigation && (\n <div\n className={clsx(\n styles.navigation,\n !navigationOpen && styles['panel-hidden'],\n toolsOpen && styles['unfocusable-mobile'],\n !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'],\n (drawerExpandedMode \|\| drawerExpandedModeInChildLayout) && styles.hidden\n )}\n >\n {navigation}\n </div>\n )}\n <main\n className={clsx(\n styles['main-landmark'],\n isMobile && anyPanelOpen && styles['unfocusable-mobile'],\n drawerExpandedMode && styles.hidden\n )}\n >\n {notifications && (\n <div\n className={clsx(\n styles['notifications-background'],\n headerVariant === 'high-contrast' && highContrastHeaderClassName\n )}\n ></div>\n )}\n {notifications}\n <div\n className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}\n style={style}\n >\n {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n </div>\n {bottomSplitPanel && (\n <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n {bottomSplitPanel}\n </div>\n )}\n </main>\n {sideSplitPanel && (\n <div\n className={clsx(\n styles['split-panel-side'],\n !splitPanelOpen && styles['panel-hidden'],\n drawerExpandedMode && styles.hidden\n )}\n >\n {sideSplitPanel}\n </div>\n )}\n <div\n className={clsx(\n styles.tools,\n !toolsOpen && styles['panel-hidden'],\n sharedStyles['with-motion-horizontal'],\n navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n toolsOpen && styles['tools-open'],\n drawerExpandedMode && styles.hidden\n )}\n >\n {tools}\n </div>\n <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>\n </div>\n </VisualContext>\n );\n }\n);\n"]}

package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js CHANGED Viewed

@@ -1,24 +1,26 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_12rdf_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_12rdf_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_12rdf_202",
-  "navigation": "awsui_navigation_7nfqu_12rdf_217",
-  "tools": "awsui_tools_7nfqu_12rdf_218",
-  "global-tools": "awsui_global-tools_7nfqu_12rdf_219",
-  "tools-open": "awsui_tools-open_7nfqu_12rdf_257",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_12rdf_270",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_12rdf_277",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_12rdf_290",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_12rdf_300",
-  "notifications-container": "awsui_notifications-container_7nfqu_12rdf_306",
-  "notifications-background": "awsui_notifications-background_7nfqu_12rdf_310",
-  "main-landmark": "awsui_main-landmark_7nfqu_12rdf_321",
-  "main": "awsui_main_7nfqu_12rdf_321",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_12rdf_330",
-  "content-header": "awsui_content-header_7nfqu_12rdf_340",
-  "content": "awsui_content_7nfqu_12rdf_340",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_12rdf_350"
+  "root": "awsui_root_7nfqu_1eazm_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1eazm_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1eazm_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1eazm_217",
+  "navigation": "awsui_navigation_7nfqu_1eazm_222",
+  "tools": "awsui_tools_7nfqu_1eazm_223",
+  "global-tools": "awsui_global-tools_7nfqu_1eazm_224",
+  "tools-open": "awsui_tools-open_7nfqu_1eazm_262",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1eazm_276",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1eazm_283",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1eazm_296",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1eazm_306",
+  "notifications-container": "awsui_notifications-container_7nfqu_1eazm_312",
+  "notifications-background": "awsui_notifications-background_7nfqu_1eazm_316",
+  "main-landmark": "awsui_main-landmark_7nfqu_1eazm_327",
+  "main": "awsui_main_7nfqu_1eazm_327",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1eazm_336",
+  "content-header": "awsui_content-header_7nfqu_1eazm_346",
+  "content": "awsui_content_7nfqu_1eazm_346",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1eazm_356",
+  "hidden": "awsui_hidden_7nfqu_1eazm_361"
 };

package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css CHANGED Viewed

@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_7nfqu_12rdf_153:not(#\9) {
+.awsui_root_7nfqu_1eazm_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -190,92 +190,98 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_12rdf_153:not(#\9) {
+  .awsui_root_7nfqu_1eazm_153:not(#\9) {
     grid-template-areas: "toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "navigation .         notifications    .         sideSplitPanel  tools    global-tools" "navigation .             main         .         sideSplitPanel  tools    global-tools";
     grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-buc0zz, 24px), 1fr) minmax(0, var(--awsui-max-content-width-xgujsu)) minmax(var(--space-layout-content-horizontal-buc0zz, 24px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
-  .awsui_root_7nfqu_12rdf_153.awsui_has-adaptive-widths-default_7nfqu_12rdf_197:not(#\9) {
+  .awsui_root_7nfqu_1eazm_153.awsui_has-adaptive-widths-default_7nfqu_1eazm_197:not(#\9) {
     --awsui-max-content-width-xgujsu: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_12rdf_153.awsui_has-adaptive-widths-dashboard_7nfqu_12rdf_202:not(#\9) {
+  .awsui_root_7nfqu_1eazm_153.awsui_has-adaptive-widths-dashboard_7nfqu_1eazm_202:not(#\9) {
     --awsui-max-content-width-xgujsu: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_12rdf_153.awsui_has-adaptive-widths-dashboard_7nfqu_12rdf_202:not(#\9) {
+  .awsui_root_7nfqu_1eazm_153.awsui_has-adaptive-widths-dashboard_7nfqu_1eazm_202:not(#\9) {
     --awsui-max-content-width-xgujsu: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_12rdf_153.awsui_has-adaptive-widths-dashboard_7nfqu_12rdf_202:not(#\9) {
+  .awsui_root_7nfqu_1eazm_153.awsui_has-adaptive-widths-dashboard_7nfqu_1eazm_202:not(#\9) {
     --awsui-max-content-width-xgujsu: 2160px;
   }
 }
+@media (min-width: 689px) {
+  .awsui_root_7nfqu_1eazm_153.awsui_drawer-expanded-mode_7nfqu_1eazm_217:not(#\9) {
+    grid-template-columns: 0 0 0 0 0 0 auto;
+  }
+}
-.awsui_navigation_7nfqu_12rdf_217:not(#\9),
-.awsui_tools_7nfqu_12rdf_218:not(#\9),
-.awsui_global-tools_7nfqu_12rdf_219:not(#\9) {
+.awsui_navigation_7nfqu_1eazm_222:not(#\9),
+.awsui_tools_7nfqu_1eazm_223:not(#\9),
+.awsui_global-tools_7nfqu_1eazm_224:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-78ljyf, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_12rdf_217:not(#\9),
-  .awsui_tools_7nfqu_12rdf_218:not(#\9),
-  .awsui_global-tools_7nfqu_12rdf_219:not(#\9) {
+  .awsui_navigation_7nfqu_1eazm_222:not(#\9),
+  .awsui_tools_7nfqu_1eazm_223:not(#\9),
+  .awsui_global-tools_7nfqu_1eazm_224:not(#\9) {
     inline-size: 100%;
   }
 }
-.awsui_navigation_7nfqu_12rdf_217:not(#\9) {
+.awsui_navigation_7nfqu_1eazm_222:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_12rdf_217:not(#\9) {
+  .awsui_navigation_7nfqu_1eazm_222:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-xgujsu);
     border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-layout-px1i24, #c6c6cd);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_12rdf_217:not(#\9) {
+  .awsui_navigation_7nfqu_1eazm_222:not(#\9) {
     z-index: 1001;
   }
 }
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_12rdf_218:not(#\9) {
+  .awsui_tools_7nfqu_1eazm_223:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_12rdf_218:not(#\9):not(:has(> [data-testid])) {
+  .awsui_tools_7nfqu_1eazm_223:not(#\9):not(:has(> [data-testid])) {
     inline-size: var(--awsui-tools-width-xgujsu);
   }
-  .awsui_tools_7nfqu_12rdf_218:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_12rdf_257 {
+  .awsui_tools_7nfqu_1eazm_223:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_1eazm_262 {
     border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-layout-px1i24, #c6c6cd);
   }
 }
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_12rdf_219:not(#\9) {
+  .awsui_global-tools_7nfqu_1eazm_224:not(#\9) {
     display: flex;
     grid-area: global-tools;
+    justify-content: flex-end;
   }
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_12rdf_270:not(#\9) {
+  .awsui_split-panel-side_7nfqu_1eazm_276:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-layout-px1i24, #c6c6cd);
     opacity: 1;
   }
 }
-.awsui_split-panel-bottom_7nfqu_12rdf_277:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_1eazm_283:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -283,72 +289,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_12rdf_277:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_1eazm_283:not(#\9) {
     grid-column: 2/5;
   }
 }
-.awsui_panel-hidden_7nfqu_12rdf_290:not(#\9) {
+.awsui_panel-hidden_7nfqu_1eazm_296:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_12rdf_290.awsui_navigation_7nfqu_12rdf_217:not(#\9), .awsui_panel-hidden_7nfqu_12rdf_290.awsui_tools_7nfqu_12rdf_218:not(#\9), .awsui_panel-hidden_7nfqu_12rdf_290.awsui_global-tools_7nfqu_12rdf_219:not(#\9) {
+.awsui_panel-hidden_7nfqu_1eazm_296.awsui_navigation_7nfqu_1eazm_222:not(#\9), .awsui_panel-hidden_7nfqu_1eazm_296.awsui_tools_7nfqu_1eazm_223:not(#\9), .awsui_panel-hidden_7nfqu_1eazm_296.awsui_global-tools_7nfqu_1eazm_224:not(#\9) {
   inline-size: 0px;
 }
-.awsui_toolbar-container_7nfqu_12rdf_300:not(#\9) {
+.awsui_toolbar-container_7nfqu_1eazm_306:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-layout-px1i24, #c6c6cd);
 }
-.awsui_notifications-container_7nfqu_12rdf_306:not(#\9) {
+.awsui_notifications-container_7nfqu_1eazm_312:not(#\9) {
   grid-area: notifications;
 }
-.awsui_notifications-background_7nfqu_12rdf_310:not(#\9) {
+.awsui_notifications-background_7nfqu_1eazm_316:not(#\9) {
   background: var(--color-background-layout-main-uncvr6, #ffffff);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_12rdf_310:not(#\9) {
+  .awsui_notifications-background_7nfqu_1eazm_316:not(#\9) {
     grid-column: 2/5;
   }
 }
-.awsui_main-landmark_7nfqu_12rdf_321:not(#\9) {
+.awsui_main-landmark_7nfqu_1eazm_327:not(#\9) {
   display: contents;
 }
-.awsui_main_7nfqu_12rdf_321:not(#\9) {
+.awsui_main_7nfqu_1eazm_327:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-8ozaad, 12px);
   margin-block-end: var(--space-layout-content-bottom-zeb1g9, 40px);
 }
-.awsui_main-disable-paddings_7nfqu_12rdf_330:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_1eazm_336:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_12rdf_330:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_1eazm_336:not(#\9) {
     grid-column: 2/5;
   }
 }
-.awsui_content-header_7nfqu_12rdf_340:not(#\9) {
+.awsui_content-header_7nfqu_1eazm_346:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-rvy5xz, 16px);
 }
-.awsui_content_7nfqu_12rdf_340:not(#\9) {
+.awsui_content_7nfqu_1eazm_346:not(#\9) {
   display: contents;
 }
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_12rdf_350 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_1eazm_356 *:not(#\9) {
     visibility: hidden;
   }
+}
+.awsui_hidden_7nfqu_1eazm_361:not(#\9) {
+  display: none;
 }

package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js CHANGED Viewed

@@ -2,24 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_12rdf_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_12rdf_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_12rdf_202",
-  "navigation": "awsui_navigation_7nfqu_12rdf_217",
-  "tools": "awsui_tools_7nfqu_12rdf_218",
-  "global-tools": "awsui_global-tools_7nfqu_12rdf_219",
-  "tools-open": "awsui_tools-open_7nfqu_12rdf_257",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_12rdf_270",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_12rdf_277",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_12rdf_290",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_12rdf_300",
-  "notifications-container": "awsui_notifications-container_7nfqu_12rdf_306",
-  "notifications-background": "awsui_notifications-background_7nfqu_12rdf_310",
-  "main-landmark": "awsui_main-landmark_7nfqu_12rdf_321",
-  "main": "awsui_main_7nfqu_12rdf_321",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_12rdf_330",
-  "content-header": "awsui_content-header_7nfqu_12rdf_340",
-  "content": "awsui_content_7nfqu_12rdf_340",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_12rdf_350"
+  "root": "awsui_root_7nfqu_1eazm_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1eazm_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1eazm_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1eazm_217",
+  "navigation": "awsui_navigation_7nfqu_1eazm_222",
+  "tools": "awsui_tools_7nfqu_1eazm_223",
+  "global-tools": "awsui_global-tools_7nfqu_1eazm_224",
+  "tools-open": "awsui_tools-open_7nfqu_1eazm_262",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1eazm_276",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1eazm_283",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1eazm_296",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1eazm_306",
+  "notifications-container": "awsui_notifications-container_7nfqu_1eazm_312",
+  "notifications-background": "awsui_notifications-background_7nfqu_1eazm_316",
+  "main-landmark": "awsui_main-landmark_7nfqu_1eazm_327",
+  "main": "awsui_main_7nfqu_1eazm_327",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1eazm_336",
+  "content-header": "awsui_content-header_7nfqu_1eazm_346",
+  "content": "awsui_content_7nfqu_1eazm_346",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1eazm_356",
+  "hidden": "awsui_hidden_7nfqu_1eazm_361"
 };

package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts CHANGED Viewed

@@ -19,6 +19,8 @@ interface DrawerTriggersProps {
     globalDrawersFocusControl?: FocusControlMultipleStates;
     globalDrawers: ReadonlyArray<AppLayoutProps.Drawer>;
     onActiveGlobalDrawersChange?: (newDrawerId: string, params: OnChangeParams) => void;
+    expandedDrawerId?: string | null;
+    setExpandedDrawerId: (value: string | null) => void;
     splitPanelOpen?: boolean;
     splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];
     splitPanelToggleProps: SplitPanelToggleProps | undefined;
@@ -26,6 +28,6 @@ interface DrawerTriggersProps {
     onSplitPanelToggle: (() => void) | undefined;
     disabled: boolean;
 }
-export declare function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, }: DrawerTriggersProps): JSX.Element | null;
+export declare function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, expandedDrawerId, setExpandedDrawerId, }: DrawerTriggersProps): JSX.Element | null;
 export {};
 //# sourceMappingURL=drawer-triggers.d.ts.map

package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer-triggers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAmB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAOtF,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC;CAC7C;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IAErD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAClD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9C,oBAAoB,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAE9F,sBAAsB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,aAAa,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpD,2BAA2B,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;~~IAEpF~~,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;IACtE,qBAAqB,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACzD,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACrD,kBAAkB,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,kBAA6B,EAC7B,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,aAAa,EACb,yBAAyB,EACzB,2BAA2B,~~GAC5B~~,EAAE,mBAAmB,~~sBA+LrB~~"}
1	+ {"version":3,"file":"drawer-triggers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAmB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAOtF,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC;CAC7C;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IAErD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAClD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9C,oBAAoB,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAE9F,sBAAsB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,aAAa,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpD,2BAA2B,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACpF,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;IACtE,qBAAqB,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACzD,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACrD,kBAAkB,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,kBAA6B,EAC7B,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,aAAa,EACb,yBAAyB,EACzB,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,GACpB,EAAE,mBAAmB,sBA0NrB"}

package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js CHANGED Viewed

@@ -11,7 +11,7 @@ import TriggerButton from './trigger-button';
 import splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
-export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition = 'bottom', splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, }) {
+export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition = 'bottom', splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, expandedDrawerId, setExpandedDrawerId, }) {
     const isMobile = useMobile();
     const hasMultipleTriggers = drawers.length > 1;
     const previousActiveLocalDrawerId = useRef(activeDrawerId);
@@ -49,29 +49,56 @@ export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFoc
     const globalDrawersStartIndex = drawers.length;
     const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen);
     const splitPanelResolvedPosition = splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.position;
+    const exitExpandedMode = () => {
+        if (setExpandedDrawerId) {
+            setExpandedDrawerId(null);
+        }
+    };
     return (React.createElement("aside", { className: styles[`drawers-${isMobile ? 'mobile' : 'desktop'}-triggers-container`], "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, ref: triggersContainerRef, role: "region" },
         React.createElement("div", { className: styles['drawers-trigger-content'], "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, role: "toolbar", "aria-orientation": "horizontal" },
             splitPanelToggleProps && (React.createElement(React.Fragment, null,
-                React.createElement(TriggerButton, { ariaLabel: splitPanelToggleProps.ariaLabel, ariaControls: splitPanelToggleProps.controlId, ariaExpanded: splitPanelToggleProps.active, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal', onClick: () => onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle(), selected: splitPanelToggleProps.active, ref: splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined, hasTooltip: true, isMobile: isMobile, isForSplitPanel: true, disabled: disabled }),
+                React.createElement(TriggerButton, { ariaLabel: splitPanelToggleProps.ariaLabel, ariaControls: splitPanelToggleProps.controlId, ariaExpanded: !expandedDrawerId && splitPanelToggleProps.active, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal', onClick: () => {
+                        exitExpandedMode();
+                        if (!!expandedDrawerId && splitPanelToggleProps.active) {
+                            return;
+                        }
+                        onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle();
+                    }, selected: !expandedDrawerId && splitPanelToggleProps.active, ref: splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined, hasTooltip: true, isMobile: isMobile, isForSplitPanel: true, disabled: disabled }),
                 hasMultipleTriggers ? React.createElement("div", { className: styles['group-divider'] }) : null)),
             visibleItems.slice(0, globalDrawersStartIndex).map(item => {
                 var _a, _b;
                 const isForPreviousActiveDrawer = (previousActiveLocalDrawerId === null || previousActiveLocalDrawerId === void 0 ? void 0 : previousActiveLocalDrawerId.current) === item.id;
-                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: item.id === activeDrawerId, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], !toolsOnlyMode && testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true }), ref: item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined, selected: item.id === activeDrawerId, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_b = item.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
+                const selected = !expandedDrawerId && item.id === activeDrawerId;
+                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: selected, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], !toolsOnlyMode && testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
+                        exitExpandedMode();
+                        if (!!expandedDrawerId && activeDrawerId === item.id) {
+                            return;
+                        }
+                        onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true });
+                    }, ref: item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined, selected: selected, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_b = item.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
             }),
             globalDrawersStartIndex > 0 && visibleItems.length > globalDrawersStartIndex && (React.createElement("div", { className: styles['group-divider'] })),
             visibleItems.slice(globalDrawersStartIndex).map(item => {
                 var _a, _b, _c;
                 const isForPreviousActiveDrawer = previousActiveGlobalDrawersIds === null || previousActiveGlobalDrawersIds === void 0 ? void 0 : previousActiveGlobalDrawersIds.current.includes(item.id);
-                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: activeGlobalDrawersIds.includes(item.id), ariaControls: activeGlobalDrawersIds.includes(item.id) ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
+                const selected = activeGlobalDrawersIds.includes(item.id) && (!expandedDrawerId || item.id === expandedDrawerId);
+                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: selected, ariaControls: selected ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
+                        exitExpandedMode();
+                        if (!!expandedDrawerId && item.id !== expandedDrawerId && activeGlobalDrawersIds.includes(item.id)) {
+                            return;
+                        }
                         onActiveGlobalDrawersChange === null || onActiveGlobalDrawersChange === void 0 ? void 0 : onActiveGlobalDrawersChange(item.id, { initiatedByUserAction: true });
-                    }, ref: (_b = globalDrawersFocusControl === null || globalDrawersFocusControl === void 0 ? void 0 : globalDrawersFocusControl.refs[item.id]) === null || _b === void 0 ? void 0 : _b.toggle, selected: activeGlobalDrawersIds.includes(item.id), badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_c = item.ariaLabels) === null || _c === void 0 ? void 0 : _c.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
+                    }, ref: (_b = globalDrawersFocusControl === null || globalDrawersFocusControl === void 0 ? void 0 : globalDrawersFocusControl.refs[item.id]) === null || _b === void 0 ? void 0 : _b.toggle, selected: selected, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_c = item.ariaLabels) === null || _c === void 0 ? void 0 : _c.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
             }),
-            overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems.map(item => (Object.assign(Object.assign({}, item), { active: activeGlobalDrawersIds.includes(item.id) }))), ariaLabel: overflowMenuHasBadge ? ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflowWithBadge : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflow, customTriggerBuilder: ({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {
+            overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems.map(item => (Object.assign(Object.assign({}, item), { active: activeGlobalDrawersIds.includes(item.id) && (!expandedDrawerId || item.id === expandedDrawerId) }))), ariaLabel: overflowMenuHasBadge ? ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflowWithBadge : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflow, customTriggerBuilder: ({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {
                     return (React.createElement(TriggerButton, { ref: triggerRef, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, badge: overflowMenuHasBadge, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global'], testUtilsClass), iconName: "ellipsis", onClick: onClick, disabled: disabled }));
                 }, onItemClick: event => {
                     const id = event.detail.id;
+                    exitExpandedMode();
                     if (globalDrawers.find(drawer => drawer.id === id)) {
+                        if (!!expandedDrawerId && id !== expandedDrawerId && activeGlobalDrawersIds.includes(id)) {
+                            return;
+                        }
                         onActiveGlobalDrawersChange === null || onActiveGlobalDrawersChange === void 0 ? void 0 : onActiveGlobalDrawersChange(id, { initiatedByUserAction: true });
                     }
                     else {