@atlaskit/navigation-system 10.7.0 → 10.8.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @atlassian/navigation-system
 
+## 10.8.0
+
+### Minor Changes
+
+- [`5dd6269af3c70`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5dd6269af3c70) -
+  Add an opt-in `maxWidth` to the `Panel` layout slot and preview panel `Panel` config, letting a
+  single consumer request a wider resize bound (e.g. `70vw`) than the default cap of half the
+  viewport width. Defaults are unchanged, so all existing consumers remain capped at the default.
+
+  **`@atlaskit/navigation-system`** — the `Panel` layout slot accepts a `maxWidth` (`vw`/`px`),
+  applied to both the rendered width and the resize bounds (mouse and keyboard):
+
+  ```tsx
+  import { Panel } from '@atlaskit/navigation-system/layout/panel';
+
+  <Panel defaultWidth={600} maxWidth="70vw">
+  	{/* ...panel content... */}
+  </Panel>;
+  ```
+
+  **`@atlassian/preview-panels-api`** — the opened panel config takes the same `maxWidth`:
+
+  ```tsx
+  import { usePreviewPanelsActions } from '@atlassian/preview-panels-api';
+
+  const { open } = usePreviewPanelsActions();
+
+  open({
+  	panel: {
+  		id: 'issue-123',
+  		type: 'issue',
+  		product: 'jira',
+  		content: () => <IssuePreview />,
+  		maxWidth: '70vw',
+  	},
+  });
+  ```
+
+  **`@atlassian/preview-panel-global-objects`** — `useGlobalObjectPreviewPanels` accepts a
+  `maxWidth` option that it forwards onto the panel it opens, so global-object preview panels
+  (Confluence page, goals, teams, CMDB object, etc.) share the same wider bound. Omitting it keeps
+  the default cap:
+
+  ```tsx
+  const previewPanels = useGlobalObjectPreviewPanels('jira', cloudId, { maxWidth: '70vw' });
+  ```
+
+## 10.7.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.7.0
 
 ### Minor Changes

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

@@ -20,7 +20,7 @@ var _reactDom = require("react-dom");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _blockDraggingToIframes = require("@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes");
@@ -173,7 +173,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     rangeInputBounds = _useState4[0],
     setRangeInputBounds = _useState4[1];
-  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
 
   /**
    * This is a temporary workaround to enable the `SideNavPanelSplitter` component

package/dist/cjs/ui/page-layout/panel-splitter/side-nav-panel-splitter.js

@@ -9,7 +9,7 @@ exports.SideNavPanelSplitter = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _useToggleSideNav = require("../side-nav/use-toggle-side-nav");
@@ -33,7 +33,7 @@ _constants.openLayerObserverTopNavStartNamespace, _constants.openLayerObserverTo
  */
 function useHasOpenPopupsInSideNavOrTopNav() {
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
   // Setting the initial state to false, as it is unlikely that there would be any open popups when the app starts.
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

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

@@ -67,7 +67,8 @@ function Panel(_ref) {
     providedId = _ref.id,
     xcss = _ref.xcss,
     _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
+    maxWidth = _ref.maxWidth;
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
@@ -166,20 +167,23 @@ function Panel(_ref) {
     var _sideNavRef$current$o, _sideNavRef$current;
     var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
-     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     * By default the panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
      *
      * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     *
+     * Consumers can opt in to a larger maximum via the `maxWidth` prop.
      */
-    var maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    var defaultMaxWidth = "".concat(Math.round((window.innerWidth - sideNavWidth) / 2), "px");
     return {
       min: "".concat(minWidth, "px"),
-      max: "".concat(maxWidth, "px")
+      max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth
     };
-  }, [minWidth, sideNavRef]);
+  }, [maxWidth, minWidth, sideNavRef]);
   var panelWidthSlotBounds = {
     min: "".concat(minWidth, "px"),
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
-    max: "round(nearest, calc((100vw - var(".concat(_constants.sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
+    // Consumers can opt in to a larger maximum via the `maxWidth` prop.
+    max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "round(nearest, calc((100vw - var(".concat(_constants.sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
   };
   var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({

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

@@ -10,7 +10,7 @@ exports.gridRootId = void 0;
 require("./root.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _openLayerObserver = require("@atlaskit/layering/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");

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

@@ -19,7 +19,8 @@ var _reactDom = require("react-dom");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
+var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _responsive = require("@atlaskit/primitives/responsive");
@@ -242,7 +243,7 @@ function SideNavInternal(_ref) {
   var toggleButtonElement = (0, _react.useContext)(_sideNavToggleButtonElement.SideNavToggleButtonElement);
   var topNavStartElement = (0, _react.useContext)(_topNavStartElement.TopNavStartElement);
   var devTimeOnlyAttributes = {};
-  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
   var flyoutStateRef = (0, _react.useRef)({
     type: 'not-active'
   });
@@ -852,7 +853,7 @@ function SideNav(_ref9) {
     onPeekEnd = _ref9.onPeekEnd,
     canToggleWithShortcut = _ref9.canToggleWithShortcut,
     id = _ref9.id;
-  return /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+  return /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverSideNavNamespace
   }, /*#__PURE__*/_react.default.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,

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

@@ -16,7 +16,7 @@ var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _iconButton = require("../../top-nav-items/themed/icon-button");
 var _sideNavToggleButtonAttachRef = require("./side-nav-toggle-button-attach-ref");
@@ -101,7 +101,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   });
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded

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

@@ -8,7 +8,7 @@ exports.useSideNavToggleKeyboardShortcut = useSideNavToggleKeyboardShortcut;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
 var _useToggleSideNav = require("./use-toggle-side-nav");
@@ -18,7 +18,7 @@ var _useToggleSideNav = require("./use-toggle-side-nav");
 function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
   var toggleVisibilityByShortcut = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'keyboard'
   });

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

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _list = require("../../../components/list");
@@ -86,7 +86,7 @@ function TopNavEnd(_ref) {
         value: false
       }, /*#__PURE__*/_react.default.createElement(_list.List, {
         xcss: (0, _react2.cx)(listStyles.root, listStyles.popupContainer)
-      }, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+      }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
         namespace: _constants.openLayerObserverTopNavEndNamespace
       }, children)));
     },
