@cloudscape-design/components 3.0.664 → 3.0.665

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AppLayoutPropsWithDefaults } from '../../interfaces';
+interface SkeletonLayoutProps extends Pick<AppLayoutPropsWithDefaults, 'notifications' | 'contentHeader' | 'content' | 'contentType' | 'maxContentWidth' | 'disableContentPaddings' | 'navigation' | 'navigationOpen' | 'navigationWidth' | 'tools' | 'toolsOpen' | 'toolsWidth' | 'placement'> {
+    style?: React.CSSProperties;
+    toolbar?: React.ReactNode;
+    splitPanelOpen?: boolean;
+    sideSplitPanel?: React.ReactNode;
+    bottomSplitPanel?: React.ReactNode;
+}
+export declare function SkeletonLayout({ style, notifications, contentHeader, content, navigation, navigationOpen, navigationWidth, tools, toolsOpen, toolsWidth, toolbar, sideSplitPanel, bottomSplitPanel, splitPanelOpen, placement, contentType, maxContentWidth, disableContentPaddings, }: SkeletonLayoutProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAE1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAO9D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,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;CACpC;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,aAAa,EACb,OAAO,EACP,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,WAAW,EACX,eAAe,EACf,sBAAsB,GACvB,EAAE,mBAAmB,eAmDrB"}

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

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import customCssProps from '../../../internal/generated/custom-css-properties';
+import testutilStyles from '../../test-classes/styles.css.js';
+import styles from './styles.css.js';
+const contentTypeCustomWidths = ['dashboard', 'cards', 'table'];
+export function SkeletonLayout({ style, notifications, contentHeader, content, navigation, navigationOpen, navigationWidth, tools, toolsOpen, toolsWidth, toolbar, sideSplitPanel, bottomSplitPanel, splitPanelOpen, placement, contentType, maxContentWidth, disableContentPaddings, }) {
+    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
+    const anyPanelOpen = navigationOpen || toolsOpen;
+    return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, {
+            [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
+            [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
+        }), style: {
+            minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
+            [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
+            [customCssProps.navigationWidth]: `${navigationWidth}px`,
+            [customCssProps.toolsWidth]: `${toolsWidth}px`,
+        } },
+        navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile']) }, navigation)),
+        toolbar,
+        React.createElement("main", { className: clsx(styles['main-landmark'], anyPanelOpen && styles['unfocusable-mobile']) },
+            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: testutilStyles.content }, content)),
+            bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom'], !splitPanelOpen && styles['split-panel-hidden']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
+        sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden']) }, sideSplitPanel)),
+        tools && React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden']) }, tools)));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\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    | '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}\n\nexport function SkeletonLayout({\n  style,\n  notifications,\n  contentHeader,\n  content,\n  navigation,\n  navigationOpen,\n  navigationWidth,\n  tools,\n  toolsOpen,\n  toolsWidth,\n  toolbar,\n  sideSplitPanel,\n  bottomSplitPanel,\n  splitPanelOpen,\n  placement,\n  contentType,\n  maxContentWidth,\n  disableContentPaddings,\n}: SkeletonLayoutProps) {\n  const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n  const anyPanelOpen = navigationOpen || toolsOpen;\n  return (\n    <div\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: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n        [customCssProps.navigationWidth]: `${navigationWidth}px`,\n        [customCssProps.toolsWidth]: `${toolsWidth}px`,\n      }}\n    >\n      {navigation && (\n        <div\n          className={clsx(\n            styles.navigation,\n            !navigationOpen && styles['panel-hidden'],\n            toolsOpen && styles['unfocusable-mobile']\n          )}\n        >\n          {navigation}\n        </div>\n      )}\n      {toolbar}\n      <main className={clsx(styles['main-landmark'], anyPanelOpen && styles['unfocusable-mobile'])}>\n        {notifications}\n        <div className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })} style={style}>\n          {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n          <div className={testutilStyles.content}>{content}</div>\n        </div>\n        {bottomSplitPanel && (\n          <div\n            className={clsx(styles['split-panel-bottom'], !splitPanelOpen && styles['split-panel-hidden'])}\n            style={{ insetBlockEnd: placement.insetBlockEnd }}\n          >\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      {tools && <div className={clsx(styles.tools, !toolsOpen && styles['panel-hidden'])}>{tools}</div>}\n    </div>\n  );\n}\n"]}

package/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ToolbarSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare const ToolbarSlot: React.ForwardRefExoticComponent<ToolbarSlotProps & React.RefAttributes<HTMLElement>>;
+interface NotificationsSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare const NotificationsSlot: React.ForwardRefExoticComponent<NotificationsSlotProps & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=slot-wrappers.d.ts.map

package/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-wrappers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,sFAItB,CAAC;AAEH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,4FAM7B,CAAC"}

package/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.js

@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+export const ToolbarSlot = React.forwardRef(({ className, style, children }, ref) => (React.createElement("section", { ref: ref, className: clsx(styles['toolbar-container'], className), style: style }, children)));
+export const NotificationsSlot = React.forwardRef(({ className, style, children }, ref) => (React.createElement("div", { ref: ref, className: clsx(styles['notifications-container'], className), style: style }, children)));
+//# sourceMappingURL=slot-wrappers.js.map

package/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-wrappers.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClH,iCAAS,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACvG,QAAQ,CACD,CACX,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvC,6BAAK,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACzG,QAAQ,CACL,CACP,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';\nimport styles from './styles.css.js';\n\ninterface ToolbarSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const ToolbarSlot = React.forwardRef<HTMLElement, ToolbarSlotProps>(({ className, style, children }, ref) => (\n  <section ref={ref as React.Ref<any>} className={clsx(styles['toolbar-container'], className)} style={style}>\n    {children}\n  </section>\n));\n\ninterface NotificationsSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const NotificationsSlot = React.forwardRef<HTMLElement, NotificationsSlotProps>(\n  ({ className, style, children }, ref) => (\n    <div ref={ref as React.Ref<any>} className={clsx(styles['notifications-container'], className)} style={style}>\n      {children}\n    </div>\n  )\n);\n"]}

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

@@ -0,0 +1,20 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_7nfqu_12zwm_101",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_12zwm_150",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_12zwm_165",
+  "navigation": "awsui_navigation_7nfqu_12zwm_180",
+  "tools": "awsui_tools_7nfqu_12zwm_181",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_12zwm_205",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_12zwm_211",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_12zwm_224",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_12zwm_228",
+  "notifications-container": "awsui_notifications-container_7nfqu_12zwm_234",
+  "main-landmark": "awsui_main-landmark_7nfqu_12zwm_241",
+  "main": "awsui_main_7nfqu_12zwm_241",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_12zwm_250",
+  "content-header": "awsui_content-header_7nfqu_12zwm_260",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_12zwm_265"
+};
+  

