@atlaskit/navigation-system 11.0.0 → 11.1.0

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

@@ -4,7 +4,7 @@ import "./panel-splitter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { createPortal, flushSync } from 'react-dom';
 import { bind } from 'bind-event-listener';
 import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
@@ -135,10 +135,13 @@ const PortaledPanelSplitter = ({
   panelId,
   panelWidth,
   onCompleteResize,
+  onResizeStartInternal,
+  onResizeInternal,
   getResizeBounds,
   panel,
   portal,
   resizingCssVar,
+  resizingElementRef,
   position,
   tooltipContent,
   shortcut
@@ -171,9 +174,13 @@ const PortaledPanelSplitter = ({
   // Storing the initial `clientX` on `mousedown` events, to workaround a bug caused by some browser extensions
   // where the `dragstart` event incorrectly returns `0` for the `clientX` location.
   const initialClientXRef = useRef(null);
+  // Live allocation changes panelWidth on every frame. Only the legacy path should
+  // rebind the drag listeners when this value changes.
+  const legacyPanelWidth = fg('platform-dst-chat-panel-layout') ? undefined : panelWidth;
   useEffect(() => {
     const splitter = splitterRef.current;
     invariant(splitter, 'Splitter ref must be set');
+    let lastManagedResizeWidth;
     return combine(blockDraggingToIFrames({
       element: splitter
     }),
@@ -234,9 +241,16 @@ const PortaledPanelSplitter = ({
          * because some browser extensions can cause the event properties to incorrectly return 0.
          */
         invariant(isPanelSplitterDragData(source.data));
-        onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart({
+        const resizeStartData = {
           initialWidth: source.data.initialWidth
-        });
+        };
+        // The layout allocation system needs to know which area is actively being
+        // resized before the first drag update. Committing this synchronously keeps
+        // the actively dragged area protected from automatic compression.
+        if (onResizeStartInternal) {
+          flushSync(() => onResizeStartInternal(resizeStartData));
+        }
+        onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(resizeStartData);
 
         // Close any open layers when the user starts resizing
         openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
@@ -271,24 +285,51 @@ const PortaledPanelSplitter = ({
           position
         });
         const resizingWidth = `clamp(${resizeBounds.min}, ${targetWidth}px, ${resizeBounds.max})`;
-        panel.style.setProperty(resizingCssVar, resizingWidth);
+        if (fg('platform-dst-chat-panel-layout') && onResizeInternal) {
+          // Let the sizing provider constrain the width against Main's available space.
+          const width = Math.max(convertResizeBoundToPixels(resizeBounds.min), Math.min(targetWidth, convertResizeBoundToPixels(resizeBounds.max)));
+          if (width !== lastManagedResizeWidth) {
+            lastManagedResizeWidth = width;
+            onResizeInternal(width);
+          }
+        } else {
+          var _resizingElementRef$c;
+          panel.style.setProperty(resizingCssVar, resizingWidth);
+          resizingElementRef === null || resizingElementRef === void 0 ? void 0 : (_resizingElementRef$c = resizingElementRef.current) === null || _resizingElementRef$c === void 0 ? void 0 : _resizingElementRef$c.style.setProperty(resizingCssVar, resizingWidth);
+        }
         source.data.resizingWidth = resizingWidth;
       },
       onDrop({
         source
       }) {
+        var _resizingElementRef$c2;
         invariant(isPanelSplitterDragData(source.data));
         preventUnhandled.stop();
+
+        // PDD may deliver its final throttled drag update immediately before drop.
+        // Commit that update once before measuring; do not persist a previous frame.
+        if (onResizeInternal && lastManagedResizeWidth !== undefined) {
+          const width = lastManagedResizeWidth;
+          flushSync(() => onResizeInternal(width));
+          lastManagedResizeWidth = undefined;
+        }
         const finalWidth = getPixelWidth(panel);
-        onCompleteResize(finalWidth);
+        // Persist the final preferred width before removing the imperative drag
+        // variable, so the rendered width is continuous across pointer release.
+        if (fg('platform-dst-chat-panel-layout')) {
+          flushSync(() => onCompleteResize(finalWidth));
+        } else {
+          onCompleteResize(finalWidth);
+        }
         onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
           initialWidth: source.data.initialWidth,
           finalWidth
         });
         panel.style.removeProperty(resizingCssVar);
+        resizingElementRef === null || resizingElementRef === void 0 ? void 0 : (_resizingElementRef$c2 = resizingElementRef.current) === null || _resizingElementRef$c2 === void 0 ? void 0 : _resizingElementRef$c2.style.removeProperty(resizingCssVar);
       }
     }));
-  }, [onCompleteResize, onResizeStart, onResizeEnd, panel, resizingCssVar, panelWidth, position, openLayerObserver, panelId, getResizeBounds]);
+  }, [onCompleteResize, onResizeStartInternal, onResizeInternal, onResizeStart, onResizeEnd, panel, resizingCssVar, resizingElementRef, legacyPanelWidth, position, openLayerObserver, panelId, getResizeBounds]);
   const onResizeStartStableRef = useStableRef(onResizeStart);
   const onResizeEndStableRef = useStableRef(onResizeEnd);
   const [keyboardResizeManager] = useState(() => createKeyboardResizeManager({
@@ -304,7 +345,20 @@ const PortaledPanelSplitter = ({
     }
   }));
   const handleSliderInputChange = useCallback(event => {
-    const value = parseInt(event.target.value);
+    const isManagedResize = fg('platform-dst-chat-panel-layout') && onResizeInternal;
+    let value = isManagedResize ? parseFloat(event.target.value) : parseInt(event.target.value);
+    if (isManagedResize) {
+      // The available region may have changed since focus, including without a
+      // window resize. Use the allocator's current bounds for the public payload.
+      const bounds = getResizeBounds();
+      const min = convertResizeBoundToPixels(bounds.min);
+      const max = convertResizeBoundToPixels(bounds.max);
+      value = Math.max(min, Math.min(value, max));
+      setRangeInputBounds({
+        min,
+        max
+      });
+    }
     setRangeInputValue(value);
 
     /**
@@ -316,7 +370,7 @@ const PortaledPanelSplitter = ({
       initialWidth: panelWidth,
       finalWidth: value
     });
-  }, [onCompleteResize, panelWidth, keyboardResizeManager]);
+  }, [getResizeBounds, onCompleteResize, onResizeInternal, panelWidth, keyboardResizeManager]);
   const resizeEventListenerCleanupFn = useRef(null);
   const handleSliderFocus = useCallback(() => {
     var _resizeEventListenerC;
@@ -435,8 +489,11 @@ export const PanelSplitter = ({
     panelId,
     panelWidth,
     onCompleteResize,
+    onResizeStartInternal,
+    onResizeInternal,
     getResizeBounds,
     resizingCssVar,
+    resizingElementRef,
     position,
     shortcut
   } = context;
@@ -532,8 +589,11 @@ export const PanelSplitter = ({
     portal: portal,
     panelWidth: panelWidth,
     onCompleteResize: onCompleteResize,
+    onResizeStartInternal: onResizeStartInternal,
+    onResizeInternal: onResizeInternal,
     getResizeBounds: getResizeBounds,
     resizingCssVar: resizingCssVar,
+    resizingElementRef: resizingElementRef,
     position: position,
     tooltipContent: tooltipContent,
     shortcut: shortcut

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

@@ -9,9 +9,12 @@ export const PanelSplitterProvider = ({
   panelId,
   panelWidth,
   onCompleteResize,
+  onResizeStartInternal,
+  onResizeInternal,
   getResizeBounds,
   resizingCssVar,
   panelRef,
+  resizingElementRef,
   portalRef: providedPortalRef,
   position = 'end',
   isEnabled = true,
@@ -23,14 +26,17 @@ export const PanelSplitterProvider = ({
     panelId,
     panelWidth,
     onCompleteResize,
+    onResizeStartInternal,
+    onResizeInternal,
     getResizeBounds,
     resizingCssVar,
     position,
     panelRef,
+    resizingElementRef,
     isEnabled,
     portalRef: typeof providedPortalRef !== 'undefined' ? providedPortalRef : portalRef,
     shortcut
-  }), [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled, providedPortalRef, shortcut]);
+  }), [panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, getResizeBounds, resizingCssVar, position, panelRef, resizingElementRef, isEnabled, providedPortalRef, shortcut]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
     value: context
   }, children), typeof providedPortalRef !== 'undefined' ? null : /*#__PURE__*/React.createElement("div", {

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

@@ -0,0 +1,7 @@
+export function resolveLayoutWidth(bound, viewportWidth) {
+  if (typeof bound === 'number') {
+    return bound;
+  }
+  const value = Number.parseFloat(bound);
+  return bound.endsWith('vw') ? viewportWidth * value / 100 : value;
+}

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

@@ -8,6 +8,7 @@ import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-va
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { useLayoutId } from './use-layout-id';
 const localSlotLayersStatic = {
+  chatPanelOverlay: 5,
   ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS is enabled.
   // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.

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

@@ -1,5 +1,6 @@
 ._18m9zryt{overflow-y:clip}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
+._1cwmtye8{--n_mainMinW:20rem}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
 ._1reozryt{overflow-x:clip}
@@ -7,5 +8,6 @@
 ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}}
-@media (min-width:90rem){._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}
+@media (min-width:40rem){._12ag50j2{grid-template-areas:"banner banner" "top-bar chat-panel" "main chat-panel" "aside chat-panel"}._71dlqwpl{grid-template-columns:minmax(var(--n_mainMinW),1fr) minmax(0,max-content)}}
+@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkqmyk{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside chat-panel"}._1rqt8mqp{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto minmax(0,max-content)}}
+@media (min-width:90rem){._xkmggc7l{grid-template-areas:"banner banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar chat-panel" "ribbon side-nav main aside panel chat-panel"}._tyve1i18{grid-template-columns:auto auto minmax(var(--n_mainMinW),1fr) auto auto minmax(0,max-content)}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}

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

@@ -7,6 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
+import { LayoutAreaSizingProvider } from './layout-area-sizing-provider';
 import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-provider';
 import { SideNavElementProvider } from './side-nav/side-nav-element-provider';
 import { SideNavToggleButtonProvider } from './side-nav/toggle-button-provider';
@@ -15,7 +16,8 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 export const gridRootId = 'unsafe-design-system-page-layout-root';
 const styles = {
-  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
+  legacyRoot: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
+  root: "_1cwmtye8 _1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12ag50j2 _71dlqwpl _12fkqmyk _12qzrxre _1rqt8mqp _xkmggc7l _tyve1i18",
   safetyRail: "_1ciragmp",
   safetyRailWithTopLayer: "_1tvnagmp",
   panelUplift: "_1reozryt _18m9zryt"
@@ -36,6 +38,8 @@ export function Root({
   isSideNavShortcutEnabled = false
 }) {
   const ref = useRef(null);
+  const isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
+  const LayoutProvider = isChatPanelLayoutEnabled ? LayoutAreaSizingProvider : React.Fragment;
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
       const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -65,7 +69,9 @@ This message will not be displayed in production.
     defaultCollapsed: defaultSideNavCollapsed
   }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledProvider, {
     isSideNavShortcutEnabled: isSideNavShortcutEnabled
-  }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(LayoutProvider, isChatPanelLayoutEnabled ? {
+    layoutRef: ref
+  } : {}, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,
@@ -73,8 +79,8 @@ This message will not be displayed in production.
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
+    className: ax([isChatPanelLayoutEnabled ? styles.root : styles.legacyRoot, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
-  }, children)))))))));
+  }, children))))))))));
 }

