npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.266 → 3.0.268 - Mend

@cloudscape-design/components-themeable 3.0.266 → 3.0.268

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

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "b30cd3440f5eda4f506377dbec40acd42b48d84d"
+  "commit": "574a45b2be3c60702be73db8939622af269e6b0e"
 }

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

@@ -38,8 +38,18 @@
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     position: fixed;
     right: 0;
-    top: var(#{custom-props.$offsetTop});
     z-index: 1001;
+    /*
+    When disableBodyScroll is true the offsetTop will be relative to the
+    app layout and not the body. However, the drawer position changes
+    to fixed in mobile viewports. The top value needs to include the
+    header because fixed position switches the top value so it is now
+    relative to the body.
+    */
+    &.disable-body-scroll {
+      top: var(#{custom-props.$headerHeight});
+    }
   }
 }

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

@@ -36,8 +36,18 @@
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     left: 0;
     position: fixed;
-    top: var(#{custom-props.$offsetTop});
     z-index: 1001;
+    /*
+    When disableBodyScroll is true the offsetTop will be relative to the
+    app layout and not the body. However, the drawer position changes
+    to fixed in mobile viewports. The top value needs to include the
+    header because fixed position switches the top value so it is now
+    relative to the body.
+    */
+    &.disable-body-scroll {
+      top: var(#{custom-props.$headerHeight});
+    }
   }
 }

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

@@ -44,8 +44,18 @@ viewport size and state of the Tools drawer.
     #{custom-props.$toolsWidth}: auto;
     position: fixed;
     right: 0;
-    top: var(#{custom-props.$offsetTop});
     z-index: 1001;
+    /*
+    When disableBodyScroll is true the offsetTop will be relative to the
+    app layout and not the body. However, the drawer position changes
+    to fixed in mobile viewports. The top value needs to include the
+    header because fixed position switches the top value so it is now
+    relative to the body.
+    */
+    &.disable-body-scroll {
+      top: var(#{custom-props.$headerHeight});
+    }
   }
 }

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

@@ -5,6 +5,7 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '../../internal/hooks/focus-visible' as focus-visible;
 $cell-vertical-padding: awsui.$space-scaled-xs;
 // Calculate padding to prevent a shift in content after selection due to the difference
@@ -134,6 +135,7 @@ $border-placeholder: awsui.$border-item-width solid transparent;
   &-selected:not(.body-cell-prev-selected) {
     padding-top: $cell-vertical-padding;
   }
+  &-success,
   &-editor {
     top: 0;
     right: 0;
@@ -201,10 +203,16 @@ $border-placeholder: awsui.$border-item-width solid transparent;
         & > .body-cell-editor {
           opacity: 1;
         }
+        & > .body-cell-success {
+          opacity: 0;
+        }
       }
       & > .body-cell-editor {
         opacity: 0;
       }
+      &.body-cell-has-success {
+        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+      }
       // We don't use our focus-visible polyfill here because it doesn't work properly with screen readers.
       // These edit buttons are special because they are visually hidden (opacity: 0), but exposed to assistive technology.
       // It's therefore important to display the focus outline, even when a keyboard user wasn't detected.
@@ -261,3 +269,157 @@ $border-placeholder: awsui.$border-item-width solid transparent;
     }
   }
 }
