@atlaskit/navigation-system 11.3.0 → 11.3.2

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -11,6 +11,8 @@ require("./panel-splitter.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -41,7 +43,7 @@ var _onDoubleClickContext = require("./on-double-click-context");
 var _panelSplitterContext = require("./panel-splitter-context");
 var _panelSplitterDragSymbol = require("./panel-splitter-drag-symbol");
 var _excluded = ["children", "className"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t6 in e) "default" !== _t6 && {}.hasOwnProperty.call(e, _t6) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t6)) && (i.get || i.set) ? o(f, _t6, i) : f[_t6] = e[_t6]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function signPanelSplitterDragData(data) {
@@ -145,6 +147,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     onCompleteResize = _ref3.onCompleteResize,
     onResizeStartInternal = _ref3.onResizeStartInternal,
     onResizeInternal = _ref3.onResizeInternal,
+    prepareResize = _ref3.prepareResize,
     getResizeBounds = _ref3.getResizeBounds,
     panel = _ref3.panel,
     portal = _ref3.portal,
@@ -296,8 +299,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         });
         var resizingWidth = "clamp(".concat(resizeBounds.min, ", ").concat(targetWidth, "px, ").concat(resizeBounds.max, ")");
         if ((0, _fg.fg)('platform-dst-chat-panel-layout') && onResizeInternal) {
-          // Let the sizing provider constrain the width against Main's available space.
-          var width = Math.max((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.min), Math.min(targetWidth, (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.max)));
+          // The allocator needs below-minimum requests for the local-to-chat cascade.
+          var currentBounds = getResizeBounds();
+          var width = Math.max(0, Math.min(targetWidth, prepareResize ? window.innerWidth : (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(currentBounds.max)));
           if (width !== lastManagedResizeWidth) {
             lastManagedResizeWidth = width;
             onResizeInternal(width);
@@ -310,39 +314,68 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         source.data.resizingWidth = resizingWidth;
       },
       onDrop: function onDrop(_ref7) {
-        var _resizingElementRef$c2;
-        var source = _ref7.source;
-        (0, _tinyInvariant.default)((0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data));
-        _preventUnhandled.preventUnhandled.stop();
-
-        // PDD may deliver its final throttled drag update immediately before drop.
-        // Commit that update once before measuring; do not persist a previous frame.
-        if (onResizeInternal && lastManagedResizeWidth !== undefined) {
-          var width = lastManagedResizeWidth;
-          (0, _reactDom.flushSync)(function () {
-            return onResizeInternal(width);
-          });
-          lastManagedResizeWidth = undefined;
-        }
-        var finalWidth = (0, _getPixelWidth.getPixelWidth)(panel);
-        // Persist the final preferred width before removing the imperative drag
-        // variable, so the rendered width is continuous across pointer release.
-        if ((0, _fg.fg)('platform-dst-chat-panel-layout')) {
-          (0, _reactDom.flushSync)(function () {
-            return onCompleteResize(finalWidth);
-          });
-        } else {
-          onCompleteResize(finalWidth);
-        }
-        onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd({
-          initialWidth: source.data.initialWidth,
-          finalWidth: finalWidth
-        });
-        panel.style.removeProperty(resizingCssVar);
-        resizingElementRef === null || resizingElementRef === void 0 || (_resizingElementRef$c2 = resizingElementRef.current) === null || _resizingElementRef$c2 === void 0 || _resizingElementRef$c2.style.removeProperty(resizingCssVar);
+        return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          var _resizingElementRef$c2;
+          var source, width, finalWidth, _t;
+          return _regenerator.default.wrap(function (_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                source = _ref7.source;
+                (0, _tinyInvariant.default)((0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data));
+                _preventUnhandled.preventUnhandled.stop();
+                if (!prepareResize) {
+                  _context.next = 3;
+                  break;
+                }
+                _context.next = 1;
+                return prepareResize();
+              case 1:
+                _t = !_context.sent;
+                if (_t) {
+                  _context.next = 2;
+                  break;
+                }
+                _t = !panel.isConnected;
+              case 2:
+                if (!_t) {
+                  _context.next = 3;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 3:
+                // PDD may deliver its final throttled drag update immediately before drop.
+                // Commit that update once before measuring; do not persist a previous frame.
+                if (onResizeInternal && lastManagedResizeWidth !== undefined) {
+                  width = lastManagedResizeWidth;
+                  (0, _reactDom.flushSync)(function () {
+                    return onResizeInternal(width);
+                  });
+                  lastManagedResizeWidth = undefined;
+                }
+                finalWidth = (0, _getPixelWidth.getPixelWidth)(panel); // Persist the final preferred width before removing the imperative drag
+                // variable, so the rendered width is continuous across pointer release.
+                if ((0, _fg.fg)('platform-dst-chat-panel-layout')) {
+                  (0, _reactDom.flushSync)(function () {
+                    return onCompleteResize(finalWidth);
+                  });
+                } else {
+                  onCompleteResize(finalWidth);
+                }
+                onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd({
+                  initialWidth: source.data.initialWidth,
+                  finalWidth: finalWidth
+                });
+                panel.style.removeProperty(resizingCssVar);
+                resizingElementRef === null || resizingElementRef === void 0 || (_resizingElementRef$c2 = resizingElementRef.current) === null || _resizingElementRef$c2 === void 0 || _resizingElementRef$c2.style.removeProperty(resizingCssVar);
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }))();
       }
     }));
