@cloudscape-design/components 3.0.383 → 3.0.385

package/app-layout/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAc,MAAM,cAAc,CAAC;AAsBtF,eAAO,MAAM,MAAM,2FAmGlB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,mDAAoD,sBAAsB,gBA8EvG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAc,MAAM,cAAc,CAAC;AAuBtF,eAAO,MAAM,MAAM,2FAmGlB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,mDAAoD,sBAAsB,gBAkFvG,CAAC"}

package/app-layout/drawer/index.js

@@ -9,6 +9,7 @@ import OverflowMenu from './overflow-menu';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { useDensityMode } from '@cloudscape-design/component-toolkit/internal';
 import { splitItems } from './drawers-helpers';
+import { TOOLS_DRAWER_ID } from '../utils/use-drawers';
 // We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several
 // known bugs in NVDA that cause focus changes within a container to sometimes not be
 // announced. As a result, we use one region for the open button and one region for the
@@ -89,7 +90,9 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
             React.createElement(React.Fragment, null,
                 visibleItems.map((item, index) => {
                     var _a;
-                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: testutilStyles['drawers-trigger'], ariaExpanded: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id ? item.id : undefined, trigger: item.trigger, badge: item.badge, itemId: item.id, isActive: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, onClick: () => {
+                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: item.id === TOOLS_DRAWER_ID
+                            ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])
+                            : testutilStyles['drawers-trigger'], ariaExpanded: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id ? item.id : undefined, trigger: item.trigger, badge: item.badge, itemId: item.id, isActive: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, onClick: () => {
                             drawers === null || drawers === void 0 ? void 0 : drawers.onChange({
                                 activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
                             });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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, DrawerItem } 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';\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      contentClassName,\n      toggleClassName,\n      closeClassName,\n      width,\n      type,\n      toggleRefs,\n      topOffset,\n      bottomOffset,\n      ariaLabels,\n      drawersAriaLabels,\n      children,\n      isOpen,\n      isMobile,\n      onToggle,\n      onClick,\n      onLoseFocus,\n      drawers,\n      resizeHandle,\n    }: DesktopDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const openButtonWrapperRef = useRef<HTMLElement | null>(null);\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, closeLabel, openLabel } = drawersAriaLabels ?? getLabels(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        id={drawers?.activeDrawerId}\n        ref={ref}\n        className={clsx(styles.drawer, {\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          style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n          className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n        >\n          {!isMobile && regularOpenButton}\n          {resizeHandle}\n          <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n            <CloseButton\n              ref={toggleRefs.close}\n              className={closeClassName}\n              ariaLabel={closeLabel}\n              onClick={() => {\n                onToggle(false);\n                drawers?.onChange({ activeDrawerId: undefined });\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: DrawerItem['trigger'];\n  onClick: () => void;\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 = ({ isMobile, topOffset, bottomOffset, drawers }: DrawerTriggersBarProps) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n  const isCompactMode = useDensityMode(containerRef) === 'compact';\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?.items, getIndexOfOverflowItem(), drawers?.activeDrawerId);\n\n  return (\n    <div\n      className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n        [styles['drawer-mobile']]: isMobile,\n      })}\n      ref={containerRef}\n    >\n      <div\n        ref={triggersContainerRef}\n        style={{ top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'])}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {!isMobile && (\n          <aside\n            aria-label={drawers?.ariaLabel}\n            className={clsx(styles['drawer-triggers-wrapper'], testutilStyles['drawers-desktop-triggers-container'])}\n          >\n            <>\n              {visibleItems.map((item, index) => {\n                return (\n                  <DrawerTrigger\n                    key={index}\n                    testUtilsClassName={testutilStyles['drawers-trigger']}\n                    ariaExpanded={drawers?.activeDrawerId === item.id}\n                    ariaLabel={item.ariaLabels?.triggerButton}\n                    ariaControls={drawers?.activeDrawerId === item.id ? item.id : undefined}\n                    trigger={item.trigger}\n                    badge={item.badge}\n                    itemId={item.id}\n                    isActive={drawers?.activeDrawerId === item.id}\n                    onClick={() => {\n                      drawers?.onChange({\n                        activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,\n                      });\n                    }}\n                  />\n                );\n              })}\n              {overflowItems.length > 0 && (\n                <div className={clsx(styles['drawer-trigger'])}>\n                  <OverflowMenu\n                    ariaLabel={drawers?.overflowAriaLabel}\n                    items={overflowItems}\n                    onItemClick={({ detail }) => {\n                      drawers?.onChange({\n                        activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,\n                      });\n                    }}\n                  />\n                </div>\n              )}\n            </>\n          </aside>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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, DrawerItem } 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';\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      contentClassName,\n      toggleClassName,\n      closeClassName,\n      width,\n      type,\n      toggleRefs,\n      topOffset,\n      bottomOffset,\n      ariaLabels,\n      drawersAriaLabels,\n      children,\n      isOpen,\n      isMobile,\n      onToggle,\n      onClick,\n      onLoseFocus,\n      drawers,\n      resizeHandle,\n    }: DesktopDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const openButtonWrapperRef = useRef<HTMLElement | null>(null);\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, closeLabel, openLabel } = drawersAriaLabels ?? getLabels(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        id={drawers?.activeDrawerId}\n        ref={ref}\n        className={clsx(styles.drawer, {\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          style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n          className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n        >\n          {!isMobile && regularOpenButton}\n          {resizeHandle}\n          <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n            <CloseButton\n              ref={toggleRefs.close}\n              className={closeClassName}\n              ariaLabel={closeLabel}\n              onClick={() => {\n                onToggle(false);\n                drawers?.onChange({ activeDrawerId: undefined });\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: DrawerItem['trigger'];\n  onClick: () => void;\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 = ({ isMobile, topOffset, bottomOffset, drawers }: DrawerTriggersBarProps) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n  const isCompactMode = useDensityMode(containerRef) === 'compact';\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?.items, getIndexOfOverflowItem(), drawers?.activeDrawerId);\n\n  return (\n    <div\n      className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n        [styles['drawer-mobile']]: isMobile,\n      })}\n      ref={containerRef}\n    >\n      <div\n        ref={triggersContainerRef}\n        style={{ top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'])}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {!isMobile && (\n          <aside\n            aria-label={drawers?.ariaLabel}\n            className={clsx(styles['drawer-triggers-wrapper'], testutilStyles['drawers-desktop-triggers-container'])}\n          >\n            <>\n              {visibleItems.map((item, index) => {\n                return (\n                  <DrawerTrigger\n                    key={index}\n                    testUtilsClassName={\n                      item.id === TOOLS_DRAWER_ID\n                        ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])\n                        : testutilStyles['drawers-trigger']\n                    }\n                    ariaExpanded={drawers?.activeDrawerId === item.id}\n                    ariaLabel={item.ariaLabels?.triggerButton}\n                    ariaControls={drawers?.activeDrawerId === item.id ? item.id : undefined}\n                    trigger={item.trigger}\n                    badge={item.badge}\n                    itemId={item.id}\n                    isActive={drawers?.activeDrawerId === item.id}\n                    onClick={() => {\n                      drawers?.onChange({\n                        activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,\n                      });\n                    }}\n                  />\n                );\n              })}\n              {overflowItems.length > 0 && (\n                <div className={clsx(styles['drawer-trigger'])}>\n                  <OverflowMenu\n                    ariaLabel={drawers?.overflowAriaLabel}\n                    items={overflowItems}\n                    onItemClick={({ detail }) => {\n                      drawers?.onChange({\n                        activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,\n                      });\n                    }}\n                  />\n                </div>\n              )}\n            </>\n          </aside>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/app-layout/mobile-toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAwClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,eAkFpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAyClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,eAsFpB"}

