@cloudscape-design/components-themeable 3.0.1 → 3.0.4

package/lib/internal/template/alert/interfaces.d.ts

@@ -0,0 +1,55 @@
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export declare namespace AlertProps {
+    type Type = 'success' | 'error' | 'warning' | 'info';
+}
+export interface AlertProps extends BaseComponentProps {
+    /**
+     * Specifies the type of message you want to display.
+     */
+    type?: AlertProps.Type;
+    /**
+     * Determines whether the alert is displayed.
+     * @deprecated Use conditional rendering in your code instead of this prop
+     */
+    visible?: boolean;
+    /**
+     * Adds a close button to the alert when set to `true`.
+     * An `onDismiss` event is fired when a user clicks the button.
+     */
+    dismissible?: boolean;
+    /**
+     * Adds an aria-label to the dismiss button.
+     */
+    dismissAriaLabel?: string;
+    /**
+     * Primary text displayed in the element.
+     */
+    children?: React.ReactNode;
+    /**
+     * Heading text.
+     */
+    header?: React.ReactNode;
+    /**
+     * Displays an action button next to the message area when set.
+     * An `onButtonClick` event is fired when the user clicks it.
+     * **Deprecated**, replaced by `action`.
+     */
+    buttonText?: React.ReactNode;
+    /**
+     * Specifies an action for the alert message.
+     * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.
+     */
+    action?: React.ReactNode;
+    /**
+     * Fired when the user clicks the close icon that is displayed
+     * when the `dismissible` property is set to `true`.
+     */
+    onDismiss?: NonCancelableEventHandler;
+    /**
+     * Fired when the user clicks the action button.
+     * **Deprecated**, replaced by `action`.
+     */
+    onButtonClick?: NonCancelableEventHandler;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/alert/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C"}

package/lib/internal/template/alert/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * **Deprecated**, replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated**, replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n}\n"]}

package/lib/internal/template/app-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AA6hBF,eAAe,SAAS,CAAC"}

package/lib/internal/template/app-layout/index.js

