@cloudscape-design/components-themeable 3.0.663 → 3.0.665

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

@@ -2,88 +2,87 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "background": "awsui_background_hyvsj_1kr2z_99",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1kr2z_102",
-  "sticky-background": "awsui_sticky-background_hyvsj_1kr2z_108",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1kr2z_116",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1kr2z_129",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1kr2z_139",
-  "drawers-container": "awsui_drawers-container_hyvsj_1kr2z_151",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1kr2z_162",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1kr2z_185",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1kr2z_190",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1kr2z_231",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1kr2z_241",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1kr2z_245",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1kr2z_259",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1kr2z_245",
-  "drawer": "awsui_drawer_hyvsj_1kr2z_151",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1kr2z_290",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1kr2z_299",
-  "drawer-content": "awsui_drawer-content_hyvsj_1kr2z_290",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1kr2z_307",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1kr2z_310",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1kr2z_317",
-  "content": "awsui_content_hyvsj_1kr2z_343",
-  "layout": "awsui_layout_hyvsj_1kr2z_364",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1kr2z_437",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1kr2z_452",
-  "content-type-table": "awsui_content-type-table_hyvsj_1kr2z_466",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_1kr2z_466",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1kr2z_472",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1kr2z_475",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1kr2z_489",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1kr2z_492",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1kr2z_502",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1kr2z_505",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1kr2z_508",
-  "has-header": "awsui_has-header_hyvsj_1kr2z_508",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1kr2z_523",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1kr2z_523",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_1kr2z_546",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_1kr2z_549",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1kr2z_569",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1kr2z_569",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1kr2z_577",
-  "unfocusable": "awsui_unfocusable_hyvsj_1kr2z_582",
-  "container": "awsui_container_hyvsj_1kr2z_592",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1kr2z_618",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1kr2z_621",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1kr2z_621",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1kr2z_621",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1kr2z_621",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1kr2z_630",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1kr2z_647",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1kr2z_651",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1kr2z_655",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1kr2z_659",
-  "navigation-container": "awsui_navigation-container_hyvsj_1kr2z_668",
-  "show-navigation": "awsui_show-navigation_hyvsj_1kr2z_706",
-  "animating": "awsui_animating_hyvsj_1kr2z_729",
-  "showButtons": "awsui_showButtons_hyvsj_1kr2z_1",
-  "navigation": "awsui_navigation_hyvsj_1kr2z_668",
-  "openNavigation": "awsui_openNavigation_hyvsj_1kr2z_1",
-  "animated-content": "awsui_animated-content_hyvsj_1kr2z_791",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1kr2z_800",
-  "notifications": "awsui_notifications_hyvsj_1kr2z_810",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1kr2z_816",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1kr2z_833",
-  "position-bottom": "awsui_position-bottom_hyvsj_1kr2z_880",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1kr2z_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1kr2z_909",
-  "position-side": "awsui_position-side_hyvsj_1kr2z_922",
-  "tools-container": "awsui_tools-container_hyvsj_1kr2z_944",
-  "tools": "awsui_tools_hyvsj_1kr2z_944",
-  "openTools": "awsui_openTools_hyvsj_1kr2z_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1kr2z_1035",
-  "hide-tools": "awsui_hide-tools_hyvsj_1kr2z_1045",
-  "show-tools": "awsui_show-tools_hyvsj_1kr2z_1057",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1kr2z_1035",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1kr2z_1142",
-  "trigger": "awsui_trigger_hyvsj_1kr2z_1142",
-  "selected": "awsui_selected_hyvsj_1kr2z_1219",
-  "badge": "awsui_badge_hyvsj_1kr2z_1239",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1kr2z_1243",
-  "dot": "awsui_dot_hyvsj_1kr2z_1254"
+  "background": "awsui_background_hyvsj_ithvb_97",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_ithvb_100",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_ithvb_111",
+  "drawers-container": "awsui_drawers-container_hyvsj_ithvb_124",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_ithvb_135",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_ithvb_156",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_ithvb_161",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_ithvb_202",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_ithvb_212",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_ithvb_216",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_ithvb_230",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_ithvb_216",
+  "drawer": "awsui_drawer_hyvsj_ithvb_124",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_ithvb_261",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_ithvb_270",
+  "drawer-content": "awsui_drawer-content_hyvsj_ithvb_261",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_ithvb_278",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_ithvb_281",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_ithvb_288",
+  "content": "awsui_content_hyvsj_ithvb_314",
+  "layout": "awsui_layout_hyvsj_ithvb_335",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_ithvb_408",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_ithvb_423",
+  "content-type-table": "awsui_content-type-table_hyvsj_ithvb_437",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_ithvb_437",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_ithvb_443",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_ithvb_446",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_ithvb_460",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_ithvb_463",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_ithvb_473",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_ithvb_476",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_ithvb_476",
+  "has-header": "awsui_has-header_hyvsj_ithvb_476",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_ithvb_491",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_ithvb_491",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_ithvb_511",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_ithvb_514",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_ithvb_534",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_ithvb_534",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_ithvb_542",
+  "unfocusable": "awsui_unfocusable_hyvsj_ithvb_547",
+  "container": "awsui_container_hyvsj_ithvb_557",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_ithvb_583",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_ithvb_586",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_ithvb_586",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_ithvb_586",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_ithvb_586",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_ithvb_595",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_ithvb_612",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_ithvb_616",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_ithvb_620",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_ithvb_624",
+  "navigation-container": "awsui_navigation-container_hyvsj_ithvb_633",
+  "show-navigation": "awsui_show-navigation_hyvsj_ithvb_671",
+  "animating": "awsui_animating_hyvsj_ithvb_694",
+  "showButtons": "awsui_showButtons_hyvsj_ithvb_1",
+  "navigation": "awsui_navigation_hyvsj_ithvb_633",
+  "openNavigation": "awsui_openNavigation_hyvsj_ithvb_1",
+  "animated-content": "awsui_animated-content_hyvsj_ithvb_756",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_ithvb_765",
+  "notifications": "awsui_notifications_hyvsj_ithvb_775",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_ithvb_780",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_ithvb_784",
+  "high-contrast": "awsui_high-contrast_hyvsj_ithvb_789",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_ithvb_807",
+  "position-bottom": "awsui_position-bottom_hyvsj_ithvb_854",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_ithvb_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_ithvb_883",
+  "position-side": "awsui_position-side_hyvsj_ithvb_896",
+  "tools-container": "awsui_tools-container_hyvsj_ithvb_918",
+  "tools": "awsui_tools_hyvsj_ithvb_918",
+  "openTools": "awsui_openTools_hyvsj_ithvb_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_ithvb_1007",
+  "hide-tools": "awsui_hide-tools_hyvsj_ithvb_1017",
+  "show-tools": "awsui_show-tools_hyvsj_ithvb_1029",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_ithvb_1007",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_ithvb_1114",
+  "trigger": "awsui_trigger_hyvsj_ithvb_1114",
+  "selected": "awsui_selected_hyvsj_ithvb_1192",
+  "badge": "awsui_badge_hyvsj_ithvb_1212",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_ithvb_1216",
+  "dot": "awsui_dot_hyvsj_ithvb_1227"
 };
   

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

