@atlaskit/navigation-system 11.0.0 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlassian/navigation-system
 
+## 11.1.0
+
+### Minor Changes
+
+- [`204d513238b0e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/204d513238b0e) -
+  Implement new Chat Panel layout slot and responsive/resizing behaviour behind
+  `platform-dst-chat-panel-layout` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.0
 
 ### Major Changes

package/dist/cjs/entry-points/layout/chat-panel.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChatPanel", {
+  enumerable: true,
+  get: function get() {
+    return _chatPanel.ChatPanel;
+  }
+});
+var _chatPanel = require("../../ui/page-layout/chat-panel");

package/dist/cjs/entry-points/layout/layout-sizing.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UNSAFE_resolveLayoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _resolveLayoutWidth.resolveLayoutWidth;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_useLayoutAreaSizing", {
+  enumerable: true,
+  get: function get() {
+    return _useLayoutAreaSizing.useLayoutAreaSizing;
+  }
+});
+Object.defineProperty(exports, "contentHeightWhenFixed", {
+  enumerable: true,
+  get: function get() {
+    return _constants.contentHeightWhenFixed;
+  }
+});
+Object.defineProperty(exports, "contentInsetBlockStart", {
+  enumerable: true,
+  get: function get() {
+    return _constants.contentInsetBlockStart;
+  }
+});
+Object.defineProperty(exports, "mainMinimumWidthVar", {
+  enumerable: true,
+  get: function get() {
+    return _constants.mainMinimumWidthVar;
+  }
+});
+Object.defineProperty(exports, "sideNavLiveWidthVar", {
+  enumerable: true,
+  get: function get() {
+    return _constants.sideNavLiveWidthVar;
+  }
+});
+var _constants = require("../../ui/page-layout/constants");
+var _useLayoutAreaSizing = require("../../ui/page-layout/use-layout-area-sizing");
+var _resolveLayoutWidth = require("../../ui/page-layout/resolve-layout-width");

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

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateLayoutAreaStates = calculateLayoutAreaStates;
+var _resolveLayoutWidth = require("./resolve-layout-width");
+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 clampTargetWidth(_ref) {
+  var target = _ref.target,
+    min = _ref.min,
+    max = _ref.max;
+  return Math.max(min, Math.min(target, max));
+}
+function getTargetWidth(area, isSideNavOverlay) {
+  var _area$compactDefaultW, _area$liveResize, _ref2, _area$requestedWidth;
+  var defaultWidth = isSideNavOverlay ? (_area$compactDefaultW = area.compactDefaultWidth) !== null && _area$compactDefaultW !== void 0 ? _area$compactDefaultW : area.defaultWidth : area.defaultWidth;
+  return ((_area$liveResize = area.liveResize) === null || _area$liveResize === void 0 ? void 0 : _area$liveResize.mode) === 'inline' ? area.liveResize.width : (_ref2 = (_area$requestedWidth = area.requestedWidth) !== null && _area$requestedWidth !== void 0 ? _area$requestedWidth : area.preferredInlineWidth) !== null && _ref2 !== void 0 ? _ref2 : defaultWidth;
+}
+function getOverlayTargetWidth(area, isSideNavOverlay) {
+  var _area$compactDefaultW2, _area$liveResize2, _ref3, _area$requestedWidth2;
+  var defaultWidth = isSideNavOverlay ? (_area$compactDefaultW2 = area.compactDefaultWidth) !== null && _area$compactDefaultW2 !== void 0 ? _area$compactDefaultW2 : area.defaultWidth : area.defaultWidth;
+  return ((_area$liveResize2 = area.liveResize) === null || _area$liveResize2 === void 0 ? void 0 : _area$liveResize2.mode) === 'overlay' ? area.liveResize.width : (_ref3 = (_area$requestedWidth2 = area.requestedWidth) !== null && _area$requestedWidth2 !== void 0 ? _area$requestedWidth2 : area.preferredOverlayWidth) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
+}
+function calculateLayoutAreaStates(_ref4) {
+  var _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
+  var viewportWidth = _ref4.viewportWidth,
+    _ref4$layoutWidth = _ref4.layoutWidth,
+    layoutWidth = _ref4$layoutWidth === void 0 ? viewportWidth : _ref4$layoutWidth,
+    isChatPanelOverlay = _ref4.isChatPanelOverlay,
+    isSideNavOverlay = _ref4.isSideNavOverlay,
+    _ref4$occupiedWidth = _ref4.occupiedWidth,
+    occupiedWidth = _ref4$occupiedWidth === void 0 ? 0 : _ref4$occupiedWidth,
+    mainMinWidthBound = _ref4.mainMinWidth,
+    areas = _ref4.areas,
+    resizeSession = _ref4.resizeSession;
+  var mainMinWidth = (0, _resolveLayoutWidth.resolveLayoutWidth)(mainMinWidthBound, viewportWidth);
+  var availableWidth = Math.max(0, layoutWidth - occupiedWidth);
+  var sideNav = areas['side-nav'];
+  var panel = areas.panel;
+  var chatPanel = areas['chat-panel'];
+  var sideNavMinWidth = sideNav ? (0, _resolveLayoutWidth.resolveLayoutWidth)(sideNav.minWidth, viewportWidth) : 0;
+  var panelMinWidth = panel ? (0, _resolveLayoutWidth.resolveLayoutWidth)(panel.minWidth, viewportWidth) : 0;
+  var chatPanelMinWidth = chatPanel ? (0, _resolveLayoutWidth.resolveLayoutWidth)(chatPanel.minWidth, viewportWidth) : 0;
+  var isSideNavOpenInline = Boolean((sideNav === null || sideNav === void 0 ? void 0 : sideNav.isOpen) && !isSideNavOverlay && availableWidth >= mainMinWidth + sideNavMinWidth);
+  var isChatPanelOpenInline = Boolean((chatPanel === null || chatPanel === void 0 ? void 0 : chatPanel.isOpen) && !isChatPanelOverlay && availableWidth >= mainMinWidth + chatPanelMinWidth + (isSideNavOpenInline ? sideNavMinWidth : 0));
+  var isPanelInline = Boolean((panel === null || panel === void 0 ? void 0 : panel.isOpen) && availableWidth >= mainMinWidth + panelMinWidth + (isChatPanelOpenInline ? chatPanelMinWidth : 0) + (isSideNavOpenInline ? sideNavMinWidth : 0));
+  var inlineAreas = [isSideNavOpenInline && 'side-nav', isPanelInline && 'panel', isChatPanelOpenInline && 'chat-panel'].filter(function (area) {
+    return Boolean(area);
+  });
+  var widths = new Map();
+  var minimums = new Map();
+  var _iterator = _createForOfIteratorHelper(inlineAreas),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var areaName = _step.value;
+      var area = areas[areaName];
+      if (!area) {
+        continue;
+      }
+      var min = (0, _resolveLayoutWidth.resolveLayoutWidth)(area.minWidth, viewportWidth);
+      var max = area.maxWidth ? (0, _resolveLayoutWidth.resolveLayoutWidth)(area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
+      var baselineWidth = resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.baselineWidths[areaName];
+      var requestedTarget = resizeSession && areaName !== resizeSession.area && baselineWidth !== undefined ? baselineWidth : getTargetWidth(area, isSideNavOverlay);
+      var target = clampTargetWidth({
+        target: requestedTarget,
+        min: min,
+        max: max
+      });
+      minimums.set(areaName, min);
+      widths.set(areaName, target);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var overflow = Math.max(0, Array.from(widths.values()).reduce(function (total, width) {
+    return total + width;
+  }, 0) - (availableWidth - mainMinWidth));
+  var compressionOrder = ['panel', 'chat-panel', 'side-nav'];
+  // User resizing consumes only Main's spare width. Viewport changes clear the
+  // snapshot and retain the normal automatic compression order.
+  var shrinkOrder = resizeSession ? [resizeSession.area] : compressionOrder;
+  var _iterator2 = _createForOfIteratorHelper(shrinkOrder),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _widths$get, _minimums$get;
+      var _areaName = _step2.value;
+      if (overflow <= 0) {
+        break;
+      }
+      var width = (_widths$get = widths.get(_areaName)) !== null && _widths$get !== void 0 ? _widths$get : 0;
+      var _min = (_minimums$get = minimums.get(_areaName)) !== null && _minimums$get !== void 0 ? _minimums$get : 0;
+      var reduction = Math.min(overflow, Math.max(0, width - _min));
+      widths.set(_areaName, width - reduction);
+      overflow -= reduction;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var totalInlineWidth = Array.from(widths.values()).reduce(function (total, width) {
+    return total + width;
+  }, 0);
+  var states = {};
+  var _iterator3 = _createForOfIteratorHelper(inlineAreas),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var _widths$get2, _minimums$get2, _areas$_areaName;
+      var _areaName2 = _step3.value;
+      var _width = (_widths$get2 = widths.get(_areaName2)) !== null && _widths$get2 !== void 0 ? _widths$get2 : 0;
+      var _min2 = (_minimums$get2 = minimums.get(_areaName2)) !== null && _minimums$get2 !== void 0 ? _minimums$get2 : 0;
+      var maxWidth = (_areas$_areaName = areas[_areaName2]) === null || _areas$_areaName === void 0 ? void 0 : _areas$_areaName.maxWidth;
+      var configuredMax = maxWidth !== undefined ? (0, _resolveLayoutWidth.resolveLayoutWidth)(maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
+      states[_areaName2] = {
+        mode: 'inline',
+        width: _width,
+        minWidth: _min2,
+        resizeBounds: {
+          min: _min2,
+          max: Math.max(_min2, Math.min(configuredMax, availableWidth - mainMinWidth - totalInlineWidth + _width))
+        }
+      };
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  var inlineSideNavWidth = (_states$sideNav$widt = (_states$sideNav = states['side-nav']) === null || _states$sideNav === void 0 ? void 0 : _states$sideNav.width) !== null && _states$sideNav$widt !== void 0 ? _states$sideNav$widt : 0;
+  var inlineChatPanelWidth = (_states$chatPanel$wi = (_states$chatPanel = states['chat-panel']) === null || _states$chatPanel === void 0 ? void 0 : _states$chatPanel.width) !== null && _states$chatPanel$wi !== void 0 ? _states$chatPanel$wi : 0;
+  var mainAreaWidth = Math.max(0, availableWidth - inlineSideNavWidth - inlineChatPanelWidth);
+  var _iterator4 = _createForOfIteratorHelper(['side-nav', 'panel', 'chat-panel']),
+    _step4;
+  try {
+    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+      var _states$_areaName;
+      var _areaName3 = _step4.value;
+      var _area = areas[_areaName3];
+      if (!(_area !== null && _area !== void 0 && _area.isOpen) || ((_states$_areaName = states[_areaName3]) === null || _states$_areaName === void 0 ? void 0 : _states$_areaName.mode) === 'inline') {
+        continue;
+      }
+      var _min3 = (0, _resolveLayoutWidth.resolveLayoutWidth)(_area.minWidth, viewportWidth);
+      var _configuredMax = _area.maxWidth ? (0, _resolveLayoutWidth.resolveLayoutWidth)(_area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
+      // Chat covers Root; SideNav and the local panel overlay Main's grid track.
+      // Occupied tracks and inline chat are not part of that covered region.
+      var layoutMax = (_areaName3 === 'chat-panel' ? layoutWidth : mainAreaWidth) * 0.9;
+      var _max = Math.max(0, Math.min(_configuredMax, layoutMax));
+      var effectiveMin = Math.min(_min3, _max);
+      var _target = getOverlayTargetWidth(_area, isSideNavOverlay);
+      var _width2 = clampTargetWidth({
+        target: _target,
+        min: effectiveMin,
+        max: _max
+      });
+      states[_areaName3] = {
+        mode: 'overlay',
+        width: _width2,
+        minWidth: effectiveMin,
+        resizeBounds: {
+          min: effectiveMin,
+          max: _max
+        }
+      };
+    }
+  } catch (err) {
+    _iterator4.e(err);
+  } finally {
+    _iterator4.f();
+  }
+  return states;
+}

package/dist/cjs/ui/page-layout/chat-panel.compiled.css

@@ -0,0 +1,27 @@
+._12xt1ym0._12xt1ym0{grid-area:chat-panel}
+._12xtquub._12xtquub{grid-area:2/1/-1/-1}
+._nd5lquub{grid-area:2/1/-1/-1}
+._191wglyw{border-inline-start:none}
+._i8luglyw._i8luglyw{border-inline-start:none}
+._i8luia51._i8luia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._10fph9n0{justify-self:end}
+._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._16hg1bhr._16hg1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._16hgvuon._16hgvuon{background-color:var(--ds-surface,#fff)}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m91wug{overflow-y:auto}
+._1bsb1ky5{width:var(--n_cPnlRsz,var(--n_cPnlOverlayW))}
+._1pbyqfx8{z-index:5}
+._1reo1wug{overflow-x:auto}
+._4t3i1osq{height:100%}
+._4t3i56xv{height:calc(100vh - var(--n_bnrM, 0px))}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqsw1if8{position:sticky}
+._p12f1osq{max-width:100%}
+._qo371wug._qo371wug{z-index:auto}
+._qo37qfx8._qo37qfx8{z-index:5}
+._so1e130s._so1e130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._so1eglyw._so1eglyw{box-shadow:none}
+._vchhusvi{box-sizing:border-box}
+._w1ap1ky5._w1ap1ky5{width:var(--n_cPnlRsz,var(--n_cPnlOverlayW))}
+._w1ap8rg1._w1ap8rg1{width:var(--n_cPnlRsz,var(--n_cPnlW))}
+@media (min-width:40rem){._19dmia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._1ao7glyw{box-shadow:none}._qhdr1ym0{grid-area:chat-panel}._m5h51wug{z-index:auto}._1ttbvuon{background-color:var(--ds-surface,#fff)}._1mxh8rg1{width:var(--n_cPnlRsz,var(--n_cPnlW))}}

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

@@ -0,0 +1,216 @@
+/* chat-panel.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatPanel = ChatPanel;
+require("./chat-panel.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _bindEventListener = require("bind-event-listener");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
+var _constants = require("./constants");
+var _convertResizeBoundToPixels = require("./panel-splitter/convert-resize-bound-to-pixels");
+var _provider = require("./panel-splitter/provider");
+var _resolveLayoutWidth = require("./resolve-layout-width");
+var _root = require("./root");
+var _useLayoutAreaSizing2 = require("./use-layout-area-sizing");
+var _useLayoutId = require("./use-layout-id");
+var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var-on-root-element");
+var _useSafeDefaultWidth = require("./use-safe-default-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); }
+var chatPanelPanelSplitterId = Symbol('ChatPanel PanelSplitter');
+var panelSplitterResizingVar = '--n_cPnlRsz';
+var chatPanelOverlayWidthVar = '--n_cPnlOverlayW';
+var fallbackDefaultWidth = 400;
+var fallbackCompactDefaultWidth = 320;
+var fallbackMinWidth = '320px';
+var inlineMediaQuery = '(min-width: 40rem)';
+function getPixelCustomProperty(element, propertyName, fallback) {
+  var raw = getComputedStyle(element).getPropertyValue(propertyName).trim();
+  var value = Number.parseFloat(raw);
+  return Number.isFinite(value) ? (0, _resolveLayoutWidth.resolveLayoutWidth)(raw.endsWith('vw') ? "".concat(value, "vw") : value, window.innerWidth) : fallback;
+}
+var styles = {
+  root: "_nd5lquub _10fph9n0 _vchhusvi _p12f1osq _1pbyqfx8 _4t3i56xv _kqsw1if8 _152t1nws _bfhk1bhr _1bsb1ky5 _qhdr1ym0 _m5h51wug _1ttbvuon _1mxh8rg1",
+  managedInline: "_12xt1ym0 _qo371wug _16hgvuon _w1ap8rg1",
+  managedOverlay: "_12xtquub _qo37qfx8 _16hg1bhr _w1ap1ky5",
+  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
+  border: "_191wglyw _16qs130s _19dmia51 _1ao7glyw",
+  managedInlineBorder: "_i8luia51 _so1eglyw",
+  managedOverlayBorder: "_i8luglyw _so1e130s"
+};
+
+/**
+ * The ChatPanel layout area is rendered below the banner and to the right (inline end) of the app.
+ *
+ * Below 40rem it overlays the app. At 40rem and above it is rendered as the final
+ * full-height column in the page layout grid.
+ *
+ * You can optionally render a `PanelSplitter` as a child to make the chat panel resizable.
+ */
+function ChatPanel(_ref) {
+  var _managedSizing$mode, _managedSizing$width;
+  var children = _ref.children,
+    defaultWidthProp = _ref.defaultWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? fallbackMinWidth : _ref$minWidth,
+    maxWidth = _ref.maxWidth,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Chat panel' : _ref$label,
+    _ref$skipLinkLabel = _ref.skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
+    testId = _ref.testId,
+    providedId = _ref.id,
+    xcss = _ref.xcss,
+    _ref$hasBorder = _ref.hasBorder,
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
+    onClose = _ref.onClose;
+  var id = (0, _useLayoutId.useLayoutId)({
+    providedId: providedId
+  });
+  var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
+    defaultWidthProp: defaultWidthProp !== null && defaultWidthProp !== void 0 ? defaultWidthProp : fallbackDefaultWidth,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'ChatPanel'
+  });
+  var compactDefaultWidth = defaultWidthProp === undefined ? fallbackCompactDefaultWidth : defaultWidth;
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: defaultWidth === 0 || (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')
+  });
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(defaultWidth),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inlineWidth = _useState2[0],
+    setInlineWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(compactDefaultWidth),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    overlayWidth = _useState4[0],
+    setOverlayWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isInline = _useState6[0],
+    setIsInline = _useState6[1];
+  var _useLayoutAreaSizing = (0, _useLayoutAreaSizing2.useLayoutAreaSizing)({
+      area: 'chat-panel',
+      config: {
+        defaultWidth: defaultWidth,
+        compactDefaultWidth: compactDefaultWidth,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        isOpen: true,
+        onRequestClose: onClose
+      }
+    }),
+    managedSizing = _useLayoutAreaSizing.state,
+    getManagedResizeBounds = _useLayoutAreaSizing.getResizeBounds,
+    startResize = _useLayoutAreaSizing.startResize,
+    resize = _useLayoutAreaSizing.resize,
+    completeResize = _useLayoutAreaSizing.completeResize;
+  (0, _react.useEffect)(function () {
+    var mediaQuery = window.matchMedia(inlineMediaQuery);
+    setIsInline(mediaQuery.matches);
+    var onChange = function onChange(event) {
+      setIsInline(event.matches);
+    };
+    return (0, _bindEventListener.bind)(mediaQuery, {
+      type: 'change',
+      listener: onChange
+    });
+  }, []);
+  var mode = (_managedSizing$mode = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) !== null && _managedSizing$mode !== void 0 ? _managedSizing$mode : isInline ? 'inline' : 'overlay';
+  var renderedWidth = (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : mode === 'inline' ? inlineWidth : overlayWidth;
+  (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
+    isEnabled: !managedSizing,
+    cssVar: panelSplitterResizingVar,
+    panelId: chatPanelPanelSplitterId
+  });
+  var getResizeBounds = (0, _react.useCallback)(function () {
+    var managedBounds = getManagedResizeBounds();
+    if (managedBounds) {
+      return managedBounds;
+    }
+    var chatPanel = ref.current;
+    var layoutRoot = chatPanel === null || chatPanel === void 0 ? void 0 : chatPanel.parentElement;
+    var main = layoutRoot === null || layoutRoot === void 0 ? void 0 : layoutRoot.querySelector(':scope > [data-layout-slot][role="main"]');
+    if (!chatPanel || !main || getComputedStyle(chatPanel).gridArea !== 'chat-panel') {
+      return {
+        min: minWidth,
+        max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '90vw'
+      };
+    }
+    var chatPanelWidth = chatPanel.getBoundingClientRect().width;
+    var mainWidth = main.getBoundingClientRect().width;
+    if (chatPanelWidth === 0 || mainWidth === 0) {
+      return {
+        min: minWidth,
+        max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '90vw'
+      };
+    }
+    var localPanel = main.querySelector('[data-layout-with-panel-slot]');
+    var isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
+    var localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
+    var mainMinimumWidth = getPixelCustomProperty(main, _constants.mainMinimumWidthVar, 320);
+    var mainContentWidth = mainWidth - localPanelWidth;
+    var availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
+    var availableInlineWidth = Math.floor(chatPanelWidth + availableWidth);
+    var constrainedMaxWidth = maxWidth ? Math.min((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(maxWidth), availableInlineWidth) : availableInlineWidth;
+    return {
+      min: minWidth,
+      max: "".concat(Math.max((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(minWidth), constrainedMaxWidth), "px")
+    };
+  }, [getManagedResizeBounds, maxWidth, minWidth]);
+  var configuredMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100vw';
+  var chatPanelVariableWidth = managedSizing ? "".concat(renderedWidth, "px") : "clamp(".concat(minWidth, ", ").concat(inlineWidth, "px, ").concat(configuredMaxWidth, ")");
+  var chatPanelOverlayVariableWidth = managedSizing ? "".concat(renderedWidth, "px") : "clamp(".concat(minWidth, ", ").concat(overlayWidth, "px, min(90vw, ").concat(configuredMaxWidth, "))");
+  var onCompleteResize = (0, _react.useCallback)(function (finalWidth) {
+    if (mode === 'inline') {
+      setInlineWidth(finalWidth);
+    } else {
+      setOverlayWidth(finalWidth);
+    }
+    completeResize(mode, finalWidth);
+  }, [completeResize, mode]);
+  var onResizeStartInternal = (0, _react.useCallback)(function () {
+    startResize(mode);
+  }, [mode, startResize]);
+  var onResizeInternal = (0, _react.useCallback)(function (width) {
+    return resize(mode, width);
+  }, [mode, resize]);
+  return /*#__PURE__*/React.createElement("section", {
+    id: id,
+    "data-layout-slot": true,
+    "aria-label": label,
+    className: (0, _runtime.ax)([styles.root, hasBorder && styles.border, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInline, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, hasBorder && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInlineBorder, hasBorder && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlayBorder, xcss]),
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.chatPanelVar, chatPanelVariableWidth), chatPanelOverlayWidthVar, chatPanelOverlayVariableWidth),
+    "data-testid": testId,
+    "data-layout-chat-panel": "",
+    ref: ref
+  },
+  /*#__PURE__*/
+  // Hoist the committed or actively resizing inline width so SideNav can yield
+  // space to ChatPanel without allowing the page layout to overflow.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+  React.createElement("style", null, "\n#".concat(_root.gridRootId, " { ").concat(_constants.chatPanelLiveWidthVar, ": var(").concat(panelSplitterResizingVar, ", ").concat(chatPanelVariableWidth, "); }\n")), /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
+    panelId: chatPanelPanelSplitterId,
+    panelRef: ref,
+    panelWidth: renderedWidth,
+    onCompleteResize: onCompleteResize,
+    onResizeStartInternal: managedSizing ? onResizeStartInternal : undefined,
+    onResizeInternal: managedSizing ? onResizeInternal : undefined,
+    getResizeBounds: getResizeBounds,
+    resizingCssVar: panelSplitterResizingVar,
+    position: "start"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.scrollContainer])
+  }, children)));
+}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
+exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.mainMinimumWidthVar = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.chatPanelVar = exports.chatPanelLiveWidthVar = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
 /**
  * These variables are shared across the different page layout slots.
  * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
@@ -14,6 +14,9 @@ exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId =
 var sideNavVar = exports.sideNavVar = '--n_sNvw';
 var asideVar = exports.asideVar = '--n_asDw';
 var panelVar = exports.panelVar = '--n_pnlW';
+var chatPanelVar = exports.chatPanelVar = '--n_cPnlW';
+var chatPanelLiveWidthVar = exports.chatPanelLiveWidthVar = '--n_cPnlLw';
+var mainMinimumWidthVar = exports.mainMinimumWidthVar = '--n_mainMinW';
 var bannerMountedVar = exports.bannerMountedVar = '--n_bnrM';
 var topNavMountedVar = exports.topNavMountedVar = '--n_tNvM';
 var ribbonVar = exports.ribbonVar = '--n_rbnW';
@@ -59,6 +62,8 @@ var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_EN
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var localSlotLayers = exports.localSlotLayers = {
+  // Chat overlays the app, including TopNav and SideNav, below the banner.
+  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/layout-area-sizing-context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutAreaSizingContext = void 0;
+var _react = require("react");
+/**
+ * Effective sibling widths held fixed during and after a user resize, until the
+ * layout dimensions or configuration change. This is not a resize history.
+ */
+
+var LayoutAreaSizingContext = exports.LayoutAreaSizingContext = /*#__PURE__*/(0, _react.createContext)(null);