npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1033 → 3.0.1035 - Mend

@cloudscape-design/components-themeable 3.0.1033 → 3.0.1035

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

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "0391953a01604dd0406861bdca0e8fe287a61a81"
+  "commit": "25710725e57676826dc30a36e1f39ec30b1211a2"
 }

package/lib/internal/scss/app-layout/visual-refresh/styles.scss CHANGED Viewed

@@ -3,15 +3,15 @@
  SPDX-License-Identifier: Apache-2.0
 */
-@use './background.scss';
-@use './breadcrumbs.scss';
-@use './drawers.scss';
-@use './header.scss';
-@use './layout.scss';
-@use './main.scss';
-@use './mobile-toolbar.scss';
-@use './navigation.scss';
-@use './notifications.scss';
-@use './split-panel.scss';
-@use './tools.scss';
-@use './trigger-button.scss';
+@use './background';
+@use './breadcrumbs';
+@use './drawers';
+@use './header';
+@use './layout';
+@use './main';
+@use './mobile-toolbar';
+@use './navigation';
+@use './notifications';
+@use './split-panel';
+@use './tools';
+@use './trigger-button';

package/lib/internal/scss/app-layout/visual-refresh-toolbar/toolbar/styles.scss CHANGED Viewed

@@ -26,10 +26,6 @@
     inset-block-start: 0px;
   }
-  &.toolbar-hidden {
-    opacity: 0;
-  }
   > .toolbar-container {
     block-size: 100%;
     align-items: center;

package/lib/internal/scss/button/styles.scss CHANGED Viewed

@@ -95,8 +95,10 @@
           'vertical': awsui.$space-button-icon-focus-outline-gutter-vertical,
           'horizontal': awsui.$space-button-focus-outline-gutter,
         ),
-        $border-radius:
-          var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+        $border-radius: var(
+            #{custom-props.$styleFocusRingBorderRadius},
+            awsui.$border-radius-control-default-focus-ring
+          ),
         $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
       );
     }

package/lib/internal/scss/content-layout/styles.scss CHANGED Viewed