package/app-layout/mobile-toolbar/index.js

@@ -8,6 +8,7 @@ import styles from './styles.css.js';
 import sharedStyles from '../styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 import { splitItems } from '../drawer/drawers-helpers';
+import { TOOLS_DRAWER_ID } from '../utils/use-drawers';
 const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled, onClick }, ref) => {
     const { TagName, iconName, getLabels } = togglesConfig[type];
     const { mainLabel, openLabel } = getLabels(ariaLabels);
@@ -35,7 +36,9 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
             visibleItems.map((item, index) => {
                 var _a;
                 return (React.createElement("div", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']), key: index, onClick: () => drawers.onChange({ activeDrawerId: item.id }) },
-                    React.createElement(ToggleButton, { className: testutilStyles['drawers-trigger'], iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, badge: item.badge, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId === item.id, testId: `awsui-app-layout-trigger-${item.id}` })));
+                    React.createElement(ToggleButton, { className: item.id === TOOLS_DRAWER_ID
+                            ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])
+                            : testutilStyles['drawers-trigger'], iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, badge: item.badge, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId === item.id, testId: `awsui-app-layout-trigger-${item.id}` })));
             }),
             overflowItems.length > 0 && (React.createElement("div", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']) },
                 React.createElement(OverflowMenu, { ariaLabel: drawers.overflowAriaLabel, items: overflowItems, onItemClick: ({ detail }) => {

package/app-layout/mobile-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { splitItems } from '../drawer/drawers-helpers';\n\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <ToggleButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  mobileBarRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n    overflowAriaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n  mobileBarRef,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n\n  const { overflowItems, visibleItems } = splitItems(drawers?.items, 2, drawers?.activeDrawerId, true);\n\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n      style={{ top: topOffset }}\n    >\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside\n          aria-label={drawers.ariaLabel}\n          className={clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container'])}\n        >\n          {visibleItems.map((item, index) => (\n            <div\n              className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}\n              key={index}\n              onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n            >\n              <ToggleButton\n                className={testutilStyles['drawers-trigger']}\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                badge={item.badge}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                ariaExpanded={drawers.activeDrawerId === item.id}\n                testId={`awsui-app-layout-trigger-${item.id}`}\n              />\n            </div>\n          ))}\n          {overflowItems.length > 0 && (\n            <div className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}>\n              <OverflowMenu\n                ariaLabel={drawers.overflowAriaLabel}\n                items={overflowItems}\n                onItemClick={({ detail }) => {\n                  drawers.onChange({\n                    activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,\n                  });\n                }}\n              />\n            </div>\n          )}\n        </aside>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <ToggleButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  mobileBarRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n    overflowAriaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n  mobileBarRef,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n\n  const { overflowItems, visibleItems } = splitItems(drawers?.items, 2, drawers?.activeDrawerId, true);\n\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n      style={{ top: topOffset }}\n    >\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside\n          aria-label={drawers.ariaLabel}\n          className={clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container'])}\n        >\n          {visibleItems.map((item, index) => (\n            <div\n              className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}\n              key={index}\n              onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n            >\n              <ToggleButton\n                className={\n                  item.id === TOOLS_DRAWER_ID\n                    ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])\n                    : testutilStyles['drawers-trigger']\n                }\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                badge={item.badge}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                ariaExpanded={drawers.activeDrawerId === item.id}\n                testId={`awsui-app-layout-trigger-${item.id}`}\n              />\n            </div>\n          ))}\n          {overflowItems.length > 0 && (\n            <div className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}>\n              <OverflowMenu\n                ariaLabel={drawers.overflowAriaLabel}\n                items={overflowItems}\n                onItemClick={({ detail }) => {\n                  drawers.onChange({\n                    activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,\n                  });\n                }}\n              />\n            </div>\n          )}\n        </aside>\n      )}\n    </div>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAM3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/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,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;CAC/C;AAwDD,wBAAgB,UAAU,CACxB,EACE,OAAO,EAAE,UAAU,EACnB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,mBAAmB,GAAG;IAAE,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAAE,EAC9D,UAAU,EAAE,UAAU;;;;;;;wCAgBuC,MAAM,GAAG,SAAS;;YAa7B,MAAM;cAAQ,MAAM;;EAiBvE"}
+{"version":3,"file":"use-drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAM3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/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,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;CAC/C;AAuDD,wBAAgB,UAAU,CACxB,EACE,OAAO,EAAE,UAAU,EACnB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,mBAAmB,GAAG;IAAE,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAAE,EAC9D,UAAU,EAAE,UAAU;;;;;;;wCAgBuC,MAAM,GAAG,SAAS;;YAa7B,MAAM;cAAQ,MAAM;;EAiBvE"}

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

