@atlaskit/navigation-system 11.3.1 → 11.3.3

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

@@ -26,6 +26,7 @@ import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { convertResizeBoundToPixels } from '../panel-splitter/convert-resize-bound-to-pixels';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
 import { resolveLayoutWidth } from '../resolve-layout-width';
+import { gridRootChatFitId, gridRootId } from '../root';
 import { useLayoutAreaSizing } from '../use-layout-area-sizing';
 import { useLayoutId } from '../use-layout-id';
 import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-var-on-root-element';
@@ -248,6 +249,8 @@ function SideNavInternal(_ref) {
       }
     }),
     managedSizing = _useLayoutAreaSizing.state,
+    isManaged = _useLayoutAreaSizing.isManaged,
+    prepareResize = _useLayoutAreaSizing.prepareResize,
     getManagedResizeBounds = _useLayoutAreaSizing.getResizeBounds,
     startResize = _useLayoutAreaSizing.startResize,
     resize = _useLayoutAreaSizing.resize,
@@ -345,6 +348,9 @@ function SideNavInternal(_ref) {
     type: 'not-active'
   });
   var isFlyoutVisible = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open';
+  // Flyouts, including their close animation, already have overlay placement.
+  // The CSS-first inline allocation must not override it with an ID selector.
+  var shouldApplyUnmanagedSizing = !managedSizing && (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) !== 'open' && (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) !== 'triggered-animate-close';
   var isExpandedOnDesktopRef = useStableRef(isExpandedOnDesktop);
   var hasPeekStartedRef = useRef(false);
   var onPeekStartRef = useStableRef(onPeekStart);