@@ -12,7 +12,9 @@
   #{custom-props.$contentLayoutMainGap}: 0px;
   display: grid;
   grid-template-columns: 0 0 1fr minmax(0, var(#{custom-props.$contentLayoutMaxContentWidth})) 1fr 0 0;
-  grid-template-rows: var(#{custom-props.$contentLayoutMainGap}) min-content min-content auto awsui.$space-dark-header-overlap-distance 1fr;
+  grid-template-rows:
+    var(#{custom-props.$contentLayoutMainGap})
+    min-content min-content auto awsui.$space-dark-header-overlap-distance 1fr;
   min-block-size: 100%;
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
@@ -48,10 +50,8 @@
   &.default-padding {
     #{custom-props.$contentLayoutMainGap}: awsui.$space-scaled-m;
     grid-template-columns:
-      var(#{custom-props.$togglesLeftWidth}, 0) var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0) 1fr minmax(
-        0,
-        var(#{custom-props.$contentLayoutMaxContentWidth})
-      )
+      var(#{custom-props.$togglesLeftWidth}, 0) var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0)
+      1fr minmax(0, var(#{custom-props.$contentLayoutMaxContentWidth}))
       1fr var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0) var(#{custom-props.$togglesRightWidth}, 0);
   }

package/lib/internal/scss/icon/styles.scss CHANGED Viewed

@@ -29,25 +29,25 @@
   @include mixins.make-icon-variants;
   &:is(
-      .name-angle-left-double,
-      .name-angle-left,
-      .name-angle-right-double,
-      .name-angle-right,
-      .name-arrow-left,
-      .name-arrow-right,
-      .name-caret-left-filled,
-      .name-caret-right-filled,
-      .name-audio-full,
-      .name-audio-half,
-      .name-audio-off,
-      .name-external,
-      .name-redo,
-      .name-resize-area,
-      .name-send,
-      .name-shrink,
-      .name-undo,
-      .name-view-vertical
-    ) {
+    .name-angle-left-double,
+    .name-angle-left,
+    .name-angle-right-double,
+    .name-angle-right,
+    .name-arrow-left,
+    .name-arrow-right,
+    .name-caret-left-filled,
+    .name-caret-right-filled,
+    .name-audio-full,
+    .name-audio-half,
+    .name-audio-off,
+    .name-external,
+    .name-redo,
+    .name-resize-area,
+    .name-send,
+    .name-shrink,
+    .name-undo,
+    .name-view-vertical
+  ) {
     @include styles.with-direction('rtl') {
       transform: scaleX(-1);
     }

package/lib/internal/scss/input/styles.scss CHANGED Viewed

@@ -84,7 +84,8 @@
     @include styles.form-invalid-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
+        #{styles.$control-icon-horizontal-padding} -
+          (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }
@@ -93,7 +94,8 @@
     @include styles.form-warning-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
+        #{styles.$control-icon-horizontal-padding} -
+          (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }

package/lib/internal/scss/internal/base-component/styles.scss CHANGED Viewed

@@ -8,7 +8,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @use 'awsui:globals';
-@use '../styles/global.scss';
+@use '../styles/global';
 @use '../generated/custom-css-properties' as custom-styles;
 :root {

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "0391953a";
+    $awsui-commit-hash: "25710725";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-kcc2gu;
 $minContentWidth: --awsui-min-content-width-kcc2gu;

package/lib/internal/scss/link/constants.scss CHANGED Viewed

@@ -98,8 +98,7 @@ $link-variants: (
   ),
   // Need separate variant used for backwards compatible styles in classic
   // (vr - button style, classic - underlined link style),
-  'recovery':
-    (
+  'recovery': (
       'text-color-default': awsui.$color-text-link-default,
       'text-color-hover': awsui.$color-text-link-hover,
       'text-color-active': awsui.$color-text-link-hover,
@@ -113,8 +112,7 @@ $link-variants: (
 $link-styles: (
   // A link without an href to be styled like a button
-  'button':
-    (
+  'button': (
       'text-color-default': awsui.$color-text-link-button-normal-default,
       'text-color-hover': awsui.$color-text-link-button-normal-hover,
       'text-color-active': awsui.$color-text-link-button-normal-active,

package/lib/internal/scss/property-filter/styles.scss CHANGED Viewed

@@ -151,7 +151,9 @@ $operator-field-width: 120px;
     display: grid;
     gap: awsui.$space-s;
-    grid-template-columns: minmax(min-content, 2fr) minmax(min-content, $operator-field-width) minmax(min-content, 3fr) min-content;
+    grid-template-columns:
+      minmax(min-content, 2fr) minmax(min-content, $operator-field-width) minmax(min-content, 3fr)
+      min-content;
     &-group {
       display: contents;

package/lib/internal/scss/table/header-cell/styles.scss CHANGED Viewed

@@ -224,7 +224,7 @@ settings icon in the pagination slot.
     @include cell-offset(awsui.$space-xxs);
   }
-  &:last-child.header-cell-sortable {
+  &:last-child.header-cell-sortable:not(.header-cell-resizable) {
     padding-inline-end: awsui.$space-xxxs;
   }

package/lib/internal/scss/table/resizer/styles.scss CHANGED Viewed

@@ -16,7 +16,8 @@
 $handle-width: awsui.$space-xl;
 $active-separator-width: 2px;
-th:not(:last-child) > .divider {
+th:not(:last-child) > .divider,
+.divider-interactive {
   $gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
   position: absolute;
@@ -40,6 +41,10 @@ th:not(:last-child) > .divider {
   }
 }
+th:last-child > .divider-interactive:not(.is-visual-refresh) {
+  inset-inline-end: calc(#{$handle-width} / 2);
+}
 .resizer {
   @include styles.styles-reset;
   border-block: none;
@@ -59,10 +64,6 @@ th:not(:last-child) > .divider {
   .resize-active & {
     pointer-events: none;
   }
-  th:last-child > & {
-    inline-size: calc(#{$handle-width} / 2);
-    inset-inline-end: 0;
-  }
   &:hover + .divider {
     border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }
@@ -76,6 +77,10 @@ th:not(:last-child) > .divider {
   }
 }
+th:last-child > .resizer:not(.is-visual-refresh) {
+  inset-inline-end: 0;
+}
 .tracker {
   display: none;
   position: absolute;

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAE/F,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,mCAAmC;IAClD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,~~eAwJrC~~;AAED,eAAO,MAAM,gCAAgC,uGAG5C,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAE/F,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,mCAAmC;IAClD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eAmHrC;AAED,eAAO,MAAM,gCAAgC,uGAG5C,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js CHANGED Viewed

@@ -16,10 +16,8 @@ export function AppLayoutToolbarImplementation({ appLayoutInternals,
 // not testable in a single-version setup
 toolbarProps = {}, }) {
     var _a, _b, _c;
-    const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, toolbarState, setToolbarState, setToolbarHeight, } = appLayoutInternals;
+    const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, setToolbarHeight } = appLayoutInternals;
     const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, globalDrawersFocusControl, globalDrawers, activeGlobalDrawersIds, onActiveGlobalDrawersChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, expandedDrawerId, setExpandedDrawerId, } = toolbarProps;
-    // TODO: expose configuration property
-    const pinnedToolbar = true;
     const drawerExpandedMode = !!expandedDrawerId;
     const ref = useRef(null);
     useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));
@@ -30,28 +28,6 @@ toolbarProps = {}, }) {
         // unmount effect only
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    useEffect(() => {
-        let lastScrollY = window.scrollY;
-        /* istanbul ignore next not testable in JSDOM */
-        const updateScrollDirection = () => {
-            if (pinnedToolbar) {
-                setToolbarState('show');
-                return;
-            }
-            const scrollY = window.scrollY;
-            // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page
-            const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';
-            // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll
-            if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {
-                setToolbarState(direction);
-            }
-            lastScrollY = scrollY > 0 ? scrollY : 0;
-        };
-        window.addEventListener('scroll', updateScrollDirection);
-        return () => {
-            window.removeEventListener('scroll', updateScrollDirection);
-        };
-    }, [pinnedToolbar, setToolbarState, toolbarState]);
     const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));
     useEffect(() => {
         if (anyPanelOpenInMobile) {
@@ -64,15 +40,13 @@ toolbarProps = {}, }) {
             document.body.classList.remove(styles['block-body-scroll']);
         };
     }, [anyPanelOpenInMobile]);
-    const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;
     const navLandmarkAttributes = navigationOpen
         ? { role: 'presentation' }
         : { role: 'navigation', 'aria-label': ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation };
     return (React.createElement(ToolbarSlot, { ref: ref, className: clsx(styles['universal-toolbar'], testutilStyles.toolbar, {
             [testutilStyles['mobile-bar']]: isMobile,
-            [styles['toolbar-hidden']]: toolbarHidden,
         }), style: {
-            insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,
+            insetBlockStart: verticalOffsets.toolbar,
         } },
         React.createElement("div", { className: styles['toolbar-container'] },
             hasNavigation && (React.createElement("nav", Object.assign({}, navLandmarkAttributes, { className: clsx(styles['universal-toolbar-nav']) }),

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string \| null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n onActiveDrawerChange?: (drawerId: string \| null, params: OnChangeParams) => void;\n globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> \| undefined;\n activeGlobalDrawersIds?: ReadonlyArray<string>;\n onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) \| undefined;\n\n expandedDrawerId?: string \| null;\n setExpandedDrawerId?: (value: string \| null) => void;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n globalDrawersFocusControl,\n globalDrawers,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n expandedDrawerId,\n setExpandedDrawerId,\n } = toolbarProps;\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const drawerExpandedMode = !!expandedDrawerId;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 \|\| scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId \|\| (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n const navLandmarkAttributes = navigationOpen\n ? { role: 'presentation' }\n : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n [testutilStyles['mobile-bar']]: isMobile,\n [styles['toolbar-hidden']]: toolbarHidden,\n })}\n style={{\n insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {hasNavigation && (\n <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={!drawerExpandedMode && navigationOpen}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => {\n if (setExpandedDrawerId) {\n setExpandedDrawerId(null);\n }\n if (navigationOpen && expandedDrawerId) {\n return;\n }\n onNavigationToggle?.(!navigationOpen);\n }}\n ref={navigationFocusRef}\n selected={!drawerExpandedMode && navigationOpen}\n disabled={anyPanelOpenInMobile}\n />\n </nav>\n )}\n {(breadcrumbs \|\| discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n <BreadcrumbsSlot\n ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n />\n </div>\n )}\n {(drawers?.length \|\| globalDrawers?.length \|\| (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <div className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers?.filter(item => !!item.trigger) ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n globalDrawersFocusControl={globalDrawersFocusControl}\n globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n expandedDrawerId={expandedDrawerId}\n setExpandedDrawerId={setExpandedDrawerId!}\n />\n </div>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n AppLayoutToolbarImplementation,\n ToolbarSkeleton\n);\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string \| null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n onActiveDrawerChange?: (drawerId: string \| null, params: OnChangeParams) => void;\n globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> \| undefined;\n activeGlobalDrawersIds?: ReadonlyArray<string>;\n onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) \| undefined;\n\n expandedDrawerId?: string \| null;\n setExpandedDrawerId?: (value: string \| null) => void;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, setToolbarHeight } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n globalDrawersFocusControl,\n globalDrawers,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n expandedDrawerId,\n setExpandedDrawerId,\n } = toolbarProps;\n const drawerExpandedMode = !!expandedDrawerId;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId \|\| (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const navLandmarkAttributes = navigationOpen\n ? { role: 'presentation' }\n : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n [testutilStyles['mobile-bar']]: isMobile,\n })}\n style={{\n insetBlockStart: verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {hasNavigation && (\n <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={!drawerExpandedMode && navigationOpen}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => {\n if (setExpandedDrawerId) {\n setExpandedDrawerId(null);\n }\n if (navigationOpen && expandedDrawerId) {\n return;\n }\n onNavigationToggle?.(!navigationOpen);\n }}\n ref={navigationFocusRef}\n selected={!drawerExpandedMode && navigationOpen}\n disabled={anyPanelOpenInMobile}\n />\n </nav>\n )}\n {(breadcrumbs \|\| discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n <BreadcrumbsSlot\n ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n />\n </div>\n )}\n {(drawers?.length \|\| globalDrawers?.length \|\| (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <div className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers?.filter(item => !!item.trigger) ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n globalDrawersFocusControl={globalDrawersFocusControl}\n globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n expandedDrawerId={expandedDrawerId}\n setExpandedDrawerId={setExpandedDrawerId!}\n />\n </div>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n AppLayoutToolbarImplementation,\n ToolbarSkeleton\n);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/styles.css.js CHANGED Viewed

@@ -1,18 +1,17 @@
     import './styles.scoped.css';
     export default {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_2bw7a_153",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_2bw7a_174",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_2bw7a_177",
-  "toolbar-container": "awsui_toolbar-container_1kzri_2bw7a_180",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_2bw7a_189",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_2bw7a_193",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_2bw7a_198",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_2bw7a_206",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_2bw7a_207",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_2bw7a_250",
-  "group-divider": "awsui_group-divider_1kzri_2bw7a_260",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_2bw7a_250",
-  "block-body-scroll": "awsui_block-body-scroll_1kzri_2bw7a_273"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_ge5s9_153",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_ge5s9_174",
+  "toolbar-container": "awsui_toolbar-container_1kzri_ge5s9_177",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_ge5s9_186",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_ge5s9_190",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_ge5s9_195",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_ge5s9_203",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_ge5s9_204",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_ge5s9_247",
+  "group-divider": "awsui_group-divider_1kzri_ge5s9_257",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_ge5s9_247",
+  "block-body-scroll": "awsui_block-body-scroll_1kzri_ge5s9_270"
 };

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/styles.scoped.css CHANGED Viewed

@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_universal-toolbar_1kzri_2bw7a_153:not(#\9) {
+.awsui_universal-toolbar_1kzri_ge5s9_153:not(#\9) {
   background-color: var(--color-background-layout-panel-content-9tbx75, #ffffff);
   box-sizing: border-box;
   padding-block: 0;
@@ -162,22 +162,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: inset-block-start, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_universal-toolbar_1kzri_2bw7a_153:not(#\9) {
+  .awsui_universal-toolbar_1kzri_ge5s9_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_universal-toolbar_1kzri_2bw7a_153:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_2bw7a_153:not(#\9) {
+.awsui-motion-disabled .awsui_universal-toolbar_1kzri_ge5s9_153:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_ge5s9_153:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_universal-toolbar_1kzri_2bw7a_153.awsui_disable-body-scroll_1kzri_2bw7a_174:not(#\9) {
+.awsui_universal-toolbar_1kzri_ge5s9_153.awsui_disable-body-scroll_1kzri_ge5s9_174:not(#\9) {
   inset-block-start: 0px;
 }
-.awsui_universal-toolbar_1kzri_2bw7a_153.awsui_toolbar-hidden_1kzri_2bw7a_177:not(#\9) {
-  opacity: 0;
-}
-.awsui_universal-toolbar_1kzri_2bw7a_153 > .awsui_toolbar-container_1kzri_2bw7a_180:not(#\9) {
+.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: grid;
@@ -186,16 +183,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-columns: min-content minmax(0, 3fr) minmax(auto, 1fr);
   grid-template-rows: 1fr;
 }
-.awsui_universal-toolbar_1kzri_2bw7a_153 > .awsui_toolbar-container_1kzri_2bw7a_180 > .awsui_universal-toolbar-nav_1kzri_2bw7a_189:not(#\9) {
+.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177 > .awsui_universal-toolbar-nav_1kzri_ge5s9_186:not(#\9) {
   grid-column: 1;
   padding-inline-end: var(--space-static-xxs-0cgyf1, 4px);
 }
-.awsui_universal-toolbar_1kzri_2bw7a_153 > .awsui_toolbar-container_1kzri_2bw7a_180 > .awsui_universal-toolbar-breadcrumbs_1kzri_2bw7a_193:not(#\9) {
+.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177 > .awsui_universal-toolbar-breadcrumbs_1kzri_ge5s9_190:not(#\9) {
   grid-column: 2;
   background-color: transparent;
   flex: 1 0;
 }
-.awsui_universal-toolbar_1kzri_2bw7a_153 > .awsui_toolbar-container_1kzri_2bw7a_180 > .awsui_universal-toolbar-drawers_1kzri_2bw7a_198:not(#\9) {
+.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177 > .awsui_universal-toolbar-drawers_1kzri_ge5s9_195:not(#\9) {
   grid-column: 3;
   column-gap: var(--space-static-xs-4gq40t, 8px);
   display: flex;
@@ -203,8 +200,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
 }
-.awsui_drawers-desktop-triggers-container_1kzri_2bw7a_206:not(#\9),
-.awsui_drawers-mobile-triggers-container_1kzri_2bw7a_207:not(#\9) {
+.awsui_drawers-desktop-triggers-container_1kzri_ge5s9_203:not(#\9),
+.awsui_drawers-mobile-triggers-container_1kzri_ge5s9_204:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -247,7 +244,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 100%;
 }
-.awsui_drawers-trigger-content_1kzri_2bw7a_250:not(#\9) {
+.awsui_drawers-trigger-content_1kzri_ge5s9_247:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: flex;
@@ -257,19 +254,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline-start: var(--space-xs-kw7k3v, 8px);
 }
-.awsui_group-divider_1kzri_2bw7a_260:not(#\9) {
+.awsui_group-divider_1kzri_ge5s9_257:not(#\9) {
   border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
   block-size: 60%;
 }
 @media (max-width: 688px) {
-  .awsui_drawers-trigger_1kzri_2bw7a_250:not(#\9) {
+  .awsui_drawers-trigger_1kzri_ge5s9_247:not(#\9) {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 }
-.awsui_block-body-scroll_1kzri_2bw7a_273:not(#\9) {
+.awsui_block-body-scroll_1kzri_ge5s9_270:not(#\9) {
   overflow: hidden;
 }

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js CHANGED Viewed

@@ -2,18 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_2bw7a_153",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_2bw7a_174",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_2bw7a_177",
-  "toolbar-container": "awsui_toolbar-container_1kzri_2bw7a_180",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_2bw7a_189",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_2bw7a_193",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_2bw7a_198",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_2bw7a_206",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_2bw7a_207",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_2bw7a_250",
-  "group-divider": "awsui_group-divider_1kzri_2bw7a_260",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_2bw7a_250",
-  "block-body-scroll": "awsui_block-body-scroll_1kzri_2bw7a_273"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_ge5s9_153",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_ge5s9_174",
+  "toolbar-container": "awsui_toolbar-container_1kzri_ge5s9_177",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_ge5s9_186",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_ge5s9_190",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_ge5s9_195",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_ge5s9_203",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_ge5s9_204",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_ge5s9_247",
+  "group-divider": "awsui_group-divider_1kzri_ge5s9_257",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_ge5s9_247",
+  "block-body-scroll": "awsui_block-body-scroll_1kzri_ge5s9_270"
 };

package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED Viewed

@@ -3892,5 +3892,5 @@
   }
 }
 :root {
-  --awsui-version-info-0391953a: true;
+  --awsui-version-info-25710725: true;
 }

package/lib/internal/template/internal/environment.js CHANGED Viewed

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (0391953a)";
-export var GIT_SHA = "0391953a";
+export var PACKAGE_VERSION = "3.0.0 (25710725)";
+export var GIT_SHA = "25710725";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "console";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (0391953a)",
-  "GIT_SHA": "0391953a",
+  "PACKAGE_VERSION": "3.0.0 (25710725)",
+  "GIT_SHA": "25710725",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/lib/internal/template/key-value-pairs/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/key-value-pairs/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AA6BlD,QAAA,MAAM,qBAAqB,~~2IAoE1B~~,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/key-value-pairs/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AA6BlD,QAAA,MAAM,qBAAqB,2IA6E1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/internal/template/key-value-pairs/internal.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import Box from '../box/internal';
 import ColumnLayout from '../column-layout/internal';
 import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
@@ -22,9 +22,13 @@ const InternalKeyValuePairGroup = ({ label, value }) => (React.createElement(Rea
     React.createElement("dd", { className: styles.detail }, value)));
 const InternalKeyValuePairs = React.forwardRef((_a, ref) => {
     var { columns, items, className, ariaLabel, ariaLabelledby, minColumnWidth } = _a, rest = __rest(_a, ["columns", "items", "className", "ariaLabel", "ariaLabelledby", "minColumnWidth"]);
+    const MAX_COLUMNS = 4;
+    if (columns > MAX_COLUMNS) {
+        warnOnce('Key-value pairs', `\`columns\` (${columns}) must be <= ${MAX_COLUMNS}. Using ${MAX_COLUMNS} as default.`);
+    }
     return (React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
         React.createElement("div", Object.assign({}, rest, { className: clsx(styles['key-value-pairs'], className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: ref }),
-            React.createElement(ColumnLayout, { __tagOverride: "dl", columns: Math.min(columns, 4), variant: "text-grid", minColumnWidth: minColumnWidth }, items.map((pair, index) => {
+            React.createElement(ColumnLayout, { __tagOverride: "dl", columns: Math.min(columns, MAX_COLUMNS), variant: "text-grid", minColumnWidth: minColumnWidth }, items.map((pair, index) => {
                 if (pair.type === 'group') {
                     return (
                     /* InternalKeyValuePairGroup tells react to treat the dt-dd pair as an individual layout item.