@atlaskit/navigation-system 8.2.0 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlassian/navigation-system
 
+## 9.1.0
+
+### Minor Changes
+
+- [`c47d9797de1d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c47d9797de1d4) -
+  Skip links are now rendered inside of a popup. This change is behind the
+  `platform_dst_nav4_skip_link_a11y_1` feature gate.
+
+### Patch Changes
+
+- [`36a98dddcf5af`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36a98dddcf5af) -
+  Cleanup of feature gate navx-4418-fix-effect-state-updates-in-gsn (true)
+
+## 9.0.0
+
+### Major Changes
+
+- [`2d4e2aa315dc1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d4e2aa315dc1) -
+  Renamed the experimental theming entrypoints from `/experimental/*` to `/theming/*`. The
+  `/experimental/ribbon` entrypoint is unaffected.
+
+  Migration:
+  - `@atlaskit/navigation-system/experimental/top-nav-button` →
+    `@atlaskit/navigation-system/theming/top-nav-button`
+  - `@atlaskit/navigation-system/experimental/use-has-custom-theme` →
+    `@atlaskit/navigation-system/theming/use-has-custom-theme`
+  - `@atlaskit/navigation-system/experimental/use-legacy-search-theme` →
+    `@atlaskit/navigation-system/theming/use-legacy-search-theme`
+  - `@atlaskit/navigation-system/experimental/color-utils/parse-hex` →
+    `@atlaskit/navigation-system/theming/color-utils/parse-hex`
+  - `@atlaskit/navigation-system/experimental/color-utils/parse-hsl` →
+    `@atlaskit/navigation-system/theming/color-utils/parse-hsl`
+  - `@atlaskit/navigation-system/experimental/color-utils/parse-rgb` →
+    `@atlaskit/navigation-system/theming/color-utils/parse-rgb`
+  - `@atlaskit/navigation-system/experimental/color-utils/parse-user-color` →
+    `@atlaskit/navigation-system/theming/color-utils/parse-user-color`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.2.0
 
 ### Minor Changes

package/constellation/layout/usage.mdx

