@cloudscape-design/components 3.0.640 → 3.0.641

package/app-layout/drawer/index.js

@@ -61,7 +61,7 @@ export const Drawer = React.forwardRef(({ id, contentClassName, toggleClassName,
         React.createElement("div", { id: id, style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName) },
             !isMobile && !hideOpenButton && regularOpenButton,
             React.createElement(TagName, { className: clsx(resizeHandle && styles['drawer-resize-content']), "aria-label": mainLabel, "aria-hidden": !isOpen },
-                !isMobile && isOpen && resizeHandle,
+                !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/app-layout/drawer/index.js.map

@@ -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 clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';\nimport OverflowMenu from './overflow-menu';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\nimport { splitItems } from './drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { AppLayoutProps } from '../interfaces';\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          [testutilStyles['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        >\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 && resizeHandle}\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 className={clsx(styles['drawer-trigger'], isActive && styles['drawer-trigger-active'])} onClick={onClick}>\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={clsx(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={clsx(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"]}
+{"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 clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';\nimport OverflowMenu from './overflow-menu';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\nimport { splitItems } from './drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { AppLayoutProps } from '../interfaces';\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          [testutilStyles['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        >\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 className={clsx(styles['drawer-trigger'], isActive && styles['drawer-trigger-active'])} onClick={onClick}>\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={clsx(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={clsx(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/app-layout/drawer/resizable-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,eAAe,iFAQzB,oBAAoB,gBAiEtB,CAAC"}
+{"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,eAAe,iFAQzB,oBAAoB,gBA0DtB,CAAC"}

package/app-layout/drawer/resizable-drawer.js

@@ -8,8 +8,7 @@ import { usePointerEvents } from '../utils/use-pointer-events';
 import { useKeyboardEvents } from '../utils/use-keyboard-events';
 import { Drawer } from './index';
 import testutilStyles from '../test-classes/styles.css.js';
-import ResizeHandler from '../../split-panel/icons/resize-handler';
-import splitPanelStyles from '../../split-panel/styles.css.js';
+import PanelResizeHandle from '../../internal/components/panel-resize-handle';
 import styles from './styles.css.js';
 import { TOOLS_DRAWER_ID } from '../utils/use-drawers';
 export const ResizableDrawer = (_a) => {
@@ -34,10 +33,8 @@ export const ResizableDrawer = (_a) => {
     };
     const onSliderPointerDown = usePointerEvents(sizeControlProps);
     const onKeyDown = useKeyboardEvents(sizeControlProps);
-    const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider']), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
-        React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
     return (React.createElement(Drawer, Object.assign({}, props, { id: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id, width: clampedWidth, ref: drawerRefObject, isHidden: !activeDrawer, resizeHandle: !isMobile &&
-            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle), ariaLabels: {
+            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement(PanelResizeHandle, { ref: refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, ariaValuenow: relativeSize, onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown })), ariaLabels: {
             openLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.triggerButton,
             mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.drawerName,
             closeLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.closeButton,

package/app-layout/drawer/resizable-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-drawer.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.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 clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nexport const ResizableDrawer = ({\n  onResize,\n  maxWidth,\n  minWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, width, isMobile } = props;\n\n  const clampedWidth = getLimitedValue(minWidth, width, maxWidth);\n  const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n  const setSidePanelWidth = (newWidth: number) => {\n    const size = getLimitedValue(minWidth, newWidth, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= minWidth) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={refs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return (\n    <Drawer\n      {...props}\n      id={activeDrawer?.id}\n      width={clampedWidth}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n      }\n      ariaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.drawerName,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}
+{"version":3,"file":"resizable-drawer.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.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 clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport styles from './styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nexport const ResizableDrawer = ({\n  onResize,\n  maxWidth,\n  minWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, width, isMobile } = props;\n\n  const clampedWidth = getLimitedValue(minWidth, width, maxWidth);\n  const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n  const setSidePanelWidth = (newWidth: number) => {\n    const size = getLimitedValue(minWidth, newWidth, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= minWidth) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  return (\n    <Drawer\n      {...props}\n      id={activeDrawer?.id}\n      width={clampedWidth}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && (\n          <PanelResizeHandle\n            ref={refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={relativeSize}\n            onKeyDown={onKeyDown}\n            onPointerDown={onSliderPointerDown}\n          />\n        )\n      }\n      ariaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.drawerName,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}

package/app-layout/drawer/styles.css.js

@@ -1,17 +1,18 @@
 
     import './styles.scoped.css';
     export default {
-  "toggle": "awsui_toggle_1uo6m_1740t_103",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1740t_109",
-  "drawer": "awsui_drawer_1uo6m_1740t_109",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1740t_119",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_1740t_122",
-  "drawer-content": "awsui_drawer-content_1uo6m_1740t_129",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_1740t_141",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_1740t_151",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_1740t_157",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_1740t_109",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_1740t_176",
-  "hide": "awsui_hide_1uo6m_1740t_184"
+  "toggle": "awsui_toggle_1uo6m_14oxj_103",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_14oxj_109",
+  "drawer": "awsui_drawer_1uo6m_14oxj_109",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_14oxj_119",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_14oxj_122",
+  "drawer-content": "awsui_drawer-content_1uo6m_14oxj_129",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_14oxj_141",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_14oxj_151",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_14oxj_157",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_14oxj_109",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_14oxj_176",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_14oxj_184",
+  "hide": "awsui_hide_1uo6m_14oxj_194"
 };
   

package/app-layout/drawer/styles.scoped.css

@@ -100,87 +100,97 @@ 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_1740t_103:not(#\9) {
+.awsui_toggle_1uo6m_14oxj_103:not(#\9) {
   box-sizing: border-box;
   padding-block: var(--space-xxs-p8yyaw, 4px);
   padding-inline: 7px;
 }
 
-.awsui_drawer-triggers_1uo6m_1740t_109:not(#\9) {
+.awsui_drawer-triggers_1uo6m_14oxj_109:not(#\9) {
   box-sizing: border-box;
 }
 
-.awsui_drawer_1uo6m_1740t_109:not(#\9) {
+.awsui_drawer_1uo6m_14oxj_109:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-g6fkp1, 0px 0px 0px 1px #b6bec9);
 }
-.awsui_drawer_1uo6m_1740t_109:not(#\9):not(.awsui_drawer-mobile_1uo6m_1740t_119) {
+.awsui_drawer_1uo6m_14oxj_109:not(#\9):not(.awsui_drawer-mobile_1uo6m_14oxj_119) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_1740t_122:not(#\9) {
+.awsui_drawer-closed_1uo6m_14oxj_122:not(#\9) {
   min-inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_1740t_122.awsui_drawer-mobile_1uo6m_1740t_119:not(#\9) {
+.awsui_drawer-closed_1uo6m_14oxj_122.awsui_drawer-mobile_1uo6m_14oxj_119:not(#\9) {
   display: none;
 }
 
-.awsui_drawer-content_1uo6m_1740t_129:not(#\9) {
+.awsui_drawer-content_1uo6m_14oxj_129:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-t82vgh, #ffffff);
 }
-.awsui_drawer-mobile_1uo6m_1740t_119 > .awsui_drawer-content_1uo6m_1740t_129:not(#\9) {
+.awsui_drawer-mobile_1uo6m_14oxj_119 > .awsui_drawer-content_1uo6m_14oxj_129:not(#\9) {
   z-index: 1001;
   inset: 0;
 }
-.awsui_drawer-closed_1uo6m_1740t_122 > .awsui_drawer-content_1uo6m_1740t_129:not(#\9) {
+.awsui_drawer-closed_1uo6m_14oxj_122 > .awsui_drawer-content_1uo6m_14oxj_129:not(#\9) {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_1740t_122 > .awsui_drawer-content_1uo6m_1740t_129.awsui_drawer-content-clickable_1uo6m_1740t_141:not(#\9) {
+.awsui_drawer-closed_1uo6m_14oxj_122 > .awsui_drawer-content_1uo6m_14oxj_129.awsui_drawer-content-clickable_1uo6m_14oxj_141:not(#\9) {
   cursor: pointer;
   color: var(--color-text-interactive-default-lnx6lk, #414d5c);
 }
-.awsui_drawer-closed_1uo6m_1740t_122 > .awsui_drawer-content_1uo6m_1740t_129.awsui_drawer-content-clickable_1uo6m_1740t_141:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_14oxj_122 > .awsui_drawer-content_1uo6m_14oxj_129.awsui_drawer-content-clickable_1uo6m_14oxj_141:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-n9apd3, #e9ebed);
 }
-.awsui_drawer-content_1uo6m_1740t_129 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_1uo6m_14oxj_129 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_1740t_129 > .awsui_drawer-resize-content_1uo6m_1740t_151:not(#\9) {
+.awsui_drawer-content_1uo6m_14oxj_129 > .awsui_drawer-resize-content_1uo6m_14oxj_151:not(#\9) {
   overflow: auto;
   block-size: 100%;
   position: relative;
 }
 
-.awsui_drawer-triggers-wrapper_1uo6m_1740t_157:not(#\9) {
+.awsui_drawer-triggers-wrapper_1uo6m_14oxj_157:not(#\9) {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: stretch;
 }
 
-.awsui_drawer-trigger_1uo6m_1740t_109:not(#\9) {
+.awsui_drawer-trigger_1uo6m_14oxj_109:not(#\9) {
   padding-block: var(--space-xxs-p8yyaw, 4px);
   padding-inline: 7px;
   cursor: pointer;
   color: var(--color-text-interactive-default-lnx6lk, #414d5c);
 }
-.awsui_drawer-trigger_1uo6m_1740t_109:not(#\9):not(:first-child) {
+.awsui_drawer-trigger_1uo6m_14oxj_109:not(#\9):not(:first-child) {
   border-block-start: 1px solid var(--color-border-layout-ownedw, #d1d5db);
 }
-.awsui_drawer-trigger_1uo6m_1740t_109:not(#\9):hover {
+.awsui_drawer-trigger_1uo6m_14oxj_109:not(#\9):hover {
   color: var(--color-text-layout-toggle-hover-1r0lo8, #0972d3);
 }
-.awsui_drawer-trigger-active_1uo6m_1740t_176:not(#\9), .awsui_drawer-trigger-active_1uo6m_1740t_176:not(#\9):hover {
+.awsui_drawer-trigger-active_1uo6m_14oxj_176:not(#\9), .awsui_drawer-trigger-active_1uo6m_14oxj_176:not(#\9):hover {
   background-color: var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
   color: var(--color-text-layout-toggle-active-p0m0v1, #ffffff);
 }
-.awsui_drawer-content-clickable_1uo6m_1740t_141 > .awsui_drawer-triggers-wrapper_1uo6m_1740t_157 > .awsui_drawer-trigger_1uo6m_1740t_109:not(#\9):hover {
+.awsui_drawer-content-clickable_1uo6m_14oxj_141 > .awsui_drawer-triggers-wrapper_1uo6m_14oxj_157 > .awsui_drawer-trigger_1uo6m_14oxj_109:not(#\9):hover {
   color: var(--color-text-interactive-default-lnx6lk, #414d5c);
 }
 
-.awsui_hide_1uo6m_1740t_184:not(#\9) {
+.awsui_resize-handle-wrapper_1uo6m_14oxj_184:not(#\9) {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+
+.awsui_hide_1uo6m_14oxj_194:not(#\9) {
   display: none;
 }

package/app-layout/drawer/styles.selectors.js

@@ -2,17 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_1740t_103",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1740t_109",
-  "drawer": "awsui_drawer_1uo6m_1740t_109",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1740t_119",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_1740t_122",
-  "drawer-content": "awsui_drawer-content_1uo6m_1740t_129",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_1740t_141",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_1740t_151",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_1740t_157",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_1740t_109",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_1740t_176",
-  "hide": "awsui_hide_1uo6m_1740t_184"
+  "toggle": "awsui_toggle_1uo6m_14oxj_103",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_14oxj_109",
+  "drawer": "awsui_drawer_1uo6m_14oxj_109",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_14oxj_119",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_14oxj_122",
+  "drawer-content": "awsui_drawer-content_1uo6m_14oxj_129",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_14oxj_141",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_14oxj_151",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_14oxj_157",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_14oxj_109",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_14oxj_176",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_14oxj_184",
+  "hide": "awsui_hide_1uo6m_14oxj_194"
 };
   

package/app-layout/utils/use-resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAuDrB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAkDrB;AAED,eAAe,SAAS,CAAC"}

package/app-layout/utils/use-resize.js

@@ -1,14 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import ResizeHandler from '../../split-panel/icons/resize-handler';
+import PanelResizeHandle from '../../internal/components/panel-resize-handle';
 import { getLimitedValue } from '../../split-panel/utils/size-utils';
 import { usePointerEvents } from './use-pointer-events';
 import { useKeyboardEvents } from './use-keyboard-events';
-import splitPanelStyles from '../../split-panel/styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
-import styles from '../visual-refresh/styles.css.js';
 function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDrawerResize, drawersRefs, isToolsOpen, drawersMinWidth, drawersMaxWidth, }) {
     var _a;
     const [relativeSize, setRelativeSize] = useState(0);
@@ -39,9 +36,8 @@ function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDr
     };
     const onSliderPointerDown = usePointerEvents(sizeControlProps);
     const onKeyDown = useKeyboardEvents(sizeControlProps);
-    const resizeHandle = (React.createElement("div", { ref: drawersRefs.slider, role: "slider", tabIndex: 0, "aria-label": (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider']), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
-        React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
-    return { resizeHandle: React.createElement("div", { className: styles['drawer-slider'] }, resizeHandle), drawerSize };
+    const resizeHandle = (React.createElement(PanelResizeHandle, { ref: drawersRefs.slider, position: "side", ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: relativeSize, className: testutilStyles['drawers-slider'], onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown }));
+    return { resizeHandle, drawerSize };
 }
 export default useResize;
 //# sourceMappingURL=use-resize.js.map

package/app-layout/utils/use-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.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, { useState, useEffect } from 'react';\n\nimport clsx from 'clsx';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from './use-pointer-events';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { AppLayoutProps } from '../interfaces';\n\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from '../visual-refresh/styles.css.js';\nimport { FocusControlRefs } from './use-focus-control';\nimport { SizeControlProps } from './interfaces';\n\nexport interface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n    hasTransitions: true,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={drawersRefs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return { resizeHandle: <div className={styles['drawer-slider']}>{resizeHandle}</div>, drawerSize };\n}\n\nexport default useResize;\n"]}
+{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAc3D,SAAS,SAAS,CAChB,eAAgD,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GACG;;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,eAAe,CAAC,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC;QACjC,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,EAAE,IAAI,QAAQ,IAAI,eAAe,EAAE;YACrC,oBAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,WAAW,CAAC,MAAM;QAC7B,QAAQ,EAAE,iBAAiB;QAC3B,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB,GAClC,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC;AAED,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from './use-pointer-events';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { AppLayoutProps } from '../interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { FocusControlRefs } from './use-focus-control';\nimport { SizeControlProps } from './interfaces';\n\nexport interface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n    hasTransitions: true,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={drawersRefs.slider}\n      position=\"side\"\n      ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n      ariaValuenow={relativeSize}\n      className={testutilStyles['drawers-slider']}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n"]}

package/app-layout/visual-refresh/drawers.js

@@ -59,7 +59,7 @@ function ActiveDrawer() {
                 loseDrawersFocus();
             }
         } },
-        !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && resizeHandle,
+        !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: styles['drawer-slider'] }, resizeHandle),
         React.createElement("div", { className: styles['drawer-content-container'] },
             React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                 React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({

package/app-layout/visual-refresh/drawers.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/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 { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\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 {\n    disableBodyScroll,\n    drawers,\n    drawersTriggerCount,\n    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    navigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n  if (!drawers || drawersTriggerCount === 0) {\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      {!isMobile && <DesktopTriggers />}\n    </div>\n  );\n}\n\nfunction ActiveDrawer() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    navigationHide,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMinWidth,\n    drawersMaxWidth,\n    drawerRef,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n  const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n  return (\n    <aside\n      id={activeDrawerId ?? undefined}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [styles['is-drawer-open']]: activeDrawerId,\n        [styles.unfocusable]: isUnfocusable,\n        [testutilStyles['active-drawer']]: activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      style={{\n        ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && resizeHandle}\n      <div className={styles['drawer-content-container']}>\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']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => {\n              handleDrawersClick(activeDrawerId);\n              handleToolsClick(false);\n            }}\n            ref={drawersRefs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && (\n          <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n        )}\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    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitPanelHeight =\n    isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n  const getIndexOfOverflowItem = () => {\n    if (containerHeight) {\n      const ITEM_HEIGHT = 48;\n      const overflowSpot =\n        activeDrawerId && isSplitPanelOpen\n          ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n          : (containerHeight - splitPanelHeight) / 1.5;\n\n      const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n      let splitPanelItem = 0;\n      if (hasSplitPanel && splitPanelToggle.displayed) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n      })}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {visibleItems.map(item => {\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            )}\n            onItemClick={({ detail }) => {\n              handleDrawersClick(detail.id);\n            }}\n          />\n        )}\n        {hasSplitPanel && splitPanelToggle.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggle.ariaLabel}\n            ariaControls={splitPanelControlId}\n            ariaExpanded={!!isSplitPanelOpen}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n            highContrastHeader={headerVariant === 'high-contrast'}\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    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!drawers) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const { visibleItems, overflowItems } = splitItems(drawers, 2, activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx({\n        [styles.unfocusable]: hasDrawerViewportOverlay,\n      })}\n      aria-label={drawersAriaLabel}\n      role=\"region\"\n    >\n      <div className={clsx(styles['drawers-mobile-triggers-container'])} role=\"toolbar\" aria-orientation=\"horizontal\">\n        {visibleItems.map(item => (\n          <InternalButton\n            ariaExpanded={item.id === activeDrawerId}\n            ariaLabel={item.ariaLabels?.triggerButton}\n            className={clsx(\n              styles['drawers-trigger'],\n              testutilStyles['drawers-trigger'],\n              item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n            )}\n            disabled={hasDrawerViewportOverlay}\n            ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n            formAction=\"none\"\n            iconName={item.trigger.iconName}\n            iconSvg={item.trigger.iconSvg}\n            badge={item.badge}\n            key={item.id}\n            onClick={() => handleDrawersClick(item.id)}\n            variant=\"icon\"\n            __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n          />\n        ))}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}
+{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/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 { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\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 {\n    disableBodyScroll,\n    drawers,\n    drawersTriggerCount,\n    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    navigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n  if (!drawers || drawersTriggerCount === 0) {\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      {!isMobile && <DesktopTriggers />}\n    </div>\n  );\n}\n\nfunction ActiveDrawer() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    navigationHide,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMinWidth,\n    drawersMaxWidth,\n    drawerRef,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n  const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n  return (\n    <aside\n      id={activeDrawerId ?? undefined}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [styles['is-drawer-open']]: activeDrawerId,\n        [styles.unfocusable]: isUnfocusable,\n        [testutilStyles['active-drawer']]: activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      style={{\n        ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n      <div className={styles['drawer-content-container']}>\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']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => {\n              handleDrawersClick(activeDrawerId);\n              handleToolsClick(false);\n            }}\n            ref={drawersRefs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && (\n          <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n        )}\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    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitPanelHeight =\n    isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n  const getIndexOfOverflowItem = () => {\n    if (containerHeight) {\n      const ITEM_HEIGHT = 48;\n      const overflowSpot =\n        activeDrawerId && isSplitPanelOpen\n          ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n          : (containerHeight - splitPanelHeight) / 1.5;\n\n      const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n      let splitPanelItem = 0;\n      if (hasSplitPanel && splitPanelToggle.displayed) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n      })}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {visibleItems.map(item => {\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            )}\n            onItemClick={({ detail }) => {\n              handleDrawersClick(detail.id);\n            }}\n          />\n        )}\n        {hasSplitPanel && splitPanelToggle.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggle.ariaLabel}\n            ariaControls={splitPanelControlId}\n            ariaExpanded={!!isSplitPanelOpen}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n            highContrastHeader={headerVariant === 'high-contrast'}\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    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!drawers) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const { visibleItems, overflowItems } = splitItems(drawers, 2, activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx({\n        [styles.unfocusable]: hasDrawerViewportOverlay,\n      })}\n      aria-label={drawersAriaLabel}\n      role=\"region\"\n    >\n      <div className={clsx(styles['drawers-mobile-triggers-container'])} role=\"toolbar\" aria-orientation=\"horizontal\">\n        {visibleItems.map(item => (\n          <InternalButton\n            ariaExpanded={item.id === activeDrawerId}\n            ariaLabel={item.ariaLabels?.triggerButton}\n            className={clsx(\n              styles['drawers-trigger'],\n              testutilStyles['drawers-trigger'],\n              item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n            )}\n            disabled={hasDrawerViewportOverlay}\n            ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n            formAction=\"none\"\n            iconName={item.trigger.iconName}\n            iconSvg={item.trigger.iconSvg}\n            badge={item.badge}\n            key={item.id}\n            onClick={() => handleDrawersClick(item.id)}\n            variant=\"icon\"\n            __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n          />\n        ))}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eA0CjE;kBA1CQ,UAAU;;;;AA4CnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAuCxB;AAED;;;;;GAKG;AAEH;;GAEG;AAEH,iBAAS,cAAc,uBA+BtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}
+{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eA0CjE;kBA1CQ,UAAU;;;;AA4CnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAsCxB;AAED;;;;;GAKG;AAEH;;GAEG;AAEH,iBAAS,cAAc,uBA+BtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}

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

@@ -58,9 +58,7 @@ function SplitPanelBottom() {
         }), ref: transitionEventsRef, style: {
             [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,
             [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,
-        } },
-        React.createElement(SplitPanel, null),
-        splitPanelPosition === 'bottom' && splitPanel))));
+        } }, splitPanelPosition === 'bottom' && splitPanel))));
 }
 /**
  * This is the render function for the SplitPanel when it is side position.