@atlaskit/navigation-system 11.3.0 → 11.3.2

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -31,6 +31,7 @@ var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
 var _convertResizeBoundToPixels = require("../panel-splitter/convert-resize-bound-to-pixels");
 var _provider = require("../panel-splitter/provider");
 var _resolveLayoutWidth = require("../resolve-layout-width");
+var _root = require("../root");
 var _useLayoutAreaSizing2 = require("../use-layout-area-sizing");
 var _useLayoutId = require("../use-layout-id");
 var _useResizingWidthCssVarOnRootElement = require("../use-resizing-width-css-var-on-root-element");
@@ -256,6 +257,8 @@ function SideNavInternal(_ref) {
       }
     }),
     managedSizing = _useLayoutAreaSizing.state,
+    isManaged = _useLayoutAreaSizing.isManaged,
+    prepareResize = _useLayoutAreaSizing.prepareResize,
     getManagedResizeBounds = _useLayoutAreaSizing.getResizeBounds,
     startResize = _useLayoutAreaSizing.startResize,
     resize = _useLayoutAreaSizing.resize,
@@ -353,6 +356,9 @@ function SideNavInternal(_ref) {
     type: 'not-active'
   });
   var isFlyoutVisible = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open';
+  // Flyouts, including their close animation, already have overlay placement.
+  // The CSS-first inline allocation must not override it with an ID selector.
+  var shouldApplyUnmanagedSizing = !managedSizing && (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) !== 'open' && (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) !== 'triggered-animate-close';
   var isExpandedOnDesktopRef = (0, _useStableRef.default)(isExpandedOnDesktop);
   var hasPeekStartedRef = (0, _react.useRef)(false);
   var onPeekStartRef = (0, _useStableRef.default)(onPeekStart);
