@cloudscape-design/components-themeable 3.0.983 → 3.0.985

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 (105) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/test-classes/styles.scss +2 -1
  3. package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss +147 -1
  4. package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/styles.scss +21 -0
  5. package/lib/internal/scss/drawer/styles.scss +22 -6
  6. package/lib/internal/scss/internal/components/chart-popover/test-classes/styles.scss +1 -1
  7. package/lib/internal/scss/internal/components/panel-resize-handle/styles.scss +2 -1
  8. package/lib/internal/template/LICENSE +175 -0
  9. package/lib/internal/template/NOTICE +1 -0
  10. package/lib/internal/template/README.md +47 -0
  11. package/lib/internal/template/app-layout/test-classes/styles.css.js +24 -23
  12. package/lib/internal/template/app-layout/test-classes/styles.scoped.css +24 -23
  13. package/lib/internal/template/app-layout/test-classes/styles.selectors.js +24 -23
  14. package/lib/internal/template/app-layout/utils/use-drawers.d.ts +2 -0
  15. package/lib/internal/template/app-layout/utils/use-drawers.d.ts.map +1 -1
  16. package/lib/internal/template/app-layout/utils/use-drawers.js +6 -0
  17. package/lib/internal/template/app-layout/utils/use-drawers.js.map +1 -1
  18. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawer.d.ts.map +1 -1
  19. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawer.js +27 -15
  20. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawer.js.map +1 -1
  21. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawers.js +2 -2
  22. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawers.js.map +1 -1
  23. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +17 -10
  24. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +145 -11
  25. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +17 -10
  26. package/lib/internal/template/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
  27. package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js +10 -2
  28. package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js.map +1 -1
  29. package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts +6 -0
  30. package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts.map +1 -1
  31. package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.js.map +1 -1
  32. package/lib/internal/template/app-layout/visual-refresh-toolbar/multi-layout.d.ts +2 -0
  33. package/lib/internal/template/app-layout/visual-refresh-toolbar/multi-layout.d.ts.map +1 -1
  34. package/lib/internal/template/app-layout/visual-refresh-toolbar/multi-layout.js +4 -0
  35. package/lib/internal/template/app-layout/visual-refresh-toolbar/multi-layout.js.map +1 -1
  36. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts +2 -0
  37. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map +1 -1
  38. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js +6 -5
  39. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js.map +1 -1
  40. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +21 -19
  41. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +45 -35
  42. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +21 -19
  43. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts +3 -1
  44. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map +1 -1
  45. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js +33 -6
  46. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js.map +1 -1
  47. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts +2 -0
  48. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
  49. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js +12 -3
  50. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
  51. package/lib/internal/template/drawer/implementation.d.ts.map +1 -1
  52. package/lib/internal/template/drawer/implementation.js +4 -1
  53. package/lib/internal/template/drawer/implementation.js.map +1 -1
  54. package/lib/internal/template/drawer/styles.css.js +8 -6
  55. package/lib/internal/template/drawer/styles.scoped.css +32 -17
  56. package/lib/internal/template/drawer/styles.selectors.js +8 -6
  57. package/lib/internal/template/icon/generated/icons.js +1 -1
  58. package/lib/internal/template/icon/generated/icons.js.map +1 -1
  59. package/lib/internal/template/index.d.ts +0 -1
  60. package/lib/internal/template/index.d.ts.map +1 -1
  61. package/lib/internal/template/index.js +0 -1
  62. package/lib/internal/template/index.js.map +1 -1
  63. package/lib/internal/template/internal/base-component/styles.scoped.css +11 -0
  64. package/lib/internal/template/internal/components/drag-handle/resize-icon.d.ts.map +1 -1
  65. package/lib/internal/template/internal/components/drag-handle/resize-icon.js +1 -2
  66. package/lib/internal/template/internal/components/drag-handle/resize-icon.js.map +1 -1
  67. package/lib/internal/template/internal/components/panel-resize-handle/styles.css.js +2 -2
  68. package/lib/internal/template/internal/components/panel-resize-handle/styles.scoped.css +8 -7
  69. package/lib/internal/template/internal/components/panel-resize-handle/styles.selectors.js +2 -2
  70. package/lib/internal/template/internal/environment.js +1 -1
  71. package/lib/internal/template/internal/environment.json +1 -1
  72. package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
  73. package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
  74. package/lib/internal/template/internal/generated/theming/index.cjs +31 -0
  75. package/lib/internal/template/internal/generated/theming/index.js +31 -0
  76. package/lib/internal/template/internal/plugins/controllers/drawers.d.ts +2 -0
  77. package/lib/internal/template/internal/plugins/controllers/drawers.d.ts.map +1 -1
  78. package/lib/internal/template/internal/plugins/controllers/drawers.js.map +1 -1
  79. package/lib/internal/template/package.json +0 -1
  80. package/lib/internal/template/test-utils/dom/index.d.ts +0 -20
  81. package/lib/internal/template/test-utils/dom/index.js +1 -12
  82. package/lib/internal/template/test-utils/dom/index.js.map +1 -1
  83. package/lib/internal/template/test-utils/selectors/index.d.ts +0 -18
  84. package/lib/internal/template/test-utils/selectors/index.js +1 -12
  85. package/lib/internal/template/test-utils/selectors/index.js.map +1 -1
  86. package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
  87. package/package.json +1 -1
  88. package/lib/internal/scss/tree-view/test-classes/styles.scss +0 -8
  89. package/lib/internal/template/test-utils/dom/tree-view/index.d.ts +0 -4
  90. package/lib/internal/template/test-utils/dom/tree-view/index.js +0 -11
  91. package/lib/internal/template/test-utils/dom/tree-view/index.js.map +0 -1
  92. package/lib/internal/template/test-utils/selectors/tree-view/index.d.ts +0 -4
  93. package/lib/internal/template/test-utils/selectors/tree-view/index.js +0 -11
  94. package/lib/internal/template/test-utils/selectors/tree-view/index.js.map +0 -1
  95. package/lib/internal/template/tree-view/index.d.ts +0 -8
  96. package/lib/internal/template/tree-view/index.d.ts.map +0 -1
  97. package/lib/internal/template/tree-view/index.js +0 -22
  98. package/lib/internal/template/tree-view/index.js.map +0 -1
  99. package/lib/internal/template/tree-view/interfaces.d.ts +0 -6
  100. package/lib/internal/template/tree-view/interfaces.d.ts.map +0 -1
  101. package/lib/internal/template/tree-view/interfaces.js +0 -4
  102. package/lib/internal/template/tree-view/interfaces.js.map +0 -1
  103. package/lib/internal/template/tree-view/test-classes/styles.css.js +0 -6
  104. package/lib/internal/template/tree-view/test-classes/styles.scoped.css +0 -7
  105. package/lib/internal/template/tree-view/test-classes/styles.selectors.js +0 -7
