@atlaskit/navigation-system 11.3.0 → 11.3.2

package/dist/es2019/ui/page-layout/root.js

@@ -15,13 +15,39 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 export const gridRootId = 'unsafe-design-system-page-layout-root';
+export const gridRootFitId = `${gridRootId}-fit`;
+export const gridRootChatFitId = `${gridRootId}-chat-fit`;
 const styles = {
+  widthContainer: "_7cca15wb _1f38hx13 _1bsb1osq",
+  mainSpace: "_82d6okmw _1cwmtye8 _7cca15wb _1f38hwoh _vchh1ntv _1bsb1raa",
+  chatSpace: "_5to3grho _7cca15wb _1f381mry _1bsbjwgu",
   legacyRoot: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
-  root: "_1cwmtye8 _1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12ag50j2 _71dlqwpl _12fkqmyk _12qzrxre _1rqt8mqp _xkmggc7l _tyve1i18",
+  root: "_1cwmtye8 _1e0c11p5 _1tke1kxc _1bsb4nr3 _1lmcq9em _yv0ei47z _2z0516ab _12ag50j2 _71dl19sb _12fkqmyk _12qzrxre _1rqttswr _xkmggc7l _tyve87m4",
   safetyRail: "_1ciragmp",
   safetyRailWithTopLayer: "_1tvnagmp",
   panelUplift: "_1reozryt _18m9zryt"
 };
