@atlaskit/navigation-system 0.182.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlassian/navigation-system
 
+## 1.0.0
+
+### Major Changes
+
+- [`9fb179b645f2d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9fb179b645f2d) -
+  This package is now in beta and is no longer considered experimental. We will be making iterative
+  improvements until GA.
+
+  This release contains no changes whatsoever.
+
+### Patch Changes
+
+- [`3136f686a1929`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3136f686a1929) -
+  Adding internal comments to help improve clarity.
+- Updated dependencies
+
+## 0.183.0
+
+### Minor Changes
+
+- [`4c0f75924fd2b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c0f75924fd2b) -
+  Internal refactors to skip links behind a feature flag.
+
+### Patch Changes
+
+- [`098cfbb01dc36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/098cfbb01dc36) -
+  Add missing npmignore files to remove unnecessary files from published package
+- Updated dependencies
+
 ## 0.182.0
 
 ### Minor Changes

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

@@ -1,16 +1,15 @@
 /* skip-links-container.tsx generated by @compiled/babel-plugin v0.36.1 */
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SkipLinksContainer = void 0;
+exports.SkipLinksContainer = SkipLinksContainer;
 require("./skip-links-container.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _skipLinksDataContext = require("../../context/skip-links/skip-links-data-context");
 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); }
@@ -24,7 +23,12 @@ var styles = {
  *
  * TODO: consider removing this, it doesn't make a lot of sense.
  * The skip links look like a popup but in reality they aren't.
- * Even though we hide them if you press TAB it will reopen the list and move to the next one...
+ * Even though we hide them when the user presses Escape, when
+ * they press TAB it will reopen the list and move to the next one...
+ *
+ * One potential option is to use a tree walker to focus on the
+ * next focusable element in the DOM (outside the skip links
+ * container).
  */
 var closeOnEscape = function closeOnEscape(event) {
   if (event.key !== 'Escape') {
@@ -38,18 +42,22 @@ var closeOnEscape = function closeOnEscape(event) {
 var isOnlyWhitespaceRegex = /^\s*$/;
 
 /**
- * A container element for the skip links
- * The default label will be used when the `skipLinksLabel` attribute is not
- * provided or the attribute is an empty string. If a string comprised only of
- * spaces is provided, the skip link heading element will be removed, but the
- * default label will still be used in `title` attribute of the skip links
- * themselves.
+ * A container element for the skip links.
+ *
+ * The container element is always rendered in the DOM, but is only visible when
+ * focus is within the container.
+ *
+ * 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.
  */
-var SkipLinksContainer = exports.SkipLinksContainer = function SkipLinksContainer(_ref) {
+function SkipLinksContainer(_ref) {
   var label = _ref.label,
-    testId = _ref.testId;
-  var sortedSkipLinks = (0, _skipLinksDataContext.useSortedSkipLinks)();
-  if (sortedSkipLinks.length === 0) {
+    testId = _ref.testId,
+    links = _ref.links;
+  var sortedLinks = (0, _skipLinksDataContext.useSortedSkipLinks)(links);
+  if (sortedLinks.length === 0) {
     return null;
   }
   var isEmptyLabel = isOnlyWhitespaceRegex.test(label);
@@ -57,12 +65,12 @@ var SkipLinksContainer = exports.SkipLinksContainer = function SkipLinksContaine
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
     className: (0, _runtime.ax)([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(_primitives.Text, {
+  }, !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])
-  }, sortedSkipLinks.map(function (_ref2) {
+  }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,
       onBeforeNavigate = _ref2.onBeforeNavigate;
@@ -72,4 +80,4 @@ var SkipLinksContainer = exports.SkipLinksContainer = function SkipLinksContaine
       onBeforeNavigate: onBeforeNavigate
     }, label);
   })));
-};
+}

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

@@ -4,14 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSortedSkipLinks = exports.SkipLinksDataContext = void 0;
+exports.sortSkipLinks = exports.SkipLinksDataContext = void 0;
+exports.useSortedSkipLinks = useSortedSkipLinks;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 /**
  * Provides a way to store skip links
+ *
+ * Note: This will be cleaned up with fg('platform_dst_nav4_skip_links_hydration_fix')
  */
 var SkipLinksDataContext = exports.SkipLinksDataContext = /*#__PURE__*/(0, _react.createContext)([]);
 var _assignIndex = function assignIndex(num, arr) {
@@ -20,7 +24,14 @@ var _assignIndex = function assignIndex(num, arr) {
   }
   return _assignIndex(num + 1, arr);
 };
-var sortSkipLinks = function sortSkipLinks(arr) {
+
+/**
+ * Sorts an array of skip links by list indexes.
+ *
+ * Skip links with custom list indexes are positioned first, followed by regular skip links,
+ * which are automatically assigned available index positions to avoid conflicts.
+ */
+var sortSkipLinks = exports.sortSkipLinks = function sortSkipLinks(arr) {
   var customLinks = arr.filter(function (link) {
     return Number.isInteger(link.listIndex);
   });
@@ -30,22 +41,29 @@ var sortSkipLinks = function sortSkipLinks(arr) {
   var usedIndexes = customLinks.map(function (a) {
     return a.listIndex;
   });
-  var regularLinksWithIdx = arr.filter(function (link) {
+  var regularLinksWithIndex = arr.filter(function (link) {
     return link.listIndex === undefined;
-  }).map(function (link, idx) {
-    var listIndex = _assignIndex(idx, usedIndexes);
+  }).map(function (link, index) {
+    var listIndex = _assignIndex(index, usedIndexes);
     usedIndexes.push(listIndex);
     return _objectSpread(_objectSpread({}, link), {}, {
       listIndex: listIndex
     });
   });
-  return [].concat((0, _toConsumableArray2.default)(customLinks), (0, _toConsumableArray2.default)(regularLinksWithIdx)).sort(function (a, b) {
+  return [].concat((0, _toConsumableArray2.default)(customLinks), (0, _toConsumableArray2.default)(regularLinksWithIndex)).sort(function (a, b) {
     return a.listIndex - b.listIndex;
   });
 };
-var useSortedSkipLinks = exports.useSortedSkipLinks = function useSortedSkipLinks() {
+
+/**
+ * Returns memoized and sorted skip links.
+ *
+ * TODO: when cleaning up fg('platform_dst_nav4_skip_links_hydration_fix'), we can inline this inside `SkipLinksContainer`.
+ */
+function useSortedSkipLinks(providedLinks) {
   var skipLinksData = (0, _react.useContext)(SkipLinksDataContext);
+  var links = (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_links_hydration_fix') ? providedLinks : skipLinksData;
   return (0, _react.useMemo)(function () {
-    return sortSkipLinks(skipLinksData);
-  }, [skipLinksData]);
-};
+    return sortSkipLinks(links);
+  }, [links]);
+}

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

@@ -5,10 +5,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SkipLinksProvider = void 0;
+exports.SkipLinksProvider = SkipLinksProvider;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _skipLinksContainer = require("../../components/skip-links/skip-links-container");
 var _skipLinksContext = require("./skip-links-context");
 var _skipLinksDataContext = require("./skip-links-data-context");
 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); }
@@ -37,10 +39,15 @@ var getByDomOrderSortFunction = function getByDomOrderSortFunction() {
 };
 
 /**
- * Provides a way to store and use skip links by combining SkipLinksContext and SkipLinksDataContext
+ * Provider for skip links. Should be rendered at the top level of the application.
+ *
+ * - Provides the context to register/unregister skip links
+ * - Renders the skip links container (when the feature flag 'platform_dst_nav4_skip_links_hydration_fix' is enabled)
  */
-var SkipLinksProvider = exports.SkipLinksProvider = function SkipLinksProvider(_ref) {
-  var children = _ref.children;
+function SkipLinksProvider(_ref) {
+  var children = _ref.children,
+    label = _ref.label,
+    testId = _ref.testId;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     links = _useState2[0],
@@ -77,7 +84,11 @@ var SkipLinksProvider = exports.SkipLinksProvider = function SkipLinksProvider(_
   }, [registerSkipLink, unregisterSkipLink]);
   return /*#__PURE__*/_react.default.createElement(_skipLinksContext.SkipLinksContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_skipLinksDataContext.SkipLinksDataContext.Provider, {
+  }, (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_links_hydration_fix') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_skipLinksContainer.SkipLinksContainer, {
+    label: label,
+    testId: testId,
+    links: links
+  }), children) : /*#__PURE__*/_react.default.createElement(_skipLinksDataContext.SkipLinksDataContext.Provider, {
     value: links
   }, children));
-};
+}

package/dist/cjs/ui/menu-item/menu-item.js

@@ -158,7 +158,7 @@ var containerStyles = {
 var buttonOrAnchorStyles = {
   root: "_2rkoglpi _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syaz1gjq _4cvr1h6o _y3gnv2br _14iu1ji5",
   selected: "_syazaqb7 _14iu19ru",
-  hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _7psyru3m _11om6b4r _1uy01amc _bir2q7pw"
+  hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _11om6b4r _7psyru3m _1uy01amc _bir2q7pw"
 };
 var extendButtonOrAnchorStyles = {
   root: "_1r04ze3t _kqswstnw"

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

@@ -11,6 +11,7 @@ require("./root.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContainer = require("../../components/skip-links/skip-links-container");
 var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
@@ -53,9 +54,18 @@ function Root(_ref) {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, null, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_elementContext.SideNavElementProvider, null, /*#__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, null, /*#__PURE__*/_react.default.createElement(_skipLinksContainer.SkipLinksContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
     label: skipLinksLabel,
     testId: testId
+  }, !(0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_links_hydration_fix') &&
+  /*#__PURE__*/
+  // SkipLinksContainer is rendered directly inside SkipLinksProvider when the FG is enabled.
+  _react.default.createElement(_skipLinksContainer.SkipLinksContainer, {
+    label: skipLinksLabel,
+    testId: testId,
+    links:
+    // The links prop won't be used when the FG is disabled.
+    []
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: (0, _runtime.ax)([styles.root, xcss]),

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

@@ -1,9 +1,8 @@
 /* skip-links-container.tsx generated by @compiled/babel-plugin v0.36.1 */
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import "./skip-links-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { useSortedSkipLinks } from '../../context/skip-links/skip-links-data-context';
 import { SkipLink } from './skip-link';
 const styles = {
@@ -16,7 +15,12 @@ const styles = {
  *
  * TODO: consider removing this, it doesn't make a lot of sense.
  * The skip links look like a popup but in reality they aren't.
- * Even though we hide them if you press TAB it will reopen the list and move to the next one...
+ * Even though we hide them when the user presses Escape, when
+ * they press TAB it will reopen the list and move to the next one...
+ *
+ * One potential option is to use a tree walker to focus on the
+ * next focusable element in the DOM (outside the skip links
+ * container).
  */
 const closeOnEscape = event => {
   if (event.key !== 'Escape') {
@@ -30,19 +34,23 @@ const closeOnEscape = event => {
 const isOnlyWhitespaceRegex = /^\s*$/;
 
 /**
- * A container element for the skip links
- * The default label will be used when the `skipLinksLabel` attribute is not
- * provided or the attribute is an empty string. If a string comprised only of
- * spaces is provided, the skip link heading element will be removed, but the
- * default label will still be used in `title` attribute of the skip links
- * themselves.
+ * A container element for the skip links.
+ *
+ * The container element is always rendered in the DOM, but is only visible when
+ * focus is within the container.
+ *
+ * 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.
  */
-export const SkipLinksContainer = ({
+export function SkipLinksContainer({
   label,
-  testId
-}) => {
-  const sortedSkipLinks = useSortedSkipLinks();
-  if (sortedSkipLinks.length === 0) {
+  testId,
+  links
+}) {
+  const sortedLinks = useSortedSkipLinks(links);
+  if (sortedLinks.length === 0) {
     return null;
   }
   const isEmptyLabel = isOnlyWhitespaceRegex.test(label);
@@ -55,7 +63,7 @@ export const SkipLinksContainer = ({
     testId: testId ? `${testId}--skip-links-container--label` : undefined
   }, label), /*#__PURE__*/React.createElement("ol", {
     className: ax([styles.skipLinkList])
-  }, sortedSkipLinks.map(({
+  }, sortedLinks.map(({
     id,
     label,
     onBeforeNavigate
@@ -64,4 +72,4 @@ export const SkipLinksContainer = ({
     id: id,
     onBeforeNavigate: onBeforeNavigate
   }, label))));
-};
+}

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

@@ -1,6 +1,9 @@
 import { createContext, useContext, useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * Provides a way to store skip links
+ *
+ * Note: This will be cleaned up with fg('platform_dst_nav4_skip_links_hydration_fix')
  */
 export const SkipLinksDataContext = /*#__PURE__*/createContext([]);
 const assignIndex = (num, arr) => {
@@ -9,25 +12,39 @@ const assignIndex = (num, arr) => {
   }
   return assignIndex(num + 1, arr);
 };
-const sortSkipLinks = arr => {
+
+/**
+ * Sorts an array of skip links by list indexes.
+ *
+ * Skip links with custom list indexes are positioned first, followed by regular skip links,
+ * which are automatically assigned available index positions to avoid conflicts.
+ */
+export const sortSkipLinks = arr => {
   const customLinks = arr.filter(link => Number.isInteger(link.listIndex));
   if (customLinks.length === 0) {
     return arr;
   }
   const usedIndexes = customLinks.map(a => a.listIndex);
-  const regularLinksWithIdx = arr.filter(link => link.listIndex === undefined).map((link, idx) => {
-    const listIndex = assignIndex(idx, usedIndexes);
+  const regularLinksWithIndex = arr.filter(link => link.listIndex === undefined).map((link, index) => {
+    const listIndex = assignIndex(index, usedIndexes);
     usedIndexes.push(listIndex);
     return {
       ...link,
       listIndex
     };
   });
-  return [...customLinks, ...regularLinksWithIdx].sort((a, b) => a.listIndex - b.listIndex);
+  return [...customLinks, ...regularLinksWithIndex].sort((a, b) => a.listIndex - b.listIndex);
 };
-export const useSortedSkipLinks = () => {
+
+/**
+ * Returns memoized and sorted skip links.
+ *
+ * TODO: when cleaning up fg('platform_dst_nav4_skip_links_hydration_fix'), we can inline this inside `SkipLinksContainer`.
+ */
+export function useSortedSkipLinks(providedLinks) {
   const skipLinksData = useContext(SkipLinksDataContext);
+  const links = fg('platform_dst_nav4_skip_links_hydration_fix') ? providedLinks : skipLinksData;
   return useMemo(() => {
-    return sortSkipLinks(skipLinksData);
-  }, [skipLinksData]);
-};
+    return sortSkipLinks(links);
+  }, [links]);
+}

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

@@ -1,4 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { SkipLinksContainer } from '../../components/skip-links/skip-links-container';
 import { SkipLinksContext } from './skip-links-context';
 import { SkipLinksDataContext } from './skip-links-data-context';
 const getByDomOrderSortFunction = () => {
@@ -26,11 +28,16 @@ const getByDomOrderSortFunction = () => {
 };
 
 /**
- * Provides a way to store and use skip links by combining SkipLinksContext and SkipLinksDataContext
+ * Provider for skip links. Should be rendered at the top level of the application.
+ *
+ * - Provides the context to register/unregister skip links
+ * - Renders the skip links container (when the feature flag 'platform_dst_nav4_skip_links_hydration_fix' is enabled)
  */
-export const SkipLinksProvider = ({
-  children
-}) => {
+export function SkipLinksProvider({
+  children,
+  label,
+  testId
+}) {
   const [links, setLinks] = useState([]);
   const registerSkipLink = useCallback(skipLinkData => {
     // Don't add duplicate skip links
@@ -64,7 +71,11 @@ This error will not be shown in production, and the duplicate skip link will be
   }, [registerSkipLink, unregisterSkipLink]);
   return /*#__PURE__*/React.createElement(SkipLinksContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(SkipLinksDataContext.Provider, {
+  }, fg('platform_dst_nav4_skip_links_hydration_fix') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SkipLinksContainer, {
+    label: label,
+    testId: testId,
+    links: links
+  }), children) : /*#__PURE__*/React.createElement(SkipLinksDataContext.Provider, {
     value: links
   }, children));
-};
+}

package/dist/es2019/ui/menu-item/menu-item.js

@@ -141,7 +141,7 @@ const containerStyles = {
 const buttonOrAnchorStyles = {
   root: "_2rkoglpi _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syaz1gjq _4cvr1h6o _y3gnv2br _14iu1ji5",
   selected: "_syazaqb7 _14iu19ru",
-  hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _7psyru3m _11om6b4r _1uy01amc _bir2q7pw"
+  hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _11om6b4r _7psyru3m _1uy01amc _bir2q7pw"
 };
 const extendButtonOrAnchorStyles = {
   root: "_1r04ze3t _kqswstnw"

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

@@ -3,6 +3,7 @@ import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksContainer } from '../../components/skip-links/skip-links-container';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
@@ -53,9 +54,18 @@ This message will not be displayed in production.
   }, []);
   return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, null, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
-  }, /*#__PURE__*/React.createElement(SkipLinksProvider, null, /*#__PURE__*/React.createElement(SkipLinksContainer, {
+  }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,
     testId: testId
+  }, !fg('platform_dst_nav4_skip_links_hydration_fix') &&
+  /*#__PURE__*/
+  // SkipLinksContainer is rendered directly inside SkipLinksProvider when the FG is enabled.
+  React.createElement(SkipLinksContainer, {
+    label: skipLinksLabel,
+    testId: testId,
+    links:
+    // The links prop won't be used when the FG is disabled.
+    []
   }), /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: ax([styles.root, xcss]),

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

@@ -1,9 +1,8 @@
 /* skip-links-container.tsx generated by @compiled/babel-plugin v0.36.1 */
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import "./skip-links-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { useSortedSkipLinks } from '../../context/skip-links/skip-links-data-context';
 import { SkipLink } from './skip-link';
 var styles = {
@@ -16,7 +15,12 @@ var styles = {
  *
  * TODO: consider removing this, it doesn't make a lot of sense.
  * The skip links look like a popup but in reality they aren't.
- * Even though we hide them if you press TAB it will reopen the list and move to the next one...
+ * Even though we hide them when the user presses Escape, when
+ * they press TAB it will reopen the list and move to the next one...
+ *
+ * One potential option is to use a tree walker to focus on the
+ * next focusable element in the DOM (outside the skip links
+ * container).
  */
 var closeOnEscape = function closeOnEscape(event) {
   if (event.key !== 'Escape') {
@@ -30,18 +34,22 @@ var closeOnEscape = function closeOnEscape(event) {
 var isOnlyWhitespaceRegex = /^\s*$/;
 
 /**
- * A container element for the skip links
- * The default label will be used when the `skipLinksLabel` attribute is not
- * provided or the attribute is an empty string. If a string comprised only of
- * spaces is provided, the skip link heading element will be removed, but the
- * default label will still be used in `title` attribute of the skip links
- * themselves.
+ * A container element for the skip links.
+ *
+ * The container element is always rendered in the DOM, but is only visible when
+ * focus is within the container.
+ *
+ * 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.
  */
-export var SkipLinksContainer = function SkipLinksContainer(_ref) {
+export function SkipLinksContainer(_ref) {
   var label = _ref.label,
-    testId = _ref.testId;
-  var sortedSkipLinks = useSortedSkipLinks();
-  if (sortedSkipLinks.length === 0) {
+    testId = _ref.testId,
+    links = _ref.links;
+  var sortedLinks = useSortedSkipLinks(links);
+  if (sortedLinks.length === 0) {
     return null;
   }
   var isEmptyLabel = isOnlyWhitespaceRegex.test(label);
@@ -54,7 +62,7 @@ export var SkipLinksContainer = function SkipLinksContainer(_ref) {
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
   }, label), /*#__PURE__*/React.createElement("ol", {
     className: ax([styles.skipLinkList])
-  }, sortedSkipLinks.map(function (_ref2) {
+  }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,
       onBeforeNavigate = _ref2.onBeforeNavigate;
@@ -64,4 +72,4 @@ export var SkipLinksContainer = function SkipLinksContainer(_ref) {
       onBeforeNavigate: onBeforeNavigate
     }, label);
   })));
-};
+}

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

@@ -3,8 +3,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { createContext, useContext, useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * Provides a way to store skip links
+ *
+ * Note: This will be cleaned up with fg('platform_dst_nav4_skip_links_hydration_fix')
  */
 export var SkipLinksDataContext = /*#__PURE__*/createContext([]);
 var _assignIndex = function assignIndex(num, arr) {
@@ -13,7 +16,14 @@ var _assignIndex = function assignIndex(num, arr) {
   }
   return _assignIndex(num + 1, arr);
 };
-var sortSkipLinks = function sortSkipLinks(arr) {
+
+/**
+ * Sorts an array of skip links by list indexes.
+ *
+ * Skip links with custom list indexes are positioned first, followed by regular skip links,
+ * which are automatically assigned available index positions to avoid conflicts.
+ */
+export var sortSkipLinks = function sortSkipLinks(arr) {
   var customLinks = arr.filter(function (link) {
     return Number.isInteger(link.listIndex);
   });
@@ -23,22 +33,29 @@ var sortSkipLinks = function sortSkipLinks(arr) {
   var usedIndexes = customLinks.map(function (a) {
     return a.listIndex;
   });
-  var regularLinksWithIdx = arr.filter(function (link) {
+  var regularLinksWithIndex = arr.filter(function (link) {
     return link.listIndex === undefined;
-  }).map(function (link, idx) {
-    var listIndex = _assignIndex(idx, usedIndexes);
+  }).map(function (link, index) {
+    var listIndex = _assignIndex(index, usedIndexes);
     usedIndexes.push(listIndex);
     return _objectSpread(_objectSpread({}, link), {}, {
       listIndex: listIndex
     });
   });
-  return [].concat(_toConsumableArray(customLinks), _toConsumableArray(regularLinksWithIdx)).sort(function (a, b) {
+  return [].concat(_toConsumableArray(customLinks), _toConsumableArray(regularLinksWithIndex)).sort(function (a, b) {
     return a.listIndex - b.listIndex;
   });
 };
-export var useSortedSkipLinks = function useSortedSkipLinks() {
+
+/**
+ * Returns memoized and sorted skip links.
+ *
+ * TODO: when cleaning up fg('platform_dst_nav4_skip_links_hydration_fix'), we can inline this inside `SkipLinksContainer`.
+ */
+export function useSortedSkipLinks(providedLinks) {
   var skipLinksData = useContext(SkipLinksDataContext);
+  var links = fg('platform_dst_nav4_skip_links_hydration_fix') ? providedLinks : skipLinksData;
   return useMemo(function () {
-    return sortSkipLinks(skipLinksData);
-  }, [skipLinksData]);
-};
+    return sortSkipLinks(links);
+  }, [links]);
+}