@@ -103,7 +103,7 @@ function TopNavEnd(_ref) {
     }
   }) : /*#__PURE__*/_react.default.createElement(_list.List, {
     xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
-  }, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavEndNamespace
   }, children)));
 }

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

@@ -9,7 +9,7 @@ exports.TopNavMiddle = TopNavMiddle;
 require("./top-nav-middle.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
 var _constants = require("../constants");
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"
@@ -27,7 +27,7 @@ function TopNavMiddle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.root])
-  }, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavMiddleNamespace
   }, children));
 }

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js

@@ -12,7 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartAttachRef = require("../../../context/top-nav-start/top-nav-start-attach-ref");
@@ -145,7 +145,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
     ref: ref,
     "data-testid": testId,
     className: (0, _runtime.ax)([innerStyles.root, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
-  }, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavStartNamespace
   }, children)));
 });

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

@@ -9,7 +9,7 @@ import { createPortal } from 'react-dom';
 import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';

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

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import invariant from 'tiny-invariant';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { openLayerObserverSideNavNamespace, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavPanelSplitterId } from '../constants';
 import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';

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

@@ -52,7 +52,8 @@ export function Panel({
   testId,
   id: providedId,
   xcss,
-  hasBorder = true
+  hasBorder = true,
+  maxWidth
 }) {
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
@@ -148,20 +149,23 @@ export function Panel({
     var _sideNavRef$current$o, _sideNavRef$current;
     const sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
-     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     * By default the panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
      *
      * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     *
+     * Consumers can opt in to a larger maximum via the `maxWidth` prop.
      */
-    const maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    const defaultMaxWidth = `${Math.round((window.innerWidth - sideNavWidth) / 2)}px`;
     return {
       min: `${minWidth}px`,
-      max: `${maxWidth}px`
+      max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth
     };
-  }, [minWidth, sideNavRef]);
+  }, [maxWidth, minWidth, sideNavRef]);
   const panelWidthSlotBounds = {
     min: `${minWidth}px`,
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
-    max: `round(nearest, calc((100vw - var(${sideNavLiveWidthVar}, 0px)) / 2), 1px)`
+    // Consumers can opt in to a larger maximum via the `maxWidth` prop.
+    max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : `round(nearest, calc((100vw - var(${sideNavLiveWidthVar}, 0px)) / 2), 1px)`
   };
   const panelVariableWidth = `clamp(${panelWidthSlotBounds.min}, ${width}px, ${panelWidthSlotBounds.max})`;
   useResizingWidthCssVarOnRootElement({

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

@@ -2,7 +2,7 @@
 import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
-import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserver } from '@atlaskit/layering/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';

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

@@ -8,7 +8,8 @@ import { flushSync } from 'react-dom';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled

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

@@ -6,7 +6,7 @@ import { bind } from 'bind-event-listener';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';

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

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import Popup from '@atlaskit/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 import { List } from '../../../components/list';

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

@@ -2,7 +2,7 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import { openLayerObserverTopNavMiddleNamespace } from '../constants';
 const styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js

@@ -3,7 +3,7 @@ import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-attach-ref';

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

@@ -15,7 +15,7 @@ import { createPortal } from 'react-dom';
 import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useContext, useEffect, useState } from 'react';
 import invariant from 'tiny-invariant';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { openLayerObserverSideNavNamespace, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavPanelSplitterId } from '../constants';
 import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';

