npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.833 → 3.0.835 - Mend

@cloudscape-design/components-themeable 3.0.833 → 3.0.835

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

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "d8edc99418d44d17ad2a54ade2340d6a486bf023"
+  "commit": "672e7f80aeeac9b1907e1a3ae13a3e702b6b5951"
 }

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

@@ -36,6 +36,8 @@
   position: fixed;
   overflow: auto;
   background-color: awsui.$color-background-layout-panel-content;
+  display: flex;
+  flex-direction: column;
   .drawer-mobile > & {
     z-index: constants.$drawer-z-index-mobile;
     inset: 0;
@@ -58,6 +60,9 @@
     block-size: 100%;
     position: relative;
   }
+  > .drawer-content-wrapper {
+    flex: 1;
+  }
 }
 .drawer-triggers-wrapper {

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

@@ -142,6 +142,7 @@
     > .drawer-content {
       grid-column: 1 / span 4;
+      block-size: var(#{custom-props.$contentHeight});
       &.drawer-content-hidden {
         display: none;
       }

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

@@ -93,6 +93,8 @@ nav.navigation {
   word-wrap: break-word;
   pointer-events: auto;
   border-inline-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  display: flex;
+  flex-direction: column;
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {
@@ -132,6 +134,10 @@ nav.navigation {
     inline-size: var(#{custom-props.$navigationWidth});
   }
+  & > .content-container {
+    flex-grow: 1;
+  }
   // The Navigation drawer will take up the entire viewport on mobile
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     #{custom-props.$navigationWidth}: 100vw;

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

@@ -49,10 +49,8 @@
   &.drawer-global {
     @include mobile-only {
-      display: none;
-      &.last-opened {
-        display: block;
+      &:not(.last-opened) {
+        display: none;
       }
     }
   }
@@ -73,6 +71,7 @@
       grid-column: 3;
       grid-row: 2;
       z-index: 1;
+      align-self: start;
     }
     > .drawer-content {

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

@@ -20,6 +20,8 @@
   overscroll-behavior-y: contain;
   word-wrap: break-word;
   pointer-events: auto;
+  display: flex;
+  flex-direction: column;
   // All content is hidden by the overflow-x property
   &:not(.is-navigation-open) {
@@ -28,6 +30,10 @@
     display: none;
   }
+  & > .content-container {
+    flex-grow: 1;
+  }
   /*
   A non-semantic node is added with a fixed width equal to the final Navigation
   width. This will create the visual appearance of horizontal movement and

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

@@ -119,8 +119,8 @@ $cell-negative-space-vertical: 2px;
 .body-cell {
   box-sizing: border-box;
   border-block-start: awsui.$border-divider-list-width solid transparent;
-  word-wrap: break-word;
   border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+  word-wrap: break-word;
   font-weight: inherit;
   text-align: start;
@@ -147,7 +147,7 @@ $cell-negative-space-vertical: 2px;
   &.is-visual-refresh:first-child {
     &:not(.has-striped-rows) {
       @include cell-padding-inline-start(awsui.$space-xxxs);
-      &:not(.body-cell-edit-active).body-cell-interactive.body-cell-editable:hover {
+      &:not(.body-cell-edit-active).body-cell-editable:hover {
         @include cell-padding-inline-start(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width}));
       }
     }
@@ -431,19 +431,14 @@ $cell-negative-space-vertical: 2px;
       > .body-cell-content {
         overflow: visible;
       }
-      &.sticky-cell {
-        position: sticky;
-      }
     }
     &:not(.body-cell-edit-active) {
-      &.body-cell-interactive {
-        cursor: pointer;
+      cursor: pointer;
-        // Include interactive padding even when a cell is not hovered to prevent jittering when resizableColumns=false.
-        &:not(.resizable-columns) {
-          @include cell-padding-inline-end($interactive-column-padding-inline-end);
-        }
+      // Include interactive padding even when a cell is not hovered to prevent jittering when resizableColumns=false.
+      &:not(.resizable-columns) {
+        @include cell-padding-inline-end($interactive-column-padding-inline-end);
       }
       @mixin focused-editor-styles {
@@ -466,18 +461,10 @@ $cell-negative-space-vertical: 2px;
       // 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 use wasn't detected.
       // For example, when an edit button is selected from the VoiceOver rotor menu.
-      &.body-cell-interactive:focus-within {
+      &:focus-within {
         @include cell-focus-outline;
       }
-      // When a cell is not interactive the focus outline must be present for the editor button.
-      &:not(.body-cell-interactive) > .body-cell-editor-wrapper > .body-cell-editor,
-      &:not(.body-cell-interactive) > .expandable-cell-content > .body-cell-editor-wrapper > .body-cell-editor {
-        @include focus-visible.when-visible {
-          @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
-        }
-      }
-      &:not(.body-cell-interactive),
       &:focus-within:focus-within,
       &.body-cell-edit-disabled-popover {
         &.body-cell-has-success {
@@ -492,15 +479,25 @@ $cell-negative-space-vertical: 2px;
         }
       }
-      &.body-cell-interactive:hover {
+      &:hover:hover {
+        position: relative;
         background-color: awsui.$color-background-dropdown-item-hover;
         border-block: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
         border-inline: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
         inset-inline: calc(-1 * #{awsui.$border-divider-list-width});
-        position: relative;
+        &.sticky-cell {
+          position: sticky;
+        }
         &:first-child {
           inset-inline: 0;
+          border-start-start-radius: awsui.$border-radius-item;
+          border-end-start-radius: awsui.$border-radius-item;
+        }
+        &:last-child {
+          border-start-end-radius: awsui.$border-radius-item;
+          border-end-end-radius: awsui.$border-radius-item;
         }
         & > .body-cell-editor-wrapper,
@@ -527,28 +524,10 @@ $cell-negative-space-vertical: 2px;
         &.body-cell-first-row:not(.body-cell-selected) {
           @include cell-padding-block(calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width})));
         }
-        &.sticky-cell {
-          position: sticky;
-        }
         @include focused-editor-styles;
       }
     }
   }
-  &-editable.is-visual-refresh:not(.body-cell-edit-active).body-cell-interactive:hover {
-    &:first-child {
-      border-start-start-radius: awsui.$border-radius-item;
-      border-end-start-radius: awsui.$border-radius-item;
-    }
-    &:last-child {
-      border-start-end-radius: awsui.$border-radius-item;
-      border-end-end-radius: awsui.$border-radius-item;
-    }
-    &.body-cell-first-row > .body-cell-success,
-    &.body-cell-first-row > .body-cell-editor-wrapper,
-    &.body-cell-first-row > .expandable-cell-content > .body-cell-editor-wrapper {
-      @include cell-padding-block-start(awsui.$border-divider-list-width);
-    }
-  }
   @include focus-visible.when-visible {
     @include cell-focus-outline;

package/lib/internal/template/app-layout/drawer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAsB1E,eAAO,MAAM,MAAM,~~2FAyGlB~~,CAAC;AAoDF,eAAO,MAAM,iBAAiB,4GAS3B,sBAAsB,gBAyFxB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAsB1E,eAAO,MAAM,MAAM,2FA4GlB,CAAC;AAoDF,eAAO,MAAM,iBAAiB,4GAS3B,sBAAsB,gBAyFxB,CAAC"}

package/lib/internal/template/app-layout/drawer/index.js CHANGED Viewed

@@ -62,7 +62,9 @@ export const Drawer = React.forwardRef(({ id, contentClassName, toggleClassName,
                 [testutilStyles['drawer-closed']]: !isOpen,
             }) },
             !isMobile && !hideOpenButton && regularOpenButton,
-            React.createElement(TagName, { className: clsx(resizeHandle && styles['drawer-resize-content']), "aria-label": mainLabel, "aria-hidden": !isOpen },
+            React.createElement(TagName, { className: clsx(resizeHandle && styles['drawer-resize-content'], styles['drawer-content-wrapper']), "aria-label": mainLabel, "aria-hidden": !isOpen, style: {
+                    blockSize: `calc(100vh - ${(topOffset || 0) + (bottomOffset || 0)}px)`,
+                } },
                 !isMobile && isOpen && React.createElement("div", { className: styles['resize-handle-wrapper'] }, resizeHandle),
                 React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => {
                         onToggle(false);

package/lib/internal/template/app-layout/drawer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getVisualContextClassname } from '../../internal/components/visual-context';\nimport { AppLayoutProps } from '../interfaces';\nimport { CloseButton, ToggleButton, togglesConfig } from '../toggles';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { splitItems } from './drawers-helpers';\nimport { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';\nimport OverflowMenu from './overflow-menu';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n id,\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n children,\n hideOpenButton,\n isOpen,\n isHidden,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = ariaLabels;\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={isOpen ? undefined : false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles.hide]: isHidden,\n [styles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n id={id}\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName, {\n [testutilStyles['drawer-closed']]: !isOpen,\n })}\n >\n {!isMobile && !hideOpenButton && regularOpenButton}\n <TagName\n className={clsx(resizeHandle && styles['drawer-resize-content'])}\n aria-label={mainLabel}\n aria-hidden={!isOpen}\n >\n {!isMobile && isOpen && <div className={styles['resize-handle-wrapper']}>{resizeHandle}</div>}\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => {\n onToggle(false);\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\ninterface DrawerTriggerProps {\n testUtilsClassName?: string;\n ariaLabel: string \| undefined;\n ariaExpanded: boolean;\n ariaControls?: string;\n badge: boolean \| undefined;\n itemId?: string;\n isActive: boolean;\n trigger: AppLayoutProps.Drawer['trigger'];\n onClick: (() => void) \| undefined;\n}\n\nconst DrawerTrigger = React.forwardRef(\n (\n {\n testUtilsClassName,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n badge,\n itemId,\n isActive,\n trigger,\n onClick,\n }: DrawerTriggerProps,\n ref: React.Ref<{ focus: () => void }>\n ) => (\n <div\n className={clsx(\n styles['drawer-trigger'],\n isActive && styles['drawer-trigger-active'],\n isActive && getVisualContextClassname('app-layout-tools-drawer-trigger')\n )}\n onClick={onClick}\n >\n <ToggleButton\n ref={ref}\n className={testUtilsClassName}\n iconName={trigger!.iconName}\n iconSvg={trigger!.iconSvg}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n badge={badge}\n testId={itemId && `awsui-app-layout-trigger-${itemId}`}\n />\n </div>\n )\n);\n\nexport const DrawerTriggersBar = ({\n isMobile,\n topOffset,\n bottomOffset,\n activeDrawerId,\n ariaLabels,\n drawers,\n drawerRefs,\n onDrawerChange,\n}: DrawerTriggersBarProps) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = isCompactMode ? 34 : 38;\n const overflowSpot = containerHeight / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n return index;\n }\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n [styles.hide]: drawers.length === 1 && !!activeDrawerId,\n })}\n ref={containerRef}\n >\n <div\n ref={triggersContainerRef}\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], {\n [styles['drawer-content-clickable']]: drawers.length === 1,\n })}\n onClick={\n drawers.length === 1\n ? () => onDrawerChange(drawers[0].id !== activeDrawerId ? drawers[0].id : null)\n : undefined\n }\n >\n {!isMobile && (\n <aside aria-label={ariaLabels?.drawers} role=\"region\">\n <div className={styles['drawer-triggers-wrapper']} role=\"toolbar\" aria-orientation=\"vertical\">\n {visibleItems.map((item, index) => {\n return (\n <DrawerTrigger\n key={index}\n testUtilsClassName={clsx(\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n ariaExpanded={activeDrawerId === item.id}\n ref={item.id === previousActiveDrawerId.current ? drawerRefs.toggle : undefined}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n trigger={item.trigger}\n badge={item.badge}\n itemId={item.id}\n isActive={activeDrawerId === item.id}\n onClick={\n drawers.length !== 1\n ? () => onDrawerChange(item.id !== activeDrawerId ? item.id : null)\n : undefined\n }\n />\n );\n })}\n {overflowItems.length > 0 && (\n <div className={styles['drawer-trigger']}>\n <OverflowMenu\n ariaLabel={\n overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow\n }\n items={overflowItems}\n onItemClick={({ detail }) => onDrawerChange(detail.id)}\n />\n </div>\n )}\n </div>\n </aside>\n )}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getVisualContextClassname } from '../../internal/components/visual-context';\nimport { AppLayoutProps } from '../interfaces';\nimport { CloseButton, ToggleButton, togglesConfig } from '../toggles';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { splitItems } from './drawers-helpers';\nimport { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';\nimport OverflowMenu from './overflow-menu';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n id,\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n children,\n hideOpenButton,\n isOpen,\n isHidden,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = ariaLabels;\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={isOpen ? undefined : false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles.hide]: isHidden,\n [styles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n id={id}\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName, {\n [testutilStyles['drawer-closed']]: !isOpen,\n })}\n >\n {!isMobile && !hideOpenButton && regularOpenButton}\n <TagName\n className={clsx(resizeHandle && styles['drawer-resize-content'], styles['drawer-content-wrapper'])}\n aria-label={mainLabel}\n aria-hidden={!isOpen}\n style={{\n blockSize: `calc(100vh - ${(topOffset \|\| 0) + (bottomOffset \|\| 0)}px)`,\n }}\n >\n {!isMobile && isOpen && <div className={styles['resize-handle-wrapper']}>{resizeHandle}</div>}\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => {\n onToggle(false);\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\ninterface DrawerTriggerProps {\n testUtilsClassName?: string;\n ariaLabel: string \| undefined;\n ariaExpanded: boolean;\n ariaControls?: string;\n badge: boolean \| undefined;\n itemId?: string;\n isActive: boolean;\n trigger: AppLayoutProps.Drawer['trigger'];\n onClick: (() => void) \| undefined;\n}\n\nconst DrawerTrigger = React.forwardRef(\n (\n {\n testUtilsClassName,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n badge,\n itemId,\n isActive,\n trigger,\n onClick,\n }: DrawerTriggerProps,\n ref: React.Ref<{ focus: () => void }>\n ) => (\n <div\n className={clsx(\n styles['drawer-trigger'],\n isActive && styles['drawer-trigger-active'],\n isActive && getVisualContextClassname('app-layout-tools-drawer-trigger')\n )}\n onClick={onClick}\n >\n <ToggleButton\n ref={ref}\n className={testUtilsClassName}\n iconName={trigger!.iconName}\n iconSvg={trigger!.iconSvg}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n badge={badge}\n testId={itemId && `awsui-app-layout-trigger-${itemId}`}\n />\n </div>\n )\n);\n\nexport const DrawerTriggersBar = ({\n isMobile,\n topOffset,\n bottomOffset,\n activeDrawerId,\n ariaLabels,\n drawers,\n drawerRefs,\n onDrawerChange,\n}: DrawerTriggersBarProps) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = isCompactMode ? 34 : 38;\n const overflowSpot = containerHeight / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n return index;\n }\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n [styles.hide]: drawers.length === 1 && !!activeDrawerId,\n })}\n ref={containerRef}\n >\n <div\n ref={triggersContainerRef}\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], {\n [styles['drawer-content-clickable']]: drawers.length === 1,\n })}\n onClick={\n drawers.length === 1\n ? () => onDrawerChange(drawers[0].id !== activeDrawerId ? drawers[0].id : null)\n : undefined\n }\n >\n {!isMobile && (\n <aside aria-label={ariaLabels?.drawers} role=\"region\">\n <div className={styles['drawer-triggers-wrapper']} role=\"toolbar\" aria-orientation=\"vertical\">\n {visibleItems.map((item, index) => {\n return (\n <DrawerTrigger\n key={index}\n testUtilsClassName={clsx(\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n ariaExpanded={activeDrawerId === item.id}\n ref={item.id === previousActiveDrawerId.current ? drawerRefs.toggle : undefined}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n trigger={item.trigger}\n badge={item.badge}\n itemId={item.id}\n isActive={activeDrawerId === item.id}\n onClick={\n drawers.length !== 1\n ? () => onDrawerChange(item.id !== activeDrawerId ? item.id : null)\n : undefined\n }\n />\n );\n })}\n {overflowItems.length > 0 && (\n <div className={styles['drawer-trigger']}>\n <OverflowMenu\n ariaLabel={\n overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow\n }\n items={overflowItems}\n onItemClick={({ detail }) => onDrawerChange(detail.id)}\n />\n </div>\n )}\n </div>\n </aside>\n )}\n </div>\n </div>\n );\n};\n"]}

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

@@ -1,18 +1,19 @@
     import './styles.scoped.css';
     export default {
-  "toggle": "awsui_toggle_1uo6m_vdmba_189",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_vdmba_195",
-  "drawer": "awsui_drawer_1uo6m_vdmba_195",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_vdmba_205",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_vdmba_208",
-  "drawer-content": "awsui_drawer-content_1uo6m_vdmba_215",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_vdmba_227",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_vdmba_237",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_vdmba_243",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_vdmba_195",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_vdmba_262",
-  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_vdmba_270",
-  "hide": "awsui_hide_1uo6m_vdmba_280"
+  "toggle": "awsui_toggle_1uo6m_11o8o_189",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_11o8o_195",
+  "drawer": "awsui_drawer_1uo6m_11o8o_195",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_11o8o_205",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_11o8o_208",
+  "drawer-content": "awsui_drawer-content_1uo6m_11o8o_215",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_11o8o_229",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_11o8o_239",
+  "drawer-content-wrapper": "awsui_drawer-content-wrapper_1uo6m_11o8o_244",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_11o8o_248",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_11o8o_195",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_11o8o_267",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_11o8o_275",
+  "hide": "awsui_hide_1uo6m_11o8o_285"
 };

package/lib/internal/template/app-layout/drawer/styles.scoped.css CHANGED Viewed

@@ -186,88 +186,93 @@ 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_toggle_1uo6m_vdmba_189:not(#\9) {
+.awsui_toggle_1uo6m_11o8o_189:not(#\9) {
   box-sizing: border-box;
   padding-block: var(--space-xxs-y2432o, 4px);
   padding-inline: 7px;
 }
-.awsui_drawer-triggers_1uo6m_vdmba_195:not(#\9) {
+.awsui_drawer-triggers_1uo6m_11o8o_195:not(#\9) {
   box-sizing: border-box;
 }
-.awsui_drawer_1uo6m_vdmba_195:not(#\9) {
+.awsui_drawer_1uo6m_11o8o_195:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-yrshw4, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_drawer_1uo6m_vdmba_195:not(#\9):not(.awsui_drawer-mobile_1uo6m_vdmba_205) {
+.awsui_drawer_1uo6m_11o8o_195:not(#\9):not(.awsui_drawer-mobile_1uo6m_11o8o_205) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_vdmba_208:not(#\9) {
+.awsui_drawer-closed_1uo6m_11o8o_208:not(#\9) {
   min-inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_vdmba_208.awsui_drawer-mobile_1uo6m_vdmba_205:not(#\9) {
+.awsui_drawer-closed_1uo6m_11o8o_208.awsui_drawer-mobile_1uo6m_11o8o_205:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_vdmba_215:not(#\9) {
+.awsui_drawer-content_1uo6m_11o8o_215:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-70ws8g, #ffffff);
+  display: flex;
+  flex-direction: column;
 }
-.awsui_drawer-mobile_1uo6m_vdmba_205 > .awsui_drawer-content_1uo6m_vdmba_215:not(#\9) {
+.awsui_drawer-mobile_1uo6m_11o8o_205 > .awsui_drawer-content_1uo6m_11o8o_215:not(#\9) {
   z-index: 1001;
   inset: 0;
 }
-.awsui_drawer-closed_1uo6m_vdmba_208 > .awsui_drawer-content_1uo6m_vdmba_215:not(#\9) {
+.awsui_drawer-closed_1uo6m_11o8o_208 > .awsui_drawer-content_1uo6m_11o8o_215:not(#\9) {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_vdmba_208 > .awsui_drawer-content_1uo6m_vdmba_215.awsui_drawer-content-clickable_1uo6m_vdmba_227:not(#\9) {
+.awsui_drawer-closed_1uo6m_11o8o_208 > .awsui_drawer-content_1uo6m_11o8o_215.awsui_drawer-content-clickable_1uo6m_11o8o_229:not(#\9) {
   cursor: pointer;
   color: var(--color-text-interactive-default-t1snbz, #545b64);
 }
-.awsui_drawer-closed_1uo6m_vdmba_208 > .awsui_drawer-content_1uo6m_vdmba_215.awsui_drawer-content-clickable_1uo6m_vdmba_227:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_11o8o_208 > .awsui_drawer-content_1uo6m_11o8o_215.awsui_drawer-content-clickable_1uo6m_11o8o_229:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-7apn2n, #eaeded);
 }
-.awsui_drawer-content_1uo6m_vdmba_215 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_1uo6m_11o8o_215 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_vdmba_215 > .awsui_drawer-resize-content_1uo6m_vdmba_237:not(#\9) {
+.awsui_drawer-content_1uo6m_11o8o_215 > .awsui_drawer-resize-content_1uo6m_11o8o_239:not(#\9) {
   overflow: auto;
   block-size: 100%;
   position: relative;
 }
+.awsui_drawer-content_1uo6m_11o8o_215 > .awsui_drawer-content-wrapper_1uo6m_11o8o_244:not(#\9) {
+  flex: 1;
+}
-.awsui_drawer-triggers-wrapper_1uo6m_vdmba_243:not(#\9) {
+.awsui_drawer-triggers-wrapper_1uo6m_11o8o_248:not(#\9) {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: stretch;
 }
-.awsui_drawer-trigger_1uo6m_vdmba_195:not(#\9) {
+.awsui_drawer-trigger_1uo6m_11o8o_195:not(#\9) {
   padding-block: var(--space-xxs-y2432o, 4px);
   padding-inline: 7px;
   cursor: pointer;
   color: var(--color-text-interactive-default-t1snbz, #545b64);
 }
-.awsui_drawer-trigger_1uo6m_vdmba_195:not(#\9):not(:first-child) {
+.awsui_drawer-trigger_1uo6m_11o8o_195:not(#\9):not(:first-child) {
   border-block-start: 1px solid var(--color-border-layout-5gml03, #d5dbdb);
 }
-.awsui_drawer-trigger_1uo6m_vdmba_195:not(#\9):hover {
+.awsui_drawer-trigger_1uo6m_11o8o_195:not(#\9):hover {
   color: var(--color-text-layout-toggle-hover-2duwd4, #0073bb);
 }
-.awsui_drawer-trigger-active_1uo6m_vdmba_262:not(#\9), .awsui_drawer-trigger-active_1uo6m_vdmba_262:not(#\9):hover {
+.awsui_drawer-trigger-active_1uo6m_11o8o_267:not(#\9), .awsui_drawer-trigger-active_1uo6m_11o8o_267:not(#\9):hover {
   background-color: var(--color-background-layout-toggle-selected-default-qcp7lk, #0073bb);
   color: var(--color-text-layout-toggle-active-ox34la, #ffffff);
 }
-.awsui_drawer-content-clickable_1uo6m_vdmba_227 > .awsui_drawer-triggers-wrapper_1uo6m_vdmba_243 > .awsui_drawer-trigger_1uo6m_vdmba_195:not(#\9):hover {
+.awsui_drawer-content-clickable_1uo6m_11o8o_229 > .awsui_drawer-triggers-wrapper_1uo6m_11o8o_248 > .awsui_drawer-trigger_1uo6m_11o8o_195:not(#\9):hover {
   color: var(--color-text-interactive-default-t1snbz, #545b64);
 }
-.awsui_resize-handle-wrapper_1uo6m_vdmba_270:not(#\9) {
+.awsui_resize-handle-wrapper_1uo6m_11o8o_275:not(#\9) {
   position: absolute;
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -277,6 +282,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 1;
 }
-.awsui_hide_1uo6m_vdmba_280:not(#\9) {
+.awsui_hide_1uo6m_11o8o_285:not(#\9) {
   display: none;
 }

package/lib/internal/template/app-layout/drawer/styles.selectors.js CHANGED Viewed

@@ -2,18 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_vdmba_189",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_vdmba_195",
-  "drawer": "awsui_drawer_1uo6m_vdmba_195",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_vdmba_205",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_vdmba_208",
-  "drawer-content": "awsui_drawer-content_1uo6m_vdmba_215",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_vdmba_227",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_vdmba_237",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_vdmba_243",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_vdmba_195",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_vdmba_262",
-  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_vdmba_270",
-  "hide": "awsui_hide_1uo6m_vdmba_280"
+  "toggle": "awsui_toggle_1uo6m_11o8o_189",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_11o8o_195",
+  "drawer": "awsui_drawer_1uo6m_11o8o_195",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_11o8o_205",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_11o8o_208",
+  "drawer-content": "awsui_drawer-content_1uo6m_11o8o_215",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_11o8o_229",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_11o8o_239",
+  "drawer-content-wrapper": "awsui_drawer-content-wrapper_1uo6m_11o8o_244",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_11o8o_248",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_11o8o_195",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_11o8o_267",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_11o8o_275",
+  "hide": "awsui_hide_1uo6m_11o8o_285"
 };

package/lib/internal/template/app-layout/utils/use-drawers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,eAAe,yBAAyB,CAAC;AAEtD,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAsJD,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,GAAG;IAC7F,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,wBAAgB,UAAU,CACxB,EACE,OAAO,EACP,cAAc,EAAE,wBAAwB,EACxC,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,eAAe,EAClB,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,EACxC,UAAU,EAAE,UAAU;;;;;;;;;;;;;;wCAmBqB,MAAM,GAAG,IAAI;;YAPN,MAAM;cAAQ,MAAM;;4CA2BvB,MAAM;~~EA4EtD~~"}
1	+ {"version":3,"file":"use-drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,eAAe,yBAAyB,CAAC;AAEtD,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAsJD,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,GAAG;IAC7F,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,wBAAgB,UAAU,CACxB,EACE,OAAO,EACP,cAAc,EAAE,wBAAwB,EACxC,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,eAAe,EAClB,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,EACxC,UAAU,EAAE,UAAU;;;;;;;;;;;;;;wCAmBqB,MAAM,GAAG,IAAI;;YAPN,MAAM;cAAQ,MAAM;;4CA2BvB,MAAM;EAiFtD"}

package/lib/internal/template/app-layout/utils/use-drawers.js CHANGED Viewed

@@ -186,7 +186,11 @@ export function useDrawers({ drawers, activeDrawerId: controlledActiveDrawerId,
         ? [...localBefore, ...drawers, ...localAfter]
         : applyToolsDrawer(toolsProps, runtimeDrawers);
     // support toolsOpen in runtime-drawers-only mode
-    let activeDrawerIdResolved = (toolsProps === null || toolsProps === void 0 ? void 0 : toolsProps.toolsOpen) && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;
+    let activeDrawerIdResolved = (toolsProps === null || toolsProps === void 0 ? void 0 : toolsProps.toolsOpen) && !hasOwnDrawers
+        ? TOOLS_DRAWER_ID
+        : activeDrawerId !== TOOLS_DRAWER_ID
+            ? activeDrawerId
+            : null;
     const activeDrawer = combinedLocalDrawers === null || combinedLocalDrawers === void 0 ? void 0 : combinedLocalDrawers.find(drawer => drawer.id === activeDrawerIdResolved);
     // ensure that id is only defined when the drawer exists
     activeDrawerIdResolved = (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== null && _a !== void 0 ? _a : null;