@@ -0,0 +1,314 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { getBaseProps } from '../internal/base-component';
+import { useControllable } from '../internal/hooks/use-controllable';
+import { useMobile } from '../internal/hooks/use-mobile';
+import { fireNonCancelableEvent } from '../internal/events';
+import { applyDefaults } from './defaults';
+import { Notifications } from './notifications';
+import { MobileToolbar } from './mobile-toolbar';
+import { SplitPanelWrapper } from './split-panel-wrapper';
+import { useFocusControl } from './utils/use-focus-control';
+import useWindowWidth from './utils/use-window-width';
+import useContentHeight from './utils/use-content-height';
+import styles from './styles.css.js';
+import testutilStyles from './test-classes/styles.css.js';
+import { findUpUntil } from '../internal/utils/dom';
+import { AppLayoutContext } from '../internal/context/app-layout-context';
+import { useContainerQuery } from '../internal/hooks/container-queries';
+import { useStableEventHandler } from '../internal/hooks/use-stable-event-handler';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { CONSTRAINED_MAIN_PANEL_MIN_HEIGHT, CONSTRAINED_PAGE_HEIGHT, getSplitPanelDefaultSize, MAIN_PANEL_MIN_HEIGHT, } from '../split-panel/utils/size-utils';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import ContentWrapper from './content-wrapper';
+import { DarkHeader } from './dark-header';
+import { isMotionDisabled } from '../internal/motion';
+import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
+import { NavigationPanel } from './navigation-panel';
+import { ToolsAndSplitPanel } from './tools-and-split-panel';
+import { usePreviousFrameValue } from '../internal/hooks/use-previous-frame';
+import useAppLayoutOffsets from './utils/use-content-width';
+import { isDevelopment } from '../internal/is-development';
+import { warnOnce } from '../internal/logging';
+import RefreshedAppLayout from './visual-refresh';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+var AppLayout = React.forwardRef(function (_a, ref) {
+    var _b = _a.contentType, contentType = _b === void 0 ? 'default' : _b, _c = _a.headerSelector, headerSelector = _c === void 0 ? '#b #h' : _c, _d = _a.footerSelector, footerSelector = _d === void 0 ? '#b #f' : _d, rest = __rest(_a, ["contentType", "headerSelector", "footerSelector"]);
+    var __internalRootRef = useBaseComponent('AppLayout').__internalRootRef;
+    var isRefresh = useVisualRefresh(__internalRootRef);
+    // This re-builds the props including the default values
+    var props = __assign({ contentType: contentType, headerSelector: headerSelector, footerSelector: footerSelector }, rest);
+    var baseProps = getBaseProps(rest);
+    return (React.createElement("div", __assign({ ref: __internalRootRef }, baseProps), isRefresh ? React.createElement(RefreshedAppLayout, __assign({}, props, { ref: ref })) : React.createElement(OldAppLayout, __assign({}, props, { ref: ref }))));
+});
+var OldAppLayout = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c;
+    var navigation = _a.navigation, _d = _a.navigationWidth, navigationWidth = _d === void 0 ? 280 : _d, navigationHide = _a.navigationHide, controlledNavigationOpen = _a.navigationOpen, tools = _a.tools, _e = _a.toolsWidth, toolsWidth = _e === void 0 ? 290 : _e, toolsHide = _a.toolsHide, controlledToolsOpen = _a.toolsOpen, breadcrumbs = _a.breadcrumbs, notifications = _a.notifications, stickyNotifications = _a.stickyNotifications, contentHeader = _a.contentHeader, disableContentHeaderOverlap = _a.disableContentHeaderOverlap, content = _a.content, _f = _a.contentType, contentType = _f === void 0 ? 'default' : _f, disableContentPaddings = _a.disableContentPaddings, disableBodyScroll = _a.disableBodyScroll, maxContentWidth = _a.maxContentWidth, minContentWidth = _a.minContentWidth, _g = _a.headerSelector, headerSelector = _g === void 0 ? '#b #h' : _g, _h = _a.footerSelector, footerSelector = _h === void 0 ? '#b #f' : _h, ariaLabels = _a.ariaLabels, splitPanel = _a.splitPanel, controlledSplitPanelSize = _a.splitPanelSize, controlledSplitPanelOpen = _a.splitPanelOpen, controlledSplitPanelPreferences = _a.splitPanelPreferences, onSplitPanelPreferencesChange = _a.onSplitPanelPreferencesChange, onSplitPanelResize = _a.onSplitPanelResize, onSplitPanelToggle = _a.onSplitPanelToggle, onNavigationChange = _a.onNavigationChange, onToolsChange = _a.onToolsChange;
+    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`.");
+        }
+    }
+    var rootRef = useRef(null);
+    var isMobile = useMobile();
+    var isMotionEnabled = rootRef.current ? !isMotionDisabled(rootRef.current) : false;
+    var defaults = applyDefaults(contentType, { maxContentWidth: maxContentWidth, minContentWidth: minContentWidth }, false);
+    var darkStickyHeaderContentType = ['cards', 'table'].indexOf(contentType) > -1;
+    var _j = useControllable(controlledNavigationOpen, onNavigationChange, isMobile ? false : defaults.navigationOpen, { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }), _k = _j[0], navigationOpen = _k === void 0 ? false : _k, setNavigationOpen = _j[1];
+    var _l = useControllable(controlledToolsOpen, onToolsChange, isMobile ? false : defaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' }), _m = _l[0], toolsOpen = _m === void 0 ? false : _m, setToolsOpen = _l[1];
+    var onNavigationToggle = useCallback(function (open) {
+        setNavigationOpen(open);
+        fireNonCancelableEvent(onNavigationChange, { open: open });
+    }, [setNavigationOpen, onNavigationChange]);
+    var onToolsToggle = useCallback(function (open) {
+        setToolsOpen(open);
+        fireNonCancelableEvent(onToolsChange, { open: open });
+    }, [setToolsOpen, onToolsChange]);
+    var onNavigationClick = function (event) {
+        var hasLink = findUpUntil(event.target, function (node) { return node.tagName === 'A' && !!node.href; });
+        if (hasLink) {
+            onNavigationToggle(false);
+        }
+    };
+    var navigationVisible = !navigationHide && navigationOpen;
+    var toolsVisible = !toolsHide && toolsOpen;
+    var _o = useContentHeight(headerSelector, footerSelector, disableBodyScroll), contentHeightStyle = _o.contentHeightStyle, headerHeight = _o.headerHeight, footerHeight = _o.footerHeight, panelHeightStyle = _o.panelHeightStyle;
+    var _p = useContainerQuery(function (rect) { return rect.height; }), notificationsHeight = _p[0], notificationsRef = _p[1];
+    var _q = useContainerQuery(function (rect) { return (splitPanel ? rect.height : 0); }, [splitPanel]), splitPanelHeight = _q[0], splitPanelRef = _q[1];
+    var _r = useContainerQuery(function (rect) { return (splitPanel ? rect.height : 0); }, [splitPanel]), splitPanelHeaderHeight = _r[0], splitPanelHeaderMeasureRef = _r[1];
+    var splitPanelHeaderRefObject = useRef(null);
+    var splitPanelHeaderRef = useMergeRefs(splitPanelHeaderMeasureRef, splitPanelHeaderRefObject);
+    var anyPanelOpen = navigationVisible || toolsVisible;
+    var hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;
+    var stickyNotificationsHeight = stickyNotifications ? notificationsHeight : null;
+    var _s = useControllable(controlledSplitPanelPreferences, onSplitPanelPreferencesChange, undefined, {
+        componentName: 'AppLayout',
+        controlledProp: 'splitPanelPreferences',
+        changeHandler: 'onSplitPanelPreferencesChange'
+    }), splitPanelPreferences = _s[0], setSplitPanelPreferences = _s[1];
+    var splitPanelPosition = (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) || 'bottom';
+    var closedDrawerWidth = 40;
+    var effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;
+    var effectiveToolsWidth = toolsHide && (!splitPanel || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side')
+        ? 0
+        : toolsOpen
+            ? toolsWidth
+            : closedDrawerWidth;
+    var defaultSplitPanelSize = getSplitPanelDefaultSize(splitPanelPosition);
+    var _t = useControllable(controlledSplitPanelSize, onSplitPanelResize, defaultSplitPanelSize, {
+        componentName: 'AppLayout',
+        controlledProp: 'splitPanelSize',
+        changeHandler: 'onSplitPanelResize'
+    }), _u = _t[0], splitPanelSize = _u === void 0 ? defaultSplitPanelSize : _u, setSplitPanelSize = _t[1];
+    var _v = useControllable(controlledSplitPanelOpen, onSplitPanelToggle, false, {
+        componentName: 'AppLayout',
+        controlledProp: 'splitPanelOpen',
+        changeHandler: 'onSplitPanelToggle'
+    }), _w = _v[0], splitPanelOpen = _w === void 0 ? false : _w, setSplitPanelOpen = _v[1];
+    var mainContentRef = useRef(null);
+    var legacyScrollRootRef = useRef(null);
+    var onSplitPanelPreferencesSet = useCallback(function (detail) {
+        setSplitPanelPreferences(detail);
+        fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);
+    }, [setSplitPanelPreferences, onSplitPanelPreferencesChange]);
+    var onSplitPanelSizeSet = useCallback(function (detail) {
+        setSplitPanelSize(detail.size);
+        fireNonCancelableEvent(onSplitPanelResize, detail);
+    }, [setSplitPanelSize, onSplitPanelResize]);
+    var onToggle = useCallback(function () {
+        setSplitPanelOpen(!splitPanelOpen);
+        fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });
+    }, [setSplitPanelOpen, splitPanelOpen, onSplitPanelToggle]);
+    var getSplitPanelMaxWidth = useStableEventHandler(function () {
+        if (!mainContentRef.current || !defaults.minContentWidth) {
+            return NaN;
+        }
+        var width = parseInt(getComputedStyle(mainContentRef.current).width);
+        // when disableContentPaddings is true there is less available space,
+        // so we subtract space-scaled-2x-xxxl * 2 for left and right padding
+        var contentPadding = disableContentPaddings ? 80 : 0;
+        var spaceAvailable = width - defaults.minContentWidth - contentPadding;
+        var spaceTaken = finalSplitPanePosition === 'side' ? splitPanelSize : 0;
+        return Math.max(0, spaceTaken + spaceAvailable);
+    });
+    var getSplitPanelMaxHeight = useStableEventHandler(function () {
+        if (typeof document === 'undefined') {
+            return 0; // render the split panel in its minimum possible size
+        }
+        else if (disableBodyScroll && legacyScrollRootRef.current) {
+            var availableHeight = legacyScrollRootRef.current.clientHeight;
+            return availableHeight < CONSTRAINED_PAGE_HEIGHT ? availableHeight : availableHeight - MAIN_PANEL_MIN_HEIGHT;
+        }
+        else {
+            var availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;
+            return availableHeight < CONSTRAINED_PAGE_HEIGHT
+                ? availableHeight - CONSTRAINED_MAIN_PANEL_MIN_HEIGHT
+                : availableHeight - MAIN_PANEL_MIN_HEIGHT;
+        }
+    });
+    var _x = useState(false), isForcedPosition = _x[0], setIsForcedPosition = _x[1];
+    var finalSplitPanePosition = isForcedPosition ? 'bottom' : splitPanelPosition;
+    var splitPaneAvailableOnTheSide = Boolean(splitPanel) && finalSplitPanePosition === 'side';
+    var splitPanelOpenOnTheSide = splitPaneAvailableOnTheSide && splitPanelOpen;
+    var toggleButtonsBarWidth = 0;
+    var windowWidth = useWindowWidth();
+    var _y = useAppLayoutOffsets(rootRef.current), leftOffset = _y.left, rightOffset = _y.right;
+    var contentWidthWithSplitPanel = windowWidth -
+        leftOffset -
+        rightOffset -
+        effectiveToolsWidth -
+        effectiveNavigationWidth -
+        (disableContentPaddings ? 0 : toggleButtonsBarWidth);
+    useEffect(function () {
+        var contentWidth = contentWidthWithSplitPanel - splitPanelSize;
+        setIsForcedPosition(isMobile || (defaults.minContentWidth || 0) > contentWidth);
+        // This is a workaround to avoid a forced position due to splitPanelSize, which is
+        // user controlled variable.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [contentWidthWithSplitPanel, defaults.minContentWidth, isMobile]);
+    var navigationClosedWidth = navigationHide || isMobile ? 0 : closedDrawerWidth;
+    var toolsClosedWidth = toolsHide || isMobile ? 0 : closedDrawerWidth;
+    var _z = useState(), splitPanelLastInteraction = _z[0], setSplitPanelLastInteraction = _z[1];
+    useEffectOnUpdate(function () { return setSplitPanelLastInteraction(splitPanelOpen ? { type: 'open' } : { type: 'close' }); }, [splitPanelOpen]);
+    useEffectOnUpdate(function () { return setSplitPanelLastInteraction({ type: 'position' }); }, [splitPanelPosition]);
+    var contentMaxWidthStyle = !isMobile ? { maxWidth: defaults.maxContentWidth } : undefined;
+    var _0 = useState(0), splitPanelReportedSize = _0[0], setSplitPanelReportedSize = _0[1];
+    var splitPanelContext = {
+        topOffset: headerHeight + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
+        bottomOffset: footerHeight,
+        leftOffset: leftOffset + (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
+        rightOffset: rightOffset + (isMobile ? 0 : !toolsHide && toolsOpen ? toolsWidth : toolsClosedWidth),
+        position: finalSplitPanePosition,
+        size: splitPanelSize,
+        getMaxWidth: getSplitPanelMaxWidth,
+        getMaxHeight: getSplitPanelMaxHeight,
+        getHeader: function () { return splitPanelHeaderRefObject.current; },
+        disableContentPaddings: disableContentPaddings,
+        contentWidthStyles: contentMaxWidthStyle,
+        isOpen: splitPanelOpen,
+        isMobile: isMobile,
+        isRefresh: false,
+        isForcedPosition: isForcedPosition,
+        lastInteraction: splitPanelLastInteraction,
+        splitPanelRef: splitPanelRef,
+        splitPanelHeaderRef: splitPanelHeaderRef,
+        onResize: onSplitPanelSizeSet,
+        onToggle: onToggle,
+        onPreferencesChange: onSplitPanelPreferencesSet,
+        reportSize: setSplitPanelReportedSize
+    };
+    var contentWrapperProps = {
+        navigationPadding: navigationHide || !!navigationOpen,
+        toolsPadding: 
+        // tools padding is displayed in one of the three cases
+        // 1. Nothing on the that screen edge (no tools panel and no split panel)
+        (toolsHide && (!splitPanel || finalSplitPanePosition !== 'side')) ||
+            // 2. Tools panel is present and open
+            toolsVisible ||
+            // 3. Split panel is open in side position
+            splitPanelOpenOnTheSide,
+        isMobile: isMobile
+    };
+    var navigationRefs = useFocusControl(navigationOpen);
+    var toolsRefs = useFocusControl(toolsOpen);
+    useImperativeHandle(ref, function () { return ({
+        openTools: function () { return onToolsToggle(true); },
+        closeNavigationIfNecessary: function () {
+            if (isMobile) {
+                onNavigationToggle(false);
+            }
+        }
+    }); }, [isMobile, onNavigationToggle, onToolsToggle]);
+    var splitPanelBottomOffset = (_c = (!splitPanel || finalSplitPanePosition !== 'bottom'
+        ? undefined
+        : splitPanelOpen
+            ? splitPanelHeight
+            : splitPanelHeaderHeight)) !== null && _c !== void 0 ? _c : undefined;
+    var contentWidthStyles = !isMobile
+        ? { minWidth: defaults.minContentWidth, maxWidth: defaults.maxContentWidth }
+        : undefined;
+    var isToolsDrawerHidden = disableContentPaddings;
+    var toolsDrawerWidth = (function () {
+        if (isMobile) {
+            return 0;
+        }
+        var toolsPanelWidth = toolsHide ? 0 : toolsOpen ? toolsWidth : closedDrawerWidth;
+        var splitPanelWidth = !splitPanel || finalSplitPanePosition !== 'side'
+            ? 0
+            : splitPanelOpen
+                ? splitPanelReportedSize
+                : closedDrawerWidth;
+        return toolsPanelWidth + splitPanelWidth;
+    })();
+    var navigationDrawerWidth = (function () {
+        if (isMobile) {
+            return 0;
+        }
+        return effectiveNavigationWidth;
+    })();
+    var contentHeaderProps = {
+        isMobile: isMobile,
+        navigationWidth: effectiveNavigationWidth,
+        toolsWidth: disableContentPaddings
+            ? 0
+            : toolsDrawerWidth
+                ? toolsDrawerWidth
+                : isToolsDrawerHidden
+                    ? toggleButtonsBarWidth
+                    : 0
+    };
+    var previousContentWidth = usePreviousFrameValue(contentWidthWithSplitPanel - (splitPanelOpenOnTheSide ? splitPanelReportedSize : 0));
+    var contentScaleX = (function () {
+        if (isMobile || !isMotionEnabled || !disableContentPaddings || !previousContentWidth) {
+            return undefined;
+        }
+    })();
+    return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef },
+        React.createElement("div", { className: styles['layout-wrapper'], style: contentHeightStyle },
+            isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: function () { return onNavigationToggle(true); }, onToolsOpen: function () { return onToolsToggle(true); }, unfocusable: anyPanelOpen }, breadcrumbs)),
+            React.createElement("div", { className: clsx(styles.layout, disableBodyScroll && styles['layout-no-scroll']) },
+                !navigationHide && (React.createElement(NavigationPanel, { ariaLabels: ariaLabels, footerHeight: footerHeight, headerHeight: headerHeight, isHidden: disableContentPaddings, isMobile: isMobile, isMotionEnabled: isMotionEnabled, navigation: navigation, navigationDrawerWidth: navigationDrawerWidth, navigationOpen: navigationOpen, onClick: isMobile ? onNavigationClick : undefined, onNavigationToggle: onNavigationToggle, panelHeightStyle: panelHeightStyle, toggleRefs: navigationRefs, navigationWidth: navigationWidth })),
+                React.createElement("main", { ref: legacyScrollRootRef, className: clsx(styles['layout-main'], (_b = {},
+                        _b[styles['layout-main-scrollable']] = disableBodyScroll,
+                        _b[testutilStyles['disable-body-scroll-root']] = disableBodyScroll,
+                        _b[styles.unfocusable] = isMobile && anyPanelOpen,
+                        _b)) },
+                    React.createElement("div", { style: {
+                            marginBottom: splitPanelBottomOffset,
+                            transform: contentScaleX ? "scaleX(".concat(contentScaleX, ")") : undefined
+                        } },
+                        notifications && (React.createElement(DarkHeader, __assign({}, contentHeaderProps, { topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && darkStickyHeaderContentType && stickyNotifications }),
+                            React.createElement(Notifications, { testUtilsClassName: clsx(styles.notifications, testutilStyles.notifications), labels: ariaLabels, topOffset: headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef, isMobile: isMobile, navigationPadding: contentWrapperProps.navigationPadding, toolsPadding: contentWrapperProps.toolsPadding, contentWidthStyles: contentWidthStyles }, notifications))),
+                        ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(DarkHeader, __assign({}, contentHeaderProps),
+                            React.createElement(ContentWrapper, __assign({}, contentWrapperProps, { contentWidthStyles: contentWidthStyles }),
+                                !isMobile && breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, styles['breadcrumbs-desktop'], darkStickyHeaderContentType && styles['breadcrumbs-desktop-sticky-header']) }, breadcrumbs)),
+                                contentHeader && (React.createElement("div", { className: clsx(styles['content-header-wrapper'], !hasRenderedNotifications &&
+                                        (isMobile || !breadcrumbs) &&
+                                        styles['content-extra-top-padding'], !hasRenderedNotifications && !breadcrumbs && styles['content-header-wrapper-first-child'], !disableContentHeaderOverlap && styles['content-header-wrapper-overlapped']) }, contentHeader))))),
+                        React.createElement(ContentWrapper, __assign({}, contentWrapperProps, { ref: mainContentRef, disablePaddings: disableContentPaddings, 
+                            // eslint-disable-next-line react/forbid-component-props
+                            className: clsx(!disableContentPaddings && styles['content-wrapper'], !disableContentPaddings &&
+                                (isMobile || !breadcrumbs) &&
+                                !contentHeader &&
+                                styles['content-extra-top-padding'], !hasRenderedNotifications &&
+                                !breadcrumbs &&
+                                !isMobile &&
+                                !contentHeader &&
+                                styles['content-wrapper-first-child']) }),
+                            React.createElement("div", { className: clsx(styles.content, testutilStyles.content, !disableContentHeaderOverlap && contentHeader && styles['content-overlapped']), style: contentWidthStyles },
+                                React.createElement(AppLayoutContext.Provider, { value: {
+                                        stickyOffsetTop: (disableBodyScroll ? 0 : headerHeight) +
+                                            (stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
+                                        stickyOffsetBottom: footerHeight + (splitPanelBottomOffset || 0)
+                                    } }, content)))),
+                    finalSplitPanePosition === 'bottom' && (React.createElement(SplitPanelWrapper, { context: splitPanelContext }, splitPanel))),
+                React.createElement(ToolsAndSplitPanel, { splitPanel: finalSplitPanePosition === 'side' ? splitPanel : undefined, ariaLabels: ariaLabels, closedDrawerWidth: closedDrawerWidth, contentHeightStyle: contentHeightStyle, disableContentPaddings: disableContentPaddings, drawerWidth: toolsDrawerWidth, footerHeight: footerHeight, headerHeight: headerHeight, isHidden: isToolsDrawerHidden, isMobile: isMobile, isMotionEnabled: isMotionEnabled, onToolsToggle: onToolsToggle, panelHeightStyle: panelHeightStyle, splitPanelContext: splitPanelContext, splitPanelOpen: splitPanelOpenOnTheSide, splitPanelReportedSize: splitPanelReportedSize, toggleRefs: toolsRefs, tools: tools, toolsHide: Boolean(toolsHide), toolsOpen: toolsOpen, toolsWidth: toolsWidth })))));
+});
+applyDisplayName(AppLayout, 'AppLayout');
+export default AppLayout;
+//# sourceMappingURL=index.js.map