@atlaskit/navigation-system 11.0.0 → 11.1.0

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

@@ -0,0 +1,304 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutAreaSizingProvider = LayoutAreaSizingProvider;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _calculateLayoutAreaStates = require("./calculate-layout-area-states");
+var _layoutAreaSizingContext = require("./layout-area-sizing-context");
+var _layoutAreaStateContexts = require("./layout-area-state-contexts");
+var _useOccupiedLayoutWidth = require("./use-occupied-layout-width");
+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 _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; }
+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; }
+var defaultMainMinWidth = 320;
+function useStableAreaState(state) {
+  var _ref = state !== null && state !== void 0 ? state : {},
+    mode = _ref.mode,
+    width = _ref.width,
+    minWidth = _ref.minWidth;
+  return (0, _react.useMemo)(function () {
+    return mode !== undefined && width !== undefined && minWidth !== undefined ? {
+      mode: mode,
+      width: width,
+      minWidth: minWidth
+    } : undefined;
+  }, [mode, width, minWidth]);
+}
+function LayoutAreaSizingProvider(_ref2) {
+  var children = _ref2.children,
+    layoutRef = _ref2.layoutRef;
+  var occupiedWidth = (0, _useOccupiedLayoutWidth.useOccupiedLayoutWidth)(layoutRef);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultMainMinWidth),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    mainMinWidth = _useState4[0],
+    setMainMinWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    areas = _useState6[0],
+    setAreas = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    resizeSession = _useState8[0],
+    setResizeSession = _useState8[1];
+  var areaStatesRef = _react.default.useRef({});
+  var configsRef = _react.default.useRef({});
+  var openSequence = _react.default.useRef(0);
+  (0, _react.useEffect)(function () {
+    setResizeSession(null);
+  }, [mainMinWidth, occupiedWidth]);
+  (0, _react.useEffect)(function () {
+    var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    var previous = null;
+    // Match the actual rem-based grid breakpoint, including browser font settings.
+    var inlineChatQuery = window.matchMedia('(min-width: 40rem)');
+    var inlineSideNavQuery = window.matchMedia('(min-width: 64rem)');
+    var updateDimensions = function updateDimensions(contentWidth) {
+      var _style$paddingLeft, _style$paddingRight, _previous;
+      var style = root && contentWidth === undefined ? getComputedStyle(root) : null;
+      var layoutWidth = contentWidth !== null && contentWidth !== void 0 ? contentWidth : root ? Math.max(0, root.clientWidth - (parseFloat((_style$paddingLeft = style === null || style === void 0 ? void 0 : style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : '') || 0) - (parseFloat((_style$paddingRight = style === null || style === void 0 ? void 0 : style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : '') || 0)) : window.innerWidth;
+      var next = {
+        viewportWidth: window.innerWidth,
+        layoutWidth: layoutWidth,
+        isChatPanelOverlay: !inlineChatQuery.matches,
+        isSideNavOverlay: !inlineSideNavQuery.matches
+      };
+      if (((_previous = previous) === null || _previous === void 0 ? void 0 : _previous.viewportWidth) === next.viewportWidth && previous.layoutWidth === next.layoutWidth && previous.isChatPanelOverlay === next.isChatPanelOverlay && previous.isSideNavOverlay === next.isSideNavOverlay) {
+        return;
+      }
+      previous = next;
+      setDimensions(next);
+      setResizeSession(null);
+    };
+    updateDimensions();
+    var observer = new ResizeObserver(function (entries) {
+      var entry = entries.find(function (entry) {
+        return entry.target === root;
+      });
+      if (entry) {
+        updateDimensions(entry.contentRect.width);
+      }
+    });
+    if (root) {
+      observer.observe(root);
+    }
+    var unbindResize = (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: function listener() {
+        return updateDimensions();
+      }
+    });
+    var unbindQuery = (0, _bindEventListener.bind)(inlineChatQuery, {
+      type: 'change',
+      listener: function listener() {
+        return updateDimensions();
+      }
+    });
+    var unbindSideNavQuery = (0, _bindEventListener.bind)(inlineSideNavQuery, {
+      type: 'change',
+      listener: function listener() {
+        return updateDimensions();
+      }
+    });
+    return function () {
+      observer.disconnect();
+      unbindResize();
+      unbindQuery();
+      unbindSideNavQuery();
+    };
+  }, [layoutRef]);
+  var registerArea = (0, _react.useCallback)(function (area, config) {
+    var previous = configsRef.current[area];
+    configsRef.current[area] = config;
+    setResizeSession(function (current) {
+      // A changed layout/configuration needs a fresh allocation. A controlled
+      // acknowledgement for the resized area keeps its siblings fixed.
+      return (previous === null || previous === void 0 ? void 0 : previous.isOpen) === config.isOpen && previous.minWidth === config.minWidth && previous.maxWidth === config.maxWidth && previous.defaultWidth === config.defaultWidth && previous.compactDefaultWidth === config.compactDefaultWidth && (previous.requestedWidth === config.requestedWidth || (current === null || current === void 0 ? void 0 : current.area) === area) ? current : null;
+    });
+    // Allocate once per registration, outside the updater React may replay. Gaps are
+    // harmless: only relative ordering of closed-to-open transitions is significant.
+    var openedAt = ++openSequence.current;
+    setAreas(function (current) {
+      var existing = current[area];
+      return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, area, _objectSpread(_objectSpread(_objectSpread({}, existing), config), {}, {
+        liveResize: config.isOpen ? existing === null || existing === void 0 ? void 0 : existing.liveResize : undefined,
+        openedAt: config.isOpen && !(existing !== null && existing !== void 0 && existing.isOpen) ? openedAt : existing === null || existing === void 0 ? void 0 : existing.openedAt
+      })));
+    });
+  }, []);
+  var unregisterArea = (0, _react.useCallback)(function (area) {
+    delete configsRef.current[area];
+    setResizeSession(null);
+    setAreas(function (current) {
+      if (!current[area]) {
+        return current;
+      }
+      // Closing uses isOpen: false and retains preferences. Unregistering means
+      // the owning component unmounted; a replacement must start with its own defaults.
+      var next = _objectSpread({}, current);
+      delete next[area];
+      return next;
+    });
+  }, []);
+  var freezeSiblingWidths = (0, _react.useCallback)(function (area) {
+    var baselineWidths = {};
+    var _iterator = _createForOfIteratorHelper(['side-nav', 'panel', 'chat-panel']),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var areaName = _step.value;
+        var state = areaStatesRef.current[areaName];
+        if ((state === null || state === void 0 ? void 0 : state.mode) === 'inline') {
+          baselineWidths[areaName] = state.width;
+        }
+      }
+      // Keep the same siblings fixed after completion, including while a controlled
+      // consumer rejects or asynchronously accepts the requested width.
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    setResizeSession({
+      area: area,
+      baselineWidths: baselineWidths
+    });
+  }, []);
+  var startResize = (0, _react.useCallback)(function (area, mode) {
+    if (mode !== 'inline') {
+      return;
+    }
+    freezeSiblingWidths(area);
+
+    // Start from the effective width, which may already be compressed below the preferred width.
+    // Reapplying the preferred width here would move the splitter away from the pointer.
+    var renderedState = areaStatesRef.current[area];
+    if ((renderedState === null || renderedState === void 0 ? void 0 : renderedState.mode) === 'inline') {
+      setAreas(function (current) {
+        var existing = current[area];
+        return existing ? _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+          liveResize: {
+            mode: mode,
+            width: renderedState.width
+          }
+        }))) : current;
+      });
+    }
+  }, [freezeSiblingWidths]);
+  var resize = (0, _react.useCallback)(function (area, mode, width) {
+    setAreas(function (current) {
+      var _existing$liveResize;
+      var existing = current[area];
+      if ((existing === null || existing === void 0 || (_existing$liveResize = existing.liveResize) === null || _existing$liveResize === void 0 ? void 0 : _existing$liveResize.mode) === mode && existing.liveResize.width === width) {
+        return current;
+      }
+      return existing ? _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+        liveResize: {
+          mode: mode,
+          width: width
+        }
+      }))) : current;
+    });
+  }, []);
+  var completeResize = (0, _react.useCallback)(function (area, mode, width) {
+    if (mode === 'inline') {
+      // Keyboard resizing completes without a preceding pointer-drag session.
+      freezeSiblingWidths(area);
+    }
+    setAreas(function (current) {
+      var existing = current[area];
+      if (!existing) {
+        return current;
+      }
+      if (mode === 'overlay') {
+        return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+          liveResize: undefined,
+          preferredOverlayWidth: width
+        })));
+      }
+      return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+        liveResize: undefined,
+        preferredInlineWidth: width
+      })));
+    });
+  }, [freezeSiblingWidths]);
+  var areaStates = (0, _react.useMemo)(function () {
+    return dimensions === null ? {} : (0, _calculateLayoutAreaStates.calculateLayoutAreaStates)(_objectSpread(_objectSpread({}, dimensions), {}, {
+      occupiedWidth: occupiedWidth,
+      mainMinWidth: mainMinWidth,
+      areas: areas,
+      resizeSession: resizeSession
+    }));
+  }, [areas, mainMinWidth, resizeSession, dimensions, occupiedWidth]);
+  (0, _react.useEffect)(function () {
+    areaStatesRef.current = areaStates;
+  }, [areaStates]);
+  (0, _react.useEffect)(function () {
+    var _areaStates$sideNav, _areaStates$chatPane, _sideNav$openedAt, _chatPanel$openedAt;
+    if (((_areaStates$sideNav = areaStates['side-nav']) === null || _areaStates$sideNav === void 0 ? void 0 : _areaStates$sideNav.mode) !== 'overlay' || ((_areaStates$chatPane = areaStates['chat-panel']) === null || _areaStates$chatPane === void 0 ? void 0 : _areaStates$chatPane.mode) !== 'overlay') {
+      return;
+    }
+    var sideNav = areas['side-nav'];
+    var chatPanel = areas['chat-panel'];
+    if (!(sideNav !== null && sideNav !== void 0 && sideNav.isOpen) || !(chatPanel !== null && chatPanel !== void 0 && chatPanel.isOpen)) {
+      return;
+    }
+    if (((_sideNav$openedAt = sideNav.openedAt) !== null && _sideNav$openedAt !== void 0 ? _sideNav$openedAt : 0) > ((_chatPanel$openedAt = chatPanel.openedAt) !== null && _chatPanel$openedAt !== void 0 ? _chatPanel$openedAt : 0)) {
+      var _chatPanel$onRequestC;
+      (_chatPanel$onRequestC = chatPanel.onRequestClose) === null || _chatPanel$onRequestC === void 0 || _chatPanel$onRequestC.call(chatPanel);
+    } else {
+      var _sideNav$onRequestClo;
+      (_sideNav$onRequestClo = sideNav.onRequestClose) === null || _sideNav$onRequestClo === void 0 || _sideNav$onRequestClo.call(sideNav);
+    }
+  }, [areas, areaStates]);
+
+  // Read bounds lazily: changing a sibling's capacity must not publish new render
+  // state or recreate drag listeners for a region whose own width did not change.
+  var getResizeBounds = (0, _react.useCallback)(function (area) {
+    var _areaStatesRef$curren;
+    var bounds = (_areaStatesRef$curren = areaStatesRef.current[area]) === null || _areaStatesRef$curren === void 0 ? void 0 : _areaStatesRef$curren.resizeBounds;
+    return bounds ? {
+      min: "".concat(bounds.min, "px"),
+      max: "".concat(bounds.max, "px")
+    } : undefined;
+  }, []);
+  var value = (0, _react.useMemo)(function () {
+    return {
+      getResizeBounds: getResizeBounds,
+      registerArea: registerArea,
+      unregisterArea: unregisterArea,
+      startResize: startResize,
+      resize: resize,
+      completeResize: completeResize,
+      setMainMinWidth: setMainMinWidth
+    };
+  }, [completeResize, getResizeBounds, registerArea, resize, startResize, unregisterArea]);
+  var sideNavState = useStableAreaState(areaStates['side-nav']);
+  var panelState = useStableAreaState(areaStates.panel);
+  var chatPanelState = useStableAreaState(areaStates['chat-panel']);
+  var SideNavStateProvider = _layoutAreaStateContexts.layoutAreaStateContexts['side-nav'].Provider;
+  var PanelStateProvider = _layoutAreaStateContexts.layoutAreaStateContexts.panel.Provider;
+  var ChatPanelStateProvider = _layoutAreaStateContexts.layoutAreaStateContexts['chat-panel'].Provider;
+  return /*#__PURE__*/_react.default.createElement(_layoutAreaSizingContext.LayoutAreaSizingContext.Provider, {
+    value: value
+  }, /*#__PURE__*/_react.default.createElement(SideNavStateProvider, {
+    value: sideNavState
+  }, /*#__PURE__*/_react.default.createElement(PanelStateProvider, {
+    value: panelState
+  }, /*#__PURE__*/_react.default.createElement(ChatPanelStateProvider, {
+    value: chatPanelState
+  }, children))));
+}

