@atlaskit/navigation-system 11.0.0 → 11.1.0

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

@@ -1,6 +1,6 @@
 import { type MutableRefObject } from 'react';
 import type { TooltipProps } from '@atlaskit/tooltip/types';
-import { type ResizeBounds } from './types';
+import { type ResizeBounds, type ResizeStartCallback } from './types';
 export type PanelSplitterContextType = {
     /**
      * An optional identifier for the panel splitter, which is attached to the `pragmatic-drag-and-drop` drag data.
@@ -10,6 +10,12 @@ export type PanelSplitterContextType = {
      * A ref to the page layout element that will be resized by the splitter.
      */
     panelRef: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * An optional additional element that receives the temporary resizing CSS variable.
+     *
+     * This is useful when an ancestor owns the layout track that contains the resized panel.
+     */
+    resizingElementRef?: MutableRefObject<HTMLDivElement | null>;
     /**
      * The "saved" width of the panel element. Used to calculate the new width of the panel when dragging.
      */
@@ -18,6 +24,14 @@ export type PanelSplitterContextType = {
      * Called when the user finishes resizing the panel. It should update the width of the panel element.
      */
     onCompleteResize: (newWidth: number) => void;
+    /**
+     * Called internally when pointer resizing starts, before the first live width is applied.
+     */
+    onResizeStartInternal?: ResizeStartCallback;
+    /**
+     * Called with the unconstrained live pointer width while dragging.
+     */
+    onResizeInternal?: (newWidth: number) => void;
     /**
      * The minimum and maximum bounds for resizing the panel.
      * The bounds can be provided as `px` or `vw` values.

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

@@ -25,4 +25,4 @@ export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalR
  *
  * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
  */
-export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, getResizeBounds, resizingCssVar, panelRef, resizingElementRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

package/dist/types/ui/page-layout/resolve-layout-width.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutWidthBound } from './layout-area-sizing-context';
+export declare function resolveLayoutWidth(bound: LayoutWidthBound, viewportWidth: number): number;

package/dist/types/ui/page-layout/side-nav/side-nav.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
+import type { ResizeBound } from '../panel-splitter/types';
 import type { CommonSlotProps } from '../types';
 import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {
@@ -39,13 +40,21 @@ type SideNavProps = CommonSlotProps & {
     /**
      * The default width of the side nav layout area.
      *
-     * It should be an integer between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
+     * It should be an integer greater than or equal to the minimum width.
      *
      * It is only used when the side nav is first mounted, but you should continuously update your
      * persisted state using the `onResizeEnd` callback of `PanelSplitter`, to ensure it is up to date
      * when the app is reloaded.
      */
     defaultWidth?: number;
+    /**
+     * Minimum width used when fitting the side nav inline.
+     */
+    minWidth?: ResizeBound;
+    /**
+     * Optional maximum width for both inline and overlay resizing.
+     */
+    maxWidth?: ResizeBound;
     /**
      * Called when the side nav is expanded.
      */
@@ -86,7 +95,7 @@ export declare const onPeekStartDelayMs = 500;
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
  */
-export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
+export declare function SideNav({ children, defaultCollapsed, defaultWidth, minWidth, maxWidth, testId, label, // Default value is defined in `SideNavInternal`
 skipLinkLabel, // Default value is defined in `SideNavInternal`
 onExpand, onCollapse, onPeekStart, onPeekEnd, canToggleWithShortcut, id, }: SideNavProps): JSX.Element;
 export {};

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

@@ -0,0 +1,12 @@
+import { type LayoutArea, type LayoutAreaConfig, type LayoutAreaMode, type LayoutAreaState } from './layout-area-sizing-context';
+import type { ResizeBounds } from './panel-splitter/types';
+export declare function useLayoutAreaSizing({ area, config, }: {
+    area: LayoutArea;
+    config: LayoutAreaConfig;
+}): {
+    state: LayoutAreaState | undefined;
+    getResizeBounds: () => ResizeBounds | undefined;
+    startResize: (mode: LayoutAreaMode) => void;
+    resize: (mode: LayoutAreaMode, width: number) => void;
+    completeResize: (mode: LayoutAreaMode, width: number) => void;
+};

package/dist/types/ui/page-layout/use-layout-main-sizing.d.ts

@@ -0,0 +1,2 @@
+import { type LayoutWidthBound } from './layout-area-sizing-context';
+export declare function useLayoutMainSizing(minWidth: LayoutWidthBound): void;

package/dist/types/ui/page-layout/use-occupied-layout-width.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Measures the existing Root slots that are not managed by the chat-layout allocator.
+ * Only count separate inline columns: Aside stacks below Main on mobile, and the
+ * legacy Panel spans other areas while overlaying. Read the grid rather than duplicating
+ * its responsive breakpoints. Border boxes include slot borders and live splitter widths.
+ */
+export declare function useOccupiedLayoutWidth(layoutRef?: RefObject<HTMLDivElement | null>): number;

package/layout/chat-panel/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/navigation-system/layout/chat-panel",
+  "main": "../../dist/cjs/entry-points/layout/chat-panel.js",
+  "module": "../../dist/esm/entry-points/layout/chat-panel.js",
+  "module:es2019": "../../dist/es2019/entry-points/layout/chat-panel.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/layout/chat-panel.d.ts"
+}

package/layout/layout-sizing/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/navigation-system/layout/layout-sizing",
+  "main": "../../dist/cjs/entry-points/layout/layout-sizing.js",
+  "module": "../../dist/esm/entry-points/layout/layout-sizing.js",
+  "module:es2019": "../../dist/es2019/entry-points/layout/layout-sizing.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/layout/layout-sizing.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "11.0.0",
+	"version": "11.1.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"license": "Apache-2.0",
@@ -69,7 +69,7 @@
 		"@atlaskit/motion": "^9.0.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/platform-feature-flags-react": "^1.2.0",
-		"@atlaskit/popup": "^8.0.0",
+		"@atlaskit/popup": "^8.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
@@ -119,6 +119,9 @@
 		"@atlaskit/top-layer": "^6.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/gemini": "^1.54.0",
+		"@atlassian/panel-system": "^1.12.0",
+		"@atlassian/react-async": "^0.23.0",
+		"@atlassian/react-entrypoint": "^1.1.0",
 		"@atlassian/search-dialog": "^10.18.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
@@ -127,9 +130,14 @@
 		"@axe-core/playwright": "^4.11.1",
 		"raf-stub": "^2.0.1",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"react-relay": "^20.1.1",
+		"relay-test-utils": "^20.1.1"
 	},
 	"platform-feature-flags": {
+		"platform-dst-chat-panel-layout": {
+			"type": "boolean"
+		},
 		"platform-dst-tokens-finesse": {
 			"type": "boolean"
 		},