@cloudscape-design/components-themeable 3.0.817 → 3.0.818

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

@@ -1 +1 @@
-{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { InternalButton } from '../../button/internal';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useAppLayoutInternals } from './context';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT is used to reduce the number\n * of triggers that are initially visible on the mobile toolbar, the rest\n * are then placed into an overflow menu\n *\n * Note if one of the triggers is for a split-panel, it would not count that\n */\nexport const VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT = 2;\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n  const {\n    disableBodyScroll,\n    drawers,\n    drawersTriggerCount,\n    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    navigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n  if (!drawers || drawersTriggerCount === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(styles['drawers-container'], {\n        [styles['disable-body-scroll']]: disableBodyScroll,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n        [styles.unfocusable]: isUnfocusable,\n      })}\n    >\n      <SplitPanel.Side />\n      <ActiveDrawer />\n      {!isMobile && <DesktopTriggers />}\n    </div>\n  );\n}\n\nfunction ActiveDrawer() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    navigationHide,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMinWidth,\n    drawersMaxWidth,\n    drawerRef,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n  const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n  return (\n    <aside\n      id={activeDrawerId ?? undefined}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [styles['is-drawer-open']]: activeDrawerId,\n        [styles.unfocusable]: isUnfocusable,\n        [testutilStyles['active-drawer']]: activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      style={{\n        ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n      <div className={styles['drawer-content-container']}>\n        <div className={styles['drawer-close-button']}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => {\n              handleDrawersClick(activeDrawerId);\n              handleToolsClick(false);\n            }}\n            ref={drawersRefs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && (\n          <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitPanelHeight =\n    isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n  const getIndexOfOverflowItem = () => {\n    if (containerHeight) {\n      const ITEM_HEIGHT = 48;\n      const overflowSpot =\n        activeDrawerId && isSplitPanelOpen\n          ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n          : (containerHeight - splitPanelHeight) / 1.5;\n\n      const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n      let splitPanelItem = 0;\n      if (hasSplitPanel && splitPanelToggle.displayed) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n      })}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item?.trigger?.iconName}\n              iconSvg={item?.trigger?.iconSvg}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            )}\n            onItemClick={({ detail }) => {\n              handleDrawersClick(detail.id);\n            }}\n          />\n        )}\n        {hasSplitPanel && splitPanelToggle.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggle.ariaLabel}\n            ariaControls={splitPanelControlId}\n            ariaExpanded={!!isSplitPanelOpen}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n            highContrastHeader={headerVariant === 'high-contrast'}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!drawers) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const { visibleItems, overflowItems } = splitItems(drawers, VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT, activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx({\n        [styles.unfocusable]: hasDrawerViewportOverlay,\n      })}\n      aria-label={drawersAriaLabel}\n      role=\"region\"\n    >\n      <div className={styles['drawers-mobile-triggers-container']} role=\"toolbar\" aria-orientation=\"horizontal\">\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n          return (\n            <TriggerButton\n              ariaExpanded={item.id === activeDrawerId}\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                `awsui-app-layout-trigger-${item.id}`,\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              disabled={hasDrawerViewportOverlay}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              iconName={item?.trigger?.iconName}\n              iconSvg={item?.trigger?.iconSvg}\n              badge={item.badge}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}
+{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { InternalButton } from '../../button/internal';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useAppLayoutInternals } from './context';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT is used to reduce the number\n * of triggers that are initially visible on the mobile toolbar, the rest\n * are then placed into an overflow menu\n *\n * Note if one of the triggers is for a split-panel, it would not count that\n */\nexport const VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT = 2;\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n  const {\n    disableBodyScroll,\n    drawers,\n    drawersTriggerCount,\n    hasDrawerViewportOverlay,\n    hasOpenDrawer,\n    navigationOpen,\n    navigationHide,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n  if (!drawers || drawersTriggerCount === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(styles['drawers-container'], {\n        [styles['disable-body-scroll']]: disableBodyScroll,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n        [styles.unfocusable]: isUnfocusable,\n      })}\n    >\n      <SplitPanel.Side />\n      <ActiveDrawer />\n      {!isMobile && <DesktopTriggers />}\n    </div>\n  );\n}\n\nfunction ActiveDrawer() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    navigationHide,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMinWidth,\n    drawersMaxWidth,\n    drawerRef,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n  const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n  const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n  return (\n    <aside\n      id={activeDrawerId ?? undefined}\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [styles['is-drawer-open']]: activeDrawerId,\n        [styles.unfocusable]: isUnfocusable,\n        [testutilStyles['active-drawer']]: activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      style={{\n        ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n      <div className={styles['drawer-content-container']}>\n        <div className={styles['drawer-close-button']}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => {\n              handleDrawersClick(activeDrawerId);\n              handleToolsClick(false);\n            }}\n            ref={drawersRefs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && (\n          <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    hasOpenDrawer,\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    splitPanelReportedHeaderHeight,\n    splitPanelReportedSize,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const splitPanelHeight =\n    isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n  const getIndexOfOverflowItem = () => {\n    if (containerHeight) {\n      const ITEM_HEIGHT = 48;\n      const overflowSpot =\n        activeDrawerId && isSplitPanelOpen\n          ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n          : (containerHeight - splitPanelHeight) / 1.5;\n\n      const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n      let splitPanelItem = 0;\n      if (hasSplitPanel && splitPanelToggle.displayed) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      className={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: hasOpenDrawer,\n      })}\n      aria-label={drawersAriaLabel}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"vertical\"\n      >\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\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                [testutilStyles['drawers-trigger-with-badge']]: item.badge,\n                [testutilStyles['tools-toggle']]: item.id === TOOLS_DRAWER_ID,\n              })}\n              iconName={item?.trigger?.iconName}\n              iconSvg={item?.trigger?.iconSvg}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            )}\n            onItemClick={({ detail }) => {\n              handleDrawersClick(detail.id);\n            }}\n          />\n        )}\n        {hasSplitPanel && splitPanelToggle.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggle.ariaLabel}\n            ariaControls={splitPanelControlId}\n            ariaExpanded={!!isSplitPanelOpen}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n            highContrastHeader={headerVariant === 'high-contrast'}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n  const {\n    activeDrawerId,\n    drawers,\n    drawersAriaLabel,\n    drawersOverflowAriaLabel,\n    drawersOverflowWithBadgeAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (!drawers) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const { visibleItems, overflowItems } = splitItems(drawers, VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT, activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx({\n        [styles.unfocusable]: hasDrawerViewportOverlay,\n      })}\n      aria-label={drawersAriaLabel}\n      role=\"region\"\n    >\n      <div className={styles['drawers-mobile-triggers-container']} role=\"toolbar\" aria-orientation=\"horizontal\">\n        {visibleItems.map(item => {\n          const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n          return (\n            <TriggerButton\n              ariaExpanded={item.id === activeDrawerId}\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], {\n                [testutilStyles['drawers-trigger-with-badge']]: item.badge,\n                [testutilStyles['tools-toggle']]: item.id === TOOLS_DRAWER_ID,\n              })}\n              disabled={hasDrawerViewportOverlay}\n              ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n              iconName={item?.trigger?.iconName}\n              iconSvg={item?.trigger?.iconSvg}\n              badge={item.badge}\n              key={item.id}\n              onClick={() => handleDrawersClick(item.id)}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              highContrastHeader={headerVariant === 'high-contrast'}\n              selected={item.id === activeDrawerId}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n            onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}

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

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

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

@@ -35,17 +35,17 @@ export default function Navigation() {
         return (React.createElement("div", { className: clsx(styles['navigation-container'], {
                 [styles['disable-body-scroll']]: disableBodyScroll,
                 [styles.unfocusable]: isUnfocusable,
-                [testutilStyles['drawer-closed']]: !navigationOpen,
             }), style: { [customCssProps.navigationWidth]: `${navigationWidth}px` } },
             !isMobile && (React.createElement("nav", { "aria-hidden": isMobile || navigationOpen, "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles['show-navigation'], {
                     [styles.animating]: state === 'exiting',
                     [styles['is-navigation-open']]: navigationOpen,
                 }), ref: state === 'exiting' ? transitionEventsRef : undefined },
                 React.createElement(TriggerButton, { ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle, ariaExpanded: navigationOpen ? undefined : false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => handleNavigationClick(true), ref: navigationRefs.toggle, highContrastHeader: headerVariant === 'high-contrast' }))),
-            React.createElement("nav", { "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles.navigation, {
+            React.createElement("nav", { "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles.navigation, testutilStyles.navigation, {
+                    [testutilStyles['drawer-closed']]: !navigationOpen,
                     [styles.animating]: state === 'entering',
                     [styles['is-navigation-open']]: navigationOpen,
-                }, testutilStyles.navigation), ref: state !== 'exiting' ? transitionEventsRef : undefined, "aria-hidden": !navigationOpen, onClick: event => {
+                }), ref: state !== 'exiting' ? transitionEventsRef : undefined, "aria-hidden": !navigationOpen, onClick: event => {
                     onNavigationClick && onNavigationClick(event);
                 } },
                 React.createElement("div", { className: styles['animated-content'] },

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../button/internal';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    disableBodyScroll,\n    handleNavigationClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    isToolsOpen,\n    navigation,\n    navigationHide,\n    navigationRefs,\n    navigationWidth,\n    toolsHide,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = hasDrawerViewportOverlay && (!navigationOpen || (isToolsOpen && !toolsHide));\n\n  return (\n    <Transition in={navigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles.unfocusable]: isUnfocusable,\n            [testutilStyles['drawer-closed']]: !navigationOpen,\n          })}\n          style={{ [customCssProps.navigationWidth]: `${navigationWidth}px` }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || navigationOpen}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: navigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                ariaExpanded={navigationOpen ? undefined : false}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={navigationRefs.toggle}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: navigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!navigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={styles['animated-content']}>\n              <div className={styles['hide-navigation']}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={navigationRefs.close}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../button/internal';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    disableBodyScroll,\n    handleNavigationClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    navigationOpen,\n    isToolsOpen,\n    navigation,\n    navigationHide,\n    navigationRefs,\n    navigationWidth,\n    toolsHide,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = hasDrawerViewportOverlay && (!navigationOpen || (isToolsOpen && !toolsHide));\n\n  return (\n    <Transition in={navigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{ [customCssProps.navigationWidth]: `${navigationWidth}px` }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || navigationOpen}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: navigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                ariaExpanded={navigationOpen ? undefined : false}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={navigationRefs.toggle}\n                highContrastHeader={headerVariant === 'high-contrast'}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(styles.navigation, testutilStyles.navigation, {\n              [testutilStyles['drawer-closed']]: !navigationOpen,\n              [styles.animating]: state === 'entering',\n              [styles['is-navigation-open']]: navigationOpen,\n            })}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!navigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={styles['animated-content']}>\n              <div className={styles['hide-navigation']}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={navigationRefs.close}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/tools.js

@@ -36,7 +36,6 @@ export default function Tools({ children }) {
         return (React.createElement("div", { className: clsx(styles['tools-container'], {
                 [styles['disable-body-scroll']]: disableBodyScroll,
                 [styles.unfocusable]: isUnfocusable,
-                [testutilStyles['drawer-closed']]: !isToolsOpen,
             }), style: {
                 [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,
                 [customCssProps.toolsWidth]: `${toolsWidth}px`,
@@ -50,6 +49,7 @@ export default function Tools({ children }) {
                     [styles.animating]: state === 'entering',
                     [styles['has-tools-form-persistence']]: hasToolsFormPersistence,
                     [styles['is-tools-open']]: isToolsOpen,
+                    [testutilStyles['drawer-closed']]: !isToolsOpen,
                 }, testutilStyles.tools), ref: state !== 'exiting' ? transitionEventsRef : undefined },
                 React.createElement("div", { className: styles['animated-content'] },
                     React.createElement("div", { className: styles['hide-tools'] },

package/lib/internal/template/app-layout/visual-refresh/tools.js.map

@@ -1 +1 @@
-{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../button/internal';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    disableBodyScroll,\n    drawers,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    loseToolsFocus,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    tools,\n    toolsControlId,\n    toolsHide,\n    toolsRefs,\n    toolsWidth,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasSplitPanel = !!splitPanel && splitPanelPosition === 'side';\n  const hasToolsForm = getToolsFormStatus(\n    hasSplitPanel && splitPanelDisplayed,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    toolsHide\n  );\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const isUnfocusable = hasDrawerViewportOverlay && !isToolsOpen;\n\n  /**\n   * If the drawers property is defined the SplitPanel will be mounted and rendered\n   * by the Drawers component.\n   */\n  if ((toolsHide && !hasSplitPanel) || drawers) {\n    return null;\n  }\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles.unfocusable]: isUnfocusable,\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            [customCssProps.toolsWidth]: `${toolsWidth}px`,\n          }}\n          onBlur={e => {\n            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n              loseToolsFocus();\n            }\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              id={toolsControlId}\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={styles['animated-content']}>\n                <div className={styles['hide-tools']}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={toolsRefs.close}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(styles['show-tools'], {\n                [styles.animating]: state === 'exiting',\n                [styles['has-tools-form']]: hasToolsForm,\n                [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n              data-testid=\"side-split-panel-drawer\"\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  ariaControls={toolsControlId}\n                  ariaExpanded={isToolsOpen}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={toolsRefs.toggle}\n                  highContrastHeader={headerVariant === 'high-contrast'}\n                />\n              )}\n\n              {hasSplitPanel && splitPanelToggle.displayed && (\n                <TriggerButton\n                  ariaLabel={splitPanelToggle.ariaLabel}\n                  ariaControls={splitPanelControlId}\n                  ariaExpanded={!!isSplitPanelOpen}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelTestUtilStyles['open-button']}\n                  ref={splitPanelRefs.toggle}\n                  highContrastHeader={headerVariant === 'high-contrast'}\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../button/internal';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    disableBodyScroll,\n    drawers,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    loseToolsFocus,\n    splitPanel,\n    splitPanelControlId,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    tools,\n    toolsControlId,\n    toolsHide,\n    toolsRefs,\n    toolsWidth,\n    headerVariant,\n  } = useAppLayoutInternals();\n\n  const hasSplitPanel = !!splitPanel && splitPanelPosition === 'side';\n  const hasToolsForm = getToolsFormStatus(\n    hasSplitPanel && splitPanelDisplayed,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    toolsHide\n  );\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const isUnfocusable = hasDrawerViewportOverlay && !isToolsOpen;\n\n  /**\n   * If the drawers property is defined the SplitPanel will be mounted and rendered\n   * by the Drawers component.\n   */\n  if ((toolsHide && !hasSplitPanel) || drawers) {\n    return null;\n  }\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            [customCssProps.toolsWidth]: `${toolsWidth}px`,\n          }}\n          onBlur={e => {\n            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n              loseToolsFocus();\n            }\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              id={toolsControlId}\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                  [testutilStyles['drawer-closed']]: !isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={styles['animated-content']}>\n                <div className={styles['hide-tools']}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={toolsRefs.close}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(styles['show-tools'], {\n                [styles.animating]: state === 'exiting',\n                [styles['has-tools-form']]: hasToolsForm,\n                [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n              data-testid=\"side-split-panel-drawer\"\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  ariaControls={toolsControlId}\n                  ariaExpanded={isToolsOpen}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={toolsRefs.toggle}\n                  highContrastHeader={headerVariant === 'high-contrast'}\n                />\n              )}\n\n              {hasSplitPanel && splitPanelToggle.displayed && (\n                <TriggerButton\n                  ariaLabel={splitPanelToggle.ariaLabel}\n                  ariaControls={splitPanelControlId}\n                  ariaExpanded={!!isSplitPanelOpen}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelTestUtilStyles['open-button']}\n                  ref={splitPanelRefs.toggle}\n                  highContrastHeader={headerVariant === 'high-contrast'}\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACxE;AAED,UAAU,mCAAmC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AA8BD,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eA8IrC;AAED,eAAO,MAAM,gCAAgC,uGAA4D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACxE;AAED,UAAU,mCAAmC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AA8BD,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eAgJrC;AAED,eAAO,MAAM,gCAAgC,uGAA4D,CAAC"}

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

@@ -97,8 +97,10 @@ toolbarProps = {}, }) {
             hasNavigation && (React.createElement("nav", { className: clsx(styles['universal-toolbar-nav']) },
                 React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => onNavigationToggle === null || onNavigationToggle === void 0 ? void 0 : onNavigationToggle(!navigationOpen), ref: navigationFocusRef, selected: navigationOpen, disabled: anyPanelOpenInMobile }))),
             (breadcrumbs || discoveredBreadcrumbs) && (React.createElement("div", { className: clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) },
-                React.createElement(BreadcrumbsSlotContext.Provider, { value: { isInToolbar: true } }, breadcrumbs ||
-                    (discoveredBreadcrumbs && (React.createElement(BreadcrumbGroupImplementation, Object.assign({}, discoveredBreadcrumbs, { "data-awsui-discovered-breadcrumbs": true, __injectAnalyticsComponentMetadata: true }))))))),
+                React.createElement(BreadcrumbsSlotContext.Provider, { value: { isInToolbar: true } },
+                    React.createElement("div", { className: styles['breadcrumbs-own'] }, breadcrumbs),
+                    discoveredBreadcrumbs && (React.createElement("div", { className: styles['breadcrumbs-discovered'] },
+                        React.createElement(BreadcrumbGroupImplementation, Object.assign({}, discoveredBreadcrumbs, { "data-awsui-discovered-breadcrumbs": true, __injectAnalyticsComponentMetadata: true }))))))),
             ((drawers && drawers.length > 0) || (hasSplitPanel && (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed))) && (React.createElement("div", { className: clsx(styles['universal-toolbar-drawers']) },
                 React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null, drawers: (_b = drawers === null || drawers === void 0 ? void 0 : drawers.filter(item => !!item.trigger)) !== null && _b !== void 0 ? _b : [], drawersFocusRef: drawersFocusRef, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed) ? splitPanelToggleProps : undefined, splitPanelFocusRef: splitPanelFocusRef, onSplitPanelToggle: onSplitPanelToggle, disabled: anyPanelOpenInMobile, globalDrawersFocusControl: globalDrawersFocusControl, globalDrawers: (_c = globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.filter(item => !!item.trigger)) !== null && _c !== void 0 ? _c : [], activeGlobalDrawersIds: activeGlobalDrawersIds !== null && activeGlobalDrawersIds !== void 0 ? activeGlobalDrawersIds : [], onActiveGlobalDrawersChange: onActiveGlobalDrawersChange }))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { BreadcrumbsSlotContext } from '../contexts';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  globalDrawersFocusControl?: FocusControlMultipleStates;\n  onActiveDrawerChange?: (drawerId: string | null) => void;\n  globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n  activeGlobalDrawersIds?: ReadonlyArray<string>;\n  onActiveGlobalDrawersChange?: ((drawerId: string) => void) | undefined;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n  return {\n    ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n    activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n    drawers: toolbarProps.drawers ?? legacyProps.drawers,\n    drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n    globalDrawersFocusControl: toolbarProps.globalDrawersFocusControl,\n    onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n    globalDrawers: toolbarProps.globalDrawers ?? legacyProps.globalDrawers,\n    activeGlobalDrawersIds: toolbarProps.activeGlobalDrawersIds ?? legacyProps.activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange: toolbarProps.onActiveGlobalDrawersChange ?? legacyProps.onActiveGlobalDrawersChange,\n    hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n    navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n    navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n    onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n    hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n    splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n    splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n      ...legacyProps.splitPanelToggleConfig,\n      active: legacyProps.splitPanelOpen,\n      controlId: legacyProps.splitPanelControlId,\n      position: legacyProps.splitPanelPosition,\n    },\n    onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n  };\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const {\n    breadcrumbs,\n    discoveredBreadcrumbs,\n    verticalOffsets,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    setToolbarHeight,\n    globalDrawersFocusControl,\n  } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    globalDrawers,\n    activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n  } = convertLegacyProps(toolbarProps, appLayoutInternals);\n  // TODO: expose configuration property\n  const pinnedToolbar = true;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    let lastScrollY = window.scrollY;\n\n    /* istanbul ignore next not testable in JSDOM */\n    const updateScrollDirection = () => {\n      if (pinnedToolbar) {\n        setToolbarState('show');\n        return;\n      }\n      const scrollY = window.scrollY;\n      // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n      const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n      // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n      if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n        setToolbarState(direction);\n      }\n      lastScrollY = scrollY > 0 ? scrollY : 0;\n    };\n\n    window.addEventListener('scroll', updateScrollDirection);\n    return () => {\n      window.removeEventListener('scroll', updateScrollDirection);\n    };\n  }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n  const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n  useEffect(() => {\n    if (anyPanelOpenInMobile) {\n      document.body.classList.add(styles['block-body-scroll']);\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n    return () => {\n      document.body.classList.remove(styles['block-body-scroll']);\n    };\n  }, [anyPanelOpenInMobile]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n        [styles['toolbar-hidden']]: toolbarHidden,\n      })}\n      style={{\n        insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && (\n          <nav className={clsx(styles['universal-toolbar-nav'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle?.(!navigationOpen)}\n              ref={navigationFocusRef}\n              selected={navigationOpen}\n              disabled={anyPanelOpenInMobile}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            <BreadcrumbsSlotContext.Provider value={{ isInToolbar: true }}>\n              {breadcrumbs ||\n                (discoveredBreadcrumbs && (\n                  <BreadcrumbGroupImplementation\n                    {...discoveredBreadcrumbs}\n                    data-awsui-discovered-breadcrumbs={true}\n                    __injectAnalyticsComponentMetadata={true}\n                  />\n                ))}\n            </BreadcrumbsSlotContext.Provider>\n          </div>\n        )}\n        {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <div className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers?.filter(item => !!item.trigger) ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n              disabled={anyPanelOpenInMobile}\n              globalDrawersFocusControl={globalDrawersFocusControl}\n              globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n              activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n              onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n            />\n          </div>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { BreadcrumbsSlotContext } from '../contexts';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  globalDrawersFocusControl?: FocusControlMultipleStates;\n  onActiveDrawerChange?: (drawerId: string | null) => void;\n  globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n  activeGlobalDrawersIds?: ReadonlyArray<string>;\n  onActiveGlobalDrawersChange?: ((drawerId: string) => void) | undefined;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n  return {\n    ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n    activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n    drawers: toolbarProps.drawers ?? legacyProps.drawers,\n    drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n    globalDrawersFocusControl: toolbarProps.globalDrawersFocusControl,\n    onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n    globalDrawers: toolbarProps.globalDrawers ?? legacyProps.globalDrawers,\n    activeGlobalDrawersIds: toolbarProps.activeGlobalDrawersIds ?? legacyProps.activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange: toolbarProps.onActiveGlobalDrawersChange ?? legacyProps.onActiveGlobalDrawersChange,\n    hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n    navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n    navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n    onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n    hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n    splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n    splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n      ...legacyProps.splitPanelToggleConfig,\n      active: legacyProps.splitPanelOpen,\n      controlId: legacyProps.splitPanelControlId,\n      position: legacyProps.splitPanelPosition,\n    },\n    onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n  };\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const {\n    breadcrumbs,\n    discoveredBreadcrumbs,\n    verticalOffsets,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    setToolbarHeight,\n    globalDrawersFocusControl,\n  } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    globalDrawers,\n    activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n  } = convertLegacyProps(toolbarProps, appLayoutInternals);\n  // TODO: expose configuration property\n  const pinnedToolbar = true;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    let lastScrollY = window.scrollY;\n\n    /* istanbul ignore next not testable in JSDOM */\n    const updateScrollDirection = () => {\n      if (pinnedToolbar) {\n        setToolbarState('show');\n        return;\n      }\n      const scrollY = window.scrollY;\n      // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n      const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n      // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n      if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n        setToolbarState(direction);\n      }\n      lastScrollY = scrollY > 0 ? scrollY : 0;\n    };\n\n    window.addEventListener('scroll', updateScrollDirection);\n    return () => {\n      window.removeEventListener('scroll', updateScrollDirection);\n    };\n  }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n  const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n  useEffect(() => {\n    if (anyPanelOpenInMobile) {\n      document.body.classList.add(styles['block-body-scroll']);\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n    return () => {\n      document.body.classList.remove(styles['block-body-scroll']);\n    };\n  }, [anyPanelOpenInMobile]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n        [styles['toolbar-hidden']]: toolbarHidden,\n      })}\n      style={{\n        insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && (\n          <nav className={clsx(styles['universal-toolbar-nav'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle?.(!navigationOpen)}\n              ref={navigationFocusRef}\n              selected={navigationOpen}\n              disabled={anyPanelOpenInMobile}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            <BreadcrumbsSlotContext.Provider value={{ isInToolbar: true }}>\n              <div className={styles['breadcrumbs-own']}>{breadcrumbs}</div>\n              {discoveredBreadcrumbs && (\n                <div className={styles['breadcrumbs-discovered']}>\n                  <BreadcrumbGroupImplementation\n                    {...discoveredBreadcrumbs}\n                    data-awsui-discovered-breadcrumbs={true}\n                    __injectAnalyticsComponentMetadata={true}\n                  />\n                </div>\n              )}\n            </BreadcrumbsSlotContext.Provider>\n          </div>\n        )}\n        {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <div className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers?.filter(item => !!item.trigger) ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n              disabled={anyPanelOpenInMobile}\n              globalDrawersFocusControl={globalDrawersFocusControl}\n              globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n              activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n              onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n            />\n          </div>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}

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

@@ -1,18 +1,20 @@
 
     import './styles.scoped.css';
     export default {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_oaxy1_149",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_oaxy1_170",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_oaxy1_173",
-  "toolbar-container": "awsui_toolbar-container_1kzri_oaxy1_176",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_oaxy1_185",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_oaxy1_189",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_oaxy1_194",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_oaxy1_202",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_oaxy1_203",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_oaxy1_249",
-  "group-divider": "awsui_group-divider_1kzri_oaxy1_258",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_oaxy1_249",
-  "block-body-scroll": "awsui_block-body-scroll_1kzri_oaxy1_271"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_kjztv_149",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_kjztv_170",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_kjztv_173",
+  "toolbar-container": "awsui_toolbar-container_1kzri_kjztv_176",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_kjztv_185",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_kjztv_189",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_kjztv_194",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_kjztv_202",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_kjztv_203",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_kjztv_249",
+  "group-divider": "awsui_group-divider_1kzri_kjztv_258",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_kjztv_249",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_1kzri_kjztv_271",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_1kzri_kjztv_271",
+  "block-body-scroll": "awsui_block-body-scroll_1kzri_kjztv_275"
 };
   

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

@@ -146,7 +146,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_universal-toolbar_1kzri_oaxy1_149:not(#\9) {
+.awsui_universal-toolbar_1kzri_kjztv_149:not(#\9) {
   background-color: var(--color-background-layout-panel-content-70ws8g, #ffffff);
   box-sizing: border-box;
   padding-block: 0;
@@ -158,22 +158,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: inset-block-start, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_universal-toolbar_1kzri_oaxy1_149:not(#\9) {
+  .awsui_universal-toolbar_1kzri_kjztv_149:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_universal-toolbar_1kzri_oaxy1_149:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_oaxy1_149:not(#\9) {
+.awsui-motion-disabled .awsui_universal-toolbar_1kzri_kjztv_149:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_kjztv_149:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_universal-toolbar_1kzri_oaxy1_149.awsui_disable-body-scroll_1kzri_oaxy1_170:not(#\9) {
+.awsui_universal-toolbar_1kzri_kjztv_149.awsui_disable-body-scroll_1kzri_kjztv_170:not(#\9) {
   inset-block-start: 0px;
 }
-.awsui_universal-toolbar_1kzri_oaxy1_149.awsui_toolbar-hidden_1kzri_oaxy1_173:not(#\9) {
+.awsui_universal-toolbar_1kzri_kjztv_149.awsui_toolbar-hidden_1kzri_kjztv_173:not(#\9) {
   opacity: 0;
 }
-.awsui_universal-toolbar_1kzri_oaxy1_149 > .awsui_toolbar-container_1kzri_oaxy1_176:not(#\9) {
+.awsui_universal-toolbar_1kzri_kjztv_149 > .awsui_toolbar-container_1kzri_kjztv_176:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: grid;
@@ -182,16 +182,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-columns: min-content minmax(0, 3fr) minmax(auto, 1fr);
   grid-template-rows: 1fr;
 }
-.awsui_universal-toolbar_1kzri_oaxy1_149 > .awsui_toolbar-container_1kzri_oaxy1_176 > .awsui_universal-toolbar-nav_1kzri_oaxy1_185:not(#\9) {
+.awsui_universal-toolbar_1kzri_kjztv_149 > .awsui_toolbar-container_1kzri_kjztv_176 > .awsui_universal-toolbar-nav_1kzri_kjztv_185:not(#\9) {
   grid-column: 1;
   padding-inline-end: var(--space-static-xxs-9qxzo2, 4px);
 }
-.awsui_universal-toolbar_1kzri_oaxy1_149 > .awsui_toolbar-container_1kzri_oaxy1_176 > .awsui_universal-toolbar-breadcrumbs_1kzri_oaxy1_189:not(#\9) {
+.awsui_universal-toolbar_1kzri_kjztv_149 > .awsui_toolbar-container_1kzri_kjztv_176 > .awsui_universal-toolbar-breadcrumbs_1kzri_kjztv_189:not(#\9) {
   grid-column: 2;
   background-color: transparent;
   flex: 1 0;
 }
-.awsui_universal-toolbar_1kzri_oaxy1_149 > .awsui_toolbar-container_1kzri_oaxy1_176 > .awsui_universal-toolbar-drawers_1kzri_oaxy1_194:not(#\9) {
+.awsui_universal-toolbar_1kzri_kjztv_149 > .awsui_toolbar-container_1kzri_kjztv_176 > .awsui_universal-toolbar-drawers_1kzri_kjztv_194:not(#\9) {
   grid-column: 3;
   column-gap: var(--space-static-xs-fwcjew, 8px);
   display: flex;
@@ -199,8 +199,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
 }
 
-.awsui_drawers-desktop-triggers-container_1kzri_oaxy1_202:not(#\9),
-.awsui_drawers-mobile-triggers-container_1kzri_oaxy1_203:not(#\9) {
+.awsui_drawers-desktop-triggers-container_1kzri_kjztv_202:not(#\9),
+.awsui_drawers-mobile-triggers-container_1kzri_kjztv_203:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -247,7 +247,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 100%;
 }
 
-.awsui_drawers-trigger-content_1kzri_oaxy1_249:not(#\9) {
+.awsui_drawers-trigger-content_1kzri_kjztv_249:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: flex;
@@ -256,19 +256,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   justify-content: flex-end;
 }
 
-.awsui_group-divider_1kzri_oaxy1_258:not(#\9) {
+.awsui_group-divider_1kzri_kjztv_258:not(#\9) {
   border-inline-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
   block-size: 60%;
 }
 
 @media (max-width: 688px) {
-  .awsui_drawers-trigger_1kzri_oaxy1_249:not(#\9) {
+  .awsui_drawers-trigger_1kzri_kjztv_249:not(#\9) {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 }
 
-.awsui_block-body-scroll_1kzri_oaxy1_271:not(#\9) {
+.awsui_breadcrumbs-own_1kzri_kjztv_271:not(#\9):not(:empty) + .awsui_breadcrumbs-discovered_1kzri_kjztv_271 {
+  display: none;
+}
+
+.awsui_block-body-scroll_1kzri_kjztv_275:not(#\9) {
   overflow: hidden;
 }

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

@@ -2,18 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_oaxy1_149",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_oaxy1_170",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_oaxy1_173",
-  "toolbar-container": "awsui_toolbar-container_1kzri_oaxy1_176",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_oaxy1_185",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_oaxy1_189",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_oaxy1_194",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_oaxy1_202",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_oaxy1_203",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_oaxy1_249",
-  "group-divider": "awsui_group-divider_1kzri_oaxy1_258",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_oaxy1_249",
-  "block-body-scroll": "awsui_block-body-scroll_1kzri_oaxy1_271"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_kjztv_149",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_kjztv_170",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_kjztv_173",
+  "toolbar-container": "awsui_toolbar-container_1kzri_kjztv_176",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_kjztv_185",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_kjztv_189",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_kjztv_194",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_kjztv_202",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_kjztv_203",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_kjztv_249",
+  "group-divider": "awsui_group-divider_1kzri_kjztv_258",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_kjztv_249",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_1kzri_kjztv_271",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_1kzri_kjztv_271",
+  "block-body-scroll": "awsui_block-body-scroll_1kzri_kjztv_275"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQxD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAEpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;;AAmLD,wBAA+C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQxD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAEpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;;AAoLD,wBAA+C"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js

@@ -110,6 +110,7 @@ function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded,
         React.createElement("button", { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": true, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, className: clsx(styles.trigger, styles['trigger-button-styles'], {
                 [styles.selected]: selected,
                 [styles.badge]: badge,
+                [testutilStyles['drawers-trigger-with-badge']]: badge,
             }, className), onClick: handleTriggerClick, ref: ref, type: "button", "data-testid": testId, "data-shift-focus": "awsui-layout-drawer-trigger" },
             React.createElement("span", { className: clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles'])) }, (iconName || iconSvg) && React.createElement(Icon, { name: iconName, svg: iconSvg }))),
         badge && React.createElement("div", { className: styles.dot }),