+function LayoutFitContainers({
+  children
+}) {
+  // CSS cannot use custom properties in a size-query condition. Query the
+  // remaining capacity instead: these wrappers subtract configured minimums
+  // and occupied tracks, while the actual grid keeps its original host width.
+  return /*#__PURE__*/React.createElement("div", {
+    "data-layout-width-container": "",
+    className: ax([styles.widthContainer])
+  }, /*#__PURE__*/React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: `@property --n_layoutW { syntax: '<length>'; inherits: true; initial-value: 0px; }`
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    id: gridRootFitId,
+    className: ax([styles.mainSpace])
+  }, /*#__PURE__*/React.createElement("div", {
+    id: gridRootChatFitId,
+    className: ax([styles.chatSpace])
+  }, children)));
+}
 
 /**
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
@@ -40,6 +66,7 @@ export function Root({
   const ref = useRef(null);
   const isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
   const LayoutProvider = isChatPanelLayoutEnabled ? LayoutAreaSizingProvider : React.Fragment;
+  const WidthContainer = isChatPanelLayoutEnabled ? LayoutFitContainers : React.Fragment;
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
       const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -77,10 +104,10 @@ This message will not be displayed in production.
     label: skipLinksLabel,
     triggerLabel: skipLinksTriggerLabel,
     testId: testId
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(WidthContainer, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: ax([isChatPanelLayoutEnabled ? styles.root : styles.legacyRoot, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
-  }, children))))))))));
+  }, children)))))))))));
 }

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

@@ -22,6 +22,7 @@ import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { convertResizeBoundToPixels } from '../panel-splitter/convert-resize-bound-to-pixels';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
 import { resolveLayoutWidth } from '../resolve-layout-width';
+import { gridRootChatFitId, gridRootId } from '../root';
 import { useLayoutAreaSizing } from '../use-layout-area-sizing';
 import { useLayoutId } from '../use-layout-id';
 import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-var-on-root-element';
@@ -219,6 +220,8 @@ function SideNavInternal({
   }, [isExpandedOnDesktop, isExpandedOnMobile, toggleVisibilityForChatPanel]);
   const {
     state: managedSizing,
+    isManaged,
+    prepareResize,
     getResizeBounds: getManagedResizeBounds,
     startResize,
     resize,
@@ -324,6 +327,9 @@ function SideNavInternal({
     type: 'not-active'
   });
   const 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.
+  const shouldApplyUnmanagedSizing = !managedSizing && (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) !== 'open' && (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) !== 'triggered-animate-close';
   const isExpandedOnDesktopRef = useStableRef(isExpandedOnDesktop);
   const hasPeekStartedRef = useRef(false);
   const onPeekStartRef = useStableRef(onPeekStart);
@@ -874,7 +880,20 @@ function SideNavInternal({
     ref: mergedRef,
     "data-testid": testId,
     className: 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.createElement(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.createElement("style", null, `
+#${gridRootChatFitId} { --n_fitNav: 0px; }
+${shouldApplyUnmanagedSizing ? `#${gridRootId} nav[data-layout-slot] { grid-area: main / aside / aside / aside; width: min(90%, ${clampedWidth}); }` : ''}
+@media (min-width: 64rem) {
+  @container navigation-main-space (min-width: ${minWidth}) {
+    #${gridRootChatFitId} { --n_fitNav: ${isExpandedOnDesktop ? minWidth : '0px'}; }
+    ${shouldApplyUnmanagedSizing ? `#${gridRootId} nav[data-layout-slot] { grid-area: side-nav; width: min(${clampedWidth}, calc(100cqw + var(--n_fitNav) - var(--n_chatTrack, 0px))); }` : ''}
+  }
+}
+`), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: '@media (min-width: 64rem)',
@@ -894,8 +913,9 @@ function SideNavInternal({
     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/es2019/ui/page-layout/use-css-layout-area-states.js

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { bindAll } from 'bind-event-listener';
+/**
+ * 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.
+ */
+export function useCssLayoutAreaStates(layoutRef, revision, isEnabled) {
+  const [modes, setModes] = useState({});
+  useEffect(() => {
+    const root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (!root || !isEnabled) {
+      return;
+    }
+    const measure = () => {
+      const selectors = {
+        'side-nav': ':scope > nav[data-layout-slot]',
+        panel: '[data-layout-with-panel-slot]',
+        'chat-panel': ':scope > [data-layout-chat-panel]'
+      };
+      const next = {};
+      for (const area of ['side-nav', 'panel', 'chat-panel']) {
+        const element = root.querySelector(selectors[area]);
+        if (element) {
+          next[area] = getComputedStyle(element).gridArea.split('/')[0].trim() === area ? 'inline' : 'overlay';
+        }
+      }
+      setModes(previous => ['side-nav', 'panel', 'chat-panel'].every(area => previous[area] === next[area]) ? previous : next);
+    };
+    const widths = new Map();
+    const observer = new ResizeObserver(entries => {
+      let changed = false;
+      for (const entry of entries) {
+        if (widths.get(entry.target) !== entry.contentRect.width) {
+          widths.set(entry.target, entry.contentRect.width);
+          changed = true;
+        }
+      }
+      if (changed) {
+        measure();
+      }
+    });
+    const observeSlots = () => {
+      observer.disconnect();
+      widths.clear();
+      const occupied = Array.from(root.children).filter(element => 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 (const element of [root, ...occupied]) {
+        widths.set(element, element.getBoundingClientRect().width);
+        observer.observe(element);
+      }
+      measure();
+    };
+    observeSlots();
+    const mutations = new MutationObserver(observeSlots);
+    mutations.observe(root, {
+      childList: true
+    });
+    const queries = [window.matchMedia('(min-width: 40rem)'), window.matchMedia('(min-width: 64rem)')];
+    const unbind = [bindAll(window, [{
+      type: 'resize',
+      listener: measure
+    }]), ...queries.map(query => bindAll(query, [{
+      type: 'change',
+      listener: measure
+    }]))];
+    return () => {
+      observer.disconnect();
+      mutations.disconnect();
+      unbind.forEach(cleanup => cleanup());
+    };
+  }, [isEnabled, layoutRef, revision]);
+  return modes;
+}

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

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

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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; }
@@ -19,7 +20,7 @@ function getOverlayTargetWidth(area, isSideNavOverlay) {
   return ((_area$liveResize2 = area.liveResize) === null || _area$liveResize2 === void 0 ? void 0 : _area$liveResize2.mode) === 'overlay' ? area.liveResize.width : (_ref3 = (_area$requestedWidth2 = area.requestedWidth) !== null && _area$requestedWidth2 !== void 0 ? _area$requestedWidth2 : area.preferredOverlayWidth) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
 }
 export function calculateLayoutAreaStates(_ref4) {
-  var _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
+  var _ref5, _resizeSession$overla, _baselineWidths$chat, _panel$liveResize, _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
   var viewportWidth = _ref4.viewportWidth,
     _ref4$layoutWidth = _ref4.layoutWidth,
     layoutWidth = _ref4$layoutWidth === void 0 ? viewportWidth : _ref4$layoutWidth,
@@ -29,7 +30,8 @@ export function calculateLayoutAreaStates(_ref4) {
     occupiedWidth = _ref4$occupiedWidth === void 0 ? 0 : _ref4$occupiedWidth,
     mainMinWidthBound = _ref4.mainMinWidth,
     areas = _ref4.areas,
-    resizeSession = _ref4.resizeSession;
+    resizeSession = _ref4.resizeSession,
+    initialModes = _ref4.initialModes;
   var mainMinWidth = resolveLayoutWidth(mainMinWidthBound, viewportWidth);
   var availableWidth = Math.max(0, layoutWidth - occupiedWidth);
   var sideNav = areas['side-nav'];
@@ -38,9 +40,20 @@ export function calculateLayoutAreaStates(_ref4) {
   var sideNavMinWidth = sideNav ? resolveLayoutWidth(sideNav.minWidth, viewportWidth) : 0;
   var panelMinWidth = panel ? resolveLayoutWidth(panel.minWidth, viewportWidth) : 0;
   var chatPanelMinWidth = chatPanel ? resolveLayoutWidth(chatPanel.minWidth, viewportWidth) : 0;
-  var isSideNavOpenInline = Boolean((sideNav === null || sideNav === void 0 ? void 0 : sideNav.isOpen) && !isSideNavOverlay && availableWidth >= mainMinWidth + sideNavMinWidth);
-  var isChatPanelOpenInline = Boolean((chatPanel === null || chatPanel === void 0 ? void 0 : chatPanel.isOpen) && !isChatPanelOverlay && availableWidth >= mainMinWidth + chatPanelMinWidth + (isSideNavOpenInline ? sideNavMinWidth : 0));
-  var isPanelInline = Boolean((panel === null || panel === void 0 ? void 0 : panel.isOpen) && availableWidth >= mainMinWidth + panelMinWidth + (isChatPanelOpenInline ? chatPanelMinWidth : 0) + (isSideNavOpenInline ? sideNavMinWidth : 0));
+  var resizingArea = resizeSession && areas[resizeSession.area];
+  var 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);
+  var baselineWidths = (_ref5 = isAcknowledged ? resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.completedWidths : undefined) !== null && _ref5 !== void 0 ? _ref5 : resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.baselineWidths;
+  var 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.
+  var 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));
+  var isSideNavOpenInline = Boolean((sideNav === null || sideNav === void 0 ? void 0 : sideNav.isOpen) && !shouldCollapseSideNav && (layoutModes ? layoutModes['side-nav'] === 'inline' : !isSideNavOverlay && availableWidth >= mainMinWidth + sideNavMinWidth));
+  var 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)));
+  var 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)));
   var inlineAreas = [isSideNavOpenInline && 'side-nav', isPanelInline && 'panel', isChatPanelOpenInline && 'chat-panel'].filter(function (area) {
     return Boolean(area);
   });