@@ -10,8 +10,7 @@ import { convertRuntimeDrawers } from '../runtime-api';
 import { togglesConfig } from '../toggles';
 export const TOOLS_DRAWER_ID = 'awsui-internal-tools';
 function getToolsDrawerItem(props) {
-    // TODO: remove props.tools check, because it is incompatible with no-drawers behavior
-    if (props.toolsHide || !props.tools) {
+    if (props.toolsHide) {
         return null;
     }
     const { iconName, getLabels } = togglesConfig.tools;

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

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalDrawerProps } from '../drawer/interfaces';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps) {\n  // TODO: remove props.tools check, because it is incompatible with no-drawers behavior\n  if (props.toolsHide || !props.tools) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      content: mainLabel,\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | undefined,\n  onActiveDrawerChange: (id: string | undefined) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChange(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChange]);\n\n  return runtimeDrawers;\n}\n\nexport function useDrawers(\n  {\n    drawers: ownDrawers,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: InternalDrawerProps & { __disableRuntimeDrawers?: boolean },\n  toolsProps: ToolsProps\n) {\n  const toolsDrawer = getToolsDrawerItem(toolsProps);\n\n  const [activeDrawerId, setActiveDrawerId] = useControllable(\n    ownDrawers?.activeDrawerId,\n    ownDrawers?.onChange,\n    !toolsProps.toolsHide && toolsProps.toolsOpen ? TOOLS_DRAWER_ID : undefined,\n    {\n      componentName: 'AppLayout',\n      controlledProp: 'activeDrawerId',\n      changeHandler: 'onChange',\n    }\n  );\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  const onActiveDrawerChange = useStableCallback((newDrawerId: string | undefined) => {\n    setActiveDrawerId(newDrawerId);\n    fireNonCancelableEvent(ownDrawers?.onChange, newDrawerId);\n  });\n\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = [...runtimeDrawers.before, ...(ownDrawers?.items ?? []), ...runtimeDrawers.after];\n  if (toolsDrawer && combinedDrawers.length > 0) {\n    combinedDrawers.unshift(toolsDrawer);\n  }\n  const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerId);\n  const activeDrawerIdResolved = activeDrawer?.id; // only defined when corresponding drawer exists\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(ownDrawers?.onResize, { id, size });\n  }\n\n  return {\n    ariaLabel: ownDrawers?.ariaLabel,\n    overflowAriaLabel: ownDrawers?.overflowAriaLabel,\n    drawers: combinedDrawers,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize: activeDrawerIdResolved\n      ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n      : toolsProps.toolsWidth,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}
+{"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalDrawerProps } from '../drawer/interfaces';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps) {\n  if (props.toolsHide) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      content: mainLabel,\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | undefined,\n  onActiveDrawerChange: (id: string | undefined) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChange(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChange]);\n\n  return runtimeDrawers;\n}\n\nexport function useDrawers(\n  {\n    drawers: ownDrawers,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: InternalDrawerProps & { __disableRuntimeDrawers?: boolean },\n  toolsProps: ToolsProps\n) {\n  const toolsDrawer = getToolsDrawerItem(toolsProps);\n\n  const [activeDrawerId, setActiveDrawerId] = useControllable(\n    ownDrawers?.activeDrawerId,\n    ownDrawers?.onChange,\n    !toolsProps.toolsHide && toolsProps.toolsOpen ? TOOLS_DRAWER_ID : undefined,\n    {\n      componentName: 'AppLayout',\n      controlledProp: 'activeDrawerId',\n      changeHandler: 'onChange',\n    }\n  );\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  const onActiveDrawerChange = useStableCallback((newDrawerId: string | undefined) => {\n    setActiveDrawerId(newDrawerId);\n    fireNonCancelableEvent(ownDrawers?.onChange, newDrawerId);\n  });\n\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = [...runtimeDrawers.before, ...(ownDrawers?.items ?? []), ...runtimeDrawers.after];\n  if (toolsDrawer && combinedDrawers.length > 0) {\n    combinedDrawers.unshift(toolsDrawer);\n  }\n  const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerId);\n  const activeDrawerIdResolved = activeDrawer?.id; // only defined when corresponding drawer exists\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(ownDrawers?.onResize, { id, size });\n  }\n\n  return {\n    ariaLabel: ownDrawers?.ariaLabel,\n    overflowAriaLabel: ownDrawers?.overflowAriaLabel,\n    drawers: combinedDrawers,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize: activeDrawerIdResolved\n      ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n      : toolsProps.toolsWidth,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}

package/app-layout/visual-refresh/drawers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAkBA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA8B9B;AA+ND;;;;;GAKG;AACH,wBAAgB,cAAc,uBAkE7B"}
+{"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAkBA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA8B9B;AAmOD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAsE7B"}

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

@@ -109,7 +109,7 @@ function DesktopTriggers() {
             }), role: "toolbar", "aria-orientation": "vertical" },
             visibleItems.map(item => {
                 var _a;
-                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: item.id === activeDrawerId, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
+                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: item.id === activeDrawerId, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
                         isToolsOpen && handleToolsClick(!isToolsOpen, true);
                         handleDrawersClick(item.id);
                     }, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, selected: item.id === activeDrawerId, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}` }));
@@ -141,7 +141,7 @@ export function MobileTriggers() {
         }), "aria-label": drawersAriaLabel },
         visibleItems.map(item => {
             var _a;
-            return (React.createElement(InternalButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), disabled: hasDrawerViewportOverlay, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, formAction: "none", iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, badge: item.badge, key: item.id, onClick: () => handleDrawersClick(item.id), variant: "icon", __nativeAttributes: { 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` } }));
+            return (React.createElement(InternalButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), disabled: hasDrawerViewportOverlay, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, formAction: "none", iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, badge: item.badge, key: item.id, onClick: () => handleDrawersClick(item.id), variant: "icon", __nativeAttributes: { 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` } }));
         }),
         overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems, ariaLabel: drawersOverflowAriaLabel, onItemClick: ({ detail }) => {
                 handleDrawersClick(detail.id);

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

@@ -1 +1 @@
-{"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../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';\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    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    isNavigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n  if (drawers.length === 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    isNavigationOpen,\n    navigationHide,\n    toolsRefs,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\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?.content : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n\n  const size = Math.min(drawersMaxWidth, drawerSize);\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\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={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={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n          ref={isToolsDrawer ? toolsRefs.close : drawersRefs.close}\n          variant=\"icon\"\n        />\n      </div>\n\n      <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</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    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\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, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(\n        styles['drawers-desktop-triggers-container'],\n        testutilStyles['drawers-desktop-triggers-container'],\n        {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        }\n      )}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\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(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              key={item.id}\n              onClick={() => {\n                isToolsOpen && handleToolsClick(!isToolsOpen, true);\n                handleDrawersClick(item.id);\n              }}\n              ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={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              />\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'], splitPanelStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!isMobile || drawers.length === 0) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitIndex = 2;\n\n  const { visibleItems, overflowItems } = splitItems(drawers, splitIndex, activeDrawerId, true);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx(\n        styles['drawers-mobile-triggers-container'],\n        testutilStyles['drawers-mobile-triggers-container'],\n        {\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        }\n      )}\n      aria-label={drawersAriaLabel}\n    >\n      {visibleItems.map(item => (\n        <InternalButton\n          ariaExpanded={item.id === activeDrawerId}\n          ariaLabel={item.ariaLabels?.triggerButton}\n          className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\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={drawersOverflowAriaLabel}\n          onItemClick={({ detail }) => {\n            handleDrawersClick(detail.id);\n          }}\n        />\n      )}\n    </aside>\n  );\n}\n"]}
+{"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../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';\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    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    isNavigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n  if (drawers.length === 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    isNavigationOpen,\n    navigationHide,\n    toolsRefs,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\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?.content : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n\n  const size = Math.min(drawersMaxWidth, drawerSize);\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\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={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={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n          ref={isToolsDrawer ? toolsRefs.close : drawersRefs.close}\n          variant=\"icon\"\n        />\n      </div>\n\n      <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</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    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\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, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(\n        styles['drawers-desktop-triggers-container'],\n        testutilStyles['drawers-desktop-triggers-container'],\n        {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        }\n      )}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\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={() => {\n                isToolsOpen && handleToolsClick(!isToolsOpen, true);\n                handleDrawersClick(item.id);\n              }}\n              ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={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              />\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'], splitPanelStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!isMobile || drawers.length === 0) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitIndex = 2;\n\n  const { visibleItems, overflowItems } = splitItems(drawers, splitIndex, activeDrawerId, true);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx(\n        styles['drawers-mobile-triggers-container'],\n        testutilStyles['drawers-mobile-triggers-container'],\n        {\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        }\n      )}\n      aria-label={drawersAriaLabel}\n    >\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={drawersOverflowAriaLabel}\n          onItemClick={({ detail }) => {\n            handleDrawersClick(detail.id);\n          }}\n        />\n      )}\n    </aside>\n  );\n}\n"]}

package/header/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,UAAU,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACpG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,IAAI,EACJ,iBAAwB,EACxB,wBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,mBAAmB,eAwDrB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,sBAgBhH"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,UAAU,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACpG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,IAAI,EACJ,iBAAwB,EACxB,wBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,mBAAmB,eA8DrB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,sBAgBhH"}

package/header/internal.js

@@ -27,8 +27,8 @@ export default function InternalHeader(_a) {
     // If is mobile there is no need to have the dynamic variant because it's scrolled out of view
     const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';
     const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className, styles[`root-variant-${variantOverride}`], isRefresh && styles.refresh, !actions && [styles[`root-no-actions`]], description && [styles[`root-has-description`]], __disableActionsWrapping && [styles['root-no-wrap']]), ref: __internalRootRef }),
-        React.createElement("div", { className: clsx(styles.main, styles[`main-variant-${variantOverride}`], isRefresh && styles.refresh) },
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className, styles[`root-variant-${variantOverride}`], isRefresh && styles.refresh, !actions && [styles[`root-no-actions`]], description && [styles[`root-has-description`]]), ref: __internalRootRef }),
+        React.createElement("div", { className: clsx(styles.main, styles[`main-variant-${variantOverride}`], isRefresh && styles.refresh, __disableActionsWrapping && [styles['no-wrap']]) },
             React.createElement("div", { className: clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh) },
                 React.createElement(HeadingTag, { className: clsx(styles.heading, styles[`heading-variant-${variantOverride}`]) },
                     React.createElement("span", Object.assign({}, (HeadingTag === 'h2' ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {}), { className: clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`]), id: headingId }), children),