package/app-layout/{skeleton → visual-refresh-toolbar/skeleton}/styles.scoped.css

@@ -98,7 +98,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_1uxbz_1ayfw_101:not(#\9) {
+.awsui_root_7nfqu_12zwm_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -141,53 +141,53 @@ 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_1uxbz_1ayfw_101:not(#\9) {
-    grid-template-areas: "navigation topBar       topBar        topBar    tools" "navigation .         notifications    .         tools" "navigation .             main         .         tools";
-    grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) minmax(0, var(--awsui-max-content-width-9rhwr5)) minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) min-content;
+  .awsui_root_7nfqu_12zwm_101:not(#\9) {
+    grid-template-areas: "navigation toolbar      toolbar       toolbar   toolbar         tools" "navigation .         notifications    .         sideSplitPanel  tools" "navigation .             main         .         sideSplitPanel  tools";
+    grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) minmax(0, var(--awsui-max-content-width-9rhwr5)) minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_1uxbz_1ayfw_101.awsui_has-adaptive-widths-default_1uxbz_1ayfw_150:not(#\9) {
+  .awsui_root_7nfqu_12zwm_101.awsui_has-adaptive-widths-default_7nfqu_12zwm_150:not(#\9) {
     --awsui-max-content-width-9rhwr5: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_1uxbz_1ayfw_101.awsui_has-adaptive-widths-default_1uxbz_1ayfw_150:not(#\9) {
+  .awsui_root_7nfqu_12zwm_101.awsui_has-adaptive-widths-default_7nfqu_12zwm_150:not(#\9) {
     --awsui-max-content-width-9rhwr5: 1440px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_1uxbz_1ayfw_101.awsui_has-adaptive-widths-default_1uxbz_1ayfw_150:not(#\9) {
+  .awsui_root_7nfqu_12zwm_101.awsui_has-adaptive-widths-default_7nfqu_12zwm_150:not(#\9) {
     --awsui-max-content-width-9rhwr5: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_1uxbz_1ayfw_101.awsui_has-adaptive-widths-dashboard_1uxbz_1ayfw_165:not(#\9) {
+  .awsui_root_7nfqu_12zwm_101.awsui_has-adaptive-widths-dashboard_7nfqu_12zwm_165:not(#\9) {
     --awsui-max-content-width-9rhwr5: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_1uxbz_1ayfw_101.awsui_has-adaptive-widths-dashboard_1uxbz_1ayfw_165:not(#\9) {
+  .awsui_root_7nfqu_12zwm_101.awsui_has-adaptive-widths-dashboard_7nfqu_12zwm_165:not(#\9) {
     --awsui-max-content-width-9rhwr5: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_1uxbz_1ayfw_101.awsui_has-adaptive-widths-dashboard_1uxbz_1ayfw_165:not(#\9) {
+  .awsui_root_7nfqu_12zwm_101.awsui_has-adaptive-widths-dashboard_7nfqu_12zwm_165:not(#\9) {
     --awsui-max-content-width-9rhwr5: 2160px;
   }
 }
 
-.awsui_navigation_1uxbz_1ayfw_180:not(#\9),
-.awsui_tools_1uxbz_1ayfw_181:not(#\9) {
+.awsui_navigation_7nfqu_12zwm_180:not(#\9),
+.awsui_tools_7nfqu_12zwm_181:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-4un1ap, #ffffff);
-  z-index: 1;
+  z-index: 850;
 }
 
 @media (min-width: 689px) {
-  .awsui_navigation_1uxbz_1ayfw_180:not(#\9) {
+  .awsui_navigation_7nfqu_12zwm_180:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-9rhwr5);
     border-inline-end: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
@@ -195,45 +195,79 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_1uxbz_1ayfw_181:not(#\9) {
+  .awsui_tools_7nfqu_12zwm_181:not(#\9) {
     grid-area: tools;
     inline-size: var(--awsui-tools-width-9rhwr5);
     border-inline-start: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
   }
 }
 
-.awsui_top-bar_1uxbz_1ayfw_204:not(#\9) {
-  grid-area: topBar;
+@media (min-width: 689px) {
+  .awsui_split-panel-side_7nfqu_12zwm_205:not(#\9) {
+    grid-area: sideSplitPanel;
+    border-inline-start: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
+  }
+}
+
+.awsui_split-panel-bottom_7nfqu_12zwm_211:not(#\9) {
+  position: sticky;
+  z-index: 840;
+  align-self: end;
+  grid-area: main;
+  grid-column: 1/-1;
+}
+@media (min-width: 689px) {
+  .awsui_split-panel-bottom_7nfqu_12zwm_211:not(#\9) {
+    grid-column: 2/span 3;
+  }
+}
+
+.awsui_panel-hidden_7nfqu_12zwm_224:not(#\9) {
+  display: none;
+}
+
+.awsui_toolbar-container_7nfqu_12zwm_228:not(#\9) {
+  grid-area: toolbar;
   block-size: 48px;
   border-block-end: 1px solid var(--color-border-divider-panel-bottom-dwyqvg, #b6bec9);
 }
 
-.awsui_notifications_1uxbz_1ayfw_210:not(#\9) {
+.awsui_notifications-container_7nfqu_12zwm_234:not(#\9) {
   grid-area: notifications;
 }
-.awsui_notifications_1uxbz_1ayfw_210:not(#\9):not(:empty) {
+.awsui_notifications-container_7nfqu_12zwm_234:not(#\9):not(:empty) {
   padding-block-start: var(--space-scaled-xs-26e2du, 8px);
 }
 
-.awsui_main-landmark_1uxbz_1ayfw_217:not(#\9) {
+.awsui_main-landmark_7nfqu_12zwm_241:not(#\9) {
   display: contents;
 }
 
-.awsui_main_1uxbz_1ayfw_217:not(#\9) {
+.awsui_main_7nfqu_12zwm_241:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-aqzyko, 12px);
   margin-block-end: var(--space-layout-content-bottom-noqzmw, 40px);
 }
-.awsui_main-disable-paddings_1uxbz_1ayfw_226:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_12zwm_250:not(#\9) {
   grid-column: 1/-1;
   margin-block: 0;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_1uxbz_1ayfw_226:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_12zwm_250:not(#\9) {
     grid-column: 2/span 3;
   }
 }
 
-.awsui_content-header_1uxbz_1ayfw_236:not(#\9) {
+.awsui_content-header_7nfqu_12zwm_260:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
+}
+
+/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
+.awsui_unfocusable-mobile_7nfqu_12zwm_265 *:not(#\9) {
+  visibility: hidden;
+}
+@media (min-width: 689px) {
+  .awsui_unfocusable-mobile_7nfqu_12zwm_265 *:not(#\9) {
+    visibility: visible;
+  }
 }

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

@@ -0,0 +1,21 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_7nfqu_12zwm_101",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_12zwm_150",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_12zwm_165",
+  "navigation": "awsui_navigation_7nfqu_12zwm_180",
+  "tools": "awsui_tools_7nfqu_12zwm_181",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_12zwm_205",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_12zwm_211",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_12zwm_224",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_12zwm_228",
+  "notifications-container": "awsui_notifications-container_7nfqu_12zwm_234",
+  "main-landmark": "awsui_main-landmark_7nfqu_12zwm_241",
+  "main": "awsui_main_7nfqu_12zwm_241",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_12zwm_250",
+  "content-header": "awsui_content-header_7nfqu_12zwm_260",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_12zwm_265"
+};
+  

package/app-layout/visual-refresh-toolbar/split-panel/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SplitPanelProviderProps } from '../../split-panel';
+import { AppLayoutInternals } from '../interfaces';
+interface AppLayoutSplitPanelDrawerSideImplementationProps {
+    appLayoutInternals: AppLayoutInternals;
+    splitPanelInternals: SplitPanelProviderProps;
+    children: React.ReactNode;
+}
+export declare function AppLayoutSplitPanelDrawerSideImplementation({ children, appLayoutInternals, splitPanelInternals, }: AppLayoutSplitPanelDrawerSideImplementationProps): JSX.Element;
+export interface AppLayoutSplitPanelDrawerBottomImplementationProps {
+    appLayoutInternals: AppLayoutInternals;
+    splitPanelInternals: SplitPanelProviderProps;
+    children: React.ReactNode;
+}
+export declare function AppLayoutSplitPanelDrawerBottomImplementation({ children, splitPanelInternals, }: AppLayoutSplitPanelDrawerBottomImplementationProps): JSX.Element;
+export declare const createWidgetizedAppLayoutSplitPanelDrawerSide: (Loader?: typeof AppLayoutSplitPanelDrawerSideImplementation | undefined) => typeof AppLayoutSplitPanelDrawerSideImplementation;
+export declare const createWidgetizedAppLayoutSplitPanelDrawerBottom: (Loader?: typeof AppLayoutSplitPanelDrawerBottomImplementation | undefined) => typeof AppLayoutSplitPanelDrawerBottomImplementation;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/app-layout/visual-refresh-toolbar/split-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAsB,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGnD,UAAU,gDAAgD;IACxD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,gDAAgD,eAgBlD;AAED,MAAM,WAAW,kDAAkD;IACjE,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACpB,EAAE,kDAAkD,eAEpD;AAED,eAAO,MAAM,6CAA6C,iIAEzD,CAAC;AAEF,eAAO,MAAM,+CAA+C,qIAE3D,CAAC"}

package/app-layout/visual-refresh-toolbar/split-panel/index.js

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+import { SplitPanelProvider } from '../../split-panel';
+import styles from './styles.css.js';
+export function AppLayoutSplitPanelDrawerSideImplementation({ children, appLayoutInternals, splitPanelInternals, }) {
+    const { splitPanelControlId, placement } = appLayoutInternals;
+    return (React.createElement(SplitPanelProvider, Object.assign({}, splitPanelInternals),
+        React.createElement("section", { id: splitPanelControlId, className: styles['split-panel-side'], style: {
+                blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
+                insetBlockStart: placement.insetBlockStart,
+            } }, children)));
+}
+export function AppLayoutSplitPanelDrawerBottomImplementation({ children, splitPanelInternals, }) {
+    return React.createElement(SplitPanelProvider, Object.assign({}, splitPanelInternals), children);
+}
+export const createWidgetizedAppLayoutSplitPanelDrawerSide = createWidgetizedComponent(AppLayoutSplitPanelDrawerSideImplementation);
+export const createWidgetizedAppLayoutSplitPanelDrawerBottom = createWidgetizedComponent(AppLayoutSplitPanelDrawerBottomImplementation);
+//# sourceMappingURL=index.js.map

package/app-layout/visual-refresh-toolbar/split-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAA2B,MAAM,mBAAmB,CAAC;AAEhF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,UAAU,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GAC8B;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC;IAC9D,OAAO,CACL,oBAAC,kBAAkB,oBAAK,mBAAmB;QACzC,iCACE,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EACrC,KAAK,EAAE;gBACL,SAAS,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;gBACxF,eAAe,EAAE,SAAS,CAAC,eAAe;aAC3C,IAEA,QAAQ,CACD,CACS,CACtB,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACgC;IACnD,OAAO,oBAAC,kBAAkB,oBAAK,mBAAmB,GAAG,QAAQ,CAAsB,CAAC;AACtF,CAAC;AAED,MAAM,CAAC,MAAM,6CAA6C,GAAG,yBAAyB,CACpF,2CAA2C,CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,+CAA+C,GAAG,yBAAyB,CACtF,6CAA6C,CAC9C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { SplitPanelProvider, SplitPanelProviderProps } from '../../split-panel';\nimport { AppLayoutInternals } from '../interfaces';\nimport styles from './styles.css.js';\n\ninterface AppLayoutSplitPanelDrawerSideImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerSideImplementation({\n  children,\n  appLayoutInternals,\n  splitPanelInternals,\n}: AppLayoutSplitPanelDrawerSideImplementationProps) {\n  const { splitPanelControlId, placement } = appLayoutInternals;\n  return (\n    <SplitPanelProvider {...splitPanelInternals}>\n      <section\n        id={splitPanelControlId}\n        className={styles['split-panel-side']}\n        style={{\n          blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n          insetBlockStart: placement.insetBlockStart,\n        }}\n      >\n        {children}\n      </section>\n    </SplitPanelProvider>\n  );\n}\n\nexport interface AppLayoutSplitPanelDrawerBottomImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerBottomImplementation({\n  children,\n  splitPanelInternals,\n}: AppLayoutSplitPanelDrawerBottomImplementationProps) {\n  return <SplitPanelProvider {...splitPanelInternals}>{children}</SplitPanelProvider>;\n}\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerSide = createWidgetizedComponent(\n  AppLayoutSplitPanelDrawerSideImplementation\n);\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerBottom = createWidgetizedComponent(\n  AppLayoutSplitPanelDrawerBottomImplementation\n);\n"]}

package/app-layout/visual-refresh-toolbar/split-panel/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "split-panel-side": "awsui_split-panel-side_j4v3w_woacl_97"
+};
+  

package/app-layout/visual-refresh-toolbar/split-panel/styles.scoped.css

@@ -0,0 +1,100 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_split-panel-side_j4v3w_woacl_97:not(#\9) {
+  position: sticky;
+  z-index: 830;
+}

package/app-layout/visual-refresh-toolbar/split-panel/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "split-panel-side": "awsui_split-panel-side_j4v3w_woacl_97"
+};
+  

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AppLayoutInternals } from '../interfaces';
+interface DrawerTriggersProps {
+    appLayoutInternals: AppLayoutInternals;
+}
+export declare function DrawerTriggers({ appLayoutInternals }: DrawerTriggersProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=drawer-triggers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-triggers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,UAAU,mBAAmB;IAC3B,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,cAAc,CAAC,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,sBAiIzE"}

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

@@ -0,0 +1,60 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { splitItems } from '../../drawer/drawers-helpers';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { TOOLS_DRAWER_ID } from '../../utils/use-drawers';
+import OverflowMenu from '../../drawer/overflow-menu';
+import TriggerButton from './trigger-button';
+import testutilStyles from '../../test-classes/styles.css.js';
+import splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';
+export function DrawerTriggers({ appLayoutInternals }) {
+    const { ariaLabels, activeDrawer, drawers, drawersFocusControl, isMobile, splitPanelOpen, splitPanelControlId, splitPanelPosition, splitPanelFocusControl, splitPanelToggleConfig, headerVariant, onSplitPanelToggle, onActiveDrawerChange, } = appLayoutInternals;
+    const hasMultipleTriggers = drawers.length > 1;
+    const activeDrawerId = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
+    const splitPanelIcon = splitPanelPosition === 'side' ? 'view-vertical' : 'view-horizontal';
+    const previousActiveDrawerId = useRef(activeDrawerId);
+    const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);
+    if (!drawers && !splitPanelToggleConfig.displayed) {
+        return null;
+    }
+    if (activeDrawerId) {
+        previousActiveDrawerId.current = activeDrawerId;
+    }
+    const getIndexOfOverflowItem = () => {
+        if (isMobile) {
+            return 2;
+        }
+        if (containerWidth) {
+            const ITEM_WIDTH = 50; // Roughly 34px + padding = 42px but added extra for safety
+            const overflowSpot = containerWidth;
+            const index = Math.floor(overflowSpot / ITEM_WIDTH);
+            let splitPanelItem = 0;
+            if (splitPanelToggleConfig.displayed) {
+                splitPanelItem = 1;
+            }
+            return index - splitPanelItem;
+        }
+        return 0;
+    };
+    const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null);
+    const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);
+    const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;
+    return (React.createElement("aside", { className: clsx(styles['drawers-desktop-triggers-container'], {
+            [styles['has-multiple-triggers']]: hasMultipleTriggers,
+            [styles['has-open-drawer']]: activeDrawer,
+        }), "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, ref: triggersContainerRef, role: "region" },
+        React.createElement("div", { className: clsx(styles['drawers-trigger-content'], {
+                [styles['has-multiple-triggers']]: hasMultipleTriggers,
+                [styles['has-open-drawer']]: activeDrawer,
+            }), role: "toolbar", "aria-orientation": "horizontal" },
+            splitPanelToggleConfig.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggleConfig.ariaLabel, ariaControls: splitPanelControlId, ariaExpanded: splitPanelOpen, className: clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelIcon, onClick: () => onSplitPanelToggle(), selected: splitPanelOpen, ref: splitPanelFocusControl.refs.toggle })),
+            visibleItems.map(item => {
+                var _a;
+                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(activeDrawerId !== item.id ? item.id : null), ref: item.id === previousActiveDrawerId.current ? drawersFocusControl.refs.toggle : undefined, selected: item.id === activeDrawerId, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, highContrastHeader: headerVariant === 'high-contrast' }));
+            }),
+            overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems, 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 }) => (React.createElement(TriggerButton, { ref: triggerRef, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, badge: overflowMenuHasBadge, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass), iconName: "ellipsis", onClick: onClick, highContrastHeader: headerVariant === 'high-contrast' })), onItemClick: event => onActiveDrawerChange(event.detail.id) })))));
+}
+//# sourceMappingURL=drawer-triggers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-triggers.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.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, { useRef } from 'react';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { splitItems } from '../../drawer/drawers-helpers';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport OverflowMenu from '../../drawer/overflow-menu';\nimport TriggerButton from './trigger-button';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';\nimport { AppLayoutInternals } from '../interfaces';\n\ninterface DrawerTriggersProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function DrawerTriggers({ appLayoutInternals }: DrawerTriggersProps) {\n  const {\n    ariaLabels,\n    activeDrawer,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    splitPanelOpen,\n    splitPanelControlId,\n    splitPanelPosition,\n    splitPanelFocusControl,\n    splitPanelToggleConfig,\n    headerVariant,\n    onSplitPanelToggle,\n    onActiveDrawerChange,\n  } = appLayoutInternals;\n\n  const hasMultipleTriggers = drawers.length > 1;\n  const activeDrawerId = activeDrawer?.id;\n  const splitPanelIcon = splitPanelPosition === 'side' ? 'view-vertical' : 'view-horizontal';\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);\n  if (!drawers && !splitPanelToggleConfig.displayed) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const getIndexOfOverflowItem = () => {\n    if (isMobile) {\n      return 2;\n    }\n    if (containerWidth) {\n      const ITEM_WIDTH = 50; // Roughly 34px + padding = 42px but added extra for safety\n      const overflowSpot = containerWidth;\n\n      const index = Math.floor(overflowSpot / ITEM_WIDTH);\n\n      let splitPanelItem = 0;\n      if (splitPanelToggleConfig.displayed) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId ?? null);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n\n  return (\n    <aside\n      className={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: activeDrawer,\n      })}\n      aria-label={ariaLabels?.drawers}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: activeDrawer,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        {splitPanelToggleConfig.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggleConfig.ariaLabel}\n            ariaControls={splitPanelControlId}\n            ariaExpanded={splitPanelOpen}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName={splitPanelIcon}\n            onClick={() => onSplitPanelToggle()}\n            selected={splitPanelOpen}\n            ref={splitPanelFocusControl.refs.toggle}\n          />\n        )}\n        {visibleItems.map(item => {\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                !toolsOnlyMode && testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              key={item.id}\n              onClick={() => onActiveDrawerChange(activeDrawerId !== item.id ? item.id : null)}\n              ref={item.id === previousActiveDrawerId.current ? drawersFocusControl.refs.toggle : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            )}\n            onItemClick={event => onActiveDrawerChange(event.detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}

package/app-layout/visual-refresh-toolbar/toolbar/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AppLayoutInternals } from '../interfaces';
+interface AppLayoutToolbarImplementationProps {
+    appLayoutInternals: AppLayoutInternals;
+}
+export declare function AppLayoutToolbarImplementation({ appLayoutInternals }: AppLayoutToolbarImplementationProps): JSX.Element;
+export declare const createWidgetizedAppLayoutToolbar: (Loader?: typeof AppLayoutToolbarImplementation | undefined) => typeof AppLayoutToolbarImplementation;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,UAAU,mCAAmC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,8BAA8B,CAAC,EAAE,kBAAkB,EAAE,EAAE,mCAAmC,eAqFzG;AAED,eAAO,MAAM,gCAAgC,uGAA4D,CAAC"}