@cloudscape-design/components-themeable 3.0.1 → 3.0.4

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

@@ -1,335 +0,0 @@
-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/internal/template/app-layout/visual-refresh/context.js.map

@@ -1 +0,0 @@
-{"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/internal/template/app-layout/visual-refresh/layout.d.ts.map

@@ -1 +0,0 @@
-{"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/internal/template/app-layout/visual-refresh/layout.js

@@ -1,130 +0,0 @@
-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/internal/template/app-layout/visual-refresh/layout.js.map

@@ -1 +0,0 @@
-{"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/internal/template/app-layout/visual-refresh/split-panel.d.ts.map

@@ -1 +0,0 @@
-{"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"}