@cloudscape-design/components-themeable 3.0.1070 → 3.0.1072

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

@@ -1,10 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { createLoadableComponent } from '../../internal/widgets/loader-mock';
 import { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';
 import { createWidgetizedAppLayoutNavigation } from './navigation';
 import { createWidgetizedAppLayoutNotifications } from './notifications';
 import { createWidgetizedAppLayoutSplitPanelDrawerBottom, createWidgetizedAppLayoutSplitPanelDrawerSide, } from './split-panel';
+import { AppLayoutStateProvider as AppLayoutStateImplementation, createWidgetizedAppLayoutState } from './state';
 import { createWidgetizedAppLayoutToolbar } from './toolbar';
+import { AfterMainSlotImplementation, createWidgetizedAppLayoutAfterMainSlot } from './widget-areas/after-main-slot';
+import { BeforeMainSlotImplementation, createWidgetizedAppLayoutBeforeMainSlot } from './widget-areas/before-main-slot';
+import { BottomContentSlotImplementation, createWidgetizedAppLayoutBottomContentSlot, } from './widget-areas/bottom-content-slot';
+import { createWidgetizedAppLayoutTopContentSlot, TopContentSlotImplementation } from './widget-areas/top-content-slot';
+// Legacy widgetized parts
 export const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();
 export const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();
 export const AppLayoutGlobalDrawers = createWidgetizedAppLayoutGlobalDrawers();
@@ -12,4 +19,10 @@ export const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();
 export const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();
 export const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();
 export const AppLayoutSplitPanelSide = createWidgetizedAppLayoutSplitPanelDrawerSide();
+// Refactored widgetized parts
+export const AppLayoutBeforeMainSlot = createWidgetizedAppLayoutBeforeMainSlot(createLoadableComponent(BeforeMainSlotImplementation));
+export const AppLayoutAfterMainSlot = createWidgetizedAppLayoutAfterMainSlot(createLoadableComponent(AfterMainSlotImplementation));
+export const AppLayoutTopContentSlot = createWidgetizedAppLayoutTopContentSlot(createLoadableComponent(TopContentSlotImplementation));
+export const AppLayoutBottomContentSlot = createWidgetizedAppLayoutBottomContentSlot(createLoadableComponent(BottomContentSlotImplementation));
+export const AppLayoutWidgetizedState = createWidgetizedAppLayoutState(createLoadableComponent(AppLayoutStateImplementation));
 //# sourceMappingURL=internal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,+BAA+B,EAAE,sCAAsC,EAAE,MAAM,UAAU,CAAC;AACnG,OAAO,EAAE,mCAAmC,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,+CAA+C,EAC/C,6CAA6C,GAC9C,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gCAAgC,EAAE,MAAM,WAAW,CAAC;AAE7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,mCAAmC,EAAE,CAAC;AACzE,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,EAAE,CAAC;AACjE,MAAM,CAAC,MAAM,sBAAsB,GAAG,sCAAsC,EAAE,CAAC;AAC/E,MAAM,CAAC,MAAM,sBAAsB,GAAG,sCAAsC,EAAE,CAAC;AAC/E,MAAM,CAAC,MAAM,gBAAgB,GAAG,gCAAgC,EAAE,CAAC;AACnE,MAAM,CAAC,MAAM,yBAAyB,GAAG,+CAA+C,EAAE,CAAC;AAC3F,MAAM,CAAC,MAAM,uBAAuB,GAAG,6CAA6C,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';\nimport { createWidgetizedAppLayoutNavigation } from './navigation';\nimport { createWidgetizedAppLayoutNotifications } from './notifications';\nimport {\n  createWidgetizedAppLayoutSplitPanelDrawerBottom,\n  createWidgetizedAppLayoutSplitPanelDrawerSide,\n} from './split-panel';\nimport { createWidgetizedAppLayoutToolbar } from './toolbar';\n\nexport const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();\nexport const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();\nexport const AppLayoutGlobalDrawers = createWidgetizedAppLayoutGlobalDrawers();\nexport const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();\nexport const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();\nexport const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();\nexport const AppLayoutSplitPanelSide = createWidgetizedAppLayoutSplitPanelDrawerSide();\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,+BAA+B,EAAE,sCAAsC,EAAE,MAAM,UAAU,CAAC;AACnG,OAAO,EAAE,mCAAmC,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,+CAA+C,EAC/C,6CAA6C,GAC9C,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,IAAI,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AACjH,OAAO,EAAE,gCAAgC,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,2BAA2B,EAAE,sCAAsC,EAAE,MAAM,gCAAgC,CAAC;AACrH,OAAO,EAAE,4BAA4B,EAAE,uCAAuC,EAAE,MAAM,iCAAiC,CAAC;AACxH,OAAO,EACL,+BAA+B,EAC/B,0CAA0C,GAC3C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,uCAAuC,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAExH,0BAA0B;AAC1B,MAAM,CAAC,MAAM,mBAAmB,GAAG,mCAAmC,EAAE,CAAC;AACzE,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,EAAE,CAAC;AACjE,MAAM,CAAC,MAAM,sBAAsB,GAAG,sCAAsC,EAAE,CAAC;AAC/E,MAAM,CAAC,MAAM,sBAAsB,GAAG,sCAAsC,EAAE,CAAC;AAC/E,MAAM,CAAC,MAAM,gBAAgB,GAAG,gCAAgC,EAAE,CAAC;AACnE,MAAM,CAAC,MAAM,yBAAyB,GAAG,+CAA+C,EAAE,CAAC;AAC3F,MAAM,CAAC,MAAM,uBAAuB,GAAG,6CAA6C,EAAE,CAAC;AAEvF,8BAA8B;AAC9B,MAAM,CAAC,MAAM,uBAAuB,GAAG,uCAAuC,CAC5E,uBAAuB,CAAC,4BAA4B,CAAC,CACtD,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,sCAAsC,CAC1E,uBAAuB,CAAC,2BAA2B,CAAC,CACrD,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,uCAAuC,CAC5E,uBAAuB,CAAC,4BAA4B,CAAC,CACtD,CAAC;AACF,MAAM,CAAC,MAAM,0BAA0B,GAAG,0CAA0C,CAClF,uBAAuB,CAAC,+BAA+B,CAAC,CACzD,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,8BAA8B,CACpE,uBAAuB,CAAC,4BAA4B,CAAC,CACtD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createLoadableComponent } from '../../internal/widgets/loader-mock';\nimport { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';\nimport { createWidgetizedAppLayoutNavigation } from './navigation';\nimport { createWidgetizedAppLayoutNotifications } from './notifications';\nimport {\n  createWidgetizedAppLayoutSplitPanelDrawerBottom,\n  createWidgetizedAppLayoutSplitPanelDrawerSide,\n} from './split-panel';\nimport { AppLayoutStateProvider as AppLayoutStateImplementation, createWidgetizedAppLayoutState } from './state';\nimport { createWidgetizedAppLayoutToolbar } from './toolbar';\nimport { AfterMainSlotImplementation, createWidgetizedAppLayoutAfterMainSlot } from './widget-areas/after-main-slot';\nimport { BeforeMainSlotImplementation, createWidgetizedAppLayoutBeforeMainSlot } from './widget-areas/before-main-slot';\nimport {\n  BottomContentSlotImplementation,\n  createWidgetizedAppLayoutBottomContentSlot,\n} from './widget-areas/bottom-content-slot';\nimport { createWidgetizedAppLayoutTopContentSlot, TopContentSlotImplementation } from './widget-areas/top-content-slot';\n\n// Legacy widgetized parts\nexport const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();\nexport const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();\nexport const AppLayoutGlobalDrawers = createWidgetizedAppLayoutGlobalDrawers();\nexport const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();\nexport const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();\nexport const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();\nexport const AppLayoutSplitPanelSide = createWidgetizedAppLayoutSplitPanelDrawerSide();\n\n// Refactored widgetized parts\nexport const AppLayoutBeforeMainSlot = createWidgetizedAppLayoutBeforeMainSlot(\n  createLoadableComponent(BeforeMainSlotImplementation)\n);\nexport const AppLayoutAfterMainSlot = createWidgetizedAppLayoutAfterMainSlot(\n  createLoadableComponent(AfterMainSlotImplementation)\n);\nexport const AppLayoutTopContentSlot = createWidgetizedAppLayoutTopContentSlot(\n  createLoadableComponent(TopContentSlotImplementation)\n);\nexport const AppLayoutBottomContentSlot = createWidgetizedAppLayoutBottomContentSlot(\n  createLoadableComponent(BottomContentSlotImplementation)\n);\nexport const AppLayoutWidgetizedState = createWidgetizedAppLayoutState(\n  createLoadableComponent(AppLayoutStateImplementation)\n);\n"]}

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

@@ -6,7 +6,7 @@ import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
 import { InternalButton } from '../../../button/internal';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { getDrawerStyles } from '../compute-layout';
-import { NotificationsSlot } from '../skeleton/slot-wrappers';
+import { NotificationsSlot } from '../skeleton/slots';
 import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEhG,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,wBAAwB,CAAC,EAAE;YACtF,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;SAC/C,CAAC,EACF,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;YACvB,eAAe,EAAE,eAAe;SACjC;QAED,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;gBACE,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;aACnD,EACD,cAAc,CAAC,UAAU,CAC1B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB;YAE1B,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,EACtC,eAAe,EAAC,OAAO,GACvB,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAC1E,iCAAiC,EACjC,iBAAiB,CAClB,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';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\nimport { NotificationsSlot } from '../skeleton/slot-wrappers';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\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      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(styles['navigation-container'], sharedStyles['with-motion-horizontal'], {\n        [styles['is-navigation-open']]: navigationOpen,\n      })}\n      style={{\n        blockSize: drawerHeight,\n        insetBlockStart: drawerTopOffset,\n      }}\n    >\n      <nav\n        aria-label={ariaLabels?.navigation ?? undefined}\n        className={clsx(\n          styles.navigation,\n          {\n            [testutilStyles['drawer-closed']]: !navigationOpen,\n          },\n          testutilStyles.navigation\n        )}\n        aria-hidden={!navigationOpen}\n        onClick={onNavigationClick}\n      >\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n            analyticsAction=\"close\"\n          />\n        </div>\n        {navigation}\n      </nav>\n    </div>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(\n  AppLayoutNavigationImplementation,\n  NotificationsSlot\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEhG,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,wBAAwB,CAAC,EAAE;YACtF,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;SAC/C,CAAC,EACF,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;YACvB,eAAe,EAAE,eAAe;SACjC;QAED,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;gBACE,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;aACnD,EACD,cAAc,CAAC,UAAU,CAC1B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB;YAE1B,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,EACtC,eAAe,EAAC,OAAO,GACvB,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAC1E,iCAAiC,EACjC,iBAAiB,CAClB,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';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\nimport { NotificationsSlot } from '../skeleton/slots';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\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      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(styles['navigation-container'], sharedStyles['with-motion-horizontal'], {\n        [styles['is-navigation-open']]: navigationOpen,\n      })}\n      style={{\n        blockSize: drawerHeight,\n        insetBlockStart: drawerTopOffset,\n      }}\n    >\n      <nav\n        aria-label={ariaLabels?.navigation ?? undefined}\n        className={clsx(\n          styles.navigation,\n          {\n            [testutilStyles['drawer-closed']]: !navigationOpen,\n          },\n          testutilStyles.navigation\n        )}\n        aria-hidden={!navigationOpen}\n        onClick={onNavigationClick}\n      >\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n            analyticsAction=\"close\"\n          />\n        </div>\n        {navigation}\n      </nav>\n    </div>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(\n  AppLayoutNavigationImplementation,\n  NotificationsSlot\n);\n"]}

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

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
 import { createWidgetizedComponent } from '../../../internal/widgets';
