@atlaskit/navigation-system 11.3.0 → 11.3.2

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

@@ -0,0 +1,419 @@
+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 { resolveLayoutWidth } from './resolve-layout-width';
+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 LayoutAreaSizingRuntime({
+  children,
+  layoutRef,
+  onReady,
+  onUpdate
+}) {
+  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 [hasInteraction, setHasInteraction] = useState(false);
+  const adoptedConstraints = React.useRef(null);
+  // Preserve the CSS handoff only while its available space is unchanged.
+  const isPreservingInitialLayout = !hasInteraction && (!adoptedConstraints.current || adoptedConstraints.current.occupiedWidth === occupiedWidth && adoptedConstraints.current.mainMinWidth === mainMinWidth);
+  const [initialStates, setInitialStates] = useState({});
+  const inputsRef = React.useRef({
+    dimensions,
+    occupiedWidth,
+    mainMinWidth,
+    areas,
+    resizeSession
+  });
+  useEffect(() => {
+    inputsRef.current = {
+      dimensions,
+      occupiedWidth,
+      mainMinWidth,
+      areas,
+      resizeSession
+    };
+  }, [dimensions, occupiedWidth, mainMinWidth, areas, resizeSession]);
+  useEffect(() => {
+    if (adoptedConstraints.current && (adoptedConstraints.current.occupiedWidth !== occupiedWidth || adoptedConstraints.current.mainMinWidth !== mainMinWidth)) {
+      setHasInteraction(true);
+    }
+    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$width, _style$paddingLeft, _style$paddingRight, _style$borderLeftWidt, _style$borderRightWid, _previous;
+      const style = root && contentWidth === undefined ? getComputedStyle(root) : null;
+      const computedWidth = Number.parseFloat((_style$width = style === null || style === void 0 ? void 0 : style.width) !== null && _style$width !== void 0 ? _style$width : '');
+      const padding = (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);
+      const border = (parseFloat((_style$borderLeftWidt = style === null || style === void 0 ? void 0 : style.borderLeftWidth) !== null && _style$borderLeftWidt !== void 0 ? _style$borderLeftWidt : '') || 0) + (parseFloat((_style$borderRightWid = style === null || style === void 0 ? void 0 : style.borderRightWidth) !== null && _style$borderRightWid !== void 0 ? _style$borderRightWid : '') || 0);
+      const layoutWidth = contentWidth !== null && contentWidth !== void 0 ? contentWidth : root ?
+      // Keep fractional CSS pixels, just as ResizeObserver does. Otherwise
+      // its initial delivery could be mistaken for a viewport resize.
+      Math.max(0, Number.isFinite(computedWidth) ? computedWidth - ((style === null || style === void 0 ? void 0 : style.boxSizing) === 'border-box' ? padding + border : 0) : root.clientWidth - padding) : 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;
+      }
+      if (previous) {
+        setHasInteraction(true);
+      }
+      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];
+    if (adoptedConstraints.current && (!previous || previous.isOpen !== config.isOpen || previous.requestedWidth !== config.requestedWidth || previous.minWidth !== config.minWidth || previous.maxWidth !== config.maxWidth || previous.defaultWidth !== config.defaultWidth || previous.compactDefaultWidth !== config.compactDefaultWidth)) {
+      setHasInteraction(true);
+    }
+    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 && (previous.isOpen === config.isOpen || area === 'side-nav' && !config.isOpen && (current === null || current === void 0 ? void 0 : current.area) !== 'side-nav') && 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.completedWidth === config.requestedWidth || area === 'side-nav' && !config.isOpen && (current === null || current === void 0 ? void 0 : current.area) !== 'side-nav') ? current : null;
+    });
+    setAreas(current => {
+      const existing = current[area];
+      return {
+        ...current,
+        [area]: {
+          ...existing,
+          ...config,
+          liveResize: config.isOpen ? existing === null || existing === void 0 ? void 0 : existing.liveResize : undefined
+        }
+      };
+    });
+  }, []);
+  const unregisterArea = useCallback(area => {
+    if (adoptedConstraints.current) {
+      setHasInteraction(true);
+    }
+    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 captureSiblingWidths = useCallback((area, mode = 'inline') => {
+    const baselineWidths = {};
+    const overlayModes = {};
+    for (const areaName of ['side-nav', 'panel', 'chat-panel']) {
+      const state = areaStatesRef.current[areaName];
+      if (state) {
+        overlayModes[areaName] = state.mode;
+      }
+      if ((state === null || state === void 0 ? void 0 : state.mode) === 'inline') {
+        baselineWidths[areaName] = state.width;
+      }
+    }
+    return {
+      area,
+      baselineWidths,
+      overlayModes: mode === 'overlay' ? overlayModes : undefined
+    };
+  }, []);
+  const startResize = useCallback((area, mode) => {
+    setHasInteraction(true);
+    setResizeSession(captureSiblingWidths(area, mode));
+
+    // 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) === mode) {
+      setAreas(current => {
+        const existing = current[area];
+        return existing ? {
+          ...current,
+          [area]: {
+            ...existing,
+            liveResize: {
+              mode,
+              width: renderedState.width
+            }
+          }
+        } : current;
+      });
+    }
+  }, [captureSiblingWidths]);
+  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) => {
+    setHasInteraction(true);
+    if (mode === 'overlay') {
+      const session = inputsRef.current.resizeSession;
+      setResizeSession({
+        ...((session === null || session === void 0 ? void 0 : session.area) === area && session.overlayModes ? session : captureSiblingWidths(area, mode)),
+        completedWidth: width
+      });
+    }
+    if (mode === 'inline') {
+      var _inputs$resizeSession, _inputs$areas$area;
+      const inputs = inputsRef.current;
+      const session = ((_inputs$resizeSession = inputs.resizeSession) === null || _inputs$resizeSession === void 0 ? void 0 : _inputs$resizeSession.area) === area && (_inputs$areas$area = inputs.areas[area]) !== null && _inputs$areas$area !== void 0 && _inputs$areas$area.liveResize ? inputs.resizeSession : captureSiblingWidths(area);
+      const existing = inputs.areas[area];
+      if (inputs.dimensions && existing) {
+        // Keyboard completion has no preview; calculate it using the accepted
+        // request, not the parent's previous controlled width. Pointer completion
+        // keeps below-minimum cascade results even though its payload is clamped.
+        const completed = existing.liveResize ? areaStatesRef.current : calculateLayoutAreaStates({
+          ...inputs.dimensions,
+          occupiedWidth: inputs.occupiedWidth,
+          mainMinWidth: inputs.mainMinWidth,
+          areas: {
+            ...inputs.areas,
+            [area]: {
+              ...existing,
+              liveResize: {
+                mode,
+                width
+              }
+            }
+          },
+          resizeSession: session
+        });
+        const completedWidths = {};
+        for (const name of ['side-nav', 'panel', 'chat-panel']) {
+          var _completed$name;
+          if (((_completed$name = completed[name]) === null || _completed$name === void 0 ? void 0 : _completed$name.mode) === 'inline') {
+            completedWidths[name] = completed[name].width;
+          }
+        }
+        setResizeSession({
+          ...session,
+          completedWidth: width,
+          completedWidths
+        });
+      }
+    }
+    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
+        }
+      };
+    });
+  }, [captureSiblingWidths]);
+  useEffect(() => {
+    // Loading the interaction engine is not a layout event. Adopt the CSS layout
+    // without changing widths or modes; subsequent changes to configuration or
+    // available space may redistribute it. Content stays mounted during the handoff.
+    const root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (onUpdate && root && dimensions && isPreservingInitialLayout) {
+      const measured = {};
+      const selectors = {
+        'side-nav': ':scope > nav[data-layout-slot]',
+        panel: '[data-layout-with-panel-slot]',
+        'chat-panel': ':scope > [data-layout-chat-panel]'
+      };
+      for (const name of ['side-nav', 'panel', 'chat-panel']) {
+        const element = root.querySelector(selectors[name]);
+        const config = areas[name];
+        if (!element || !(config !== null && config !== void 0 && config.isOpen)) {
+          continue;
+        }
+        const style = getComputedStyle(element);
+        const mode = style.gridArea.split('/')[0].trim() === name ? 'inline' : 'overlay';
+        measured[name] = {
+          mode,
+          width: element.getBoundingClientRect().width,
+          minWidth: resolveLayoutWidth(config.minWidth, dimensions.viewportWidth)
+        };
+      }
+      setInitialStates(measured);
+    }
+  }, [areas, dimensions, isPreservingInitialLayout, layoutRef, onUpdate]);
+  const areaStates = useMemo(() => {
+    var _initialStates$sideN, _initialStates$panel, _initialStates$chatP;
+    if (!dimensions) {
+      return {};
+    }
+    const allocated = calculateLayoutAreaStates({
+      ...dimensions,
+      occupiedWidth,
+      mainMinWidth,
+      areas,
+      resizeSession,
+      initialModes: onUpdate && layoutRef !== null && layoutRef !== void 0 && layoutRef.current && isPreservingInitialLayout ? {
+        'side-nav': (_initialStates$sideN = initialStates['side-nav']) === null || _initialStates$sideN === void 0 ? void 0 : _initialStates$sideN.mode,
+        panel: (_initialStates$panel = initialStates.panel) === null || _initialStates$panel === void 0 ? void 0 : _initialStates$panel.mode,
+        'chat-panel': (_initialStates$chatP = initialStates['chat-panel']) === null || _initialStates$chatP === void 0 ? void 0 : _initialStates$chatP.mode
+      } : undefined
+    });
+    if (onUpdate && layoutRef !== null && layoutRef !== void 0 && layoutRef.current && isPreservingInitialLayout) {
+      for (const name of ['side-nav', 'panel', 'chat-panel']) {
+        if (initialStates[name] && allocated[name]) {
+          allocated[name] = {
+            ...allocated[name],
+            ...initialStates[name]
+          };
+        } else {
+          delete allocated[name];
+        }
+      }
+    }
+    return allocated;
+  }, [areas, mainMinWidth, resizeSession, dimensions, occupiedWidth, isPreservingInitialLayout, initialStates, layoutRef, onUpdate]);
+  useEffect(() => {
+    var _areas$sideNav;
+    if (hasInteraction && (resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.area) !== 'side-nav' && (_areas$sideNav = areas['side-nav']) !== null && _areas$sideNav !== void 0 && _areas$sideNav.isOpen && !areaStates['side-nav'] && dimensions) {
+      var _areas$sideNav$onReq, _areas$sideNav2;
+      (_areas$sideNav$onReq = (_areas$sideNav2 = areas['side-nav']).onRequestClose) === null || _areas$sideNav$onReq === void 0 ? void 0 : _areas$sideNav$onReq.call(_areas$sideNav2);
+    }
+  }, [areaStates, areas, dimensions, hasInteraction, resizeSession]);
+  useEffect(() => {
+    areaStatesRef.current = areaStates;
+  }, [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;
+  useEffect(() => {
+    onReady === null || onReady === void 0 ? void 0 : onReady(value);
+    return () => onReady === null || onReady === void 0 ? void 0 : onReady(null);
+  }, [onReady, value]);
+  useEffect(() => {
+    if (!adoptedConstraints.current && (sideNavState || panelState || chatPanelState)) {
+      adoptedConstraints.current = {
+        occupiedWidth,
+        mainMinWidth
+      };
+    }
+    onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({
+      'side-nav': sideNavState,
+      panel: panelState,
+      'chat-panel': chatPanelState
+    });
+  }, [onUpdate, sideNavState, panelState, chatPanelState, occupiedWidth, mainMinWidth]);
+  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/main/main.js

@@ -6,7 +6,7 @@ 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 { gridRootFitId, 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))`;
@@ -34,7 +34,7 @@ export function Main({
   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", {
+  React.createElement("style", null, `#${gridRootId}, #${gridRootFitId} { ${mainMinimumWidthVar}: ${minWidth}px; }`), /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
     className: ax([mainElementStyles.root, xcss]),

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

@@ -134,6 +134,7 @@ const PortaledPanelSplitter = ({
   onCompleteResize,
   onResizeStartInternal,
   onResizeInternal,
+  prepareResize,
   getResizeBounds,
   panel,
   portal,
@@ -282,8 +283,9 @@ const PortaledPanelSplitter = ({
         });
         const resizingWidth = `clamp(${resizeBounds.min}, ${targetWidth}px, ${resizeBounds.max})`;
         if (fg('platform-dst-chat-panel-layout') && onResizeInternal) {
-          // Let the sizing provider constrain the width against Main's available space.
-          const width = Math.max(convertResizeBoundToPixels(resizeBounds.min), Math.min(targetWidth, convertResizeBoundToPixels(resizeBounds.max)));
+          // The allocator needs below-minimum requests for the local-to-chat cascade.
+          const currentBounds = getResizeBounds();
+          const width = Math.max(0, Math.min(targetWidth, prepareResize ? window.innerWidth : convertResizeBoundToPixels(currentBounds.max)));
           if (width !== lastManagedResizeWidth) {
             lastManagedResizeWidth = width;
             onResizeInternal(width);
@@ -295,12 +297,17 @@ const PortaledPanelSplitter = ({
         }
         source.data.resizingWidth = resizingWidth;
       },
-      onDrop({
+      async onDrop({
         source
       }) {
         var _resizingElementRef$c2;
         invariant(isPanelSplitterDragData(source.data));
         preventUnhandled.stop();
+        if (prepareResize) {
+          if (!(await prepareResize()) || !panel.isConnected) {
+            return;
+          }
+        }
 
         // PDD may deliver its final throttled drag update immediately before drop.
         // Commit that update once before measuring; do not persist a previous frame.
@@ -325,7 +332,7 @@ const PortaledPanelSplitter = ({
         resizingElementRef === null || resizingElementRef === void 0 ? void 0 : (_resizingElementRef$c2 = resizingElementRef.current) === null || _resizingElementRef$c2 === void 0 ? void 0 : _resizingElementRef$c2.style.removeProperty(resizingCssVar);
       }
     }));
-  }, [onCompleteResize, onResizeStartInternal, onResizeInternal, onResizeStart, onResizeEnd, panel, resizingCssVar, resizingElementRef, legacyPanelWidth, position, openLayerObserver, panelId, getResizeBounds]);
+  }, [onCompleteResize, onResizeStartInternal, onResizeInternal, prepareResize, onResizeStart, onResizeEnd, panel, resizingCssVar, resizingElementRef, legacyPanelWidth, position, openLayerObserver, panelId, getResizeBounds]);
   const onResizeStartStableRef = useStableRef(onResizeStart);
   const onResizeEndStableRef = useStableRef(onResizeEnd);
   const [keyboardResizeManager] = useState(() => createKeyboardResizeManager({
@@ -340,21 +347,41 @@ const PortaledPanelSplitter = ({
       return (_onResizeEndStableRef = onResizeEndStableRef.current) === null || _onResizeEndStableRef === void 0 ? void 0 : _onResizeEndStableRef.call(onResizeEndStableRef, ...args);
     }
   }));
-  const handleSliderInputChange = useCallback(event => {
+  const focusSequence = useRef(0);
+  const keyboardBoundsReady = useRef(false);
+  const pendingKeyboardWidth = useRef(null);
+  const handleSliderInputChange = useCallback(async (event, pendingKey) => {
     const isManagedResize = fg('platform-dst-chat-panel-layout') && onResizeInternal;
-    let value = isManagedResize ? parseFloat(event.target.value) : parseInt(event.target.value);
+    const sequence = focusSequence.current;
+    let value = isManagedResize ? parseFloat(event.currentTarget.value) : parseInt(event.currentTarget.value);
+    if (prepareResize) {
+      if (!(await prepareResize()) || !panel.isConnected || sequence !== focusSequence.current) {
+        return;
+      }
+    }
     if (isManagedResize) {
       // The available region may have changed since focus, including without a
       // window resize. Use the allocator's current bounds for the public payload.
       const bounds = getResizeBounds();
       const min = convertResizeBoundToPixels(bounds.min);
       const max = convertResizeBoundToPixels(bounds.max);
+      if (pendingKey) {
+        var _pendingKeyboardWidth;
+        // Native range inputs would apply these keys to the placeholder bounds.
+        // Preserve the intent until the chunk provides the real bounds instead.
+        const current = (_pendingKeyboardWidth = pendingKeyboardWidth.current) !== null && _pendingKeyboardWidth !== void 0 ? _pendingKeyboardWidth : getPixelWidth(panel);
+        const isRtl = getTextDirection(panel) === 'rtl';
+        const increase = pendingKey === 'ArrowUp' || pendingKey === (isRtl ? 'ArrowLeft' : 'ArrowRight') || pendingKey === 'PageUp';
+        const step = pendingKey.startsWith('Page') ? Math.max(20, (max - min) / 10) : 20;
+        value = pendingKey === 'End' ? max : pendingKey === 'Home' ? min : current + (increase ? step : -step);
+      }
       value = Math.max(min, Math.min(value, max));
       setRangeInputBounds({
         min,
         max
       });
     }
+    pendingKeyboardWidth.current = value;
     setRangeInputValue(value);
 
     /**
@@ -366,10 +393,24 @@ const PortaledPanelSplitter = ({
       initialWidth: panelWidth,
       finalWidth: value
     });
-  }, [getResizeBounds, onCompleteResize, onResizeInternal, panelWidth, keyboardResizeManager]);
+  }, [getResizeBounds, onCompleteResize, onResizeInternal, panelWidth, keyboardResizeManager, panel, prepareResize]);
+  const handleSliderKeyDown = useCallback(event => {
+    if (prepareResize && !keyboardBoundsReady.current && ['Home', 'End', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].includes(event.key)) {
+      event.preventDefault();
+      void handleSliderInputChange(event, event.key);
+    }
+  }, [handleSliderInputChange, prepareResize]);
   const resizeEventListenerCleanupFn = useRef(null);
-  const handleSliderFocus = useCallback(() => {
+  const handleSliderFocus = useCallback(async () => {
     var _resizeEventListenerC;
+    const sequence = ++focusSequence.current;
+    keyboardBoundsReady.current = false;
+    pendingKeyboardWidth.current = null;
+    if (prepareResize) {
+      if (!(await prepareResize()) || !panel.isConnected || sequence !== focusSequence.current) {
+        return;
+      }
+    }
     /**
      * We are only updating the range input's properties when the element is focused, as a performance optimisation.
      * It isn't necessary to recalculate these values until the element is going to be used.
@@ -379,7 +420,9 @@ const PortaledPanelSplitter = ({
     (_resizeEventListenerC = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC === void 0 ? void 0 : _resizeEventListenerC.call(resizeEventListenerCleanupFn);
 
     // Update the range input value to match the current panel width.
-    setRangeInputValue(panelWidth);
+    const width = prepareResize ? getPixelWidth(panel) : panelWidth;
+    pendingKeyboardWidth.current = width;
+    setRangeInputValue(width);
     const resizeBounds = getResizeBounds();
 
     // Update the range input bounds to ensure they are accurate (in case the viewport was previously resized)
@@ -387,6 +430,7 @@ const PortaledPanelSplitter = ({
       min: convertResizeBoundToPixels(resizeBounds.min),
       max: convertResizeBoundToPixels(resizeBounds.max)
     });
+    keyboardBoundsReady.current = true;
 
     /**
      * _While the slider element is focused_, add a window resize event listener to update the range input bounds
@@ -405,9 +449,11 @@ const PortaledPanelSplitter = ({
         });
       }
     });
-  }, [panelWidth, getResizeBounds]);
+  }, [panelWidth, getResizeBounds, panel, prepareResize]);
   const handleSliderBlur = useCallback(() => {
     var _resizeEventListenerC2;
+    focusSequence.current++;
+    keyboardBoundsReady.current = false;
     // Remove the resize event listener when the range input is blurred.
     (_resizeEventListenerC2 = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC2 === void 0 ? void 0 : _resizeEventListenerC2.call(resizeEventListenerCleanupFn);
   }, []);
@@ -432,6 +478,7 @@ const PortaledPanelSplitter = ({
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
+    "data-panel-splitter": prepareResize ? '' : undefined,
     onDoubleClick: onDoubleClick,
     className: ax([grabAreaStyles.root, fg('platform-dst-tokens-finesse') && grabAreaStyles.rootFinesse])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
@@ -443,6 +490,7 @@ const PortaledPanelSplitter = ({
     "aria-valuetext": ariaValueText,
     "aria-labelledby": labelId,
     onChange: handleSliderInputChange,
+    onKeyDown: prepareResize ? handleSliderKeyDown : undefined,
     onFocus: handleSliderFocus,
     onBlur: handleSliderBlur
   }), /*#__PURE__*/React.createElement("span", {
@@ -488,6 +536,7 @@ export const PanelSplitter = ({
     onResizeStartInternal,
     onResizeInternal,
     getResizeBounds,
+    prepareResize,
     resizingCssVar,
     resizingElementRef,
     position,
@@ -587,6 +636,7 @@ export const PanelSplitter = ({
     onCompleteResize: onCompleteResize,
     onResizeStartInternal: onResizeStartInternal,
     onResizeInternal: onResizeInternal,
+    prepareResize: prepareResize,
     getResizeBounds: getResizeBounds,
     resizingCssVar: resizingCssVar,
     resizingElementRef: resizingElementRef,

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

@@ -11,6 +11,7 @@ export const PanelSplitterProvider = ({
   onCompleteResize,
   onResizeStartInternal,
   onResizeInternal,
+  prepareResize,
   getResizeBounds,
   resizingCssVar,
   panelRef,
@@ -28,6 +29,7 @@ export const PanelSplitterProvider = ({
     onCompleteResize,
     onResizeStartInternal,
     onResizeInternal,
+    prepareResize,
     getResizeBounds,
     resizingCssVar,
     position,
@@ -36,7 +38,7 @@ export const PanelSplitterProvider = ({
     isEnabled,
     portalRef: typeof providedPortalRef !== 'undefined' ? providedPortalRef : portalRef,
     shortcut
-  }), [panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, getResizeBounds, resizingCssVar, position, panelRef, resizingElementRef, isEnabled, providedPortalRef, shortcut]);
+  }), [panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, prepareResize, getResizeBounds, resizingCssVar, position, panelRef, resizingElementRef, isEnabled, providedPortalRef, shortcut]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
     value: context
   }, children), typeof providedPortalRef !== 'undefined' ? null : /*#__PURE__*/React.createElement("div", {

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

@@ -1,13 +1,24 @@
 ._18m9zryt{overflow-y:clip}
+._1bsb1osq{width:100%}
+._1bsb1raa{width:max(0px,calc(var(--n_layoutW) - var(--n_mainMinW) - var(--n_fitAside, 0px) - var(--n_fitRibbon, 0px) - var(--n_fitPanel, 0px)))}
+._1bsb4nr3{width:var(--n_layoutW)}
+._1bsbjwgu{width:max(0px,calc(100% - var(--n_fitNav)))}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1cwmtye8{--n_mainMinW:20rem}
 ._1e0c11p5{display:grid}
+._1f381mry{container-name:navigation-chat-space}
+._1f38hwoh{container-name:navigation-main-space}
+._1f38hx13{container-name:navigation-layout-width}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
 ._1reozryt{overflow-x:clip}
 ._1tke1kxc{min-height:100vh}
 ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
+._5to3grho{--n_fitNav:0px}
+._7cca15wb{container-type:inline-size}
+._82d6okmw{--n_layoutW:100cqw}
+._vchh1ntv{box-sizing:content-box}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (min-width:40rem){._12ag50j2{grid-template-areas:"banner banner" "top-bar chat-panel" "main chat-panel" "aside chat-panel"}._71dlqwpl{grid-template-columns:minmax(var(--n_mainMinW),1fr) minmax(0,max-content)}}
-@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkqmyk{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside chat-panel"}._1rqt8mqp{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto minmax(0,max-content)}}
-@media (min-width:90rem){._xkmggc7l{grid-template-areas:"banner banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside panel chat-panel"}._tyve1i18{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto auto minmax(0,max-content)}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}
+@media (min-width:40rem){._12ag50j2{grid-template-areas:"banner banner" "top-bar chat-panel" "main chat-panel" "aside chat-panel"}._71dl19sb{grid-template-columns:minmax(var(--n_mainMinW),1fr) var(--n_chatTrack,0)}}
+@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkqmyk{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside chat-panel"}._1rqttswr{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto var(--n_chatTrack,0)}}
+@media (min-width:90rem){._xkmggc7l{grid-template-areas:"banner banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside panel chat-panel"}._tyve87m4{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto auto var(--n_chatTrack,0)}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}