@cloudscape-design/components 3.0.0

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

@@ -0,0 +1,21 @@
+// 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';
+/**
+ * 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() {
+    var _a;
+    var _b = useContext(AppLayoutContext), contentType = _b.contentType, hasNotificationsContent = _b.hasNotificationsContent, stickyNotifications = _b.stickyNotifications;
+    return (React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') },
+        React.createElement("div", { className: clsx(styles['notifications-appbar-header'], styles["content-type-".concat(contentType)], (_a = {},
+                _a[styles['has-notifications-content']] = hasNotificationsContent,
+                _a[styles['sticky-notifications']] = stickyNotifications,
+                _a)) }),
+        React.createElement("div", { className: clsx(styles.overlap, styles["content-type-".concat(contentType)]) })));
+}
+//# sourceMappingURL=background.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"background.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/background.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;AAErC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU;;IAC1B,IAAA,KAAgE,UAAU,CAAC,gBAAgB,CAAC,EAA1F,WAAW,iBAAA,EAAE,uBAAuB,6BAAA,EAAE,mBAAmB,yBAAiC,CAAC;IAEnG,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,8BAA8B,CAAC;QACrE,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,6BAA6B,CAAC,EAAE,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC;gBAC1F,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;gBAC9D,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,mBAAmB;oBACrD,GACF;QAEF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,CAAC,GAAI,CAC3E,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';\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 Background() {\n  const { contentType, hasNotificationsContent, stickyNotifications } = useContext(AppLayoutContext);\n\n  return (\n    <div className={clsx(styles.background, 'awsui-context-content-header')}>\n      <div\n        className={clsx(styles['notifications-appbar-header'], styles[`content-type-${contentType}`], {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['sticky-notifications']]: stickyNotifications,\n        })}\n      />\n\n      <div className={clsx(styles.overlap, styles[`content-type-${contentType}`])} />\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { AppLayoutProps } from '../interfaces';
+/**
+ * The default values are destructured in the context instantiation to
+ * prevent downstream Typescript errors. This could likely be replaced
+ * by a context interface definition that extends the AppLayout interface.
+ */
+export declare const AppLayoutContext: React.Context<{
+    dynamicOverlapHeight: number;
+    handleSplitPanelClick: () => void;
+    handleNavigationClick: (isOpen: boolean) => void;
+    handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;
+    handleSplitPanelResize: (detail: {
+        size: number;
+    }) => void;
+    handleToolsClick: (value: boolean) => void;
+    hasDefaultToolsWidth: boolean;
+    hasNotificationsContent: boolean;
+    isAnyPanelOpen: boolean;
+    isMobile: boolean;
+    isNavigationOpen: boolean;
+    isSplitPanelForcedPosition: boolean;
+    isSplitPanelOpen?: boolean | undefined;
+    isToolsOpen?: boolean | undefined;
+    layoutElement: React.Ref<HTMLElement>;
+    layoutWidth: number;
+    mainElement: React.Ref<HTMLDivElement>;
+    mainOffsetLeft: number;
+    notificationsElement: React.Ref<HTMLDivElement>;
+    notificationsHeight: number;
+    offsetBottom: number;
+    setDynamicOverlapHeight: (value: number) => void;
+    setIsNavigationOpen: (value: boolean) => void;
+    setIsToolsOpen: (value: boolean) => void;
+    setOffsetBottom: (value: number) => void;
+    setSplitPanelReportedSize: (value: number) => void;
+    splitPanelMaxWidth: number;
+    splitPanelMinWidth: number;
+    splitPanelPosition: AppLayoutProps.SplitPanelPosition;
+    splitPanelReportedSize: number;
+    headerSelector: string;
+    footerSelector: string;
+    contentType?: AppLayoutProps.ContentType | undefined;
+    disableContentPaddings?: boolean | undefined;
+    disableBodyScroll?: boolean | undefined;
+    navigationOpen?: boolean | undefined;
+    navigationWidth?: number | undefined;
+    navigationHide?: boolean | undefined;
+    toolsOpen?: boolean | undefined;
+    toolsHide?: boolean | undefined;
+    toolsWidth?: number | undefined;
+    maxContentWidth?: number | undefined;
+    minContentWidth?: number | undefined;
+    stickyNotifications?: boolean | undefined;
+    ariaLabels?: AppLayoutProps.Labels | undefined;
+    navigation?: React.ReactNode;
+    contentHeader?: React.ReactNode;
+    disableContentHeaderOverlap?: boolean | undefined;
+    content?: React.ReactNode;
+    tools?: React.ReactNode;
+    notifications?: React.ReactNode;
+    breadcrumbs?: React.ReactNode;
+    onNavigationChange?: import("../../internal/events").NonCancelableEventHandler<AppLayoutProps.ChangeDetail> | undefined;
+    onToolsChange?: import("../../internal/events").NonCancelableEventHandler<AppLayoutProps.ChangeDetail> | undefined;
+    splitPanel?: React.ReactNode;
+    splitPanelSize?: number | undefined;
+    splitPanelOpen?: boolean | undefined;
+    splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences | undefined;
+    onSplitPanelResize?: import("../../internal/events").NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail> | undefined;
+    onSplitPanelToggle?: import("../../internal/events").NonCancelableEventHandler<AppLayoutProps.ChangeDetail> | undefined;
+    onSplitPanelPreferencesChange?: import("../../internal/events").NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences> | undefined;
+    className?: string | undefined;
+    id?: string | undefined;
+}>;
+export declare const AppLayoutProvider: React.ForwardRefExoticComponent<AppLayoutProps & {
+    children: React.ReactNode;
+} & React.RefAttributes<AppLayoutProps.Ref>>;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AA2G/C;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;0BAnGL,MAAM;2BACL,MAAM,IAAI;oCACD,OAAO,KAAK,IAAI;gDACJ,eAAe,qBAAqB,KAAK,IAAI;qCACxD;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;8BAChC,OAAO,KAAK,IAAI;0BACpB,OAAO;6BACJ,OAAO;oBAChB,OAAO;cACb,OAAO;sBACC,OAAO;gCACG,OAAO;;;mBAGpB,MAAM,GAAG,CAAC,WAAW,CAAC;iBACxB,MAAM;iBACN,MAAM,GAAG,CAAC,cAAc,CAAC;oBACtB,MAAM;0BACA,MAAM,GAAG,CAAC,cAAc,CAAC;yBAC1B,MAAM;kBACb,MAAM;qCACa,MAAM,KAAK,IAAI;iCACnB,OAAO,KAAK,IAAI;4BACrB,OAAO,KAAK,IAAI;6BACf,MAAM,KAAK,IAAI;uCACL,MAAM,KAAK,IAAI;wBAC9B,MAAM;wBACN,MAAM;wBACN,eAAe,kBAAkB;4BAC7B,MAAM;oBAEd,MAAM;oBACN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEsC,CAAC;AAM/D,eAAO,MAAM,iBAAiB;cAHlB,MAAM,SAAS;4CA0Z1B,CAAC"}

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

