@atlaskit/navigation-system 11.3.4 → 11.4.0

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

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

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

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

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

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

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

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

package/layout/panel-layout/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "11.3.4",
+	"version": "11.4.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"license": "Apache-2.0",
@@ -74,7 +74,7 @@
 		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.6.0",
-		"@atlaskit/tokens": "^20.6.0",
+		"@atlaskit/tokens": "^20.7.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/top-layer": "^6.6.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -126,10 +126,10 @@
 		"@atlaskit/textfield": "^10.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/gemini": "^1.54.0",
-		"@atlassian/panel-system": "^1.15.0",
+		"@atlassian/panel-system": "^2.0.0",
 		"@atlassian/react-async": "^0.23.0",
 		"@atlassian/react-entrypoint": "^1.1.0",
-		"@atlassian/search-dialog": "^10.23.0",
+		"@atlassian/search-dialog": "^10.24.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
 		"@atlassian/testing-library": "^0.12.0",

package/constellation/layout/images/layout-example-topNav-2-dark.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c86f8b218e2a27b050cfac8ae5959a379a8ee630a71e7a9dbdda5aedaa2dbf52
-size 6612

package/constellation/layout/images/layout-example-topNav-2-light.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c1721f7a57c1cc503017a3113a10a49e8d385830604de308ecf7cf8a6d666f06
-size 6525