-import { NotificationsSkeleton } from '../skeleton/slot-skeletons';
-import { NotificationsSlot } from '../skeleton/slot-wrappers';
+import { NotificationsSkeleton } from '../skeleton/skeleton-parts';
+import { NotificationsSlot } from '../skeleton/slots';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 export function AppLayoutNotificationsImplementation({ appLayoutInternals, children, }) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,UAAU,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACkC;IAC1C,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAC;IACxG,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9E,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;QACjC,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC9C,sBAAsB,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/D,0BAA0B,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,sBAAsB,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC;QACF,sBAAsB;QACtB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,iBAAiB,IAChB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CACb,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,2BAA2B,EACnF,mBAAmB,IAAI,MAAM,CAAC,sBAAsB,CAAC,EACrD,uBAAuB,IAAI,MAAM,CAAC,2BAA2B,CAAC,EAC9D,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,MAAM,CAAC,sCAAsC,CAAC,CACvG,EACD,KAAK,EAAE;YACL,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;SACjF;QAED,6BAAK,SAAS,EAAE,cAAc,CAAC,aAAa,EAAE,IAAI,EAAC,QAAQ,gBAAa,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,IAC9F,QAAQ,CACL,CACY,CACrB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAC7E,oCAAoC,EACpC,qBAAqB,CACtB,CAAC","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 clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { NotificationsSkeleton } from '../skeleton/slot-skeletons';\nimport { NotificationsSlot } from '../skeleton/slot-wrappers';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface AppLayoutNotificationsImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutNotificationsImplementation({\n  appLayoutInternals,\n  children,\n}: AppLayoutNotificationsImplementationProps) {\n  const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;\n  const [hasNotificationsContent, setHasNotificationsContent] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useResizeObserver(rootRef, entry => {\n    const hasContent = entry.contentBoxHeight > 0;\n    setNotificationsHeight(hasContent ? entry.borderBoxHeight : 0);\n    setHasNotificationsContent(hasContent);\n  });\n  useEffect(() => {\n    return () => {\n      setNotificationsHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return (\n    <NotificationsSlot\n      ref={rootRef}\n      className={clsx(\n        appLayoutInternals.headerVariant === 'high-contrast' && highContrastHeaderClassName,\n        stickyNotifications && styles['sticky-notifications'],\n        hasNotificationsContent && styles['has-notifications-content'],\n        appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']\n      )}\n      style={{\n        insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,\n      }}\n    >\n      <div className={testutilStyles.notifications} role=\"region\" aria-label={ariaLabels?.notifications}>\n        {children}\n      </div>\n    </NotificationsSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(\n  AppLayoutNotificationsImplementation,\n  NotificationsSkeleton\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,UAAU,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACkC;IAC1C,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAC;IACxG,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9E,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;QACjC,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC9C,sBAAsB,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/D,0BAA0B,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,sBAAsB,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC;QACF,sBAAsB;QACtB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,iBAAiB,IAChB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CACb,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,2BAA2B,EACnF,mBAAmB,IAAI,MAAM,CAAC,sBAAsB,CAAC,EACrD,uBAAuB,IAAI,MAAM,CAAC,2BAA2B,CAAC,EAC9D,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,MAAM,CAAC,sCAAsC,CAAC,CACvG,EACD,KAAK,EAAE;YACL,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;SACjF;QAED,6BAAK,SAAS,EAAE,cAAc,CAAC,aAAa,EAAE,IAAI,EAAC,QAAQ,gBAAa,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,IAC9F,QAAQ,CACL,CACY,CACrB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAC7E,oCAAoC,EACpC,qBAAqB,CACtB,CAAC","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 clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { NotificationsSkeleton } from '../skeleton/skeleton-parts';\nimport { NotificationsSlot } from '../skeleton/slots';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface AppLayoutNotificationsImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutNotificationsImplementation({\n  appLayoutInternals,\n  children,\n}: AppLayoutNotificationsImplementationProps) {\n  const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;\n  const [hasNotificationsContent, setHasNotificationsContent] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useResizeObserver(rootRef, entry => {\n    const hasContent = entry.contentBoxHeight > 0;\n    setNotificationsHeight(hasContent ? entry.borderBoxHeight : 0);\n    setHasNotificationsContent(hasContent);\n  });\n  useEffect(() => {\n    return () => {\n      setNotificationsHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return (\n    <NotificationsSlot\n      ref={rootRef}\n      className={clsx(\n        appLayoutInternals.headerVariant === 'high-contrast' && highContrastHeaderClassName,\n        stickyNotifications && styles['sticky-notifications'],\n        hasNotificationsContent && styles['has-notifications-content'],\n        appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']\n      )}\n      style={{\n        insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,\n      }}\n    >\n      <div className={testutilStyles.notifications} role=\"region\" aria-label={ariaLabels?.notifications}>\n        {children}\n      </div>\n    </NotificationsSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(\n  AppLayoutNotificationsImplementation,\n  NotificationsSkeleton\n);\n"]}

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

@@ -1,18 +1,13 @@
-import React from 'react';
-import { AppLayoutPropsWithDefaults } from '../../interfaces';
-interface SkeletonLayoutProps extends Pick<AppLayoutPropsWithDefaults, 'notifications' | 'headerVariant' | 'contentHeader' | 'content' | 'contentType' | 'maxContentWidth' | 'disableContentPaddings' | 'navigation' | 'navigationOpen' | 'navigationWidth' | 'tools' | 'toolsOpen' | 'toolsWidth' | 'placement'> {
-    style?: React.CSSProperties;
-    toolbar?: React.ReactNode;
-    splitPanelOpen?: boolean;
-    sideSplitPanel?: React.ReactNode;
-    bottomSplitPanel?: React.ReactNode;
-    globalTools?: React.ReactNode;
-    globalToolsOpen?: boolean;
-    navigationAnimationDisabled?: boolean;
-    isNested?: boolean;
-    drawerExpandedMode: boolean;
-    drawerExpandedModeInChildLayout: boolean;
+/// <reference types="react" />
+import { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';
+import { ToolbarProps } from '../toolbar';
+import { SkeletonSlotsAttributes } from './interfaces';
+export interface SkeletonLayoutProps {
+    registered: boolean;
+    appLayoutProps: AppLayoutInternalProps;
+    appLayoutState: AppLayoutPendingState;
+    toolbarProps: ToolbarProps | null;
+    skeletonSlotsAttributes: SkeletonSlotsAttributes;
 }
-export declare const SkeletonLayout: React.ForwardRefExoticComponent<SkeletonLayoutProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const SkeletonLayout: ({ registered, appLayoutProps, appLayoutState, toolbarProps, skeletonSlotsAttributes, }: SkeletonLayoutProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,eAAe,GACf,eAAe,GACf,eAAe,GACf,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,wBAAwB,GACxB,YAAY,GACZ,gBAAgB,GAChB,iBAAiB,GACjB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,WAAW,CACd;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,+BAA+B,EAAE,OAAO,CAAC;CAC1C;AAUD,eAAO,MAAM,cAAc,4FA0H1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAO9E,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAqB,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,sBAAsB,CAAC;IACvC,cAAc,EAAE,qBAAqB,CAAC;IACtC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,uBAAuB,EAAE,uBAAuB,CAAC;CAClD;AAUD,eAAO,MAAM,cAAc,2FAMxB,mBAAmB,gBAmDrB,CAAC"}

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

@@ -5,12 +5,9 @@ import clsx from 'clsx';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
-import { useMobile } from '../../../internal/hooks/use-mobile';
-import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
-import sharedStyles from '../../resize/styles.css.js';
+import { AppLayoutAfterMainSlot, AppLayoutBeforeMainSlot, AppLayoutBottomContentSlot, AppLayoutTopContentSlot, } from '../internal';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
-const contentTypeCustomWidths = ['dashboard', 'cards', 'table'];
 const componentAnalyticsMetadata = {
     name: 'awsui.AppLayoutToolbar',
     label: {
@@ -18,32 +15,26 @@ const componentAnalyticsMetadata = {
         root: 'body',
     },
 };
-export const SkeletonLayout = React.forwardRef(({ style, notifications, headerVariant, contentHeader, content, navigation, navigationOpen, navigationWidth, tools, globalTools, toolsOpen, toolsWidth, toolbar, sideSplitPanel, bottomSplitPanel, splitPanelOpen, placement, contentType, maxContentWidth, disableContentPaddings, globalToolsOpen, navigationAnimationDisabled, isNested, drawerExpandedMode, drawerExpandedModeInChildLayout, }, ref) => {
-    const isMobile = useMobile();
-    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
-    const anyPanelOpen = navigationOpen || toolsOpen;
+export const SkeletonLayout = ({ registered, appLayoutProps, appLayoutState, toolbarProps, skeletonSlotsAttributes, }) => {
+    var _a, _b, _c, _d, _e;
+    const { contentHeader, content, navigationWidth } = appLayoutProps;
+    const mergedProps = {
+        toolbarProps,
+        appLayoutProps,
+        appLayoutState,
+    };
+    const { wrapperElAttributes, mainElAttributes, contentWrapperElAttributes, contentHeaderElAttributes, contentElAttributes, } = skeletonSlotsAttributes;
     return (React.createElement(VisualContext, { contextName: "app-layout-toolbar" },
-        React.createElement("div", Object.assign({ ref: ref, className: clsx(styles.root, testutilStyles.root, {
-                [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
-                [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
-                [styles['drawer-expanded-mode']]: drawerExpandedMode,
-            }), style: {
-                minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
-                [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
+        React.createElement("div", Object.assign({}, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }), { ref: appLayoutState.rootRef, "data-awsui-app-layout-widget-loaded": false }, wrapperElAttributes, { className: (_a = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.className) !== null && _a !== void 0 ? _a : clsx(styles.root, testutilStyles.root), style: (_b = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.style) !== null && _b !== void 0 ? _b : {
                 [customCssProps.navigationWidth]: `${navigationWidth}px`,
-                [customCssProps.toolsWidth]: `${toolsWidth}px`,
-            } }, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })),
-            toolbar,
-            navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'], (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden) }, navigation)),
-            React.createElement("main", { className: clsx(styles['main-landmark'], isMobile && anyPanelOpen && styles['unfocusable-mobile'], drawerExpandedMode && styles.hidden) },
-                notifications && (React.createElement("div", { className: clsx(styles['notifications-background'], headerVariant === 'high-contrast' && highContrastHeaderClassName) })),
-                notifications,
-                React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }), style: style },
-                    contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
-                    React.createElement("div", { className: clsx(styles.content, testutilStyles.content) }, content)),
-                bottomSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-bottom']), style: { insetBlockEnd: placement.insetBlockEnd } }, bottomSplitPanel))),
-            sideSplitPanel && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'], drawerExpandedMode && styles.hidden) }, sideSplitPanel)),
-            React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open'], drawerExpandedMode && styles.hidden) }, tools),
-            React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) }, globalTools))));
-});
+            } }),
+            React.createElement(AppLayoutBeforeMainSlot, Object.assign({}, mergedProps)),
+            React.createElement("main", Object.assign({}, mainElAttributes, { className: (_c = mainElAttributes === null || mainElAttributes === void 0 ? void 0 : mainElAttributes.className) !== null && _c !== void 0 ? _c : styles['main-landmark'] }),
+                React.createElement(AppLayoutTopContentSlot, Object.assign({}, mergedProps)),
+                React.createElement("div", Object.assign({}, contentWrapperElAttributes, { className: (_d = contentWrapperElAttributes === null || contentWrapperElAttributes === void 0 ? void 0 : contentWrapperElAttributes.className) !== null && _d !== void 0 ? _d : clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings }) }),
+                    contentHeader && React.createElement("div", Object.assign({}, contentHeaderElAttributes), contentHeader),
+                    React.createElement("div", Object.assign({}, contentElAttributes, { className: (_e = contentElAttributes === null || contentElAttributes === void 0 ? void 0 : contentElAttributes.className) !== null && _e !== void 0 ? _e : testutilStyles.content }), registered ? content : null)),
+                React.createElement(AppLayoutBottomContentSlot, Object.assign({}, mergedProps))),
+            React.createElement(AppLayoutAfterMainSlot, Object.assign({}, mergedProps)))));
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/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 from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } from '../../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n  extends Pick<\n    AppLayoutPropsWithDefaults,\n    | 'notifications'\n    | 'headerVariant'\n    | 'contentHeader'\n    | 'content'\n    | 'contentType'\n    | 'maxContentWidth'\n    | 'disableContentPaddings'\n    | 'navigation'\n    | 'navigationOpen'\n    | 'navigationWidth'\n    | 'tools'\n    | 'toolsOpen'\n    | 'toolsWidth'\n    | 'placement'\n  > {\n  style?: React.CSSProperties;\n  toolbar?: React.ReactNode;\n  splitPanelOpen?: boolean;\n  sideSplitPanel?: React.ReactNode;\n  bottomSplitPanel?: React.ReactNode;\n  globalTools?: React.ReactNode;\n  globalToolsOpen?: boolean;\n  navigationAnimationDisabled?: boolean;\n  isNested?: boolean;\n  drawerExpandedMode: boolean;\n  drawerExpandedModeInChildLayout: boolean;\n}\n\nconst componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {\n  name: 'awsui.AppLayoutToolbar',\n  label: {\n    selector: 'h1',\n    root: 'body',\n  },\n};\n\nexport const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(\n  (\n    {\n      style,\n      notifications,\n      headerVariant,\n      contentHeader,\n      content,\n      navigation,\n      navigationOpen,\n      navigationWidth,\n      tools,\n      globalTools,\n      toolsOpen,\n      toolsWidth,\n      toolbar,\n      sideSplitPanel,\n      bottomSplitPanel,\n      splitPanelOpen,\n      placement,\n      contentType,\n      maxContentWidth,\n      disableContentPaddings,\n      globalToolsOpen,\n      navigationAnimationDisabled,\n      isNested,\n      drawerExpandedMode,\n      drawerExpandedModeInChildLayout,\n    },\n    ref\n  ) => {\n    const isMobile = useMobile();\n    const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n    const anyPanelOpen = navigationOpen || toolsOpen;\n    return (\n      <VisualContext contextName=\"app-layout-toolbar\">\n        <div\n          ref={ref}\n          className={clsx(styles.root, testutilStyles.root, {\n            [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n            [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n            [styles['drawer-expanded-mode']]: drawerExpandedMode,\n          })}\n          style={{\n            minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,\n            [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n            [customCssProps.navigationWidth]: `${navigationWidth}px`,\n            [customCssProps.toolsWidth]: `${toolsWidth}px`,\n          }}\n          {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n        >\n          {toolbar}\n          {navigation && (\n            <div\n              className={clsx(\n                styles.navigation,\n                !navigationOpen && styles['panel-hidden'],\n                toolsOpen && styles['unfocusable-mobile'],\n                !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'],\n                (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden\n              )}\n            >\n              {navigation}\n            </div>\n          )}\n          <main\n            className={clsx(\n              styles['main-landmark'],\n              isMobile && anyPanelOpen && styles['unfocusable-mobile'],\n              drawerExpandedMode && styles.hidden\n            )}\n          >\n            {notifications && (\n              <div\n                className={clsx(\n                  styles['notifications-background'],\n                  headerVariant === 'high-contrast' && highContrastHeaderClassName\n                )}\n              ></div>\n            )}\n            {notifications}\n            <div\n              className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}\n              style={style}\n            >\n              {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n              <div className={clsx(styles.content, testutilStyles.content)}>{content}</div>\n            </div>\n            {bottomSplitPanel && (\n              <div className={clsx(styles['split-panel-bottom'])} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n                {bottomSplitPanel}\n              </div>\n            )}\n          </main>\n          {sideSplitPanel && (\n            <div\n              className={clsx(\n                styles['split-panel-side'],\n                !splitPanelOpen && styles['panel-hidden'],\n                drawerExpandedMode && styles.hidden\n              )}\n            >\n              {sideSplitPanel}\n            </div>\n          )}\n          <div\n            className={clsx(\n              styles.tools,\n              !toolsOpen && styles['panel-hidden'],\n              sharedStyles['with-motion-horizontal'],\n              navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n              toolsOpen && styles['tools-open'],\n              drawerExpandedMode && styles.hidden\n            )}\n          >\n            {tools}\n          </div>\n          <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>{globalTools}</div>\n        </div>\n      </VisualContext>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAGjH,OAAO,aAAa,MAAM,6CAA6C,CAAC;AACxE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,aAAa,CAAC;AAIrB,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,0BAA0B,GAAwD;IACtF,IAAI,EAAE,wBAAwB;IAC9B,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,MAAM;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAY,EACZ,uBAAuB,GACH,EAAE,EAAE;;IACxB,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;IACnE,MAAM,WAAW,GAAsB;QACrC,YAAY;QACZ,cAAc;QACd,cAAc;KACf,CAAC;IACF,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,0BAA0B,EAC1B,yBAAyB,EACzB,mBAAmB,GACpB,GAAG,uBAAuB,CAAC;IAE5B,OAAO,CACL,oBAAC,aAAa,IAAC,WAAW,EAAC,oBAAoB;QAC7C,6CACM,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,IAC5E,GAAG,EAAE,cAAc,CAAC,OAAoC,yCACnB,KAAK,IACtC,mBAAmB,IACvB,SAAS,EAAE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,mCAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,EACnF,KAAK,EACH,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,KAAK,mCAAI;gBAC5B,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI;aACzD;YAGH,oBAAC,uBAAuB,oBAAK,WAAW,EAAI;YAC5C,8CAAU,gBAAgB,IAAE,SAAS,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,SAAS,mCAAI,MAAM,CAAC,eAAe,CAAC;gBAC3F,oBAAC,uBAAuB,oBAAK,WAAW,EAAI;gBAC5C,6CACM,0BAA0B,IAC9B,SAAS,EACP,MAAA,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,SAAS,mCACrC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,cAAc,CAAC,sBAAsB,EAAE,CAAC;oBAGhG,aAAa,IAAI,6CAAS,yBAAyB,GAAG,aAAa,CAAO;oBAE3E,6CAAS,mBAAmB,IAAE,SAAS,EAAE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,mCAAI,cAAc,CAAC,OAAO,KAC9F,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CACxB,CACF;gBACN,oBAAC,0BAA0B,oBAAK,WAAW,EAAI,CAC1C;YACP,oBAAC,sBAAsB,oBAAK,WAAW,EAAI,CACvC,CACQ,CACjB,CAAC;AACJ,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';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';\nimport {\n  AppLayoutAfterMainSlot,\n  AppLayoutBeforeMainSlot,\n  AppLayoutBottomContentSlot,\n  AppLayoutTopContentSlot,\n} from '../internal';\nimport { ToolbarProps } from '../toolbar';\nimport { SkeletonPartProps, SkeletonSlotsAttributes } from './interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SkeletonLayoutProps {\n  registered: boolean;\n  appLayoutProps: AppLayoutInternalProps;\n  appLayoutState: AppLayoutPendingState;\n  toolbarProps: ToolbarProps | null;\n  skeletonSlotsAttributes: SkeletonSlotsAttributes;\n}\n\nconst componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {\n  name: 'awsui.AppLayoutToolbar',\n  label: {\n    selector: 'h1',\n    root: 'body',\n  },\n};\n\nexport const SkeletonLayout = ({\n  registered,\n  appLayoutProps,\n  appLayoutState,\n  toolbarProps,\n  skeletonSlotsAttributes,\n}: SkeletonLayoutProps) => {\n  const { contentHeader, content, navigationWidth } = appLayoutProps;\n  const mergedProps: SkeletonPartProps = {\n    toolbarProps,\n    appLayoutProps,\n    appLayoutState,\n  };\n  const {\n    wrapperElAttributes,\n    mainElAttributes,\n    contentWrapperElAttributes,\n    contentHeaderElAttributes,\n    contentElAttributes,\n  } = skeletonSlotsAttributes;\n\n  return (\n    <VisualContext contextName=\"app-layout-toolbar\">\n      <div\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n        ref={appLayoutState.rootRef as React.Ref<HTMLDivElement>}\n        data-awsui-app-layout-widget-loaded={false}\n        {...wrapperElAttributes}\n        className={wrapperElAttributes?.className ?? clsx(styles.root, testutilStyles.root)}\n        style={\n          wrapperElAttributes?.style ?? {\n            [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          }\n        }\n      >\n        <AppLayoutBeforeMainSlot {...mergedProps} />\n        <main {...mainElAttributes} className={mainElAttributes?.className ?? styles['main-landmark']}>\n          <AppLayoutTopContentSlot {...mergedProps} />\n          <div\n            {...contentWrapperElAttributes}\n            className={\n              contentWrapperElAttributes?.className ??\n              clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings })\n            }\n          >\n            {contentHeader && <div {...contentHeaderElAttributes}>{contentHeader}</div>}\n            {/*delay rendering the content until registration of this instance is complete*/}\n            <div {...contentElAttributes} className={contentElAttributes?.className ?? testutilStyles.content}>\n              {registered ? content : null}\n            </div>\n          </div>\n          <AppLayoutBottomContentSlot {...mergedProps} />\n        </main>\n        <AppLayoutAfterMainSlot {...mergedProps} />\n      </div>\n    </VisualContext>\n  );\n};\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/interfaces.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';
+import { ToolbarProps } from '../toolbar';
+interface ElementAttributes {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SkeletonSlotsAttributes {
+    wrapperElAttributes?: ElementAttributes;
+    mainElAttributes?: ElementAttributes;
+    contentWrapperElAttributes?: ElementAttributes;
+    contentHeaderElAttributes?: ElementAttributes;
+    contentElAttributes?: ElementAttributes;
+}
+export interface SkeletonPartProps {
+    appLayoutProps: AppLayoutInternalProps;
+    toolbarProps: ToolbarProps | null;
+    appLayoutState: AppLayoutPendingState;
+}
+export {};
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,0BAA0B,CAAC,EAAE,iBAAiB,CAAC;IAC/C,yBAAyB,CAAC,EAAE,iBAAiB,CAAC;IAC9C,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,sBAAsB,CAAC;IACvC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,qBAAqB,CAAC;CACvC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';\nimport { ToolbarProps } from '../toolbar';\n\ninterface ElementAttributes {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface SkeletonSlotsAttributes {\n  wrapperElAttributes?: ElementAttributes;\n  mainElAttributes?: ElementAttributes;\n  contentWrapperElAttributes?: ElementAttributes;\n  contentHeaderElAttributes?: ElementAttributes;\n  contentElAttributes?: ElementAttributes;\n}\n\nexport interface SkeletonPartProps {\n  appLayoutProps: AppLayoutInternalProps;\n  toolbarProps: ToolbarProps | null;\n  appLayoutState: AppLayoutPendingState;\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.d.ts

@@ -0,0 +1,8 @@
+import { MergeProps, SharedProps } from '../state/interfaces';
+import { ToolbarProps } from '../toolbar';
+export type DeduplicationType = 'primary' | 'secondary' | 'suspended' | 'off';
+export declare function useMultiAppLayout(forceDeduplicationType: DeduplicationType, isEnabled: boolean, props: SharedProps, mergeProps: MergeProps): {
+    registered: boolean;
+    toolbarProps: ToolbarProps | null;
+};
+//# sourceMappingURL=multi-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-layout.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/multi-layout.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;AAE9E,wBAAgB,iBAAiB,CAC/B,sBAAsB,EAAE,iBAAiB,EACzC,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,UAAU,EAAE,UAAU,GACrB;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAA;CAAE,CAwC5D"}

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

@@ -0,0 +1,41 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useLayoutEffect, useState } from 'react';
+import { awsuiPluginsInternal } from '../../../internal/plugins/api';
+import { useAppLayoutFlagEnabled } from '../../utils/feature-flags';
+export function useMultiAppLayout(forceDeduplicationType, isEnabled, props, mergeProps) {
+    const [registration, setRegistration] = useState(null);
+    const isToolbar = useAppLayoutFlagEnabled();
+    useLayoutEffect(() => {
+        if (!isEnabled || forceDeduplicationType === 'suspended' || !isToolbar) {
+            return;
+        }
+        if (forceDeduplicationType === 'off') {
+            setRegistration({ type: 'primary', discoveredProps: [] });
+            return;
+        }
+        const unregister = awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props => setRegistration(props));
+        return () => {
+            unregister();
+            setRegistration({ type: 'suspended' });
+        };
+    }, [forceDeduplicationType, isEnabled, isToolbar]);
+    useLayoutEffect(() => {
+        if ((registration === null || registration === void 0 ? void 0 : registration.type) === 'secondary') {
+            registration.update(props);
+        }
+    });
+    if (!isToolbar) {
+        return {
+            registered: true,
+            // mergeProps is needed here because the toolbar's behavior depends on reconciliation logic
+            // in this function. For example, navigation trigger visibility
+            toolbarProps: mergeProps(props, []),
+        };
+    }
+    return {
+        registered: !!(registration === null || registration === void 0 ? void 0 : registration.type),
+        toolbarProps: (registration === null || registration === void 0 ? void 0 : registration.type) === 'primary' ? mergeProps(props, registration.discoveredProps) : null,
+    };
+}
+//# sourceMappingURL=multi-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-layout.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/multi-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMpE,MAAM,UAAU,iBAAiB,CAC/B,sBAAyC,EACzC,SAAkB,EAClB,KAAkB,EAClB,UAAsB;IAEtB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAwC,IAAI,CAAC,CAAC;IAC9F,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAC;IAE5C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,SAAS,IAAI,sBAAsB,KAAK,WAAW,IAAI,CAAC,SAAS,EAAE;YACtE,OAAO;SACR;QACD,IAAI,sBAAsB,KAAK,KAAK,EAAE;YACpC,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;YAC1D,OAAO;SACR;QACD,MAAM,UAAU,GAAG,oBAAoB,CAAC,eAAe,CAAC,QAAQ,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAC/F,eAAe,CAAC,KAAuC,CAAC,CACzD,CAAC;QACF,OAAO,GAAG,EAAE;YACV,UAAU,EAAE,CAAC;YACb,eAAe,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,WAAW,EAAE;YACtC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,IAAI;YAChB,2FAA2F;YAC3F,+DAA+D;YAC/D,YAAY,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC;SACpC,CAAC;KACH;IAED,OAAO;QACL,UAAU,EAAE,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,CAAA;QAChC,YAAY,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useLayoutEffect, useState } from 'react';\n\nimport { awsuiPluginsInternal } from '../../../internal/plugins/api';\nimport { RegistrationState } from '../../../internal/plugins/controllers/app-layout-widget';\nimport { useAppLayoutFlagEnabled } from '../../utils/feature-flags';\nimport { MergeProps, SharedProps } from '../state/interfaces';\nimport { ToolbarProps } from '../toolbar';\n\nexport type DeduplicationType = 'primary' | 'secondary' | 'suspended' | 'off';\n\nexport function useMultiAppLayout(\n  forceDeduplicationType: DeduplicationType,\n  isEnabled: boolean,\n  props: SharedProps,\n  mergeProps: MergeProps\n): { registered: boolean; toolbarProps: ToolbarProps | null } {\n  const [registration, setRegistration] = useState<RegistrationState<SharedProps> | null>(null);\n  const isToolbar = useAppLayoutFlagEnabled();\n\n  useLayoutEffect(() => {\n    if (!isEnabled || forceDeduplicationType === 'suspended' || !isToolbar) {\n      return;\n    }\n    if (forceDeduplicationType === 'off') {\n      setRegistration({ type: 'primary', discoveredProps: [] });\n      return;\n    }\n    const unregister = awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props =>\n      setRegistration(props as RegistrationState<SharedProps>)\n    );\n    return () => {\n      unregister();\n      setRegistration({ type: 'suspended' });\n    };\n  }, [forceDeduplicationType, isEnabled, isToolbar]);\n\n  useLayoutEffect(() => {\n    if (registration?.type === 'secondary') {\n      registration.update(props);\n    }\n  });\n\n  if (!isToolbar) {\n    return {\n      registered: true,\n      // mergeProps is needed here because the toolbar's behavior depends on reconciliation logic\n      // in this function. For example, navigation trigger visibility\n      toolbarProps: mergeProps(props, []),\n    };\n  }\n\n  return {\n    registered: !!registration?.type,\n    toolbarProps: registration?.type === 'primary' ? mergeProps(props, registration.discoveredProps) : null,\n  };\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/{slot-skeletons.d.ts → skeleton-parts.d.ts}