@@ -36,8 +36,8 @@ export default function InternalHeader(_a) {
                         " ",
                         counter)),
                 React.createElement(InfoLinkLabelContext.Provider, { value: headingId }, info && React.createElement("span", { className: styles.info }, info))),
-            React.createElement(Description, { variantOverride: variantOverride }, description)),
-        actions && (React.createElement("div", { className: clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh) }, actions))));
+            actions && (React.createElement("div", { className: clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh) }, actions))),
+        React.createElement(Description, { variantOverride: variantOverride }, description)));
 }
 export function Description({ children, variantOverride }) {
     const isRefresh = useVisualRefresh();

package/header/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["header/internal.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, { useContext } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { HeaderProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../internal/analytics/selectors';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n  __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n  variant,\n  headingTagOverride,\n  children,\n  actions,\n  counter,\n  description,\n  info,\n  __internalRootRef = null,\n  __disableActionsWrapping,\n  ...restProps\n}: InternalHeaderProps) {\n  const isMobile = useMobile();\n  const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n  const { isStuck } = useContext(StickyHeaderContext);\n  const baseProps = getBaseProps(restProps);\n  const isRefresh = useVisualRefresh();\n  const assignHeaderId = useContext(CollectionLabelContext).assignId;\n  const headingId = useUniqueId('heading');\n  if (assignHeaderId !== undefined) {\n    assignHeaderId(headingId);\n  }\n  // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n  const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n  const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        styles[`root-variant-${variantOverride}`],\n        isRefresh && styles.refresh,\n        !actions && [styles[`root-no-actions`]],\n        description && [styles[`root-has-description`]],\n        __disableActionsWrapping && [styles['root-no-wrap']]\n      )}\n      ref={__internalRootRef}\n    >\n      <div className={clsx(styles.main, styles[`main-variant-${variantOverride}`], isRefresh && styles.refresh)}>\n        <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>\n          <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n            <span\n              {...(HeadingTag === 'h2' ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {})}\n              className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}\n              id={headingId}\n            >\n              {children}\n            </span>\n            {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n          </HeadingTag>\n          <InfoLinkLabelContext.Provider value={headingId}>\n            {info && <span className={styles.info}>{info}</span>}\n          </InfoLinkLabelContext.Provider>\n        </div>\n        <Description variantOverride={variantOverride}>{description}</Description>\n      </div>\n      {actions && (\n        <div\n          className={clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh)}\n        >\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function Description({ children, variantOverride }: { children: React.ReactNode; variantOverride: string }) {\n  const isRefresh = useVisualRefresh();\n  return (\n    (children && (\n      <p\n        className={clsx(\n          styles.description,\n          styles[`description-variant-${variantOverride}`],\n          isRefresh && styles.refresh\n        )}\n      >\n        {children}\n      </p>\n    )) ||\n    null\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["header/internal.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, { useContext } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { HeaderProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../internal/analytics/selectors';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n  __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n  variant,\n  headingTagOverride,\n  children,\n  actions,\n  counter,\n  description,\n  info,\n  __internalRootRef = null,\n  __disableActionsWrapping,\n  ...restProps\n}: InternalHeaderProps) {\n  const isMobile = useMobile();\n  const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n  const { isStuck } = useContext(StickyHeaderContext);\n  const baseProps = getBaseProps(restProps);\n  const isRefresh = useVisualRefresh();\n  const assignHeaderId = useContext(CollectionLabelContext).assignId;\n  const headingId = useUniqueId('heading');\n  if (assignHeaderId !== undefined) {\n    assignHeaderId(headingId);\n  }\n  // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n  const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n  const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        styles[`root-variant-${variantOverride}`],\n        isRefresh && styles.refresh,\n        !actions && [styles[`root-no-actions`]],\n        description && [styles[`root-has-description`]]\n      )}\n      ref={__internalRootRef}\n    >\n      <div\n        className={clsx(\n          styles.main,\n          styles[`main-variant-${variantOverride}`],\n          isRefresh && styles.refresh,\n          __disableActionsWrapping && [styles['no-wrap']]\n        )}\n      >\n        <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>\n          <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n            <span\n              {...(HeadingTag === 'h2' ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {})}\n              className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}\n              id={headingId}\n            >\n              {children}\n            </span>\n            {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n          </HeadingTag>\n          <InfoLinkLabelContext.Provider value={headingId}>\n            {info && <span className={styles.info}>{info}</span>}\n          </InfoLinkLabelContext.Provider>\n        </div>\n        {actions && (\n          <div\n            className={clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh)}\n          >\n            {actions}\n          </div>\n        )}\n      </div>\n      <Description variantOverride={variantOverride}>{description}</Description>\n    </div>\n  );\n}\n\nexport function Description({ children, variantOverride }: { children: React.ReactNode; variantOverride: string }) {\n  const isRefresh = useVisualRefresh();\n  return (\n    (children && (\n      <p\n        className={clsx(\n          styles.description,\n          styles[`description-variant-${variantOverride}`],\n          isRefresh && styles.refresh\n        )}\n      >\n        {children}\n      </p>\n    )) ||\n    null\n  );\n}\n"]}

package/header/styles.css.js

@@ -1,38 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_2qdw9_13rj0_93",
-  "refresh": "awsui_refresh_2qdw9_13rj0_111",
-  "root-no-actions": "awsui_root-no-actions_2qdw9_13rj0_114",
-  "root-variant-h2": "awsui_root-variant-h2_2qdw9_13rj0_114",
-  "root-variant-h3": "awsui_root-variant-h3_2qdw9_13rj0_114",
-  "root-has-description": "awsui_root-has-description_2qdw9_13rj0_114",
-  "root-no-wrap": "awsui_root-no-wrap_2qdw9_13rj0_120",
-  "main": "awsui_main_2qdw9_13rj0_124",
-  "main-variant-h1": "awsui_main-variant-h1_2qdw9_13rj0_132",
-  "main-variant-h2": "awsui_main-variant-h2_2qdw9_13rj0_139",
-  "main-variant-h3": "awsui_main-variant-h3_2qdw9_13rj0_139",
-  "actions": "awsui_actions_2qdw9_13rj0_149",
-  "actions-variant-h1": "awsui_actions-variant-h1_2qdw9_13rj0_153",
-  "actions-variant-h2": "awsui_actions-variant-h2_2qdw9_13rj0_156",
-  "actions-variant-h3": "awsui_actions-variant-h3_2qdw9_13rj0_159",
-  "title": "awsui_title_2qdw9_13rj0_172",
-  "title-variant-h1": "awsui_title-variant-h1_2qdw9_13rj0_178",
-  "title-variant-h2": "awsui_title-variant-h2_2qdw9_13rj0_184",
-  "title-variant-h3": "awsui_title-variant-h3_2qdw9_13rj0_190",
-  "info": "awsui_info_2qdw9_13rj0_200",
-  "description": "awsui_description_2qdw9_13rj0_204",
-  "description-variant-h1": "awsui_description-variant-h1_2qdw9_13rj0_209",
-  "description-variant-h2": "awsui_description-variant-h2_2qdw9_13rj0_216",
-  "description-variant-h3": "awsui_description-variant-h3_2qdw9_13rj0_223",
-  "heading": "awsui_heading_2qdw9_13rj0_232",
-  "heading-variant-h1": "awsui_heading-variant-h1_2qdw9_13rj0_241",
-  "heading-variant-h2": "awsui_heading-variant-h2_2qdw9_13rj0_246",
-  "heading-variant-h3": "awsui_heading-variant-h3_2qdw9_13rj0_251",
-  "heading-text": "awsui_heading-text_2qdw9_13rj0_257",
-  "heading-text-variant-h1": "awsui_heading-text-variant-h1_2qdw9_13rj0_260",
-  "heading-text-variant-h2": "awsui_heading-text-variant-h2_2qdw9_13rj0_268",
-  "heading-text-variant-h3": "awsui_heading-text-variant-h3_2qdw9_13rj0_276",
-  "counter": "awsui_counter_2qdw9_13rj0_285"
+  "root": "awsui_root_2qdw9_1s1m0_93",
+  "refresh": "awsui_refresh_2qdw9_1s1m0_110",
+  "root-no-actions": "awsui_root-no-actions_2qdw9_1s1m0_110",
+  "root-variant-h2": "awsui_root-variant-h2_2qdw9_1s1m0_113",
+  "root-variant-h3": "awsui_root-variant-h3_2qdw9_1s1m0_113",
+  "root-has-description": "awsui_root-has-description_2qdw9_1s1m0_113",
+  "root-variant-h1": "awsui_root-variant-h1_2qdw9_1s1m0_122",
+  "main": "awsui_main_2qdw9_1s1m0_132",
+  "no-wrap": "awsui_no-wrap_2qdw9_1s1m0_142",
+  "main-variant-h1": "awsui_main-variant-h1_2qdw9_1s1m0_148",
+  "actions": "awsui_actions_2qdw9_1s1m0_156",
+  "actions-variant-h1": "awsui_actions-variant-h1_2qdw9_1s1m0_160",
+  "actions-variant-h2": "awsui_actions-variant-h2_2qdw9_1s1m0_163",
+  "actions-variant-h3": "awsui_actions-variant-h3_2qdw9_1s1m0_166",
+  "title": "awsui_title_2qdw9_1s1m0_179",
+  "title-variant-h1": "awsui_title-variant-h1_2qdw9_1s1m0_185",
+  "title-variant-h2": "awsui_title-variant-h2_2qdw9_1s1m0_192",
+  "title-variant-h3": "awsui_title-variant-h3_2qdw9_1s1m0_198",
+  "info": "awsui_info_2qdw9_1s1m0_219",
+  "description": "awsui_description_2qdw9_1s1m0_223",
+  "description-variant-h1": "awsui_description-variant-h1_2qdw9_1s1m0_228",
+  "description-variant-h2": "awsui_description-variant-h2_2qdw9_1s1m0_232",
+  "description-variant-h3": "awsui_description-variant-h3_2qdw9_1s1m0_239",
+  "heading": "awsui_heading_2qdw9_1s1m0_248",
+  "heading-variant-h1": "awsui_heading-variant-h1_2qdw9_1s1m0_257",
+  "heading-variant-h2": "awsui_heading-variant-h2_2qdw9_1s1m0_262",
+  "heading-variant-h3": "awsui_heading-variant-h3_2qdw9_1s1m0_267",
+  "heading-text": "awsui_heading-text_2qdw9_1s1m0_273",
+  "heading-text-variant-h1": "awsui_heading-text-variant-h1_2qdw9_1s1m0_276",
+  "heading-text-variant-h2": "awsui_heading-text-variant-h2_2qdw9_1s1m0_284",
+  "heading-text-variant-h3": "awsui_heading-text-variant-h3_2qdw9_1s1m0_292",
+  "counter": "awsui_counter_2qdw9_1s1m0_301"
 };
   

package/header/styles.scoped.css

@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_2qdw9_13rj0_93:not(#\9) {
+.awsui_root_2qdw9_1s1m0_93:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -132,158 +132,174 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 100%;
   flex-wrap: wrap;
   justify-content: space-between;
-  column-gap: var(--space-xs-zb16t3, 8px);
 }
-.awsui_root_2qdw9_13rj0_93.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
+.awsui_root_2qdw9_1s1m0_93.awsui_refresh_2qdw9_1s1m0_110:not(#\9), .awsui_root_2qdw9_1s1m0_93:not(#\9):not(.awsui_root-no-actions_2qdw9_1s1m0_110) {
   row-gap: var(--space-scaled-xxs-7597g1, 4px);
 }
-.awsui_root-no-actions_2qdw9_13rj0_114.awsui_root-variant-h2_2qdw9_13rj0_114:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111), .awsui_root-no-actions_2qdw9_13rj0_114.awsui_root-variant-h3_2qdw9_13rj0_114:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111), .awsui_root-has-description_2qdw9_13rj0_114.awsui_root-variant-h2_2qdw9_13rj0_114:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111), .awsui_root-has-description_2qdw9_13rj0_114.awsui_root-variant-h3_2qdw9_13rj0_114:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
+.awsui_root-no-actions_2qdw9_1s1m0_110.awsui_root-variant-h2_2qdw9_1s1m0_113:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110), .awsui_root-no-actions_2qdw9_1s1m0_110.awsui_root-variant-h3_2qdw9_1s1m0_113:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110), .awsui_root-has-description_2qdw9_1s1m0_113.awsui_root-variant-h2_2qdw9_1s1m0_113:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110), .awsui_root-has-description_2qdw9_1s1m0_113.awsui_root-variant-h3_2qdw9_1s1m0_113:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
   padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
 }
