@cloudscape-design/components 3.0.0

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface LayoutProps {
+    children: React.ReactNode;
+}
+/**
+ * The layoutElement ref will be used by the resize observers to calculate the offset from
+ * the top and bottom of the viewport based on the header and footer elements. This is to
+ * ensure the Layout component minimum height will fill 100% of the viewport less those
+ * cumulative heights.
+ */
+export default function Layout({ children }: LayoutProps): JSX.Element;
+export {};
+//# sourceMappingURL=layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAUlF,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,eAwHvD"}

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

@@ -0,0 +1,130 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useContext, useLayoutEffect, useState } from 'react';
+import clsx from 'clsx';
+import { AppLayoutContext } from './context';
+import { SplitPanelContext } from '../../internal/context/split-panel-context';
+import { useResizeObserver } from '../../internal/hooks/container-queries';
+import styles from './styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+import customCssProps from '../../internal/generated/custom-css-properties';
+/**
+ * The layoutElement ref will be used by the resize observers to calculate the offset from
+ * the top and bottom of the viewport based on the header and footer elements. This is to
+ * ensure the Layout component minimum height will fill 100% of the viewport less those
+ * cumulative heights.
+ */
+export default function Layout(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var children = _a.children;
+    var _h = useContext(AppLayoutContext), contentHeader = _h.contentHeader, contentType = _h.contentType, disableBodyScroll = _h.disableBodyScroll, disableContentHeaderOverlap = _h.disableContentHeaderOverlap, dynamicOverlapHeight = _h.dynamicOverlapHeight, footerSelector = _h.footerSelector, hasNotificationsContent = _h.hasNotificationsContent, headerSelector = _h.headerSelector, isNavigationOpen = _h.isNavigationOpen, isSplitPanelOpen = _h.isSplitPanelOpen, isToolsOpen = _h.isToolsOpen, layoutElement = _h.layoutElement, layoutWidth = _h.layoutWidth, mainOffsetLeft = _h.mainOffsetLeft, maxContentWidth = _h.maxContentWidth, minContentWidth = _h.minContentWidth, navigationHide = _h.navigationHide, notificationsHeight = _h.notificationsHeight, setOffsetBottom = _h.setOffsetBottom, splitPanel = _h.splitPanel, stickyNotifications = _h.stickyNotifications, toolsHide = _h.toolsHide;
+    var _j = useContext(SplitPanelContext), getSplitPanelHeader = _j.getHeader, splitPanelPosition = _j.position, splitPanelSize = _j.size;
+    var isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);
+    /**
+     * Query the DOM for the header and footer elements based on the selectors provided
+     * by the properties and pass the heights to the custom property definitions.
+     */
+    var _k = useState(0), headerHeight = _k[0], setHeaderHeight = _k[1];
+    var getHeader = useCallback(function () { return document.querySelector(headerSelector); }, [headerSelector]);
+    useResizeObserver(getHeader, function (entry) { return setHeaderHeight(entry.borderBoxHeight); });
+    var _l = useState(0), footerHeight = _l[0], setFooterHeight = _l[1];
+    var getFooter = useCallback(function () { return document.querySelector(footerSelector); }, [footerSelector]);
+    useResizeObserver(getFooter, function (entry) { return setFooterHeight(entry.borderBoxHeight); });
+    // Content gaps on the left and right are used with the minmax function in the CSS grid column definition
+    var hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);
+    var hasContentGapRight = getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanel, toolsHide);
+    /**
+     * Determine the offsetBottom value based on the presence of a footer element and
+     * the SplitPanel component. Ignore the SplitPanel if it is not in the bottom
+     * position. Use the size property if it is open and the header height if it is closed.
+     */
+    useLayoutEffect(function handleOffsetBottom() {
+        var offsetBottom = footerHeight;
+        if (splitPanel && splitPanelPosition === 'bottom') {
+            if (isSplitPanelOpen) {
+                offsetBottom += splitPanelSize;
+            }
+            else {
+                var splitPanelHeader = getSplitPanelHeader();
+                offsetBottom += splitPanelHeader ? splitPanelHeader.clientHeight : 0;
+            }
+        }
+        setOffsetBottom(offsetBottom);
+    }, [
+        footerHeight,
+        getSplitPanelHeader,
+        isSplitPanelOpen,
+        setOffsetBottom,
+        splitPanelPosition,
+        splitPanel,
+        splitPanelSize,
+    ]);
+    return (React.createElement("main", { className: clsx(styles.layout, styles["content-type-".concat(contentType)], styles["split-panel-position-".concat(splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom')], (_b = {},
+            _b[styles['disable-body-scroll']] = disableBodyScroll,
+            _b[styles['has-content-gap-left']] = hasContentGapLeft,
+            _b[styles['has-content-gap-right']] = hasContentGapRight,
+            _b[styles['has-max-content-width']] = maxContentWidth && maxContentWidth > 0,
+            _b[styles['has-split-panel']] = splitPanel,
+            _b[styles['has-sticky-notifications']] = stickyNotifications && hasNotificationsContent,
+            _b[styles['is-overlap-disabled']] = isOverlapDisabled,
+            _b), testutilStyles.root), ref: layoutElement, style: __assign(__assign(__assign(__assign((_c = {}, _c[customCssProps.headerHeight] = "".concat(headerHeight, "px"), _c[customCssProps.footerHeight] = "".concat(footerHeight, "px"), _c[customCssProps.layoutWidth] = "".concat(layoutWidth, "px"), _c[customCssProps.mainOffsetLeft] = "".concat(mainOffsetLeft, "px"), _c), (maxContentWidth && (_d = {}, _d[customCssProps.maxContentWidth] = "".concat(maxContentWidth, "px"), _d))), (minContentWidth && (_e = {}, _e[customCssProps.minContentWidth] = "".concat(minContentWidth, "px"), _e))), (_f = {}, _f[customCssProps.notificationsHeight] = "".concat(notificationsHeight, "px"), _f)), (!isOverlapDisabled &&
+            dynamicOverlapHeight > 0 && (_g = {}, _g[customCssProps.overlapHeight] = "".concat(dynamicOverlapHeight, "px"), _g))) }, children));
+}
+/**
+ * When the Navigation and Tools are present the grid definition has the center column
+ * touch the first and last columns with no gap. The forms with the circular buttons
+ * for Navigation and Tools have internal padding which creates the necessary
+ * horizontal space when the drawers are closed. The remaining conditions below
+ * determine the necessity of utilizing the content gap left property to create
+ * horizontal space between the center column and its adjacent siblings.
+ */
+function getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanel, toolsHide) {
+    var hasContentGapRight = false;
+    // Main is touching the edge of the Layout and needs a content gap
+    if (!splitPanel && toolsHide) {
+        hasContentGapRight = true;
+    }
+    // Main is touching the Tools drawer and needs a content gap
+    if ((!splitPanel || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {
+        hasContentGapRight = true;
+    }
+    // Main is touching the edge of the Layout and needs a content gap
+    if (splitPanel && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {
+        hasContentGapRight = true;
+    }
+    // Main is touching the Split Panel drawer and needs a content gap
+    if (splitPanel && isSplitPanelOpen && splitPanelPosition === 'side') {
+        hasContentGapRight = true;
+    }
+    return hasContentGapRight;
+}
+/**
+ * Additional function to determine whether or not a content gap is needed
+ * on the left (see the getContentGapRight function). The same render logic applies
+ * regarding the center column touching an adjacent sibling but the only
+ * component state that needs to be tracked is the Navigation.
+ */
+function getContentGapLeft(isNavigationOpen, navigationHide) {
+    return isNavigationOpen || navigationHide ? true : false;
+}
+/**
+ * Determine whether the overlap between the contentHeader and content slots should be disabled.
+ * The disableContentHeaderOverlap property is absolute and will always disable the overlap
+ * if it is set to true. If there is no contentHeader then the overlap should be disabled
+ * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a
+ * component in the content slot that needs to manually control the overlap height. Components
+ * such as the Table (full page variant), Wizard, ContentLayout use this property and will
+ * retain the overlap even if there is nothing rendered in the contentHeader slot.
+ */
+function getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap) {
+    var isOverlapDisabled = false;
+    if (disableContentHeaderOverlap) {
+        isOverlapDisabled = true;
+    }
+    else if (!contentHeader && dynamicOverlapHeight <= 0) {
+        isOverlapDisabled = true;
+    }
+    return isOverlapDisabled;
+}
+//# sourceMappingURL=layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/layout.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, { useCallback, useContext, useLayoutEffect, useState } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { SplitPanelContext } from '../../internal/context/split-panel-context';\nimport { useResizeObserver } from '../../internal/hooks/container-queries';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentHeaderOverlap,\n    dynamicOverlapHeight,\n    footerSelector,\n    hasNotificationsContent,\n    headerSelector,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    setOffsetBottom,\n    splitPanel,\n    stickyNotifications,\n    toolsHide,\n  } = useContext(AppLayoutContext);\n\n  const {\n    getHeader: getSplitPanelHeader,\n    position: splitPanelPosition,\n    size: splitPanelSize,\n  } = useContext(SplitPanelContext);\n\n  const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);\n\n  /**\n   * Query the DOM for the header and footer elements based on the selectors provided\n   * by the properties and pass the heights to the custom property definitions.\n   */\n  const [headerHeight, setHeaderHeight] = useState(0);\n  const getHeader = useCallback(() => document.querySelector(headerSelector), [headerSelector]);\n  useResizeObserver(getHeader, entry => setHeaderHeight(entry.borderBoxHeight));\n\n  const [footerHeight, setFooterHeight] = useState(0);\n  const getFooter = useCallback(() => document.querySelector(footerSelector), [footerSelector]);\n  useResizeObserver(getFooter, entry => setFooterHeight(entry.borderBoxHeight));\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);\n  const hasContentGapRight = getContentGapRight(\n    splitPanelPosition,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    toolsHide\n  );\n\n  /**\n   * Determine the offsetBottom value based on the presence of a footer element and\n   * the SplitPanel component. Ignore the SplitPanel if it is not in the bottom\n   * position. Use the size property if it is open and the header height if it is closed.\n   */\n  useLayoutEffect(\n    function handleOffsetBottom() {\n      let offsetBottom = footerHeight;\n\n      if (splitPanel && splitPanelPosition === 'bottom') {\n        if (isSplitPanelOpen) {\n          offsetBottom += splitPanelSize;\n        } else {\n          const splitPanelHeader = getSplitPanelHeader();\n          offsetBottom += splitPanelHeader ? splitPanelHeader.clientHeight : 0;\n        }\n      }\n\n      setOffsetBottom(offsetBottom);\n    },\n    [\n      footerHeight,\n      getSplitPanelHeader,\n      isSplitPanelOpen,\n      setOffsetBottom,\n      splitPanelPosition,\n      splitPanel,\n      splitPanelSize,\n    ]\n  );\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanel,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isOverlapDisabled,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n        ...(!isOverlapDisabled &&\n          dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/**\n * When the Navigation and Tools are present the grid definition has the center column\n * touch the first and last columns with no gap. The forms with the circular buttons\n * for Navigation and Tools have internal padding which creates the necessary\n * horizontal space when the drawers are closed. The remaining conditions below\n * determine the necessity of utilizing the content gap left property to create\n * horizontal space between the center column and its adjacent siblings.\n */\nfunction getContentGapRight(\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  splitPanel?: React.ReactNode,\n  toolsHide?: boolean\n) {\n  let hasContentGapRight = false;\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (!splitPanel && toolsHide) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Tools drawer and needs a content gap\n  if ((!splitPanel || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (splitPanel && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Split Panel drawer and needs a content gap\n  if (splitPanel && isSplitPanelOpen && splitPanelPosition === 'side') {\n    hasContentGapRight = true;\n  }\n\n  return hasContentGapRight;\n}\n\n/**\n * Additional function to determine whether or not a content gap is needed\n * on the left (see the getContentGapRight function). The same render logic applies\n * regarding the center column touching an adjacent sibling but the only\n * component state that needs to be tracked is the Navigation.\n */\nfunction getContentGapLeft(isNavigationOpen: boolean, navigationHide?: boolean) {\n  return isNavigationOpen || navigationHide ? true : false;\n}\n\n/**\n * Determine whether the overlap between the contentHeader and content slots should be disabled.\n * The disableContentHeaderOverlap property is absolute and will always disable the overlap\n * if it is set to true. If there is no contentHeader then the overlap should be disabled\n * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a\n * component in the content slot that needs to manually control the overlap height. Components\n * such as the Table (full page variant), Wizard, ContentLayout use this property and will\n * retain the overlap even if there is nothing rendered in the contentHeader slot.\n */\nfunction getOverlapDisabled(\n  dynamicOverlapHeight: number,\n  contentHeader?: React.ReactNode,\n  disableContentHeaderOverlap?: boolean\n) {\n  let isOverlapDisabled = false;\n\n  if (disableContentHeaderOverlap) {\n    isOverlapDisabled = true;\n  } else if (!contentHeader && dynamicOverlapHeight <= 0) {\n    isOverlapDisabled = true;\n  }\n\n  return isOverlapDisabled;\n}\n"]}

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

@@ -0,0 +1,2 @@
+export default function Main(): JSX.Element;
+//# sourceMappingURL=main.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,IAAI,gBA4C3B"}

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

@@ -0,0 +1,26 @@
+// 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 { SplitPanelContext } from '../../internal/context/split-panel-context';
+import styles from './styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+export default function Main() {
+    var _a;
+    var _b = useContext(AppLayoutContext), breadcrumbs = _b.breadcrumbs, content = _b.content, contentHeader = _b.contentHeader, contentType = _b.contentType, disableContentPaddings = _b.disableContentPaddings, dynamicOverlapHeight = _b.dynamicOverlapHeight, hasNotificationsContent = _b.hasNotificationsContent, isNavigationOpen = _b.isNavigationOpen, isSplitPanelOpen = _b.isSplitPanelOpen, isToolsOpen = _b.isToolsOpen, isMobile = _b.isMobile, isAnyPanelOpen = _b.isAnyPanelOpen, mainElement = _b.mainElement;
+    var splitPanelPosition = useContext(SplitPanelContext).position;
+    var isUnfocusable = isMobile && isAnyPanelOpen;
+    return (React.createElement("div", { className: clsx(styles.container, styles["content-type-".concat(contentType)], styles["split-panel-position-".concat(splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom')], (_a = {},
+            _a[styles['disable-content-paddings']] = disableContentPaddings,
+            _a[styles['has-breadcrumbs']] = breadcrumbs,
+            _a[styles['has-dynamic-overlap-height']] = dynamicOverlapHeight > 0,
+            _a[styles['has-header']] = contentHeader,
+            _a[styles['has-notifications-content']] = hasNotificationsContent,
+            _a[styles['is-navigation-open']] = isNavigationOpen,
+            _a[styles['is-tools-open']] = isToolsOpen,
+            _a[styles['is-split-panel-open']] = isSplitPanelOpen,
+            _a[styles.unfocusable] = isUnfocusable,
+            _a), testutilStyles.content), ref: mainElement }, content));
+}
+//# sourceMappingURL=main.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI;;IACpB,IAAA,KAcF,UAAU,CAAC,gBAAgB,CAAC,EAb9B,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,sBAAsB,4BAAA,EACtB,oBAAoB,0BAAA,EACpB,uBAAuB,6BAAA,EACvB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,WAAW,iBACmB,CAAC;IAEzB,IAAU,kBAAkB,GAAK,UAAU,CAAC,iBAAiB,CAAC,SAAlC,CAAmC;IACvE,IAAM,aAAa,GAAG,QAAQ,IAAI,cAAc,CAAC;IAEjD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,EACrC,MAAM,CAAC,+BAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAE,CAAC;YAE9D,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,sBAAsB;YAC5D,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW;YACxC,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,oBAAoB,GAAG,CAAC;YAChE,GAAC,MAAM,CAAC,YAAY,CAAC,IAAG,aAAa;YACrC,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,gBAAgB;YAChD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,WAAW;YACtC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;YACjD,GAAC,MAAM,CAAC,WAAW,IAAG,aAAa;iBAErC,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,IAEf,OAAO,CACJ,CACP,CAAC;AACJ,CAAC","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 { SplitPanelContext } from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Main() {\n  const {\n    breadcrumbs,\n    content,\n    contentHeader,\n    contentType,\n    disableContentPaddings,\n    dynamicOverlapHeight,\n    hasNotificationsContent,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    isMobile,\n    isAnyPanelOpen,\n    mainElement,\n  } = useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition } = useContext(SplitPanelContext);\n  const isUnfocusable = isMobile && isAnyPanelOpen;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n          [styles['has-header']]: contentHeader,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['is-navigation-open']]: isNavigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: isUnfocusable,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n    >\n      {content}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,9 @@
+/**
+ * The Navigation component consists of the following elements:
+ * the container, or root element, that sits as a direct child to the Layout grid definition;
+ * the show navigation form that contains the trigger for the drawer in large viewports;
+ * the navigation, or drawer, that contains the hide navigation form and the children
+ * passed through the API;
+ */
+export default function Navigation(): JSX.Element | null;
+//# sourceMappingURL=navigation.d.ts.map

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

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

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

@@ -0,0 +1,62 @@
+import { __assign } from "tslib";
+// 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 TriggerButton from './trigger-button';
+import styles from './styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+import { useFocusControl } from '../utils/use-focus-control';
+import { Transition } from '../../internal/components/transition';
+import { findUpUntil } from '../../internal/utils/dom';
+import customCssProps from '../../internal/generated/custom-css-properties';
+/**
+ * The Navigation component consists of the following elements:
+ * the container, or root element, that sits as a direct child to the Layout grid definition;
+ * the show navigation form that contains the trigger for the drawer in large viewports;
+ * the navigation, or drawer, that contains the hide navigation form and the children
+ * passed through the API;
+ */
+export default function Navigation() {
+    var _a = useContext(AppLayoutContext), ariaLabels = _a.ariaLabels, handleNavigationClick = _a.handleNavigationClick, isMobile = _a.isMobile, isNavigationOpen = _a.isNavigationOpen, navigation = _a.navigation, navigationHide = _a.navigationHide, navigationWidth = _a.navigationWidth, isToolsOpen = _a.isToolsOpen, isAnyPanelOpen = _a.isAnyPanelOpen, toolsHide = _a.toolsHide;
+    var focusRefs = useFocusControl(isNavigationOpen);
+    if (navigationHide) {
+        return null;
+    }
+    // Close the Navigation drawer on mobile when a user clicks a link inside.
+    var onNavigationClick = function (event) {
+        var hasLink = findUpUntil(event.target, function (node) { return node.tagName === 'A' && !!node.href; });
+        if (hasLink && isMobile) {
+            handleNavigationClick(false);
+        }
+    };
+    var isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;
+    return (React.createElement(Transition, { "in": isNavigationOpen }, function (state, transitionEventsRef) {
+        var _a, _b, _c, _d;
+        var _e, _f, _g;
+        return (React.createElement("div", { className: clsx(styles['navigation-container'], (_a = {},
+                _a[testutilStyles['drawer-closed']] = !isNavigationOpen,
+                _a[styles.unfocusable] = isUnfocusable,
+                _a)), 
+            // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.
+            style: __assign({}, (navigationWidth && (_b = {}, _b[customCssProps.navigationWidth] = "".concat(navigationWidth, "px"), _b))) },
+            !isMobile && (React.createElement("nav", { "aria-hidden": isMobile || isNavigationOpen ? true : false, "aria-label": (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _e !== void 0 ? _e : undefined, className: clsx(styles['show-navigation'], (_c = {},
+                    _c[styles.animating] = state === 'exiting',
+                    _c[styles['is-navigation-open']] = isNavigationOpen,
+                    _c)), ref: state === 'exiting' ? transitionEventsRef : undefined },
+                React.createElement(TriggerButton, { ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: function () { return handleNavigationClick(true); }, ref: focusRefs.toggle }))),
+            React.createElement("nav", { "aria-label": (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _f !== void 0 ? _f : undefined, className: clsx(styles.navigation, (_d = {},
+                    _d[styles.animating] = state === 'entering',
+                    _d[styles['is-navigation-open']] = isNavigationOpen,
+                    _d), testutilStyles.navigation), ref: state !== 'exiting' ? transitionEventsRef : undefined, "aria-hidden": !isNavigationOpen, onClick: function (event) {
+                    onNavigationClick && onNavigationClick(event);
+                } },
+                React.createElement("div", { className: clsx(styles['animated-content']) },
+                    React.createElement("div", { className: clsx(styles['hide-navigation']) },
+                        React.createElement(InternalButton, { ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _g !== void 0 ? _g : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: function () { return handleNavigationClick(false); }, variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: focusRefs.close })),
+                    navigation))));
+    }));
+}
+//# sourceMappingURL=navigation.js.map

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

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

package/app-layout/visual-refresh/notifications.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 Notifications(): JSX.Element | null;
+//# sourceMappingURL=notifications.d.ts.map

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

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

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

@@ -0,0 +1,24 @@
+// 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 styles from './styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+/**
+ * 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 Notifications() {
+    var _a;
+    var _b;
+    var _c = useContext(AppLayoutContext), ariaLabels = _c.ariaLabels, hasNotificationsContent = _c.hasNotificationsContent, notifications = _c.notifications, notificationsElement = _c.notificationsElement, stickyNotifications = _c.stickyNotifications;
+    if (!notifications) {
+        return null;
+    }
+    return (React.createElement("div", { "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles.notifications, (_a = {},
+            _a[styles['has-notifications-content']] = hasNotificationsContent,
+            _a[styles['sticky-notifications']] = stickyNotifications,
+            _a), testutilStyles.notifications, 'awsui-context-content-header'), role: "region", ref: notificationsElement }, notifications));
+}
+//# sourceMappingURL=notifications.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa;;;IAC7B,IAAA,KACJ,UAAU,CAAC,gBAAgB,CAAC,EADtB,UAAU,gBAAA,EAAE,uBAAuB,6BAAA,EAAE,aAAa,mBAAA,EAAE,oBAAoB,0BAAA,EAAE,mBAAmB,yBACvE,CAAC;IAE/B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa;YAElB,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;YAC9D,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,mBAAmB;iBAEvD,cAAc,CAAC,aAAa,EAC5B,8BAA8B,CAC/B,EACD,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,oBAAoB,IAExB,aAAa,CACV,CACP,CAAC;AACJ,CAAC","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 styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\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 Notifications() {\n  const { ariaLabels, hasNotificationsContent, notifications, notificationsElement, stickyNotifications } =\n    useContext(AppLayoutContext);\n\n  if (!notifications) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-label={ariaLabels?.notifications ?? undefined}\n      className={clsx(\n        styles.notifications,\n        {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['sticky-notifications']]: stickyNotifications,\n        },\n        testutilStyles.notifications,\n        'awsui-context-content-header'\n      )}\n      role=\"region\"\n      ref={notificationsElement}\n    >\n      {notifications}\n    </div>\n  );\n}\n"]}

package/app-layout/visual-refresh/split-panel.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AppLayoutProps } from '../interfaces';
+/**
+ * If there is no Split Panel in the AppLayout context then the SplitPanel
+ * will pass through the AppLayout children without the context.
+ */
+declare function SplitPanel({ children }: React.PropsWithChildren<unknown>): JSX.Element;
+declare namespace SplitPanel {
+    var Bottom: typeof SplitPanelBottom;
+    var Side: typeof SplitPanelSide;
+}
+/**
+ * This is the render function for the SplitPanel when it is in bottom position.
+ * The Split Panel container will be another row entry in the grid definition in
+ * the Layout component. The start and finish columns will be variable based
+ * on the the presence and state of the Navigation and Tools components.
+ */
+declare function SplitPanelBottom(): JSX.Element | null;
+/**
+ * This is the render function for the SplitPanel when it is side position.
+ * The Split Panel will not be within the grid defined in the Layout component
+ * but instead a direct child of the Tools component. The width constraints
+ * for this position are computed in the Tools component.
+ */
+declare function SplitPanelSide(): JSX.Element | null;
+/**
+ * This logic will determine what the Split Panel position should be. It reconciles the possibility
+ * of being in forced position with the current selected position in the settings.
+ */
+export declare function getSplitPanelPosition(isSplitPanelForcedPosition: boolean, splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined): AppLayoutProps.SplitPanelPosition;
+export default SplitPanel;
+//# sourceMappingURL=split-panel.d.ts.map

package/app-layout/visual-refresh/split-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eAmDjE;kBAnDQ,UAAU;;;;AAqDnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAmCxB;AAED;;;;;GAKG;AACH,iBAAS,cAAc,uBA+BtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}