package/dist/cjs/ui/page-layout/layout-area-state-contexts.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.layoutAreaStateContexts = void 0;
+var _react = require("react");
+// Width changes should notify only the affected region, not every sizing consumer.
+var layoutAreaStateContexts = exports.layoutAreaStateContexts = {
+  'side-nav': /*#__PURE__*/(0, _react.createContext)(undefined),
+  panel: /*#__PURE__*/(0, _react.createContext)(undefined),
+  'chat-panel': /*#__PURE__*/(0, _react.createContext)(undefined)
+};

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

@@ -12,7 +12,10 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useSkipLink = require("../../../context/skip-links/use-skip-link");
+var _constants = require("../constants");
+var _root = require("../root");
 var _useLayoutId = require("../use-layout-id");
+var _useLayoutMainSizing = require("../use-layout-main-sizing");
 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); }
 var contentInsetBlockStartStatic = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
 var contentHeightWhenFixedStatic = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
@@ -29,12 +32,18 @@ function Main(_ref) {
     _ref$skipLinkLabel = _ref.skipLinkLabel,
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
     testId = _ref.testId,
-    providedId = _ref.id;
+    providedId = _ref.id,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth;
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
+  (0, _useLayoutMainSizing.useLayoutMainSizing)(minWidth);
   (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
-  return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, (0, _fg.fg)('platform-dst-chat-panel-layout') &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+  React.createElement("style", null, "#".concat(_root.gridRootId, " { ").concat(_constants.mainMinimumWidthVar, ": ").concat(minWidth, "px; }")), /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
     className: (0, _runtime.ax)([mainElementStyles.root, xcss]),

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

@@ -146,10 +146,13 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     panelId = _ref3.panelId,
     panelWidth = _ref3.panelWidth,
     onCompleteResize = _ref3.onCompleteResize,
+    onResizeStartInternal = _ref3.onResizeStartInternal,
+    onResizeInternal = _ref3.onResizeInternal,
     getResizeBounds = _ref3.getResizeBounds,
     panel = _ref3.panel,
     portal = _ref3.portal,
     resizingCssVar = _ref3.resizingCssVar,
+    resizingElementRef = _ref3.resizingElementRef,
     position = _ref3.position,
     tooltipContent = _ref3.tooltipContent,
     shortcut = _ref3.shortcut;
@@ -187,9 +190,13 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
   // Storing the initial `clientX` on `mousedown` events, to workaround a bug caused by some browser extensions
   // where the `dragstart` event incorrectly returns `0` for the `clientX` location.
   var initialClientXRef = (0, _react.useRef)(null);
+  // Live allocation changes panelWidth on every frame. Only the legacy path should
+  // rebind the drag listeners when this value changes.
+  var legacyPanelWidth = (0, _fg.fg)('platform-dst-chat-panel-layout') ? undefined : panelWidth;
   (0, _react.useEffect)(function () {
     var splitter = splitterRef.current;
     (0, _tinyInvariant.default)(splitter, 'Splitter ref must be set');
+    var lastManagedResizeWidth;
     return (0, _combine.combine)((0, _blockDraggingToIframes.blockDraggingToIFrames)({
       element: splitter
     }),
@@ -248,9 +255,18 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
          * because some browser extensions can cause the event properties to incorrectly return 0.
          */
         (0, _tinyInvariant.default)((0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data));
-        onResizeStart === null || onResizeStart === void 0 || onResizeStart({
+        var resizeStartData = {
           initialWidth: source.data.initialWidth
-        });
+        };
+        // The layout allocation system needs to know which area is actively being
+        // resized before the first drag update. Committing this synchronously keeps
+        // the actively dragged area protected from automatic compression.
+        if (onResizeStartInternal) {
+          (0, _reactDom.flushSync)(function () {
+            return onResizeStartInternal(resizeStartData);
+          });
+        }
+        onResizeStart === null || onResizeStart === void 0 || onResizeStart(resizeStartData);
 
         // Close any open layers when the user starts resizing
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
@@ -283,23 +299,54 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
           position: position
         });
         var resizingWidth = "clamp(".concat(resizeBounds.min, ", ").concat(targetWidth, "px, ").concat(resizeBounds.max, ")");
-        panel.style.setProperty(resizingCssVar, resizingWidth);
+        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)));
+          if (width !== lastManagedResizeWidth) {
+            lastManagedResizeWidth = width;
+            onResizeInternal(width);
+          }
+        } else {
+          var _resizingElementRef$c;
+          panel.style.setProperty(resizingCssVar, resizingWidth);
+          resizingElementRef === null || resizingElementRef === void 0 || (_resizingElementRef$c = resizingElementRef.current) === null || _resizingElementRef$c === void 0 || _resizingElementRef$c.style.setProperty(resizingCssVar, resizingWidth);
+        }
         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);