-.awsui_root-no-actions_2qdw9_13rj0_114:not(#\9):not(.awsui_root-has-description_2qdw9_13rj0_114).awsui_refresh_2qdw9_13rj0_111.awsui_root-variant-h3_2qdw9_13rj0_114 {
+.awsui_root-no-actions_2qdw9_1s1m0_110:not(#\9):not(.awsui_root-has-description_2qdw9_1s1m0_113):not(.awsui_refresh_2qdw9_1s1m0_110) {
+  padding-bottom: calc(var(--space-scaled-xs-26e2du, 8px) + var(--space-xxxs-zbmxqb, 2px));
+}
+.awsui_root-no-actions_2qdw9_1s1m0_110.awsui_refresh_2qdw9_1s1m0_110.awsui_root-variant-h2_2qdw9_1s1m0_113:not(#\9), .awsui_root-no-actions_2qdw9_1s1m0_110.awsui_refresh_2qdw9_1s1m0_110.awsui_root-variant-h3_2qdw9_1s1m0_113:not(#\9) {
+  row-gap: var(--space-scaled-xxxs-27y4hv, 2px);
+}
+.awsui_root_2qdw9_1s1m0_93.awsui_root-variant-h1_2qdw9_1s1m0_122:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
+  row-gap: var(--space-scaled-xxs-7597g1, 4px);
+}
+.awsui_root-no-actions_2qdw9_1s1m0_110:not(#\9):not(.awsui_root-has-description_2qdw9_1s1m0_113).awsui_refresh_2qdw9_1s1m0_110.awsui_root-variant-h3_2qdw9_1s1m0_113 {
   padding-bottom: var(--space-scaled-xs-26e2du, 8px);
 }