@@ -23,6 +23,8 @@ navigational areas.
 When applying components to the navigational areas,
 [see navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
 
+## Parts
+
 <Image
 	src={layoutAnatomyLight}
 	srcDark={layoutAnatomyDark}

package/constellation/top-nav-items/usage.mdx

@@ -22,6 +22,8 @@ import topNavItemsDont2Dark from './images/topNavItems-dont-2-dark.png';
 Use top nav items to create common utilities in the top nav within
 [layout](/components/navigation-system/layout/examples).
 
+## Parts
+
 <Image
 	src={topNavItemsAnatomyLight}
 	srcDark={topNavItemsAnatomyDark}

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

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

package/dist/cjs/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/cjs/components/skip-links/skip-links-container.js

@@ -16,16 +16,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _skipLink = require("./skip-link");
+var _skipLinksPopup = require("./skip-links-popup");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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"
 };
 
 /**
@@ -96,10 +93,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`.
  */
 function SkipLinksContainer(_ref) {
   var label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId,
     links = _ref.links;
   var sortedLinks = (0, _react.useMemo)(function () {
@@ -109,18 +107,23 @@ function SkipLinksContainer(_ref) {
     return null;
   }
   var isEmptyLabel = isOnlyWhitespaceRegex.test(label);
+  if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')) {
+    return /*#__PURE__*/React.createElement(_skipLinksPopup.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: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
-  }, !isEmptyLabel && ((0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
-    className: (0, _runtime.ax)([styles.label])
-  }, label) : /*#__PURE__*/React.createElement(_compiled.Text, {
+    className: (0, _runtime.ax)([styles.root])
+  }, !isEmptyLabel && /*#__PURE__*/React.createElement(_compiled.Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label)), /*#__PURE__*/React.createElement("ol", {
-    className: (0, _runtime.ax)([styles.skipLinkList, !(0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
+  }, label), /*#__PURE__*/React.createElement("ol", {
+    className: (0, _runtime.ax)([styles.skipLinkList])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

package/dist/cjs/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/cjs/components/skip-links/skip-links-popup.js

@@ -0,0 +1,124 @@
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipLinksPopup = SkipLinksPopup;
+require("./skip-links-popup.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactDom = require("react-dom");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _skipLink = require("./skip-link");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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.
+ */
+function SkipLinksPopup(_ref) {
+  var title = _ref.label,
+    triggerLabel = _ref.triggerLabel,
+    testId = _ref.testId,
+    links = _ref.links;
+  var titleId = (0, _react.useId)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var triggerRef = (0, _react.useRef)(null);
+  var openPopup = (0, _react.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 = (0, _react.useCallback)(function () {
+    (0, _reactDom.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 = (0, _react.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.default, {
+    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: (0, _runtime.ax)([contentStyles.root])
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+        id: titleId,
+        className: (0, _runtime.ax)([contentStyles.label])
+      }, title), /*#__PURE__*/React.createElement("ol", {
+        className: (0, _runtime.ax)([contentStyles.skipLinkList])
+      }, links.map(function (_ref2) {
+        var id = _ref2.id,
+          label = _ref2.label,
+          _onBeforeNavigate = _ref2.onBeforeNavigate;
+        return /*#__PURE__*/React.createElement(_skipLink.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: (0, _runtime.ax)([triggerStyles.root, isOpen && triggerStyles.isOpen])
+      }, /*#__PURE__*/React.createElement(_new.default, (0, _extends2.default)({}, triggerProps, {
+        ref: (0, _mergeRefs.default)([triggerProps.ref, triggerRef]),
+        appearance: "primary",
+        isSelected: isOpen,
+        testId: testId ? "".concat(testId, "--skip-links-trigger") : undefined,
+        onClick: openPopup
+      }), triggerLabel));
+    }
+  });
+}

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

@@ -45,6 +45,7 @@ var getByDomOrderSortFunction = function getByDomOrderSortFunction() {
 function SkipLinksProvider(_ref) {
   var children = _ref.children,
     label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -84,6 +85,7 @@ function SkipLinksProvider(_ref) {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_skipLinksContainer.SkipLinksContainer, {
     label: label,
+    triggerLabel: triggerLabel,
     testId: testId,
     links: links
   }), children);

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

@@ -35,12 +35,14 @@ 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 ? (0, _platformFeatureFlags.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 : (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -62,7 +64,8 @@ function Root(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
-    label: resolvedSkipLinksLabel,
+    label: skipLinksLabel,
+    triggerLabel: skipLinksTriggerLabel,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,

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

@@ -20,7 +20,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
@@ -358,23 +357,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 ((0, _platformFeatureFlags.fg)('navx-4418-fix-effect-state-updates-in-gsn')) {
-      (0, _react.startTransition)(function () {
-        setSideNavState({
-          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-          mobile: 'collapsed',
-          flyout: 'closed',
-          lastTrigger: null
-        });
-      });
-    } else {
+    (0, _react.startTransition)(function () {
       setSideNavState({
         desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
         mobile: 'collapsed',
         flyout: 'closed',
         lastTrigger: null
       });
-    }
+    });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = (0, _react.useCallback)(function (_ref2) {
     var screen = _ref2.screen,

package/dist/es2019/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/es2019/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/es2019/components/skip-links/skip-links-container.js

@@ -6,13 +6,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';
 const 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"
 };
 
 /**
@@ -76,10 +73,11 @@ const 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({
   label,
+  triggerLabel,
   testId,
   links
 }) {
@@ -90,18 +88,23 @@ export function SkipLinksContainer({
     return null;
   }
   const 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 ? `${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 ? `${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 ? `${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(({
     id,
     label,

package/dist/es2019/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/es2019/components/skip-links/skip-links-popup.js

@@ -0,0 +1,107 @@
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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';
+const contentStyles = {
+  root: "_1rjcu2gc _18zrpxbi _1e0c1txw _2lx21bp4 _1pbyjh3g",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu"
+};
+const triggerStyles = {
+  root: "_2rko12b0 _1dqoglyw _kqsw1n9t _1e02utpp _152tutpp _1pby1mrw _tzy4idpf _bfhk1bhr _4ojojh3g _c8j0kb7n",
+  isOpen: "_tzy4idpf _t9ecz6y5"
+};
+const 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({
+  label: title,
+  triggerLabel,
+  testId,
+  links
+}) {
+  const titleId = useId();
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const openPopup = useCallback(() => {
+    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.
+   */
+  const closePopup = useCallback(() => {
+    flushSync(() => {
+      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.
+   */
+  const onClose = useCallback(() => {
+    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 ? 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 ? `${testId}--skip-links-container` : undefined,
+    offset: popupOffset,
+    content: () => /*#__PURE__*/React.createElement("div", {
+      className: ax([contentStyles.root])
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId ? `${testId}--skip-links-container--label` : undefined,
+      id: titleId,
+      className: ax([contentStyles.label])
+    }, title), /*#__PURE__*/React.createElement("ol", {
+      className: ax([contentStyles.skipLinkList])
+    }, links.map(({
+      id,
+      label,
+      onBeforeNavigate
+    }) => /*#__PURE__*/React.createElement(SkipLink, {
+      key: id,
+      id: id,
+      onBeforeNavigate: () => {
+        closePopup();
+        onBeforeNavigate === null || onBeforeNavigate === void 0 ? void 0 : onBeforeNavigate();
+      }
+    }, label)))),
+    trigger: triggerProps => /*#__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 ? `${testId}--skip-links-trigger` : undefined,
+      onClick: openPopup
+    }), triggerLabel))
+  });
+}

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

@@ -34,6 +34,7 @@ const getByDomOrderSortFunction = () => {
 export function SkipLinksProvider({
   children,
   label,
+  triggerLabel,
   testId
 }) {
   const [links, setLinks] = useState([]);
@@ -71,6 +72,7 @@ This error will not be shown in production, and the duplicate skip link will be
     value: contextValue
   }, /*#__PURE__*/React.createElement(SkipLinksContainer, {
     label: label,
+    triggerLabel: triggerLabel,
     testId: testId,
     links: links
   }), children);

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

@@ -26,12 +26,12 @@ export function Root({
   children,
   xcss,
   UNSAFE_dangerouslyHoistSlotSizes = false,
-  skipLinksLabel,
+  skipLinksLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:',
+  skipLinksTriggerLabel = 'Skip to',
   testId,
   defaultSideNavCollapsed,
   isSideNavShortcutEnabled = false
 }) {
-  const resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   const ref = useRef(null);
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
@@ -62,7 +62,8 @@ This message will not be displayed in production.
   }, /*#__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,