@atlaskit/navigation-system 11.3.4 → 11.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlassian/navigation-system
 
+## 11.4.0
+
+### Minor Changes
+
+- [`87ab1d5ada9d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87ab1d5ada9d4) -
+  Move local-panel layout responsibilities from `@atlassian/panel-system` into
+  `@atlaskit/navigation-system`, including responsive positioning, sizing and resizing alongside
+  Main, SideNav and ChatPanel.
+
+  Expose `localPanelWidthVar` for positioning external controls beside the rendered local panel in
+  inline and overlay modes when Root enables `UNSAFE_dangerouslyHoistSlotSizes`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.3.4
 
 ### Patch Changes

package/README.md

@@ -24,3 +24,23 @@ yarn add @atlaskit/navigation-system
 
 Detailed docs and example usage can be found
 [here](https://atlassian.design/components/navigation-system/).
+
+### Positioning controls beside a local panel
+
+For global controls outside the layout, the primary `Root` can opt into
+`UNSAFE_dangerouslyHoistSlotSizes`. Its `PanelLayout` then publishes its rendered border-box width
+on the document element, using `localPanelWidthVar` from
+`@atlaskit/navigation-system/layout/panel-layout`:
+
+```tsx
+import type { localPanelWidthVar } from '@atlaskit/navigation-system/layout/panel-layout';
+
+// A type-checked literal keeps static styles compatible with Compiled.
+style={{ right: `calc(var(${'--n_localPanelWidth' satisfies typeof localPanelWidthVar}, 0px) + 24px)` }}
+```
+
+The value follows both inline and overlay widths, including CSS constraints before the deferred
+resize coordinator activates. It is removed when the panel surface unmounts; use the `0px` fallback
+when closed or before hydration. Only one primary Root should enable global size hoisting. This
+variable is for positioning external controls, not for sizing the panel or persisting a preferred
+width. The legacy Panel's `--rightPanelWidth` contract is unchanged.

package/constellation/layout/code.mdx

@@ -70,7 +70,7 @@ screen.
 
 <TSMorphProps exportName="SideNav" packageName="@atlaskit/navigation-system" />
 
-<!-- Not using level 4 heading for side nav layout areas as they won't be added to table of contents -->
+{/* Not using level 4 heading for side nav layout areas as they won't be added to table of contents */}
 
 ### SideNavHeader
 

package/constellation/layout/examples.mdx

@@ -12,8 +12,6 @@ import layoutExampleSideNavLight from './images/layout-example-sideNav-light.png
 import layoutExampleSideNavDark from './images/layout-example-sideNav-dark.png';
 import layoutExampleTopNav1Light from './images/layout-example-topNav-1-light.png';
 import layoutExampleTopNav1Dark from './images/layout-example-topNav-1-dark.png';
-import layoutExampleTopNav2Light from './images/layout-example-topNav-2-light.png';
-import layoutExampleTopNav2Dark from './images/layout-example-topNav-2-dark.png';
 
 import SectionMessage from '@atlaskit/section-message';
 
@@ -30,9 +28,6 @@ The full page layout with all areas rendered has the structure depicted below, o
 	alt="Example of the navigation system layout areas"
 />
 
-The top nav overlaps the side nav when it is expanded to give the appearance of a full height side
-nav.
-
 When composing your page layout ensure that:
 
 - The `Root` element wraps your entire view
@@ -55,8 +50,8 @@ the top of the screen.
 
 Use the top nav area to render [top nav items](/components/navigation-system/top-nav-items).
 
-- It will display at the top of the screen, below the banner if one is present. It has a fixed
-  height of 56px.
+- It will display at the top of the screen, below the banner if one is present. Its default height
+  is 48px, or 56px with the updated app switcher. Use the `height` prop to override it.
 - Use the [top nav slots](#top-nav-slots) to position actions within top nav.
 - The top nav is responsive, with the [top nav items](/components/navigation-system/top-nav-items)
   changing according to the viewport size.
@@ -68,21 +63,14 @@ Use the top nav area to render [top nav items](/components/navigation-system/top
 The top nav has three layout components that you must use to position
 [top nav items](/components/navigation-system/top-nav-items) within the top nav flexbox.
 
-- `TopNavStart`: Area for left-aligned items. Appears in the side nav when the side nav is expanded
-  to give the appearance of a full height sidebar.
+- `TopNavStart`: Area for left-aligned items.
 - `TopNavMiddle`: Area for centre-aligned items.
 - `TopNavEnd`: Area for right-aligned items.
 
 <Image
 	src={layoutExampleTopNav1Light}
 	srcDark={layoutExampleTopNav1Dark}
-	alt="Example of the top nav slots - side nav collapsed"
-/>
-
-<Image
-	src={layoutExampleTopNav2Light}
-	srcDark={layoutExampleTopNav2Dark}
-	alt="Example of the top nav slots - side nav opened"
+	alt="Example of the top nav slots"
 />
 
 #### Top nav custom theming

package/constellation/layout/usage.mdx

@@ -40,8 +40,7 @@ When applying components to the navigational areas,
 		<a href="/components/navigation-system/top-nav-items">top nav items</a>.
 		<ol type="a">
 			<li>
-				<strong>Top nav start:</strong> Area for left-aligned actions. Appears in the side nav when
-				the side nav is expanded.
+				<strong>Top nav start:</strong> Area for left-aligned actions.
 			</li>
 			<li>
 				<strong>Top nav middle:</strong> Area for centre-aligned actions.

package/constellation/top-nav-items/examples.mdx

@@ -30,7 +30,7 @@ For other components that can be used within the top nav, see
 ## Start items
 
 These actions go in the [top nav start](/components/navigation-system/layout/examples#top-nav-slots)
-area.
+area. They are left-aligned in the following order:
 
 - Side nav toggle button: Opens and closes the
   [side nav](/components/navigation-system/layout/examples#side-nav).
@@ -63,8 +63,8 @@ not via `children`.
 
 - When the keyboard shortcut is enabled, the toggle button’s tooltip will automatically show Ctrl+[
   as the shortcut.
-- The toggle button is left-aligned when the side nav is collapsed, and right-aligned when the side
-  nav is expanded.
+- The toggle button appears before the app switcher and logo, whether the side nav is collapsed or
+  expanded.
 
 <Example Component={TopNavStartToggleExample} />
 
@@ -72,8 +72,7 @@ not via `children`.
 
 App logo displays an app [logo icon](/components/logo) and name.
 
-- It has a maximum width of 320px, after which the app name truncates. The app name also truncates
-  based on the available space when the side nav is resized.
+- It has a maximum width of 320px, after which the app name truncates.
 - At `s` breakpoints and below (less that 1024px), the app name is not shown.
 
 See the [responsive section](#responsive) for more information.
@@ -92,8 +91,7 @@ hidden with the app name at `s` breakpoints and below (less than 1024px).
 
 Custom logo provides a container for custom logo images with the following constraints:
 
-- Maximum width: 320px. If the image is wider than this, or if space is limited when the side nav is
-  resized, the logo will scale down to fit.
+- Maximum width: 320px. If the image is wider than this, the logo will scale down to fit.
 - Maximum height: 24px. If the image is shorter than this, the logo will scale up to fit.
 
 Do not provide explicit width and height values on the image, otherwise it will not respect the
@@ -111,8 +109,7 @@ See the [responsive section](#responsive) for more information.
 Optional text used for app customisation by customers.
 
 - When present, it appears to the right of the logo.
-- It has a maximum width of 200px, after which the text truncates. It also truncates based on the
-  available space when the side nav is resized.
+- It has a maximum width of 200px, after which the text truncates.
 - At `s` breakpoints and below (less than 1024px), the custom title is not displayed.
 
 <Example Component={CustomTitleExample} />
@@ -124,10 +121,7 @@ These actions go in the
 
 - They should consist of a search component and a create component, in that order to maintain the
   correct layout behaviour.
-- The actions are centre-aligned when the side nav is collapsed, and left-aligned when the side nav
-  is expanded.
-- At `xl` breakpoints (1768px or greater), the middle items are centred in the viewport when the
-  side nav is expanded, but are pushed out by the side nav to avoid overlapping.
+- The actions are center-aligned.
 - We have provided placeholder components. See
   [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE) for
   recommended platform components.

package/dist/cjs/entry-points/layout/panel-layout.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PanelLayout", {
+  enumerable: true,
+  get: function get() {
+    return _panelLayout.PanelLayout;
+  }
+});
+Object.defineProperty(exports, "localPanelWidthVar", {
+  enumerable: true,
+  get: function get() {
+    return _constants.localPanelWidthVar;
+  }
+});
+var _panelLayout = require("../../ui/page-layout/panel-layout");
+var _constants = require("../../ui/page-layout/constants");

package/dist/cjs/ui/page-layout/calculate-layout-area-states.js

@@ -19,12 +19,12 @@ function clampTargetWidth(_ref) {
 function getTargetWidth(area, isSideNavOverlay) {
   var _area$compactDefaultW, _area$liveResize, _ref2, _area$requestedWidth;
   var defaultWidth = isSideNavOverlay ? (_area$compactDefaultW = area.compactDefaultWidth) !== null && _area$compactDefaultW !== void 0 ? _area$compactDefaultW : area.defaultWidth : area.defaultWidth;
-  return ((_area$liveResize = area.liveResize) === null || _area$liveResize === void 0 ? void 0 : _area$liveResize.mode) === 'inline' ? area.liveResize.width : (_ref2 = (_area$requestedWidth = area.requestedWidth) !== null && _area$requestedWidth !== void 0 ? _area$requestedWidth : area.preferredInlineWidth) !== null && _ref2 !== void 0 ? _ref2 : defaultWidth;
+  return ((_area$liveResize = area.liveResize) === null || _area$liveResize === void 0 ? void 0 : _area$liveResize.mode) === 'inline' ? area.liveResize.width : (_ref2 = (_area$requestedWidth = area.requestedWidth) !== null && _area$requestedWidth !== void 0 ? _area$requestedWidth : area.preferredWidth) !== null && _ref2 !== void 0 ? _ref2 : defaultWidth;
 }
-function getOverlayTargetWidth(area, isSideNavOverlay) {
+function getOverlayTargetWidth(area, isSideNavOverlay, areaName) {
   var _area$compactDefaultW2, _area$liveResize2, _ref3, _area$requestedWidth2;
   var defaultWidth = isSideNavOverlay ? (_area$compactDefaultW2 = area.compactDefaultWidth) !== null && _area$compactDefaultW2 !== void 0 ? _area$compactDefaultW2 : area.defaultWidth : area.defaultWidth;
-  return ((_area$liveResize2 = area.liveResize) === null || _area$liveResize2 === void 0 ? void 0 : _area$liveResize2.mode) === 'overlay' ? area.liveResize.width : (_ref3 = (_area$requestedWidth2 = area.requestedWidth) !== null && _area$requestedWidth2 !== void 0 ? _area$requestedWidth2 : area.preferredOverlayWidth) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
+  return ((_area$liveResize2 = area.liveResize) === null || _area$liveResize2 === void 0 ? void 0 : _area$liveResize2.mode) === 'overlay' ? area.liveResize.width : (_ref3 = (_area$requestedWidth2 = area.requestedWidth) !== null && _area$requestedWidth2 !== void 0 ? _area$requestedWidth2 : areaName === 'panel' ? area.preferredWidth : area.preferredOverlayWidth) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
 }
 function calculateLayoutAreaStates(_ref4) {
   var _ref5, _resizeSession$overla, _baselineWidths$chat, _panel$liveResize, _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
@@ -193,7 +193,7 @@ function calculateLayoutAreaStates(_ref4) {
       var layoutMax = (_areaName2 === 'chat-panel' ? layoutWidth : mainAreaWidth) * 0.9;
       var _max = Math.max(0, Math.min(configuredMax, layoutMax));
       var effectiveMin = Math.min(_min2, _max);
-      var _target = getOverlayTargetWidth(_area, isSideNavOverlay);
+      var _target = getOverlayTargetWidth(_area, isSideNavOverlay, _areaName2);
       var _width = clampTargetWidth({
         target: _target,
         min: effectiveMin,

package/dist/cjs/ui/page-layout/chat-panel.js

@@ -161,7 +161,7 @@ function ChatPanel(_ref) {
     var localPanel = main.querySelector('[data-layout-with-panel-slot]');
     var isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
     var localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
-    var mainMinimumWidth = getPixelCustomProperty(main, _constants.mainMinimumWidthVar, 320);
+    var mainMinimumWidth = getPixelCustomProperty(main, _constants.mainMinimumWidthVar, _constants.defaultMainMinWidth);
     var mainContentWidth = mainWidth - localPanelWidth;
     var availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
     var availableInlineWidth = Math.floor(chatPanelWidth + availableWidth);

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

@@ -3,13 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.mainMinimumWidthVar = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.chatPanelVar = exports.chatPanelLiveWidthVar = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
+exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.mainMinimumWidthVar = exports.localSlotLayers = exports.localPanelWidthVar = exports.defaultMainMinWidth = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.chatPanelVar = exports.chatPanelLiveWidthVar = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
 /**
  * These variables are shared across the different page layout slots.
  * 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.
+ */
+var defaultMainMinWidth = exports.defaultMainMinWidth = 320;
+
 // These are "compressed" to discourage usage.
 var sideNavVar = exports.sideNavVar = '--n_sNvw';
 var asideVar = exports.asideVar = '--n_asDw';
@@ -21,6 +26,15 @@ var bannerMountedVar = exports.bannerMountedVar = '--n_bnrM';
 var topNavMountedVar = exports.topNavMountedVar = '--n_tNvM';
 var ribbonVar = exports.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.
+ */
+var localPanelWidthVar = exports.localPanelWidthVar = '--n_localPanelWidth';
+
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
  *

package/dist/cjs/ui/page-layout/get-panel-layout-defaults.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPanelLayoutDefaults = getPanelLayoutDefaults;
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var DEFAULT_PANEL_WIDTH = 365;
+var DEFAULT_PANEL_WIDTH_WITH_CHAT_PANEL_LAYOUT = 400;
+
+/**
+ * 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.
+ */
+function getPanelLayoutDefaults() {
+  return {
+    panelWidth: (0, _fg.fg)('platform-dst-chat-panel-layout') ? DEFAULT_PANEL_WIDTH_WITH_CHAT_PANEL_LAYOUT : DEFAULT_PANEL_WIDTH,
+    compactPanelWidth: 320,
+    panelMinWidth: 320
+  };
+}

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

@@ -9,6 +9,7 @@ exports.LayoutAreaSizingProvider = LayoutAreaSizingProvider;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _constants = require("./constants");
 var _layoutAreaSizingContext = require("./layout-area-sizing-context");
 var _layoutAreaStateContexts = require("./layout-area-state-contexts");
 var _useCssLayoutAreaStates = require("./use-css-layout-area-states");
@@ -73,7 +74,7 @@ function LayoutAreaSizingProvider(_ref) {
       listener: dismissOlderOverlay
     });
   }, [chatPanelMode, lastOpenedOverlay, sideNavMode]);
-  var mainMinWidth = (0, _react.useRef)(320);
+  var mainMinWidth = (0, _react.useRef)(_constants.defaultMainMinWidth);
   var loadRef = (0, _react.useRef)(function () {});
   var ready = (0, _react.useRef)(false);
   var waiting = (0, _react.useRef)([]);

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

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _calculateLayoutAreaStates = require("./calculate-layout-area-states");
+var _constants = require("./constants");
 var _layoutAreaSizingContext = require("./layout-area-sizing-context");
 var _layoutAreaStateContexts = require("./layout-area-state-contexts");
 var _resolveLayoutWidth = require("./resolve-layout-width");
@@ -21,7 +22,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var defaultMainMinWidth = 320;
 function useStableAreaState(state) {
   var _ref = state !== null && state !== void 0 ? state : {},
     mode = _ref.mode,
@@ -45,7 +45,7 @@ function LayoutAreaSizingRuntime(_ref2) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dimensions = _useState2[0],
     setDimensions = _useState2[1];
-  var _useState3 = (0, _react.useState)(defaultMainMinWidth),
+  var _useState3 = (0, _react.useState)(_constants.defaultMainMinWidth),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     mainMinWidth = _useState4[0],
     setMainMinWidth = _useState4[1];
@@ -313,7 +313,7 @@ function LayoutAreaSizingRuntime(_ref2) {
       if (!existing) {
         return current;
       }
-      if (mode === 'overlay') {
+      if (mode === 'overlay' && area !== 'panel') {
         return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, area, _objectSpread(_objectSpread({}, existing), {}, {
           liveResize: undefined,
           preferredOverlayWidth: width
@@ -321,7 +321,8 @@ function LayoutAreaSizingRuntime(_ref2) {
       }
       return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, area, _objectSpread(_objectSpread({}, existing), {}, {
         liveResize: undefined,
-        preferredInlineWidth: width
+        // Local panels have one preference, regardless of the resized mode.
+        preferredWidth: width
       })));
     });
   }, [captureSiblingWidths]);

package/dist/cjs/ui/page-layout/local-panel-surface.compiled.css

@@ -0,0 +1,26 @@
+._nd5l1c6w{grid-area:panel}
+._nd5l1gzg{grid-area:main}
+._nd5l32aw{grid-area:var(--p_lclPnlSsrArea,main)}
+._y44v1mph{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
+._191wbqna{border-inline-start:var(--p_lclPnlSsrBorder,none)}
+._191wglyw{border-inline-start:none}
+._191wia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._10fph9n0{justify-self:end}
+._152tidpf{inset-block-start:0}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._16qs1dhr{box-shadow:var(--p_lclPnlSsrShadow,var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f))}
+._16qsglyw{box-shadow:none}
+._18m91wug{overflow-y:auto}
+._1bsb13q4{width:min(90%,var(--p_lclPnlRsz,var(--p_lclPnlW)))}
+._1bsb1c5w{width:var(--p_lclPnlRsz,var(--p_lclPnlW))}
+._1bsb1cku{width:var(--p_lclPnlSsrWidth,min(90%,var(--p_lclPnlSsrPreferredW)))}
+._1reo1wug{overflow-x:auto}
+._4t3i1osq{height:100%}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1g1j{background-color:var(--p_lclPnlSsrBackground,var(--ds-surface-overlay,#fff))}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ju25dn4k{animation-delay:var(--ds-duration-xshort,.1s)}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}

package/dist/cjs/ui/page-layout/local-panel-surface.js

@@ -0,0 +1,206 @@
+/* local-panel-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalPanelSurface = LocalPanelSurface;
+require("./local-panel-surface.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
+var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
+var _useMotion3 = require("@atlaskit/motion/entering/use-motion");
+var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _constants = require("./constants");
+var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
+var _panelSplitter = require("./panel-splitter/panel-splitter");
+var _provider = require("./panel-splitter/provider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var localPanelVar = '--p_lclPnlW';
+var panelSplitterResizingVar = '--p_lclPnlRsz';
+var localPanelSplitterId = Symbol('LocalPanel PanelSplitter');
+
+// Compiled preserves the existing container-relative widths and discrete motion styles.
+/* eslint-disable @compiled/shorthand-property-sorting -- Content motion overrides only the animation delay. */
+var styles = {
+  panelWrapper: "_nd5l1gzg _kqsw1if8 _bfhk1bhr _vchhusvi _4t3ieqxy _152tidpf _10fph9n0 _1bsb13q4",
+  managedInline: "_nd5l1c6w _bfhkvuon _152tidpf _1bsb1c5w",
+  unmeasured: "_nd5l32aw _191wbqna _1bsb1cku _bfhk1g1j _16qs1dhr",
+  managedOverlay: "_nd5l1gzg _bfhk1bhr _1bsb1c5w",
+  panelScrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
+  border: "_191wglyw _16qs130s",
+  managedInlineBorder: "_191wia51 _16qsglyw",
+  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _bq641n9t _105aeydr",
+  contentEntering: "_y44v1mph",
+  contentExiting: "_y44vf1qi",
+  contentChangeContainer: "_4t3i1osq"
+};
+var contentEnteringDelayStyles = {
+  root: "_ju25dn4k"
+};
+/* eslint-enable @compiled/shorthand-property-sorting */
+
+var PanelContentMotion = function PanelContentMotion(_ref) {
+  var children = _ref.children;
+  var _useMotion = (0, _useMotion3.useMotion)(),
+    state = _useMotion.state,
+    ref = _useMotion.ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: (0, _runtime.ax)([styles.contentChangeContainer, state === 'entering' && styles.contentEntering, state === 'exiting' && styles.contentExiting])
+  }, children);
+};
+/**
+ * Internal surface for PanelLayout. The host supplies content; navigation owns its geometry.
+ */
+function LocalPanelSurface(_ref2) {
+  var _managedSizing$mode, _managedSizing$width;
+  var children = _ref2.children,
+    contentKey = _ref2.contentKey,
+    label = _ref2.label,
+    resizeLabel = _ref2.resizeLabel,
+    defaultWidth = _ref2.defaultWidth,
+    minWidth = _ref2.minWidth,
+    maxWidth = _ref2.maxWidth,
+    testId = _ref2.testId,
+    layoutRef = _ref2.layoutRef,
+    managedSizing = _ref2.managedSizing,
+    getManagedResizeBounds = _ref2.getManagedResizeBounds,
+    prepareResize = _ref2.prepareResize,
+    onManagedResizeStart = _ref2.onManagedResizeStart,
+    onManagedResize = _ref2.onManagedResize,
+    onManagedResizeEnd = _ref2.onManagedResizeEnd,
+    onWidthChange = _ref2.onWidthChange,
+    onResizeEnd = _ref2.onResizeEnd;
+  var ref = (0, _react.useRef)(null);
+  var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
+    var panel = ref.current;
+    if (!dangerouslyHoistSlotSizes || !panel) {
+      return;
+    }
+    // Container-relative CSS owns the initial width, before the sizing runtime loads.
+    // Publish geometry directly for external controls; never feed it into saved preferences.
+    var previousWidth;
+    var publishWidth = function publishWidth(width) {
+      if (width !== previousWidth) {
+        previousWidth = width;
+        panel.ownerDocument.documentElement.style.setProperty(_constants.localPanelWidthVar, "".concat(width, "px"));
+      }
+    };
+    publishWidth(panel.getBoundingClientRect().width);
+    var observer = new ResizeObserver(function (_ref3) {
+      var _entry$borderBoxSize$, _entry$borderBoxSize;
+      var _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
+        entry = _ref4[0];
+      publishWidth((_entry$borderBoxSize$ = (_entry$borderBoxSize = entry.borderBoxSize) === null || _entry$borderBoxSize === void 0 || (_entry$borderBoxSize = _entry$borderBoxSize[0]) === null || _entry$borderBoxSize === void 0 ? void 0 : _entry$borderBoxSize.inlineSize) !== null && _entry$borderBoxSize$ !== void 0 ? _entry$borderBoxSize$ : panel.getBoundingClientRect().width);
+    });
+    observer.observe(panel, {
+      box: 'border-box'
+    });
+    return function () {
+      observer.disconnect();
+      panel.ownerDocument.documentElement.style.removeProperty(_constants.localPanelWidthVar);
+    };
+  }, [dangerouslyHoistSlotSizes]);
+  var scrollRef = (0, _react.useRef)(null);
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, [contentKey]);
+  var _useMotion2 = (0, _useMotion3.useMotion)(),
+    state = _useMotion2.state,
+    motionRef = _useMotion2.ref;
+  var isMotionUpliftEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel');
+  var isContentMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel-content');
+  var mergedRef = (0, _react.useMemo)(function () {
+    return isMotionUpliftEnabled ? (0, _mergeRefs.default)([ref, motionRef]) : ref;
+  }, [isMotionUpliftEnabled, motionRef]);
+  var mode = (_managedSizing$mode = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) !== null && _managedSizing$mode !== void 0 ? _managedSizing$mode : 'overlay';
+  var managedMode = (0, _useStableRef.default)(managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode);
+  // Resize preparation can load the coordinator after the interaction starts.
+  // Read its latest mode instead of the pre-load callback's captured fallback.
+  var getMode = (0, _react.useCallback)(function () {
+    if (managedMode.current) {
+      return managedMode.current;
+    }
+    return ref.current && getComputedStyle(ref.current).gridArea.split('/')[0].trim() === 'panel' ? 'inline' : 'overlay';
+  }, [managedMode]);
+  var dragMode = (0, _react.useRef)('overlay');
+  var completedResizeModeRef = (0, _react.useRef)(mode);
+  var renderedWidth = (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : Math.max(minWidth, Math.min(defaultWidth, maxWidth !== null && maxWidth !== void 0 ? maxWidth : Infinity));
+  // Before the first measurement, CSS caps the surface to its containing region.
+  // Resize preparation waits for the coordinator to resolve the same bounds for both inputs.
+  var getResizeBounds = (0, _react.useCallback)(function () {
+    var _getManagedResizeBoun;
+    return (_getManagedResizeBoun = getManagedResizeBounds()) !== null && _getManagedResizeBoun !== void 0 ? _getManagedResizeBoun : {
+      min: '0px',
+      max: '0px'
+    };
+  }, [getManagedResizeBounds]);
+  var onCompleteResize = (0, _react.useCallback)(function (width) {
+    // Keyboard analytics are debounced; retain the mode that produced this width,
+    // rather than the layout mode when the delayed callback eventually runs.
+    var mode = getMode();
+    completedResizeModeRef.current = mode;
+    onManagedResizeEnd(mode, width);
+    onWidthChange(width);
+  }, [getMode, onManagedResizeEnd, onWidthChange]);
+  var onResizeStartInternal = (0, _react.useCallback)(function () {
+    dragMode.current = getMode();
+    onManagedResizeStart(dragMode.current);
+  }, [getMode, onManagedResizeStart]);
+  var onResizeInternal = (0, _react.useCallback)(function (width) {
+    return onManagedResize(dragMode.current, width);
+  }, [onManagedResize]);
+  var handleResizeEnd = (0, _react.useCallback)(function (event) {
+    return onResizeEnd(_objectSpread(_objectSpread({}, event), {}, {
+      mode: completedResizeModeRef.current
+    }));
+  }, [onResizeEnd]);
+  return /*#__PURE__*/React.createElement("section", {
+    "aria-label": label,
+    "data-testid": testId,
+    "data-layout-with-panel-slot": "",
+    style: (0, _defineProperty2.default)({}, localPanelVar, "".concat(renderedWidth, "px")),
+    ref: mergedRef,
+    className: (0, _runtime.ax)([isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, styles.panelWrapper, styles.border, !managedSizing && styles.unmeasured, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInline, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInlineBorder])
+  }, /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
+    panelId: localPanelSplitterId,
+    panelRef: ref,
+    resizingElementRef: layoutRef,
+    panelWidth: renderedWidth,
+    onCompleteResize: onCompleteResize,
+    prepareResize: prepareResize,
+    onResizeStartInternal: onResizeStartInternal,
+    onResizeInternal: onResizeInternal,
+    getResizeBounds: getResizeBounds,
+    isEnabled: managedSizing !== undefined || prepareResize !== undefined,
+    resizingCssVar: panelSplitterResizingVar,
+    position: "start"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scrollRef,
+    "data-testid": testId && "".concat(testId, "--scroll-container"),
+    className: (0, _runtime.ax)([styles.panelScrollContainer, state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'entering' && contentEnteringDelayStyles.root, state === 'exiting' && styles.contentExiting])
+  }, isContentMotionEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(_exitingPersistence.default, {
+    exitThenEnter: true
+  }, /*#__PURE__*/React.createElement(PanelContentMotion, {
+    key: contentKey
+  }, children)) : children, /*#__PURE__*/React.createElement(_panelSplitter.PanelSplitter, {
+    label: resizeLabel,
+    testId: testId && "".concat(testId, "--splitter"),
+    onResizeEnd: handleResizeEnd
+  }))));
+}