-        onCompleteResize(finalWidth);
+        // 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);
       }
     }));
-  }, [onCompleteResize, onResizeStart, onResizeEnd, panel, resizingCssVar, panelWidth, position, openLayerObserver, panelId, getResizeBounds]);
+  }, [onCompleteResize, onResizeStartInternal, onResizeInternal, 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 () {
@@ -325,7 +372,20 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 1),
     keyboardResizeManager = _useState6[0];
   var handleSliderInputChange = (0, _react.useCallback)(function (event) {
-    var value = parseInt(event.target.value);
+    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);
 
     /**
@@ -337,7 +397,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
       initialWidth: panelWidth,
       finalWidth: value
     });
-  }, [onCompleteResize, panelWidth, keyboardResizeManager]);
+  }, [getResizeBounds, onCompleteResize, onResizeInternal, panelWidth, keyboardResizeManager]);
   var resizeEventListenerCleanupFn = (0, _react.useRef)(null);
   var handleSliderFocus = (0, _react.useCallback)(function () {
     var _resizeEventListenerC;
@@ -462,8 +522,11 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref8) {
     panelId = context.panelId,
     panelWidth = context.panelWidth,
     onCompleteResize = context.onCompleteResize,
+    onResizeStartInternal = context.onResizeStartInternal,
+    onResizeInternal = context.onResizeInternal,
     getResizeBounds = context.getResizeBounds,
     resizingCssVar = context.resizingCssVar,
+    resizingElementRef = context.resizingElementRef,
     position = context.position,
     shortcut = context.shortcut;
 
@@ -558,8 +621,11 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref8) {
     portal: portal,
     panelWidth: panelWidth,
     onCompleteResize: onCompleteResize,
+    onResizeStartInternal: onResizeStartInternal,
+    onResizeInternal: onResizeInternal,
     getResizeBounds: getResizeBounds,
     resizingCssVar: resizingCssVar,
+    resizingElementRef: resizingElementRef,
     position: position,
     tooltipContent: tooltipContent,
     shortcut: shortcut

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

@@ -17,9 +17,12 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
   var panelId = _ref.panelId,
     panelWidth = _ref.panelWidth,
     onCompleteResize = _ref.onCompleteResize,
+    onResizeStartInternal = _ref.onResizeStartInternal,
+    onResizeInternal = _ref.onResizeInternal,
     getResizeBounds = _ref.getResizeBounds,
     resizingCssVar = _ref.resizingCssVar,
     panelRef = _ref.panelRef,
+    resizingElementRef = _ref.resizingElementRef,
     providedPortalRef = _ref.portalRef,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'end' : _ref$position,
@@ -33,15 +36,18 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
       panelId: panelId,
       panelWidth: panelWidth,
       onCompleteResize: onCompleteResize,
+      onResizeStartInternal: onResizeStartInternal,
+      onResizeInternal: onResizeInternal,
       getResizeBounds: getResizeBounds,
       resizingCssVar: resizingCssVar,
       position: position,
       panelRef: panelRef,
+      resizingElementRef: resizingElementRef,
       isEnabled: isEnabled,
       portalRef: typeof providedPortalRef !== 'undefined' ? providedPortalRef : portalRef,
       shortcut: shortcut
     };
-  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled, providedPortalRef, shortcut]);
+  }, [panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, 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/resolve-layout-width.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveLayoutWidth = resolveLayoutWidth;
+function resolveLayoutWidth(bound, viewportWidth) {
+  if (typeof bound === 'number') {
+    return bound;
+  }
+  var value = Number.parseFloat(bound);
+  return bound.endsWith('vw') ? viewportWidth * value / 100 : value;
+}

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

@@ -16,6 +16,7 @@ var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _useLayoutId = require("./use-layout-id");
 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); }
 var localSlotLayersStatic = {
+  chatPanelOverlay: 5,
   ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS is enabled.
   // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.

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

@@ -1,5 +1,6 @@
 ._18m9zryt{overflow-y:clip}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
+._1cwmtye8{--n_mainMinW:20rem}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
 ._1reozryt{overflow-x:clip}
@@ -7,5 +8,6 @@
 ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@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}}
-@media (min-width:90rem){._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"}._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}}

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

@@ -15,6 +15,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
+var _layoutAreaSizingProvider = require("./layout-area-sizing-provider");
 var _isSideNavShortcutEnabledProvider = require("./side-nav/is-side-nav-shortcut-enabled-provider");
 var _sideNavElementProvider = require("./side-nav/side-nav-element-provider");
 var _toggleButtonProvider = require("./side-nav/toggle-button-provider");
@@ -23,7 +24,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // 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 styles = {
-  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
+  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",
   safetyRail: "_1ciragmp",
   safetyRailWithTopLayer: "_1tvnagmp",
   panelUplift: "_1reozryt _18m9zryt"
@@ -47,6 +49,8 @@ function Root(_ref) {
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = (0, _react.useRef)(null);
+  var isChatPanelLayoutEnabled = (0, _fg.fg)('platform-dst-chat-panel-layout');
+  var LayoutProvider = isChatPanelLayoutEnabled ? _layoutAreaSizingProvider.LayoutAreaSizingProvider : _react.default.Fragment;
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -67,7 +71,9 @@ function Root(_ref) {
     defaultCollapsed: defaultSideNavCollapsed
   }, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_sideNavElementProvider.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_isSideNavShortcutEnabledProvider.IsSideNavShortcutEnabledProvider, {
     isSideNavShortcutEnabled: isSideNavShortcutEnabled
-  }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(LayoutProvider, isChatPanelLayoutEnabled ? {
+    layoutRef: ref
+  } : {}, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
     label: skipLinksLabel,
@@ -75,8 +81,8 @@ function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _runtime.ax)([styles.root, (0, _fg.fg)('platform-dst-motion-uplift-panel') && styles.panelUplift, (0, _fg.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
+    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))))))))));
 }