@atlaskit/navigation-system 11.0.0 → 11.1.0

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

@@ -0,0 +1,295 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { calculateLayoutAreaStates } from './calculate-layout-area-states';
+import { LayoutAreaSizingContext } from './layout-area-sizing-context';
+import { layoutAreaStateContexts } from './layout-area-state-contexts';
+import { useOccupiedLayoutWidth } from './use-occupied-layout-width';
+var defaultMainMinWidth = 320;
+function useStableAreaState(state) {
+  var _ref = state !== null && state !== void 0 ? state : {},
+    mode = _ref.mode,
+    width = _ref.width,
+    minWidth = _ref.minWidth;
+  return useMemo(function () {
+    return mode !== undefined && width !== undefined && minWidth !== undefined ? {
+      mode: mode,
+      width: width,
+      minWidth: minWidth
+    } : undefined;
+  }, [mode, width, minWidth]);
+}
+export function LayoutAreaSizingProvider(_ref2) {
+  var children = _ref2.children,
+    layoutRef = _ref2.layoutRef;
+  var occupiedWidth = useOccupiedLayoutWidth(layoutRef);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var _useState3 = useState(defaultMainMinWidth),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mainMinWidth = _useState4[0],
+    setMainMinWidth = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    areas = _useState6[0],
+    setAreas = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    resizeSession = _useState8[0],
+    setResizeSession = _useState8[1];
+  var areaStatesRef = React.useRef({});
+  var configsRef = React.useRef({});
+  var openSequence = React.useRef(0);
+  useEffect(function () {
+    setResizeSession(null);
+  }, [mainMinWidth, occupiedWidth]);
+  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 = bind(window, {
+      type: 'resize',
+      listener: function listener() {
+        return updateDimensions();
+      }
+    });
+    var unbindQuery = bind(inlineChatQuery, {
+      type: 'change',
+      listener: function listener() {
+        return updateDimensions();
+      }
+    });
+    var unbindSideNavQuery = bind(inlineSideNavQuery, {
+      type: 'change',
+      listener: function listener() {
+        return updateDimensions();
+      }
+    });
+    return function () {
+      observer.disconnect();
+      unbindResize();
+      unbindQuery();
+      unbindSideNavQuery();
+    };
+  }, [layoutRef]);
+  var registerArea = 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), {}, _defineProperty({}, 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 = 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 = 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 = 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), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+          liveResize: {
+            mode: mode,
+            width: renderedState.width
+          }
+        }))) : current;
+      });
+    }
+  }, [freezeSiblingWidths]);
+  var resize = 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), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+        liveResize: {
+          mode: mode,
+          width: width
+        }
+      }))) : current;
+    });
+  }, []);
+  var completeResize = 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), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+          liveResize: undefined,
+          preferredOverlayWidth: width
+        })));
+      }
+      return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
+        liveResize: undefined,
+        preferredInlineWidth: width
+      })));
+    });
+  }, [freezeSiblingWidths]);
+  var areaStates = useMemo(function () {
+    return dimensions === null ? {} : calculateLayoutAreaStates(_objectSpread(_objectSpread({}, dimensions), {}, {
+      occupiedWidth: occupiedWidth,
+      mainMinWidth: mainMinWidth,
+      areas: areas,
+      resizeSession: resizeSession
+    }));
+  }, [areas, mainMinWidth, resizeSession, dimensions, occupiedWidth]);
+  useEffect(function () {
+    areaStatesRef.current = areaStates;
+  }, [areaStates]);
+  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 = 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 = 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['side-nav'].Provider;
+  var PanelStateProvider = layoutAreaStateContexts.panel.Provider;
+  var ChatPanelStateProvider = layoutAreaStateContexts['chat-panel'].Provider;
+  return /*#__PURE__*/React.createElement(LayoutAreaSizingContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(SideNavStateProvider, {
+    value: sideNavState
+  }, /*#__PURE__*/React.createElement(PanelStateProvider, {
+    value: panelState
+  }, /*#__PURE__*/React.createElement(ChatPanelStateProvider, {
+    value: chatPanelState
+  }, children))));
+}

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

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+// Width changes should notify only the affected region, not every sizing consumer.
+export var layoutAreaStateContexts = {
+  'side-nav': /*#__PURE__*/createContext(undefined),
+  panel: /*#__PURE__*/createContext(undefined),
+  'chat-panel': /*#__PURE__*/createContext(undefined)
+};

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

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

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

@@ -10,7 +10,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
 import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { createPortal, flushSync } from 'react-dom';
 import { bind } from 'bind-event-listener';
 import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