@@ -0,0 +1,335 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { createContext, createRef, useCallback, useEffect, useLayoutEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { fireNonCancelableEvent } from '../../internal/events';
+import { getSplitPanelPosition } from './split-panel';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { useMobile } from '../../internal/hooks/use-mobile';
+import { useContainerQuery } from '../../internal/hooks/container-queries';
+import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
+import styles from './styles.css.js';
+import { isDevelopment } from '../../internal/is-development';
+import { warnOnce } from '../../internal/logging';
+import { applyDefaults } from '../defaults';
+// TODO simplify default params + typings
+var defaults = {
+    breadcrumbs: null,
+    content: null,
+    contentHeader: null,
+    contentType: 'default',
+    disableBodyScroll: false,
+    disableContentHeaderOverlap: false,
+    disableContentPaddings: false,
+    dynamicOverlapHeight: 0,
+    footerSelector: '#b #f',
+    handleNavigationClick: function (value) { return value; },
+    handleSplitPanelClick: function () { },
+    handleSplitPanelPreferencesChange: function () { },
+    handleSplitPanelResize: function () { },
+    handleToolsClick: function (value) { return value; },
+    hasDefaultToolsWidth: true,
+    hasNotificationsContent: false,
+    headerSelector: '#b #h',
+    isAnyPanelOpen: false,
+    isMobile: false,
+    isNavigationOpen: false,
+    isSplitPanelForcedPosition: false,
+    isSplitPanelOpen: false,
+    isToolsOpen: false,
+    // TODO: these refs are currently only instantiated once globally
+    layoutElement: createRef(),
+    layoutWidth: 0,
+    mainElement: createRef(),
+    mainOffsetLeft: 0,
+    maxContentWidth: 0,
+    minContentWidth: 280,
+    navigation: null,
+    navigationHide: false,
+    navigationOpen: false,
+    notifications: null,
+    notificationsElement: createRef(),
+    notificationsHeight: 0,
+    offsetBottom: 0,
+    onNavigationChange: function () { },
+    onSplitPanelResize: function () { },
+    onSplitPanelToggle: function () { },
+    onSplitPanelPreferencesChange: function () { },
+    setDynamicOverlapHeight: function (value) { return void value; },
+    setIsNavigationOpen: function (value) { return value; },
+    setIsToolsOpen: function (value) { return value; },
+    setOffsetBottom: function (value) { return void value; },
+    setSplitPanelReportedSize: function (value) { return void value; },
+    splitPanelMaxWidth: 280,
+    splitPanelMinWidth: 280,
+    splitPanelOpen: false,
+    splitPanelPosition: 'bottom',
+    splitPanelPreferences: { position: 'bottom' },
+    splitPanelReportedSize: 0,
+    splitPanelSize: 0,
+    stickyNotifications: false,
+    tools: null
+};
+/**
+ * The default values are destructured in the context instantiation to
+ * prevent downstream Typescript errors. This could likely be replaced
+ * by a context interface definition that extends the AppLayout interface.
+ */
+export var AppLayoutContext = createContext(__assign({}, defaults));
+export var AppLayoutProvider = React.forwardRef(function (_a, forwardRef) {
+    var _b, _c, _d;
+    var toolsHide = _a.toolsHide, controlledToolsOpen = _a.toolsOpen, navigationHide = _a.navigationHide, controlledNavigationOpen = _a.navigationOpen, _e = _a.contentType, contentType = _e === void 0 ? 'default' : _e, children = _a.children, props = __rest(_a, ["toolsHide", "toolsOpen", "navigationHide", "navigationOpen", "contentType", "children"]);
+    var isMobile = useMobile();
+    if (isDevelopment) {
+        if (controlledToolsOpen && toolsHide) {
+            warnOnce('AppLayout', "You have enabled both the `toolsOpen` prop and the `toolsHide` prop. This is not supported. Set `toolsOpen` to `false` when you set `toolsHide` to `true`.");
+        }
+    }
+    /**
+     * The overlap height has a default set in CSS but can also be dynamically overridden
+     * for content types (such as Table and Wizard) that have variable size content in the overlap.
+     */
+    var _f = useState(0), dynamicOverlapHeight = _f[0], setDynamicOverlapHeight = _f[1];
+    /**
+     * Set the default values for minimum and maximum content width.
+     */
+    var geckoMaxCssLength = ((1 << 30) - 1) / 60;
+    var halfGeckoMaxCssLength = geckoMaxCssLength / 2;
+    // CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).
+    // Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.
+    var maxContentWidth = props.maxContentWidth && props.maxContentWidth > halfGeckoMaxCssLength
+        ? halfGeckoMaxCssLength
+        : (_b = props.maxContentWidth) !== null && _b !== void 0 ? _b : 0;
+    var minContentWidth = (_c = props.minContentWidth) !== null && _c !== void 0 ? _c : 280;
+    /**
+     * Determine the default state of the Navigation and Tools drawers.
+     * Mobile viewports should be closed by default under all circumstances.
+     * If the navigationOpen prop has been set then that should take precedence
+     * over the contentType prop. Desktop viewports that do not have the
+     * navigationOpen or contentType props set will use the default contentType.
+     */
+    var contentTypeDefaults = applyDefaults(contentType, { maxContentWidth: maxContentWidth, minContentWidth: minContentWidth }, true);
+    /**
+     * The useControllable hook will set the default value and manage either
+     * the controlled or uncontrolled state of the Navigation drawer. The logic
+     * for determining the default state is colocated with the Navigation component.
+     *
+     * The callback that will be passed to the Navigation and AppBar
+     * components to handle the click events that will change the state
+     * of the Navigation drawer. It will set the Navigation state with the
+     * useControllable hook and also fire the onNavigationChange function to
+     * emit the state change.
+     */
+    var _g = useControllable(controlledNavigationOpen, props.onNavigationChange, isMobile ? false : contentTypeDefaults.navigationOpen, { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }), _h = _g[0], isNavigationOpen = _h === void 0 ? false : _h, setIsNavigationOpen = _g[1];
+    var handleNavigationClick = useCallback(function handleNavigationChange(isOpen) {
+        setIsNavigationOpen(isOpen);
+        fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });
+    }, [props.onNavigationChange, setIsNavigationOpen]);
+    /**
+     * The useControllable hook will set the default value and manage either
+     * the controlled or uncontrolled state of the Tools drawer. The logic
+     * for determining the default state is colocated with the Tools component.
+     *
+     * The callback that will be passed to the Navigation and AppBar
+     * components to handle the click events that will change the state
+     * of the Tools drawer. It will set the Tools state with the
+     * useControllable hook and also fire the onToolsChange function to
+     * emit the state change.
+     */
+    var toolsWidth = (_d = props.toolsWidth) !== null && _d !== void 0 ? _d : 290;
+    var hasDefaultToolsWidth = props.toolsWidth === undefined;
+    var _j = useControllable(controlledToolsOpen, props.onToolsChange, isMobile ? false : contentTypeDefaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }), _k = _j[0], isToolsOpen = _k === void 0 ? false : _k, setIsToolsOpen = _j[1];
+    var handleToolsClick = useCallback(function handleToolsChange(isOpen) {
+        setIsToolsOpen(isOpen);
+        fireNonCancelableEvent(props.onToolsChange, { open: isOpen });
+    }, [props.onToolsChange, setIsToolsOpen]);
+    var navigationVisible = !navigationHide && isNavigationOpen;
+    var toolsVisible = !toolsHide && isToolsOpen;
+    var isAnyPanelOpen = navigationVisible || toolsVisible;
+    /**
+     * On mobile viewports the navigation and tools drawers are adjusted to a fixed position
+     * that consumes 100% of the viewport height and width. The body content could potentially
+     * be scrollable underneath the drawer. In order to prevent this a CSS class needs to be
+     * added to the document body that sets overflow to hidden.
+     */
+    useEffect(function handleBodyScroll() {
+        if (isMobile && (isNavigationOpen || isToolsOpen)) {
+            document.body.classList.add(styles['block-body-scroll']);
+        }
+        else {
+            document.body.classList.remove(styles['block-body-scroll']);
+        }
+        // Ensure the CSS class is removed from the body on side effect cleanup
+        return function cleanup() {
+            document.body.classList.remove(styles['block-body-scroll']);
+        };
+    }, [isMobile, isNavigationOpen, isToolsOpen]);
+    /**
+     * The useImperativeHandle hook in conjunction with the forwardRef function
+     * in the AppLayout component definition expose the following callable
+     * functions to component consumers when they put a ref as a property on
+     * their component implementation.
+     */
+    useImperativeHandle(forwardRef, function createImperativeHandle() {
+        return {
+            closeNavigationIfNecessary: function () {
+                isMobile && handleNavigationClick(false);
+            },
+            openTools: function () {
+                handleToolsClick(true);
+            }
+        };
+    }, [isMobile, handleNavigationClick, handleToolsClick]);
+    /**
+     * Set the default values for the minimum and maximum Split Panel width when it is
+     * in the side position. The useLayoutEffect will compute the available space in the
+     * DOM for the Split Panel given the current state. The minimum and maximum
+     * widths will potentially trigger a side effect that will put the Split Panel into
+     * a forced position on the bottom.
+     */
+    var splitPanelMinWidth = 280;
+    var _l = useState(splitPanelMinWidth), splitPanelMaxWidth = _l[0], setSplitPanelMaxWidth = _l[1];
+    /**
+     * The useControllable hook will set the default value and manage either
+     * the controlled or uncontrolled state of the Split Panel. By default
+     * the Split Panel should always be closed on page load.
+     *
+     * The callback that will be passed to the SplitPanel component
+     * to handle the click events that will change the state of the SplitPanel
+     * to open or closed given the current state. It will set the isSplitPanelOpen
+     * controlled state and fire the onSplitPanelToggle event.
+     */
+    var _m = useControllable(props.splitPanelOpen, props.onSplitPanelToggle, false, { componentName: 'AppLayout', controlledProp: 'splitPanelOpen', changeHandler: 'onSplitPanelToggle' }), isSplitPanelOpen = _m[0], setIsSplitPanelOpen = _m[1];
+    var handleSplitPanelClick = useCallback(function handleSplitPanelChange() {
+        setIsSplitPanelOpen(!isSplitPanelOpen);
+        fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });
+    }, [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen]);
+    /**
+     * The useControllable hook will manage the controlled or uncontrolled
+     * state of the splitPanelPreferences. By default the splitPanelPreferences
+     * is undefined. When set the object shape should have a single key to indicate
+     * either bottom or side position.
+     *
+     * The callback that will handle changes to the splitPanelPreferences
+     * object that will determine if the SplitPanel is rendered either on the
+     * bottom of the viewport or within the Tools container.
+     */
+    var _o = useControllable(props.splitPanelPreferences, props.onSplitPanelPreferencesChange, undefined, {
+        componentName: 'AppLayout',
+        controlledProp: 'splitPanelPreferences',
+        changeHandler: 'onSplitPanelPreferencesChange'
+    }), splitPanelPreferences = _o[0], setSplitPanelPreferences = _o[1];
+    /**
+     * The Split Panel will be in forced (bottom) position if the defined minimum width is
+     * greater than the maximum width. In other words, the maximum width is the currently
+     * available horizontal space based on all other components that are rendered. If the
+     * minimum width exceeds this value then there is not enough horizontal space and we must
+     * force it to the bottom position.
+     */
+    var _p = useState(false), isSplitPanelForcedPosition = _p[0], setSplitPanelForcedPosition = _p[1];
+    var splitPanelPosition = getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences);
+    useLayoutEffect(function handleSplitPanelForcePosition() {
+        setSplitPanelForcedPosition(splitPanelMinWidth > splitPanelMaxWidth);
+    }, [splitPanelMaxWidth, splitPanelMinWidth]);
+    /**
+     * The useControllable hook will set the default size of the SplitPanel based
+     * on the default position set in the splitPanelPreferences. The logic for the
+     * default size is contained in the SplitPanel component. The splitPanelControlledSize
+     * will be bound to the size property in the SplitPanel context for rendering.
+     *
+     * The callback that will be passed to the SplitPanel component
+     * to handle the resize events that will change the size of the SplitPanel.
+     * It will set the splitPanelControlledSize controlled state and fire the
+     * onSplitPanelResize event.
+     */
+    var _q = useState(0), splitPanelReportedSize = _q[0], setSplitPanelReportedSize = _q[1];
+    var _r = useControllable(props.splitPanelSize, props.onSplitPanelResize, getSplitPanelDefaultSize(splitPanelPosition), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }), splitPanelSize = _r[0], setSplitPanelSize = _r[1];
+    var handleSplitPanelResize = useCallback(function handleSplitPanelChange(detail) {
+        setSplitPanelSize(detail.size);
+        fireNonCancelableEvent(props.onSplitPanelResize, detail);
+    }, [props.onSplitPanelResize, setSplitPanelSize]);
+    var handleSplitPanelPreferencesChange = useCallback(function handleSplitPanelChange(detail) {
+        setSplitPanelPreferences(detail);
+        fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);
+    }, [props.onSplitPanelPreferencesChange, setSplitPanelPreferences]);
+    /**
+     * The Layout element is not necessarily synonymous with the client
+     * viewport width. There can be content in the horizontal viewport
+     * that exists on either side of the AppLayout. This resize observer
+     * will set the custom property of the Layout element width that
+     * is used for various horizontal constraints such as the maximum
+     * allowed width of the Tools container.
+     *
+     * The offsetLeft of the Main will return the distance that the
+     * Main element has from the left edge of the Layout component.
+     * The offsetLeft value can vary based on the presence and state
+     * of the Navigation as well as content gaps in the grid definition.
+     * This value is used to determine the max width constraint calculation
+     * for the Tools container.
+     */
+    var _s = useContainerQuery(function (rect) { return rect.width; }), layoutContainerQuery = _s[0], layoutElement = _s[1];
+    var layoutWidth = layoutContainerQuery !== null && layoutContainerQuery !== void 0 ? layoutContainerQuery : 0;
+    var mainElement = useRef(null);
+    var _t = useState(0), mainOffsetLeft = _t[0], setMainOffsetLeft = _t[1];
+    useLayoutEffect(function handleMainOffsetLeft() {
+        var _a, _b;
+        setMainOffsetLeft((_b = (_a = mainElement === null || mainElement === void 0 ? void 0 : mainElement.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0);
+    }, [layoutWidth, isNavigationOpen, isToolsOpen, splitPanelReportedSize]);
+    useLayoutEffect(function handleSplitPanelMaxWidth() {
+        /**
+         * Warning! This is a hack! In order to accurately calculate if there is adequate
+         * horizontal space for the Split Panel to be in the side position we need two values
+         * that are not available in JavaScript.
+         *
+         * The first is the the content gap on the right which is stored in a design token
+         * and applied in the Layout CSS:
+         *
+         *  $contentGapRight: #{awsui.$space-scaled-2x-xxxl};
+         *
+         * The second is the width of the element that has the circular buttons for the
+         * Tools and Split Panel. This could be suppressed given the state of the Tools
+         * drawer returning a zero value. It would, however, be rendered if the Split Panel
+         * were to move into the side position. This is calculated in the Tools CSS and
+         * the Trigger button CSS with design tokens:
+         *
+         * padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
+         * width: awsui.$space-layout-toggle-diameter;
+         *
+         * These values will be defined below as static integers that are rough approximations
+         * of their computed width when rendered in the DOM, but doubled to ensure adequate
+         * spacing for the Split Panel to be in side position.
+         */
+        var contentGapRight = 80; // Approximately 40px when rendered but doubled for safety
+        var toolsFormOffsetWidth = 160; // Approximately 80px when rendered but doubled for safety
+        var toolsOffsetWidth = isToolsOpen ? toolsWidth : 0;
+        setSplitPanelMaxWidth(layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsOffsetWidth - toolsFormOffsetWidth);
+    }, [isNavigationOpen, isToolsOpen, layoutWidth, mainOffsetLeft, minContentWidth, toolsWidth]);
+    /**
+     * Because the notifications slot does not give us any direction insight into
+     * what the state of the child content is we need to have a mechanism for
+     * tracking the height of the notifications and whether or not it has content.
+     * The height of the notifications is an integer that will be used as a custom
+     * property on the Layout component to determine what the sticky offset should
+     * be if there are sticky notifications. This could be any number including
+     * zero based on how the child content renders. The hasNotificationsContent boolean
+     * is simply centralizing the logic of the notifications height being > 0 such
+     * that it is not repeated in various components (such as AppBar) that need to
+     * know if the notifications slot is empty.
+     */
+    var _u = useContainerQuery(function (rect) { return rect.height; }), notificationsContainerQuery = _u[0], notificationsElement = _u[1];
+    var _v = useState(0), notificationsHeight = _v[0], setNotificationsHeight = _v[1];
+    var _w = useState(false), hasNotificationsContent = _w[0], setHasNotificationsContent = _w[1];
+    useEffect(function handleNotificationsContent() {
+        setNotificationsHeight(notificationsContainerQuery !== null && notificationsContainerQuery !== void 0 ? notificationsContainerQuery : 0);
+        setHasNotificationsContent(notificationsContainerQuery && notificationsContainerQuery > 0 ? true : false);
+    }, [notificationsContainerQuery]);
+    /**
+     * The offsetBottom value is used to determine the distance from the bottom of the
+     * viewport a sticky element should be placed. A non-zero value means that there
+     * is either a footer outside of the AppLayout, a SplitPanel in the bottom position
+     * within the AppLayout, or both.
+     */
+    var _x = useState(0), offsetBottom = _x[0], setOffsetBottom = _x[1];
+    return (React.createElement(AppLayoutContext.Provider, { value: __assign(__assign(__assign({}, defaults), props), { contentType: contentType, dynamicOverlapHeight: dynamicOverlapHeight, hasDefaultToolsWidth: hasDefaultToolsWidth, handleNavigationClick: handleNavigationClick, handleSplitPanelClick: handleSplitPanelClick, handleSplitPanelPreferencesChange: handleSplitPanelPreferencesChange, handleSplitPanelResize: handleSplitPanelResize, handleToolsClick: handleToolsClick, hasNotificationsContent: hasNotificationsContent, isAnyPanelOpen: isAnyPanelOpen, isMobile: isMobile, isNavigationOpen: isNavigationOpen !== null && isNavigationOpen !== void 0 ? isNavigationOpen : false, isSplitPanelForcedPosition: isSplitPanelForcedPosition, isSplitPanelOpen: isSplitPanelOpen, isToolsOpen: isToolsOpen, layoutElement: layoutElement, layoutWidth: layoutWidth, mainElement: mainElement, mainOffsetLeft: mainOffsetLeft, maxContentWidth: maxContentWidth, minContentWidth: minContentWidth, navigationHide: navigationHide, notificationsElement: notificationsElement, notificationsHeight: notificationsHeight, offsetBottom: offsetBottom, setDynamicOverlapHeight: setDynamicOverlapHeight, setOffsetBottom: setOffsetBottom, setSplitPanelReportedSize: setSplitPanelReportedSize, splitPanelMaxWidth: splitPanelMaxWidth, splitPanelMinWidth: splitPanelMinWidth, splitPanelPosition: splitPanelPosition, splitPanelPreferences: splitPanelPreferences, splitPanelReportedSize: splitPanelReportedSize, splitPanelSize: splitPanelSize, toolsHide: toolsHide, toolsOpen: isToolsOpen, toolsWidth: toolsWidth }) }, children));
+});
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.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, {\n  createContext,\n  createRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { AppLayoutProps } from '../interfaces';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { getSplitPanelPosition } from './split-panel';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useContainerQuery } from '../../internal/hooks/container-queries';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport styles from './styles.css.js';\nimport { isDevelopment } from '../../internal/is-development';\nimport { warnOnce } from '../../internal/logging';\nimport { applyDefaults } from '../defaults';\n\ninterface AppLayoutContextProps extends AppLayoutProps {\n  dynamicOverlapHeight: number;\n  handleSplitPanelClick: () => void;\n  handleNavigationClick: (isOpen: boolean) => void;\n  handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;\n  handleSplitPanelResize: (detail: { size: number }) => void;\n  handleToolsClick: (value: boolean) => void;\n  hasDefaultToolsWidth: boolean;\n  hasNotificationsContent: boolean;\n  isAnyPanelOpen: boolean;\n  isMobile: boolean;\n  isNavigationOpen: boolean;\n  isSplitPanelForcedPosition: boolean;\n  isSplitPanelOpen?: boolean;\n  isToolsOpen?: boolean;\n  layoutElement: React.Ref<HTMLElement>;\n  layoutWidth: number;\n  mainElement: React.Ref<HTMLDivElement>;\n  mainOffsetLeft: number;\n  notificationsElement: React.Ref<HTMLDivElement>;\n  notificationsHeight: number;\n  offsetBottom: number;\n  setDynamicOverlapHeight: (value: number) => void;\n  setIsNavigationOpen: (value: boolean) => void;\n  setIsToolsOpen: (value: boolean) => void;\n  setOffsetBottom: (value: number) => void;\n  setSplitPanelReportedSize: (value: number) => void;\n  splitPanelMaxWidth: number;\n  splitPanelMinWidth: number;\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition;\n  splitPanelReportedSize: number;\n  // overwritten styles - marking as required since we provide default values in the context\n  headerSelector: string;\n  footerSelector: string;\n}\n\n// TODO simplify default params + typings\nconst defaults: AppLayoutContextProps = {\n  breadcrumbs: null,\n  content: null,\n  contentHeader: null,\n  contentType: 'default',\n  disableBodyScroll: false,\n  disableContentHeaderOverlap: false,\n  disableContentPaddings: false,\n  dynamicOverlapHeight: 0,\n  footerSelector: '#b #f',\n  handleNavigationClick: (value: boolean) => value,\n  handleSplitPanelClick: () => {},\n  handleSplitPanelPreferencesChange: () => {},\n  handleSplitPanelResize: () => {},\n  handleToolsClick: (value: boolean) => value,\n  hasDefaultToolsWidth: true,\n  hasNotificationsContent: false,\n  headerSelector: '#b #h',\n  isAnyPanelOpen: false,\n  isMobile: false,\n  isNavigationOpen: false,\n  isSplitPanelForcedPosition: false,\n  isSplitPanelOpen: false,\n  isToolsOpen: false,\n  // TODO: these refs are currently only instantiated once globally\n  layoutElement: createRef<HTMLElement>(),\n  layoutWidth: 0,\n  mainElement: createRef<HTMLDivElement>(),\n  mainOffsetLeft: 0,\n  maxContentWidth: 0,\n  minContentWidth: 280,\n  navigation: null,\n  navigationHide: false,\n  navigationOpen: false,\n  notifications: null,\n  notificationsElement: createRef<HTMLDivElement>(),\n  notificationsHeight: 0,\n  offsetBottom: 0,\n  onNavigationChange: () => {},\n  onSplitPanelResize: () => {},\n  onSplitPanelToggle: () => {},\n  onSplitPanelPreferencesChange: () => {},\n  setDynamicOverlapHeight: (value: number) => void value,\n  setIsNavigationOpen: (value: boolean) => value,\n  setIsToolsOpen: (value: boolean) => value,\n  setOffsetBottom: (value: number) => void value,\n  setSplitPanelReportedSize: (value: number) => void value,\n  splitPanelMaxWidth: 280,\n  splitPanelMinWidth: 280,\n  splitPanelOpen: false,\n  splitPanelPosition: 'bottom',\n  splitPanelPreferences: { position: 'bottom' },\n  splitPanelReportedSize: 0,\n  splitPanelSize: 0,\n  stickyNotifications: false,\n  tools: null,\n};\n\n/**\n * The default values are destructured in the context instantiation to\n * prevent downstream Typescript errors. This could likely be replaced\n * by a context interface definition that extends the AppLayout interface.\n */\nexport const AppLayoutContext = createContext({ ...defaults });\n\ntype AppLayoutProviderProps = AppLayoutProps & {\n  children: React.ReactNode;\n};\n\nexport const AppLayoutProvider = React.forwardRef(\n  (\n    {\n      toolsHide,\n      toolsOpen: controlledToolsOpen,\n      navigationHide,\n      navigationOpen: controlledNavigationOpen,\n      contentType = 'default',\n      children,\n      ...props\n    }: AppLayoutProviderProps,\n    forwardRef: React.Ref<AppLayoutProps.Ref>\n  ) => {\n    const isMobile = useMobile();\n\n    if (isDevelopment) {\n      if (controlledToolsOpen && toolsHide) {\n        warnOnce(\n          'AppLayout',\n          `You have enabled both the \\`toolsOpen\\` prop and the \\`toolsHide\\` prop. This is not supported. Set \\`toolsOpen\\` to \\`false\\` when you set \\`toolsHide\\` to \\`true\\`.`\n        );\n      }\n    }\n\n    /**\n     * The overlap height has a default set in CSS but can also be dynamically overridden\n     * for content types (such as Table and Wizard) that have variable size content in the overlap.\n     */\n    const [dynamicOverlapHeight, setDynamicOverlapHeight] = useState(0);\n\n    /**\n     * Set the default values for minimum and maximum content width.\n     */\n    const geckoMaxCssLength = ((1 << 30) - 1) / 60;\n    const halfGeckoMaxCssLength = geckoMaxCssLength / 2;\n    // CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n    // Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n    const maxContentWidth =\n      props.maxContentWidth && props.maxContentWidth > halfGeckoMaxCssLength\n        ? halfGeckoMaxCssLength\n        : props.maxContentWidth ?? 0;\n    const minContentWidth = props.minContentWidth ?? 280;\n\n    /**\n     * Determine the default state of the Navigation and Tools drawers.\n     * Mobile viewports should be closed by default under all circumstances.\n     * If the navigationOpen prop has been set then that should take precedence\n     * over the contentType prop. Desktop viewports that do not have the\n     * navigationOpen or contentType props set will use the default contentType.\n     */\n    const contentTypeDefaults = applyDefaults(contentType, { maxContentWidth, minContentWidth }, true);\n\n    /**\n     * The useControllable hook will set the default value and manage either\n     * the controlled or uncontrolled state of the Navigation drawer. The logic\n     * for determining the default state is colocated with the Navigation component.\n     *\n     * The callback that will be passed to the Navigation and AppBar\n     * components to handle the click events that will change the state\n     * of the Navigation drawer. It will set the Navigation state with the\n     * useControllable hook and also fire the onNavigationChange function to\n     * emit the state change.\n     */\n    const [isNavigationOpen = false, setIsNavigationOpen] = useControllable(\n      controlledNavigationOpen,\n      props.onNavigationChange,\n      isMobile ? false : contentTypeDefaults.navigationOpen,\n      { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }\n    );\n\n    const handleNavigationClick = useCallback(\n      function handleNavigationChange(isOpen: boolean) {\n        setIsNavigationOpen(isOpen);\n        fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });\n      },\n      [props.onNavigationChange, setIsNavigationOpen]\n    );\n\n    /**\n     * The useControllable hook will set the default value and manage either\n     * the controlled or uncontrolled state of the Tools drawer. The logic\n     * for determining the default state is colocated with the Tools component.\n     *\n     * The callback that will be passed to the Navigation and AppBar\n     * components to handle the click events that will change the state\n     * of the Tools drawer. It will set the Tools state with the\n     * useControllable hook and also fire the onToolsChange function to\n     * emit the state change.\n     */\n    const toolsWidth = props.toolsWidth ?? 290;\n    const hasDefaultToolsWidth = props.toolsWidth === undefined;\n\n    const [isToolsOpen = false, setIsToolsOpen] = useControllable(\n      controlledToolsOpen,\n      props.onToolsChange,\n      isMobile ? false : contentTypeDefaults.toolsOpen,\n      { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }\n    );\n\n    const handleToolsClick = useCallback(\n      function handleToolsChange(isOpen: boolean) {\n        setIsToolsOpen(isOpen);\n        fireNonCancelableEvent(props.onToolsChange, { open: isOpen });\n      },\n      [props.onToolsChange, setIsToolsOpen]\n    );\n\n    const navigationVisible = !navigationHide && isNavigationOpen;\n    const toolsVisible = !toolsHide && isToolsOpen;\n    const isAnyPanelOpen = navigationVisible || toolsVisible;\n\n    /**\n     * On mobile viewports the navigation and tools drawers are adjusted to a fixed position\n     * that consumes 100% of the viewport height and width. The body content could potentially\n     * be scrollable underneath the drawer. In order to prevent this a CSS class needs to be\n     * added to the document body that sets overflow to hidden.\n     */\n    useEffect(\n      function handleBodyScroll() {\n        if (isMobile && (isNavigationOpen || isToolsOpen)) {\n          document.body.classList.add(styles['block-body-scroll']);\n        } else {\n          document.body.classList.remove(styles['block-body-scroll']);\n        }\n\n        // Ensure the CSS class is removed from the body on side effect cleanup\n        return function cleanup() {\n          document.body.classList.remove(styles['block-body-scroll']);\n        };\n      },\n      [isMobile, isNavigationOpen, isToolsOpen]\n    );\n\n    /**\n     * The useImperativeHandle hook in conjunction with the forwardRef function\n     * in the AppLayout component definition expose the following callable\n     * functions to component consumers when they put a ref as a property on\n     * their component implementation.\n     */\n    useImperativeHandle(\n      forwardRef,\n      function createImperativeHandle() {\n        return {\n          closeNavigationIfNecessary: function () {\n            isMobile && handleNavigationClick(false);\n          },\n          openTools: function () {\n            handleToolsClick(true);\n          },\n        };\n      },\n      [isMobile, handleNavigationClick, handleToolsClick]\n    );\n\n    /**\n     * Set the default values for the minimum and maximum Split Panel width when it is\n     * in the side position. The useLayoutEffect will compute the available space in the\n     * DOM for the Split Panel given the current state. The minimum and maximum\n     * widths will potentially trigger a side effect that will put the Split Panel into\n     * a forced position on the bottom.\n     */\n    const splitPanelMinWidth = 280;\n    const [splitPanelMaxWidth, setSplitPanelMaxWidth] = useState(splitPanelMinWidth);\n\n    /**\n     * The useControllable hook will set the default value and manage either\n     * the controlled or uncontrolled state of the Split Panel. By default\n     * the Split Panel should always be closed on page load.\n     *\n     * The callback that will be passed to the SplitPanel component\n     * to handle the click events that will change the state of the SplitPanel\n     * to open or closed given the current state. It will set the isSplitPanelOpen\n     * controlled state and fire the onSplitPanelToggle event.\n     */\n    const [isSplitPanelOpen, setIsSplitPanelOpen] = useControllable(\n      props.splitPanelOpen,\n      props.onSplitPanelToggle,\n      false,\n      { componentName: 'AppLayout', controlledProp: 'splitPanelOpen', changeHandler: 'onSplitPanelToggle' }\n    );\n\n    const handleSplitPanelClick = useCallback(\n      function handleSplitPanelChange() {\n        setIsSplitPanelOpen(!isSplitPanelOpen);\n        fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });\n      },\n      [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen]\n    );\n\n    /**\n     * The useControllable hook will manage the controlled or uncontrolled\n     * state of the splitPanelPreferences. By default the splitPanelPreferences\n     * is undefined. When set the object shape should have a single key to indicate\n     * either bottom or side position.\n     *\n     * The callback that will handle changes to the splitPanelPreferences\n     * object that will determine if the SplitPanel is rendered either on the\n     * bottom of the viewport or within the Tools container.\n     */\n    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n      props.splitPanelPreferences,\n      props.onSplitPanelPreferencesChange,\n      undefined,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelPreferences',\n        changeHandler: 'onSplitPanelPreferencesChange',\n      }\n    );\n\n    /**\n     * The Split Panel will be in forced (bottom) position if the defined minimum width is\n     * greater than the maximum width. In other words, the maximum width is the currently\n     * available horizontal space based on all other components that are rendered. If the\n     * minimum width exceeds this value then there is not enough horizontal space and we must\n     * force it to the bottom position.\n     */\n    const [isSplitPanelForcedPosition, setSplitPanelForcedPosition] = useState(false);\n    const splitPanelPosition = getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences);\n\n    useLayoutEffect(\n      function handleSplitPanelForcePosition() {\n        setSplitPanelForcedPosition(splitPanelMinWidth > splitPanelMaxWidth);\n      },\n      [splitPanelMaxWidth, splitPanelMinWidth]\n    );\n\n    /**\n     * The useControllable hook will set the default size of the SplitPanel based\n     * on the default position set in the splitPanelPreferences. The logic for the\n     * default size is contained in the SplitPanel component. The splitPanelControlledSize\n     * will be bound to the size property in the SplitPanel context for rendering.\n     *\n     * The callback that will be passed to the SplitPanel component\n     * to handle the resize events that will change the size of the SplitPanel.\n     * It will set the splitPanelControlledSize controlled state and fire the\n     * onSplitPanelResize event.\n     */\n    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n\n    const [splitPanelSize, setSplitPanelSize] = useControllable(\n      props.splitPanelSize,\n      props.onSplitPanelResize,\n      getSplitPanelDefaultSize(splitPanelPosition),\n      { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n    );\n\n    const handleSplitPanelResize = useCallback(\n      function handleSplitPanelChange(detail: { size: number }) {\n        setSplitPanelSize(detail.size);\n        fireNonCancelableEvent(props.onSplitPanelResize, detail);\n      },\n      [props.onSplitPanelResize, setSplitPanelSize]\n    );\n\n    const handleSplitPanelPreferencesChange = useCallback(\n      function handleSplitPanelChange(detail: AppLayoutProps.SplitPanelPreferences) {\n        setSplitPanelPreferences(detail);\n        fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);\n      },\n      [props.onSplitPanelPreferencesChange, setSplitPanelPreferences]\n    );\n\n    /**\n     * The Layout element is not necessarily synonymous with the client\n     * viewport width. There can be content in the horizontal viewport\n     * that exists on either side of the AppLayout. This resize observer\n     * will set the custom property of the Layout element width that\n     * is used for various horizontal constraints such as the maximum\n     * allowed width of the Tools container.\n     *\n     * The offsetLeft of the Main will return the distance that the\n     * Main element has from the left edge of the Layout component.\n     * The offsetLeft value can vary based on the presence and state\n     * of the Navigation as well as content gaps in the grid definition.\n     * This value is used to determine the max width constraint calculation\n     * for the Tools container.\n     */\n    const [layoutContainerQuery, layoutElement] = useContainerQuery(rect => rect.width);\n    const layoutWidth = layoutContainerQuery ?? 0;\n\n    const mainElement = useRef<HTMLDivElement>(null);\n    const [mainOffsetLeft, setMainOffsetLeft] = useState(0);\n\n    useLayoutEffect(\n      function handleMainOffsetLeft() {\n        setMainOffsetLeft(mainElement?.current?.offsetLeft ?? 0);\n      },\n      [layoutWidth, isNavigationOpen, isToolsOpen, splitPanelReportedSize]\n    );\n\n    useLayoutEffect(\n      function handleSplitPanelMaxWidth() {\n        /**\n         * Warning! This is a hack! In order to accurately calculate if there is adequate\n         * horizontal space for the Split Panel to be in the side position we need two values\n         * that are not available in JavaScript.\n         *\n         * The first is the the content gap on the right which is stored in a design token\n         * and applied in the Layout CSS:\n         *\n         *  $contentGapRight: #{awsui.$space-scaled-2x-xxxl};\n         *\n         * The second is the width of the element that has the circular buttons for the\n         * Tools and Split Panel. This could be suppressed given the state of the Tools\n         * drawer returning a zero value. It would, however, be rendered if the Split Panel\n         * were to move into the side position. This is calculated in the Tools CSS and\n         * the Trigger button CSS with design tokens:\n         *\n         * padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;\n         * width: awsui.$space-layout-toggle-diameter;\n         *\n         * These values will be defined below as static integers that are rough approximations\n         * of their computed width when rendered in the DOM, but doubled to ensure adequate\n         * spacing for the Split Panel to be in side position.\n         */\n        const contentGapRight = 80; // Approximately 40px when rendered but doubled for safety\n        const toolsFormOffsetWidth = 160; // Approximately 80px when rendered but doubled for safety\n        const toolsOffsetWidth = isToolsOpen ? toolsWidth : 0;\n\n        setSplitPanelMaxWidth(\n          layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsOffsetWidth - toolsFormOffsetWidth\n        );\n      },\n      [isNavigationOpen, isToolsOpen, layoutWidth, mainOffsetLeft, minContentWidth, toolsWidth]\n    );\n\n    /**\n     * Because the notifications slot does not give us any direction insight into\n     * what the state of the child content is we need to have a mechanism for\n     * tracking the height of the notifications and whether or not it has content.\n     * The height of the notifications is an integer that will be used as a custom\n     * property on the Layout component to determine what the sticky offset should\n     * be if there are sticky notifications. This could be any number including\n     * zero based on how the child content renders. The hasNotificationsContent boolean\n     * is simply centralizing the logic of the notifications height being > 0 such\n     * that it is not repeated in various components (such as AppBar) that need to\n     * know if the notifications slot is empty.\n     */\n    const [notificationsContainerQuery, notificationsElement] = useContainerQuery(rect => rect.height);\n    const [notificationsHeight, setNotificationsHeight] = useState(0);\n    const [hasNotificationsContent, setHasNotificationsContent] = useState(false);\n\n    useEffect(\n      function handleNotificationsContent() {\n        setNotificationsHeight(notificationsContainerQuery ?? 0);\n        setHasNotificationsContent(notificationsContainerQuery && notificationsContainerQuery > 0 ? true : false);\n      },\n      [notificationsContainerQuery]\n    );\n\n    /**\n     * The offsetBottom value is used to determine the distance from the bottom of the\n     * viewport a sticky element should be placed. A non-zero value means that there\n     * is either a footer outside of the AppLayout, a SplitPanel in the bottom position\n     * within the AppLayout, or both.\n     */\n    const [offsetBottom, setOffsetBottom] = useState(0);\n\n    return (\n      <AppLayoutContext.Provider\n        value={{\n          ...defaults,\n          ...props,\n          contentType,\n          dynamicOverlapHeight,\n          hasDefaultToolsWidth,\n          handleNavigationClick,\n          handleSplitPanelClick,\n          handleSplitPanelPreferencesChange,\n          handleSplitPanelResize,\n          handleToolsClick,\n          hasNotificationsContent,\n          isAnyPanelOpen,\n          isMobile,\n          isNavigationOpen: isNavigationOpen ?? false,\n          isSplitPanelForcedPosition,\n          isSplitPanelOpen,\n          isToolsOpen,\n          layoutElement,\n          layoutWidth,\n          mainElement,\n          mainOffsetLeft,\n          maxContentWidth,\n          minContentWidth,\n          navigationHide,\n          notificationsElement,\n          notificationsHeight,\n          offsetBottom,\n          setDynamicOverlapHeight,\n          setOffsetBottom,\n          setSplitPanelReportedSize,\n          splitPanelMaxWidth,\n          splitPanelMinWidth,\n          splitPanelPosition,\n          splitPanelPreferences,\n          splitPanelReportedSize,\n          splitPanelSize,\n          toolsHide,\n          toolsOpen: isToolsOpen,\n          toolsWidth,\n        }}\n      >\n        {children}\n      </AppLayoutContext.Provider>\n    );\n  }\n);\n"]}

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

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

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

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

@@ -0,0 +1,22 @@
+// 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';
+/**
+ * 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 Header() {
+    var _a;
+    var _b = useContext(AppLayoutContext), breadcrumbs = _b.breadcrumbs, contentHeader = _b.contentHeader, hasNotificationsContent = _b.hasNotificationsContent;
+    if (!contentHeader) {
+        return null;
+    }
+    return (React.createElement("header", { className: clsx(styles.content, (_a = {},
+            _a[styles['has-breadcrumbs']] = breadcrumbs,
+            _a[styles['has-notifications-content']] = hasNotificationsContent,
+            _a), 'awsui-context-content-header') }, contentHeader));
+}
+//# sourceMappingURL=header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/header.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;AAErC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM;;IACtB,IAAA,KAA0D,UAAU,CAAC,gBAAgB,CAAC,EAApF,WAAW,iBAAA,EAAE,aAAa,mBAAA,EAAE,uBAAuB,6BAAiC,CAAC;IAE7F,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO;YAEZ,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW;YACxC,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,uBAAuB;iBAEhE,8BAA8B,CAC/B,IAEA,aAAa,CACP,CACV,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';\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 Header() {\n  const { breadcrumbs, contentHeader, hasNotificationsContent } = useContext(AppLayoutContext);\n\n  if (!contentHeader) {\n    return null;\n  }\n\n  return (\n    <header\n      className={clsx(\n        styles.content,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {contentHeader}\n    </header>\n  );\n}\n"]}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AppLayoutProps } from '../interfaces';
+/**
+ * In mobile viewports the AppBar position changes to sticky and is placed
+ * above the notifications. This is handled by adjusting the row positions
+ * in CSS for the AppBar and Notifications components relative to the grid
+ * definition in the Layout component. In order to keep alignment between
+ * the visual ordering and logical ordering of the document the logical order
+ * of these components is also modified in the markup below.
+ */
+declare const AppLayoutWithRef: React.ForwardRefExoticComponent<AppLayoutProps & React.RefAttributes<AppLayoutProps.Ref>>;
+export default AppLayoutWithRef;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAU/C;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2FAiCpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,40 @@
+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 AppBar from './app-bar';
+import { AppLayoutContext, AppLayoutProvider } from './context';
+import Background from './background';
+import Header from './header';
+import Layout from './layout';
+import Main from './main';
+import Navigation from './navigation';
+import Notifications from './notifications';
+import SplitPanel from './split-panel';
+import Tools from './tools';
+/**
+ * In mobile viewports the AppBar position changes to sticky and is placed
+ * above the notifications. This is handled by adjusting the row positions
+ * in CSS for the AppBar and Notifications components relative to the grid
+ * definition in the Layout component. In order to keep alignment between
+ * the visual ordering and logical ordering of the document the logical order
+ * of these components is also modified in the markup below.
+ */
+var AppLayoutWithRef = React.forwardRef(function AppLayout(props, ref) {
+    var isMobile = useContext(AppLayoutContext).isMobile;
+    return (React.createElement(AppLayoutProvider, __assign({}, props, { ref: ref }),
+        React.createElement(SplitPanel, null,
+            React.createElement(Layout, null,
+                React.createElement(Background, null),
+                React.createElement(Navigation, null),
+                isMobile && React.createElement(AppBar, null),
+                React.createElement(Notifications, null),
+                !isMobile && React.createElement(AppBar, null),
+                React.createElement(Header, null),
+                React.createElement(Main, null),
+                React.createElement(SplitPanel.Bottom, null),
+                React.createElement(Tools, null,
+                    React.createElement(SplitPanel.Side, null))))));
+});
+export default AppLayoutWithRef;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEhE,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B;;;;;;;GAOG;AACH,IAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,SAAS,CAC1D,KAAqB,EACrB,GAAkC;IAE1B,IAAA,QAAQ,GAAK,UAAU,CAAC,gBAAgB,CAAC,SAAjC,CAAkC;IAElD,OAAO,CACL,oBAAC,iBAAiB,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QACpC,oBAAC,UAAU;YACT,oBAAC,MAAM;gBACL,oBAAC,UAAU,OAAG;gBAEd,oBAAC,UAAU,OAAG;gBAEb,QAAQ,IAAI,oBAAC,MAAM,OAAG;gBAEvB,oBAAC,aAAa,OAAG;gBAEhB,CAAC,QAAQ,IAAI,oBAAC,MAAM,OAAG;gBAExB,oBAAC,MAAM,OAAG;gBAEV,oBAAC,IAAI,OAAG;gBAER,oBAAC,UAAU,CAAC,MAAM,OAAG;gBAErB,oBAAC,KAAK;oBACJ,oBAAC,UAAU,CAAC,IAAI,OAAG,CACb,CACD,CACE,CACK,CACrB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,gBAAgB,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 AppBar from './app-bar';\nimport { AppLayoutContext, AppLayoutProvider } from './context';\nimport { AppLayoutProps } from '../interfaces';\nimport Background from './background';\nimport Header from './header';\nimport Layout from './layout';\nimport Main from './main';\nimport Navigation from './navigation';\nimport Notifications from './notifications';\nimport SplitPanel from './split-panel';\nimport Tools from './tools';\n\n/**\n * In mobile viewports the AppBar position changes to sticky and is placed\n * above the notifications. This is handled by adjusting the row positions\n * in CSS for the AppBar and Notifications components relative to the grid\n * definition in the Layout component. In order to keep alignment between\n * the visual ordering and logical ordering of the document the logical order\n * of these components is also modified in the markup below.\n */\nconst AppLayoutWithRef = React.forwardRef(function AppLayout(\n  props: AppLayoutProps,\n  ref: React.Ref<AppLayoutProps.Ref>\n) {\n  const { isMobile } = useContext(AppLayoutContext);\n\n  return (\n    <AppLayoutProvider {...props} ref={ref}>\n      <SplitPanel>\n        <Layout>\n          <Background />\n\n          <Navigation />\n\n          {isMobile && <AppBar />}\n\n          <Notifications />\n\n          {!isMobile && <AppBar />}\n\n          <Header />\n\n          <Main />\n\n          <SplitPanel.Bottom />\n\n          <Tools>\n            <SplitPanel.Side />\n          </Tools>\n        </Layout>\n      </SplitPanel>\n    </AppLayoutProvider>\n  );\n});\n\nexport default AppLayoutWithRef;\n"]}