-.awsui_root-no-wrap_2qdw9_13rj0_120:not(#\9) {
-  flex-wrap: nowrap;
+.awsui_root_2qdw9_1s1m0_93.awsui_root-variant-h1_2qdw9_1s1m0_122.awsui_root-has-description_2qdw9_1s1m0_113:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
+  padding-bottom: var(--space-scaled-2x-xxs-7v8ivz, 4px);
 }
 
-.awsui_main_2qdw9_13rj0_124:not(#\9) {
+.awsui_main_2qdw9_1s1m0_132:not(#\9) {
   word-wrap: break-word;
   max-width: 100%;
-}
-.awsui_main_2qdw9_13rj0_124.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
   display: flex;
-  flex-direction: column;
-}
-.awsui_main-variant-h1_2qdw9_13rj0_132:not(#\9) {
-  padding: var(--space-scaled-2x-xxs-7v8ivz, 4px) 0;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: wrap;
+  column-gap: var(--space-xs-zb16t3, 8px);
+  row-gap: calc(var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxxs-27y4hv, 2px));
 }
-.awsui_main-variant-h1_2qdw9_13rj0_132.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
-  padding: 0;
-  row-gap: var(--space-scaled-xxs-7597g1, 4px);
+.awsui_main_2qdw9_1s1m0_132.awsui_no-wrap_2qdw9_1s1m0_142:not(#\9) {
+  flex-wrap: nowrap;
 }
-.awsui_main-variant-h2_2qdw9_13rj0_139:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111), .awsui_main-variant-h3_2qdw9_13rj0_139:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
-  padding-top: var(--space-scaled-xxs-7597g1, 4px);
+.awsui_main_2qdw9_1s1m0_132.awsui_refresh_2qdw9_1s1m0_110:not(#\9) {
+  row-gap: var(--space-xxs-p8yyaw, 4px);
 }
-:not(#\9):not(.awsui_root-has-description_2qdw9_13rj0_114) > .awsui_main-variant-h2_2qdw9_13rj0_139:not(.awsui_refresh_2qdw9_13rj0_111), :not(#\9):not(.awsui_root-has-description_2qdw9_13rj0_114) > .awsui_main-variant-h3_2qdw9_13rj0_139:not(.awsui_refresh_2qdw9_13rj0_111) {
-  padding-bottom: var(--space-xxxs-zbmxqb, 2px);
+.awsui_main-variant-h1_2qdw9_1s1m0_148:not(#\9) {
+  row-gap: var(--space-scaled-2x-xxs-7v8ivz, 4px);
 }
-.awsui_main-variant-h2_2qdw9_13rj0_139.awsui_refresh_2qdw9_13rj0_111:not(#\9), .awsui_main-variant-h3_2qdw9_13rj0_139.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
-  row-gap: var(--space-scaled-xxxs-27y4hv, 2px);
+
+.awsui_root-has-description_2qdw9_1s1m0_113 > .awsui_main_2qdw9_1s1m0_132:not(#\9) {
+  row-gap: var(--space-scaled-2x-xxs-7v8ivz, 4px);
 }
 
-.awsui_actions_2qdw9_13rj0_149:not(#\9) {
+.awsui_actions_2qdw9_1s1m0_156:not(#\9) {
   display: flex;
   align-items: flex-start;
 }
-.awsui_actions-variant-h1_2qdw9_13rj0_153.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
+.awsui_actions-variant-h1_2qdw9_1s1m0_160.awsui_refresh_2qdw9_1s1m0_110:not(#\9) {
   padding: calc((var(--line-height-heading-xl-avbttk, 30px) - var(--size-vertical-input-v5iwwf, 32px)) / 2) 0;
 }
-.awsui_actions-variant-h2_2qdw9_13rj0_156.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
+.awsui_actions-variant-h2_2qdw9_1s1m0_163.awsui_refresh_2qdw9_1s1m0_110:not(#\9) {
   padding: calc((var(--line-height-heading-l-mmm3my, 24px) - var(--size-vertical-input-v5iwwf, 32px)) / 2) 0;
 }
-.awsui_actions-variant-h3_2qdw9_13rj0_159.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
+.awsui_actions-variant-h3_2qdw9_1s1m0_166.awsui_refresh_2qdw9_1s1m0_110:not(#\9) {
   padding: calc((var(--line-height-heading-m-50evfk, 22px) - var(--size-vertical-input-v5iwwf, 32px)) / 2) 0;
 }
-.awsui_actions-variant-h1_2qdw9_13rj0_153:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
+.awsui_actions-variant-h1_2qdw9_1s1m0_160:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
   padding: var(--space-scaled-xs-26e2du, 8px) 0;
 }
-.awsui_actions-variant-h2_2qdw9_13rj0_156:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111), .awsui_actions-variant-h3_2qdw9_13rj0_159:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
+.awsui_actions-variant-h2_2qdw9_1s1m0_163:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110), .awsui_actions-variant-h3_2qdw9_1s1m0_166:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
   padding: var(--space-scaled-xxs-7597g1, 4px) 0;
 }
-.awsui_root-has-description_2qdw9_13rj0_114 > .awsui_actions-variant-h2_2qdw9_13rj0_156:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111), .awsui_root-has-description_2qdw9_13rj0_114 > .awsui_actions-variant-h3_2qdw9_13rj0_159:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
+.awsui_root-has-description_2qdw9_1s1m0_113 > .awsui_main_2qdw9_1s1m0_132 > .awsui_actions_2qdw9_1s1m0_156:not(#\9) {
   padding-bottom: 0;
 }
 