package/app-layout/visual-refresh/split-panel.js

@@ -0,0 +1,120 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { AppLayoutContext } from './context';
+import { SplitPanelContext, } from '../../internal/context/split-panel-context';
+import styles from './styles.css.js';
+import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
+import { Transition } from '../../internal/components/transition';
+import { useObservedElement } from '../utils/use-observed-element';
+import customCssProps from '../../internal/generated/custom-css-properties';
+/**
+ * If there is no Split Panel in the AppLayout context then the SplitPanel
+ * will pass through the AppLayout children without the context.
+ */
+function SplitPanel(_a) {
+    var children = _a.children;
+    var _b = useContext(AppLayoutContext), handleSplitPanelClick = _b.handleSplitPanelClick, handleSplitPanelPreferencesChange = _b.handleSplitPanelPreferencesChange, handleSplitPanelResize = _b.handleSplitPanelResize, isMobile = _b.isMobile, isSplitPanelForcedPosition = _b.isSplitPanelForcedPosition, isSplitPanelOpen = _b.isSplitPanelOpen, setSplitPanelReportedSize = _b.setSplitPanelReportedSize, splitPanelPosition = _b.splitPanelPosition, splitPanelSize = _b.splitPanelSize;
+    var _c = useState(undefined), openButtonAriaLabel = _c[0], setOpenButtonAriaLabel = _c[1];
+    var _d = useState(), splitPanelLastInteraction = _d[0], setSplitPanelLastInteraction = _d[1];
+    useEffectOnUpdate(function () { return setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }); }, [isSplitPanelOpen]);
+    useEffectOnUpdate(function () { return setSplitPanelLastInteraction({ type: 'position' }); }, [splitPanelPosition]);
+    var splitPanelRef = useRef(null);
+    var splitPanelHeaderRef = useRef(null);
+    var context = {
+        bottomOffset: 0,
+        getMaxHeight: function () { return document.documentElement.clientHeight - 250; },
+        getMaxWidth: function () { return document.documentElement.clientWidth; },
+        getHeader: function () { return splitPanelHeaderRef.current; },
+        isForcedPosition: isSplitPanelForcedPosition,
+        isMobile: isMobile,
+        isOpen: isSplitPanelOpen,
+        isRefresh: true,
+        leftOffset: 0,
+        onPreferencesChange: handleSplitPanelPreferencesChange,
+        onResize: handleSplitPanelResize,
+        onToggle: handleSplitPanelClick,
+        position: splitPanelPosition,
+        reportSize: setSplitPanelReportedSize,
+        rightOffset: 0,
+        size: splitPanelSize || 0,
+        splitPanelRef: splitPanelRef,
+        splitPanelHeaderRef: splitPanelHeaderRef,
+        topOffset: 0,
+        openButtonAriaLabel: openButtonAriaLabel,
+        setOpenButtonAriaLabel: setOpenButtonAriaLabel,
+        lastInteraction: splitPanelLastInteraction
+    };
+    return React.createElement(SplitPanelContext.Provider, { value: __assign({}, context) }, children);
+}
+/**
+ * This is the render function for the SplitPanel when it is in bottom position.
+ * The Split Panel container will be another row entry in the grid definition in
+ * the Layout component. The start and finish columns will be variable based
+ * on the the presence and state of the Navigation and Tools components.
+ */
+function SplitPanelBottom() {
+    var _a = useContext(AppLayoutContext), disableBodyScroll = _a.disableBodyScroll, isNavigationOpen = _a.isNavigationOpen, isSplitPanelOpen = _a.isSplitPanelOpen, isToolsOpen = _a.isToolsOpen, splitPanel = _a.splitPanel, splitPanelReportedSize = _a.splitPanelReportedSize;
+    var _b = useContext(SplitPanelContext), splitPanelPosition = _b.position, getHeader = _b.getHeader;
+    var headerHeight = useObservedElement(getHeader);
+    if (!splitPanel) {
+        return null;
+    }
+    return (React.createElement(Transition, { "in": isSplitPanelOpen !== null && isSplitPanelOpen !== void 0 ? isSplitPanelOpen : false, exit: false }, function (state, transitionEventsRef) {
+        var _a, _b;
+        return (React.createElement("section", { className: clsx(styles['split-panel-bottom'], styles["position-".concat(splitPanelPosition)], (_a = {},
+                _a[styles.animating] = state === 'entering',
+                _a[styles['disable-body-scroll']] = disableBodyScroll,
+                _a[styles['is-navigation-open']] = isNavigationOpen,
+                _a[styles['is-split-panel-open']] = isSplitPanelOpen,
+                _a[styles['is-tools-open']] = isToolsOpen,
+                _a)), ref: transitionEventsRef, style: (_b = {},
+                _b[customCssProps.splitPanelReportedSize] = "".concat(splitPanelReportedSize, "px"),
+                _b[customCssProps.splitPanelReportedHeaderSize] = "".concat(headerHeight, "px"),
+                _b) },
+            React.createElement(SplitPanel, null),
+            splitPanelPosition === 'bottom' && splitPanel));
+    }));
+}
+/**
+ * This is the render function for the SplitPanel when it is side position.
+ * The Split Panel will not be within the grid defined in the Layout component
+ * but instead a direct child of the Tools component. The width constraints
+ * for this position are computed in the Tools component.
+ */
+function SplitPanelSide() {
+    var _a = useContext(AppLayoutContext), isSplitPanelOpen = _a.isSplitPanelOpen, splitPanel = _a.splitPanel, splitPanelMaxWidth = _a.splitPanelMaxWidth, splitPanelMinWidth = _a.splitPanelMinWidth, splitPanelReportedSize = _a.splitPanelReportedSize;
+    var splitPanelPosition = useContext(SplitPanelContext).position;
+    if (!splitPanel) {
+        return null;
+    }
+    return (React.createElement(Transition, { "in": isSplitPanelOpen !== null && isSplitPanelOpen !== void 0 ? isSplitPanelOpen : false, exit: false }, function (state, transitionEventsRef) {
+        var _a, _b;
+        return (React.createElement("section", { "aria-hidden": !isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false, className: clsx(styles['split-panel-side'], styles["position-".concat(splitPanelPosition)], (_a = {},
+                _a[styles.animating] = state === 'entering',
+                _a[styles['is-split-panel-open']] = isSplitPanelOpen,
+                _a)), ref: transitionEventsRef, style: (_b = {},
+                _b[customCssProps.splitPanelMaxWidth] = "".concat(splitPanelMaxWidth, "px"),
+                _b[customCssProps.splitPanelMinWidth] = "".concat(splitPanelMinWidth, "px"),
+                _b[customCssProps.splitPanelReportedHeaderSize] = "".concat(splitPanelReportedSize, "px"),
+                _b) },
+            React.createElement("div", { className: clsx(styles['animated-content']) }, splitPanelPosition === 'side' && splitPanel)));
+    }));
+}
+/**
+ * This logic will determine what the Split Panel position should be. It reconciles the possibility
+ * of being in forced position with the current selected position in the settings.
+ */
+export function getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences) {
+    var splitPanelPosition = 'bottom';
+    if (!isSplitPanelForcedPosition && (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) === 'side') {
+        splitPanelPosition = 'side';
+    }
+    return splitPanelPosition;
+}
+SplitPanel.Bottom = SplitPanelBottom;
+SplitPanel.Side = SplitPanelSide;
+export default SplitPanel;
+//# sourceMappingURL=split-panel.js.map