-  }, [onCompleteResize, onResizeStartInternal, onResizeInternal, onResizeStart, onResizeEnd, panel, resizingCssVar, resizingElementRef, legacyPanelWidth, position, openLayerObserver, panelId, getResizeBounds]);
+  }, [onCompleteResize, onResizeStartInternal, onResizeInternal, prepareResize, onResizeStart, onResizeEnd, panel, resizingCssVar, resizingElementRef, legacyPanelWidth, position, openLayerObserver, panelId, getResizeBounds]);
   var onResizeStartStableRef = (0, _useStableRef.default)(onResizeStart);
   var onResizeEndStableRef = (0, _useStableRef.default)(onResizeEnd);
   var _useState5 = (0, _react.useState)(function () {
@@ -367,74 +400,177 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 1),
     keyboardResizeManager = _useState6[0];
-  var handleSliderInputChange = (0, _react.useCallback)(function (event) {
-    var isManagedResize = (0, _fg.fg)('platform-dst-chat-panel-layout') && onResizeInternal;
-    var value = isManagedResize ? parseFloat(event.target.value) : parseInt(event.target.value);
-    if (isManagedResize) {
-      // The available region may have changed since focus, including without a
-      // window resize. Use the allocator's current bounds for the public payload.
-      var bounds = getResizeBounds();
-      var min = (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(bounds.min);
-      var max = (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(bounds.max);
-      value = Math.max(min, Math.min(value, max));
-      setRangeInputBounds({
-        min: min,
-        max: max
-      });
-    }
-    setRangeInputValue(value);
+  var focusSequence = (0, _react.useRef)(0);
+  var keyboardBoundsReady = (0, _react.useRef)(false);
+  var pendingKeyboardWidth = (0, _react.useRef)(null);
+  var handleSliderInputChange = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(event, pendingKey) {
+      var isManagedResize, sequence, value, bounds, min, max, _pendingKeyboardWidth, current, isRtl, increase, step, _t2, _t3;
+      return _regenerator.default.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            isManagedResize = (0, _fg.fg)('platform-dst-chat-panel-layout') && onResizeInternal;
+            sequence = focusSequence.current;
+            value = isManagedResize ? parseFloat(event.currentTarget.value) : parseInt(event.currentTarget.value);
+            if (!prepareResize) {
+              _context2.next = 4;
+              break;
+            }
+            _context2.next = 1;
+            return prepareResize();
+          case 1:
+            _t3 = !_context2.sent;
+            if (_t3) {
+              _context2.next = 2;
+              break;
+            }
+            _t3 = !panel.isConnected;
+          case 2:
+            _t2 = _t3;
+            if (_t2) {
+              _context2.next = 3;
+              break;
+            }
+            _t2 = sequence !== focusSequence.current;
+          case 3:
+            if (!_t2) {
+              _context2.next = 4;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 4:
+            if (isManagedResize) {
+              // The available region may have changed since focus, including without a
+              // window resize. Use the allocator's current bounds for the public payload.
+              bounds = getResizeBounds();
+              min = (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(bounds.min);
+              max = (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(bounds.max);
+              if (pendingKey) {
+                // Native range inputs would apply these keys to the placeholder bounds.
+                // Preserve the intent until the chunk provides the real bounds instead.
+                current = (_pendingKeyboardWidth = pendingKeyboardWidth.current) !== null && _pendingKeyboardWidth !== void 0 ? _pendingKeyboardWidth : (0, _getPixelWidth.getPixelWidth)(panel);
+                isRtl = getTextDirection(panel) === 'rtl';
+                increase = pendingKey === 'ArrowUp' || pendingKey === (isRtl ? 'ArrowLeft' : 'ArrowRight') || pendingKey === 'PageUp';
+                step = pendingKey.startsWith('Page') ? Math.max(20, (max - min) / 10) : 20;
+                value = pendingKey === 'End' ? max : pendingKey === 'Home' ? min : current + (increase ? step : -step);
+              }
+              value = Math.max(min, Math.min(value, max));
+              setRangeInputBounds({
+                min: min,
+                max: max
+              });
+            }
+            pendingKeyboardWidth.current = value;
+            setRangeInputValue(value);
 
-    /**
-     * We are intentionally _not_ debouncing `onCompleteResize` as we want it to be called anytime the user changes the range input value.
-     * It is an internal-only callback - it's provided by `PanelSplitterProvider`, and used by layout slots to update their layout width state.
-     */
-    onCompleteResize(value);
-    keyboardResizeManager.onResize({
-      initialWidth: panelWidth,
-      finalWidth: value
-    });
-  }, [getResizeBounds, onCompleteResize, onResizeInternal, panelWidth, keyboardResizeManager]);
+            /**
+             * We are intentionally _not_ debouncing `onCompleteResize` as we want it to be called anytime the user changes the range input value.
+             * It is an internal-only callback - it's provided by `PanelSplitterProvider`, and used by layout slots to update their layout width state.
+             */
+            onCompleteResize(value);
+            keyboardResizeManager.onResize({
+              initialWidth: panelWidth,
+              finalWidth: value
+            });
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x, _x2) {
+      return _ref8.apply(this, arguments);
+    };
+  }(), [getResizeBounds, onCompleteResize, onResizeInternal, panelWidth, keyboardResizeManager, panel, prepareResize]);
+  var handleSliderKeyDown = (0, _react.useCallback)(function (event) {
+    if (prepareResize && !keyboardBoundsReady.current && ['Home', 'End', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].includes(event.key)) {
+      event.preventDefault();
+      void handleSliderInputChange(event, event.key);
+    }
+  }, [handleSliderInputChange, prepareResize]);
   var resizeEventListenerCleanupFn = (0, _react.useRef)(null);
-  var handleSliderFocus = (0, _react.useCallback)(function () {
+  var handleSliderFocus = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
     var _resizeEventListenerC;
-    /**
-     * We are only updating the range input's properties when the element is focused, as a performance optimisation.
-     * It isn't necessary to recalculate these values until the element is going to be used.
-     */
-
-    // Clean up any left over listeners in case `focus` was triggered again without `blur`.
-    (_resizeEventListenerC = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC === void 0 || _resizeEventListenerC.call(resizeEventListenerCleanupFn);
+    var sequence, width, resizeBounds, _t4, _t5;
+    return _regenerator.default.wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          sequence = ++focusSequence.current;
+          keyboardBoundsReady.current = false;
+          pendingKeyboardWidth.current = null;
+          if (!prepareResize) {
+            _context3.next = 4;
+            break;
+          }
+          _context3.next = 1;
+          return prepareResize();
+        case 1:
+          _t5 = !_context3.sent;
+          if (_t5) {
+            _context3.next = 2;
+            break;
+          }
+          _t5 = !panel.isConnected;
+        case 2:
+          _t4 = _t5;
+          if (_t4) {
+            _context3.next = 3;
+            break;
+          }
+          _t4 = sequence !== focusSequence.current;
+        case 3:
+          if (!_t4) {
+            _context3.next = 4;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 4:
+          /**
+           * We are only updating the range input's properties when the element is focused, as a performance optimisation.
+           * It isn't necessary to recalculate these values until the element is going to be used.
+           */
 
-    // Update the range input value to match the current panel width.
-    setRangeInputValue(panelWidth);
-    var resizeBounds = getResizeBounds();
+          // Clean up any left over listeners in case `focus` was triggered again without `blur`.
+          (_resizeEventListenerC = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC === void 0 || _resizeEventListenerC.call(resizeEventListenerCleanupFn);
 
-    // Update the range input bounds to ensure they are accurate (in case the viewport was previously resized)
-    setRangeInputBounds({
-      min: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.min),
-      max: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.max)
-    });
+          // Update the range input value to match the current panel width.
+          width = prepareResize ? (0, _getPixelWidth.getPixelWidth)(panel) : panelWidth;
+          pendingKeyboardWidth.current = width;
+          setRangeInputValue(width);
+          resizeBounds = getResizeBounds(); // Update the range input bounds to ensure they are accurate (in case the viewport was previously resized)
+          setRangeInputBounds({
+            min: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.min),
+            max: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.max)
+          });
+          keyboardBoundsReady.current = true;
 
-    /**
-     * _While the slider element is focused_, add a window resize event listener to update the range input bounds
-     * when the window is resized. This is needed to ensure the min and max widths accurately reflect the viewport
-     * size - in case they are provided in vw units.
-     *
-     * This listener is cleaned up when the element is blurred.
-     */
-    resizeEventListenerCleanupFn.current = (0, _bindEventListener.bind)(window, {
-      type: 'resize',
-      listener: function updateState() {
-        var resizeBounds = getResizeBounds();
-        setRangeInputBounds({
-          min: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.min),
-          max: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.max)
-        });
+          /**
+           * _While the slider element is focused_, add a window resize event listener to update the range input bounds
+           * when the window is resized. This is needed to ensure the min and max widths accurately reflect the viewport
+           * size - in case they are provided in vw units.
+           *
+           * This listener is cleaned up when the element is blurred.
+           */
+          resizeEventListenerCleanupFn.current = (0, _bindEventListener.bind)(window, {
+            type: 'resize',
+            listener: function updateState() {
+              var resizeBounds = getResizeBounds();
+              setRangeInputBounds({
+                min: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.min),
+                max: (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(resizeBounds.max)
+              });
+            }
+          });
+        case 5:
+        case "end":
+          return _context3.stop();
       }
-    });
-  }, [panelWidth, getResizeBounds]);
+    }, _callee3);
+  })), [panelWidth, getResizeBounds, panel, prepareResize]);
   var handleSliderBlur = (0, _react.useCallback)(function () {
     var _resizeEventListenerC2;
+    focusSequence.current++;
+    keyboardBoundsReady.current = false;
     // Remove the resize event listener when the range input is blurred.
     (_resizeEventListenerC2 = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC2 === void 0 || _resizeEventListenerC2.call(resizeEventListenerCleanupFn);
   }, []);
@@ -461,6 +597,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
+    "data-panel-splitter": prepareResize ? '' : undefined,
     onDoubleClick: onDoubleClick,
     className: (0, _runtime.ax)([grabAreaStyles.root, (0, _fg.fg)('platform-dst-tokens-finesse') && grabAreaStyles.rootFinesse])
   }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