package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map CHANGED
@@ -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/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js CHANGED
@@ -10,7 +10,7 @@ import sharedStyles from '../../resize/styles.css.js';
10
10
  import testutilStyles from '../../test-classes/styles.css.js';
11
11
  import styles from './styles.css.js';
12
12
  const contentTypeCustomWidths = ['dashboard', 'cards', 'table'];
13
- 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) => {
13
+ 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) => {
14
14
  const isMobile = useMobile();
15
15
  const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
16
16
  const anyPanelOpen = navigationOpen || toolsOpen;
@@ -18,6 +18,7 @@ export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVa
18
18
  React.createElement("div", { ref: ref, className: clsx(styles.root, testutilStyles.root, {
19
19
  [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
20
20
  [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
21
+ [styles['drawer-expanded-mode']]: drawerExpandedMode,
21
22
  }), style: {
22
23
  minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
23
24
  [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
@@ -25,16 +26,16 @@ export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVa
25
26
  [customCssProps.toolsWidth]: `${toolsWidth}px`,
26
27
  } },
27
28
  toolbar,
28
- navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal']) }, navigation)),
29
- React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile']) },
29
+ 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)),
30
+ React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'], drawerExpandedMode && styles.hidden) },
30
31
  notifications && (React.createElement("div", { className: clsx(styles['notifications-background'], headerVariant === 'high-contrast' && highContrastHeaderClassName) })),
31
32
  notifications,
32
33
  React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }), style: style },