package/app-layout/visual-refresh/split-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EACL,iBAAiB,GAGlB,MAAM,4CAA4C,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAE5E;;;GAGG;AACH,SAAS,UAAU,CAAC,EAA8C;QAA5C,QAAQ,cAAA;IACtB,IAAA,KAUF,UAAU,CAAC,gBAAgB,CAAC,EAT9B,qBAAqB,2BAAA,EACrB,iCAAiC,uCAAA,EACjC,sBAAsB,4BAAA,EACtB,QAAQ,cAAA,EACR,0BAA0B,gCAAA,EAC1B,gBAAgB,sBAAA,EAChB,yBAAyB,+BAAA,EACzB,kBAAkB,wBAAA,EAClB,cAAc,oBACgB,CAAC;IAE3B,IAAA,KAAgD,QAAQ,CAAqB,SAAS,CAAC,EAAtF,mBAAmB,QAAA,EAAE,sBAAsB,QAA2C,CAAC;IAExF,IAAA,KAA4D,QAAQ,EAAyC,EAA5G,yBAAyB,QAAA,EAAE,4BAA4B,QAAqD,CAAC;IACpH,iBAAiB,CACf,cAAM,OAAA,4BAA4B,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAArF,CAAqF,EAC3F,CAAC,gBAAgB,CAAC,CACnB,CAAC;IACF,iBAAiB,CAAC,cAAM,OAAA,4BAA4B,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAlD,CAAkD,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAElG,IAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,IAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,IAAM,OAAO,GAA2B;QACtC,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,cAAM,OAAA,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,GAAG,EAA3C,CAA2C;QAC/D,WAAW,EAAE,cAAM,OAAA,QAAQ,CAAC,eAAe,CAAC,WAAW,EAApC,CAAoC;QACvD,SAAS,EAAE,cAAM,OAAA,mBAAmB,CAAC,OAAO,EAA3B,CAA2B;QAC5C,gBAAgB,EAAE,0BAA0B;QAC5C,QAAQ,UAAA;QACR,MAAM,EAAE,gBAAgB;QACxB,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,CAAC;QACb,mBAAmB,EAAE,iCAAiC;QACtD,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,kBAAkB;QAC5B,UAAU,EAAE,yBAAyB;QACrC,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,cAAc,IAAI,CAAC;QACzB,aAAa,eAAA;QACb,mBAAmB,qBAAA;QACnB,SAAS,EAAE,CAAC;QACZ,mBAAmB,qBAAA;QACnB,sBAAsB,wBAAA;QACtB,eAAe,EAAE,yBAAyB;KAC3C,CAAC;IAEF,OAAO,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,eAAO,OAAO,KAAK,QAAQ,CAA8B,CAAC;AACpG,CAAC;AAED;;;;;GAKG;AACH,SAAS,gBAAgB;IACjB,IAAA,KACJ,UAAU,CAAC,gBAAgB,CAAC,EADtB,iBAAiB,uBAAA,EAAE,gBAAgB,sBAAA,EAAE,gBAAgB,sBAAA,EAAE,WAAW,iBAAA,EAAE,UAAU,gBAAA,EAAE,sBAAsB,4BAChF,CAAC;IAEzB,IAAA,KAA8C,UAAU,CAAC,iBAAiB,CAAC,EAA/D,kBAAkB,cAAA,EAAE,SAAS,eAAkC,CAAC;IAElF,IAAM,YAAY,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,IAAE,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,KAAK,EAAE,IAAI,EAAE,KAAK,IACnD,UAAC,KAAK,EAAE,mBAAmB;;QAAK,OAAA,CAC/B,iCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,mBAAY,kBAAkB,CAAE,CAAC;gBACpF,GAAC,MAAM,CAAC,SAAS,IAAG,KAAK,KAAK,UAAU;gBACxC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,iBAAiB;gBAClD,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,gBAAgB;gBAChD,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;gBACjD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,WAAW;oBACtC,EACF,GAAG,EAAE,mBAAmB,EACxB,KAAK;gBACH,GAAC,cAAc,CAAC,sBAAsB,IAAG,UAAG,sBAAsB,OAAI;gBACtE,GAAC,cAAc,CAAC,4BAA4B,IAAG,UAAG,YAAY,OAAI;;YAGpE,oBAAC,UAAU,OAAc;YACxB,kBAAkB,KAAK,QAAQ,IAAI,UAAU,CACtC,CACX;IAlBgC,CAkBhC,CACU,CACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,cAAc;IACf,IAAA,KACJ,UAAU,CAAC,gBAAgB,CAAC,EADtB,gBAAgB,sBAAA,EAAE,UAAU,gBAAA,EAAE,kBAAkB,wBAAA,EAAE,kBAAkB,wBAAA,EAAE,sBAAsB,4BACtE,CAAC;IAEvB,IAAU,kBAAkB,GAAK,UAAU,CAAC,iBAAiB,CAAC,SAAlC,CAAmC;IAEvE,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,IAAE,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,KAAK,EAAE,IAAI,EAAE,KAAK,IACnD,UAAC,KAAK,EAAE,mBAAmB;;QAAK,OAAA,CAC/B,gDACe,CAAC,gBAAgB,IAAI,kBAAkB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAChF,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,mBAAY,kBAAkB,CAAE,CAAC;gBAClF,GAAC,MAAM,CAAC,SAAS,IAAG,KAAK,KAAK,UAAU;gBACxC,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,gBAAgB;oBACjD,EACF,GAAG,EAAE,mBAAmB,EACxB,KAAK;gBACH,GAAC,cAAc,CAAC,kBAAkB,IAAG,UAAG,kBAAkB,OAAI;gBAC9D,GAAC,cAAc,CAAC,kBAAkB,IAAG,UAAG,kBAAkB,OAAI;gBAC9D,GAAC,cAAc,CAAC,4BAA4B,IAAG,UAAG,sBAAsB,OAAI;;YAG9E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAG,kBAAkB,KAAK,MAAM,IAAI,UAAU,CAAO,CAC7F,CACX;IAhBgC,CAgBhC,CACU,CACd,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CACnC,0BAAmC,EACnC,qBAAuE;IAEvE,IAAI,kBAAkB,GAAsC,QAAQ,CAAC;IAErE,IAAI,CAAC,0BAA0B,IAAI,CAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,QAAQ,MAAK,MAAM,EAAE;QAC7E,kBAAkB,GAAG,MAAM,CAAC;KAC7B;IAED,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AACD,UAAU,CAAC,MAAM,GAAG,gBAAgB,CAAC;AACrC,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC;AAEjC,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport {\n  SplitPanelContext,\n  SplitPanelContextProps,\n  SplitPanelLastInteraction,\n} from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport { Transition } from '../../internal/components/transition';\nimport { useObservedElement } from '../utils/use-observed-element';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    splitPanelPosition,\n    splitPanelSize,\n  } = useContext(AppLayoutContext);\n\n  const [openButtonAriaLabel, setOpenButtonAriaLabel] = useState<undefined | string>(undefined);\n\n  const [splitPanelLastInteraction, setSplitPanelLastInteraction] = useState<undefined | SplitPanelLastInteraction>();\n  useEffectOnUpdate(\n    () => setSplitPanelLastInteraction(isSplitPanelOpen ? { type: 'open' } : { type: 'close' }),\n    [isSplitPanelOpen]\n  );\n  useEffectOnUpdate(() => setSplitPanelLastInteraction({ type: 'position' }), [splitPanelPosition]);\n\n  const splitPanelRef = useRef<HTMLDivElement>(null);\n  const splitPanelHeaderRef = useRef<HTMLDivElement>(null);\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => document.documentElement.clientHeight - 250,\n    getMaxWidth: () => document.documentElement.clientWidth,\n    getHeader: () => splitPanelHeaderRef.current,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    isRefresh: true,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    splitPanelRef,\n    splitPanelHeaderRef,\n    topOffset: 0,\n    openButtonAriaLabel,\n    setOpenButtonAriaLabel,\n    lastInteraction: splitPanelLastInteraction,\n  };\n\n  return <SplitPanelContext.Provider value={{ ...context }}>{children}</SplitPanelContext.Provider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const { disableBodyScroll, isNavigationOpen, isSplitPanelOpen, isToolsOpen, splitPanel, splitPanelReportedSize } =\n    useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, getHeader } = useContext(SplitPanelContext);\n\n  const headerHeight = useObservedElement(getHeader);\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${headerHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const { isSplitPanelOpen, splitPanel, splitPanelMaxWidth, splitPanelMinWidth, splitPanelReportedSize } =\n    useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition } = useContext(SplitPanelContext);\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}