package/dist/esm/ui/page-layout/panel.js

@@ -58,7 +58,8 @@ export function Panel(_ref) {
     providedId = _ref.id,
     xcss = _ref.xcss,
     _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
+    maxWidth = _ref.maxWidth;
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var id = useLayoutId({
     providedId: providedId
@@ -157,20 +158,23 @@ export function Panel(_ref) {
     var _sideNavRef$current$o, _sideNavRef$current;
     var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
-     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     * By default the panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
      *
      * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     *
+     * Consumers can opt in to a larger maximum via the `maxWidth` prop.
      */
-    var maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    var defaultMaxWidth = "".concat(Math.round((window.innerWidth - sideNavWidth) / 2), "px");
     return {
       min: "".concat(minWidth, "px"),
-      max: "".concat(maxWidth, "px")
+      max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth
     };
-  }, [minWidth, sideNavRef]);
+  }, [maxWidth, minWidth, sideNavRef]);
   var panelWidthSlotBounds = {
     min: "".concat(minWidth, "px"),
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
-    max: "round(nearest, calc((100vw - var(".concat(sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
+    // Consumers can opt in to a larger maximum via the `maxWidth` prop.
+    max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "round(nearest, calc((100vw - var(".concat(sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
   };
   var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
   useResizingWidthCssVarOnRootElement({

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

@@ -2,7 +2,7 @@
 import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
-import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserver } from '@atlaskit/layering/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';

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

@@ -12,7 +12,8 @@ import { flushSync } from 'react-dom';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled

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

@@ -10,7 +10,7 @@ import { bind } from 'bind-event-listener';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';

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

@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import Popup from '@atlaskit/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 import { List } from '../../../components/list';

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

@@ -2,7 +2,7 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import { openLayerObserverTopNavMiddleNamespace } from '../constants';
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"

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

@@ -4,7 +4,7 @@ import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-attach-ref';

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

@@ -1,4 +1,5 @@
 import type { StrictXCSSProp } from '@atlaskit/css';
+import type { ResizeBound } from './panel-splitter/types';
 import type { CommonSlotProps } from './types';
 /**
  * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
@@ -7,7 +8,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
  */
-export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
+export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, maxWidth, }: CommonSlotProps & {
     /**
      * The content of the layout area.
      */
@@ -25,6 +26,18 @@ export declare function Panel({ children, defaultWidth: defaultWidthProp, label,
      * in which case `400px` will be used as the minimum resizing width instead.
      */
     defaultWidth?: number;
+    /**
+     * Opt-in override for the maximum width the panel can be resized to, applied to both the rendered
+     * width and the resize bounds (mouse and keyboard).
+     *
+     * When omitted, the panel defaults to half the viewport width (after removing the sidebar width),
+     * which keeps it from growing larger than the page content. Provide a `vw` or `px` value (e.g.
+     * `'70vw'`) to allow a wider panel.
+     *
+     * This is currently used by Jira's Issue Navigator native issue preview panel; other consumers
+     * should leave it unset to keep the default cap.
+     */
+    maxWidth?: ResizeBound;
     /**
      * Bounded style overrides.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.7.0",
+	"version": "10.8.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -60,21 +60,21 @@
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^37.1.0",
-		"@atlaskit/layering": "^4.1.0",
+		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/motion": "^7.5.0",
-		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/popup": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
-		"@atlaskit/primitives": "^22.0.0",
+		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
-		"@atlaskit/tokens": "^16.1.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.22.2",
+		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",
 		"raf-schd": "^4.0.3",
 		"tiny-invariant": "^1.2.0"
@@ -108,7 +108,7 @@
 		"@atlaskit/skeleton": "^4.2.0",
 		"@atlaskit/spotlight": "^3.0.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/top-layer": "^1.8.0",
+		"@atlaskit/top-layer": "^1.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@atlassian/gemini": "^1.51.0",
 		"@atlassian/search-dialog": "^10.5.0",