@@ -137,10 +137,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;
@@ -178,9 +181,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 = useRef(null);
+  // Live allocation changes panelWidth on every frame. Only the legacy path should
+  // rebind the drag listeners when this value changes.
+  var legacyPanelWidth = fg('platform-dst-chat-panel-layout') ? undefined : panelWidth;
   useEffect(function () {
     var splitter = splitterRef.current;
     invariant(splitter, 'Splitter ref must be set');
+    var lastManagedResizeWidth;
     return combine(blockDraggingToIFrames({
       element: splitter
     }),
@@ -239,9 +246,18 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
          * because some browser extensions can cause the event properties to incorrectly return 0.
          */
         invariant(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) {
+          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();
@@ -274,23 +290,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 (fg('platform-dst-chat-panel-layout') && onResizeInternal) {
+          // Let the sizing provider constrain the width against Main's available space.
+          var width = Math.max(convertResizeBoundToPixels(resizeBounds.min), Math.min(targetWidth, 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;
         invariant(isPanelSplitterDragData(source.data));
         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;
+          flushSync(function () {
+            return onResizeInternal(width);
+          });
+          lastManagedResizeWidth = undefined;
+        }
         var finalWidth = 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 (fg('platform-dst-chat-panel-layout')) {
+          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 = useStableRef(onResizeStart);
   var onResizeEndStableRef = useStableRef(onResizeEnd);
   var _useState5 = useState(function () {
@@ -316,7 +363,20 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     _useState6 = _slicedToArray(_useState5, 1),
     keyboardResizeManager = _useState6[0];
   var handleSliderInputChange = useCallback(function (event) {
-    var value = parseInt(event.target.value);
+    var isManagedResize = 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 = convertResizeBoundToPixels(bounds.min);
+      var max = convertResizeBoundToPixels(bounds.max);
+      value = Math.max(min, Math.min(value, max));
+      setRangeInputBounds({
+        min: min,
+        max: max
+      });
+    }
     setRangeInputValue(value);
 
     /**
@@ -328,7 +388,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
       initialWidth: panelWidth,
       finalWidth: value
     });
-  }, [onCompleteResize, panelWidth, keyboardResizeManager]);
+  }, [getResizeBounds, onCompleteResize, onResizeInternal, panelWidth, keyboardResizeManager]);
   var resizeEventListenerCleanupFn = useRef(null);
   var handleSliderFocus = useCallback(function () {
     var _resizeEventListenerC;
@@ -453,8 +513,11 @@ export var 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;
 
@@ -549,8 +612,11 @@ export var 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/esm/ui/page-layout/panel-splitter/provider.js

@@ -9,9 +9,12 @@ export var PanelSplitterProvider = function PanelSplitterProvider(_ref) {
   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,
@@ -25,15 +28,18 @@ export var PanelSplitterProvider = function PanelSplitterProvider(_ref) {
       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.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
     value: context
   }, children), typeof providedPortalRef !== 'undefined' ? null : /*#__PURE__*/React.createElement("div", {

package/dist/esm/ui/page-layout/resolve-layout-width.js

@@ -0,0 +1,7 @@
+export 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/esm/ui/page-layout/ribbon.js

@@ -8,6 +8,7 @@ import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-va
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { useLayoutId } from './use-layout-id';
 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/esm/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/esm/ui/page-layout/root.js

@@ -7,6 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
+import { LayoutAreaSizingProvider } from './layout-area-sizing-provider';
 import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-provider';
 import { SideNavElementProvider } from './side-nav/side-nav-element-provider';
 import { SideNavToggleButtonProvider } from './side-nav/toggle-button-provider';
@@ -15,7 +16,8 @@ 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 var 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"
@@ -39,6 +41,8 @@ export function Root(_ref) {
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = useRef(null);
+  var isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
+  var LayoutProvider = isChatPanelLayoutEnabled ? LayoutAreaSizingProvider : React.Fragment;
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -59,7 +63,9 @@ export function Root(_ref) {
     defaultCollapsed: defaultSideNavCollapsed
   }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledProvider, {
     isSideNavShortcutEnabled: isSideNavShortcutEnabled
-  }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(LayoutProvider, isChatPanelLayoutEnabled ? {
+    layoutRef: ref
+  } : {}, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,
@@ -67,8 +73,8 @@ export function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
+    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/esm/ui/page-layout/side-nav/side-nav.compiled.css

@@ -4,6 +4,7 @@
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
+._1bsbhc79{width:var(--n_snvRsz,var(--n_sNvw))}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
@@ -24,7 +25,7 @@
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}