@@ -1,6 +1,14 @@
 import React from 'react';
 import { AppLayoutNotificationsImplementationProps } from '../notifications';
 import { AppLayoutToolbarImplementationProps } from '../toolbar';
+import { SkeletonPartProps } from './interfaces';
+/**
+ * New widgetized parts
+ */
+export declare const BeforeMainSlotSkeleton: React.ForwardRefExoticComponent<SkeletonPartProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Legacy parts
+ */
 export declare const ToolbarSkeleton: React.ForwardRefExoticComponent<AppLayoutToolbarImplementationProps & React.RefAttributes<HTMLElement>>;
 export declare const NotificationsSkeleton: React.ForwardRefExoticComponent<AppLayoutNotificationsImplementationProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=slot-skeletons.d.ts.map
+//# sourceMappingURL=skeleton-parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-parts.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yCAAyC,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,mCAAmC,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAKjD;;GAEG;AAEH,eAAO,MAAM,sBAAsB,uFAalC,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,eAAe,yGAS3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,+GAEjC,CAAC"}

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

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { BreadcrumbsSlot, NotificationsSlot, ToolbarSlot } from './slots';
+import styles from './styles.css.js';
+/**
+ * New widgetized parts
+ */
+export const BeforeMainSlotSkeleton = React.forwardRef(({ toolbarProps, appLayoutProps }, ref) => {
+    return (React.createElement(React.Fragment, null,
+        !!toolbarProps && (React.createElement(ToolbarSlot, { ref: ref },
+            React.createElement(BreadcrumbsSlot, { ownBreadcrumbs: appLayoutProps.breadcrumbs }))),
+        (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.navigationOpen) && React.createElement("div", { className: styles.navigation })));
+});
+/**
+ * Legacy parts
+ */
+export const ToolbarSkeleton = React.forwardRef(({ appLayoutInternals }, ref) => (React.createElement(ToolbarSlot, { ref: ref },
+    React.createElement(BreadcrumbsSlot, { ownBreadcrumbs: appLayoutInternals.breadcrumbs, discoveredBreadcrumbs: appLayoutInternals.discoveredBreadcrumbs }))));
+export const NotificationsSkeleton = React.forwardRef((props, ref) => React.createElement(NotificationsSlot, { ref: ref }));
+//# sourceMappingURL=skeleton-parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-parts.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;GAEG;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,CACpD,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,EAAE;IACxC,OAAO,CACL;QACG,CAAC,CAAC,YAAY,IAAI,CACjB,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG;YACnB,oBAAC,eAAe,IAAC,cAAc,EAAE,cAAc,CAAC,WAAW,GAAI,CACnD,CACf;QACA,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,cAAc,KAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI,CACrE,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CAAC,EAAE,kBAAkB,EAAuC,EAAE,GAAG,EAAE,EAAE,CAAC,CACpE,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG;IACnB,oBAAC,eAAe,IACd,cAAc,EAAE,kBAAkB,CAAC,WAAW,EAC9C,qBAAqB,EAAE,kBAAkB,CAAC,qBAAqB,GAC/D,CACU,CACf,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CACnD,CAAC,KAAgD,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,GAAI,CAC3F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { AppLayoutNotificationsImplementationProps } from '../notifications';\nimport { AppLayoutToolbarImplementationProps } from '../toolbar';\nimport { SkeletonPartProps } from './interfaces';\nimport { BreadcrumbsSlot, NotificationsSlot, ToolbarSlot } from './slots';\n\nimport styles from './styles.css.js';\n\n/**\n * New widgetized parts\n */\n\nexport const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPartProps>(\n  ({ toolbarProps, appLayoutProps }, ref) => {\n    return (\n      <>\n        {!!toolbarProps && (\n          <ToolbarSlot ref={ref}>\n            <BreadcrumbsSlot ownBreadcrumbs={appLayoutProps.breadcrumbs} />\n          </ToolbarSlot>\n        )}\n        {toolbarProps?.navigationOpen && <div className={styles.navigation} />}\n      </>\n    );\n  }\n);\n\n/**\n * Legacy parts\n */\n\nexport const ToolbarSkeleton = React.forwardRef<HTMLElement, AppLayoutToolbarImplementationProps>(\n  ({ appLayoutInternals }: AppLayoutToolbarImplementationProps, ref) => (\n    <ToolbarSlot ref={ref}>\n      <BreadcrumbsSlot\n        ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n        discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n      />\n    </ToolbarSlot>\n  )\n);\n\nexport const NotificationsSkeleton = React.forwardRef<HTMLElement, AppLayoutNotificationsImplementationProps>(\n  (props: AppLayoutNotificationsImplementationProps, ref) => <NotificationsSlot ref={ref} />\n);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/{slot-wrappers.d.ts → slots.d.ts}

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';
 interface ToolbarSlotProps {
     className?: string;
     style?: React.CSSProperties;
@@ -11,5 +12,10 @@ interface NotificationsSlotProps {
     children?: React.ReactNode;
 }
 export declare const NotificationsSlot: React.ForwardRefExoticComponent<NotificationsSlotProps & React.RefAttributes<HTMLElement>>;
+interface BreadcrumbsSlotProps {
+    ownBreadcrumbs: React.ReactNode;
+    discoveredBreadcrumbs?: BreadcrumbGroupProps | null;
+}
+export declare function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps): JSX.Element;
 export {};