@@ -472,6 +609,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     "aria-valuetext": ariaValueText,
     "aria-labelledby": labelId,
     onChange: handleSliderInputChange,
+    onKeyDown: prepareResize ? handleSliderKeyDown : undefined,
     onFocus: handleSliderFocus,
     onBlur: handleSliderBlur
   }), /*#__PURE__*/React.createElement("span", {
@@ -496,12 +634,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
  * </Aside>
  * ```
  */
-var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref8) {
-  var label = _ref8.label,
-    onResizeStart = _ref8.onResizeStart,
-    onResizeEnd = _ref8.onResizeEnd,
-    testId = _ref8.testId,
-    tooltipContent = _ref8.tooltipContent;
+var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref0) {
+  var label = _ref0.label,
+    onResizeStart = _ref0.onResizeStart,
+    onResizeEnd = _ref0.onResizeEnd,
+    testId = _ref0.testId,
+    tooltipContent = _ref0.tooltipContent;
   var _useState7 = (0, _react.useState)(null),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     panel = _useState8[0],
@@ -521,6 +659,7 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref8) {
     onResizeStartInternal = context.onResizeStartInternal,
     onResizeInternal = context.onResizeInternal,
     getResizeBounds = context.getResizeBounds,
+    prepareResize = context.prepareResize,
     resizingCssVar = context.resizingCssVar,
     resizingElementRef = context.resizingElementRef,
     position = context.position,
@@ -619,6 +758,7 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref8) {
     onCompleteResize: onCompleteResize,
     onResizeStartInternal: onResizeStartInternal,
     onResizeInternal: onResizeInternal,
+    prepareResize: prepareResize,
     getResizeBounds: getResizeBounds,
     resizingCssVar: resizingCssVar,
     resizingElementRef: resizingElementRef,

package/dist/cjs/ui/page-layout/panel-splitter/provider.js

@@ -19,6 +19,7 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
     onCompleteResize = _ref.onCompleteResize,
     onResizeStartInternal = _ref.onResizeStartInternal,
     onResizeInternal = _ref.onResizeInternal,
+    prepareResize = _ref.prepareResize,
     getResizeBounds = _ref.getResizeBounds,
     resizingCssVar = _ref.resizingCssVar,
     panelRef = _ref.panelRef,
@@ -38,6 +39,7 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
       onCompleteResize: onCompleteResize,
       onResizeStartInternal: onResizeStartInternal,
       onResizeInternal: onResizeInternal,
+      prepareResize: prepareResize,
       getResizeBounds: getResizeBounds,
       resizingCssVar: resizingCssVar,
       position: position,
@@ -47,7 +49,7 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
       portalRef: typeof providedPortalRef !== 'undefined' ? providedPortalRef : portalRef,
       shortcut: shortcut
     };
-  }, [panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, getResizeBounds, resizingCssVar, position, panelRef, resizingElementRef, isEnabled, providedPortalRef, shortcut]);
+  }, [panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, prepareResize, getResizeBounds, resizingCssVar, position, panelRef, resizingElementRef, isEnabled, providedPortalRef, shortcut]);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_panelSplitterContext.PanelSplitterContext.Provider, {
     value: context
   }, children), typeof providedPortalRef !== 'undefined' ? null : /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/ui/page-layout/root.compiled.css

@@ -1,13 +1,24 @@
 ._18m9zryt{overflow-y:clip}
+._1bsb1osq{width:100%}
+._1bsb1raa{width:max(0px,calc(var(--n_layoutW) - var(--n_mainMinW) - var(--n_fitAside, 0px) - var(--n_fitRibbon, 0px) - var(--n_fitPanel, 0px)))}
+._1bsb4nr3{width:var(--n_layoutW)}
+._1bsbjwgu{width:max(0px,calc(100% - var(--n_fitNav)))}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1cwmtye8{--n_mainMinW:20rem}
 ._1e0c11p5{display:grid}
+._1f381mry{container-name:navigation-chat-space}
+._1f38hwoh{container-name:navigation-main-space}
+._1f38hx13{container-name:navigation-layout-width}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
 ._1reozryt{overflow-x:clip}
 ._1tke1kxc{min-height:100vh}
 ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
+._5to3grho{--n_fitNav:0px}
+._7cca15wb{container-type:inline-size}
+._82d6okmw{--n_layoutW:100cqw}
+._vchh1ntv{box-sizing:content-box}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (min-width:40rem){._12ag50j2{grid-template-areas:"banner banner" "top-bar chat-panel" "main chat-panel" "aside chat-panel"}._71dlqwpl{grid-template-columns:minmax(var(--n_mainMinW),1fr) minmax(0,max-content)}}
-@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkqmyk{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside chat-panel"}._1rqt8mqp{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto minmax(0,max-content)}}
-@media (min-width:90rem){._xkmggc7l{grid-template-areas:"banner banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside panel chat-panel"}._tyve1i18{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto auto minmax(0,max-content)}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}
+@media (min-width:40rem){._12ag50j2{grid-template-areas:"banner banner" "top-bar chat-panel" "main chat-panel" "aside chat-panel"}._71dl19sb{grid-template-columns:minmax(var(--n_mainMinW),1fr) var(--n_chatTrack,0)}}
+@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkqmyk{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside chat-panel"}._1rqttswr{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto var(--n_chatTrack,0)}}
+@media (min-width:90rem){._xkmggc7l{grid-template-areas:"banner banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside panel chat-panel"}._tyve87m4{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto auto var(--n_chatTrack,0)}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Root = Root;
-exports.gridRootId = void 0;
+exports.gridRootId = exports.gridRootFitId = exports.gridRootChatFitId = void 0;
 require("./root.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
@@ -23,34 +23,60 @@ var _visibilityProvider = require("./side-nav/visibility-provider");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
+var gridRootFitId = exports.gridRootFitId = "".concat(gridRootId, "-fit");
+var gridRootChatFitId = exports.gridRootChatFitId = "".concat(gridRootId, "-chat-fit");
 var 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(_ref) {
+  var children = _ref.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.default.createElement("div", {
+    "data-layout-width-container": "",
+    className: (0, _runtime.ax)([styles.widthContainer])
+  }, /*#__PURE__*/_react.default.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: "@property --n_layoutW { syntax: '<length>'; inherits: true; initial-value: 0px; }"
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: gridRootFitId,
+    className: (0, _runtime.ax)([styles.mainSpace])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: gridRootChatFitId,
+    className: (0, _runtime.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
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-function Root(_ref) {
-  var children = _ref.children,
-    xcss = _ref.xcss,
-    _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
-    UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    _ref$skipLinksLabel = _ref.skipLinksLabel,
-    skipLinksLabel = _ref$skipLinksLabel === void 0 ? (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:' : _ref$skipLinksLabel,
-    _ref$skipLinksTrigger = _ref.skipLinksTriggerLabel,
-    skipLinksTriggerLabel = _ref$skipLinksTrigger === void 0 ? 'Skip to' : _ref$skipLinksTrigger,
-    testId = _ref.testId,
-    defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
-    _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
-    isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
+function Root(_ref2) {
+  var children = _ref2.children,
+    xcss = _ref2.xcss,
+    _ref2$UNSAFE_dangerou = _ref2.UNSAFE_dangerouslyHoistSlotSizes,
+    UNSAFE_dangerouslyHoistSlotSizes = _ref2$UNSAFE_dangerou === void 0 ? false : _ref2$UNSAFE_dangerou,
+    _ref2$skipLinksLabel = _ref2.skipLinksLabel,
+    skipLinksLabel = _ref2$skipLinksLabel === void 0 ? (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:' : _ref2$skipLinksLabel,
+    _ref2$skipLinksTrigge = _ref2.skipLinksTriggerLabel,
+    skipLinksTriggerLabel = _ref2$skipLinksTrigge === void 0 ? 'Skip to' : _ref2$skipLinksTrigge,
+    testId = _ref2.testId,
+    defaultSideNavCollapsed = _ref2.defaultSideNavCollapsed,
+    _ref2$isSideNavShortc = _ref2.isSideNavShortcutEnabled,
+    isSideNavShortcutEnabled = _ref2$isSideNavShortc === void 0 ? false : _ref2$isSideNavShortc;
   var ref = (0, _react.useRef)(null);
   var isChatPanelLayoutEnabled = (0, _fg.fg)('platform-dst-chat-panel-layout');
   var LayoutProvider = isChatPanelLayoutEnabled ? _layoutAreaSizingProvider.LayoutAreaSizingProvider : _react.default.Fragment;
+  var WidthContainer = isChatPanelLayoutEnabled ? LayoutFitContainers : _react.default.Fragment;
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -79,10 +105,10 @@ function Root(_ref) {
     label: skipLinksLabel,
     triggerLabel: skipLinksTriggerLabel,
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(WidthContainer, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: (0, _runtime.ax)([isChatPanelLayoutEnabled ? styles.root : styles.legacyRoot, (0, _fg.fg)('platform-dst-motion-uplift-panel') && styles.panelUplift, (0, _fg.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
-  }, children))))))))));
+  }, children)))))))))));
 }