@@ -884,7 +890,11 @@ function SideNavInternal(_ref) {
     ref: mergedRef,
     "data-testid": testId,
     className: ax([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isMotionUpliftEnabled && styles.flyoutAnimateClosed])
-  }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+  }), isChatPanelLayoutEnabled &&
+  /*#__PURE__*/
+  // CSS reserves only the nav minimum for chat's fit decision, before effects or lazy loading.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+  React.createElement("style", null, "\n#".concat(gridRootChatFitId, " { --n_fitNav: 0px; }\n").concat(shouldApplyUnmanagedSizing ? "#".concat(gridRootId, " nav[data-layout-slot] { grid-area: main / aside / aside / aside; width: min(90%, ").concat(clampedWidth, "); }") : '', "\n@media (min-width: 64rem) {\n  @container navigation-main-space (min-width: ").concat(minWidth, ") {\n    #").concat(gridRootChatFitId, " { --n_fitNav: ").concat(isExpandedOnDesktop ? minWidth : '0px', "; }\n    ").concat(shouldApplyUnmanagedSizing ? "#".concat(gridRootId, " nav[data-layout-slot] { grid-area: side-nav; width: min(").concat(clampedWidth, ", calc(100cqw + var(--n_fitNav) - var(--n_chatTrack, 0px))); }") : '', "\n  }\n}\n")), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: '@media (min-width: 64rem)',
@@ -904,8 +914,9 @@ function SideNavInternal(_ref) {
     panelRef: navRef,
     panelWidth: renderedWidth,
     onCompleteResize: onCompleteResize,
-    onResizeStartInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeStartInternal : undefined,
-    onResizeInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeInternal : undefined,
+    onResizeStartInternal: isChatPanelLayoutEnabled && isManaged ? onResizeStartInternal : undefined,
+    onResizeInternal: isChatPanelLayoutEnabled && isManaged ? onResizeInternal : undefined,
+    prepareResize: isChatPanelLayoutEnabled ? prepareResize : undefined,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar
     // Not resizable when in peek (flyout) mode.

package/dist/esm/ui/page-layout/use-css-layout-area-states.js

@@ -0,0 +1,110 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
+import { useEffect, useState } from 'react';
+import { bindAll } from 'bind-event-listener';
+/**
+ * Observe CSS's responsive modes without loading the drag allocator or publishing
+ * measured widths back into CSS. Observe the host and independent occupied tracks;
+ * managed panels, TopNav and Banner are deliberately not observed during dragging.
+ */
+export function useCssLayoutAreaStates(layoutRef, revision, isEnabled) {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    modes = _useState2[0],
+    setModes = _useState2[1];
+  useEffect(function () {
+    var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (!root || !isEnabled) {
+      return;
+    }
+    var measure = function measure() {
+      var selectors = {
+        'side-nav': ':scope > nav[data-layout-slot]',
+        panel: '[data-layout-with-panel-slot]',
+        'chat-panel': ':scope > [data-layout-chat-panel]'
+      };
+      var next = {};
+      var _iterator = _createForOfIteratorHelper(['side-nav', 'panel', 'chat-panel']),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var area = _step.value;
+          var element = root.querySelector(selectors[area]);
+          if (element) {
+            next[area] = getComputedStyle(element).gridArea.split('/')[0].trim() === area ? 'inline' : 'overlay';
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setModes(function (previous) {
+        return ['side-nav', 'panel', 'chat-panel'].every(function (area) {
+          return previous[area] === next[area];
+        }) ? previous : next;
+      });
+    };
+    var widths = new Map();
+    var observer = new ResizeObserver(function (entries) {
+      var changed = false;
+      var _iterator2 = _createForOfIteratorHelper(entries),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var entry = _step2.value;
+          if (widths.get(entry.target) !== entry.contentRect.width) {
+            widths.set(entry.target, entry.contentRect.width);
+            changed = true;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      if (changed) {
+        measure();
+      }
+    });
+    var observeSlots = function observeSlots() {
+      observer.disconnect();
+      widths.clear();
+      var occupied = Array.from(root.children).filter(function (element) {
+        return element.matches('[data-layout-slot]:not(nav):not(header):not([role="main"]):not([data-layout-chat-panel])') && ['aside', 'ribbon', 'panel'].includes(getComputedStyle(element).gridArea.split('/')[0].trim());
+      });
+      for (var _i = 0, _arr = [root].concat(_toConsumableArray(occupied)); _i < _arr.length; _i++) {
+        var element = _arr[_i];
+        widths.set(element, element.getBoundingClientRect().width);
+        observer.observe(element);
+      }
+      measure();
+    };
+    observeSlots();
+    var mutations = new MutationObserver(observeSlots);
+    mutations.observe(root, {
+      childList: true
+    });
+    var queries = [window.matchMedia('(min-width: 40rem)'), window.matchMedia('(min-width: 64rem)')];
+    var unbind = [bindAll(window, [{
+      type: 'resize',
+      listener: measure
+    }])].concat(_toConsumableArray(queries.map(function (query) {
+      return bindAll(query, [{
+        type: 'change',
+        listener: measure
+      }]);
+    })));
+    return function () {
+      observer.disconnect();
+      mutations.disconnect();
+      unbind.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+  }, [isEnabled, layoutRef, revision]);
+  return modes;
+}

package/dist/esm/ui/page-layout/use-layout-area-sizing.js

@@ -62,6 +62,8 @@ export function useLayoutAreaSizing(_ref) {
     startResize: startResize,
     resize: resize,
     completeResize: completeResize,
-    getResizeBounds: getResizeBounds
+    getResizeBounds: getResizeBounds,
+    isManaged: context !== null,
+    prepareResize: context === null || context === void 0 ? void 0 : context.prepareResize
   };
 }

package/dist/types/ui/page-layout/calculate-layout-area-states.d.ts

@@ -1,5 +1,5 @@
-import type { LayoutArea, LayoutAreaAllocation, LayoutWidthBound, ResizeSession, StoredLayoutArea } from './layout-area-sizing-context';
-export declare function calculateLayoutAreaStates({ viewportWidth, layoutWidth, isChatPanelOverlay, isSideNavOverlay, occupiedWidth, mainMinWidth: mainMinWidthBound, areas, resizeSession, }: {
+import type { LayoutArea, LayoutAreaAllocation, LayoutAreaMode, LayoutWidthBound, ResizeSession, StoredLayoutArea } from './layout-area-sizing-context';
+export declare function calculateLayoutAreaStates({ viewportWidth, layoutWidth, isChatPanelOverlay, isSideNavOverlay, occupiedWidth, mainMinWidth: mainMinWidthBound, areas, resizeSession, initialModes, }: {
     viewportWidth: number;
     /**
      * Root's content width, excluding scrollbars, borders and padding.
@@ -17,4 +17,9 @@ export declare function calculateLayoutAreaStates({ viewportWidth, layoutWidth,
     mainMinWidth: LayoutWidthBound;
     areas: Partial<Record<LayoutArea, StoredLayoutArea>>;
     resizeSession?: ResizeSession | null;
+    /**
+     * The CSS-rendered modes during deferred activation. Bounds must describe the
+     * existing layout until the user actually resizes it.
+     */
+    initialModes?: Partial<Record<LayoutArea, LayoutAreaMode>>;
 }): Partial<Record<LayoutArea, LayoutAreaAllocation>>;

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

@@ -22,15 +22,21 @@ export type StoredLayoutArea = LayoutAreaConfig & {
         mode: LayoutAreaMode;
         width: number;
     };
-    openedAt?: number;
 };
 /**
- * Effective sibling widths held fixed during and after a user resize, until the
- * layout dimensions or configuration change. This is not a resize history.
+ * One resize transaction. Keep its starting widths for controlled rejection,
+ * and its resulting widths for synchronous or delayed acknowledgement.
  */
 export type ResizeSession = {
     area: LayoutArea;
     baselineWidths: Partial<Record<LayoutArea, number>>;
+    /**
+     * Overlay resizing changes only its surface width, not the inline layout modes.
+     * Retain these modes until a layout/configuration change ends the transaction.
+     */
+    overlayModes?: Partial<Record<LayoutArea, LayoutAreaMode>>;
+    completedWidth?: number;
+    completedWidths?: Partial<Record<LayoutArea, number>>;
 };
 export type LayoutAreaState = {
     mode: LayoutAreaMode;
@@ -44,6 +50,7 @@ export type LayoutAreaAllocation = LayoutAreaState & {
     };
 };
 export type LayoutAreaSizingContextValue = {
+    prepareResize?: () => Promise<boolean>;
     getResizeBounds: (area: LayoutArea) => ResizeBounds | undefined;
     registerArea: (area: LayoutArea, config: LayoutAreaConfig) => void;
     unregisterArea: (area: LayoutArea) => void;

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

@@ -1,4 +1,10 @@
 import React, { type ReactNode } from 'react';
+/**
+ * Stable, synchronous boundary for SSR content. The drag/cascade implementation
+ * is a sibling, not a replacement wrapper, so loading it cannot remount the app.
+ * CSS handles initial and responsive geometry; only splitter interaction requests
+ * the asynchronous chunk. The eager observer reads modes without changing widths.
+ */
 export declare function LayoutAreaSizingProvider({ children, layoutRef, }: {
     children: ReactNode;
     layoutRef?: React.RefObject<HTMLDivElement | null>;

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

@@ -0,0 +1,8 @@
+import React, { type ReactNode } from 'react';
+import { type LayoutArea, type LayoutAreaState, type LayoutAreaSizingContextValue } from './layout-area-sizing-context';
+export declare function LayoutAreaSizingRuntime({ children, layoutRef, onReady, onUpdate, }: {
+    children?: ReactNode;
+    layoutRef?: React.RefObject<HTMLDivElement | null>;
+    onReady?: (actions: LayoutAreaSizingContextValue | null) => void;
+    onUpdate?: (states: Partial<Record<LayoutArea, LayoutAreaState>>) => void;
+}): JSX.Element;

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

@@ -32,6 +32,10 @@ export type PanelSplitterContextType = {
      * Called with the unconstrained live pointer width while dragging.
      */
     onResizeInternal?: (newWidth: number) => void;
+    /**
+     * Loads the optional sizing engine before committing an interaction.
+     */
+    prepareResize?: () => Promise<boolean>;
     /**
      * 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, onResizeStartInternal, onResizeInternal, getResizeBounds, resizingCssVar, panelRef, resizingElementRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, onResizeStartInternal, onResizeInternal, prepareResize, getResizeBounds, resizingCssVar, panelRef, resizingElementRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

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

@@ -5,6 +5,8 @@
 import React from 'react';
 import type { StrictXCSSProp } from '@atlaskit/css';
 export declare const gridRootId = "unsafe-design-system-page-layout-root";
+export declare const gridRootFitId: string;
+export declare const gridRootChatFitId: string;
 /**
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container

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

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+import type { LayoutArea, LayoutAreaMode } from './layout-area-sizing-context';
+/**
+ * Observe CSS's responsive modes without loading the drag allocator or publishing
+ * measured widths back into CSS. Observe the host and independent occupied tracks;
+ * managed panels, TopNav and Banner are deliberately not observed during dragging.
+ */
+export declare function useCssLayoutAreaStates(layoutRef: RefObject<HTMLDivElement | null> | undefined, revision: number, isEnabled: boolean): Partial<Record<LayoutArea, LayoutAreaMode>>;

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

@@ -4,6 +4,8 @@ export declare function useLayoutAreaSizing({ area, config, }: {
     area: LayoutArea;
     config: LayoutAreaConfig;
 }): {
+    isManaged: boolean;
+    prepareResize: (() => Promise<boolean>) | undefined;
     state: LayoutAreaState | undefined;
     getResizeBounds: () => ResizeBounds | undefined;
     startResize: (mode: LayoutAreaMode) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "11.3.1",
+	"version": "11.3.3",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"license": "Apache-2.0",
@@ -58,9 +58,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.6.0",
-		"@atlaskit/app-provider": "^8.1.0",
+		"@atlaskit/app-provider": "^8.2.0",
 		"@atlaskit/avatar": "^30.0.0",
-		"@atlaskit/button": "^25.4.0",
+		"@atlaskit/button": "^25.6.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^38.0.0",
@@ -73,7 +73,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
 		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/side-nav-items": "^2.5.0",
+		"@atlaskit/side-nav-items": "^2.6.0",
 		"@atlaskit/tokens": "^20.6.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -90,10 +90,12 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
+		"@af/react-unit-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/badge": "^22.0.0",
 		"@atlaskit/banner": "^15.3.0",
 		"@atlaskit/breadcrumbs": "^17.8.0",
+		"@atlaskit/docs": "^12.3.0",
 		"@atlaskit/dropdown-menu": "^21.0.0",
 		"@atlaskit/flag": "^19.0.0",
 		"@atlaskit/form": "^18.2.0",
@@ -110,6 +112,9 @@
 		"@atlaskit/page-layout": "^5.5.0",
 		"@atlaskit/popper": "^9.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
+		"@atlaskit/pragmatic-drag-and-drop-flourish": "^3.2.0",
+		"@atlaskit/pragmatic-drag-and-drop-live-region": "^2.1.0",
+		"@atlaskit/radio": "^10.2.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/select": "^23.1.0",
 		"@atlaskit/skeleton": "^4.4.0",
@@ -118,13 +123,13 @@
 		"@atlaskit/tag": "^17.0.0",
 		"@atlaskit/textarea": "^10.2.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/top-layer": "^6.3.0",
+		"@atlaskit/top-layer": "^6.5.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/gemini": "^1.54.0",
 		"@atlassian/panel-system": "^1.14.0",
 		"@atlassian/react-async": "^0.23.0",
 		"@atlassian/react-entrypoint": "^1.1.0",
-		"@atlassian/search-dialog": "^10.22.0",
+		"@atlassian/search-dialog": "^10.23.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
 		"@atlassian/testing-library": "^0.12.0",