-//# sourceMappingURL=slot-wrappers.d.ts.map
+//# sourceMappingURL=slots.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAK5E,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,sFAItB,CAAC;AAEH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,4FAM7B,CAAC;AAEF,UAAU,oBAAoB;IAC5B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qBAAqB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACrD;AAED,wBAAgB,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAE,EAAE,oBAAoB,eAe9F"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/{breadcrumbs/index.js → slots.js}

@@ -1,13 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { BreadcrumbGroupImplementation } from '../../../../breadcrumb-group/implementation';
-import { BreadcrumbsSlotContext } from '../../contexts';
+import clsx from 'clsx';
+import { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';
+import { BreadcrumbsSlotContext } from '../contexts';
 import styles from './styles.css.js';
+export const ToolbarSlot = React.forwardRef(({ className, style, children }, ref) => (React.createElement("section", { ref: ref, className: clsx(styles['toolbar-container'], className), style: style }, children)));
+export const NotificationsSlot = React.forwardRef(({ className, style, children }, ref) => (React.createElement("div", { ref: ref, className: clsx(styles['notifications-container'], className), style: style }, children)));
 export function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }) {
     return (React.createElement(BreadcrumbsSlotContext.Provider, { value: { isInToolbar: true } },
         React.createElement("div", { className: styles['breadcrumbs-own'] }, ownBreadcrumbs),
         discoveredBreadcrumbs && (React.createElement("div", { className: styles['breadcrumbs-discovered'] },
             React.createElement(BreadcrumbGroupImplementation, Object.assign({}, discoveredBreadcrumbs, { "data-awsui-discovered-breadcrumbs": true, __injectAnalyticsComponentMetadata: true }))))));
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=slots.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAC;AAEzF,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClH,iCAAS,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACvG,QAAQ,CACD,CACX,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvC,6BAAK,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACzG,QAAQ,CACL,CACP,CACF,CAAC;AAOF,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAwB;IAC7F,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;QAC3D,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,cAAc,CAAO;QAChE,qBAAqB,IAAI,CACxB,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;YAC9C,oBAAC,6BAA6B,oBACxB,qBAAqB,yCACU,IAAI,EACvC,kCAAkC,EAAE,IAAI,IACxC,CACE,CACP,CAC+B,CACnC,CAAC;AACJ,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';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';\nimport { BreadcrumbsSlotContext } from '../contexts';\n\nimport styles from './styles.css.js';\n\ninterface ToolbarSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const ToolbarSlot = React.forwardRef<HTMLElement, ToolbarSlotProps>(({ className, style, children }, ref) => (\n  <section ref={ref as React.Ref<any>} className={clsx(styles['toolbar-container'], className)} style={style}>\n    {children}\n  </section>\n));\n\ninterface NotificationsSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const NotificationsSlot = React.forwardRef<HTMLElement, NotificationsSlotProps>(\n  ({ className, style, children }, ref) => (\n    <div ref={ref as React.Ref<any>} className={clsx(styles['notifications-container'], className)} style={style}>\n      {children}\n    </div>\n  )\n);\n\ninterface BreadcrumbsSlotProps {\n  ownBreadcrumbs: React.ReactNode;\n  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;\n}\n\nexport function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {\n  return (\n    <BreadcrumbsSlotContext.Provider value={{ isInToolbar: true }}>\n      <div className={styles['breadcrumbs-own']}>{ownBreadcrumbs}</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  );\n}\n"]}

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

@@ -1,26 +1,28 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_1w5ew_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1w5ew_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1w5ew_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1w5ew_217",
-  "navigation": "awsui_navigation_7nfqu_1w5ew_222",
-  "tools": "awsui_tools_7nfqu_1w5ew_223",
-  "global-tools": "awsui_global-tools_7nfqu_1w5ew_224",
-  "tools-open": "awsui_tools-open_7nfqu_1w5ew_262",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1w5ew_276",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1w5ew_283",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1w5ew_296",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1w5ew_306",
-  "notifications-container": "awsui_notifications-container_7nfqu_1w5ew_312",
-  "notifications-background": "awsui_notifications-background_7nfqu_1w5ew_316",
-  "main-landmark": "awsui_main-landmark_7nfqu_1w5ew_327",
-  "main": "awsui_main_7nfqu_1w5ew_327",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1w5ew_336",
-  "content-header": "awsui_content-header_7nfqu_1w5ew_346",
-  "content": "awsui_content_7nfqu_1w5ew_346",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1w5ew_356",
-  "hidden": "awsui_hidden_7nfqu_1w5ew_361"
+  "root": "awsui_root_7nfqu_1skxc_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1skxc_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1skxc_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1skxc_217",
+  "navigation": "awsui_navigation_7nfqu_1skxc_222",
+  "tools": "awsui_tools_7nfqu_1skxc_223",
+  "global-tools": "awsui_global-tools_7nfqu_1skxc_224",
+  "tools-open": "awsui_tools-open_7nfqu_1skxc_262",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1skxc_276",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1skxc_283",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1skxc_296",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1skxc_306",
+  "notifications-container": "awsui_notifications-container_7nfqu_1skxc_313",
+  "notifications-background": "awsui_notifications-background_7nfqu_1skxc_317",
+  "main-landmark": "awsui_main-landmark_7nfqu_1skxc_328",
+  "main": "awsui_main_7nfqu_1skxc_328",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1skxc_337",
+  "content-header": "awsui_content-header_7nfqu_1skxc_347",
+  "content": "awsui_content_7nfqu_1skxc_347",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1skxc_357",
+  "hidden": "awsui_hidden_7nfqu_1skxc_362",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_1skxc_366",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_1skxc_366"
 };