@@ -57,8 +70,8 @@ export function calculateLayoutAreaStates(_ref4) {
       }
       var min = resolveLayoutWidth(area.minWidth, viewportWidth);
       var max = area.maxWidth ? resolveLayoutWidth(area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
-      var baselineWidth = resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.baselineWidths[areaName];
-      var requestedTarget = resizeSession && areaName !== resizeSession.area && baselineWidth !== undefined ? baselineWidth : getTargetWidth(area, isSideNavOverlay);
+      var baselineWidth = baselineWidths === null || baselineWidths === void 0 ? void 0 : baselineWidths[areaName];
+      var requestedTarget = resizeSession && areaName !== resizeSession.area ? shouldCollapseSideNav && resizeSession.area === 'chat-panel' ? min : baselineWidth !== null && baselineWidth !== void 0 ? baselineWidth : getTargetWidth(area, isSideNavOverlay) : getTargetWidth(area, isSideNavOverlay);
       var target = clampTargetWidth({
         target: requestedTarget,
         min: min,
@@ -67,28 +80,50 @@ export function calculateLayoutAreaStates(_ref4) {
       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.
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
+  if ((resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.area) === 'chat-panel' && isChatPanelOpenInline && isPanelInline && panel) {
+    var _widths$get, _baselineWidths$chat2, _widths$get2;
+    var chatWidth = (_widths$get = widths.get('chat-panel')) !== null && _widths$get !== void 0 ? _widths$get : 0;
+    var 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);
+    var 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 || (_panel$liveResize = panel.liveResize) === null || _panel$liveResize === void 0 ? void 0 : _panel$liveResize.mode) === 'inline' && isChatPanelOpenInline) {
+    var _widths$get3;
+    var remainingDrag = Math.max(0, panelMinWidth - panel.liveResize.width);
+    var _chatWidth = (_widths$get3 = widths.get('chat-panel')) !== null && _widths$get3 !== void 0 ? _widths$get3 : 0;
+    widths.set('chat-panel', Math.max(chatPanelMinWidth, _chatWidth - remainingDrag));
+  }
   var overflow = Math.max(0, Array.from(widths.values()).reduce(function (total, width) {
     return total + width;
   }, 0) - (availableWidth - mainMinWidth));
   var 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.
-  var 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.
+  var shrinkOrder = resizeSession ? resizeSession.area === 'panel' ? ['side-nav', 'panel'] : [].concat(_toConsumableArray(compressionOrder.filter(function (area) {
+    return area !== resizeSession.area;
+  })), [resizeSession.area]) : compressionOrder;
   var _iterator2 = _createForOfIteratorHelper(shrinkOrder),
     _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var _widths$get, _minimums$get;
+      var _widths$get4, _minimums$get;
       var _areaName = _step2.value;
       if (overflow <= 0) {
         break;
       }
-      var width = (_widths$get = widths.get(_areaName)) !== null && _widths$get !== void 0 ? _widths$get : 0;
+      var width = (_widths$get4 = widths.get(_areaName)) !== null && _widths$get4 !== void 0 ? _widths$get4 : 0;
       var _min = (_minimums$get = minimums.get(_areaName)) !== null && _minimums$get !== void 0 ? _minimums$get : 0;
       var reduction = Math.min(overflow, Math.max(0, width - _min));
       widths.set(_areaName, width - reduction);
@@ -99,29 +134,32 @@ export function calculateLayoutAreaStates(_ref4) {
   } finally {
     _iterator2.f();
   }
-  var totalInlineWidth = Array.from(widths.values()).reduce(function (total, width) {
-    return total + width;
-  }, 0);
   var states = {};
   var _iterator3 = _createForOfIteratorHelper(inlineAreas),
     _step3;
   try {
-    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-      var _widths$get2, _minimums$get2, _areas$_areaName;
-      var _areaName2 = _step3.value;
-      var _width = (_widths$get2 = widths.get(_areaName2)) !== null && _widths$get2 !== void 0 ? _widths$get2 : 0;
-      var _min2 = (_minimums$get2 = minimums.get(_areaName2)) !== null && _minimums$get2 !== void 0 ? _minimums$get2 : 0;
-      var maxWidth = (_areas$_areaName = areas[_areaName2]) === null || _areas$_areaName === void 0 ? void 0 : _areas$_areaName.maxWidth;
+    var _loop = function _loop() {
+      var _widths$get5, _minimums$get2, _areas$areaName;
+      var areaName = _step3.value;
+      var width = (_widths$get5 = widths.get(areaName)) !== null && _widths$get5 !== void 0 ? _widths$get5 : 0;
+      var min = (_minimums$get2 = minimums.get(areaName)) !== null && _minimums$get2 !== void 0 ? _minimums$get2 : 0;
+      var maxWidth = (_areas$areaName = areas[areaName]) === null || _areas$areaName === void 0 ? void 0 : _areas$areaName.maxWidth;
       var configuredMax = maxWidth !== undefined ? resolveLayoutWidth(maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
-      states[_areaName2] = {
+      states[areaName] = {
         mode: 'inline',
-        width: _width,
-        minWidth: _min2,
+        width: width,
+        minWidth: min,
         resizeBounds: {
-          min: _min2,
-          max: Math.max(_min2, Math.min(configuredMax, availableWidth - mainMinWidth - totalInlineWidth + _width))
+          min: min,
+          max: Math.max(min, Math.min(configuredMax, availableWidth - mainMinWidth - inlineAreas.reduce(function (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)))
         }
       };
+    };
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      _loop();
     }
   } catch (err) {
     _iterator3.e(err);
@@ -136,27 +174,27 @@ export function calculateLayoutAreaStates(_ref4) {
   try {
     for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
       var _states$_areaName;
-      var _areaName3 = _step4.value;
-      var _area = areas[_areaName3];
-      if (!(_area !== null && _area !== void 0 && _area.isOpen) || ((_states$_areaName = states[_areaName3]) === null || _states$_areaName === void 0 ? void 0 : _states$_areaName.mode) === 'inline') {
+      var _areaName2 = _step4.value;
+      var _area = areas[_areaName2];
+      if (!(_area !== null && _area !== void 0 && _area.isOpen) || ((_states$_areaName = states[_areaName2]) === null || _states$_areaName === void 0 ? void 0 : _states$_areaName.mode) === 'inline' || _areaName2 === 'side-nav' && shouldCollapseSideNav) {
         continue;
       }
-      var _min3 = resolveLayoutWidth(_area.minWidth, viewportWidth);
-      var _configuredMax = _area.maxWidth ? resolveLayoutWidth(_area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
+      var _min2 = resolveLayoutWidth(_area.minWidth, viewportWidth);
+      var configuredMax = _area.maxWidth ? resolveLayoutWidth(_area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
       // Chat covers Root; SideNav and the local panel overlay Main's grid track.
       // Occupied tracks and inline chat are not part of that covered region.
-      var layoutMax = (_areaName3 === 'chat-panel' ? layoutWidth : mainAreaWidth) * 0.9;
-      var _max = Math.max(0, Math.min(_configuredMax, layoutMax));
-      var effectiveMin = Math.min(_min3, _max);
+      var layoutMax = (_areaName2 === 'chat-panel' ? layoutWidth : mainAreaWidth) * 0.9;
+      var _max = Math.max(0, Math.min(configuredMax, layoutMax));
+      var effectiveMin = Math.min(_min2, _max);
       var _target = getOverlayTargetWidth(_area, isSideNavOverlay);
-      var _width2 = clampTargetWidth({
+      var _width = clampTargetWidth({
         target: _target,
         min: effectiveMin,
         max: _max
       });
-      states[_areaName3] = {
+      states[_areaName2] = {
         mode: 'overlay',
-        width: _width2,
+        width: _width,
         minWidth: effectiveMin,
         resizeBounds: {
           min: effectiveMin,

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

@@ -8,7 +8,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';
@@ -102,6 +102,8 @@ export function ChatPanel(_ref) {
         onRequestClose: onClose
       }
     }),
+    isManaged = _useLayoutAreaSizing.isManaged,
+    prepareResize = _useLayoutAreaSizing.prepareResize,
     managedSizing = _useLayoutAreaSizing.state,
     getManagedResizeBounds = _useLayoutAreaSizing.getResizeBounds,
     startResize = _useLayoutAreaSizing.startResize,
@@ -191,13 +193,14 @@ export function ChatPanel(_ref) {
   // 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, "\n#".concat(gridRootId, " { ").concat(chatPanelLiveWidthVar, ": var(").concat(panelSplitterResizingVar, ", ").concat(chatPanelVariableWidth, "); }\n")), /*#__PURE__*/React.createElement(PanelSplitterProvider, {
+  React.createElement("style", null, managedSizing ? "\n#".concat(gridRootId, " { --n_chatTrack: ").concat(mode === 'inline' ? "".concat(renderedWidth, "px") : '0px', "; ").concat(chatPanelLiveWidthVar, ": var(--n_chatTrack); }\n") : "\n#".concat(gridRootId, " { --n_chatTrack: 0px; ").concat(chatPanelLiveWidthVar, ": 0px; }\n#").concat(gridRootId, " [data-layout-chat-panel] {\n  grid-area: 2 / 1 / -1 / -1;\n  width: min(calc(var(--n_layoutW) * 0.9), ").concat(chatPanelOverlayVariableWidth, ");\n  z-index: ").concat(localSlotLayers.chatPanelOverlay, ";\n  background-color: ", "var(--ds-surface-overlay, #FFFFFF)", ";\n  ").concat(hasBorder ? "box-shadow: ".concat("var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", "; border-inline-start: none;") : '', "\n}\n@media (min-width: 40rem) {\n  @container navigation-chat-space (min-width: ").concat(minWidth, ") {\n    #").concat(gridRootId, " { --n_chatTrack: min(100cqw, var(").concat(panelSplitterResizingVar, ", ").concat(chatPanelVariableWidth, ")); ").concat(chatPanelLiveWidthVar, ": var(--n_chatTrack); }\n    #").concat(gridRootId, " [data-layout-chat-panel] {\n      grid-area: chat-panel;\n      width: min(100cqw, var(").concat(panelSplitterResizingVar, ", ").concat(chatPanelVariableWidth, "));\n      z-index: auto;\n      background-color: ", "var(--ds-surface, #FFFFFF)", ";\n      ").concat(hasBorder ? "box-shadow: initial; border-inline-start: ".concat("var(--ds-border-width, 1px)", " solid ", "var(--ds-border, #0B120E24)", ";") : '', "\n    }\n  }\n}\n")), /*#__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/esm/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 var LayoutAreaSizingContext = /*#__PURE__*/createContext(null);