@@ -51,8 +51,8 @@ export default function Tools({ children }) {
                     [styles['has-tools-form-persistence']]: hasToolsFormPersistence,
                     [styles['is-tools-open']]: isToolsOpen,
                 }, testutilStyles.tools), ref: state !== 'exiting' ? transitionEventsRef : undefined },
-                React.createElement("div", { className: clsx(styles['animated-content']) },
-                    React.createElement("div", { className: clsx(styles['hide-tools']) },
+                React.createElement("div", { className: styles['animated-content'] },
+                    React.createElement("div", { className: styles['hide-tools'] },
                         React.createElement(InternalButton, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose) !== null && _b !== void 0 ? _b : undefined, iconName: isMobile ? 'close' : 'angle-right', onClick: () => handleToolsClick(false), variant: "icon", formAction: "none", className: testutilStyles['tools-close'], ref: toolsRefs.close })),
                     tools))),
             !isMobile && (React.createElement("aside", { "aria-hidden": !hasToolsForm ? true : false, "aria-label": (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _c !== void 0 ? _c : undefined, className: clsx(styles['show-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';\nimport { InternalButton } from '../../button/internal';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\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={clsx(styles['animated-content'])}>\n                <div className={clsx(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';\nimport { InternalButton } from '../../button/internal';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\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"]}

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

@@ -12,7 +12,7 @@ function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded,
             }, className), onClick: onClick, ref: ref, type: "button", "data-testid": testId },
             React.createElement("span", { className: clsx(badge && styles['trigger-badge-wrapper']) },
                 React.createElement(Icon, { name: iconName, svg: iconSvg }))),
-        badge && React.createElement("div", { className: clsx(styles.dot) })));
+        badge && React.createElement("div", { className: styles.dot })));
 }
 export default React.forwardRef(TriggerButton);
 //# sourceMappingURL=trigger-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"trigger-button.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAkBrC,SAAS,aAAa,CACpB,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,kBAAkB,GACC,EACrB,GAA+B;IAE/B,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,kBAAkB,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC;QAC3G,iDACiB,YAAY,mBACZ,YAAY,mBACZ,IAAI,gBACP,SAAS,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;aACtB,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAmC,EACxC,IAAI,EAAC,QAAQ,iBACA,MAAM;YAEnB,8BAAM,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC;gBAC7D,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CACjC,CACA;QACR,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAI,CAC1C,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  testId?: string;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  badge?: boolean;\n  highContrastHeader?: boolean;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    badge,\n    selected = false,\n    highContrastHeader,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  return (\n    <div className={clsx(styles['trigger-wrapper'], !highContrastHeader && styles['remove-high-contrast-header'])}>\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        className={clsx(\n          styles.trigger,\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n          },\n          className\n        )}\n        onClick={onClick}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n      >\n        <span className={clsx(badge && styles['trigger-badge-wrapper'])}>\n          <Icon name={iconName} svg={iconSvg} />\n        </span>\n      </button>\n      {badge && <div className={clsx(styles.dot)} />}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"trigger-button.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAkBrC,SAAS,aAAa,CACpB,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,kBAAkB,GACC,EACrB,GAA+B;IAE/B,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,kBAAkB,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC;QAC3G,iDACiB,YAAY,mBACZ,YAAY,mBACZ,IAAI,gBACP,SAAS,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;aACtB,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAmC,EACxC,IAAI,EAAC,QAAQ,iBACA,MAAM;YAEnB,8BAAM,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC;gBAC7D,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CACjC,CACA;QACR,KAAK,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI,CACpC,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  testId?: string;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  badge?: boolean;\n  highContrastHeader?: boolean;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    badge,\n    selected = false,\n    highContrastHeader,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  return (\n    <div className={clsx(styles['trigger-wrapper'], !highContrastHeader && styles['remove-high-contrast-header'])}>\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        className={clsx(\n          styles.trigger,\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n          },\n          className\n        )}\n        onClick={onClick}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n      >\n        <span className={clsx(badge && styles['trigger-badge-wrapper'])}>\n          <Icon name={iconName} svg={iconSvg} />\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.d.ts

