@cloudscape-design/components 3.0.0

package/app-layout/toggles/styles.scoped.css

@@ -0,0 +1,164 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_close-button_16w0h_1chv9_93:not(#\9) {
+  position: absolute;
+  outline: none;
+  right: 16px;
+  right: var(--space-m-17eucw, 16px);
+  top: 15px;
+  top: var(--size-vertical-panel-icon-offset-ti40n4, 15px);
+  z-index: 1;
+}
+
+.awsui_circular-toggle_16w0h_1chv9_101:not(#\9) {
+  cursor: pointer;
+  border-radius: 50%;
+  border: none;
+  width: 40px;
+  width: var(--space-layout-toggle-diameter-hzvqtj, 40px);
+  height: 40px;
+  height: var(--space-layout-toggle-diameter-hzvqtj, 40px);
+  padding: 0 12px;
+  padding: 0 var(--space-s-hv8c1d, 12px);
+  background: #192534;
+  background: var(--color-background-layout-toggle-default-f9hnkv, #192534);
+  color: #ffffff;
+  color: var(--color-text-layout-toggle-20sb9r, #ffffff);
+  box-shadow: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);
+  box-shadow: var(--shadow-panel-toggle-3fk0ch, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+}
+.awsui_circular-toggle_16w0h_1chv9_101:not(#\9):focus {
+  outline: none;
+}
+.awsui_circular-toggle_16w0h_1chv9_101[data-awsui-focus-visible=true]:not(#\9):focus {
+  position: relative;
+}
+.awsui_circular-toggle_16w0h_1chv9_101[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(3px - 1px);
+}
+.awsui_circular-toggle_16w0h_1chv9_101[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 3px);
+  top: calc(-1 * 3px);
+  width: calc(100% + 2 * 3px);
+  height: calc(100% + 2 * 3px);
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_circular-toggle_16w0h_1chv9_101:not(#\9):hover {
+  background: #354150;
+  background: var(--color-background-layout-toggle-hover-gi0e0b, #354150);
+}
+.awsui_circular-toggle_16w0h_1chv9_101:not(#\9):active {
+  background: #354150;
+  background: var(--color-background-layout-toggle-active-d15dki, #354150);
+}
+.awsui_circular-toggle-selected_16w0h_1chv9_139:not(#\9) {
+  background: #0972d3;
+  background: var(--color-background-layout-toggle-selected-default-e1giv3, #0972d3);
+  color: #ffffff;
+  color: var(--color-text-layout-toggle-selected-tzwifo, #ffffff);
+}
+.awsui_circular-toggle-selected_16w0h_1chv9_139:not(#\9):hover {
+  background: #065299;
+  background: var(--color-background-layout-toggle-selected-hover-mes33s, #065299);
+}
+.awsui_circular-toggle-selected_16w0h_1chv9_139:not(#\9):active {
+  background: #0972d3;
+  background: var(--color-background-layout-toggle-selected-active-9w7pk3, #0972d3);
+}

package/app-layout/toggles/styles.selectors.js

@@ -0,0 +1,9 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "close-button": "awsui_close-button_16w0h_1chv9_93",
+  "circular-toggle": "awsui_circular-toggle_16w0h_1chv9_101",
+  "circular-toggle-selected": "awsui_circular-toggle-selected_16w0h_1chv9_139"
+};
+  

package/app-layout/tools-and-split-panel.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DesktopDrawerProps } from './drawer';
+import { AppLayoutProps } from './interfaces';
+import useContentHeight from './utils/use-content-height';
+import { SplitPanelContextProps } from '../internal/context/split-panel-context';
+interface ToolsAndSplitPanelProps {
+    toolsHide: boolean;
+    toolsOpen: boolean;
+    isHidden: DesktopDrawerProps['isHidden'];
+    splitPanelOpen: boolean;
+    drawerWidth: number;
+    toolsWidth: number;
+    splitPanelReportedSize: number;
+    closedDrawerWidth: number;
+    headerHeight: DesktopDrawerProps['topOffset'];
+    footerHeight: DesktopDrawerProps['bottomOffset'];
+    panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];
+    contentHeightStyle: ReturnType<typeof useContentHeight>['contentHeightStyle'];
+    tools: React.ReactNode;
+    splitPanel?: React.ReactNode;
+    splitPanelContext: SplitPanelContextProps;
+    ariaLabels: AppLayoutProps['ariaLabels'];
+    disableContentPaddings: AppLayoutProps['disableContentPaddings'];
+    isMobile: boolean;
+    isMotionEnabled: boolean;
+    onToolsToggle: DesktopDrawerProps['onToggle'];
+    toggleRefs: DesktopDrawerProps['toggleRefs'];
+}
+export declare function ToolsAndSplitPanel({ ariaLabels, drawerWidth, footerHeight, headerHeight, isHidden, isMobile, onToolsToggle, panelHeightStyle, splitPanel, splitPanelContext, toggleRefs, tools, toolsHide, toolsOpen, toolsWidth, splitPanelOpen, }: ToolsAndSplitPanelProps): JSX.Element;
+export {};
+//# sourceMappingURL=tools-and-split-panel.d.ts.map

package/app-layout/tools-and-split-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools-and-split-panel.d.ts","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAU,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,UAAU,uBAAuB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAEzC,cAAc,EAAE,OAAO,CAAC;IAExB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAE1B,YAAY,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC9C,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,gBAAgB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC1E,kBAAkB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IAE9E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iBAAiB,EAAE,sBAAsB,CAAC;IAE1C,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAEzC,sBAAsB,EAAE,cAAc,CAAC,wBAAwB,CAAC,CAAC;IACjE,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IAEzB,aAAa,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAE9C,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;CAC9C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,cAAc,GACf,EAAE,uBAAuB,eA8CzB"}

package/app-layout/tools-and-split-panel.js

@@ -0,0 +1,25 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import { Drawer } from './drawer';
+import { SplitPanelWrapper } from './split-panel-wrapper';
+import styles from './styles.css.js';
+import testutilStyles from './test-classes/styles.css.js';
+export function ToolsAndSplitPanel(_a) {
+    var _b;
+    var ariaLabels = _a.ariaLabels, drawerWidth = _a.drawerWidth, footerHeight = _a.footerHeight, headerHeight = _a.headerHeight, isHidden = _a.isHidden, isMobile = _a.isMobile, onToolsToggle = _a.onToolsToggle, panelHeightStyle = _a.panelHeightStyle, splitPanel = _a.splitPanel, splitPanelContext = _a.splitPanelContext, toggleRefs = _a.toggleRefs, tools = _a.tools, toolsHide = _a.toolsHide, toolsOpen = _a.toolsOpen, toolsWidth = _a.toolsWidth, splitPanelOpen = _a.splitPanelOpen;
+    var splitPanelVisible = splitPanelOpen && Boolean(splitPanel);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                width: drawerWidth
+            } },
+            React.createElement("div", { className: clsx(styles['panel-wrapper-outer'], (_b = {},
+                    _b[styles.mobile] = isMobile,
+                    _b[styles.open] = toolsOpen,
+                    _b)), style: __assign({}, (isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle)) },
+                splitPanel && React.createElement(SplitPanelWrapper, { context: splitPanelContext }, splitPanel),
+                !toolsHide && (React.createElement(Drawer, { type: "tools", isMobile: isMobile, width: toolsWidth, isOpen: toolsOpen, onToggle: onToolsToggle, toggleRefs: toggleRefs, isHidden: isHidden, externalizedToggle: Boolean(splitPanel), contentClassName: clsx(styles.tools, testutilStyles.tools), closeClassName: clsx(styles['tools-close'], testutilStyles['tools-close']), toggleClassName: clsx(styles['tools-toggle'], testutilStyles['tools-toggle']), topOffset: headerHeight, bottomOffset: footerHeight, ariaLabels: ariaLabels, extendRight: 0, hasDividerWithSplitPanel: splitPanelVisible }, tools))))));
+}
+//# sourceMappingURL=tools-and-split-panel.js.map

