@cloudscape-design/components 3.0.373 → 3.0.375

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

@@ -1,11 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import { useMobile } from '../../internal/hooks/use-mobile';
 import { useControllable } from '../../internal/hooks/use-controllable';
 import { fireNonCancelableEvent } from '../../internal/events';
 import { awsuiPluginsInternal } from '../../internal/plugins/api';
+import { sortByPriority } from '../../internal/plugins/helpers/utils';
 import { convertRuntimeDrawers } from '../runtime-api';
 import { togglesConfig } from '../toggles';
 export const TOOLS_DRAWER_ID = 'awsui-internal-tools';
@@ -30,14 +31,22 @@ function getToolsDrawerItem(props) {
         },
     };
 }
-function useRuntimeDrawers(disableRuntimeDrawers, onActiveDrawerChange) {
+function useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange) {
     const [runtimeDrawers, setRuntimeDrawers] = useState({ before: [], after: [] });
+    const drawerWasOpenRef = useRef(false);
+    drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;
     useEffect(() => {
         if (disableRuntimeDrawers) {
             return;
         }
         const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {
             setRuntimeDrawers(convertRuntimeDrawers(drawers));
+            if (!drawerWasOpenRef.current) {
+                const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);
+                if (defaultActiveDrawer) {
+                    onActiveDrawerChange(defaultActiveDrawer.id);
+                }
+            }
         });
         return () => {
             unsubscribe();
@@ -60,7 +69,7 @@ export function useDrawers({ drawers: ownDrawers, __disableRuntimeDrawers: disab
         setActiveDrawerId(newDrawerId);
         fireNonCancelableEvent(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onChange, newDrawerId);
     });
-    const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, onActiveDrawerChange);
+    const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);
     const combinedDrawers = [...runtimeDrawers.before, ...((_a = ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.items) !== null && _a !== void 0 ? _a : []), ...runtimeDrawers.after];
     if (toolsDrawer && combinedDrawers.length > 0) {
         combinedDrawers.unshift(toolsDrawer);

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

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

package/app-layout/visual-refresh/styles.css.js

@@ -1,80 +1,80 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_103uk_93",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_103uk_96",
-  "sticky-background": "awsui_sticky-background_hyvsj_103uk_102",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_103uk_110",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_103uk_123",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_103uk_133",
-  "drawers-container": "awsui_drawers-container_hyvsj_103uk_145",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_103uk_157",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_103uk_191",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_103uk_196",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_103uk_215",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_103uk_247",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_103uk_251",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_103uk_277",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_103uk_251",
-  "drawer": "awsui_drawer_hyvsj_103uk_145",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_103uk_308",
-  "drawer-content": "awsui_drawer-content_hyvsj_103uk_313",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_103uk_318",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_103uk_325",
-  "content": "awsui_content_hyvsj_103uk_350",
-  "layout": "awsui_layout_hyvsj_103uk_371",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_103uk_454",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_103uk_469",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_103uk_486",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_103uk_518",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_103uk_521",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_103uk_531",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_103uk_534",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_103uk_537",
-  "has-header": "awsui_has-header_hyvsj_103uk_537",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_103uk_558",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_103uk_558",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_103uk_601",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_103uk_601",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_103uk_617",
-  "unfocusable": "awsui_unfocusable_hyvsj_103uk_622",
-  "container": "awsui_container_hyvsj_103uk_632",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_103uk_657",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_103uk_660",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_103uk_660",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_103uk_660",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_103uk_669",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_103uk_685",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_103uk_689",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_103uk_693",
-  "navigation-container": "awsui_navigation-container_hyvsj_103uk_702",
-  "show-navigation": "awsui_show-navigation_hyvsj_103uk_746",
-  "animating": "awsui_animating_hyvsj_103uk_768",
-  "showButtons": "awsui_showButtons_hyvsj_103uk_1",
-  "navigation": "awsui_navigation_hyvsj_103uk_702",
-  "openNavigation": "awsui_openNavigation_hyvsj_103uk_1",
-  "animated-content": "awsui_animated-content_hyvsj_103uk_830",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_103uk_839",
-  "notifications": "awsui_notifications_hyvsj_103uk_849",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_103uk_855",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_103uk_872",
-  "position-bottom": "awsui_position-bottom_hyvsj_103uk_919",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_103uk_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_103uk_948",
-  "position-side": "awsui_position-side_hyvsj_103uk_976",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_103uk_1",
-  "tools-container": "awsui_tools-container_hyvsj_103uk_1013",
-  "tools": "awsui_tools_hyvsj_103uk_1013",
-  "openTools": "awsui_openTools_hyvsj_103uk_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_103uk_1108",
-  "hide-tools": "awsui_hide-tools_hyvsj_103uk_1118",
-  "show-tools": "awsui_show-tools_hyvsj_103uk_1130",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_103uk_1108",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_103uk_1190",
-  "trigger": "awsui_trigger_hyvsj_103uk_1190",
-  "selected": "awsui_selected_hyvsj_103uk_1254",
-  "badge": "awsui_badge_hyvsj_103uk_1274",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_103uk_1278",
-  "dot": "awsui_dot_hyvsj_103uk_1284"
+  "background": "awsui_background_hyvsj_gg3nn_93",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_gg3nn_96",
+  "sticky-background": "awsui_sticky-background_hyvsj_gg3nn_102",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_gg3nn_110",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_gg3nn_123",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_gg3nn_133",
+  "drawers-container": "awsui_drawers-container_hyvsj_gg3nn_145",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_gg3nn_157",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_gg3nn_191",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_gg3nn_196",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_gg3nn_215",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_gg3nn_247",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_gg3nn_251",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_gg3nn_277",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_gg3nn_251",
+  "drawer": "awsui_drawer_hyvsj_gg3nn_145",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_gg3nn_308",
+  "drawer-content": "awsui_drawer-content_hyvsj_gg3nn_313",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_gg3nn_318",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_gg3nn_325",
+  "content": "awsui_content_hyvsj_gg3nn_350",
+  "layout": "awsui_layout_hyvsj_gg3nn_371",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_gg3nn_454",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_gg3nn_469",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_gg3nn_486",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_gg3nn_518",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_gg3nn_521",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_gg3nn_531",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_gg3nn_534",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_gg3nn_537",
+  "has-header": "awsui_has-header_hyvsj_gg3nn_537",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_gg3nn_558",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_gg3nn_558",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_gg3nn_601",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_gg3nn_601",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_gg3nn_617",
+  "unfocusable": "awsui_unfocusable_hyvsj_gg3nn_622",
+  "container": "awsui_container_hyvsj_gg3nn_632",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_gg3nn_657",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_gg3nn_660",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_gg3nn_660",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_gg3nn_660",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_gg3nn_669",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_gg3nn_685",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_gg3nn_689",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_gg3nn_693",
+  "navigation-container": "awsui_navigation-container_hyvsj_gg3nn_702",
+  "show-navigation": "awsui_show-navigation_hyvsj_gg3nn_746",
+  "animating": "awsui_animating_hyvsj_gg3nn_768",
+  "showButtons": "awsui_showButtons_hyvsj_gg3nn_1",
+  "navigation": "awsui_navigation_hyvsj_gg3nn_702",
+  "openNavigation": "awsui_openNavigation_hyvsj_gg3nn_1",
+  "animated-content": "awsui_animated-content_hyvsj_gg3nn_830",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_gg3nn_839",
+  "notifications": "awsui_notifications_hyvsj_gg3nn_849",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_gg3nn_855",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_gg3nn_872",
+  "position-bottom": "awsui_position-bottom_hyvsj_gg3nn_919",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_gg3nn_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_gg3nn_948",
+  "position-side": "awsui_position-side_hyvsj_gg3nn_976",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_gg3nn_1",
+  "tools-container": "awsui_tools-container_hyvsj_gg3nn_1013",
+  "tools": "awsui_tools_hyvsj_gg3nn_1013",
+  "openTools": "awsui_openTools_hyvsj_gg3nn_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_gg3nn_1108",
+  "hide-tools": "awsui_hide-tools_hyvsj_gg3nn_1118",
+  "show-tools": "awsui_show-tools_hyvsj_gg3nn_1130",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_gg3nn_1108",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_gg3nn_1190",
+  "trigger": "awsui_trigger_hyvsj_gg3nn_1190",
+  "selected": "awsui_selected_hyvsj_gg3nn_1254",
+  "badge": "awsui_badge_hyvsj_gg3nn_1274",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_gg3nn_1278",
+  "dot": "awsui_dot_hyvsj_gg3nn_1284"
 };