@atlaskit/navigation-system 10.7.1 → 10.8.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @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

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/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/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/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.1",
+	"version": "10.8.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -67,10 +67,10 @@
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/popup": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
-		"@atlaskit/primitives": "^22.1.0",
+		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
-		"@atlaskit/tokens": "^16.2.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",