-.awsui_title_2qdw9_13rj0_172:not(#\9) {
+.awsui_title_2qdw9_1s1m0_179:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   color: var(--color-text-heading-default-rtslvy, #000716);
 }
-.awsui_title-variant-h1_2qdw9_13rj0_178:not(#\9) {
+.awsui_title-variant-h1_2qdw9_1s1m0_185:not(#\9) {
   font-size: var(--font-size-heading-xl-ypc05a, 24px);
+  padding-top: var(--space-scaled-2x-xxs-7v8ivz, 4px);
 }
-.awsui_title-variant-h1_2qdw9_13rj0_178.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
+.awsui_title-variant-h1_2qdw9_1s1m0_185.awsui_refresh_2qdw9_1s1m0_110:not(#\9) {
   padding-top: calc((var(--size-vertical-input-v5iwwf, 32px) - var(--line-height-heading-xl-avbttk, 30px)) / 2);
 }
-.awsui_title-variant-h2_2qdw9_13rj0_184:not(#\9) {
+.awsui_title-variant-h2_2qdw9_1s1m0_192:not(#\9) {
   font-size: var(--font-size-heading-l-ou0d0l, 20px);
 }
-.awsui_title-variant-h2_2qdw9_13rj0_184.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
+.awsui_title-variant-h2_2qdw9_1s1m0_192.awsui_refresh_2qdw9_1s1m0_110:not(#\9) {
   padding-top: calc((var(--size-vertical-input-v5iwwf, 32px) - var(--line-height-heading-l-mmm3my, 24px)) / 2);
 }
-.awsui_title-variant-h3_2qdw9_13rj0_190:not(#\9) {
+.awsui_title-variant-h3_2qdw9_1s1m0_198:not(#\9) {
   font-size: var(--font-size-heading-m-sjd256, 18px);
 }
-.awsui_title-variant-h3_2qdw9_13rj0_190.awsui_refresh_2qdw9_13rj0_111:not(#\9) {
+.awsui_title-variant-h3_2qdw9_1s1m0_198.awsui_refresh_2qdw9_1s1m0_110:not(#\9) {
   padding-top: calc((var(--size-vertical-input-v5iwwf, 32px) - var(--line-height-heading-m-50evfk, 22px)) / 2);
 }
-.awsui_title-variant-h2_2qdw9_13rj0_184:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111), .awsui_title-variant-h3_2qdw9_13rj0_190:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
-  padding: var(--space-scaled-xxs-7597g1, 4px) 0;
+.awsui_title-variant-h2_2qdw9_1s1m0_192:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110), .awsui_title-variant-h3_2qdw9_1s1m0_198:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
+  padding-top: var(--space-scaled-xs-26e2du, 8px);
+}
+.awsui_no-wrap_2qdw9_1s1m0_142 > .awsui_title_2qdw9_1s1m0_179:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
+  padding-bottom: calc(var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxxs-27y4hv, 2px));
 }
 
-.awsui_info_2qdw9_13rj0_200:not(#\9) {
+.awsui_root-no-actions_2qdw9_1s1m0_110.awsui_root-has-description_2qdw9_1s1m0_113 > .awsui_main_2qdw9_1s1m0_132 > :not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110).awsui_title-variant-h2_2qdw9_1s1m0_192, .awsui_root-no-actions_2qdw9_1s1m0_110.awsui_root-has-description_2qdw9_1s1m0_113 > .awsui_main_2qdw9_1s1m0_132 > :not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110).awsui_title-variant-h3_2qdw9_1s1m0_198 {
+  padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
+}
+
+.awsui_root-variant-h1_2qdw9_1s1m0_122.awsui_root-no-actions_2qdw9_1s1m0_110:not(#\9):not(.awsui_root-has-description_2qdw9_1s1m0_113):not(.awsui_refresh_2qdw9_1s1m0_110) {
+  padding-bottom: var(--space-scaled-2x-xxs-7v8ivz, 4px);
+}
+
+.awsui_info_2qdw9_1s1m0_219:not(#\9) {
   padding-right: var(--space-s-34lx8l, 12px);
 }
 