package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css

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

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

@@ -17,10 +17,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';
@@ -40,12 +43,11 @@ const 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.
 const sideNavClampedWidthVar = '--n_snvW';
-const widthResizeBounds = {
-  min: '240px',
-  max: '50vw'
-};
-function getResizeBounds() {
-  return widthResizeBounds;
+const fallbackMinWidth = '240px';
+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;
 }
 
 /**
@@ -59,6 +61,8 @@ const panelSplitterPortalTargetStyles = {
 };
 const 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",
@@ -111,6 +115,8 @@ function SideNavInternal({
   children,
   defaultCollapsed,
   defaultWidth: defaultWidthProp = fallbackDefaultWidth,
+  minWidth = fallbackMinWidth,
+  maxWidth,
   testId,
   label = 'Sidebar',
   skipLinkLabel = label,
@@ -121,7 +127,8 @@ function SideNavInternal({
   id: providedId,
   canToggleWithShortcut
 }) {
-  var _sideNavState$lastTri;
+  var _managedSizing$mode, _managedSizing$width, _sideNavState$lastTri;
+  const isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
   const isFhsEnabled = useIsFhsEnabled();
   const id = useLayoutId({
     providedId
@@ -203,17 +210,132 @@ function SideNavInternal({
     fallbackDefaultWidth,
     slotName: 'SideNav'
   });
-  const [width, setWidth] = useState(defaultWidth);
-  const clampedWidth = `clamp(${widthResizeBounds.min}, ${width}px, ${widthResizeBounds.max})`;
+  const [inlineWidth, setInlineWidth] = useState(defaultWidth);
+  const [overlayWidth, setOverlayWidth] = useState(defaultWidth);
+  const [isInline, setIsInline] = useState(false);
+  useEffect(() => {
+    if (!isChatPanelLayoutEnabled) {
+      return;
+    }
+    const mediaQuery = window.matchMedia('(min-width: 64rem)');
+    setIsInline(mediaQuery.matches);
+    const onChange = event => setIsInline(event.matches);
+    return bind(mediaQuery, {
+      type: 'change',
+      listener: onChange
+    });
+  }, [isChatPanelLayoutEnabled]);
+  const toggleVisibilityForChatPanel = useToggleSideNav({
+    trigger: 'programmatic'
+  });
+  const closeOverlayForChatPanel = useCallback(() => {
+    // Allocation can overlay an expanded desktop nav when other slots consume
+    // its space. Dismiss the visibility state selected by the viewport, not the mode.
+    const isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (isDesktop ? isExpandedOnDesktop : isExpandedOnMobile) {
+      toggleVisibilityForChatPanel();
+    }
+  }, [isExpandedOnDesktop, isExpandedOnMobile, toggleVisibilityForChatPanel]);
+  const {
+    state: managedSizing,
+    getResizeBounds: getManagedResizeBounds,
+    startResize,
+    resize,
+    completeResize
+  } = useLayoutAreaSizing({
+    area: 'side-nav',
+    config: {
+      defaultWidth,
+      minWidth,
+      maxWidth,
+      isOpen: isInline ? isExpandedOnDesktop : isExpandedOnMobile,
+      onRequestClose: closeOverlayForChatPanel
+    }
+  });
+  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 = isChatPanelLayoutEnabled ? (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : mode === 'inline' ? inlineWidth : overlayWidth : inlineWidth;
+  const configuredMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100vw';
+  const clampedWidth = !isChatPanelLayoutEnabled ? `clamp(240px, ${inlineWidth}px, 50vw)` : managedSizing ? `${renderedWidth}px` : `clamp(${minWidth}, ${renderedWidth}px, ${configuredMaxWidth})`;
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const navRef = useRef(null);
   const panelSplitterPortalTargetRef = useRef(null);
+  const getResizeBounds = useCallback(() => {
+    if (!isChatPanelLayoutEnabled) {
+      return {
+        min: '240px',
+        max: '50vw'
+      };
+    }
+    const managedBounds = getManagedResizeBounds();
+    if (managedBounds) {
+      return managedBounds;
+    }
+    const sideNav = navRef.current;
+    const layoutRoot = sideNav === null || sideNav === void 0 ? void 0 : sideNav.parentElement;
+    const main = layoutRoot === null || layoutRoot === void 0 ? void 0 : layoutRoot.querySelector(':scope > [data-layout-slot][role="main"]');
+    const fallbackMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : mode === 'inline' ? '100vw' : '90vw';
+    if (!sideNav || mode === 'overlay') {
+      const chatPanel = layoutRoot === null || layoutRoot === void 0 ? void 0 : layoutRoot.querySelector(':scope > [data-layout-chat-panel]');
+      const inlineChatPanelWidth = chatPanel && getComputedStyle(chatPanel).gridArea === 'chat-panel' ? chatPanel.getBoundingClientRect().width : 0;
+      const overlayMaxWidth = Math.floor((window.innerWidth - inlineChatPanelWidth) * 0.9);
+      const constrainedMaxWidth = maxWidth ? Math.min(convertResizeBoundToPixels(maxWidth), overlayMaxWidth) : overlayMaxWidth;
+      return {
+        min: minWidth,
+        max: `${Math.max(convertResizeBoundToPixels(minWidth), constrainedMaxWidth)}px`
+      };
+    }
+    if (!main) {
+      return {
+        min: minWidth,
+        max: fallbackMaxWidth
+      };
+    }
+    const sideNavWidth = sideNav.getBoundingClientRect().width;
+    const 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
+      };
+    }
+    const localPanel = main.querySelector('[data-layout-with-panel-slot]');
+    const isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
+    const localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
+    const mainContentWidth = mainWidth - localPanelWidth;
+    const mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, 320);
+    const availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
+    const availableInlineWidth = Math.floor(sideNavWidth + availableWidth);
+    const constrainedMaxWidth = maxWidth ? Math.min(convertResizeBoundToPixels(maxWidth), availableInlineWidth) : availableInlineWidth;
+    return {
+      min: minWidth,
+      max: `${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.
    */
   const sharedRef = useSideNavRef();
   const mergedRef = mergeRefs([navRef, sharedRef]);
