@cloudscape-design/components 3.0.608 → 3.0.610

package/annotation-context/annotation/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_8n93s_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_8n93s_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_8n93s_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_8n93s_140",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_8n93s_140",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_8n93s_143",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_8n93s_143",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_8n93s_146",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_8n93s_146",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_8n93s_149",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_8n93s_149",
-  "annotation": "awsui_annotation_1hpp3_8n93s_157",
-  "next-button": "awsui_next-button_1hpp3_8n93s_158",
-  "previous-button": "awsui_previous-button_1hpp3_8n93s_159",
-  "finish-button": "awsui_finish-button_1hpp3_8n93s_160",
-  "header": "awsui_header_1hpp3_8n93s_161",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_8n93s_162",
-  "content": "awsui_content_1hpp3_8n93s_163",
-  "description": "awsui_description_1hpp3_8n93s_167",
-  "actionBar": "awsui_actionBar_1hpp3_8n93s_172",
-  "stepCounter": "awsui_stepCounter_1hpp3_8n93s_179",
-  "divider": "awsui_divider_1hpp3_8n93s_183",
-  "hotspot": "awsui_hotspot_1hpp3_8n93s_187",
-  "icon": "awsui_icon_1hpp3_8n93s_254"
+  "arrow": "awsui_arrow_1hpp3_10w1c_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_10w1c_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_10w1c_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10w1c_144",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10w1c_144",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10w1c_147",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10w1c_147",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10w1c_150",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10w1c_150",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10w1c_153",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10w1c_153",
+  "annotation": "awsui_annotation_1hpp3_10w1c_161",
+  "next-button": "awsui_next-button_1hpp3_10w1c_162",
+  "previous-button": "awsui_previous-button_1hpp3_10w1c_163",
+  "finish-button": "awsui_finish-button_1hpp3_10w1c_164",
+  "header": "awsui_header_1hpp3_10w1c_165",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_10w1c_166",
+  "content": "awsui_content_1hpp3_10w1c_167",
+  "description": "awsui_description_1hpp3_10w1c_171",
+  "actionBar": "awsui_actionBar_1hpp3_10w1c_176",
+  "stepCounter": "awsui_stepCounter_1hpp3_10w1c_183",
+  "divider": "awsui_divider_1hpp3_10w1c_187",
+  "hotspot": "awsui_hotspot_1hpp3_10w1c_191",
+  "icon": "awsui_icon_1hpp3_10w1c_258"
 };
   

package/annotation-context/annotation/styles.scoped.css