package/app-layout/tools-and-split-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools-and-split-panel.js","sourceRoot":"","sources":["../../../src/app-layout/tools-and-split-panel.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,MAAM,EAAE,MAAM,UAAU,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAmC1D,MAAM,UAAU,kBAAkB,CAAC,EAiBT;;QAhBxB,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,iBAAiB,uBAAA,EACjB,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,SAAS,eAAA,EACT,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,cAAc,oBAAA;IAEd,IAAM,iBAAiB,GAAG,cAAc,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhE,OAAO,CACL;QACE,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,WAAW;aACnB;YAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;oBAC3C,GAAC,MAAM,CAAC,MAAM,IAAG,QAAQ;oBACzB,GAAC,MAAM,CAAC,IAAI,IAAG,SAAS;wBACxB,EACF,KAAK,eACA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAG/E,UAAU,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAE,iBAAiB,IAAG,UAAU,CAAqB;gBAC7F,CAAC,SAAS,IAAI,CACb,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,OAAO,CAAC,UAAU,CAAC,EACvC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAC1D,cAAc,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC,EAC1E,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,EAC7E,SAAS,EAAE,YAAY,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,CAAC,EACd,wBAAwB,EAAE,iBAAiB,IAE1C,KAAK,CACC,CACV,CACG,CACF,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { DesktopDrawerProps, Drawer } from './drawer';\nimport { AppLayoutProps } from './interfaces';\nimport { SplitPanelWrapper } from './split-panel-wrapper';\nimport useContentHeight from './utils/use-content-height';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport { SplitPanelContextProps } from '../internal/context/split-panel-context';\n\ninterface ToolsAndSplitPanelProps {\n  toolsHide: boolean;\n  toolsOpen: boolean;\n  isHidden: DesktopDrawerProps['isHidden'];\n\n  splitPanelOpen: boolean;\n\n  drawerWidth: number;\n  toolsWidth: number;\n  splitPanelReportedSize: number;\n  closedDrawerWidth: number;\n\n  headerHeight: DesktopDrawerProps['topOffset'];\n  footerHeight: DesktopDrawerProps['bottomOffset'];\n  panelHeightStyle: ReturnType<typeof useContentHeight>['panelHeightStyle'];\n  contentHeightStyle: ReturnType<typeof useContentHeight>['contentHeightStyle'];\n\n  tools: React.ReactNode;\n  splitPanel?: React.ReactNode;\n  splitPanelContext: SplitPanelContextProps;\n\n  ariaLabels: AppLayoutProps['ariaLabels'];\n\n  disableContentPaddings: AppLayoutProps['disableContentPaddings'];\n  isMobile: boolean;\n  isMotionEnabled: boolean;\n\n  onToolsToggle: DesktopDrawerProps['onToggle'];\n\n  toggleRefs: DesktopDrawerProps['toggleRefs'];\n}\n\nexport function ToolsAndSplitPanel({\n  ariaLabels,\n  drawerWidth,\n  footerHeight,\n  headerHeight,\n  isHidden,\n  isMobile,\n  onToolsToggle,\n  panelHeightStyle,\n  splitPanel,\n  splitPanelContext,\n  toggleRefs,\n  tools,\n  toolsHide,\n  toolsOpen,\n  toolsWidth,\n  splitPanelOpen,\n}: ToolsAndSplitPanelProps) {\n  const splitPanelVisible = splitPanelOpen && Boolean(splitPanel);\n\n  return (\n    <>\n      <div\n        style={{\n          width: drawerWidth,\n        }}\n      >\n        <div\n          className={clsx(styles['panel-wrapper-outer'], {\n            [styles.mobile]: isMobile,\n            [styles.open]: toolsOpen,\n          })}\n          style={{\n            ...(isMobile ? { top: headerHeight, bottom: footerHeight } : panelHeightStyle),\n          }}\n        >\n          {splitPanel && <SplitPanelWrapper context={splitPanelContext}>{splitPanel}</SplitPanelWrapper>}\n          {!toolsHide && (\n            <Drawer\n              type=\"tools\"\n              isMobile={isMobile}\n              width={toolsWidth}\n              isOpen={toolsOpen}\n              onToggle={onToolsToggle}\n              toggleRefs={toggleRefs}\n              isHidden={isHidden}\n              externalizedToggle={Boolean(splitPanel)}\n              contentClassName={clsx(styles.tools, testutilStyles.tools)}\n              closeClassName={clsx(styles['tools-close'], testutilStyles['tools-close'])}\n              toggleClassName={clsx(styles['tools-toggle'], testutilStyles['tools-toggle'])}\n              topOffset={headerHeight}\n              bottomOffset={footerHeight}\n              ariaLabels={ariaLabels}\n              extendRight={0}\n              hasDividerWithSplitPanel={splitPanelVisible}\n            >\n              {tools}\n            </Drawer>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"]}

package/app-layout/utils/use-content-height.d.ts

@@ -0,0 +1,11 @@
+export default function useContentHeight(headerSelector: string, footerSelector: string, disableBodyScroll?: boolean): {
+    headerHeight: number;
+    footerHeight: number;
+    contentHeightStyle: {
+        [x: string]: string;
+    };
+    panelHeightStyle: {
+        height: string;
+    };
+};
+//# sourceMappingURL=use-content-height.d.ts.map

package/app-layout/utils/use-content-height.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-content-height.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAc,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,iBAAiB,CAAC,EAAE,OAAO;;;;;;;;;EAyBnH"}

package/app-layout/utils/use-content-height.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useState } from 'react';
+import { useObservedElement } from './use-observed-element';
+export default function useContentHeight(headerSelector, footerSelector, disableBodyScroll) {
+    var _a;
+    var headerHeight = useObservedElement(headerSelector);
+    var footerHeight = useObservedElement(footerSelector);
+    var _b = useState(0), headerFooterHeight = _b[0], setHeaderFooterHeight = _b[1];
+    // Delay applying changes in header/footer height, as applying them immediately can cause
+    // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects
+    // further up the tree, therefore blocking notifications to prevent loops
+    useEffect(function () {
+        var id = requestAnimationFrame(function () { return setHeaderFooterHeight(headerHeight + footerHeight); });
+        return function () { return cancelAnimationFrame(id); };
+    }, [headerHeight, footerHeight]);
+    var heightStyleValue = "calc(100vh - ".concat(headerFooterHeight, "px)");
+    return {
+        headerHeight: headerHeight,
+        footerHeight: footerHeight,
+        contentHeightStyle: (_a = {},
+            _a[disableBodyScroll ? 'height' : 'minHeight'] = heightStyleValue,
+            _a),
+        panelHeightStyle: {
+            height: heightStyleValue
+        }
+    };
+}
+//# sourceMappingURL=use-content-height.js.map

package/app-layout/utils/use-content-height.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-content-height.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-height.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,cAAsB,EAAE,cAAsB,EAAE,iBAA2B;;IAClH,IAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,IAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAA,KAA8C,QAAQ,CAAC,CAAC,CAAC,EAAxD,kBAAkB,QAAA,EAAE,qBAAqB,QAAe,CAAC;IAEhE,yFAAyF;IACzF,+FAA+F;IAC/F,yEAAyE;IACzE,SAAS,CAAC;QACR,IAAM,EAAE,GAAG,qBAAqB,CAAC,cAAM,OAAA,qBAAqB,CAAC,YAAY,GAAG,YAAY,CAAC,EAAlD,CAAkD,CAAC,CAAC;QAC3F,OAAO,cAAM,OAAA,oBAAoB,CAAC,EAAE,CAAC,EAAxB,CAAwB,CAAC;IACxC,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,IAAM,gBAAgB,GAAG,uBAAgB,kBAAkB,QAAK,CAAC;IAEjE,OAAO;QACL,YAAY,cAAA;QACZ,YAAY,cAAA;QACZ,kBAAkB;YAChB,GAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,IAAG,gBAAgB;eAC/D;QACD,gBAAgB,EAAE;YAChB,MAAM,EAAE,gBAAgB;SACzB;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\nimport { useObservedElement } from './use-observed-element';\n\nexport default function useContentHeight(headerSelector: string, footerSelector: string, disableBodyScroll?: boolean) {\n  const headerHeight = useObservedElement(headerSelector);\n  const footerHeight = useObservedElement(footerSelector);\n  const [headerFooterHeight, setHeaderFooterHeight] = useState(0);\n\n  // Delay applying changes in header/footer height, as applying them immediately can cause\n  // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects\n  // further up the tree, therefore blocking notifications to prevent loops\n  useEffect(() => {\n    const id = requestAnimationFrame(() => setHeaderFooterHeight(headerHeight + footerHeight));\n    return () => cancelAnimationFrame(id);\n  }, [headerHeight, footerHeight]);\n\n  const heightStyleValue = `calc(100vh - ${headerFooterHeight}px)`;\n\n  return {\n    headerHeight,\n    footerHeight,\n    contentHeightStyle: {\n      [disableBodyScroll ? 'height' : 'minHeight']: heightStyleValue,\n    },\n    panelHeightStyle: {\n      height: heightStyleValue,\n    },\n  };\n}\n"]}

package/app-layout/utils/use-content-width.d.ts

@@ -0,0 +1,5 @@
+export default function useAppLayoutOffsets(element: HTMLDivElement | null): {
+    left: number;
+    right: number;
+};
+//# sourceMappingURL=use-content-width.d.ts.map

package/app-layout/utils/use-content-width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-content-width.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-width.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAsB3G"}

package/app-layout/utils/use-content-width.js

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect, useState } from 'react';
+import { useResizeObserver } from '../../internal/hooks/container-queries';
+export default function useAppLayoutOffsets(element) {
+    var _a = useState({ left: 0, right: 0 }), offsets = _a[0], setOffsets = _a[1];
+    var updatePosition = useCallback(function () {
+        if (!element) {
+            return;
+        }
+        var _a = element.getBoundingClientRect(), left = _a.left, right = _a.right;
+        var bodyWidth = document.body.clientWidth;
+        setOffsets({ left: left, right: bodyWidth - right });
+    }, [element]);
+    useEffect(function () {
+        window.addEventListener('resize', updatePosition);
+        return function () { return window.removeEventListener('resize', updatePosition); };
+    }, [updatePosition]);
+    var getElement = useCallback(function () { return element; }, [element]);
+    useResizeObserver(getElement, updatePosition);
+    return offsets;
+}
+//# sourceMappingURL=use-content-width.js.map

package/app-layout/utils/use-content-width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-content-width.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-content-width.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,OAA8B;IAClE,IAAA,KAAwB,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAtD,OAAO,QAAA,EAAE,UAAU,QAAmC,CAAC;IAE9D,IAAM,cAAc,GAAG,WAAW,CAAC;QACjC,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QACK,IAAA,KAAkB,OAAO,CAAC,qBAAqB,EAAE,EAA/C,IAAI,UAAA,EAAE,KAAK,WAAoC,CAAC;QACxD,IAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;QAE5C,UAAU,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAClD,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,EAApD,CAAoD,CAAC;IACpE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,IAAM,UAAU,GAAG,WAAW,CAAC,cAAM,OAAA,OAAO,EAAP,CAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,iBAAiB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IAE9C,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect, useState } from 'react';\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\n\nexport default function useAppLayoutOffsets(element: HTMLDivElement | null): { left: number; right: number } {\n  const [offsets, setOffsets] = useState({ left: 0, right: 0 });\n\n  const updatePosition = useCallback(() => {\n    if (!element) {\n      return;\n    }\n    const { left, right } = element.getBoundingClientRect();\n    const bodyWidth = document.body.clientWidth;\n\n    setOffsets({ left, right: bodyWidth - right });\n  }, [element]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updatePosition);\n    return () => window.removeEventListener('resize', updatePosition);\n  }, [updatePosition]);\n\n  const getElement = useCallback(() => element, [element]);\n  useResizeObserver(getElement, updatePosition);\n\n  return offsets;\n}\n"]}