+// Header cell styles
+.header-cell {
+  position: relative;
+  text-align: left;
+  box-sizing: border-box;
+  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  background: awsui.$color-background-table-header;
+  color: awsui.$color-text-column-header;
+  font-weight: awsui.$font-heading-s-weight;
+  @include styles.font-smoothing;
+  padding: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
+  &-sticky {
+    border-bottom: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
+  }
+  &-stuck:not(.header-cell-variant-full-page) {
+    border-bottom-color: transparent;
+  }
+  &-variant-full-page.header-cell-hidden {
+    border-bottom-color: transparent;
+  }
+  &:last-child,
+  &.header-cell-sortable {
+    padding-right: awsui.$space-xs;
+  }
+  &:not(:last-child):before {
+    $gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    min-height: awsui.$font-heading-xs-line-height;
+    max-height: calc(100% - #{$gap});
+    margin: auto;
+    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    box-sizing: border-box;
+  }
+  &-resizable:not(:last-child):before {
+    border-left-color: awsui.$color-border-divider-interactive-default;
+  }
+}
+.sorting-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: awsui.$space-xxs;
+  color: awsui.$color-text-column-sorting-icon;
+}
+.edit-icon {
+  margin-left: awsui.$space-xxs;
+  margin-top: awsui.$space-scaled-xxs;
+  color: inherit;
+}
+.header-cell-content {
+  position: relative;
+  padding: awsui.$space-scaled-xxs awsui.$space-s;
+  .header-cell-sortable > & {
+    padding-right: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
+  }
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
+  }
+  // stylelint-disable-next-line selector-combinator-disallowed-list
+  body[data-awsui-focus-visible='true'] &.header-cell-fake-focus {
+    @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
+  }
+  .header-cell-disabled.header-cell-sorted > & {
+    & > .sorting-icon {
+      color: awsui.$color-text-interactive-disabled;
+    }
+  }
+}
+.header-cell-sortable:not(.header-cell-disabled) {
+  & > .header-cell-content {
+    cursor: pointer;
+  }
+  & > .header-cell-content:hover,
+  &.header-cell-sorted > .header-cell-content {
+    color: awsui.$color-text-interactive-active;
+    & > .sorting-icon {
+      color: awsui.$color-text-interactive-active;
+    }
+  }
+}
+.header-cell-text {
+  line-height: awsui.$font-heading-xs-line-height;
+  padding-top: calc(#{awsui.$space-xxxs} / 2);
+  padding-bottom: calc(#{awsui.$space-xxxs} / 2);
+  &:not(.header-cell-text-wrap) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.header-cell-ascending,
+.header-cell-descending {
+  /* used in test-utils */
+}
+/*
+In Visual Refresh the first cell in the header should align
+with the left edge of the table as closely as possible. If the
+last header cell is sortable the sort icon should align with the
+settings icon in the pagination slot.
+*/
+.header-cell:not(.is-visual-refresh) {
+  &:first-child {
+    padding-left: awsui.$space-xs;
+  }
+}
+.header-cell.is-visual-refresh {
+  &:first-child:not(.has-striped-rows) {
+    padding-left: awsui.$space-xxxs;
+  }
+  /*
+  Striped rows requires additional left padding because the
+  shaded background makes the child content appear too close
+  to the table edge.
+  */
+  &:first-child.has-striped-rows {
+    padding-left: awsui.$space-xxs;
+  }
+  &:first-child > .header-cell-content {
+    padding-left: 0;
+  }
+  &:last-child.header-cell-sortable {
+    padding-right: awsui.$space-xxxs;
+  }
+}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAQlE,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;CACjE;AAED,kBAAU,YAAY,CAAC;IACrB,MAAM,WAAW,MAAM;QACrB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,OAAO,CAAC;KAClB;IAED,MAAM,WAAW,YAAY;QAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;KAC/B;IAED,UAAU,MAAM;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;IACD,UAAU,OAAO;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB;;CACF;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,~~uBAsB9B~~;AAiLD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAsE7B"}
1	+ {"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAQlE,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;CACjE;AAED,kBAAU,YAAY,CAAC;IACrB,MAAM,WAAW,MAAM;QACrB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,OAAO,CAAC;KAClB;IAED,MAAM,WAAW,YAAY;QAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;KAC/B;IAED,UAAU,MAAM;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;IACD,UAAU,OAAO;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB;;CACF;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBAuB9B;AAiLD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAsE7B"}

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

@@ -17,12 +17,13 @@ import testutilStyles from '../test-classes/styles.css.js';
  * do not exist then the Tools and SplitPanel will be handled by the Tools component.
  */
 export default function Drawers() {
-    const { drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } = useAppLayoutInternals();
+    const { disableBodyScroll, drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } = useAppLayoutInternals();
     const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;
     if (!drawers) {
         return null;
     }
     return (React.createElement("div", { className: clsx(styles['drawers-container'], {
+            [styles['disable-body-scroll']]: disableBodyScroll,
             [styles['has-open-drawer']]: hasOpenDrawer,
             [styles.unfocusable]: isUnfocusable,
         }) },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.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 clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { IconProps } from '../../icon/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { NonCancelableEventHandler } from '../../internal/events';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport interface DrawersProps {\n activeDrawerId?: string;\n items: ReadonlyArray<DrawersProps.Drawer>;\n onChange?: NonCancelableEventHandler<DrawersProps.ChangeDetail>;\n}\n\nnamespace DrawersProps {\n export interface Drawer {\n ariaLabels?: Labels;\n content: React.ReactNode;\n id: string;\n trigger: Trigger;\n }\n\n export interface ChangeDetail {\n activeDrawerId: string \| null;\n }\n\n interface Labels {\n closeButton?: string;\n content?: string;\n triggerButton?: string;\n resizeHandle?: string;\n }\n interface Trigger {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n iconUrl?: string;\n }\n}\n\n/*\n The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n /\nexport default function Drawers() {\n const { drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } =\n useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n if (!drawers) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n <DesktopTriggers />\n </div>\n );\n}\n\n/\n The ActiveDrawer component will render either the drawer content that corresponds\n * to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.\n * The aria labels, click handling, and focus handling will be updated dynamically\n * based on the active drawer or tools content.\n /\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n activeDrawerWidth,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n isToolsOpen,\n navigationHide,\n tools,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.items.find((item: any) => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.content : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId && !isToolsOpen;\n const isUnfocusable = isHidden \|\| (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n\n return (\n <aside\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [styles['is-drawer-open']]: activeDrawerId \|\| isToolsOpen,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsOpen,\n })}\n style={{\n ...(!isMobile && activeDrawerWidth && { [customCssProps.activeDrawerWidth]: `${activeDrawerWidth}px` }),\n }}\n >\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsOpen,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n ref={isToolsOpen ? toolsRefs.close : drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n\n <div className={styles['drawer-content']}>\n {activeDrawerId && activeDrawer?.content}\n {isToolsOpen && tools}\n </div>\n </aside>\n );\n}\n\n/\n The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n /\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n handleToolsClick,\n hasOpenDrawer,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (isMobile) {\n return null;\n }\n\n return (\n <aside\n className={clsx(\n styles['drawers-desktop-triggers-container'],\n testutilStyles['drawers-desktop-triggers-container'],\n {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n }\n )}\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n >\n {!toolsHide && tools && (\n <TriggerButton\n ariaLabel={ariaLabels?.toolsToggle}\n className={clsx(styles['drawers-trigger'], testutilStyles['tools-toggle'])}\n iconName=\"status-info\"\n onClick={() => {\n activeDrawerId && handleDrawersClick(null, true);\n handleToolsClick(!isToolsOpen);\n }}\n ref={toolsRefs.toggle}\n selected={isToolsOpen}\n />\n )}\n\n {drawers.items.map((item: DrawersProps.Drawer) => (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => {\n isToolsOpen && handleToolsClick(!isToolsOpen, true);\n handleDrawersClick(item.id);\n }}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n />\n ))}\n\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n className={clsx(styles['drawers-trigger'], splitPanelStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/\n The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isToolsOpen,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (!isMobile \|\| !drawers) {\n return null;\n }\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx(\n styles['drawers-mobile-triggers-container'],\n testutilStyles['drawers-mobile-triggers-container'],\n {\n [styles.unfocusable]: hasDrawerViewportOverlay,\n }\n )}\n >\n {!toolsHide && tools && (\n <InternalButton\n ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n ariaExpanded={isToolsOpen}\n className={testutilStyles['tools-toggle']}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName=\"status-info\"\n onClick={() => handleToolsClick(true)}\n ref={toolsRefs.toggle}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n )}\n\n {drawers.items.map((item: DrawersProps.Drawer) => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={testutilStyles['drawers-trigger']}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n ))}\n </aside>\n );\n}\n"]}
1	+ {"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.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 clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { IconProps } from '../../icon/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { NonCancelableEventHandler } from '../../internal/events';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport interface DrawersProps {\n activeDrawerId?: string;\n items: ReadonlyArray<DrawersProps.Drawer>;\n onChange?: NonCancelableEventHandler<DrawersProps.ChangeDetail>;\n}\n\nnamespace DrawersProps {\n export interface Drawer {\n ariaLabels?: Labels;\n content: React.ReactNode;\n id: string;\n trigger: Trigger;\n }\n\n export interface ChangeDetail {\n activeDrawerId: string \| null;\n }\n\n interface Labels {\n closeButton?: string;\n content?: string;\n triggerButton?: string;\n resizeHandle?: string;\n }\n interface Trigger {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n iconUrl?: string;\n }\n}\n\n/*\n The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n /\nexport default function Drawers() {\n const { disableBodyScroll, drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } =\n useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n if (!drawers) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n <DesktopTriggers />\n </div>\n );\n}\n\n/\n The ActiveDrawer component will render either the drawer content that corresponds\n * to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.\n * The aria labels, click handling, and focus handling will be updated dynamically\n * based on the active drawer or tools content.\n /\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n activeDrawerWidth,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n isToolsOpen,\n navigationHide,\n tools,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.items.find((item: any) => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.content : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId && !isToolsOpen;\n const isUnfocusable = isHidden \|\| (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n\n return (\n <aside\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [styles['is-drawer-open']]: activeDrawerId \|\| isToolsOpen,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsOpen,\n })}\n style={{\n ...(!isMobile && activeDrawerWidth && { [customCssProps.activeDrawerWidth]: `${activeDrawerWidth}px` }),\n }}\n >\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsOpen,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n ref={isToolsOpen ? toolsRefs.close : drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n\n <div className={styles['drawer-content']}>\n {activeDrawerId && activeDrawer?.content}\n {isToolsOpen && tools}\n </div>\n </aside>\n );\n}\n\n/\n The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n /\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n handleToolsClick,\n hasOpenDrawer,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (isMobile) {\n return null;\n }\n\n return (\n <aside\n className={clsx(\n styles['drawers-desktop-triggers-container'],\n testutilStyles['drawers-desktop-triggers-container'],\n {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n }\n )}\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n >\n {!toolsHide && tools && (\n <TriggerButton\n ariaLabel={ariaLabels?.toolsToggle}\n className={clsx(styles['drawers-trigger'], testutilStyles['tools-toggle'])}\n iconName=\"status-info\"\n onClick={() => {\n activeDrawerId && handleDrawersClick(null, true);\n handleToolsClick(!isToolsOpen);\n }}\n ref={toolsRefs.toggle}\n selected={isToolsOpen}\n />\n )}\n\n {drawers.items.map((item: DrawersProps.Drawer) => (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => {\n isToolsOpen && handleToolsClick(!isToolsOpen, true);\n handleDrawersClick(item.id);\n }}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n />\n ))}\n\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n className={clsx(styles['drawers-trigger'], splitPanelStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/\n The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isToolsOpen,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (!isMobile \|\| !drawers) {\n return null;\n }\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx(\n styles['drawers-mobile-triggers-container'],\n testutilStyles['drawers-mobile-triggers-container'],\n {\n [styles.unfocusable]: hasDrawerViewportOverlay,\n }\n )}\n >\n {!toolsHide && tools && (\n <InternalButton\n ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n ariaExpanded={isToolsOpen}\n className={testutilStyles['tools-toggle']}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName=\"status-info\"\n onClick={() => handleToolsClick(true)}\n ref={toolsRefs.toggle}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n )}\n\n {drawers.items.map((item: DrawersProps.Drawer) => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={testutilStyles['drawers-trigger']}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n ))}\n </aside>\n );\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":";AAaA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,~~uBAkGjC~~"}
1	+ {"version":3,"file":"navigation.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":";AAaA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,uBAoGjC"}

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

@@ -18,7 +18,7 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  * passed through the API;
  */
 export default function Navigation() {
-    const { ariaLabels, handleNavigationClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, navigation, navigationHide, navigationWidth, isToolsOpen, toolsHide, navigationRefs, } = useAppLayoutInternals();
+    const { ariaLabels, disableBodyScroll, handleNavigationClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, navigation, navigationHide, navigationWidth, isToolsOpen, toolsHide, navigationRefs, } = useAppLayoutInternals();
     if (navigationHide) {
         return null;
     }
@@ -33,8 +33,9 @@ export default function Navigation() {
     return (React.createElement(Transition, { in: isNavigationOpen }, (state, transitionEventsRef) => {
         var _a, _b, _c;
         return (React.createElement("div", { className: clsx(styles['navigation-container'], {
-                [testutilStyles['drawer-closed']]: !isNavigationOpen,
+                [styles['disable-body-scroll']]: disableBodyScroll,
                 [styles.unfocusable]: isUnfocusable,
+                [testutilStyles['drawer-closed']]: !isNavigationOpen,
             }),
             // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.
             style: Object.assign({}, (navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` })) },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAE5E;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,MAAM,EACJ,UAAU,EACV,qBAAqB,EACrB,wBAAwB,EACxB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,SAAS,EACT,cAAc,GACf,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,cAAc,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,qBAAqB,CAAC,KAAK,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,wBAAwB,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAErG,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,gBAAgB,IAC7B,CAAC,KAAK,EAAE,mBAAmB,EAAE,EAAE;;QAAC,OAAA,CAC/B,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE;gBAC9C,CAAC,~~cAAc~~,CAAC,~~eAAe~~,CAAC,CAAC,EAAE,~~CAAC,gBAAgB~~;~~gBACpD~~,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,aAAa;~~aACpC~~,CAAC;YACF,4GAA4G;YAC5G,KAAK,oBAAO,CAAC,eAAe,IAAI,EAAE,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI,EAAE,CAAC;YAE5F,CAAC,QAAQ,IAAI,CACZ,4CACe,QAAQ,IAAI,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,gBAC5C,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE;oBACzC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,SAAS;oBACvC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,gBAAgB;iBACjD,CAAC,EACF,GAAG,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS;gBAE1D,oBAAC,aAAa,IACZ,SAAS,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,EACvC,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAC1C,GAAG,EAAE,cAAc,CAAC,MAAM,GAC1B,CACE,CACP;YAED,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;oBACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,UAAU;oBACxC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,gBAAgB;iBACjD,EACD,cAAc,CAAC,UAAU,CAC1B,EACD,GAAG,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,iBAC7C,CAAC,gBAAgB,EAC9B,OAAO,EAAE,KAAK,CAAC,EAAE;oBACf,iBAAiB,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBAChD,CAAC;gBAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;oBAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;wBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAC3C,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,cAAc,CAAC,KAAK,GACzB,CACE;oBACL,UAAU,CACP,CACF,CACF,CACP,CAAA;KAAA,CACU,CACd,CAAC;AACJ,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 { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/*\n The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n const {\n ariaLabels,\n handleNavigationClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n navigation,\n navigationHide,\n navigationWidth,\n isToolsOpen,\n toolsHide,\n navigationRefs,\n } = useAppLayoutInternals();\n\n if (navigationHide) {\n return null;\n }\n\n // Close the Navigation drawer on mobile when a user clicks a link inside.\n const onNavigationClick = (event: React.MouseEvent) => {\n const hasLink = findUpUntil(\n event.target as HTMLElement,\n node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n );\n if (hasLink && isMobile) {\n handleNavigationClick(false);\n }\n };\n\n const isUnfocusable = hasDrawerViewportOverlay && (!isNavigationOpen \|\| (isToolsOpen && !toolsHide));\n\n return (\n <Transition in={isNavigationOpen}>\n {(state, transitionEventsRef) => (\n <div\n className={clsx(styles['navigation-container'], {\n [~~testutilStyles~~['~~drawer~~-~~closed~~']]: ~~!isNavigationOpen~~,\n [styles.unfocusable]: isUnfocusable,\n })}\n // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n >\n {!isMobile && (\n <nav\n aria-hidden={isMobile \|\| isNavigationOpen ? true : false}\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(styles['show-navigation'], {\n [styles.animating]: state === 'exiting',\n [styles['is-navigation-open']]: isNavigationOpen,\n })}\n ref={state === 'exiting' ? transitionEventsRef : undefined}\n >\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => handleNavigationClick(true)}\n ref={navigationRefs.toggle}\n />\n </nav>\n )}\n\n <nav\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(\n styles.navigation,\n {\n [styles.animating]: state === 'entering',\n [styles['is-navigation-open']]: isNavigationOpen,\n },\n testutilStyles.navigation\n )}\n ref={state !== 'exiting' ? transitionEventsRef : undefined}\n aria-hidden={!isNavigationOpen}\n onClick={event => {\n onNavigationClick && onNavigationClick(event);\n }}\n >\n <div className={clsx(styles['animated-content'])}>\n <div className={clsx(styles['hide-navigation'])}>\n <InternalButton\n ariaLabel={ariaLabels?.navigationClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-left'}\n onClick={() => handleNavigationClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={navigationRefs.close}\n />\n </div>\n {navigation}\n </div>\n </nav>\n </div>\n )}\n </Transition>\n );\n}\n"]}
1	+ {"version":3,"file":"navigation.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/navigation.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 { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/*\n The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n const {\n ariaLabels,\n disableBodyScroll,\n handleNavigationClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n navigation,\n navigationHide,\n navigationWidth,\n isToolsOpen,\n toolsHide,\n navigationRefs,\n } = useAppLayoutInternals();\n\n if (navigationHide) {\n return null;\n }\n\n // Close the Navigation drawer on mobile when a user clicks a link inside.\n const onNavigationClick = (event: React.MouseEvent) => {\n const hasLink = findUpUntil(\n event.target as HTMLElement,\n node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n );\n if (hasLink && isMobile) {\n handleNavigationClick(false);\n }\n };\n\n const isUnfocusable = hasDrawerViewportOverlay && (!isNavigationOpen \|\| (isToolsOpen && !toolsHide));\n\n return (\n <Transition in={isNavigationOpen}>\n {(state, transitionEventsRef) => (\n <div\n className={clsx(styles['navigation-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['drawer-closed']]: !isNavigationOpen,\n })}\n // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n >\n {!isMobile && (\n <nav\n aria-hidden={isMobile \|\| isNavigationOpen ? true : false}\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(styles['show-navigation'], {\n [styles.animating]: state === 'exiting',\n [styles['is-navigation-open']]: isNavigationOpen,\n })}\n ref={state === 'exiting' ? transitionEventsRef : undefined}\n >\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => handleNavigationClick(true)}\n ref={navigationRefs.toggle}\n />\n </nav>\n )}\n\n <nav\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(\n styles.navigation,\n {\n [styles.animating]: state === 'entering',\n [styles['is-navigation-open']]: isNavigationOpen,\n },\n testutilStyles.navigation\n )}\n ref={state !== 'exiting' ? transitionEventsRef : undefined}\n aria-hidden={!isNavigationOpen}\n onClick={event => {\n onNavigationClick && onNavigationClick(event);\n }}\n >\n <div className={clsx(styles['animated-content'])}>\n <div className={clsx(styles['hide-navigation'])}>\n <InternalButton\n ariaLabel={ariaLabels?.navigationClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-left'}\n onClick={() => handleNavigationClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={navigationRefs.close}\n />\n </div>\n {navigation}\n </div>\n </nav>\n </div>\n )}\n </Transition>\n );\n}\n"]}

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

@@ -1,76 +1,76 @@
     import './styles.scoped.css';
     export default {
-  "appbar": "awsui_appbar_hyvsj_wxk9v_93",
-  "appbar-nav": "awsui_appbar-nav_hyvsj_wxk9v_117",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_wxk9v_121",
-  "appbar-tools": "awsui_appbar-tools_hyvsj_wxk9v_125",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_wxk9v_126",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_wxk9v_167",
-  "has-notifications-content": "awsui_has-notifications-content_hyvsj_wxk9v_175",
-  "has-header": "awsui_has-header_hyvsj_wxk9v_181",
-  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_wxk9v_181",
-  "content-type-wizard": "awsui_content-type-wizard_hyvsj_wxk9v_182",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_wxk9v_185",
-  "content-type-table": "awsui_content-type-table_hyvsj_wxk9v_186",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_wxk9v_189",
-  "background": "awsui_background_hyvsj_wxk9v_224",
-  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_wxk9v_227",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_wxk9v_240",
-  "overlap": "awsui_overlap_hyvsj_wxk9v_246",
-  "drawers-container": "awsui_drawers-container_hyvsj_wxk9v_270",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_wxk9v_282",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_wxk9v_312",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_wxk9v_330",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_wxk9v_362",
-  "drawer": "awsui_drawer_hyvsj_wxk9v_126",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_wxk9v_406",
-  "drawer-content": "awsui_drawer-content_hyvsj_wxk9v_411",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_wxk9v_416",
-  "content": "awsui_content_hyvsj_wxk9v_182",
-  "layout": "awsui_layout_hyvsj_wxk9v_518",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_wxk9v_601",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_wxk9v_616",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_wxk9v_643",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_wxk9v_646",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_wxk9v_650",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_wxk9v_664",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_wxk9v_664",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_wxk9v_676",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_wxk9v_679",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_wxk9v_694",
-  "container": "awsui_container_hyvsj_wxk9v_702",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_wxk9v_728",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_wxk9v_733",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_wxk9v_736",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_wxk9v_736",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_wxk9v_736",
-  "content-type-default": "awsui_content-type-default_hyvsj_wxk9v_756",
-  "content-type-form": "awsui_content-type-form_hyvsj_wxk9v_756",
-  "unfocusable": "awsui_unfocusable_hyvsj_wxk9v_797",
-  "navigation-container": "awsui_navigation-container_hyvsj_wxk9v_807",
-  "show-navigation": "awsui_show-navigation_hyvsj_wxk9v_842",
-  "animating": "awsui_animating_hyvsj_wxk9v_864",
-  "showButtons": "awsui_showButtons_hyvsj_wxk9v_1",
-  "navigation": "awsui_navigation_hyvsj_wxk9v_807",
-  "openNavigation": "awsui_openNavigation_hyvsj_wxk9v_1",
-  "animated-content": "awsui_animated-content_hyvsj_wxk9v_925",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_wxk9v_934",
-  "notifications": "awsui_notifications_hyvsj_wxk9v_227",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_wxk9v_1001",
-  "position-bottom": "awsui_position-bottom_hyvsj_wxk9v_1047",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_wxk9v_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_wxk9v_1076",
-  "position-side": "awsui_position-side_hyvsj_wxk9v_1104",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_wxk9v_1",
-  "tools-container": "awsui_tools-container_hyvsj_wxk9v_1141",
-  "tools": "awsui_tools_hyvsj_wxk9v_1141",
-  "openTools": "awsui_openTools_hyvsj_wxk9v_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_wxk9v_1226",
-  "hide-tools": "awsui_hide-tools_hyvsj_wxk9v_1236",
-  "show-tools": "awsui_show-tools_hyvsj_wxk9v_1248",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_wxk9v_1226",
-  "trigger": "awsui_trigger_hyvsj_wxk9v_1315",
-  "selected": "awsui_selected_hyvsj_wxk9v_1354"
+  "appbar": "awsui_appbar_hyvsj_uod0r_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_uod0r_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_uod0r_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_uod0r_125",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_uod0r_126",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_uod0r_167",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_uod0r_175",
+  "has-header": "awsui_has-header_hyvsj_uod0r_181",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_uod0r_181",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_uod0r_182",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_uod0r_185",
+  "content-type-table": "awsui_content-type-table_hyvsj_uod0r_186",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_uod0r_189",
+  "background": "awsui_background_hyvsj_uod0r_224",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_uod0r_227",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_uod0r_240",
+  "overlap": "awsui_overlap_hyvsj_uod0r_246",
+  "drawers-container": "awsui_drawers-container_hyvsj_uod0r_270",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_uod0r_282",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_uod0r_316",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_uod0r_321",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_uod0r_339",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_uod0r_371",
+  "drawer": "awsui_drawer_hyvsj_uod0r_126",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_uod0r_415",
+  "drawer-content": "awsui_drawer-content_hyvsj_uod0r_420",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_uod0r_425",
+  "content": "awsui_content_hyvsj_uod0r_182",
+  "layout": "awsui_layout_hyvsj_uod0r_527",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_uod0r_610",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_uod0r_625",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_uod0r_652",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_uod0r_659",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_uod0r_673",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_uod0r_673",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_uod0r_685",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_uod0r_688",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_uod0r_703",
+  "container": "awsui_container_hyvsj_uod0r_711",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_uod0r_737",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_uod0r_742",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_uod0r_745",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_uod0r_745",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_uod0r_745",
+  "content-type-default": "awsui_content-type-default_hyvsj_uod0r_765",
+  "content-type-form": "awsui_content-type-form_hyvsj_uod0r_765",
+  "unfocusable": "awsui_unfocusable_hyvsj_uod0r_806",
+  "navigation-container": "awsui_navigation-container_hyvsj_uod0r_816",
+  "show-navigation": "awsui_show-navigation_hyvsj_uod0r_860",
+  "animating": "awsui_animating_hyvsj_uod0r_882",
+  "showButtons": "awsui_showButtons_hyvsj_uod0r_1",
+  "navigation": "awsui_navigation_hyvsj_uod0r_816",
+  "openNavigation": "awsui_openNavigation_hyvsj_uod0r_1",
+  "animated-content": "awsui_animated-content_hyvsj_uod0r_943",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_uod0r_952",
+  "notifications": "awsui_notifications_hyvsj_uod0r_227",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_uod0r_1019",
+  "position-bottom": "awsui_position-bottom_hyvsj_uod0r_1065",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_uod0r_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_uod0r_1094",
+  "position-side": "awsui_position-side_hyvsj_uod0r_1122",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_uod0r_1",
+  "tools-container": "awsui_tools-container_hyvsj_uod0r_1159",
+  "tools": "awsui_tools_hyvsj_uod0r_1159",
+  "openTools": "awsui_openTools_hyvsj_uod0r_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_uod0r_1253",
+  "hide-tools": "awsui_hide-tools_hyvsj_uod0r_1263",
+  "show-tools": "awsui_show-tools_hyvsj_uod0r_1275",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_uod0r_1253",
+  "trigger": "awsui_trigger_hyvsj_uod0r_1342",
+  "selected": "awsui_selected_hyvsj_uod0r_1381"
 };