33
34
  contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
34
35
  React.createElement("div", { className: clsx(styles.content, testutilStyles.content) }, content)),
35
36
  bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
36
- sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden']) }, sideSplitPanel)),
37
- 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),
37
+ sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'], drawerExpandedMode && styles.hidden) }, sideSplitPanel)),
38
+ 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),
38
39
  React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) }, globalTools))));
39
40
  });
40
41
  //# sourceMappingURL=index.js.map
package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js.map CHANGED
@@ -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/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js CHANGED
@@ -1,24 +1,26 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_7nfqu_gwump_153",
5
- "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_gwump_197",
6
- "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202",
7
- "navigation": "awsui_navigation_7nfqu_gwump_217",
8
- "tools": "awsui_tools_7nfqu_gwump_218",
9
- "global-tools": "awsui_global-tools_7nfqu_gwump_219",
10
- "tools-open": "awsui_tools-open_7nfqu_gwump_257",
11
- "split-panel-side": "awsui_split-panel-side_7nfqu_gwump_270",
12
- "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_gwump_277",
13
- "panel-hidden": "awsui_panel-hidden_7nfqu_gwump_290",
14
- "toolbar-container": "awsui_toolbar-container_7nfqu_gwump_300",
15
- "notifications-container": "awsui_notifications-container_7nfqu_gwump_306",
16
- "notifications-background": "awsui_notifications-background_7nfqu_gwump_310",
17
- "main-landmark": "awsui_main-landmark_7nfqu_gwump_321",
18
- "main": "awsui_main_7nfqu_gwump_321",
19
- "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_gwump_330",
20
- "content-header": "awsui_content-header_7nfqu_gwump_340",
21
- "content": "awsui_content_7nfqu_gwump_340",
22
- "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_gwump_350"
4
+ "root": "awsui_root_7nfqu_sgvgx_153",
5
+ "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_sgvgx_197",
6
+ "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202",
7
+ "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_sgvgx_217",
8
+ "navigation": "awsui_navigation_7nfqu_sgvgx_222",
9
+ "tools": "awsui_tools_7nfqu_sgvgx_223",
10
+ "global-tools": "awsui_global-tools_7nfqu_sgvgx_224",
11
+ "tools-open": "awsui_tools-open_7nfqu_sgvgx_262",
12
+ "split-panel-side": "awsui_split-panel-side_7nfqu_sgvgx_276",
13
+ "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_sgvgx_283",
14
+ "panel-hidden": "awsui_panel-hidden_7nfqu_sgvgx_296",
15
+ "toolbar-container": "awsui_toolbar-container_7nfqu_sgvgx_306",
16
+ "notifications-container": "awsui_notifications-container_7nfqu_sgvgx_312",
17
+ "notifications-background": "awsui_notifications-background_7nfqu_sgvgx_316",
18
+ "main-landmark": "awsui_main-landmark_7nfqu_sgvgx_327",
19
+ "main": "awsui_main_7nfqu_sgvgx_327",
20
+ "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_sgvgx_336",
21
+ "content-header": "awsui_content-header_7nfqu_sgvgx_346",
22
+ "content": "awsui_content_7nfqu_sgvgx_346",
23
+ "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_sgvgx_356",
24
+ "hidden": "awsui_hidden_7nfqu_sgvgx_361"
23
25
  };
24
26
 
package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css CHANGED
@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
150
150
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
151
151
  SPDX-License-Identifier: Apache-2.0
