@atlaskit/navigation-system 11.3.3 → 11.4.0

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

@@ -18,9 +18,10 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 
+import { hasOpenDialogOrPopover } from '@atlaskit/top-layer/page-surface/has-open-dialog-or-popover';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
-import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, defaultMainMinWidth, mainMinimumWidthVar, openLayerObserverSideNavNamespace, 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';
@@ -31,6 +32,7 @@ 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';
+import { bindOpenLayerChange } from './bind-open-layer-change';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
 import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
 import { SideNavToggleButtonElement } from './side-nav-toggle-button-element';
@@ -57,6 +59,51 @@ function getPixelCustomProperty(element, propertyName, fallback) {
  * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
  */
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+var textEntryInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
+function isEditableContent(_ref) {
+  var element = _ref.element;
+  if (element instanceof HTMLElement && typeof element.isContentEditable === 'boolean') {
+    return element.isContentEditable;
+  }
+  // Fallback for DOM implementations without `isContentEditable`.
+  var editingHost = element.closest('[contenteditable]');
+  return editingHost !== null && editingHost.getAttribute('contenteditable') !== 'false';
+}
+
+/**
+ * Returns `true` for an element that the user can type text into.
+ */
+function isTextEntryElement(_ref2) {
+  var element = _ref2.element;
+  if (element instanceof HTMLInputElement) {
+    return textEntryInputTypes.has(element.type) && !element.readOnly && !element.disabled;
+  }
+  if (element instanceof HTMLTextAreaElement) {
+    return !element.readOnly && !element.disabled;
+  }
+  return isEditableContent({
+    element: element
+  });
+}
+
+/**
+ * Used when the `platform-dst-top-layer` gate is on.
+ *
+ * The flyout stays open while a layer opened from the side nav is open, or while the user
+ * is typing in a text field inside the side nav (for example while renaming an item inline).
+ */
+function isFlyoutHeldOpen(_ref3) {
+  var nav = _ref3.nav;
+  if (hasOpenDialogOrPopover({
+    within: nav
+  })) {
+    return true;
+  }
+  var activeElement = nav.ownerDocument.activeElement;
+  return activeElement !== null && nav.contains(activeElement) && isTextEntryElement({
+    element: activeElement
+  });
+}
 var styles = {
   root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   chatPanelSizing: "_1bsbhc79",
@@ -98,26 +145,26 @@ export var onPeekStartDelayMs = 500;
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
  * context value.
  */
-function SideNavInternal(_ref) {
+function SideNavInternal(_ref4) {
   var _managedSizing$mode, _managedSizing$width, _sideNavState$lastTri;
-  var children = _ref.children,
-    defaultCollapsed = _ref.defaultCollapsed,
-    _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? fallbackMinWidth : _ref$minWidth,
-    maxWidth = _ref.maxWidth,
-    testId = _ref.testId,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Sidebar' : _ref$label,
-    _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
-    onExpand = _ref.onExpand,
-    onCollapse = _ref.onCollapse,
-    onPeekStart = _ref.onPeekStart,
-    onPeekEnd = _ref.onPeekEnd,
-    providedId = _ref.id,
-    canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var children = _ref4.children,
+    defaultCollapsed = _ref4.defaultCollapsed,
+    _ref4$defaultWidth = _ref4.defaultWidth,
+    defaultWidthProp = _ref4$defaultWidth === void 0 ? fallbackDefaultWidth : _ref4$defaultWidth,
+    _ref4$minWidth = _ref4.minWidth,
+    minWidth = _ref4$minWidth === void 0 ? fallbackMinWidth : _ref4$minWidth,
+    maxWidth = _ref4.maxWidth,
+    testId = _ref4.testId,
+    _ref4$label = _ref4.label,
+    label = _ref4$label === void 0 ? 'Sidebar' : _ref4$label,
+    _ref4$skipLinkLabel = _ref4.skipLinkLabel,
+    skipLinkLabel = _ref4$skipLinkLabel === void 0 ? label : _ref4$skipLinkLabel,
+    onExpand = _ref4.onExpand,
+    onCollapse = _ref4.onCollapse,
+    onPeekStart = _ref4.onPeekStart,
+    onPeekEnd = _ref4.onPeekEnd,
+    providedId = _ref4.id,
+    canToggleWithShortcut = _ref4.canToggleWithShortcut;
   var isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
   var id = useLayoutId({
     providedId: providedId
@@ -307,7 +354,7 @@ function SideNavInternal(_ref) {
     var isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
     var localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
     var mainContentWidth = mainWidth - localPanelWidth;
-    var mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, 320);
+    var mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, defaultMainMinWidth);
     var availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
     var availableInlineWidth = Math.floor(sideNavWidth + availableWidth);
     var constrainedMaxWidth = maxWidth ? Math.min(convertResizeBoundToPixels(maxWidth), availableInlineWidth) : availableInlineWidth;
@@ -343,7 +390,9 @@ function SideNavInternal(_ref) {
   var toggleButtonElement = useContext(SideNavToggleButtonElement);
   var topNavStartElement = useContext(TopNavStartElement);
   var devTimeOnlyAttributes = {};
-  var openLayerObserver = useOpenLayerObserver();
+  var openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
   var flyoutStateRef = useRef({
     type: 'not-active'
   });
@@ -421,6 +470,17 @@ function SideNavInternal(_ref) {
         });
       }
     }
+    function canClose() {
+      if (!fg('platform-dst-top-layer')) {
+        return (openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
+          namespace: openLayerObserverSideNavNamespace
+        })) === 0;
+      }
+      var nav = navRef.current;
+      return !(nav && isFlyoutHeldOpen({
+        nav: nav
+      }));
+    }
     return function onAction(action) {
       if (action === 'drag-from-flyout-started') {
         open();
@@ -462,9 +522,7 @@ function SideNavInternal(_ref) {
       }
       if (action === 'ready-to-close') {
         // If there are no open layers, we can close the flyout.
-        if ((openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
-          namespace: openLayerObserverSideNavNamespace
-        })) === 0) {
+        if (canClose()) {
           close();
           return;
         }
@@ -505,9 +563,9 @@ function SideNavInternal(_ref) {
       });
     });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