+  const onCompleteResize = useCallback(finalWidth => {
+    if (!isChatPanelLayoutEnabled) {
+      setInlineWidth(finalWidth);
+      return;
+    }
+    if (mode === 'inline') {
+      setInlineWidth(finalWidth);
+    } else {
+      setOverlayWidth(finalWidth);
+    }
+    completeResize(mode, finalWidth);
+  }, [completeResize, isChatPanelLayoutEnabled, mode]);
+  const onResizeStartInternal = useCallback(() => {
+    startResize(mode);
+  }, [mode, startResize]);
+  const onResizeInternal = useCallback(width => resize(mode, width), [mode, resize]);
   const toggleButtonElement = useContext(SideNavToggleButtonElement);
   const topNavStartElement = useContext(TopNavStartElement);
   const devTimeOnlyAttributes = {};
@@ -713,7 +835,7 @@ function SideNavInternal({
   // Used to conditionally display the keyboard shortcut in the SideNavPanelSplitter tooltip.
   const isShortcutEnabled = useIsSideNavShortcutEnabled();
   useResizingWidthCssVarOnRootElement({
-    isEnabled: true,
+    isEnabled: !isChatPanelLayoutEnabled || !managedSizing,
     cssVar: panelSplitterResizingVar,
     panelId: sideNavPanelSplitterId
   });
@@ -778,7 +900,7 @@ function SideNavInternal({
     },
     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 +920,10 @@ function SideNavInternal({
     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.
@@ -834,6 +958,8 @@ export function SideNav({
   children,
   defaultCollapsed,
   defaultWidth = 320,
+  minWidth,
+  maxWidth,
   testId,
   label,
   // Default value is defined in `SideNavInternal`
@@ -851,6 +977,8 @@ export function SideNav({
   }, /*#__PURE__*/React.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,
     defaultWidth: defaultWidth,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
     testId: testId,
     label: label,
     skipLinkLabel: skipLinkLabel,

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

@@ -0,0 +1,58 @@
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import { LayoutAreaSizingContext } from './layout-area-sizing-context';
+import { layoutAreaStateContexts } from './layout-area-state-contexts';
+export function useLayoutAreaSizing({
+  area,
+  config
+}) {
+  const context = useContext(LayoutAreaSizingContext);
+  const {
+    requestedWidth,
+    defaultWidth,
+    compactDefaultWidth,
+    minWidth,
+    maxWidth,
+    isOpen,
+    onRequestClose
+  } = config;
+  const registerArea = context === null || context === void 0 ? void 0 : context.registerArea;
+  const unregisterArea = context === null || context === void 0 ? void 0 : context.unregisterArea;
+  const startAreaResize = context === null || context === void 0 ? void 0 : context.startResize;
+  const resizeArea = context === null || context === void 0 ? void 0 : context.resize;
+  const completeAreaResize = context === null || context === void 0 ? void 0 : context.completeResize;
+  const getAreaResizeBounds = context === null || context === void 0 ? void 0 : context.getResizeBounds;
+  const 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.
+  const onRequestCloseRef = useRef(onRequestClose);
+  useEffect(() => {
+    onRequestCloseRef.current = onRequestClose;
+  }, [onRequestClose]);
+  const requestClose = useCallback(() => {
+    var _onRequestCloseRef$cu;
+    return (_onRequestCloseRef$cu = onRequestCloseRef.current) === null || _onRequestCloseRef$cu === void 0 ? void 0 : _onRequestCloseRef$cu.call(onRequestCloseRef);
+  }, []);
+  useEffect(() => {
+    registerArea === null || registerArea === void 0 ? void 0 : registerArea(area, {
+      requestedWidth,
+      defaultWidth,
+      compactDefaultWidth,
+      minWidth,
+      maxWidth,
+      isOpen,
+      onRequestClose: requestClose
+    });
+  }, [area, compactDefaultWidth, defaultWidth, isOpen, maxWidth, minWidth, registerArea, requestClose, requestedWidth]);
+  useEffect(() => () => unregisterArea === null || unregisterArea === void 0 ? void 0 : unregisterArea(area), [area, unregisterArea]);
+  const startResize = useCallback(mode => startAreaResize === null || startAreaResize === void 0 ? void 0 : startAreaResize(area, mode), [area, startAreaResize]);
+  const resize = useCallback((mode, width) => resizeArea === null || resizeArea === void 0 ? void 0 : resizeArea(area, mode, width), [area, resizeArea]);
+  const completeResize = useCallback((mode, width) => completeAreaResize === null || completeAreaResize === void 0 ? void 0 : completeAreaResize(area, mode, width), [area, completeAreaResize]);
+  const getResizeBounds = useCallback(() => getAreaResizeBounds === null || getAreaResizeBounds === void 0 ? void 0 : getAreaResizeBounds(area), [area, getAreaResizeBounds]);
+  return {
+    state,
+    startResize,
+    resize,
+    completeResize,
+    getResizeBounds
+  };
+}

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

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