@@ -892,7 +898,11 @@ function SideNavInternal(_ref) {
     ref: mergedRef,
     "data-testid": testId,
     className: (0, _runtime.ax)([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isMotionUpliftEnabled && styles.flyoutAnimateClosed])
-  }), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
+  }), isChatPanelLayoutEnabled &&
+  /*#__PURE__*/
+  // CSS reserves only the nav minimum for chat's fit decision, before effects or lazy loading.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+  _react.default.createElement("style", null, "\n#".concat(_root.gridRootChatFitId, " { --n_fitNav: 0px; }\n").concat(shouldApplyUnmanagedSizing ? "#".concat(_root.gridRootId, " nav[data-layout-slot] { grid-area: main / aside / aside / aside; width: min(90%, ").concat(clampedWidth, "); }") : '', "\n@media (min-width: 64rem) {\n  @container navigation-main-space (min-width: ").concat(minWidth, ") {\n    #").concat(_root.gridRootChatFitId, " { --n_fitNav: ").concat(isExpandedOnDesktop ? minWidth : '0px', "; }\n    ").concat(shouldApplyUnmanagedSizing ? "#".concat(_root.gridRootId, " nav[data-layout-slot] { grid-area: side-nav; width: min(").concat(clampedWidth, ", calc(100cqw + var(--n_fitNav) - var(--n_chatTrack, 0px))); }") : '', "\n  }\n}\n")), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: '@media (min-width: 64rem)',
@@ -912,8 +922,9 @@ function SideNavInternal(_ref) {
     panelRef: navRef,
     panelWidth: renderedWidth,
     onCompleteResize: onCompleteResize,
-    onResizeStartInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeStartInternal : undefined,
-    onResizeInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeInternal : undefined,
+    onResizeStartInternal: isChatPanelLayoutEnabled && isManaged ? onResizeStartInternal : undefined,
+    onResizeInternal: isChatPanelLayoutEnabled && isManaged ? onResizeInternal : undefined,
+    prepareResize: isChatPanelLayoutEnabled ? prepareResize : undefined,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar
     // Not resizable when in peek (flyout) mode.

package/dist/cjs/ui/page-layout/use-css-layout-area-states.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCssLayoutAreaStates = useCssLayoutAreaStates;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Observe CSS's responsive modes without loading the drag allocator or publishing
+ * measured widths back into CSS. Observe the host and independent occupied tracks;
+ * managed panels, TopNav and Banner are deliberately not observed during dragging.
+ */
+function useCssLayoutAreaStates(layoutRef, revision, isEnabled) {
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    modes = _useState2[0],
+    setModes = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (!root || !isEnabled) {
+      return;
+    }
+    var measure = function measure() {
+      var selectors = {
+        'side-nav': ':scope > nav[data-layout-slot]',
+        panel: '[data-layout-with-panel-slot]',
+        'chat-panel': ':scope > [data-layout-chat-panel]'
+      };
+      var next = {};
+      var _iterator = _createForOfIteratorHelper(['side-nav', 'panel', 'chat-panel']),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var area = _step.value;
+          var element = root.querySelector(selectors[area]);
+          if (element) {
+            next[area] = getComputedStyle(element).gridArea.split('/')[0].trim() === area ? 'inline' : 'overlay';
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setModes(function (previous) {
+        return ['side-nav', 'panel', 'chat-panel'].every(function (area) {
+          return previous[area] === next[area];
+        }) ? previous : next;
+      });
+    };
+    var widths = new Map();
+    var observer = new ResizeObserver(function (entries) {
+      var changed = false;
+      var _iterator2 = _createForOfIteratorHelper(entries),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var entry = _step2.value;
+          if (widths.get(entry.target) !== entry.contentRect.width) {
+            widths.set(entry.target, entry.contentRect.width);
+            changed = true;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      if (changed) {
+        measure();
+      }
+    });
+    var observeSlots = function observeSlots() {
+      observer.disconnect();
+      widths.clear();
+      var occupied = Array.from(root.children).filter(function (element) {
+        return element.matches('[data-layout-slot]:not(nav):not(header):not([role="main"]):not([data-layout-chat-panel])') && ['aside', 'ribbon', 'panel'].includes(getComputedStyle(element).gridArea.split('/')[0].trim());
+      });
+      for (var _i = 0, _arr = [root].concat((0, _toConsumableArray2.default)(occupied)); _i < _arr.length; _i++) {
+        var element = _arr[_i];
+        widths.set(element, element.getBoundingClientRect().width);
+        observer.observe(element);
+      }
+      measure();
+    };
+    observeSlots();
+    var mutations = new MutationObserver(observeSlots);
+    mutations.observe(root, {
+      childList: true
+    });
+    var queries = [window.matchMedia('(min-width: 40rem)'), window.matchMedia('(min-width: 64rem)')];
+    var unbind = [(0, _bindEventListener.bindAll)(window, [{
+      type: 'resize',
+      listener: measure
+    }])].concat((0, _toConsumableArray2.default)(queries.map(function (query) {
+      return (0, _bindEventListener.bindAll)(query, [{
+        type: 'change',
+        listener: measure
+      }]);
+    })));
+    return function () {
+      observer.disconnect();
+      mutations.disconnect();
+      unbind.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+  }, [isEnabled, layoutRef, revision]);
+  return modes;
+}

package/dist/cjs/ui/page-layout/use-layout-area-sizing.js

@@ -68,6 +68,8 @@ function useLayoutAreaSizing(_ref) {
     startResize: startResize,
     resize: resize,
     completeResize: completeResize,
-    getResizeBounds: getResizeBounds
+    getResizeBounds: getResizeBounds,
+    isManaged: context !== null,
+    prepareResize: context === null || context === void 0 ? void 0 : context.prepareResize
   };
 }

package/dist/es2019/ui/page-layout/calculate-layout-area-states.js

@@ -24,9 +24,10 @@ export function calculateLayoutAreaStates({
   occupiedWidth = 0,
   mainMinWidth: mainMinWidthBound,
   areas,
-  resizeSession
+  resizeSession,
+  initialModes
 }) {
-  var _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
+  var _ref3, _resizeSession$overla, _baselineWidths$chat, _panel$liveResize, _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
   const mainMinWidth = resolveLayoutWidth(mainMinWidthBound, viewportWidth);
   const availableWidth = Math.max(0, layoutWidth - occupiedWidth);
   const sideNav = areas['side-nav'];
@@ -35,9 +36,20 @@ export function calculateLayoutAreaStates({
   const sideNavMinWidth = sideNav ? resolveLayoutWidth(sideNav.minWidth, viewportWidth) : 0;
   const panelMinWidth = panel ? resolveLayoutWidth(panel.minWidth, viewportWidth) : 0;
   const chatPanelMinWidth = chatPanel ? resolveLayoutWidth(chatPanel.minWidth, viewportWidth) : 0;
-  const isSideNavOpenInline = Boolean((sideNav === null || sideNav === void 0 ? void 0 : sideNav.isOpen) && !isSideNavOverlay && availableWidth >= mainMinWidth + sideNavMinWidth);
-  const isChatPanelOpenInline = Boolean((chatPanel === null || chatPanel === void 0 ? void 0 : chatPanel.isOpen) && !isChatPanelOverlay && availableWidth >= mainMinWidth + chatPanelMinWidth + (isSideNavOpenInline ? sideNavMinWidth : 0));
-  const isPanelInline = Boolean((panel === null || panel === void 0 ? void 0 : panel.isOpen) && availableWidth >= mainMinWidth + panelMinWidth + (isChatPanelOpenInline ? chatPanelMinWidth : 0) + (isSideNavOpenInline ? sideNavMinWidth : 0));
+  const resizingArea = resizeSession && areas[resizeSession.area];
+  const isAcknowledged = (resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.completedWidth) !== undefined && ((resizingArea === null || resizingArea === void 0 ? void 0 : resizingArea.requestedWidth) === undefined || resizingArea.requestedWidth === resizeSession.completedWidth);
+  const baselineWidths = (_ref3 = isAcknowledged ? resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.completedWidths : undefined) !== null && _ref3 !== void 0 ? _ref3 : resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.baselineWidths;
+  const layoutModes = (_resizeSession$overla = resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.overlayModes) !== null && _resizeSession$overla !== void 0 ? _resizeSession$overla : initialModes;
+  // A growing panel cascades towards inline-start. Chat is on the other side
+  // of the local rail, so local growth must reserve its full starting width.
+  const shouldCollapseSideNav = Boolean(resizeSession && resizeSession.area !== 'side-nav' && resizeSession.baselineWidths['side-nav'] !== undefined && resizeSession.baselineWidths[resizeSession.area] !== undefined && resizingArea && !isSideNavOverlay && clampTargetWidth({
+    target: getTargetWidth(resizingArea, isSideNavOverlay),
+    min: resolveLayoutWidth(resizingArea.minWidth, viewportWidth),
+    max: resizingArea.maxWidth !== undefined ? resolveLayoutWidth(resizingArea.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY
+  }) > availableWidth - mainMinWidth - sideNavMinWidth - (resizeSession.area === 'panel' ? resizeSession.baselineWidths['chat-panel'] !== undefined ? (_baselineWidths$chat = baselineWidths === null || baselineWidths === void 0 ? void 0 : baselineWidths['chat-panel']) !== null && _baselineWidths$chat !== void 0 ? _baselineWidths$chat : chatPanelMinWidth : 0 : resizeSession.baselineWidths.panel !== undefined ? panelMinWidth : 0));
+  const isSideNavOpenInline = Boolean((sideNav === null || sideNav === void 0 ? void 0 : sideNav.isOpen) && !shouldCollapseSideNav && (layoutModes ? layoutModes['side-nav'] === 'inline' : !isSideNavOverlay && availableWidth >= mainMinWidth + sideNavMinWidth));
+  const isChatPanelOpenInline = Boolean((chatPanel === null || chatPanel === void 0 ? void 0 : chatPanel.isOpen) && (!resizeSession || resizeSession.baselineWidths['chat-panel'] !== undefined) && (layoutModes ? layoutModes['chat-panel'] === 'inline' : !isChatPanelOverlay && availableWidth >= mainMinWidth + chatPanelMinWidth + (isSideNavOpenInline ? sideNavMinWidth : 0)));
+  const isPanelInline = Boolean((panel === null || panel === void 0 ? void 0 : panel.isOpen) && (!resizeSession || resizeSession.baselineWidths.panel !== undefined) && (layoutModes ? layoutModes.panel === 'inline' : availableWidth >= mainMinWidth + panelMinWidth + (isChatPanelOpenInline ? chatPanelMinWidth : 0) + (isSideNavOpenInline ? sideNavMinWidth : 0)));
   const inlineAreas = [isSideNavOpenInline && 'side-nav', isPanelInline && 'panel', isChatPanelOpenInline && 'chat-panel'].filter(area => Boolean(area));
   const widths = new Map();
   const minimums = new Map();
@@ -48,8 +60,8 @@ export function calculateLayoutAreaStates({
     }
     const min = resolveLayoutWidth(area.minWidth, viewportWidth);
     const max = area.maxWidth ? resolveLayoutWidth(area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
-    const baselineWidth = resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.baselineWidths[areaName];
-    const requestedTarget = resizeSession && areaName !== resizeSession.area && baselineWidth !== undefined ? baselineWidth : getTargetWidth(area, isSideNavOverlay);
+    const baselineWidth = baselineWidths === null || baselineWidths === void 0 ? void 0 : baselineWidths[areaName];
+    const requestedTarget = resizeSession && areaName !== resizeSession.area ? shouldCollapseSideNav && resizeSession.area === 'chat-panel' ? min : baselineWidth !== null && baselineWidth !== void 0 ? baselineWidth : getTargetWidth(area, isSideNavOverlay) : getTargetWidth(area, isSideNavOverlay);
     const target = clampTargetWidth({
       target: requestedTarget,
       min,
@@ -58,27 +70,46 @@ export function calculateLayoutAreaStates({
     minimums.set(areaName, min);
     widths.set(areaName, target);
   }
+  // Narrowing Chat moves the shared rail towards inline-end. Give the released
+  // space to its inline neighbour so local grows instead of sliding across Main.
+  // Use effective (clamped) widths and the session baseline, not each drag frame,
+  // so reversing direction and completing a controlled resize do not add it twice.
+  if ((resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.area) === 'chat-panel' && isChatPanelOpenInline && isPanelInline && panel) {
+    var _widths$get, _baselineWidths$chat2, _widths$get2;
+    const chatWidth = (_widths$get = widths.get('chat-panel')) !== null && _widths$get !== void 0 ? _widths$get : 0;
+    const releasedWidth = Math.max(0, ((_baselineWidths$chat2 = baselineWidths === null || baselineWidths === void 0 ? void 0 : baselineWidths['chat-panel']) !== null && _baselineWidths$chat2 !== void 0 ? _baselineWidths$chat2 : chatWidth) - chatWidth);
+    const panelMaxWidth = panel.maxWidth !== undefined ? Math.max(panelMinWidth, resolveLayoutWidth(panel.maxWidth, viewportWidth)) : Number.POSITIVE_INFINITY;
+    widths.set('panel', Math.min(panelMaxWidth, ((_widths$get2 = widths.get('panel')) !== null && _widths$get2 !== void 0 ? _widths$get2 : 0) + releasedWidth));
+  }
+  // Continuing to pull the local rail towards Chat after local reaches its
+  // minimum gives Main the remaining space available in inline Chat.
+  if ((resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.area) === 'panel' && (panel === null || panel === void 0 ? void 0 : (_panel$liveResize = panel.liveResize) === null || _panel$liveResize === void 0 ? void 0 : _panel$liveResize.mode) === 'inline' && isChatPanelOpenInline) {
+    var _widths$get3;
+    const remainingDrag = Math.max(0, panelMinWidth - panel.liveResize.width);
+    const chatWidth = (_widths$get3 = widths.get('chat-panel')) !== null && _widths$get3 !== void 0 ? _widths$get3 : 0;
+    widths.set('chat-panel', Math.max(chatPanelMinWidth, chatWidth - remainingDrag));
+  }
   let overflow = Math.max(0, Array.from(widths.values()).reduce((total, width) => total + width, 0) - (availableWidth - mainMinWidth));
   const compressionOrder = ['panel', 'chat-panel', 'side-nav'];
-  // User resizing consumes only Main's spare width. Viewport changes clear the
-  // snapshot and retain the normal automatic compression order.
-  const shrinkOrder = resizeSession ? [resizeSession.area] : compressionOrder;
+  // Main gives up spare space first. Only regions beyond the moving rail may
+  // then compress: local growth moves towards SideNav, never towards Chat.
+  // SideNav and Chat growth can reach both other regions in their direction.
+  const shrinkOrder = resizeSession ? resizeSession.area === 'panel' ? ['side-nav', 'panel'] : [...compressionOrder.filter(area => area !== resizeSession.area), resizeSession.area] : compressionOrder;
   for (const areaName of shrinkOrder) {
-    var _widths$get, _minimums$get;
+    var _widths$get4, _minimums$get;
     if (overflow <= 0) {
       break;
     }
-    const width = (_widths$get = widths.get(areaName)) !== null && _widths$get !== void 0 ? _widths$get : 0;
+    const width = (_widths$get4 = widths.get(areaName)) !== null && _widths$get4 !== void 0 ? _widths$get4 : 0;
     const min = (_minimums$get = minimums.get(areaName)) !== null && _minimums$get !== void 0 ? _minimums$get : 0;
     const reduction = Math.min(overflow, Math.max(0, width - min));
     widths.set(areaName, width - reduction);
     overflow -= reduction;
   }
-  const totalInlineWidth = Array.from(widths.values()).reduce((total, width) => total + width, 0);
   const states = {};
   for (const areaName of inlineAreas) {
-    var _widths$get2, _minimums$get2, _areas$areaName;
-    const width = (_widths$get2 = widths.get(areaName)) !== null && _widths$get2 !== void 0 ? _widths$get2 : 0;
+    var _widths$get5, _minimums$get2, _areas$areaName;
+    const width = (_widths$get5 = widths.get(areaName)) !== null && _widths$get5 !== void 0 ? _widths$get5 : 0;
     const min = (_minimums$get2 = minimums.get(areaName)) !== null && _minimums$get2 !== void 0 ? _minimums$get2 : 0;
     const maxWidth = (_areas$areaName = areas[areaName]) === null || _areas$areaName === void 0 ? void 0 : _areas$areaName.maxWidth;
     const configuredMax = maxWidth !== undefined ? resolveLayoutWidth(maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
@@ -88,7 +119,10 @@ export function calculateLayoutAreaStates({
       minWidth: min,
       resizeBounds: {
         min,
-        max: Math.max(min, Math.min(configuredMax, availableWidth - mainMinWidth - totalInlineWidth + width))
+        max: Math.max(min, Math.min(configuredMax, availableWidth - mainMinWidth - inlineAreas.reduce((total, sibling) => {
+          var _widths$get6, _minimums$get3;
+          return sibling === areaName || sibling === 'side-nav' && areaName !== 'side-nav' ? total : total + (areaName === 'panel' && sibling === 'chat-panel' ? (_widths$get6 = widths.get(sibling)) !== null && _widths$get6 !== void 0 ? _widths$get6 : 0 : (_minimums$get3 = minimums.get(sibling)) !== null && _minimums$get3 !== void 0 ? _minimums$get3 : 0);
+        }, 0)))
       }
     };
   }
@@ -98,7 +132,7 @@ export function calculateLayoutAreaStates({
   for (const areaName of ['side-nav', 'panel', 'chat-panel']) {
     var _states$areaName;
     const area = areas[areaName];
-    if (!(area !== null && area !== void 0 && area.isOpen) || ((_states$areaName = states[areaName]) === null || _states$areaName === void 0 ? void 0 : _states$areaName.mode) === 'inline') {
+    if (!(area !== null && area !== void 0 && area.isOpen) || ((_states$areaName = states[areaName]) === null || _states$areaName === void 0 ? void 0 : _states$areaName.mode) === 'inline' || areaName === 'side-nav' && shouldCollapseSideNav) {
       continue;
     }
     const min = resolveLayoutWidth(area.minWidth, viewportWidth);

package/dist/es2019/ui/page-layout/chat-panel.js

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
-import { chatPanelLiveWidthVar, chatPanelVar, mainMinimumWidthVar } from './constants';
+import { chatPanelLiveWidthVar, chatPanelVar, localSlotLayers, mainMinimumWidthVar } from './constants';
 import { convertResizeBoundToPixels } from './panel-splitter/convert-resize-bound-to-pixels';
 import { PanelSplitterProvider } from './panel-splitter/provider';
 import { resolveLayoutWidth } from './resolve-layout-width';
@@ -78,6 +78,8 @@ export function ChatPanel({
   const [overlayWidth, setOverlayWidth] = useState(compactDefaultWidth);
   const [isInline, setIsInline] = useState(false);
   const {
+    isManaged,
+    prepareResize,
     state: managedSizing,
     getResizeBounds: getManagedResizeBounds,
     startResize,
@@ -181,15 +183,37 @@ export function ChatPanel({
   // Hoist the committed or actively resizing inline width so SideNav can yield
   // space to ChatPanel without allowing the page layout to overflow.
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-  React.createElement("style", null, `
-#${gridRootId} { ${chatPanelLiveWidthVar}: var(${panelSplitterResizingVar}, ${chatPanelVariableWidth}); }
+  React.createElement("style", null, managedSizing ? `
+#${gridRootId} { --n_chatTrack: ${mode === 'inline' ? `${renderedWidth}px` : '0px'}; ${chatPanelLiveWidthVar}: var(--n_chatTrack); }
+` : `
+#${gridRootId} { --n_chatTrack: 0px; ${chatPanelLiveWidthVar}: 0px; }
+#${gridRootId} [data-layout-chat-panel] {
+  grid-area: 2 / 1 / -1 / -1;
+  width: min(calc(var(--n_layoutW) * 0.9), ${chatPanelOverlayVariableWidth});
+  z-index: ${localSlotLayers.chatPanelOverlay};
+  background-color: ${"var(--ds-surface-overlay, #FFFFFF)"};
+  ${hasBorder ? `box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"}; border-inline-start: none;` : ''}
+}
+@media (min-width: 40rem) {
+  @container navigation-chat-space (min-width: ${minWidth}) {
+    #${gridRootId} { --n_chatTrack: min(100cqw, var(${panelSplitterResizingVar}, ${chatPanelVariableWidth})); ${chatPanelLiveWidthVar}: var(--n_chatTrack); }
+    #${gridRootId} [data-layout-chat-panel] {
+      grid-area: chat-panel;
+      width: min(100cqw, var(${panelSplitterResizingVar}, ${chatPanelVariableWidth}));
+      z-index: auto;
+      background-color: ${"var(--ds-surface, #FFFFFF)"};
+      ${hasBorder ? `box-shadow: initial; border-inline-start: ${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"};` : ''}
+    }
+  }
+}
 `), /*#__PURE__*/React.createElement(PanelSplitterProvider, {
     panelId: chatPanelPanelSplitterId,
     panelRef: ref,
     panelWidth: renderedWidth,
     onCompleteResize: onCompleteResize,
-    onResizeStartInternal: managedSizing ? onResizeStartInternal : undefined,
-    onResizeInternal: managedSizing ? onResizeInternal : undefined,
+    prepareResize: prepareResize,
+    onResizeStartInternal: isManaged ? onResizeStartInternal : undefined,
+    onResizeInternal: isManaged ? onResizeInternal : undefined,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar,
     position: "start"

package/dist/es2019/ui/page-layout/layout-area-sizing-context.js

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
 /**
- * Effective sibling widths held fixed during and after a user resize, until the
- * layout dimensions or configuration change. This is not a resize history.
+ * One resize transaction. Keep its starting widths for controlled rejection,
+ * and its resulting widths for synchronous or delayed acknowledgement.
  */
 
 export const LayoutAreaSizingContext = /*#__PURE__*/createContext(null);