@atlaskit/navigation-system 11.0.0 → 11.1.0

package/dist/es2019/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/es2019/ui/page-layout/chat-panel.js

@@ -0,0 +1,199 @@
+/* chat-panel.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./chat-panel.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
+import { chatPanelLiveWidthVar, chatPanelVar, localSlotLayers, mainMinimumWidthVar } from './constants';
+import { convertResizeBoundToPixels } from './panel-splitter/convert-resize-bound-to-pixels';
+import { PanelSplitterProvider } from './panel-splitter/provider';
+import { resolveLayoutWidth } from './resolve-layout-width';
+import { gridRootId } from './root';
+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';
+const chatPanelPanelSplitterId = Symbol('ChatPanel PanelSplitter');
+const panelSplitterResizingVar = '--n_cPnlRsz';
+const chatPanelOverlayWidthVar = '--n_cPnlOverlayW';
+const fallbackDefaultWidth = 400;
+const fallbackCompactDefaultWidth = 320;
+const fallbackMinWidth = '320px';
+const inlineMediaQuery = '(min-width: 40rem)';
+function getPixelCustomProperty(element, propertyName, fallback) {
+  const raw = getComputedStyle(element).getPropertyValue(propertyName).trim();
+  const value = Number.parseFloat(raw);
+  return Number.isFinite(value) ? resolveLayoutWidth(raw.endsWith('vw') ? `${value}vw` : value, window.innerWidth) : fallback;
+}
+const 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.
+ */
+export function ChatPanel({
+  children,
+  defaultWidth: defaultWidthProp,
+  minWidth = fallbackMinWidth,
+  maxWidth,
+  label = 'Chat panel',
+  skipLinkLabel = label,
+  testId,
+  id: providedId,
+  xcss,
+  hasBorder = true,
+  onClose
+}) {
+  var _managedSizing$mode, _managedSizing$width;
+  const id = useLayoutId({
+    providedId
+  });
+  const defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp: defaultWidthProp !== null && defaultWidthProp !== void 0 ? defaultWidthProp : fallbackDefaultWidth,
+    fallbackDefaultWidth,
+    slotName: 'ChatPanel'
+  });
+  const compactDefaultWidth = defaultWidthProp === undefined ? fallbackCompactDefaultWidth : defaultWidth;
+  useSkipLinkInternal({
+    id,
+    label: skipLinkLabel,
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
+  });
+  const ref = useRef(null);
+  const [inlineWidth, setInlineWidth] = useState(defaultWidth);
+  const [overlayWidth, setOverlayWidth] = useState(compactDefaultWidth);
+  const [isInline, setIsInline] = useState(false);
+  const {
+    state: managedSizing,
+    getResizeBounds: getManagedResizeBounds,
+    startResize,
+    resize,
+    completeResize
+  } = useLayoutAreaSizing({
+    area: 'chat-panel',
+    config: {
+      defaultWidth,
+      compactDefaultWidth,
+      minWidth,
+      maxWidth,
+      isOpen: true,
+      onRequestClose: onClose
+    }
+  });
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(inlineMediaQuery);
+    setIsInline(mediaQuery.matches);
+    const onChange = event => {
+      setIsInline(event.matches);
+    };
+    return bind(mediaQuery, {
+      type: 'change',
+      listener: onChange
+    });
+  }, []);
+  const mode = (_managedSizing$mode = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) !== null && _managedSizing$mode !== void 0 ? _managedSizing$mode : isInline ? 'inline' : 'overlay';
+  const renderedWidth = (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : mode === 'inline' ? inlineWidth : overlayWidth;
+  useResizingWidthCssVarOnRootElement({
+    isEnabled: !managedSizing,
+    cssVar: panelSplitterResizingVar,
+    panelId: chatPanelPanelSplitterId
+  });
+  const getResizeBounds = useCallback(() => {
+    const managedBounds = getManagedResizeBounds();
+    if (managedBounds) {
+      return managedBounds;
+    }
+    const chatPanel = ref.current;
+    const layoutRoot = chatPanel === null || chatPanel === void 0 ? void 0 : chatPanel.parentElement;
+    const 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'
+      };
+    }
+    const chatPanelWidth = chatPanel.getBoundingClientRect().width;
+    const mainWidth = main.getBoundingClientRect().width;
+    if (chatPanelWidth === 0 || mainWidth === 0) {
+      return {
+        min: minWidth,
+        max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '90vw'
+      };
+    }
+    const localPanel = main.querySelector('[data-layout-with-panel-slot]');
+    const isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
+    const localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
+    const mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, 320);
+    const mainContentWidth = mainWidth - localPanelWidth;
+    const availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
+    const availableInlineWidth = Math.floor(chatPanelWidth + availableWidth);
+    const constrainedMaxWidth = maxWidth ? Math.min(convertResizeBoundToPixels(maxWidth), availableInlineWidth) : availableInlineWidth;
+    return {
+      min: minWidth,
+      max: `${Math.max(convertResizeBoundToPixels(minWidth), constrainedMaxWidth)}px`
+    };
+  }, [getManagedResizeBounds, maxWidth, minWidth]);
+  const configuredMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100vw';
+  const chatPanelVariableWidth = managedSizing ? `${renderedWidth}px` : `clamp(${minWidth}, ${inlineWidth}px, ${configuredMaxWidth})`;
+  const chatPanelOverlayVariableWidth = managedSizing ? `${renderedWidth}px` : `clamp(${minWidth}, ${overlayWidth}px, min(90vw, ${configuredMaxWidth}))`;
+  const onCompleteResize = useCallback(finalWidth => {
+    if (mode === 'inline') {
+      setInlineWidth(finalWidth);
+    } else {
+      setOverlayWidth(finalWidth);
+    }
+    completeResize(mode, finalWidth);
+  }, [completeResize, mode]);
+  const onResizeStartInternal = useCallback(() => {
+    startResize(mode);
+  }, [mode, startResize]);
+  const onResizeInternal = useCallback(width => resize(mode, width), [mode, resize]);
+  return /*#__PURE__*/React.createElement("section", {
+    id: id,
+    "data-layout-slot": true,
+    "aria-label": label,
+    className: 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: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Shared layout CSS variable name.
+      [chatPanelVar]: chatPanelVariableWidth,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
+      [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, `
+#${gridRootId} { ${chatPanelLiveWidthVar}: var(${panelSplitterResizingVar}, ${chatPanelVariableWidth}); }
+`), /*#__PURE__*/React.createElement(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: ax([styles.scrollContainer])
+  }, children)));
+}

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