@@ -1,10 +1,4 @@
 import React from 'react';
-/**
- * The overlap height has a default set in CSS but can also be dynamically overridden
- * for content types (such as Table and Wizard) that have variable size content in the overlap.
- * If a child component utilizes a sticky header the hasStickyBackground property will determine
- * if the background remains in the same vertical position.
- */
 export default function useBackgroundOverlap({ contentHeader, disableContentHeaderOverlap, layoutElement, }: {
     contentHeader: React.ReactNode;
     disableContentHeaderOverlap?: boolean;

package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-background-overlap.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/use-background-overlap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,2BAA2B,EAC3B,aAAa,GACd,EAAE;IACD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CACvC;;4CAMY,MAAM;EA6BlB"}
+{"version":3,"file":"use-background-overlap.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/use-background-overlap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,2BAA2B,EAC3B,aAAa,GACd,EAAE;IACD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CACvC;;4CAMY,MAAM;EA6BlB"}

package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.js

@@ -2,12 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useCallback, useState } from 'react';
 import customCssProps from '../../internal/generated/custom-css-properties';
-/**
- * The overlap height has a default set in CSS but can also be dynamically overridden
- * for content types (such as Table and Wizard) that have variable size content in the overlap.
- * If a child component utilizes a sticky header the hasStickyBackground property will determine
- * if the background remains in the same vertical position.
- */
 export default function useBackgroundOverlap({ contentHeader, disableContentHeaderOverlap, layoutElement, }) {
     const hasContentHeader = !!contentHeader;
     const [hasBackgroundOverlap, setHasBackgroundOverlap] = useState(hasContentHeader);

package/lib/internal/template/app-layout/visual-refresh/use-background-overlap.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-background-overlap.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/use-background-overlap.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAE5E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,2BAA2B,EAC3B,aAAa,GAKd;IACC,MAAM,gBAAgB,GAAG,CAAC,CAAC,aAAa,CAAC;IAEzC,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAEnF,MAAM,6BAA6B,GAAG,WAAW,CAC/C,CAAC,MAAc,EAAE,EAAE;QACjB,MAAM,UAAU,GAAG,gBAAgB,IAAI,MAAM,GAAG,CAAC,CAAC;QAClD,uBAAuB,CAAC,UAAU,CAAC,CAAC;QAEpC;;;;;;WAMG;QACH,iEAAiE;QACjE,MAAM,OAAO,GAAG,OAAO,aAAa,KAAK,UAAU,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAA,CAAC;QAC9E,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QACD,IAAI,2BAA2B,IAAI,CAAC,UAAU,IAAI,MAAM,IAAI,CAAC,EAAE;YAC7D,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC5D;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,CAAC,aAAa,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;SACxE;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,aAAa,EAAE,2BAA2B,CAAC,CAC/D,CAAC;IAEF,OAAO;QACL,oBAAoB;QACpB,6BAA6B;KAC9B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState } from 'react';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The overlap height has a default set in CSS but can also be dynamically overridden\n * for content types (such as Table and Wizard) that have variable size content in the overlap.\n * If a child component utilizes a sticky header the hasStickyBackground property will determine\n * if the background remains in the same vertical position.\n */\nexport default function useBackgroundOverlap({\n  contentHeader,\n  disableContentHeaderOverlap,\n  layoutElement,\n}: {\n  contentHeader: React.ReactNode;\n  disableContentHeaderOverlap?: boolean;\n  layoutElement: React.Ref<HTMLElement>;\n}) {\n  const hasContentHeader = !!contentHeader;\n\n  const [hasBackgroundOverlap, setHasBackgroundOverlap] = useState(hasContentHeader);\n\n  const updateBackgroundOverlapHeight = useCallback(\n    (height: number) => {\n      const hasOverlap = hasContentHeader || height > 0;\n      setHasBackgroundOverlap(hasOverlap);\n\n      /**\n       * React 18 will trigger a paint before the state is correctly updated\n       * (see https://github.com/facebook/react/issues/24331).\n       * To work around this, we bypass React state updates and imperatively update the custom property on the DOM.\n       * An alternative would be to use `queueMicrotask` and `flushSync` in the ResizeObserver callback,\n       * but that would have some performance impact as it would delay the render.\n       */\n      // Layout component uses RefObject, we don't expect a RefCallback\n      const element = typeof layoutElement !== 'function' && layoutElement?.current;\n      if (!element) {\n        return;\n      }\n      if (disableContentHeaderOverlap || !hasOverlap || height <= 0) {\n        element.style.removeProperty(customCssProps.overlapHeight);\n      } else {\n        element.style.setProperty(customCssProps.overlapHeight, `${height}px`);\n      }\n    },\n    [hasContentHeader, layoutElement, disableContentHeaderOverlap]\n  );\n\n  return {\n    hasBackgroundOverlap,\n    updateBackgroundOverlapHeight,\n  };\n}\n"]}
+{"version":3,"file":"use-background-overlap.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/use-background-overlap.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAE5E,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,2BAA2B,EAC3B,aAAa,GAKd;IACC,MAAM,gBAAgB,GAAG,CAAC,CAAC,aAAa,CAAC;IAEzC,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAEnF,MAAM,6BAA6B,GAAG,WAAW,CAC/C,CAAC,MAAc,EAAE,EAAE;QACjB,MAAM,UAAU,GAAG,gBAAgB,IAAI,MAAM,GAAG,CAAC,CAAC;QAClD,uBAAuB,CAAC,UAAU,CAAC,CAAC;QAEpC;;;;;;WAMG;QACH,iEAAiE;QACjE,MAAM,OAAO,GAAG,OAAO,aAAa,KAAK,UAAU,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAA,CAAC;QAC9E,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QACD,IAAI,2BAA2B,IAAI,CAAC,UAAU,IAAI,MAAM,IAAI,CAAC,EAAE;YAC7D,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC5D;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,CAAC,aAAa,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;SACxE;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,aAAa,EAAE,2BAA2B,CAAC,CAC/D,CAAC;IAEF,OAAO;QACL,oBAAoB;QACpB,6BAA6B;KAC9B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState } from 'react';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\nexport default function useBackgroundOverlap({\n  contentHeader,\n  disableContentHeaderOverlap,\n  layoutElement,\n}: {\n  contentHeader: React.ReactNode;\n  disableContentHeaderOverlap?: boolean;\n  layoutElement: React.Ref<HTMLElement>;\n}) {\n  const hasContentHeader = !!contentHeader;\n\n  const [hasBackgroundOverlap, setHasBackgroundOverlap] = useState(hasContentHeader);\n\n  const updateBackgroundOverlapHeight = useCallback(\n    (height: number) => {\n      const hasOverlap = hasContentHeader || height > 0;\n      setHasBackgroundOverlap(hasOverlap);\n\n      /**\n       * React 18 will trigger a paint before the state is correctly updated\n       * (see https://github.com/facebook/react/issues/24331).\n       * To work around this, we bypass React state updates and imperatively update the custom property on the DOM.\n       * An alternative would be to use `queueMicrotask` and `flushSync` in the ResizeObserver callback,\n       * but that would have some performance impact as it would delay the render.\n       */\n      // Layout component uses RefObject, we don't expect a RefCallback\n      const element = typeof layoutElement !== 'function' && layoutElement?.current;\n      if (!element) {\n        return;\n      }\n      if (disableContentHeaderOverlap || !hasOverlap || height <= 0) {\n        element.style.removeProperty(customCssProps.overlapHeight);\n      } else {\n        element.style.setProperty(customCssProps.overlapHeight, `${height}px`);\n      }\n    },\n    [hasContentHeader, layoutElement, disableContentHeaderOverlap]\n  );\n\n  return {\n    hasBackgroundOverlap,\n    updateBackgroundOverlapHeight,\n  };\n}\n"]}

package/lib/internal/template/area-chart/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "series": "awsui_series_y1yrh_1uvaa_99",
-  "root": "awsui_root_y1yrh_1uvaa_117",
-  "series--highlighted": "awsui_series--highlighted_y1yrh_1uvaa_129",
-  "series--dimmed": "awsui_series--dimmed_y1yrh_1uvaa_133",
-  "series--threshold": "awsui_series--threshold_y1yrh_1uvaa_137",
-  "popover-divider": "awsui_popover-divider_y1yrh_1uvaa_142"
+  "series": "awsui_series_y1yrh_nv082_97",
+  "root": "awsui_root_y1yrh_nv082_115",
+  "series--highlighted": "awsui_series--highlighted_y1yrh_nv082_127",
+  "series--dimmed": "awsui_series--dimmed_y1yrh_nv082_131",
+  "series--threshold": "awsui_series--threshold_y1yrh_nv082_135",
+  "popover-divider": "awsui_popover-divider_y1yrh_nv082_140"
 };
   

package/lib/internal/template/area-chart/styles.scoped.css

@@ -6,8 +6,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* stylelint-disable plugin/no-unsupported-browser-features */
-/* stylelint-enable plugin/no-unsupported-browser-features */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -96,16 +94,16 @@ 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_series_y1yrh_1uvaa_99 > rect:not(#\9) {
+.awsui_series_y1yrh_nv082_97 > rect:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-j01tkg, 90ms) var(--motion-easing-transition-quick-9ktw66, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_series_y1yrh_1uvaa_99 > rect:not(#\9) {
+  .awsui_series_y1yrh_nv082_97 > rect:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_series_y1yrh_1uvaa_99 > rect:not(#\9), .awsui-mode-entering .awsui_series_y1yrh_1uvaa_99 > rect:not(#\9) {
+.awsui-motion-disabled .awsui_series_y1yrh_nv082_97 > rect:not(#\9), .awsui-mode-entering .awsui_series_y1yrh_nv082_97 > rect:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -114,11 +112,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_y1yrh_1uvaa_117:not(#\9) {
+.awsui_root_y1yrh_nv082_115:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_series_y1yrh_1uvaa_99:not(#\9) {
+.awsui_series_y1yrh_nv082_97:not(#\9) {
   display: block;
   stroke-width: var(--border-line-chart-width-qt73mb, 2px);
   fill: none;
@@ -126,20 +124,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   stroke-linejoin: var(--border-line-chart-line-join-z2nu1c, miter);
 }
 
-.awsui_series--highlighted_y1yrh_1uvaa_129:not(#\9) {
+.awsui_series--highlighted_y1yrh_nv082_127:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_series--dimmed_y1yrh_1uvaa_133:not(#\9) {
+.awsui_series--dimmed_y1yrh_nv082_131:not(#\9) {
   opacity: 0.3;
 }
 
-.awsui_series--threshold_y1yrh_1uvaa_137:not(#\9) {
+.awsui_series--threshold_y1yrh_nv082_135:not(#\9) {
   stroke-dasharray: var(--border-line-chart-dash-array-7c084h, 3 5);
   stroke-width: var(--border-line-chart-width-qt73mb, 2px);
 }
 
-.awsui_popover-divider_y1yrh_1uvaa_142:not(#\9) {
+.awsui_popover-divider_y1yrh_nv082_140:not(#\9) {
   margin-block: var(--space-xs-xf5ch3, 8px);
   margin-inline: 0;
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);

package/lib/internal/template/area-chart/styles.selectors.js

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "series": "awsui_series_y1yrh_1uvaa_99",
-  "root": "awsui_root_y1yrh_1uvaa_117",
-  "series--highlighted": "awsui_series--highlighted_y1yrh_1uvaa_129",
-  "series--dimmed": "awsui_series--dimmed_y1yrh_1uvaa_133",
-  "series--threshold": "awsui_series--threshold_y1yrh_1uvaa_137",
-  "popover-divider": "awsui_popover-divider_y1yrh_1uvaa_142"
+  "series": "awsui_series_y1yrh_nv082_97",
+  "root": "awsui_root_y1yrh_nv082_115",
+  "series--highlighted": "awsui_series--highlighted_y1yrh_nv082_127",
+  "series--dimmed": "awsui_series--dimmed_y1yrh_nv082_131",
+  "series--threshold": "awsui_series--threshold_y1yrh_nv082_135",
+  "popover-divider": "awsui_popover-divider_y1yrh_nv082_140"
 };
   

package/lib/internal/template/attribute-editor/styles.css.js

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "empty-appear": "awsui_empty-appear_n4qlp_dxsjy_99",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_dxsjy_1",
-  "root": "awsui_root_n4qlp_dxsjy_125",
-  "empty": "awsui_empty_n4qlp_dxsjy_99",
-  "row": "awsui_row_n4qlp_dxsjy_167",
-  "row-control": "awsui_row-control_n4qlp_dxsjy_171",
-  "field": "awsui_field_n4qlp_dxsjy_175",
-  "add-button": "awsui_add-button_n4qlp_dxsjy_179",
-  "remove-button": "awsui_remove-button_n4qlp_dxsjy_183",
-  "button-container-haslabel": "awsui_button-container-haslabel_n4qlp_dxsjy_187",
-  "button-container-nolabel": "awsui_button-container-nolabel_n4qlp_dxsjy_191",
-  "divider": "awsui_divider_n4qlp_dxsjy_195",
-  "additional-info": "awsui_additional-info_n4qlp_dxsjy_199",
-  "right-align": "awsui_right-align_n4qlp_dxsjy_245"
+  "empty-appear": "awsui_empty-appear_n4qlp_r9sr9_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_r9sr9_1",
+  "root": "awsui_root_n4qlp_r9sr9_123",
+  "empty": "awsui_empty_n4qlp_r9sr9_97",
+  "row": "awsui_row_n4qlp_r9sr9_165",
+  "row-control": "awsui_row-control_n4qlp_r9sr9_169",
+  "field": "awsui_field_n4qlp_r9sr9_173",
+  "add-button": "awsui_add-button_n4qlp_r9sr9_177",
+  "remove-button": "awsui_remove-button_n4qlp_r9sr9_181",
+  "button-container-haslabel": "awsui_button-container-haslabel_n4qlp_r9sr9_185",
+  "button-container-nolabel": "awsui_button-container-nolabel_n4qlp_r9sr9_189",
+  "divider": "awsui_divider_n4qlp_r9sr9_193",
+  "additional-info": "awsui_additional-info_n4qlp_r9sr9_197",
+  "right-align": "awsui_right-align_n4qlp_r9sr9_243"
 };