-.awsui_description_2qdw9_13rj0_204:not(#\9) {
+.awsui_description_2qdw9_1s1m0_223:not(#\9) {
   margin: 0;
   padding: 0;
   color: var(--color-text-heading-secondary-37b2tq, #414d5c);
 }
-.awsui_description-variant-h1_2qdw9_13rj0_209:not(#\9) {
+.awsui_description-variant-h1_2qdw9_1s1m0_228:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
 }
-.awsui_description-variant-h1_2qdw9_13rj0_209:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
-  padding-top: var(--space-scaled-xxs-7597g1, 4px);
-}
-.awsui_description-variant-h2_2qdw9_13rj0_216:not(#\9) {
+.awsui_description-variant-h2_2qdw9_1s1m0_232:not(#\9) {
   font-size: var(--font-header-h2-description-size-2hj97p, 14px);
   line-height: var(--font-header-h2-description-line-height-rtewek, 20px);
 }
-.awsui_description-variant-h2_2qdw9_13rj0_216:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
+.awsui_description-variant-h2_2qdw9_1s1m0_232:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
   padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
 }
-.awsui_description-variant-h3_2qdw9_13rj0_223:not(#\9) {
+.awsui_description-variant-h3_2qdw9_1s1m0_239:not(#\9) {
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
 }
-.awsui_description-variant-h3_2qdw9_13rj0_223:not(#\9):not(.awsui_refresh_2qdw9_13rj0_111) {
+.awsui_description-variant-h3_2qdw9_1s1m0_239:not(#\9):not(.awsui_refresh_2qdw9_1s1m0_110) {
   padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
 }
 
-.awsui_heading_2qdw9_13rj0_232:not(#\9) {
+.awsui_heading_2qdw9_1s1m0_248:not(#\9) {
   margin: 0;
   display: inline;
   font-size: inherit;
   margin-right: var(--space-xs-zb16t3, 8px);
 }
-.awsui_heading_2qdw9_13rj0_232:not(#\9):only-child {
+.awsui_heading_2qdw9_1s1m0_248:not(#\9):only-child {
   margin: 0;
 }
-.awsui_heading-variant-h1_2qdw9_13rj0_241:not(#\9) {
+.awsui_heading-variant-h1_2qdw9_1s1m0_257:not(#\9) {
   font-size: var(--font-size-heading-xl-ypc05a, 24px);
   line-height: var(--line-height-heading-xl-avbttk, 30px);
   letter-spacing: var(--letter-spacing-heading-xl-sagq9c, -0.02em);
 }
-.awsui_heading-variant-h2_2qdw9_13rj0_246:not(#\9) {
+.awsui_heading-variant-h2_2qdw9_1s1m0_262:not(#\9) {
   font-size: var(--font-size-heading-l-ou0d0l, 20px);
   line-height: var(--line-height-heading-l-mmm3my, 24px);
   letter-spacing: var(--letter-spacing-heading-l-qqjd4y, -0.015em);
 }
-.awsui_heading-variant-h3_2qdw9_13rj0_251:not(#\9) {
+.awsui_heading-variant-h3_2qdw9_1s1m0_267:not(#\9) {
   font-size: var(--font-size-heading-m-sjd256, 18px);
   line-height: var(--line-height-heading-m-50evfk, 22px);
   letter-spacing: var(--letter-spacing-heading-m-0w575i, -0.01em);
 }
 
-.awsui_heading-text_2qdw9_13rj0_257:not(#\9) {
+.awsui_heading-text_2qdw9_1s1m0_273:not(#\9) {
   /* used in test-utils */
 }
-.awsui_heading-text-variant-h1_2qdw9_13rj0_260:not(#\9) {
+.awsui_heading-text-variant-h1_2qdw9_1s1m0_276:not(#\9) {
   font-size: var(--font-size-heading-xl-ypc05a, 24px);
   line-height: var(--line-height-heading-xl-avbttk, 30px);
   letter-spacing: var(--letter-spacing-heading-xl-sagq9c, -0.02em);
@@ -291,7 +307,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_heading-text-variant-h2_2qdw9_13rj0_268:not(#\9) {
+.awsui_heading-text-variant-h2_2qdw9_1s1m0_284:not(#\9) {
   font-size: var(--font-size-heading-l-ou0d0l, 20px);
   line-height: var(--line-height-heading-l-mmm3my, 24px);
   letter-spacing: var(--letter-spacing-heading-l-qqjd4y, -0.015em);
@@ -299,7 +315,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_heading-text-variant-h3_2qdw9_13rj0_276:not(#\9) {
+.awsui_heading-text-variant-h3_2qdw9_1s1m0_292:not(#\9) {
   font-size: var(--font-size-heading-m-sjd256, 18px);
   line-height: var(--line-height-heading-m-50evfk, 22px);
   letter-spacing: var(--letter-spacing-heading-m-0w575i, -0.01em);
@@ -308,7 +324,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
 
-.awsui_counter_2qdw9_13rj0_285:not(#\9) {
+.awsui_counter_2qdw9_1s1m0_301:not(#\9) {
   color: var(--color-text-counter-zqugin, #5f6b7a);
   font-weight: 400;
 }

package/header/styles.selectors.js

@@ -2,38 +2,37 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_2qdw9_13rj0_93",
-  "refresh": "awsui_refresh_2qdw9_13rj0_111",
-  "root-no-actions": "awsui_root-no-actions_2qdw9_13rj0_114",
-  "root-variant-h2": "awsui_root-variant-h2_2qdw9_13rj0_114",
-  "root-variant-h3": "awsui_root-variant-h3_2qdw9_13rj0_114",
-  "root-has-description": "awsui_root-has-description_2qdw9_13rj0_114",
-  "root-no-wrap": "awsui_root-no-wrap_2qdw9_13rj0_120",
-  "main": "awsui_main_2qdw9_13rj0_124",
-  "main-variant-h1": "awsui_main-variant-h1_2qdw9_13rj0_132",
-  "main-variant-h2": "awsui_main-variant-h2_2qdw9_13rj0_139",
-  "main-variant-h3": "awsui_main-variant-h3_2qdw9_13rj0_139",
-  "actions": "awsui_actions_2qdw9_13rj0_149",
-  "actions-variant-h1": "awsui_actions-variant-h1_2qdw9_13rj0_153",
-  "actions-variant-h2": "awsui_actions-variant-h2_2qdw9_13rj0_156",
-  "actions-variant-h3": "awsui_actions-variant-h3_2qdw9_13rj0_159",
-  "title": "awsui_title_2qdw9_13rj0_172",
-  "title-variant-h1": "awsui_title-variant-h1_2qdw9_13rj0_178",
-  "title-variant-h2": "awsui_title-variant-h2_2qdw9_13rj0_184",
-  "title-variant-h3": "awsui_title-variant-h3_2qdw9_13rj0_190",
-  "info": "awsui_info_2qdw9_13rj0_200",
-  "description": "awsui_description_2qdw9_13rj0_204",
-  "description-variant-h1": "awsui_description-variant-h1_2qdw9_13rj0_209",
-  "description-variant-h2": "awsui_description-variant-h2_2qdw9_13rj0_216",
-  "description-variant-h3": "awsui_description-variant-h3_2qdw9_13rj0_223",
-  "heading": "awsui_heading_2qdw9_13rj0_232",
-  "heading-variant-h1": "awsui_heading-variant-h1_2qdw9_13rj0_241",
-  "heading-variant-h2": "awsui_heading-variant-h2_2qdw9_13rj0_246",
-  "heading-variant-h3": "awsui_heading-variant-h3_2qdw9_13rj0_251",
-  "heading-text": "awsui_heading-text_2qdw9_13rj0_257",
-  "heading-text-variant-h1": "awsui_heading-text-variant-h1_2qdw9_13rj0_260",
-  "heading-text-variant-h2": "awsui_heading-text-variant-h2_2qdw9_13rj0_268",
-  "heading-text-variant-h3": "awsui_heading-text-variant-h3_2qdw9_13rj0_276",
-  "counter": "awsui_counter_2qdw9_13rj0_285"
+  "root": "awsui_root_2qdw9_1s1m0_93",
+  "refresh": "awsui_refresh_2qdw9_1s1m0_110",
+  "root-no-actions": "awsui_root-no-actions_2qdw9_1s1m0_110",
+  "root-variant-h2": "awsui_root-variant-h2_2qdw9_1s1m0_113",
+  "root-variant-h3": "awsui_root-variant-h3_2qdw9_1s1m0_113",
+  "root-has-description": "awsui_root-has-description_2qdw9_1s1m0_113",
+  "root-variant-h1": "awsui_root-variant-h1_2qdw9_1s1m0_122",
+  "main": "awsui_main_2qdw9_1s1m0_132",
+  "no-wrap": "awsui_no-wrap_2qdw9_1s1m0_142",
+  "main-variant-h1": "awsui_main-variant-h1_2qdw9_1s1m0_148",
+  "actions": "awsui_actions_2qdw9_1s1m0_156",
+  "actions-variant-h1": "awsui_actions-variant-h1_2qdw9_1s1m0_160",
+  "actions-variant-h2": "awsui_actions-variant-h2_2qdw9_1s1m0_163",
+  "actions-variant-h3": "awsui_actions-variant-h3_2qdw9_1s1m0_166",
+  "title": "awsui_title_2qdw9_1s1m0_179",
+  "title-variant-h1": "awsui_title-variant-h1_2qdw9_1s1m0_185",
+  "title-variant-h2": "awsui_title-variant-h2_2qdw9_1s1m0_192",
+  "title-variant-h3": "awsui_title-variant-h3_2qdw9_1s1m0_198",
+  "info": "awsui_info_2qdw9_1s1m0_219",
+  "description": "awsui_description_2qdw9_1s1m0_223",
+  "description-variant-h1": "awsui_description-variant-h1_2qdw9_1s1m0_228",
+  "description-variant-h2": "awsui_description-variant-h2_2qdw9_1s1m0_232",
+  "description-variant-h3": "awsui_description-variant-h3_2qdw9_1s1m0_239",
+  "heading": "awsui_heading_2qdw9_1s1m0_248",
+  "heading-variant-h1": "awsui_heading-variant-h1_2qdw9_1s1m0_257",
+  "heading-variant-h2": "awsui_heading-variant-h2_2qdw9_1s1m0_262",
+  "heading-variant-h3": "awsui_heading-variant-h3_2qdw9_1s1m0_267",
+  "heading-text": "awsui_heading-text_2qdw9_1s1m0_273",
+  "heading-text-variant-h1": "awsui_heading-text-variant-h1_2qdw9_1s1m0_276",
+  "heading-text-variant-h2": "awsui_heading-text-variant-h2_2qdw9_1s1m0_284",
+  "heading-text-variant-h3": "awsui_heading-text-variant-h3_2qdw9_1s1m0_292",
+  "counter": "awsui_counter_2qdw9_1s1m0_301"
 };
   

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (82b4c9c5)";
+export var PACKAGE_VERSION = "3.0.0 (4def8f6b)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (82b4c9c5)",
+  "PACKAGE_VERSION": "3.0.0 (4def8f6b)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "82b4c9c51567be2a3fbb70df9ed0b006a51409d9"
+  "commit": "4def8f6b29f1a7b18777e0913d950de206fc5260"
 }

package/package.json

@@ -109,7 +109,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.383",
+  "version": "3.0.385",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"