@@ -8,6 +8,9 @@
 export const sideNavVar = '--n_sNvw';
 export const asideVar = '--n_asDw';
 export const panelVar = '--n_pnlW';
+export const chatPanelVar = '--n_cPnlW';
+export const chatPanelLiveWidthVar = '--n_cPnlLw';
+export const mainMinimumWidthVar = '--n_mainMinW';
 export const bannerMountedVar = '--n_bnrM';
 export const topNavMountedVar = '--n_tNvM';
 export const ribbonVar = '--n_rbnW';
@@ -53,6 +56,8 @@ export const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_a
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const 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/es2019/ui/page-layout/layout-area-sizing-context.js

@@ -0,0 +1,8 @@
+import { createContext } from '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.
+ */
+
+export const LayoutAreaSizingContext = /*#__PURE__*/createContext(null);

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

@@ -0,0 +1,279 @@
+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';
+const defaultMainMinWidth = 320;
+function useStableAreaState(state) {
+  const {
+    mode,
+    width,
+    minWidth
+  } = state !== null && state !== void 0 ? state : {};
+  return useMemo(() => mode !== undefined && width !== undefined && minWidth !== undefined ? {
+    mode,
+    width,
+    minWidth
+  } : undefined, [mode, width, minWidth]);
+}
+export function LayoutAreaSizingProvider({
+  children,
+  layoutRef
+}) {
+  const occupiedWidth = useOccupiedLayoutWidth(layoutRef);
+  const [dimensions, setDimensions] = useState(null);
+  const [mainMinWidth, setMainMinWidth] = useState(defaultMainMinWidth);
+  const [areas, setAreas] = useState({});
+  const [resizeSession, setResizeSession] = useState(null);
+  const areaStatesRef = React.useRef({});
+  const configsRef = React.useRef({});
+  const openSequence = React.useRef(0);
+  useEffect(() => {
+    setResizeSession(null);
+  }, [mainMinWidth, occupiedWidth]);
+  useEffect(() => {
+    const root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    let previous = null;
+    // Match the actual rem-based grid breakpoint, including browser font settings.
+    const inlineChatQuery = window.matchMedia('(min-width: 40rem)');
+    const inlineSideNavQuery = window.matchMedia('(min-width: 64rem)');
+    const updateDimensions = contentWidth => {
+      var _style$paddingLeft, _style$paddingRight, _previous;
+      const style = root && contentWidth === undefined ? getComputedStyle(root) : null;
+      const 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;
+      const next = {
+        viewportWidth: window.innerWidth,
+        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();
+    const observer = new ResizeObserver(entries => {
+      const entry = entries.find(entry => entry.target === root);
+      if (entry) {
+        updateDimensions(entry.contentRect.width);
+      }
+    });
+    if (root) {
+      observer.observe(root);
+    }
+    const unbindResize = bind(window, {
+      type: 'resize',
+      listener: () => updateDimensions()
+    });
+    const unbindQuery = bind(inlineChatQuery, {
+      type: 'change',
+      listener: () => updateDimensions()
+    });
+    const unbindSideNavQuery = bind(inlineSideNavQuery, {
+      type: 'change',
+      listener: () => updateDimensions()
+    });
+    return () => {
+      observer.disconnect();
+      unbindResize();
+      unbindQuery();
+      unbindSideNavQuery();
+    };
+  }, [layoutRef]);
+  const registerArea = useCallback((area, config) => {
+    const previous = configsRef.current[area];
+    configsRef.current[area] = config;
+    setResizeSession(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.
+    const openedAt = ++openSequence.current;
+    setAreas(current => {
+      const existing = current[area];
+      return {
+        ...current,
+        [area]: {
+          ...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
+        }
+      };
+    });
+  }, []);
+  const unregisterArea = useCallback(area => {
+    delete configsRef.current[area];
+    setResizeSession(null);
+    setAreas(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.
+      const next = {
+        ...current
+      };
+      delete next[area];
+      return next;
+    });
+  }, []);
+  const freezeSiblingWidths = useCallback(area => {
+    const baselineWidths = {};
+    for (const areaName of ['side-nav', 'panel', 'chat-panel']) {
+      const 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.
+    setResizeSession({
+      area,
+      baselineWidths
+    });
+  }, []);
+  const startResize = useCallback((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.
+    const renderedState = areaStatesRef.current[area];
+    if ((renderedState === null || renderedState === void 0 ? void 0 : renderedState.mode) === 'inline') {
+      setAreas(current => {
+        const existing = current[area];
+        return existing ? {
+          ...current,
+          [area]: {
+            ...existing,
+            liveResize: {
+              mode,
+              width: renderedState.width
+            }
+          }
+        } : current;
+      });
+    }
+  }, [freezeSiblingWidths]);
+  const resize = useCallback((area, mode, width) => {
+    setAreas(current => {
+      var _existing$liveResize;
+      const existing = current[area];
+      if ((existing === null || existing === void 0 ? 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 ? {
+        ...current,
+        [area]: {
+          ...existing,
+          liveResize: {
+            mode,
+            width
+          }
+        }
+      } : current;
+    });
+  }, []);
+  const completeResize = useCallback((area, mode, width) => {
+    if (mode === 'inline') {
+      // Keyboard resizing completes without a preceding pointer-drag session.
+      freezeSiblingWidths(area);
+    }
+    setAreas(current => {
+      const existing = current[area];
+      if (!existing) {
+        return current;
+      }
+      if (mode === 'overlay') {
+        return {
+          ...current,
+          [area]: {
+            ...existing,
+            liveResize: undefined,
+            preferredOverlayWidth: width
+          }
+        };
+      }
+      return {
+        ...current,
+        [area]: {
+          ...existing,
+          liveResize: undefined,
+          preferredInlineWidth: width
+        }
+      };
+    });
+  }, [freezeSiblingWidths]);
+  const areaStates = useMemo(() => dimensions === null ? {} : calculateLayoutAreaStates({
+    ...dimensions,
+    occupiedWidth,
+    mainMinWidth,
+    areas,
+    resizeSession
+  }), [areas, mainMinWidth, resizeSession, dimensions, occupiedWidth]);
+  useEffect(() => {
+    areaStatesRef.current = areaStates;
+  }, [areaStates]);
+  useEffect(() => {
+    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;
+    }
+    const sideNav = areas['side-nav'];
+    const 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 ? void 0 : _chatPanel$onRequestC.call(chatPanel);
+    } else {
+      var _sideNav$onRequestClo;
+      (_sideNav$onRequestClo = sideNav.onRequestClose) === null || _sideNav$onRequestClo === void 0 ? 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.
+  const getResizeBounds = useCallback(area => {
+    var _areaStatesRef$curren;
+    const bounds = (_areaStatesRef$curren = areaStatesRef.current[area]) === null || _areaStatesRef$curren === void 0 ? void 0 : _areaStatesRef$curren.resizeBounds;
+    return bounds ? {
+      min: `${bounds.min}px`,
+      max: `${bounds.max}px`
+    } : undefined;
+  }, []);
+  const value = useMemo(() => ({
+    getResizeBounds,
+    registerArea,
+    unregisterArea,
+    startResize,
+    resize,
+    completeResize,
+    setMainMinWidth
+  }), [completeResize, getResizeBounds, registerArea, resize, startResize, unregisterArea]);
+  const sideNavState = useStableAreaState(areaStates['side-nav']);
+  const panelState = useStableAreaState(areaStates.panel);
+  const chatPanelState = useStableAreaState(areaStates['chat-panel']);
+  const SideNavStateProvider = layoutAreaStateContexts['side-nav'].Provider;
+  const PanelStateProvider = layoutAreaStateContexts.panel.Provider;
+  const 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/es2019/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 const layoutAreaStateContexts = {
+  'side-nav': /*#__PURE__*/createContext(undefined),
+  panel: /*#__PURE__*/createContext(undefined),
+  'chat-panel': /*#__PURE__*/createContext(undefined)
+};

package/dist/es2019/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';
 const contentInsetBlockStartStatic = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))`;
 const contentHeightWhenFixedStatic = `calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))`;
 const mainElementStyles = {
@@ -20,13 +23,18 @@ export function Main({
   xcss,
   skipLinkLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content',
   testId,
-  id: providedId
+  id: providedId,
+  minWidth = 320
 }) {
   const id = useLayoutId({
     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, `#${gridRootId} { ${mainMinimumWidthVar}: ${minWidth}px; }`), /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
     className: ax([mainElementStyles.root, xcss]),