@atlaskit/navigation-system 8.2.0 → 9.1.0

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

@@ -9,7 +9,6 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
@@ -339,23 +338,14 @@ function SideNavInternal({
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    if (fg('navx-4418-fix-effect-state-updates-in-gsn')) {
-      startTransition(() => {
-        setSideNavState({
-          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-          mobile: 'collapsed',
-          flyout: 'closed',
-          lastTrigger: null
-        });
-      });
-    } else {
+    startTransition(() => {
       setSideNavState({
         desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
         mobile: 'collapsed',
         flyout: 'closed',
         lastTrigger: null
       });
-    }
+    });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   const handleExpand = useCallback(({
     screen,

package/dist/esm/components/skip-links/skip-link.js

@@ -58,7 +58,6 @@ function focusElement(element) {
     focusVisible: true
   });
 }
-
 /**
  * A link that moves current tab position to a different element
  *

package/dist/esm/components/skip-links/skip-links-container.compiled.css

@@ -1,12 +1,8 @@
-._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
-._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -19,7 +15,6 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
-._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/esm/components/skip-links/skip-links-container.js

@@ -10,13 +10,10 @@ import { useMemo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
+import { SkipLinksPopup } from './skip-links-popup';
 var styles = {
-  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
-  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
-  label: "_11c8i4vh _1rjcu2gc _syazazsu",
-  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
-  skipLinkListOld: "_zulp1b66"
+  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
 };
 
 /**
@@ -87,10 +84,11 @@ var isOnlyWhitespaceRegex = /^\s*$/;
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
 export function SkipLinksContainer(_ref) {
   var label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId,
     links = _ref.links;
   var sortedLinks = useMemo(function () {
@@ -100,18 +98,23 @@ export function SkipLinksContainer(_ref) {
     return null;
   }
   var isEmptyLabel = isOnlyWhitespaceRegex.test(label);
+  if (fg('platform_dst_nav4_skip_link_a11y_1')) {
+    return /*#__PURE__*/React.createElement(SkipLinksPopup, {
+      label: label,
+      triggerLabel: triggerLabel,
+      testId: testId,
+      links: sortedLinks
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    className: ax([styles.root, fg('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
-  }, !isEmptyLabel && (fg('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
-    className: ax([styles.label])
-  }, label) : /*#__PURE__*/React.createElement(Text, {
+    className: ax([styles.root])
+  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label)), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
+  }, label), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

package/dist/esm/components/skip-links/skip-links-popup.compiled.css

@@ -0,0 +1,22 @@
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1dqoglyw{border-style:none}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._152tutpp{inset-block-start:var(--ds-space-150,9pt)}
+._1e02utpp{inset-inline-start:var(--ds-space-150,9pt)}
+._1e0c1txw{display:flex}
+._1pby1mrw{z-index:-1}
+._1pbyjh3g{z-index:calc(infinity)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1x8w11lx{list-style-position:outside}
+._2lx21bp4{flex-direction:column}
+._2mzuglyw{list-style-type:none}
+._4ojojh3g:has(:focus-visible){z-index:calc(infinity)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._c8j0kb7n:has(:focus-visible){opacity:1}
+._kqsw1n9t{position:fixed}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._t9ecz6y5{transform:translateY(-100%)}
+._tzy4idpf{opacity:0}

package/dist/esm/components/skip-links/skip-links-popup.js

@@ -0,0 +1,115 @@
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./skip-links-popup.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useId, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import Button from '@atlaskit/button/new';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import Popup from '@atlaskit/popup';
+import { SkipLink } from './skip-link';
+var contentStyles = {
+  root: "_1rjcu2gc _18zrpxbi _1e0c1txw _2lx21bp4 _1pbyjh3g",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu"
+};
+var triggerStyles = {
+  root: "_2rko12b0 _1dqoglyw _kqsw1n9t _1e02utpp _152tutpp _1pby1mrw _tzy4idpf _bfhk1bhr _4ojojh3g _c8j0kb7n",
+  isOpen: "_tzy4idpf _t9ecz6y5"
+};
+var popupOffset = [0, 0];
+
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+export function SkipLinksPopup(_ref) {
+  var title = _ref.label,
+    triggerLabel = _ref.triggerLabel,
+    testId = _ref.testId,
+    links = _ref.links;
+  var titleId = useId();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var triggerRef = useRef(null);
+  var openPopup = useCallback(function () {
+    setIsOpen(true);
+  }, []);
+
+  /**
+   * Closes the popup.
+   *
+   * Uses `flushSync` to avoid issues with focus management.
+   * This ensures the popup's focus lock is fully released by the time skip links or our `onClose` try to move focus.
+   */
+  var closePopup = useCallback(function () {
+    flushSync(function () {
+      setIsOpen(false);
+    });
+  }, []);
+
+  /**
+   * Restores focus to the trigger on close, if it hasn't moved to another element, such as when Esc is pressed instead of a skip link.
+   *
+   * We need this because using the standard `shouldReturnFocus` on the popup would break the skip link focus behaviour,
+   * as focus would always move back to the trigger.
+   */
+  var onClose = useCallback(function () {
+    closePopup();
+
+    // Focus on the body implies a skip link was not clicked
+    if (document.activeElement === document.body) {
+      var _triggerRef$current;
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    }
+  }, [closePopup]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom-start",
+    shouldRenderToParent: true,
+    shouldReturnFocus: false,
+    role: "dialog",
+    titleId: titleId,
+    testId: testId ? "".concat(testId, "--skip-links-container") : undefined,
+    offset: popupOffset,
+    content: function content() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: ax([contentStyles.root])
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+        id: titleId,
+        className: ax([contentStyles.label])
+      }, title), /*#__PURE__*/React.createElement("ol", {
+        className: ax([contentStyles.skipLinkList])
+      }, links.map(function (_ref2) {
+        var id = _ref2.id,
+          label = _ref2.label,
+          _onBeforeNavigate = _ref2.onBeforeNavigate;
+        return /*#__PURE__*/React.createElement(SkipLink, {
+          key: id,
+          id: id,
+          onBeforeNavigate: function onBeforeNavigate() {
+            closePopup();
+            _onBeforeNavigate === null || _onBeforeNavigate === void 0 || _onBeforeNavigate();
+          }
+        }, label);
+      })));
+    },
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: ax([triggerStyles.root, isOpen && triggerStyles.isOpen])
+      }, /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+        ref: mergeRefs([triggerProps.ref, triggerRef]),
+        appearance: "primary",
+        isSelected: isOpen,
+        testId: testId ? "".concat(testId, "--skip-links-trigger") : undefined,
+        onClick: openPopup
+      }), triggerLabel));
+    }
+  });
+}