@@ -96,11 +96,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_arrow_1hpp3_8n93s_99:not(#\9) {
+.awsui_arrow_1hpp3_10w1c_99:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_8n93s_103:not(#\9), .awsui_arrow-inner_1hpp3_8n93s_103:not(#\9) {
+.awsui_arrow-outer_1hpp3_10w1c_103:not(#\9), .awsui_arrow-inner_1hpp3_10w1c_103:not(#\9) {
   position: absolute;
   overflow: hidden;
   inline-size: 20px;
@@ -108,7 +108,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_8n93s_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_10w1c_103:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -124,29 +124,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_10w1c_103:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_10w1c_103:not(#\9):dir(rtl)::after {
+  transform: rotate(-45deg);
+  transform-origin: 100% 100%;
+}
+.awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after {
   background-color: var(--color-border-status-info-8upc6f, #0972d3);
 }
-.awsui_arrow-inner_1hpp3_8n93s_103:not(#\9) {
+.awsui_arrow-inner_1hpp3_10w1c_103:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_8n93s_103:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_10w1c_103:not(#\9)::after {
   border-start-start-radius: 1px;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
   background-color: var(--color-background-status-info-mvnbre, #f2f8fd);
 }
-.awsui_arrow-position-right-top_1hpp3_8n93s_140 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_8n93s_140 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_10w1c_144 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_10w1c_144 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
-.awsui_arrow-position-left-top_1hpp3_8n93s_143 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_8n93s_143 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_10w1c_147 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_10w1c_147 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
-.awsui_arrow-position-top-center_1hpp3_8n93s_146 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_8n93s_146 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_10w1c_150 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_10w1c_150 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
-.awsui_arrow-position-bottom-center_1hpp3_8n93s_149 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_8n93s_149 > .awsui_arrow-outer_1hpp3_8n93s_103:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_10w1c_153 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_10w1c_153 > .awsui_arrow-outer_1hpp3_10w1c_103:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
 
@@ -154,37 +158,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_annotation_1hpp3_8n93s_157:not(#\9),
-.awsui_next-button_1hpp3_8n93s_158:not(#\9),
-.awsui_previous-button_1hpp3_8n93s_159:not(#\9),
-.awsui_finish-button_1hpp3_8n93s_160:not(#\9),
-.awsui_header_1hpp3_8n93s_161:not(#\9),
-.awsui_step-counter-content_1hpp3_8n93s_162:not(#\9),
-.awsui_content_1hpp3_8n93s_163:not(#\9) {
+.awsui_annotation_1hpp3_10w1c_161:not(#\9),
+.awsui_next-button_1hpp3_10w1c_162:not(#\9),
+.awsui_previous-button_1hpp3_10w1c_163:not(#\9),
+.awsui_finish-button_1hpp3_10w1c_164:not(#\9),
+.awsui_header_1hpp3_10w1c_165:not(#\9),
+.awsui_step-counter-content_1hpp3_10w1c_166:not(#\9),
+.awsui_content_1hpp3_10w1c_167:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_8n93s_167:not(#\9) {
+.awsui_description_1hpp3_10w1c_171:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_actionBar_1hpp3_8n93s_172:not(#\9) {
+.awsui_actionBar_1hpp3_10w1c_176:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_8n93s_179:not(#\9) {
+.awsui_stepCounter_1hpp3_10w1c_183:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_8n93s_183:not(#\9) {
+.awsui_divider_1hpp3_10w1c_187:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
 
-.awsui_hotspot_1hpp3_8n93s_187:not(#\9) {
+.awsui_hotspot_1hpp3_10w1c_191:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -228,17 +232,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_8n93s_187:not(#\9):focus {
+.awsui_hotspot_1hpp3_10w1c_191:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_8n93s_187:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10w1c_191:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_8n93s_187:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10w1c_191:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_8n93s_187:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10w1c_191:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -252,13 +256,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_8n93s_187:not(#\9):focu
   border-end-end-radius: var(--border-radius-control-circular-focus-ring-w07mub, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_hotspot_1hpp3_8n93s_187 > .awsui_icon_1hpp3_8n93s_254:not(#\9) {
+.awsui_hotspot_1hpp3_10w1c_191 > .awsui_icon_1hpp3_10w1c_258:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-latg1a, #0972d3);
 }
-.awsui_hotspot_1hpp3_8n93s_187:not(#\9):hover > .awsui_icon_1hpp3_8n93s_254 {
+.awsui_hotspot_1hpp3_10w1c_191:not(#\9):hover > .awsui_icon_1hpp3_10w1c_258 {
   stroke: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_hotspot_1hpp3_8n93s_187:not(#\9):active > .awsui_icon_1hpp3_8n93s_254 {
+.awsui_hotspot_1hpp3_10w1c_191:not(#\9):active > .awsui_icon_1hpp3_10w1c_258 {
   stroke: var(--color-text-link-default-latg1a, #0972d3);
 }

package/annotation-context/annotation/styles.selectors.js

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_8n93s_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_8n93s_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_8n93s_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_8n93s_140",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_8n93s_140",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_8n93s_143",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_8n93s_143",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_8n93s_146",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_8n93s_146",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_8n93s_149",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_8n93s_149",
-  "annotation": "awsui_annotation_1hpp3_8n93s_157",
-  "next-button": "awsui_next-button_1hpp3_8n93s_158",
-  "previous-button": "awsui_previous-button_1hpp3_8n93s_159",
-  "finish-button": "awsui_finish-button_1hpp3_8n93s_160",
-  "header": "awsui_header_1hpp3_8n93s_161",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_8n93s_162",
-  "content": "awsui_content_1hpp3_8n93s_163",
-  "description": "awsui_description_1hpp3_8n93s_167",
-  "actionBar": "awsui_actionBar_1hpp3_8n93s_172",
-  "stepCounter": "awsui_stepCounter_1hpp3_8n93s_179",
-  "divider": "awsui_divider_1hpp3_8n93s_183",
-  "hotspot": "awsui_hotspot_1hpp3_8n93s_187",
-  "icon": "awsui_icon_1hpp3_8n93s_254"
+  "arrow": "awsui_arrow_1hpp3_10w1c_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_10w1c_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_10w1c_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10w1c_144",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10w1c_144",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10w1c_147",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10w1c_147",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10w1c_150",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10w1c_150",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10w1c_153",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10w1c_153",
+  "annotation": "awsui_annotation_1hpp3_10w1c_161",
+  "next-button": "awsui_next-button_1hpp3_10w1c_162",
+  "previous-button": "awsui_previous-button_1hpp3_10w1c_163",
+  "finish-button": "awsui_finish-button_1hpp3_10w1c_164",
+  "header": "awsui_header_1hpp3_10w1c_165",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_10w1c_166",
+  "content": "awsui_content_1hpp3_10w1c_167",
+  "description": "awsui_description_1hpp3_10w1c_171",
+  "actionBar": "awsui_actionBar_1hpp3_10w1c_176",
+  "stepCounter": "awsui_stepCounter_1hpp3_10w1c_183",
+  "divider": "awsui_divider_1hpp3_10w1c_187",
+  "hotspot": "awsui_hotspot_1hpp3_10w1c_191",
+  "icon": "awsui_icon_1hpp3_10w1c_258"
 };
   

package/app-layout/classic.d.ts

@@ -1,14 +1,20 @@
 import React from 'react';
 import { AppLayoutProps } from './interfaces';
-declare const ClassicAppLayout: React.ForwardRefExoticComponent<AppLayoutProps & {
+declare const ClassicAppLayout: React.ForwardRefExoticComponent<Omit<AppLayoutProps, "headerSelector" | "footerSelector"> & {
     contentType: AppLayoutProps.ContentType;
     navigationOpen: boolean;
     navigationWidth: number;
     toolsWidth: number;
     minContentWidth: number;
-    headerSelector: string;
-    footerSelector: string;
     onNavigationChange: import("../internal/events").NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;
+} & {
+    placement: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        width: number;
+    };
 } & React.RefAttributes<AppLayoutProps.Ref>>;
 export default ClassicAppLayout;
 //# sourceMappingURL=classic.d.ts.map

package/app-layout/classic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"classic.d.ts","sourceRoot":"","sources":["../../../src/app-layout/classic.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,cAAc,EAA8B,MAAM,cAAc,CAAC;AAiC1E,QAAA,MAAM,gBAAgB;;;;;;;;;4CAwjBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"classic.d.ts","sourceRoot":"","sources":["../../../src/app-layout/classic.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,cAAc,EAA8B,MAAM,cAAc,CAAC;AA+B1E,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;4CAsjBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/app-layout/classic.js

@@ -9,7 +9,6 @@ import { fireNonCancelableEvent } from '../internal/events';
 import { Notifications } from './notifications';
 import { MobileToolbar } from './mobile-toolbar';
 import { useFocusControl } from './utils/use-focus-control';
-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';
@@ -19,7 +18,6 @@ import ContentWrapper from './content-wrapper';
 import { Drawer, DrawerTriggersBar } from './drawer';
 import { ResizableDrawer } from './drawer/resizable-drawer';
 import { SPLIT_PANEL_MIN_WIDTH, SideSplitPanelDrawer, SplitPanelProvider, } from './split-panel';
-import useAppLayoutRect from './utils/use-app-layout-rect';
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import { useSplitPanelFocusControl } from './utils/use-split-panel-focus-control';
 import { TOOLS_DRAWER_ID, useDrawers } from './utils/use-drawers';
@@ -27,7 +25,7 @@ import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { togglesConfig } from './toggles';
 const ClassicAppLayout = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f, _g;
-    var { navigation, navigationWidth, navigationHide, navigationOpen, tools, toolsWidth, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType, disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, headerSelector, footerSelector, ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange, drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId } = _a, rest = __rest(_a, ["navigation", "navigationWidth", "navigationHide", "navigationOpen", "tools", "toolsWidth", "toolsHide", "toolsOpen", "breadcrumbs", "notifications", "stickyNotifications", "contentHeader", "disableContentHeaderOverlap", "content", "contentType", "disableContentPaddings", "disableBodyScroll", "maxContentWidth", "minContentWidth", "headerSelector", "footerSelector", "ariaLabels", "splitPanel", "splitPanelSize", "splitPanelOpen", "splitPanelPreferences", "onSplitPanelPreferencesChange", "onSplitPanelResize", "onSplitPanelToggle", "onNavigationChange", "onToolsChange", "drawers", "onDrawerChange", "activeDrawerId"]);
+    var { navigation, navigationWidth, navigationHide, navigationOpen, tools, toolsWidth, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType, disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, placement, ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange, drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId } = _a, rest = __rest(_a, ["navigation", "navigationWidth", "navigationHide", "navigationOpen", "tools", "toolsWidth", "toolsHide", "toolsOpen", "breadcrumbs", "notifications", "stickyNotifications", "contentHeader", "disableContentHeaderOverlap", "content", "contentType", "disableContentPaddings", "disableBodyScroll", "maxContentWidth", "minContentWidth", "placement", "ariaLabels", "splitPanel", "splitPanelSize", "splitPanelOpen", "splitPanelPreferences", "onSplitPanelPreferencesChange", "onSplitPanelResize", "onSplitPanelToggle", "onNavigationChange", "onToolsChange", "drawers", "onDrawerChange", "activeDrawerId"]);
     // Private API for embedded view mode
     const __embeddedViewMode = Boolean(rest.__embeddedViewMode);
     const rootRef = useRef(null);
@@ -73,7 +71,17 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
     }, [isMobile, onNavigationToggle]);
     const navigationVisible = !navigationHide && navigationOpen;
     const toolsVisible = !toolsHide && toolsOpen;
-    const { contentHeightStyle, headerHeight, footerHeight } = useContentHeight(headerSelector, footerSelector, disableBodyScroll);
+    const [headerFooterHeight, setHeaderFooterHeight] = useState(0);
+    // Delay applying changes in header/footer height, as applying them immediately can cause
+    // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects
+    // further up the tree, therefore blocking notifications to prevent loops
+    useEffect(() => {
+        const id = requestAnimationFrame(() => setHeaderFooterHeight(placement.top + placement.bottom));
+        return () => cancelAnimationFrame(id);
+    }, [placement.top, placement.bottom]);
+    const contentHeightStyle = {
+        [disableBodyScroll ? 'height' : 'minHeight']: `calc(100vh - ${headerFooterHeight}px)`,
+    };
     const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.contentBoxHeight);
     const anyPanelOpen = navigationVisible || toolsVisible || !!activeDrawer;
     const hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;
@@ -144,23 +152,16 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
             return availableHeight < CONSTRAINED_PAGE_HEIGHT ? availableHeight : availableHeight - MAIN_PANEL_MIN_HEIGHT;
         }
         else {
-            const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;
+            const availableHeight = document.documentElement.clientHeight - placement.top - placement.bottom;
             return availableHeight < CONSTRAINED_PAGE_HEIGHT
                 ? availableHeight - CONSTRAINED_MAIN_PANEL_MIN_HEIGHT
                 : availableHeight - MAIN_PANEL_MIN_HEIGHT;
         }
     });
-    const { left: leftOffset, right: rightOffset, width: documentWidth } = useAppLayoutRect(rootRef.current);
     const rightDrawerBarWidth = drawers ? (drawers.length > 1 ? closedDrawerWidth : 0) : 0;
     const contentPadding = 80;
     // all content except split-panel + drawers/tools area
-    const resizableSpaceAvailable = Math.max(0, documentWidth -
-        leftOffset -
-        rightOffset -
-        effectiveNavigationWidth -
-        minContentWidth -
-        contentPadding -
-        rightDrawerBarWidth);
+    const resizableSpaceAvailable = Math.max(0, placement.width - effectiveNavigationWidth - minContentWidth - contentPadding - rightDrawerBarWidth);
     // if there is no space to display split panel in the side, force to bottom
     const isSplitPanelForcedPosition = isMobile || resizableSpaceAvailable - effectiveToolsWidth < SPLIT_PANEL_MIN_WIDTH;
     const finalSplitPanePosition = isSplitPanelForcedPosition ? 'bottom' : splitPanelPosition;
@@ -173,10 +174,10 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
     const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
     const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);
     const splitPanelContextProps = {
-        topOffset: headerHeight + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
-        bottomOffset: footerHeight,
-        leftOffset: leftOffset + (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
-        rightOffset: isMobile ? 0 : rightOffset + effectiveToolsWidth + rightDrawerBarWidth,
+        topOffset: placement.top + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
+        bottomOffset: placement.bottom,
+        leftOffset: placement.left + (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
+        rightOffset: isMobile ? 0 : placement.right + effectiveToolsWidth + rightDrawerBarWidth,
         position: finalSplitPanePosition,
         size: splitPanelSize,
         maxWidth: splitPanelMaxWidth,
@@ -234,7 +235,7 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
             : splitPanelReportedHeaderHeight)) !== null && _b !== void 0 ? _b : undefined;
     const [mobileBarHeight, mobileBarRef] = useContainerQuery(rect => rect.contentBoxHeight);
     return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef, style: contentHeightStyle },
-        isMobile && !__embeddedViewMode && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
+        isMobile && !__embeddedViewMode && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: placement.top, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
                 onActiveDrawerChange(newDrawerId);
                 if (newDrawerId !== activeDrawerId) {
                     focusToolsButtons();
@@ -242,7 +243,7 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
                 }
             } }, breadcrumbs)),
         React.createElement("div", { className: clsx(styles.layout, disableBodyScroll && styles['layout-no-scroll']) },
-            !navigationHide && (React.createElement(Drawer, { contentClassName: testutilStyles.navigation, toggleClassName: testutilStyles['navigation-toggle'], closeClassName: testutilStyles['navigation-close'], ariaLabels: togglesConfig.navigation.getLabels(ariaLabels), bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, isOpen: navigationOpen, onClick: isMobile ? onNavigationClick : undefined, onToggle: onNavigationToggle, toggleRefs: navigationRefs, type: "navigation", width: navigationWidth }, navigation)),
+            !navigationHide && (React.createElement(Drawer, { contentClassName: testutilStyles.navigation, toggleClassName: testutilStyles['navigation-toggle'], closeClassName: testutilStyles['navigation-close'], ariaLabels: togglesConfig.navigation.getLabels(ariaLabels), bottomOffset: placement.bottom, topOffset: placement.top, isMobile: isMobile, isOpen: navigationOpen, onClick: isMobile ? onNavigationClick : undefined, onToggle: onNavigationToggle, toggleRefs: navigationRefs, type: "navigation", width: navigationWidth }, navigation)),
             React.createElement("main", { ref: legacyScrollRootRef, className: clsx(styles['layout-main'], {
                     [styles['layout-main-scrollable']]: disableBodyScroll,
                     [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,
@@ -251,7 +252,7 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
                 React.createElement("div", { style: {
                         marginBottom: splitPanelBottomOffset,
                     } },
-                    notifications && (React.createElement(Notifications, { disableContentPaddings: disableContentPaddings, testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
+                    notifications && (React.createElement(Notifications, { disableContentPaddings: disableContentPaddings, testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : placement.top, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
                     ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(ContentWrapper, Object.assign({}, contentWrapperProps),
                         !isMobile && breadcrumbs && (React.createElement("div", { className: clsx(testutilStyles.breadcrumbs, styles['breadcrumbs-desktop']) }, 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)))),
@@ -269,9 +270,9 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
                                 stickyOffsetTop: 
                                 // We don't support the table header being sticky in case the deprecated disableBodyScroll is enabled,
                                 // therefore we ensure the table header scrolls out of view by offseting a large enough value (9999px)
-                                (disableBodyScroll ? (isMobile ? -9999 : 0) : headerHeight) +
+                                (disableBodyScroll ? (isMobile ? -9999 : 0) : placement.top) +
                                     (isMobile ? 0 : stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
-                                stickyOffsetBottom: footerHeight + (splitPanelBottomOffset || 0),
+                                stickyOffsetBottom: placement.bottom + (splitPanelBottomOffset || 0),
                                 mobileBarHeight: mobileBarHeight !== null && mobileBarHeight !== void 0 ? mobileBarHeight : 0,
                             } }, content))),
                 finalSplitPanePosition === 'bottom' && splitPanelWrapped),
@@ -281,14 +282,14 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
                     closeLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.closeButton,
                     mainLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.drawerName,
                     resizeHandle: (_f = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _f === void 0 ? void 0 : _f.resizeHandle,
-                }, minWidth: minDrawerSize, maxWidth: drawerMaxSize, width: activeDrawerSize, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: isOpen => {
+                }, minWidth: minDrawerSize, maxWidth: drawerMaxSize, width: activeDrawerSize, bottomOffset: placement.bottom, topOffset: placement.top, isMobile: isMobile, onToggle: isOpen => {
                     if (!isOpen) {
                         focusToolsButtons();
                         focusDrawersButtons();
                         onActiveDrawerChange(null);
                     }
-                }, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, toolsContent: (_g = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _g === void 0 ? void 0 : _g.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
-            hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { drawerRefs: drawerRefs, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
+                }, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, toolsContent: (_g = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _g === void 0 ? void 0 : _g.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: toolsWidth, bottomOffset: placement.bottom, topOffset: placement.top, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
+            hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { drawerRefs: drawerRefs, bottomOffset: placement.bottom, topOffset: placement.top, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
                     if (activeDrawerId !== newDrawerId) {
                         focusToolsButtons();
                         focusDrawersButtons();