package/app-layout/utils/use-focus-control.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from '../../button/interfaces';
+export declare function useFocusControl(isOpen?: boolean): {
+    toggle: import("react").RefObject<ButtonProps.Ref>;
+    close: import("react").RefObject<ButtonProps.Ref>;
+};
+//# sourceMappingURL=use-focus-control.d.ts.map

package/app-layout/utils/use-focus-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,wBAAgB,eAAe,CAAC,MAAM,CAAC,EAAE,OAAO;;;EAa/C"}

package/app-layout/utils/use-focus-control.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useLayoutEffect, useRef } from 'react';
+export function useFocusControl(isOpen) {
+    var toggleRef = useRef(null);
+    var closeRef = useRef(null);
+    useLayoutEffect(function () {
+        var _a, _b;
+        if (isOpen) {
+            (_a = closeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = toggleRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [isOpen]);
+    return { toggle: toggleRef, close: closeRef };
+}
+//# sourceMappingURL=use-focus-control.js.map

package/app-layout/utils/use-focus-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGhD,MAAM,UAAU,eAAe,CAAC,MAAgB;IAC9C,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAE/C,eAAe,CAAC;;QACd,IAAI,MAAM,EAAE;YACV,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC3B;aAAM;YACL,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAChD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useLayoutEffect, useRef } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport function useFocusControl(isOpen?: boolean) {\n  const toggleRef = useRef<ButtonProps.Ref>(null);\n  const closeRef = useRef<ButtonProps.Ref>(null);\n\n  useLayoutEffect(() => {\n    if (isOpen) {\n      closeRef.current?.focus();\n    } else {\n      toggleRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  return { toggle: toggleRef, close: closeRef };\n}\n"]}

package/app-layout/utils/use-observed-element.d.ts

@@ -0,0 +1,2 @@
+export declare function useObservedElement(selectorOrRef: string | React.MutableRefObject<HTMLElement> | (() => HTMLElement | null) | undefined): number;
+//# sourceMappingURL=use-observed-element.d.ts.map

package/app-layout/utils/use-observed-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-observed-element.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-observed-element.ts"],"names":[],"mappings":"AAKA,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,UAiBrG"}

package/app-layout/utils/use-observed-element.js

@@ -0,0 +1,22 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useResizeObserver } from '../../internal/hooks/container-queries';
+import { useCallback, useState } from 'react';
+export function useObservedElement(selectorOrRef) {
+    var getElement = useCallback(function () {
+        var _a, _b;
+        if (typeof selectorOrRef === 'string') {
+            return document.querySelector(selectorOrRef);
+        }
+        else if (typeof selectorOrRef === 'function') {
+            return (_a = selectorOrRef()) !== null && _a !== void 0 ? _a : null;
+        }
+        else {
+            return (_b = selectorOrRef === null || selectorOrRef === void 0 ? void 0 : selectorOrRef.current) !== null && _b !== void 0 ? _b : null;
+        }
+    }, [selectorOrRef]);
+    var _a = useState(0), height = _a[0], setHeight = _a[1];
+    useResizeObserver(getElement, function (entry) { return setHeight(entry.borderBoxHeight); });
+    return height;
+}
+//# sourceMappingURL=use-observed-element.js.map

package/app-layout/utils/use-observed-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-observed-element.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-observed-element.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,UAAU,kBAAkB,CAChC,aAAoG;IAEpG,IAAM,UAAU,GAAG,WAAW,CAAC;;QAC7B,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE;YACrC,OAAO,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;SAC9C;aAAM,IAAI,OAAO,aAAa,KAAK,UAAU,EAAE;YAC9C,OAAO,MAAA,aAAa,EAAE,mCAAI,IAAI,CAAC;SAChC;aAAM;YACL,OAAO,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,mCAAI,IAAI,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEd,IAAA,KAAsB,QAAQ,CAAC,CAAC,CAAC,EAAhC,MAAM,QAAA,EAAE,SAAS,QAAe,CAAC;IAExC,iBAAiB,CAAC,UAAU,EAAE,UAAA,KAAK,IAAI,OAAA,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,EAAhC,CAAgC,CAAC,CAAC;IAEzE,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\nimport { useCallback, useState } from 'react';\n\nexport function useObservedElement(\n  selectorOrRef: string | React.MutableRefObject<HTMLElement> | (() => HTMLElement | null) | undefined\n) {\n  const getElement = useCallback(() => {\n    if (typeof selectorOrRef === 'string') {\n      return document.querySelector(selectorOrRef);\n    } else if (typeof selectorOrRef === 'function') {\n      return selectorOrRef() ?? null;\n    } else {\n      return selectorOrRef?.current ?? null;\n    }\n  }, [selectorOrRef]);\n\n  const [height, setHeight] = useState(0);\n\n  useResizeObserver(getElement, entry => setHeight(entry.borderBoxHeight));\n\n  return height;\n}\n"]}

package/app-layout/utils/use-sticky-position.d.ts

@@ -0,0 +1,2 @@
+export declare function useStickyPosition(topOffset?: number): readonly [((value: any) => void) | null, JSX.Element];
+//# sourceMappingURL=use-sticky-position.d.ts.map

package/app-layout/utils/use-sticky-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-position.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-sticky-position.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,iBAAiB,CAAC,SAAS,SAAI,yDAwC9C"}

package/app-layout/utils/use-sticky-position.js

@@ -0,0 +1,54 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import { useContainerQuery } from '../../internal/hooks/container-queries';
+import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
+function getScrollableContainers(element) {
+    var node = element;
+    while ((node = node.parentElement) && node !== document.body) {
+        if (['scroll', 'auto'].indexOf(getComputedStyle(node).overflow) > -1) {
+            return node;
+        }
+    }
+    return null;
+}
+export function useStickyPosition(topOffset) {
+    if (topOffset === void 0) { topOffset = 0; }
+    var _a = useContainerQuery(function (rect) { return rect.height; }), stickyHeight = _a[0], stickyMeasureRef = _a[1];
+    var stickyRefObject = useRef(null);
+    var stickyRef = useMergeRefs(stickyMeasureRef, stickyRefObject);
+    var _b = useContainerQuery(function (rect) { return rect.width; }), stickyWidth = _b[0], placeholderMeasureRef = _b[1];
+    var placeholderRefObject = useRef(null);
+    var placeholderRef = useMergeRefs(placeholderMeasureRef, placeholderRefObject);
+    var placeholder = React.createElement("div", { ref: placeholderRef });
+    useEffect(function () {
+        if (!stickyRefObject.current || !placeholderRefObject.current) {
+            return;
+        }
+        var stickyElement = stickyRefObject.current;
+        var placeholder = placeholderRefObject.current;
+        var scrollParent = getScrollableContainers(stickyElement);
+        var handler = function () {
+            var stickyBox = stickyElement.getBoundingClientRect();
+            var containerBox = scrollParent ? scrollParent.getBoundingClientRect() : { top: 0 };
+            if (stickyBox.top - containerBox.top <= topOffset) {
+                stickyElement.style.position = 'fixed';
+                stickyElement.style.width = "".concat(stickyWidth, "px");
+                stickyElement.style.top = "".concat(topOffset, "px");
+                placeholder.style.height = "".concat(stickyHeight, "px");
+            }
+            else {
+                stickyElement.style.position = '';
+                stickyElement.style.width = "";
+                stickyElement.style.top = "";
+                placeholder.style.height = "";
+            }
+        };
+        var eventTarget = scrollParent || window;
+        eventTarget.addEventListener('scroll', handler);
+        handler();
+        return function () { return eventTarget.removeEventListener('scroll', handler); };
+    }, [topOffset, stickyWidth, stickyHeight, stickyRefObject, placeholderRefObject]);
+    return [stickyRef, placeholder];
+}
+//# sourceMappingURL=use-sticky-position.js.map

package/app-layout/utils/use-sticky-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-position.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-sticky-position.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport { useContainerQuery } from '../../internal/hooks/container-queries';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\n\nfunction getScrollableContainers(element: HTMLElement) {\n  let node: HTMLElement | null = element;\n\n  while ((node = node.parentElement) && node !== document.body) {\n    if (['scroll', 'auto'].indexOf(getComputedStyle(node).overflow) > -1) {\n      return node;\n    }\n  }\n  return null;\n}\n\nexport function useStickyPosition(topOffset = 0) {\n  const [stickyHeight, stickyMeasureRef] = useContainerQuery(rect => rect.height);\n  const stickyRefObject = useRef<HTMLDivElement>(null);\n  const stickyRef = useMergeRefs(stickyMeasureRef, stickyRefObject);\n\n  const [stickyWidth, placeholderMeasureRef] = useContainerQuery(rect => rect.width);\n  const placeholderRefObject = useRef<HTMLDivElement>(null);\n  const placeholderRef = useMergeRefs(placeholderMeasureRef, placeholderRefObject);\n\n  const placeholder = <div ref={placeholderRef} />;\n\n  useEffect(() => {\n    if (!stickyRefObject.current || !placeholderRefObject.current) {\n      return;\n    }\n    const stickyElement = stickyRefObject.current;\n    const placeholder = placeholderRefObject.current;\n    const scrollParent = getScrollableContainers(stickyElement);\n    const handler = () => {\n      const stickyBox = stickyElement.getBoundingClientRect();\n      const containerBox = scrollParent ? scrollParent.getBoundingClientRect() : { top: 0 };\n      if (stickyBox.top - containerBox.top <= topOffset) {\n        stickyElement.style.position = 'fixed';\n        stickyElement.style.width = `${stickyWidth}px`;\n        stickyElement.style.top = `${topOffset}px`;\n        placeholder.style.height = `${stickyHeight}px`;\n      } else {\n        stickyElement.style.position = '';\n        stickyElement.style.width = ``;\n        stickyElement.style.top = ``;\n        placeholder.style.height = ``;\n      }\n    };\n    const eventTarget = scrollParent || window;\n    eventTarget.addEventListener('scroll', handler);\n    handler();\n    return () => eventTarget.removeEventListener('scroll', handler);\n  }, [topOffset, stickyWidth, stickyHeight, stickyRefObject, placeholderRefObject]);\n\n  return [stickyRef, placeholder] as const;\n}\n"]}

package/app-layout/utils/use-window-width.d.ts

@@ -0,0 +1,2 @@
+export default function useWindowWidth(): number;
+//# sourceMappingURL=use-window-width.d.ts.map

package/app-layout/utils/use-window-width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-window-width.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-window-width.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,cAAc,WAQrC"}

package/app-layout/utils/use-window-width.js

@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useState } from 'react';
+export default function useWindowWidth() {
+    var _a = useState(function () { return (typeof window !== 'undefined' ? window.innerWidth : 0); }), width = _a[0], setWidth = _a[1];
+    useEffect(function () {
+        var handler = function () { return setWidth(window.innerWidth); };
+        window.addEventListener('resize', handler);
+        return function () { return window.removeEventListener('resize', handler); };
+    }, []);
+    return width;
+}
+//# sourceMappingURL=use-window-width.js.map

package/app-layout/utils/use-window-width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-window-width.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-window-width.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,cAAc;IAC9B,IAAA,KAAoB,QAAQ,CAAC,cAAM,OAAA,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAAvD,CAAuD,CAAC,EAA1F,KAAK,QAAA,EAAE,QAAQ,QAA2E,CAAC;IAClG,SAAS,CAAC;QACR,IAAM,OAAO,GAAG,cAAM,OAAA,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,EAA3B,CAA2B,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,EAA7C,CAA6C,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\n\nexport default function useWindowWidth() {\n  const [width, setWidth] = useState(() => (typeof window !== 'undefined' ? window.innerWidth : 0));\n  useEffect(() => {\n    const handler = () => setWidth(window.innerWidth);\n    window.addEventListener('resize', handler);\n    return () => window.removeEventListener('resize', handler);\n  }, []);\n  return width;\n}\n"]}

package/app-layout/visual-refresh/app-bar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The CSS class 'awsui-context-content-header' needs to be added to the root element so
+ * that the design tokens used are overridden with the appropriate values.
+ */
+export default function AppBar(): JSX.Element | null;
+//# sourceMappingURL=app-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBAyF7B"}

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

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+import clsx from 'clsx';
+import { AppLayoutContext } from './context';
+import { InternalButton } from '../../button/internal';
+import styles from './styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+import { useFocusControl } from '../utils/use-focus-control';
+/**
+ * The CSS class 'awsui-context-content-header' needs to be added to the root element so
+ * that the design tokens used are overridden with the appropriate values.
+ */
+export default function AppBar() {
+    var _a, _b, _c, _d;
+    var _e, _f, _g;
+    var _h = useContext(AppLayoutContext), ariaLabels = _h.ariaLabels, breadcrumbs = _h.breadcrumbs, contentHeader = _h.contentHeader, contentType = _h.contentType, dynamicOverlapHeight = _h.dynamicOverlapHeight, handleNavigationClick = _h.handleNavigationClick, handleToolsClick = _h.handleToolsClick, hasNotificationsContent = _h.hasNotificationsContent, isMobile = _h.isMobile, navigationHide = _h.navigationHide, isNavigationOpen = _h.isNavigationOpen, isToolsOpen = _h.isToolsOpen, toolsHide = _h.toolsHide, isAnyPanelOpen = _h.isAnyPanelOpen;
+    var focusRefsNav = useFocusControl(isNavigationOpen);
+    var focusRefsTools = useFocusControl(isToolsOpen);
+    if (navigationHide && !breadcrumbs && toolsHide) {
+        return null;
+    }
+    return (React.createElement("section", { "aria-hidden": !isMobile && !breadcrumbs ? true : undefined, className: clsx(styles.appbar, (_a = {},
+            _a[styles['has-breadcrumbs']] = breadcrumbs,
+            _a[styles.unfocusable] = isMobile && isAnyPanelOpen,
+            _a[testutilStyles['mobile-bar']] = isMobile,
+            _a), 'awsui-context-content-header') },
+        !navigationHide && isMobile && (React.createElement("nav", { className: clsx(styles['appbar-nav'], (_b = {}, _b[testutilStyles['drawer-closed']] = !isNavigationOpen, _b)), "aria-hidden": isNavigationOpen },
+            React.createElement(InternalButton, { ariaLabel: (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _e !== void 0 ? _e : undefined, ariaExpanded: isNavigationOpen, iconName: "menu", formAction: "none", onClick: function () { return handleNavigationClick(true); }, variant: "icon", className: testutilStyles['navigation-toggle'], ref: focusRefsNav.toggle, disabled: isAnyPanelOpen }))),
+        breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, styles["content-type-".concat(contentType)], testutilStyles.breadcrumbs, (_c = {},
+                _c[styles['has-dynamic-overlap-height']] = dynamicOverlapHeight > 0,
+                _c[styles['has-header']] = contentHeader,
+                _c[styles['has-notifications-content']] = hasNotificationsContent,
+                _c)) }, breadcrumbs)),
+        !toolsHide && isMobile && (React.createElement("aside", { className: clsx(styles['appbar-tools'], (_d = {}, _d[testutilStyles['drawer-closed']] = !isToolsOpen, _d)), "aria-hidden": isToolsOpen, "aria-label": (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _f !== void 0 ? _f : undefined },
+            React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: isAnyPanelOpen, ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _g !== void 0 ? _g : undefined, iconName: "status-info", formAction: "none", onClick: function () { return handleToolsClick(true); }, variant: "icon", ref: focusRefsTools.toggle })))));
+}
+//# sourceMappingURL=app-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.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, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useContext(AppLayoutContext);\n  const focusRefsNav = useFocusControl(isNavigationOpen);\n  const focusRefsTools = useFocusControl(isToolsOpen);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}

package/app-layout/visual-refresh/background.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The CSS class 'awsui-context-content-header' needs to be added to the root element so
+ * that the design tokens used are overridden with the appropriate values.
+ */
+export default function Background(): JSX.Element;
+//# sourceMappingURL=background.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,gBAejC"}