package/dist/esm/context/skip-links/skip-links-provider.js

@@ -36,6 +36,7 @@ var getByDomOrderSortFunction = function getByDomOrderSortFunction() {
 export function SkipLinksProvider(_ref) {
   var children = _ref.children,
     label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -75,6 +76,7 @@ export function SkipLinksProvider(_ref) {
     value: contextValue
   }, /*#__PURE__*/React.createElement(SkipLinksContainer, {
     label: label,
+    triggerLabel: triggerLabel,
     testId: testId,
     links: links
   }), children);

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

@@ -27,12 +27,14 @@ export function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    skipLinksLabel = _ref.skipLinksLabel,
+    _ref$skipLinksLabel = _ref.skipLinksLabel,
+    skipLinksLabel = _ref$skipLinksLabel === void 0 ? fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:' : _ref$skipLinksLabel,
+    _ref$skipLinksTrigger = _ref.skipLinksTriggerLabel,
+    skipLinksTriggerLabel = _ref$skipLinksTrigger === void 0 ? 'Skip to' : _ref$skipLinksTrigger,
     testId = _ref.testId,
     defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
-  var resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -54,7 +56,8 @@ export function Root(_ref) {
   }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
-    label: resolvedSkipLinksLabel,
+    label: skipLinksLabel,
+    triggerLabel: skipLinksTriggerLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

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

@@ -13,7 +13,6 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
@@ -348,23 +347,14 @@ function SideNavInternal(_ref) {
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    if (fg('navx-4418-fix-effect-state-updates-in-gsn')) {
-      startTransition(function () {
-        setSideNavState({
-          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-          mobile: 'collapsed',
-          flyout: 'closed',
-          lastTrigger: null
-        });
-      });
-    } else {
+    startTransition(function () {
       setSideNavState({
         desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
         mobile: 'collapsed',
         flyout: 'closed',
         lastTrigger: null
       });
-    }
+    });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = useCallback(function (_ref2) {
     var screen = _ref2.screen,

package/dist/types/components/skip-links/skip-link.d.ts

@@ -4,13 +4,15 @@
  */
 import { type ReactNode } from 'react';
 import type { SkipLinkData } from '../../context/skip-links/types';
+type SkipLinkProps = {
+    id: string;
+    children: ReactNode;
+    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
+};
 /**
  * A link that moves current tab position to a different element
  *
  * This component is rendered internally and is not exported publicly.
  */
-export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
-    id: string;
-    children: ReactNode;
-    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
-}) => JSX.Element;
+export declare const SkipLink: ({ id, children, onBeforeNavigate }: SkipLinkProps) => JSX.Element;
+export {};

package/dist/types/components/skip-links/skip-links-container.d.ts

@@ -8,10 +8,11 @@ import { type SkipLinkData } from '../../context/skip-links/types';
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
-export declare function SkipLinksContainer({ label, testId, links, }: {
+export declare function SkipLinksContainer({ label, triggerLabel, testId, links, }: {
     label: string;
+    triggerLabel: string;
     testId?: string;
     links: Array<SkipLinkData>;
 }): JSX.Element | null;

package/dist/types/components/skip-links/skip-links-popup.d.ts

@@ -0,0 +1,11 @@
+import { type SkipLinkData } from '../../context/skip-links/types';
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+export declare function SkipLinksPopup({ label: title, triggerLabel, testId, links, }: {
+    label: string;
+    triggerLabel: string;
+    testId?: string;
+    links: Array<SkipLinkData>;
+}): JSX.Element;

package/dist/types/context/skip-links/skip-links-provider.d.ts

@@ -5,8 +5,9 @@ import React, { type ReactNode } from 'react';
  * - Provides the context to register/unregister skip links
  * - Renders the skip links container
  */
-export declare function SkipLinksProvider({ children, label, testId, }: {
+export declare function SkipLinksProvider({ children, label, triggerLabel, testId, }: {
     children: ReactNode;
     label: string;
+    triggerLabel: string;
     testId?: string;
 }): React.JSX.Element;

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

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * 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
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, skipLinksTriggerLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -31,6 +31,10 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * The header text for the skip links container element.
      */
     skipLinksLabel?: string;
+    /**
+     * The label for the skip links button that opens the skip links popup.
+     */
+    skipLinksTriggerLabel?: string;
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */

package/dist/types-ts4.5/components/skip-links/skip-link.d.ts

@@ -4,13 +4,15 @@
  */
 import { type ReactNode } from 'react';
 import type { SkipLinkData } from '../../context/skip-links/types';
+type SkipLinkProps = {
+    id: string;
+    children: ReactNode;
+    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
+};
 /**
  * A link that moves current tab position to a different element
  *
  * This component is rendered internally and is not exported publicly.
  */
-export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
-    id: string;
-    children: ReactNode;
-    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
-}) => JSX.Element;
+export declare const SkipLink: ({ id, children, onBeforeNavigate }: SkipLinkProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/components/skip-links/skip-links-container.d.ts

@@ -8,10 +8,11 @@ import { type SkipLinkData } from '../../context/skip-links/types';
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
-export declare function SkipLinksContainer({ label, testId, links, }: {
+export declare function SkipLinksContainer({ label, triggerLabel, testId, links, }: {
     label: string;
+    triggerLabel: string;
     testId?: string;
     links: Array<SkipLinkData>;
 }): JSX.Element | null;

package/dist/types-ts4.5/components/skip-links/skip-links-popup.d.ts

@@ -0,0 +1,11 @@
+import { type SkipLinkData } from '../../context/skip-links/types';
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+export declare function SkipLinksPopup({ label: title, triggerLabel, testId, links, }: {
+    label: string;
+    triggerLabel: string;
+    testId?: string;
+    links: Array<SkipLinkData>;
+}): JSX.Element;

package/dist/types-ts4.5/context/skip-links/skip-links-provider.d.ts

@@ -5,8 +5,9 @@ import React, { type ReactNode } from 'react';
  * - Provides the context to register/unregister skip links
  * - Renders the skip links container
  */
-export declare function SkipLinksProvider({ children, label, testId, }: {
+export declare function SkipLinksProvider({ children, label, triggerLabel, testId, }: {
     children: ReactNode;
     label: string;
+    triggerLabel: string;
     testId?: string;
 }): React.JSX.Element;

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

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * 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
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, skipLinksTriggerLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -31,6 +31,10 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * The header text for the skip links container element.
      */
     skipLinksLabel?: string;
+    /**
+     * The label for the skip links button that opens the skip links popup.
+     */
+    skipLinksTriggerLabel?: string;
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "8.2.0",
+	"version": "9.1.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,22 +72,22 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/app-provider": "^4.3.0",
-		"@atlaskit/avatar": "^25.13.0",
+		"@atlaskit/avatar": "^25.14.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/icon": "^34.3.0",
 		"@atlaskit/layering": "^3.7.0",
-		"@atlaskit/logo": "^20.0.0",
+		"@atlaskit/logo": "^20.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
-		"@atlaskit/popup": "^4.16.0",
+		"@atlaskit/popup": "^4.17.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.2.0",
-		"@atlaskit/visually-hidden": "^3.0.0",
+		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -103,17 +103,17 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/badge": "^18.6.0",
-		"@atlaskit/banner": "^14.0.0",
+		"@atlaskit/banner": "^14.1.0",
 		"@atlaskit/breadcrumbs": "^16.1.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/lozenge": "^13.7.0",
+		"@atlaskit/lozenge": "^13.8.0",
 		"@atlaskit/menu": "^8.5.0",
 		"@atlaskit/modal-dialog": "^14.18.0",
 		"@atlaskit/onboarding": "^14.6.0",
-		"@atlaskit/page-header": "^12.1.0",
+		"@atlaskit/page-header": "^12.2.0",
 		"@atlaskit/page-layout": "^4.3.0",
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
@@ -123,7 +123,7 @@
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/gemini": "^1.44.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
-		"@atlassian/search-dialog": "^10.0.0",
+		"@atlassian/search-dialog": "^10.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.5.0",
@@ -175,9 +175,6 @@
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
 		},
-		"navx-4418-fix-effect-state-updates-in-gsn": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_custom_theming_fhs_1": {
 			"type": "boolean"
 		},

package/theming/color-utils/parse-hex/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/navigation-system/theming/color-utils/parse-hex",
+  "main": "../../../dist/cjs/entry-points/theming/color-utils/parse-hex.js",
+  "module": "../../../dist/esm/entry-points/theming/color-utils/parse-hex.js",
+  "module:es2019": "../../../dist/es2019/entry-points/theming/color-utils/parse-hex.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../../dist/types/entry-points/theming/color-utils/parse-hex.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../../dist/types-ts4.5/entry-points/theming/color-utils/parse-hex.d.ts"
+      ]
+    }
+  }
+}

package/theming/color-utils/parse-hsl/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/navigation-system/theming/color-utils/parse-hsl",
+  "main": "../../../dist/cjs/entry-points/theming/color-utils/parse-hsl.js",
+  "module": "../../../dist/esm/entry-points/theming/color-utils/parse-hsl.js",
+  "module:es2019": "../../../dist/es2019/entry-points/theming/color-utils/parse-hsl.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../../dist/types/entry-points/theming/color-utils/parse-hsl.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../../dist/types-ts4.5/entry-points/theming/color-utils/parse-hsl.d.ts"
+      ]
+    }
+  }
+}

package/theming/color-utils/parse-rgb/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/navigation-system/theming/color-utils/parse-rgb",
+  "main": "../../../dist/cjs/entry-points/theming/color-utils/parse-rgb.js",
+  "module": "../../../dist/esm/entry-points/theming/color-utils/parse-rgb.js",
+  "module:es2019": "../../../dist/es2019/entry-points/theming/color-utils/parse-rgb.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../../dist/types/entry-points/theming/color-utils/parse-rgb.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../../dist/types-ts4.5/entry-points/theming/color-utils/parse-rgb.d.ts"
+      ]
+    }
+  }
+}