@atlaskit/navigation-system 7.3.0 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlassian/navigation-system
 
+## 8.1.0
+
+### Minor Changes
+
+- [`6a19433e19f86`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a19433e19f86) -
+  Changes to skip links behind the `platform_dst_nav4_skip_link_a11y_1` feature gate:
+  - Visual improvements
+  - Removes skip links for `Banner`, `TopNav`, `Aside` and `Panel` slots
+  - Renames default skip link label for `Main` to 'Main content' (from 'Main Content')
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.0.0
+
+### Major Changes
+
+- [`90dc3406ea1eb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90dc3406ea1eb) -
+  Renames `UNSAFE_theme` prop to `customTheme` on `TopNav` component.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.3.0
 
 ### Minor Changes

package/constellation/layout/custom-theming.mdx

@@ -10,7 +10,7 @@ import { CustomThemingParseRgbExample } from '../../examples/constellation/layou
 import { CustomThemingParseHslExample } from '../../examples/constellation/layout/custom-theming--parse-hsl';
 import { CustomThemingParseUserColorExample } from '../../examples/constellation/layout/custom-theming--parse-user-color';
 
-Top navigation supports custom theming through the `UNSAFE_theme` prop.
+Top navigation supports custom theming through the `customTheme` prop.
 
 Enable custom theming by providing both:
 

package/dist/cjs/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

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

@@ -10,11 +10,13 @@ require("./skip-link.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -107,7 +109,7 @@ var SkipLink = exports.SkipLink = function SkipLink(_ref) {
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: (0, _runtime.ax)([styles.skipLinkListItem])
+    className: (0, _runtime.ax)([styles.skipLinkListItem, (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/_react.default.createElement(_compiled.Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

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

@@ -1,8 +1,12 @@
-
+._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)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._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)}
 ._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}
@@ -15,6 +19,7 @@
 ._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

@@ -13,14 +13,19 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
 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: "_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"
+  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"
 };
 
 /**
@@ -107,12 +112,15 @@ function SkipLinksContainer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    className: (0, _runtime.ax)([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(_compiled.Text, {
+    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, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: (0, _runtime.ax)([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: (0, _runtime.ax)([styles.skipLinkList, !(0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSkipLinkInternal = exports.useSkipLink = exports.SkipLinksContext = void 0;
+exports.SkipLinksContext = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 /**
@@ -13,56 +13,4 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var SkipLinksContext = exports.SkipLinksContext = /*#__PURE__*/(0, _react.createContext)({
   registerSkipLink: _noop.default,
   unregisterSkipLink: _noop.default
-});
-var useSkipLinks = function useSkipLinks() {
-  return (0, _react.useContext)(SkipLinksContext);
-};
-
-/**
- * Internal-only hook for registering skip links.
- *
- * `useSkipLink` is the public API wrapper of this.
- *
- * This private version exists for us to support `onBeforeNavigate` for the side nav use case,
- * where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
- */
-var useSkipLinkInternal = exports.useSkipLinkInternal = function useSkipLinkInternal(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    listIndex = _ref.listIndex,
-    onBeforeNavigate = _ref.onBeforeNavigate,
-    isHidden = _ref.isHidden;
-  var _useSkipLinks = useSkipLinks(),
-    registerSkipLink = _useSkipLinks.registerSkipLink,
-    unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
-  (0, _react.useEffect)(function () {
-    if (isHidden) {
-      /**
-       * Skip links are hidden for slots with 0 height or width.
-       * They should not be registered.
-       */
-      return;
-    }
-    registerSkipLink({
-      id: id,
-      label: label,
-      listIndex: listIndex,
-      onBeforeNavigate: onBeforeNavigate,
-      isHidden: isHidden
-    });
-    return function () {
-      unregisterSkipLink(id);
-    };
-  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
-};
-
-/**
- * Call `useSkipLink` to register a skip link for important elements on the page.
- */
-var useSkipLink = exports.useSkipLink = function useSkipLink(id, label, listIndex) {
-  useSkipLinkInternal({
-    id: id,
-    label: label,
-    listIndex: listIndex
-  });
-};
+});

package/dist/cjs/context/skip-links/use-skip-link-internal.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkipLinkInternal = void 0;
+var _react = require("react");
+var _skipLinksContext = require("./skip-links-context");
+/**
+ * Internal-only hook for registering skip links.
+ *
+ * `useSkipLink` is the public API wrapper of this.
+ *
+ * This private version exists for us to support `onBeforeNavigate` for the side nav use case,
+ * where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
+ */
+var useSkipLinkInternal = exports.useSkipLinkInternal = function useSkipLinkInternal(_ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    listIndex = _ref.listIndex,
+    onBeforeNavigate = _ref.onBeforeNavigate,
+    isHidden = _ref.isHidden;
+  var _useContext = (0, _react.useContext)(_skipLinksContext.SkipLinksContext),
+    registerSkipLink = _useContext.registerSkipLink,
+    unregisterSkipLink = _useContext.unregisterSkipLink;
+  (0, _react.useEffect)(function () {
+    if (isHidden) {
+      /**
+       * Skip links are hidden for slots with 0 height or width.
+       * They should not be registered.
+       */
+      return;
+    }
+    registerSkipLink({
+      id: id,
+      label: label,
+      listIndex: listIndex,
+      onBeforeNavigate: onBeforeNavigate,
+      isHidden: isHidden
+    });
+    return function () {
+      unregisterSkipLink(id);
+    };
+  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
+};

package/dist/cjs/context/skip-links/use-skip-link.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkipLink = void 0;
+var _useSkipLinkInternal = require("./use-skip-link-internal");
+/**
+ * Call `useSkipLink` to register a skip link for important elements on the page.
+ */
+var useSkipLink = exports.useSkipLink = function useSkipLink(id, label, listIndex) {
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
+    id: id,
+    label: label,
+    listIndex: listIndex
+  });
+};

package/dist/cjs/context/top-nav-start/top-nav-start-attach-ref.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavStartAttachRef = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var TopNavStartAttachRef = exports.TopNavStartAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);

package/dist/cjs/context/top-nav-start/top-nav-start-context-provider.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.TopNavStartProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _topNavStartContext = require("./top-nav-start-context");
+var _topNavStartAttachRef = require("./top-nav-start-attach-ref");
+var _topNavStartElement = require("./top-nav-start-element");
 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); }
 /**
  * Provider for the TopNavStart container element contexts.
@@ -29,9 +30,9 @@ var TopNavStartProvider = exports.TopNavStartProvider = function TopNavStartProv
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     element = _useState2[0],
     setElement = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_topNavStartContext.TopNavStartElement.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_topNavStartElement.TopNavStartElement.Provider, {
     value: element
-  }, /*#__PURE__*/_react.default.createElement(_topNavStartContext.TopNavStartAttachRef.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_topNavStartAttachRef.TopNavStartAttachRef.Provider, {
     value: setElement
   }, children));
 };

package/dist/cjs/context/top-nav-start/top-nav-start-element.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavStartElement = void 0;
+var _react = require("react");
+var TopNavStartElement = exports.TopNavStartElement = /*#__PURE__*/(0, _react.createContext)(null);

package/dist/cjs/entry-points/experimental/top-nav-button.js

@@ -6,25 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "TopNavButton", {
   enumerable: true,
   get: function get() {
-    return _migration.Button;
+    return _button.Button;
   }
 });
 Object.defineProperty(exports, "TopNavIconButton", {
   enumerable: true,
   get: function get() {
-    return _migration.IconButton;
+    return _iconButton.IconButton;
   }
 });
 Object.defineProperty(exports, "TopNavLinkButton", {
   enumerable: true,
   get: function get() {
-    return _migration.LinkButton;
+    return _linkButton.LinkButton;
   }
 });
 Object.defineProperty(exports, "TopNavLinkIconButton", {
   enumerable: true,
   get: function get() {
-    return _migration.LinkIconButton;
+    return _linkIconButton.LinkIconButton;
   }
 });
-var _migration = require("../../ui/top-nav-items/themed/migration");
+var _button = require("../../ui/top-nav-items/themed/button");
+var _linkButton = require("../../ui/top-nav-items/themed/link-button");
+var _iconButton = require("../../ui/top-nav-items/themed/icon-button");
+var _linkIconButton = require("../../ui/top-nav-items/themed/link-icon-button");

package/dist/cjs/entry-points/layout/skip-links.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "useSkipLink", {
   enumerable: true,
   get: function get() {
-    return _skipLinksContext.useSkipLink;
+    return _useSkipLink.useSkipLink;
   }
 });
 Object.defineProperty(exports, "useSkipLinkId", {
   enumerable: true,
   get: function get() {
-    return _idUtils.useSkipLinkId;
+    return _useSkipLinkId.useSkipLinkId;
   }
 });
-var _idUtils = require("../../ui/page-layout/id-utils");
-var _skipLinksContext = require("../../context/skip-links/skip-links-context");
+var _useSkipLinkId = require("../../ui/page-layout/use-skip-link-id");
+var _useSkipLink = require("../../context/skip-links/use-skip-link");

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

@@ -14,13 +14,14 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
-var _skipLinksContext = require("../../context/skip-links/skip-links-context");
+var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
+var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
-var _hoistUtils = require("./hoist-utils");
-var _idUtils = require("./id-utils");
 var _provider = require("./panel-splitter/provider");
+var _useLayoutId = require("./use-layout-id");
 var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var-on-root-element");
 var _useSafeDefaultWidth = require("./use-safe-default-width");
 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); }
@@ -76,7 +77,7 @@ function Aside(_ref) {
     testId = _ref.testId,
     providedId = _ref.id;
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
   var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
@@ -89,11 +90,13 @@ function Aside(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
-  (0, _skipLinksContext.useSkipLinkInternal)({
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(defaultWidth),
@@ -142,7 +145,7 @@ function Aside(_ref) {
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
   // When they aren't needed anymore we can delete them wholesale.
-  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_asideLayoutVar,
     value: "0px",
     mediaQuery: _responsive.media.above.md,

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

@@ -10,12 +10,14 @@ require("./banner.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _skipLinksContext = require("../../context/skip-links/skip-links-context");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("./constants");
+var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
+var _hoistCssVarToLocalGrid = require("./hoist-css-var-to-local-grid");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
-var _hoistUtils = require("./hoist-utils");
-var _idUtils = require("./id-utils");
+var _useLayoutId = require("./use-layout-id");
 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 styles = {
   root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
@@ -37,25 +39,27 @@ function Banner(_ref) {
     testId = _ref.testId,
     providedId = _ref.id;
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
 
   /**
    * Don't show the skip link if the slot has 0 height.
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
-  (0, _skipLinksContext.useSkipLinkInternal)({
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
     className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, xcss]),
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
+  }, /*#__PURE__*/React.createElement(_hoistCssVarToLocalGrid.HoistCssVarToLocalGrid, {
     variableName: _constants.bannerMountedVar,
     value: height
   }), dangerouslyHoistSlotSizes &&
@@ -63,7 +67,7 @@ function Banner(_ref) {
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
   // When they aren't needed anymore we can delete them wholesale.
-  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_bannerVar,
     value: height
   })

package/dist/cjs/ui/page-layout/{hoist-utils.js → dangerously-hoist-css-var-to-document-root.js}

@@ -4,35 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoistCssVarToLocalGrid = exports.DangerouslyHoistCssVarToDocumentRoot = void 0;
+exports.DangerouslyHoistCssVarToDocumentRoot = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _root = require("./root");
-/**
- * This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
- *
- * This makes the other page layout elements aware that the banner and top bar have been mounted, provides them
- * with their heights. This is needed to power the stick points of page layout elements like SideNav and Panel.
- *
- * We should clean this up once we have a better solution, such as moving the size props for banner and top bar into `Root`.
- */
-var HoistCssVarToLocalGrid = exports.HoistCssVarToLocalGrid = function HoistCssVarToLocalGrid(_ref) {
-  var variableName = _ref.variableName,
-    value = _ref.value;
-  return /*#__PURE__*/_react.default.createElement("style", null, "#".concat(_root.gridRootId, " { ").concat(variableName, ": ").concat(value, "px }"));
-};
 var getCssStringValue = function getCssStringValue(value) {
   return typeof value === 'number' ? "".concat(value, "px") : value;
 };
-
-/**
- * Hoists CSS variables to the document root. This is support the legacy edge case of monolith pages being injected as a
- * sibling to the page layout, as opposed to within the `Main` slot.
- */
-var DangerouslyHoistCssVarToDocumentRoot = exports.DangerouslyHoistCssVarToDocumentRoot = function DangerouslyHoistCssVarToDocumentRoot(_ref2) {
-  var variableName = _ref2.variableName,
-    value = _ref2.value,
-    mediaQuery = _ref2.mediaQuery,
-    responsiveValue = _ref2.responsiveValue;
+var DangerouslyHoistCssVarToDocumentRoot = exports.DangerouslyHoistCssVarToDocumentRoot = function DangerouslyHoistCssVarToDocumentRoot(_ref) {
+  var variableName = _ref.variableName,
+    value = _ref.value,
+    mediaQuery = _ref.mediaQuery,
+    responsiveValue = _ref.responsiveValue;
   /**
    * Note don't put multiple variables in multiple lines. eg
    * <style>

package/dist/cjs/ui/page-layout/hoist-css-var-to-local-grid.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HoistCssVarToLocalGrid = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _root = require("./root");
+/**
+ * This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
+ *
+ * This makes the other page layout elements aware that the banner and top bar have been mounted, provides them
+ * with their heights. This is needed to power the stick points of page layout elements like SideNav and Panel.
+ *
+ * We should clean this up once we have a better solution, such as moving the size props for banner and top bar into `Root`.
+ */
+var HoistCssVarToLocalGrid = exports.HoistCssVarToLocalGrid = function HoistCssVarToLocalGrid(_ref) {
+  var variableName = _ref.variableName,
+    value = _ref.value;
+  return /*#__PURE__*/_react.default.createElement("style", null, "#".concat(_root.gridRootId, " { ").concat(variableName, ": ").concat(value, "px }"));
+};

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

@@ -10,9 +10,10 @@ require("./main.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useSkipLink = require("../../../context/skip-links/use-skip-link");
 var _constants = require("../constants");
-var _idUtils = require("../id-utils");
+var _useLayoutId = require("../use-layout-id");
 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 mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
@@ -25,13 +26,13 @@ function Main(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Main Content' : _ref$skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id;
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
+  (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
   return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,

package/dist/cjs/ui/page-layout/panel-splitter/get-pixel-width.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPixelWidth = void 0;
+/**
+ * Returns the computed width of an element in pixels.
+ */
+var getPixelWidth = exports.getPixelWidth = function getPixelWidth(element) {
+  // Always returns an integer. Returns 0 if element is hidden / removed.
+  return element.offsetWidth;
+};

package/dist/cjs/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js}

@@ -3,11 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getWidthFromDragLocation = exports.getPixelWidth = void 0;
-/**
- * ⚠️ Note: We are using the initial client location captured from the mousedown event, not from the dragstart event.
- * Some browser extensions can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
- */
+exports.getWidthFromDragLocation = void 0;
 var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
@@ -25,11 +21,4 @@ var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWi
   // Resize line is positioned at the inline-start (left) of the element.
   // If the direction is left-to-right, the width will decrease when the mouse is moved to the right, and vice versa.
   return direction === 'ltr' ? initialWidth - diffX : initialWidth + diffX;
-};
-/**
- * Returns the computed width of an element in pixels.
- */
-var getPixelWidth = exports.getPixelWidth = function getPixelWidth(element) {
-  // Always returns an integer. Returns 0 if element is hidden / removed.
-  return element.offsetWidth;
 };

package/dist/cjs/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPanelSplitterDragData = isPanelSplitterDragData;
+var _panelSplitterDragSymbol = require("./panel-splitter-drag-symbol");
+function isPanelSplitterDragData(data) {
+  return data[_panelSplitterDragSymbol.panelSplitterDragDataSymbol] === true;
+}