-  var handleExpand = useCallback(function (_ref2) {
-    var screen = _ref2.screen,
-      trigger = _ref2.trigger;
+  var handleExpand = useCallback(function (_ref5) {
+    var screen = _ref5.screen,
+      trigger = _ref5.trigger;
     onExpand === null || onExpand === void 0 || onExpand({
       screen: screen,
       trigger: trigger
@@ -527,9 +585,9 @@ function SideNavInternal(_ref) {
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
   }, [onExpand, updateFlyoutState, createAnalyticsEvent]);
-  var handleCollapse = useCallback(function (_ref3) {
-    var screen = _ref3.screen,
-      trigger = _ref3.trigger;
+  var handleCollapse = useCallback(function (_ref6) {
+    var screen = _ref6.screen,
+      trigger = _ref6.trigger;
     onCollapse === null || onCollapse === void 0 || onCollapse({
       screen: screen,
       trigger: trigger
@@ -722,15 +780,15 @@ function SideNavInternal(_ref) {
     //   we are just interested in listening to events within an element
     // - We do not want to impact `location.{*}.dropTargets` in events
     return monitorForElements({
-      canMonitor: function canMonitor(_ref4) {
-        var source = _ref4.source;
+      canMonitor: function canMonitor(_ref7) {
+        var source = _ref7.source;
         return nav.contains(source.element);
       },
       onGenerateDragPreview: function onGenerateDragPreview() {
         updateFlyoutState('drag-from-flyout-started');
       },
-      onDrop: function onDrop(_ref5) {
-        var location = _ref5.location;
+      onDrop: function onDrop(_ref8) {
+        var location = _ref8.location;
         // Always marking the drag and done
         updateFlyoutState('drag-from-flyout-finished');
 
@@ -791,8 +849,8 @@ function SideNavInternal(_ref) {
     // Close the flyout if there are no more layers open and the user is not mousing over the
     // flyout areas (side nav, TopNavStart element)
 
-    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(function (_ref6) {
-      var count = _ref6.count;
+    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(function (_ref9) {
+      var count = _ref9.count;
       if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {
         updateFlyoutState('force-close');
       }
@@ -800,6 +858,52 @@ function SideNavInternal(_ref) {
       namespace: openLayerObserverSideNavNamespace
     });
   }, [openLayerObserver, updateFlyoutState]);
+  var focusOutTimeoutIdRef = useRef(undefined);
+  useEffect(function () {
+    // The same as the open layer observer `onChange` above, for when the `platform-dst-top-layer`
+    // gate is on. Top-layer surfaces opened from the side nav are DOM descendants of it.
+    var nav = navRef.current;
+    if (!nav || !fg('platform-dst-top-layer')) {
+      return;
+    }
+    function closeIfReady() {
+      if (flyoutStateRef.current.type !== 'ready-to-close' || !nav) {
+        return;
+      }
+      if (isFlyoutHeldOpen({
+        nav: nav
+      })) {
+        return;
+      }
+      updateFlyoutState('force-close');
+    }
+    var unbindLayerChange = bindOpenLayerChange({
+      within: nav,
+      onChange: closeIfReady
+    });
+    var unbindFocusOut = bind(nav, {
+      type: 'focusout',
+      listener: function listener() {
+        // Wait for focus to move before checking where it went.
+        clearTimeout(focusOutTimeoutIdRef.current);
+        focusOutTimeoutIdRef.current = setTimeout(closeIfReady, 0);
+      }
+    });
+
+    // Removing the focused text field (for example when an inline rename ends) fires no
+    // `focusout` in some browsers, so also check again when content inside the side nav changes.
+    var removalObserver = new MutationObserver(closeIfReady);
+    removalObserver.observe(nav, {
+      childList: true,
+      subtree: true
+    });
+    return function cleanup() {
+      unbindLayerChange();
+      unbindFocusOut();
+      removalObserver.disconnect();
+      clearTimeout(focusOutTimeoutIdRef.current);
+    };
+  }, [updateFlyoutState]);
   useEffect(function () {
     // Clear flyout close timer if being unmounted
     return function cleanupPendingFlyoutClose() {
@@ -936,26 +1040,24 @@ function SideNavInternal(_ref) {
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
  */
-export function SideNav(_ref8) {
-  var children = _ref8.children,
-    defaultCollapsed = _ref8.defaultCollapsed,
-    _ref8$defaultWidth = _ref8.defaultWidth,
-    defaultWidth = _ref8$defaultWidth === void 0 ? 320 : _ref8$defaultWidth,
-    minWidth = _ref8.minWidth,
-    maxWidth = _ref8.maxWidth,
-    testId = _ref8.testId,
-    label = _ref8.label,
-    _ref8$skipLinkLabel = _ref8.skipLinkLabel,
-    skipLinkLabel = _ref8$skipLinkLabel === void 0 ? label : _ref8$skipLinkLabel,
-    onExpand = _ref8.onExpand,
-    onCollapse = _ref8.onCollapse,
-    onPeekStart = _ref8.onPeekStart,
-    onPeekEnd = _ref8.onPeekEnd,
-    canToggleWithShortcut = _ref8.canToggleWithShortcut,
-    id = _ref8.id;
-  return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverSideNavNamespace
-  }, /*#__PURE__*/React.createElement(SideNavInternal, {
+export function SideNav(_ref1) {
+  var children = _ref1.children,
+    defaultCollapsed = _ref1.defaultCollapsed,
+    _ref1$defaultWidth = _ref1.defaultWidth,
+    defaultWidth = _ref1$defaultWidth === void 0 ? 320 : _ref1$defaultWidth,
+    minWidth = _ref1.minWidth,
+    maxWidth = _ref1.maxWidth,
+    testId = _ref1.testId,
+    label = _ref1.label,
+    _ref1$skipLinkLabel = _ref1.skipLinkLabel,
+    skipLinkLabel = _ref1$skipLinkLabel === void 0 ? label : _ref1$skipLinkLabel,
+    onExpand = _ref1.onExpand,
+    onCollapse = _ref1.onCollapse,
+    onPeekStart = _ref1.onPeekStart,
+    onPeekEnd = _ref1.onPeekEnd,
+    canToggleWithShortcut = _ref1.canToggleWithShortcut,
+    id = _ref1.id;
+  var sideNav = /*#__PURE__*/React.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,
     defaultWidth: defaultWidth,
     minWidth: minWidth,
@@ -969,5 +1071,13 @@ export function SideNav(_ref8) {
     onPeekEnd: onPeekEnd,
     id: id,
     canToggleWithShortcut: canToggleWithShortcut
-  }, children));
+  }, children);
+
+  // Top-layer surfaces are found through the DOM, so the namespace is only needed when the gate is off.
+  if (fg('platform-dst-top-layer')) {
+    return sideNav;
+  }
+  return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverSideNavNamespace
+  }, sideNav);
 }

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

@@ -11,6 +11,8 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
@@ -93,12 +95,17 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   });
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var openLayerObserver = useOpenLayerObserver();
+  var openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
   var handleClick = useCallback(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
+
+    // Not gated. Top-layer tooltips (`platform-dst-top-layer-tooltip`) are not known to the observer.
+    requestClosePopovers();
     openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
   }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = useCallback(function () {

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -2,6 +2,9 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { hasOpenDialogOrPopover } from '@atlaskit/top-layer/page-surface/has-open-dialog-or-popover';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
 
@@ -10,7 +13,9 @@ import { useToggleSideNav } from './use-toggle-side-nav';
  */
 export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
-  var openLayerObserver = useOpenLayerObserver();
+  var openLayerObserver = useOpenLayerObserver({
+    isEnabled: !fg('platform-dst-top-layer')
+  });
   var toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
   });
@@ -33,12 +38,21 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
             // Ignore repeated keydown events from holding down the keys
             return;
           }
+          if (fg('platform-dst-top-layer') && hasOpenDialogOrPopover({
+            type: 'modal'
+          })) {
+            // Return early if there are any open modal dialogs
+            return;
+          }
           if (openLayerObserver && openLayerObserver.getCount({
             type: 'modal'
           }) > 0) {
             // Return early if there are any open modals
             return;
           }
+
+          // Not gated. Top-layer tooltips (`platform-dst-top-layer-tooltip`) are not known to the observer.
+          requestClosePopovers();
           openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
           toggleVisibilityByShortcut();
         }

package/dist/esm/ui/page-layout/top-nav/top-nav-end.js

@@ -66,7 +66,8 @@ export function TopNavEnd(_ref) {
 
   // The shared provider also covers the mobile overflow popup itself. Keep the
   // previous content-only namespace coverage when the layout gate is disabled.
-  var actions = fg('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+  // The observer is not used when the top-layer gate is on, so no provider is needed.
+  var actions = fg('platform-dst-chat-panel-layout') || fg('platform-dst-top-layer') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavEndNamespace
   }, children);
   var content = /*#__PURE__*/React.createElement("nav", {
@@ -104,7 +105,7 @@ export function TopNavEnd(_ref) {
   }) : /*#__PURE__*/React.createElement(List, {
     xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
   }, actions), hasPersistentItems && persistentItems);
-  return fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+  return fg('platform-dst-chat-panel-layout') && !fg('platform-dst-top-layer') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavEndNamespace
   }, content) : content;
 }

package/dist/esm/ui/page-layout/top-nav/top-nav-middle.js

@@ -3,6 +3,7 @@ import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { openLayerObserverTopNavMiddleNamespace } from '../constants';
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"
@@ -20,7 +21,7 @@ export function TopNavMiddle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax([styles.root])
-  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+  }, fg('platform-dst-top-layer') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavMiddleNamespace
   }, children));
 }

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

@@ -0,0 +1,3 @@
+export { PanelLayout } from '../../ui/page-layout/panel-layout';
+export type { PanelLayoutProps, PanelResizeEnd } from '../../ui/page-layout/panel-layout';
+export { localPanelWidthVar } from '../../ui/page-layout/constants';

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

@@ -3,6 +3,10 @@
  * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
  * We have chosen to ignore this rule to prevent duplicating them across the different slots, and to provide a high level view of them and how they relate.
  */
+/**
+ * Default minimum width of Main, in pixels, before a custom minimum is registered.
+ */
+export declare const defaultMainMinWidth = 320;
 export declare const sideNavVar = "--n_sNvw";
 export declare const asideVar = "--n_asDw";
 export declare const panelVar = "--n_pnlW";
@@ -12,6 +16,14 @@ export declare const mainMinimumWidthVar = "--n_mainMinW";
 export declare const bannerMountedVar = "--n_bnrM";
 export declare const topNavMountedVar = "--n_tNvM";
 export declare const ribbonVar = "--n_rbnW";
+/**
+ * Rendered border-box width of the local PanelLayout surface, in both inline and overlay modes.
+ * Published on document.documentElement after mounting when Root opts into
+ * UNSAFE_dangerouslyHoistSlotSizes. Only the primary Root should opt in.
+ * Use `var(${localPanelWidthVar}, 0px)` for external controls, not for width persistence
+ * or sizing the panel itself. The property is removed when the surface unmounts.
+ */
+export declare const localPanelWidthVar = "--n_localPanelWidth";
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
  *

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

@@ -0,0 +1,10 @@
+/**
+ * Local-panel defaults in pixels, used only when no explicit preference exists.
+ * Keep the existing desktop width until chat layout rolls out. Compact sizing is independent.
+ * These are requested defaults, not measurements of an open panel.
+ */
+export declare function getPanelLayoutDefaults(): {
+    panelWidth: number;
+    compactPanelWidth: number;
+    panelMinWidth: number;
+};

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

@@ -16,7 +16,11 @@ export type LayoutAreaConfig = {
     onRequestClose?: () => void;
 };
 export type StoredLayoutArea = LayoutAreaConfig & {
-    preferredInlineWidth?: number;
+    /**
+     * Local panels share this preference across inline and overlay modes.
+     * SideNav and ChatPanel retain separate overlay preferences.
+     */
+    preferredWidth?: number;
     preferredOverlayWidth?: number;
     liveResize?: {
         mode: LayoutAreaMode;

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

@@ -0,0 +1,32 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type Key, type MutableRefObject, type ReactNode } from 'react';
+import type { LayoutAreaMode, LayoutAreaState } from './layout-area-sizing-context';
+import type { PanelResizeEnd } from './panel-layout';
+import type { ResizeBounds } from './panel-splitter/types';
+type LocalPanelSurfaceProps = {
+    children: ReactNode;
+    contentKey?: Key;
+    label: string;
+    resizeLabel: string;
+    defaultWidth: number;
+    minWidth: number;
+    maxWidth?: number;
+    testId?: string;
+    layoutRef: MutableRefObject<HTMLDivElement | null>;
+    managedSizing?: LayoutAreaState;
+    getManagedResizeBounds: () => ResizeBounds | undefined;
+    prepareResize?: () => Promise<boolean>;
+    onManagedResizeStart: (mode: LayoutAreaMode) => void;
+    onManagedResize: (mode: LayoutAreaMode, width: number) => void;
+    onManagedResizeEnd: (mode: LayoutAreaMode, width: number) => void;
+    onWidthChange: (width: number) => void;
+    onResizeEnd: (event: PanelResizeEnd) => void;
+};
+/**
+ * Internal surface for PanelLayout. The host supplies content; navigation owns its geometry.
+ */
+export declare function LocalPanelSurface({ children, contentKey, label, resizeLabel, defaultWidth, minWidth, maxWidth, testId, layoutRef, managedSizing, getManagedResizeBounds, prepareResize, onManagedResizeStart, onManagedResize, onManagedResizeEnd, onWidthChange, onResizeEnd, }: LocalPanelSurfaceProps): JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { type Context } from 'react';
+export declare const MainMinWidthContext: Context<number>;

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

@@ -0,0 +1,47 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type MutableRefObject, type ReactNode } from 'react';
+import type { LayoutAreaMode } from './layout-area-sizing-context';
+type PanelLayoutShellProps = {
+    /**
+     * Main content rendered alongside the local panel.
+     */
+    children: ReactNode;
+    /**
+     * Panel content or surface supplied by the caller.
+     */
+    panel: ReactNode;
+    /**
+     * Whether the local panel is open.
+     */
+    isPanelOpen: boolean;
+    /**
+     * Effective panel track width in pixels.
+     */
+    panelWidth: number;
+    compactPanelWidth: number;
+    /**
+     * Minimum panel width in pixels.
+     */
+    panelMinWidth?: number;
+    /**
+     * Allocated placement. Before measurement, CSS reserves a track when both minimums fit the host.
+     */
+    mode?: LayoutAreaMode;
+    /**
+     * Shared with the panel's resize controls so imperative resizing also updates the grid track.
+     */
+    layoutRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Clips the layout during panel motion.
+     */
+    shouldClipOverflow?: boolean;
+    testId?: string;
+};
+/**
+ * Grid and scrolling for Main and its local panel. Use inside navigation's Root and Main.
+ */
+export declare function PanelLayoutShell({ children, panel, isPanelOpen, panelWidth, compactPanelWidth, panelMinWidth, mode, layoutRef, shouldClipOverflow, testId, }: PanelLayoutShellProps): JSX.Element;
+export {};

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

@@ -0,0 +1,74 @@
+import { type Key, type ReactNode } from 'react';
+import { type LayoutAreaMode } from './layout-area-sizing-context';
+export type PanelResizeEnd = {
+    initialWidth: number;
+    finalWidth: number;
+    mode: LayoutAreaMode;
+};
+export type PanelLayoutProps = {
+    /**
+     * Main content. Mount PanelLayout inside navigation's Main, alongside ChatPanel in Root.
+     */
+    children: ReactNode;
+    /**
+     * Caller-owned panel content; no Panel System provider or renderer is required.
+     */
+    panel: ReactNode;
+    isPanelOpen: boolean;
+    /**
+     * Optional content identity, used to reset scrolling and animate content replacement.
+     */
+    panelKey?: Key;
+    /**
+     * Controlled preferred width in pixels. Allocation may constrain it without changing the request.
+     */
+    panelWidth?: number;
+    /**
+     * Initial preferred width in pixels; subsequent changes are ignored.
+     * Defaults to 365, or 400 with chat layout enabled.
+     * After a user resize, one preferred width is retained across inline and overlay modes.
+     * Available space can constrain the rendered width without overwriting that preference.
+     */
+    defaultPanelWidth?: number;
+    /**
+     * Default at compact viewport sizes. Defaults to 320, or an explicitly supplied defaultPanelWidth.
+     * Used only until a controlled width or user resize supplies a preference.
+     */
+    compactDefaultPanelWidth?: number;
+    /**
+     * Minimum width in pixels. Defaults to 320; overlays can be smaller in a narrower container.
+     */
+    panelMinWidth?: number;
+    /**
+     * Optional maximum width in pixels.
+     */
+    panelMaxWidth?: number;
+    /**
+     * Called after user resizing, with the effective width. Accept this value to control panelWidth.
+     */
+    onPanelWidthChange?: (width: number) => void;
+    /**
+     * One callback per completed pointer/keyboard resize, for persistence and analytics.
+     */
+    onResizeEnd?: (event: PanelResizeEnd) => void;
+    /**
+     * Accessible region and splitter labels; pass localized values in products.
+     */
+    panelLabel?: string;
+    resizeLabel?: string;
+    testId?: string;
+};
+/**
+ * A coordinated local panel with caller-owned content and state. Keep this host mounted
+ * while closed to retain resized widths. Unmount it to reset its width preferences.
+ *
+ * Mount only one local-panel host per navigation Root/sizing coordinator, including
+ * closed hosts and panel-system's LayoutWithPanel. Switch content through the same host;
+ * separate Roots may each own a local panel.
+ *
+ * With chat layout enabled it shares Root's sizing coordinator. Otherwise it measures
+ * its own Main region, leaving existing navigation/chat behavior unchanged.
+ * Local-panel placement and resize constraints use this layout in both cases; disabling
+ * the chat-layout gate does not restore the previous panel-system layout engine.
+ */
+export declare function PanelLayout(props: PanelLayoutProps): JSX.Element;