152
152
  */
153
- .awsui_root_7nfqu_gwump_153:not(#\9) {
153
+ .awsui_root_7nfqu_sgvgx_153:not(#\9) {
154
154
  border-collapse: separate;
155
155
  border-spacing: 0;
156
156
  box-sizing: border-box;
@@ -190,92 +190,98 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
190
190
  grid-template-rows: min-content min-content 1fr;
191
191
  }
192
192
  @media (min-width: 689px) {
193
- .awsui_root_7nfqu_gwump_153:not(#\9) {
193
+ .awsui_root_7nfqu_sgvgx_153:not(#\9) {
194
194
  grid-template-areas: "toolbar toolbar toolbar toolbar toolbar toolbar toolbar" "navigation . notifications . sideSplitPanel tools global-tools" "navigation . main . sideSplitPanel tools global-tools";
195
195
  grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-xgujsu)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
196
196
  grid-template-rows: min-content min-content 1fr min-content;
197
197
  }
198
- .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-default_7nfqu_gwump_197:not(#\9) {
198
+ .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-default_7nfqu_sgvgx_197:not(#\9) {
199
199
  --awsui-max-content-width-xgujsu: 1620px;
200
200
  }
201
201
  }
202
202
  @media (min-width: 689px) and (min-width: 1401px) {
203
- .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202:not(#\9) {
203
+ .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202:not(#\9) {
204
204
  --awsui-max-content-width-xgujsu: 1280px;
205
205
  }
206
206
  }
207
207
  @media (min-width: 689px) and (min-width: 1921px) {
208
- .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202:not(#\9) {
208
+ .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202:not(#\9) {
209
209
  --awsui-max-content-width-xgujsu: 1620px;
210
210
  }
211
211
  }
212
212
  @media (min-width: 689px) and (min-width: 2541px) {
213
- .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202:not(#\9) {
213
+ .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202:not(#\9) {
214
214
  --awsui-max-content-width-xgujsu: 2160px;
215
215
  }
216
216
  }
217
+ @media (min-width: 689px) {
218
+ .awsui_root_7nfqu_sgvgx_153.awsui_drawer-expanded-mode_7nfqu_sgvgx_217:not(#\9) {
219
+ grid-template-columns: 0 0 0 0 0 0 auto;
220
+ }
221
+ }
217
222
 
218
- .awsui_navigation_7nfqu_gwump_217:not(#\9),
219
- .awsui_tools_7nfqu_gwump_218:not(#\9),
220
- .awsui_global-tools_7nfqu_gwump_219:not(#\9) {
223
+ .awsui_navigation_7nfqu_sgvgx_222:not(#\9),
224
+ .awsui_tools_7nfqu_sgvgx_223:not(#\9),
225
+ .awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
221
226
  grid-row: 1/-1;
222
227
  grid-column: 1/-1;
223
228
  background: var(--color-background-container-content-mvmryi, #ffffff);
224
229
  opacity: 1;
225
230
  }
226
231
  @media (max-width: 688px) {
227
- .awsui_navigation_7nfqu_gwump_217:not(#\9),
228
- .awsui_tools_7nfqu_gwump_218:not(#\9),
229
- .awsui_global-tools_7nfqu_gwump_219:not(#\9) {
232
+ .awsui_navigation_7nfqu_sgvgx_222:not(#\9),
233
+ .awsui_tools_7nfqu_sgvgx_223:not(#\9),
234
+ .awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
230
235
  inline-size: 100%;
231
236
  }
232
237
  }
233
238
 
234
- .awsui_navigation_7nfqu_gwump_217:not(#\9) {
239
+ .awsui_navigation_7nfqu_sgvgx_222:not(#\9) {
235
240
  z-index: 830;
236
241
  }
237
242
  @media (min-width: 689px) {
238
- .awsui_navigation_7nfqu_gwump_217:not(#\9) {
243
+ .awsui_navigation_7nfqu_sgvgx_222:not(#\9) {
239
244
  grid-area: navigation;
240
245
  inline-size: var(--awsui-navigation-width-xgujsu);
241
246
  border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
242
247
  }
243
248
  }
244
249
  @media (max-width: 688px) {
245
- .awsui_navigation_7nfqu_gwump_217:not(#\9) {
250
+ .awsui_navigation_7nfqu_sgvgx_222:not(#\9) {
246
251
  z-index: 1001;
247
252
  }
248
253
  }
249
254
 
250
255
  @media (min-width: 689px) {
251
- .awsui_tools_7nfqu_gwump_218:not(#\9) {
256
+ .awsui_tools_7nfqu_sgvgx_223:not(#\9) {
252
257
  grid-area: tools;
253
258
  /* stylelint-disable plugin/no-unsupported-browser-features */
254
259
  }
255
- .awsui_tools_7nfqu_gwump_218:not(#\9):not(:has(> [data-testid])) {
260
+ .awsui_tools_7nfqu_sgvgx_223:not(#\9):not(:has(> [data-testid])) {
256
261
  inline-size: var(--awsui-tools-width-xgujsu);
257
262
  }
258
- .awsui_tools_7nfqu_gwump_218:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_gwump_257 {
263
+ .awsui_tools_7nfqu_sgvgx_223:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_sgvgx_262 {
259
264
  border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
260
265
  }
261
266
  }
262
267
 
263
268
  @media (min-width: 689px) {
264
- .awsui_global-tools_7nfqu_gwump_219:not(#\9) {
269
+ .awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
265
270
  display: flex;
266
271
  grid-area: global-tools;
272
+ justify-content: flex-end;
267
273
  }
268
274
  }
269
275
 
270
276
  @media (min-width: 689px) {
271
- .awsui_split-panel-side_7nfqu_gwump_270:not(#\9) {
277
+ .awsui_split-panel-side_7nfqu_sgvgx_276:not(#\9) {
272
278
  grid-area: sideSplitPanel;
273
279
  border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
274
280
  opacity: 1;
275
281
  }
276
282
  }
277
283
 
278
- .awsui_split-panel-bottom_7nfqu_gwump_277:not(#\9) {
284
+ .awsui_split-panel-bottom_7nfqu_sgvgx_283:not(#\9) {
279
285
  position: sticky;
280
286
  z-index: 840;
281
287
  align-self: end;
@@ -283,72 +289,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
283
289
  grid-column: 1/-1;
284
290
  }
285
291
  @media (min-width: 689px) {
286
- .awsui_split-panel-bottom_7nfqu_gwump_277:not(#\9) {
292
+ .awsui_split-panel-bottom_7nfqu_sgvgx_283:not(#\9) {
287
293
  grid-column: 2/5;
288
294
  }
289
295
  }
290
296
 
291
- .awsui_panel-hidden_7nfqu_gwump_290:not(#\9) {
297
+ .awsui_panel-hidden_7nfqu_sgvgx_296:not(#\9) {
292
298
  border-block: none;
293
299
  border-inline: none;
294
300
  opacity: 0;
295
301
  z-index: 0;
296
302
  }
297
- .awsui_panel-hidden_7nfqu_gwump_290.awsui_navigation_7nfqu_gwump_217:not(#\9), .awsui_panel-hidden_7nfqu_gwump_290.awsui_tools_7nfqu_gwump_218:not(#\9), .awsui_panel-hidden_7nfqu_gwump_290.awsui_global-tools_7nfqu_gwump_219:not(#\9) {
303
+ .awsui_panel-hidden_7nfqu_sgvgx_296.awsui_navigation_7nfqu_sgvgx_222:not(#\9), .awsui_panel-hidden_7nfqu_sgvgx_296.awsui_tools_7nfqu_sgvgx_223:not(#\9), .awsui_panel-hidden_7nfqu_sgvgx_296.awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
298
304
  inline-size: 0px;
299
305
  }
300
306
 
301
- .awsui_toolbar-container_7nfqu_gwump_300:not(#\9) {
307
+ .awsui_toolbar-container_7nfqu_sgvgx_306:not(#\9) {
302
308
  grid-area: toolbar;
303
309
  block-size: 42px;
304
310
  border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
305
311
  }
306
312
 
307
- .awsui_notifications-container_7nfqu_gwump_306:not(#\9) {
313
+ .awsui_notifications-container_7nfqu_sgvgx_312:not(#\9) {
308
314
  grid-area: notifications;
309
315
  }
310
316
 
311
- .awsui_notifications-background_7nfqu_gwump_310:not(#\9) {
317
+ .awsui_notifications-background_7nfqu_sgvgx_316:not(#\9) {
312
318
  background: var(--color-background-layout-main-nu5m0g, #f2f3f3);
313
319
  grid-area: notifications;
314
320
  grid-column: 1/-1;
315
321
  }
316
322
  @media (min-width: 689px) {
317
- .awsui_notifications-background_7nfqu_gwump_310:not(#\9) {
323
+ .awsui_notifications-background_7nfqu_sgvgx_316:not(#\9) {
318
324
  grid-column: 2/5;
319
325
  }
320
326
  }
321
327
 
322
- .awsui_main-landmark_7nfqu_gwump_321:not(#\9) {
328
+ .awsui_main-landmark_7nfqu_sgvgx_327:not(#\9) {
323
329
  display: contents;
324
330
  }
325
331
 
326
- .awsui_main_7nfqu_gwump_321:not(#\9) {
332
+ .awsui_main_7nfqu_sgvgx_327:not(#\9) {
327
333
  grid-area: main;
328
334
  margin-block-start: var(--space-scaled-s-gjhvjd, 12px);
329
335
  margin-block-end: var(--space-layout-content-bottom-iu1izz, 20px);
330
336
  }
331
- .awsui_main-disable-paddings_7nfqu_gwump_330:not(#\9) {
337
+ .awsui_main-disable-paddings_7nfqu_sgvgx_336:not(#\9) {
332
338
  margin-block: 0;
333
339
  grid-column: 1/-1;
334
340
  }
335
341
  @media (min-width: 689px) {
336
- .awsui_main-disable-paddings_7nfqu_gwump_330:not(#\9) {
342
+ .awsui_main-disable-paddings_7nfqu_sgvgx_336:not(#\9) {
337
343
  grid-column: 2/5;
338
344
  }
339
345
  }
340
346
 
341
- .awsui_content-header_7nfqu_gwump_340:not(#\9) {
347
+ .awsui_content-header_7nfqu_sgvgx_346:not(#\9) {
342
348
  margin-block-end: var(--space-content-header-padding-bottom-hjkugf, 16px);
343
349
  }
344
350
 
345
- .awsui_content_7nfqu_gwump_340:not(#\9) {
351
+ .awsui_content_7nfqu_sgvgx_346:not(#\9) {
346
352
  display: contents;
347
353
  }
348
354
 
349
355
  /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
350
356
  @media (max-width: 688px) {
351
- .awsui_unfocusable-mobile_7nfqu_gwump_350 *:not(#\9) {
357
+ .awsui_unfocusable-mobile_7nfqu_sgvgx_356 *:not(#\9) {
352
358
  visibility: hidden;
353
359
  }
360
+ }
361
+
362
+ .awsui_hidden_7nfqu_sgvgx_361:not(#\9) {
363
+ display: none;
354
364
  }
package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js CHANGED
@@ -2,24 +2,26 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_7nfqu_gwump_153",
6
- "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_gwump_197",
7
- "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202",
8
- "navigation": "awsui_navigation_7nfqu_gwump_217",
9
- "tools": "awsui_tools_7nfqu_gwump_218",
10
- "global-tools": "awsui_global-tools_7nfqu_gwump_219",
11
- "tools-open": "awsui_tools-open_7nfqu_gwump_257",
12
- "split-panel-side": "awsui_split-panel-side_7nfqu_gwump_270",
13
- "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_gwump_277",
14
- "panel-hidden": "awsui_panel-hidden_7nfqu_gwump_290",
15
- "toolbar-container": "awsui_toolbar-container_7nfqu_gwump_300",
16
- "notifications-container": "awsui_notifications-container_7nfqu_gwump_306",
17
- "notifications-background": "awsui_notifications-background_7nfqu_gwump_310",
18
- "main-landmark": "awsui_main-landmark_7nfqu_gwump_321",
19
- "main": "awsui_main_7nfqu_gwump_321",
20
- "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_gwump_330",
21
- "content-header": "awsui_content-header_7nfqu_gwump_340",
22
- "content": "awsui_content_7nfqu_gwump_340",
23
- "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_gwump_350"
5
+ "root": "awsui_root_7nfqu_sgvgx_153",
6
+ "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_sgvgx_197",
7
+ "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202",
8
+ "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_sgvgx_217",
9
+ "navigation": "awsui_navigation_7nfqu_sgvgx_222",
10
+ "tools": "awsui_tools_7nfqu_sgvgx_223",
11
+ "global-tools": "awsui_global-tools_7nfqu_sgvgx_224",
12
+ "tools-open": "awsui_tools-open_7nfqu_sgvgx_262",
13
+ "split-panel-side": "awsui_split-panel-side_7nfqu_sgvgx_276",
14
+ "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_sgvgx_283",
15
+ "panel-hidden": "awsui_panel-hidden_7nfqu_sgvgx_296",
16
+ "toolbar-container": "awsui_toolbar-container_7nfqu_sgvgx_306",
17
+ "notifications-container": "awsui_notifications-container_7nfqu_sgvgx_312",
18
+ "notifications-background": "awsui_notifications-background_7nfqu_sgvgx_316",
19
+ "main-landmark": "awsui_main-landmark_7nfqu_sgvgx_327",
20
+ "main": "awsui_main_7nfqu_sgvgx_327",
21
+ "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_sgvgx_336",
22
+ "content-header": "awsui_content-header_7nfqu_sgvgx_346",
23
+ "content": "awsui_content_7nfqu_sgvgx_346",
24
+ "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_sgvgx_356",
25
+ "hidden": "awsui_hidden_7nfqu_sgvgx_361"
24
26
  };
25
27
 
package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts CHANGED
@@ -19,6 +19,8 @@ interface DrawerTriggersProps {
19
19
  globalDrawersFocusControl?: FocusControlMultipleStates;
20
20
  globalDrawers: ReadonlyArray<AppLayoutProps.Drawer>;
21
21
  onActiveGlobalDrawersChange?: (newDrawerId: string, params: OnChangeParams) => void;
22
+ expandedDrawerId?: string | null;
23
+ setExpandedDrawerId: (value: string | null) => void;
22
24
  splitPanelOpen?: boolean;
23
25
  splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];
24
26
  splitPanelToggleProps: SplitPanelToggleProps | undefined;
@@ -26,6 +28,6 @@ interface DrawerTriggersProps {
26
28
  onSplitPanelToggle: (() => void) | undefined;
27
29
  disabled: boolean;
28
30
  }
29
- export declare function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, }: DrawerTriggersProps): JSX.Element | null;
31
+ 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;
30
32
  export {};
31
33
  //# sourceMappingURL=drawer-triggers.d.ts.map
package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map CHANGED
@@ -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/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js CHANGED
@@ -11,7 +11,7 @@ import TriggerButton from './trigger-button';
11
11
  import splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';
12
12
  import testutilStyles from '../../test-classes/styles.css.js';
13
13
  import styles from './styles.css.js';
14
- export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition = 'bottom', splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, }) {
14
+ export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition = 'bottom', splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, expandedDrawerId, setExpandedDrawerId, }) {
15
15
  const isMobile = useMobile();
16
16
  const hasMultipleTriggers = drawers.length > 1;
17
17
  const previousActiveLocalDrawerId = useRef(activeDrawerId);
@@ -49,29 +49,56 @@ export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFoc
49
49
  const globalDrawersStartIndex = drawers.length;
50
50
  const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen);
51
51
  const splitPanelResolvedPosition = splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.position;
52
+ const exitExpandedMode = () => {
53
+ if (setExpandedDrawerId) {
54
+ setExpandedDrawerId(null);
55
+ }
56
+ };
52
57
  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" },
53
58
  React.createElement("div", { className: styles['drawers-trigger-content'], "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, role: "toolbar", "aria-orientation": "horizontal" },
54
59
  splitPanelToggleProps && (React.createElement(React.Fragment, null,
55
- 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 }),
60
+ 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: () => {
61
+ exitExpandedMode();
62
+ if (!!expandedDrawerId && splitPanelToggleProps.active) {
63
+ return;
64
+ }
65
+ onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle();
66
+ }, selected: !expandedDrawerId && splitPanelToggleProps.active, ref: splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined, hasTooltip: true, isMobile: isMobile, isForSplitPanel: true, disabled: disabled }),
56
67
  hasMultipleTriggers ? React.createElement("div", { className: styles['group-divider'] }) : null)),
57
68
  visibleItems.slice(0, globalDrawersStartIndex).map(item => {
58
69
  var _a, _b;
59
70
  const isForPreviousActiveDrawer = (previousActiveLocalDrawerId === null || previousActiveLocalDrawerId === void 0 ? void 0 : previousActiveLocalDrawerId.current) === item.id;
60
- 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 }));
71
+ const selected = !expandedDrawerId && item.id === activeDrawerId;
72
+ 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: () => {
73
+ exitExpandedMode();
74
+ if (!!expandedDrawerId && activeDrawerId === item.id) {
75
+ return;
76
+ }
77
+ onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true });
78
+ }, 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 }));
61
79
  }),
62
80
  globalDrawersStartIndex > 0 && visibleItems.length > globalDrawersStartIndex && (React.createElement("div", { className: styles['group-divider'] })),
63
81
  visibleItems.slice(globalDrawersStartIndex).map(item => {
64
82
  var _a, _b, _c;
65
83
  const isForPreviousActiveDrawer = previousActiveGlobalDrawersIds === null || previousActiveGlobalDrawersIds === void 0 ? void 0 : previousActiveGlobalDrawersIds.current.includes(item.id);
66
- 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: () => {
84
+ const selected = activeGlobalDrawersIds.includes(item.id) && (!expandedDrawerId || item.id === expandedDrawerId);
85
+ 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: () => {
86
+ exitExpandedMode();
87
+ if (!!expandedDrawerId && item.id !== expandedDrawerId && activeGlobalDrawersIds.includes(item.id)) {
88
+ return;
89
+ }
67
90
  onActiveGlobalDrawersChange === null || onActiveGlobalDrawersChange === void 0 ? void 0 : onActiveGlobalDrawersChange(item.id, { initiatedByUserAction: true });
68
- }, 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 }));
91
+ }, 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 }));
69
92
  }),
70
- 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 }) => {
93
+ 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 }) => {
71
94
  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 }));
72
95
  }, onItemClick: event => {
73
96
  const id = event.detail.id;
97
+ exitExpandedMode();
74
98
  if (globalDrawers.find(drawer => drawer.id === id)) {
99
+ if (!!expandedDrawerId && id !== expandedDrawerId && activeGlobalDrawersIds.includes(id)) {
100
+ return;
101
+ }
75
102
  onActiveGlobalDrawersChange === null || onActiveGlobalDrawersChange === void 0 ? void 0 : onActiveGlobalDrawersChange(id, { initiatedByUserAction: true });
76
103
  }
77
104
  else {