@atlaskit/navigation-system 11.0.0 → 11.1.0

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

@@ -21,10 +21,13 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { UNSAFE_sideNavLayoutVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
+import { convertResizeBoundToPixels } from '../panel-splitter/convert-resize-bound-to-pixels';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
+import { resolveLayoutWidth } from '../resolve-layout-width';
+import { useLayoutAreaSizing } from '../use-layout-area-sizing';
 import { useLayoutId } from '../use-layout-id';
 import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-var-on-root-element';
 import { useSafeDefaultWidth } from '../use-safe-default-width';
@@ -44,12 +47,11 @@ var panelSplitterResizingVar = '--n_snvRsz';
 // Used to share the side nav width with the panel splitter, which is rendered outside the side nav element
 // but positioned to stay at its right edge.
 var sideNavClampedWidthVar = '--n_snvW';
-var widthResizeBounds = {
-  min: '240px',
-  max: '50vw'
-};
-function getResizeBounds() {
-  return widthResizeBounds;
+var fallbackMinWidth = '240px';
+function getPixelCustomProperty(element, propertyName, fallback) {
+  var raw = getComputedStyle(element).getPropertyValue(propertyName).trim();
+  var value = Number.parseFloat(raw);
+  return Number.isFinite(value) ? resolveLayoutWidth(raw.endsWith('vw') ? "".concat(value, "vw") : value, window.innerWidth) : fallback;
 }
 
 /**
@@ -63,6 +65,8 @@ var panelSplitterPortalTargetStyles = {
 };
 var styles = {
   root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
+  chatPanelSizing: "_1bsbhc79",
+  managedOverlay: "_cpcf1gzg _6kttglyw _w8v11bhr _1jug130s",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -112,11 +116,14 @@ export var onPeekStartDelayMs = 500;
  * context value.
  */
 function SideNavInternal(_ref) {
-  var _sideNavState$lastTri;
+  var _managedSizing$mode, _managedSizing$width, _sideNavState$lastTri;
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed,
     _ref$defaultWidth = _ref.defaultWidth,
     defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? fallbackMinWidth : _ref$minWidth,
+    maxWidth = _ref.maxWidth,
     testId = _ref.testId,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Sidebar' : _ref$label,
@@ -128,6 +135,7 @@ function SideNavInternal(_ref) {
     onPeekEnd = _ref.onPeekEnd,
     providedId = _ref.id,
     canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
   var isFhsEnabled = useIsFhsEnabled();
   var id = useLayoutId({
     providedId: providedId
@@ -213,18 +221,142 @@ function SideNavInternal(_ref) {
   });
   var _useState5 = useState(defaultWidth),
     _useState6 = _slicedToArray(_useState5, 2),
-    width = _useState6[0],
-    setWidth = _useState6[1];
-  var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
+    inlineWidth = _useState6[0],
+    setInlineWidth = _useState6[1];
+  var _useState7 = useState(defaultWidth),
+    _useState8 = _slicedToArray(_useState7, 2),
+    overlayWidth = _useState8[0],
+    setOverlayWidth = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isInline = _useState0[0],
+    setIsInline = _useState0[1];
+  useEffect(function () {
+    if (!isChatPanelLayoutEnabled) {
+      return;
+    }
+    var mediaQuery = window.matchMedia('(min-width: 64rem)');
+    setIsInline(mediaQuery.matches);
+    var onChange = function onChange(event) {
+      return setIsInline(event.matches);
+    };
+    return bind(mediaQuery, {
+      type: 'change',
+      listener: onChange
+    });
+  }, [isChatPanelLayoutEnabled]);
+  var toggleVisibilityForChatPanel = useToggleSideNav({
+    trigger: 'programmatic'
+  });
+  var closeOverlayForChatPanel = useCallback(function () {
+    // Allocation can overlay an expanded desktop nav when other slots consume
+    // its space. Dismiss the visibility state selected by the viewport, not the mode.
+    var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (isDesktop ? isExpandedOnDesktop : isExpandedOnMobile) {
+      toggleVisibilityForChatPanel();
+    }
+  }, [isExpandedOnDesktop, isExpandedOnMobile, toggleVisibilityForChatPanel]);
+  var _useLayoutAreaSizing = useLayoutAreaSizing({
+      area: 'side-nav',
+      config: {
+        defaultWidth: defaultWidth,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        isOpen: isInline ? isExpandedOnDesktop : isExpandedOnMobile,
+        onRequestClose: closeOverlayForChatPanel
+      }
+    }),
+    managedSizing = _useLayoutAreaSizing.state,
+    getManagedResizeBounds = _useLayoutAreaSizing.getResizeBounds,
+    startResize = _useLayoutAreaSizing.startResize,
+    resize = _useLayoutAreaSizing.resize,
+    completeResize = _useLayoutAreaSizing.completeResize;
+  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 = isChatPanelLayoutEnabled ? (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : mode === 'inline' ? inlineWidth : overlayWidth : inlineWidth;
+  var configuredMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100vw';
+  var clampedWidth = !isChatPanelLayoutEnabled ? "clamp(240px, ".concat(inlineWidth, "px, 50vw)") : managedSizing ? "".concat(renderedWidth, "px") : "clamp(".concat(minWidth, ", ").concat(renderedWidth, "px, ").concat(configuredMaxWidth, ")");
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var navRef = useRef(null);
   var panelSplitterPortalTargetRef = useRef(null);
+  var getResizeBounds = useCallback(function () {
+    if (!isChatPanelLayoutEnabled) {
+      return {
+        min: '240px',
+        max: '50vw'
+      };
+    }
+    var managedBounds = getManagedResizeBounds();
+    if (managedBounds) {
+      return managedBounds;
+    }
+    var sideNav = navRef.current;
+    var layoutRoot = sideNav === null || sideNav === void 0 ? void 0 : sideNav.parentElement;
+    var main = layoutRoot === null || layoutRoot === void 0 ? void 0 : layoutRoot.querySelector(':scope > [data-layout-slot][role="main"]');
+    var fallbackMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : mode === 'inline' ? '100vw' : '90vw';
+    if (!sideNav || mode === 'overlay') {
+      var chatPanel = layoutRoot === null || layoutRoot === void 0 ? void 0 : layoutRoot.querySelector(':scope > [data-layout-chat-panel]');
+      var inlineChatPanelWidth = chatPanel && getComputedStyle(chatPanel).gridArea === 'chat-panel' ? chatPanel.getBoundingClientRect().width : 0;
+      var overlayMaxWidth = Math.floor((window.innerWidth - inlineChatPanelWidth) * 0.9);
+      var _constrainedMaxWidth = maxWidth ? Math.min(convertResizeBoundToPixels(maxWidth), overlayMaxWidth) : overlayMaxWidth;
+      return {
+        min: minWidth,
+        max: "".concat(Math.max(convertResizeBoundToPixels(minWidth), _constrainedMaxWidth), "px")
+      };
+    }
+    if (!main) {
+      return {
+        min: minWidth,
+        max: fallbackMaxWidth
+      };
+    }
+    var sideNavWidth = sideNav.getBoundingClientRect().width;
+    var mainWidth = main.getBoundingClientRect().width;
+
+    // JSDOM does not perform layout, so retain the static fallback in unit tests and other
+    // environments where used widths cannot be measured.
+    if (sideNavWidth === 0 || mainWidth === 0) {
+      return {
+        min: minWidth,
+        max: fallbackMaxWidth
+      };
+    }
+    var localPanel = main.querySelector('[data-layout-with-panel-slot]');
+    var isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
+    var localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
+    var mainContentWidth = mainWidth - localPanelWidth;
+    var mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, 320);
+    var availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
+    var availableInlineWidth = Math.floor(sideNavWidth + availableWidth);
+    var constrainedMaxWidth = maxWidth ? Math.min(convertResizeBoundToPixels(maxWidth), availableInlineWidth) : availableInlineWidth;
+    return {
+      min: minWidth,
+      max: "".concat(Math.max(convertResizeBoundToPixels(minWidth), constrainedMaxWidth), "px")
+    };
+  }, [getManagedResizeBounds, isChatPanelLayoutEnabled, maxWidth, minWidth, mode]);
   /**
    * Used to share the side nav element with the `Panel`,
    * which observes the side nav to determine its maximum width.
    */
   var sharedRef = useSideNavRef();
   var mergedRef = mergeRefs([navRef, sharedRef]);
+  var onCompleteResize = useCallback(function (finalWidth) {
+    if (!isChatPanelLayoutEnabled) {
+      setInlineWidth(finalWidth);
+      return;
+    }
+    if (mode === 'inline') {
+      setInlineWidth(finalWidth);
+    } else {
+      setOverlayWidth(finalWidth);
+    }
+    completeResize(mode, finalWidth);
+  }, [completeResize, isChatPanelLayoutEnabled, mode]);
+  var onResizeStartInternal = useCallback(function () {
+    startResize(mode);
+  }, [mode, startResize]);
+  var onResizeInternal = useCallback(function (width) {
+    return resize(mode, width);
+  }, [mode, resize]);
   var toggleButtonElement = useContext(SideNavToggleButtonElement);
   var topNavStartElement = useContext(TopNavStartElement);
   var devTimeOnlyAttributes = {};
@@ -716,7 +848,7 @@ function SideNavInternal(_ref) {
   // Used to conditionally display the keyboard shortcut in the SideNavPanelSplitter tooltip.
   var isShortcutEnabled = useIsSideNavShortcutEnabled();
   useResizingWidthCssVarOnRootElement({
-    isEnabled: true,
+    isEnabled: !isChatPanelLayoutEnabled || !managedSizing,
     cssVar: panelSplitterResizingVar,
     panelId: sideNavPanelSplitterId
   });
@@ -778,7 +910,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: ax([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
@@ -798,8 +930,10 @@ function SideNavInternal(_ref) {
     panelId: sideNavPanelSplitterId,
     panelRef: navRef,
     portalRef: isFhsEnabled ? panelSplitterPortalTargetRef : undefined,
-    panelWidth: width,
-    onCompleteResize: setWidth,
+    panelWidth: renderedWidth,
+    onCompleteResize: onCompleteResize,
+    onResizeStartInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeStartInternal : undefined,
+    onResizeInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeInternal : undefined,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar
     // Not resizable when in peek (flyout) mode.
@@ -829,6 +963,8 @@ export function SideNav(_ref9) {
     defaultCollapsed = _ref9.defaultCollapsed,
     _ref9$defaultWidth = _ref9.defaultWidth,
     defaultWidth = _ref9$defaultWidth === void 0 ? 320 : _ref9$defaultWidth,
+    minWidth = _ref9.minWidth,
+    maxWidth = _ref9.maxWidth,
     testId = _ref9.testId,
     label = _ref9.label,
     _ref9$skipLinkLabel = _ref9.skipLinkLabel,
@@ -844,6 +980,8 @@ export function SideNav(_ref9) {
   }, /*#__PURE__*/React.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,
     defaultWidth: defaultWidth,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
     testId: testId,
     label: label,
     skipLinkLabel: skipLinkLabel,

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

@@ -0,0 +1,67 @@
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import { LayoutAreaSizingContext } from './layout-area-sizing-context';
+import { layoutAreaStateContexts } from './layout-area-state-contexts';
+export function useLayoutAreaSizing(_ref) {
+  var area = _ref.area,
+    config = _ref.config;
+  var context = useContext(LayoutAreaSizingContext);
+  var requestedWidth = config.requestedWidth,
+    defaultWidth = config.defaultWidth,
+    compactDefaultWidth = config.compactDefaultWidth,
+    minWidth = config.minWidth,
+    maxWidth = config.maxWidth,
+    isOpen = config.isOpen,
+    onRequestClose = config.onRequestClose;
+  var registerArea = context === null || context === void 0 ? void 0 : context.registerArea;
+  var unregisterArea = context === null || context === void 0 ? void 0 : context.unregisterArea;
+  var startAreaResize = context === null || context === void 0 ? void 0 : context.startResize;
+  var resizeArea = context === null || context === void 0 ? void 0 : context.resize;
+  var completeAreaResize = context === null || context === void 0 ? void 0 : context.completeResize;
+  var getAreaResizeBounds = context === null || context === void 0 ? void 0 : context.getResizeBounds;
+  var state = useContext(layoutAreaStateContexts[area]);
+  // Dismissal is not a sizing input. Register a stable delegate while keeping
+  // the consumer's latest committed callback outside allocation state.
+  var onRequestCloseRef = useRef(onRequestClose);
+  useEffect(function () {
+    onRequestCloseRef.current = onRequestClose;
+  }, [onRequestClose]);
+  var requestClose = useCallback(function () {
+    var _onRequestCloseRef$cu;
+    return (_onRequestCloseRef$cu = onRequestCloseRef.current) === null || _onRequestCloseRef$cu === void 0 ? void 0 : _onRequestCloseRef$cu.call(onRequestCloseRef);
+  }, []);
+  useEffect(function () {
+    registerArea === null || registerArea === void 0 || registerArea(area, {
+      requestedWidth: requestedWidth,
+      defaultWidth: defaultWidth,
+      compactDefaultWidth: compactDefaultWidth,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      isOpen: isOpen,
+      onRequestClose: requestClose
+    });
+  }, [area, compactDefaultWidth, defaultWidth, isOpen, maxWidth, minWidth, registerArea, requestClose, requestedWidth]);
+  useEffect(function () {
+    return function () {
+      return unregisterArea === null || unregisterArea === void 0 ? void 0 : unregisterArea(area);
+    };
+  }, [area, unregisterArea]);
+  var startResize = useCallback(function (mode) {
+    return startAreaResize === null || startAreaResize === void 0 ? void 0 : startAreaResize(area, mode);
+  }, [area, startAreaResize]);
+  var resize = useCallback(function (mode, width) {
+    return resizeArea === null || resizeArea === void 0 ? void 0 : resizeArea(area, mode, width);
+  }, [area, resizeArea]);
+  var completeResize = useCallback(function (mode, width) {
+    return completeAreaResize === null || completeAreaResize === void 0 ? void 0 : completeAreaResize(area, mode, width);
+  }, [area, completeAreaResize]);
+  var getResizeBounds = useCallback(function () {
+    return getAreaResizeBounds === null || getAreaResizeBounds === void 0 ? void 0 : getAreaResizeBounds(area);
+  }, [area, getAreaResizeBounds]);
+  return {
+    state: state,
+    startResize: startResize,
+    resize: resize,
+    completeResize: completeResize,
+    getResizeBounds: getResizeBounds
+  };
+}

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

@@ -0,0 +1,9 @@
+import { useContext, useEffect } from 'react';
+import { LayoutAreaSizingContext } from './layout-area-sizing-context';
+export function useLayoutMainSizing(minWidth) {
+  var context = useContext(LayoutAreaSizingContext);
+  var setMainMinWidth = context === null || context === void 0 ? void 0 : context.setMainMinWidth;
+  useEffect(function () {
+    return setMainMinWidth === null || setMainMinWidth === void 0 ? void 0 : setMainMinWidth(minWidth);
+  }, [minWidth, setMainMinWidth]);
+}

package/dist/esm/ui/page-layout/use-occupied-layout-width.js

@@ -0,0 +1,105 @@
+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; }
+import { useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+
+/**
+ * Measures the existing Root slots that are not managed by the chat-layout allocator.
+ * Only count separate inline columns: Aside stacks below Main on mobile, and the
+ * legacy Panel spans other areas while overlaying. Read the grid rather than duplicating
+ * its responsive breakpoints. Border boxes include slot borders and live splitter widths.
+ */
+export function useOccupiedLayoutWidth(layoutRef) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  useEffect(function () {
+    var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (!root) {
+      return;
+    }
+    var occupiedSlots = [];
+    var measure = function measure() {
+      var _getComputedStyle$gri, _rows$map$find;
+      if (occupiedSlots.length === 0) {
+        setWidth(0);
+        return;
+      }
+      var rows = (_getComputedStyle$gri = getComputedStyle(root).gridTemplateAreas.match(/"[^"]+"/g)) !== null && _getComputedStyle$gri !== void 0 ? _getComputedStyle$gri : [];
+      var mainRow = (_rows$map$find = rows.map(function (row) {
+        return row.replace(/"/g, '').split(/\s+/);
+      }).find(function (row) {
+        return row.includes('main');
+      })) !== null && _rows$map$find !== void 0 ? _rows$map$find : [];
+      var occupiedWidth = 0;
+      var _iterator = _createForOfIteratorHelper(occupiedSlots),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var child = _step.value;
+          var style = getComputedStyle(child);
+          var area = style.gridArea.split('/').map(function (part) {
+            return part.trim();
+          });
+          var slot = area[0];
+          if (['ribbon', 'aside', 'panel'].includes(slot) && area.every(function (part) {
+            return part === slot;
+          }) && mainRow.includes(slot) && style.display !== 'none' && style.position !== 'absolute' && style.position !== 'fixed') {
+            occupiedWidth += child.getBoundingClientRect().width;
+          }
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setWidth(occupiedWidth);
+    };
+    var resizeObserver = new ResizeObserver(measure);
+    var observeSlots = function observeSlots() {
+      resizeObserver.disconnect();
+      resizeObserver.observe(root);
+      // Managed regions resize on every drag frame but cannot consume extra tracks.
+      // Keep them out of both the observer and the measurement loop. Slot identity,
+      // unlike gridArea, remains stable when a region switches to overlay mode.
+      // TopNav and Banner also span columns rather than consuming independent tracks.
+      occupiedSlots = Array.from(root.children).filter(function (child) {
+        return child instanceof HTMLElement && child.hasAttribute('data-layout-slot') && !child.matches('nav, header, [role="main"], [data-layout-chat-panel]') && getComputedStyle(child).gridArea.split('/')[0].trim() !== 'banner';
+      });
+      var _iterator2 = _createForOfIteratorHelper(occupiedSlots),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+          resizeObserver.observe(child);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      measure();
+    };
+    var mutationObserver = new MutationObserver(observeSlots);
+    mutationObserver.observe(root, {
+      childList: true
+    });
+    observeSlots();
+    var unbind = bind(window, {
+      type: 'resize',
+      listener: measure
+    });
+    return function () {
+      unbind();
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [layoutRef]);
+  return width;
+}

package/dist/types/entry-points/layout/chat-panel.d.ts

@@ -0,0 +1 @@
+export { ChatPanel } from '../../ui/page-layout/chat-panel';

package/dist/types/entry-points/layout/layout-sizing.d.ts

@@ -0,0 +1,4 @@
+export { contentHeightWhenFixed, contentInsetBlockStart, mainMinimumWidthVar, sideNavLiveWidthVar, } from '../../ui/page-layout/constants';
+export { useLayoutAreaSizing as UNSAFE_useLayoutAreaSizing } from '../../ui/page-layout/use-layout-area-sizing';
+export { resolveLayoutWidth as UNSAFE_resolveLayoutWidth } from '../../ui/page-layout/resolve-layout-width';
+export type { LayoutAreaMode as UNSAFE_LayoutAreaMode, LayoutAreaState as UNSAFE_LayoutAreaState, } from '../../ui/page-layout/layout-area-sizing-context';

package/dist/types/ui/page-layout/calculate-layout-area-states.d.ts

@@ -0,0 +1,20 @@
+import type { LayoutArea, LayoutAreaAllocation, LayoutWidthBound, ResizeSession, StoredLayoutArea } from './layout-area-sizing-context';
+export declare function calculateLayoutAreaStates({ viewportWidth, layoutWidth, isChatPanelOverlay, isSideNavOverlay, occupiedWidth, mainMinWidth: mainMinWidthBound, areas, resizeSession, }: {
+    viewportWidth: number;
+    /**
+     * Root's content width, excluding scrollbars, borders and padding.
+     */
+    layoutWidth?: number;
+    /**
+     * Whether the viewport is below Root's 40rem inline-chat breakpoint.
+     */
+    isChatPanelOverlay: boolean;
+    /**
+     * Whether the viewport is below Root and SideNav's 64rem desktop breakpoint.
+     */
+    isSideNavOverlay: boolean;
+    occupiedWidth?: number;
+    mainMinWidth: LayoutWidthBound;
+    areas: Partial<Record<LayoutArea, StoredLayoutArea>>;
+    resizeSession?: ResizeSession | null;
+}): Partial<Record<LayoutArea, LayoutAreaAllocation>>;

package/dist/types/ui/page-layout/chat-panel.d.ts

@@ -0,0 +1,48 @@
+import type { StrictXCSSProp } from '@atlaskit/css';
+import type { ResizeBound } from './panel-splitter/types';
+import type { CommonSlotProps } from './types';
+/**
+ * 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.
+ */
+export declare function ChatPanel({ children, defaultWidth: defaultWidthProp, minWidth, maxWidth, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, onClose, }: CommonSlotProps & {
+    /**
+     * The content of the layout area.
+     */
+    children: React.ReactNode;
+    /**
+     * The accessible name of the slot, announced by screen readers.
+     */
+    label?: string;
+    /**
+     * The default width of the layout area in pixels.
+     */
+    defaultWidth?: number;
+    /**
+     * The minimum width the chat panel can be resized to.
+     */
+    minWidth?: ResizeBound;
+    /**
+     * The maximum width the chat panel can be resized to.
+     */
+    maxWidth?: ResizeBound;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * Whether the slot has a border when inline, or a shadow when overlaying the app.
+     *
+     * @default true
+     */
+    hasBorder?: boolean;
+    /**
+     * Required for controlled dismissal. Unmount ChatPanel when called, including
+     * when opening SideNav replaces the chat overlay. Remount it to open it again.
+     */
+    onClose: () => void;
+}): JSX.Element;

package/dist/types/ui/page-layout/constants.d.ts

@@ -6,6 +6,9 @@
 export declare const sideNavVar = "--n_sNvw";
 export declare const asideVar = "--n_asDw";
 export declare const panelVar = "--n_pnlW";
+export declare const chatPanelVar = "--n_cPnlW";
+export declare const chatPanelLiveWidthVar = "--n_cPnlLw";
+export declare const mainMinimumWidthVar = "--n_mainMinW";
 export declare const bannerMountedVar = "--n_bnrM";
 export declare const topNavMountedVar = "--n_tNvM";
 export declare const ribbonVar = "--n_rbnW";
@@ -35,6 +38,7 @@ export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY: 'calc(var(--r
  * rely on accessing them through global means.
  */
 export declare const localSlotLayers: {
+    chatPanelOverlay: number;
     ribbon: number;
     sideNavPanelSplitterFHS: number;
     topBar: number;

package/dist/types/ui/page-layout/layout-area-sizing-context.d.ts

@@ -0,0 +1,55 @@
+import { type Context } from 'react';
+import type { ResizeBounds } from './panel-splitter/types';
+export type LayoutArea = 'side-nav' | 'panel' | 'chat-panel';
+export type LayoutAreaMode = 'inline' | 'overlay';
+export type LayoutWidthBound = number | `${number}px` | `${number}vw`;
+export type LayoutAreaConfig = {
+    /**
+     * Controlled requested width. Allocation may constrain it without changing the request.
+     */
+    requestedWidth?: number;
+    defaultWidth: number;
+    compactDefaultWidth?: number;
+    minWidth: LayoutWidthBound;
+    maxWidth?: LayoutWidthBound;
+    isOpen: boolean;
+    onRequestClose?: () => void;
+};
+export type StoredLayoutArea = LayoutAreaConfig & {
+    preferredInlineWidth?: number;
+    preferredOverlayWidth?: number;
+    liveResize?: {
+        mode: LayoutAreaMode;
+        width: number;
+    };
+    openedAt?: number;
+};
+/**
+ * Effective sibling widths held fixed during and after a user resize, until the
+ * layout dimensions or configuration change. This is not a resize history.
+ */
+export type ResizeSession = {
+    area: LayoutArea;
+    baselineWidths: Partial<Record<LayoutArea, number>>;
+};
+export type LayoutAreaState = {
+    mode: LayoutAreaMode;
+    width: number;
+    minWidth: number;
+};
+export type LayoutAreaAllocation = LayoutAreaState & {
+    resizeBounds: {
+        min: number;
+        max: number;
+    };
+};
+export type LayoutAreaSizingContextValue = {
+    getResizeBounds: (area: LayoutArea) => ResizeBounds | undefined;
+    registerArea: (area: LayoutArea, config: LayoutAreaConfig) => void;
+    unregisterArea: (area: LayoutArea) => void;
+    startResize: (area: LayoutArea, mode: LayoutAreaMode) => void;
+    resize: (area: LayoutArea, mode: LayoutAreaMode, width: number) => void;
+    completeResize: (area: LayoutArea, mode: LayoutAreaMode, width: number) => void;
+    setMainMinWidth: (minWidth: LayoutWidthBound) => void;
+};
+export declare const LayoutAreaSizingContext: Context<LayoutAreaSizingContextValue | null>;

package/dist/types/ui/page-layout/layout-area-sizing-provider.d.ts

@@ -0,0 +1,5 @@
+import React, { type ReactNode } from 'react';
+export declare function LayoutAreaSizingProvider({ children, layoutRef, }: {
+    children: ReactNode;
+    layoutRef?: React.RefObject<HTMLDivElement | null>;
+}): JSX.Element;

package/dist/types/ui/page-layout/layout-area-state-contexts.d.ts

@@ -0,0 +1,3 @@
+import { type Context } from 'react';
+import type { LayoutArea, LayoutAreaState } from './layout-area-sizing-context';
+export declare const layoutAreaStateContexts: Record<LayoutArea, Context<LayoutAreaState | undefined>>;

package/dist/types/ui/page-layout/main/main.d.ts

@@ -3,7 +3,7 @@ import type { CommonSlotProps } from '../types';
 /**
  * Use the Main area for the main page content. It has a fluid width and will expand to fill available space.
  */
-export declare function Main({ children, xcss, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
+export declare function Main({ children, xcss, skipLinkLabel, testId, id: providedId, minWidth, }: CommonSlotProps & {
     /**
      * The content of the layout area.
      * This is where you should put the main content of your page.
@@ -13,4 +13,8 @@ export declare function Main({ children, xcss, skipLinkLabel, testId, id: provid
      * Bounded style overrides.
      */
     xcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * Minimum width used by the layout allocation system.
+     */
+    minWidth?: number;
 }): JSX.Element;