@atlaskit/navigation-system 7.3.0 → 8.1.0

package/dist/cjs/ui/page-layout/panel-splitter/{context.js → on-double-click-context.js}

@@ -3,16 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PanelSplitterContext = exports.OnDoubleClickContext = void 0;
+exports.OnDoubleClickContext = void 0;
 var _react = require("react");
-// Disabling the rule to allow for `Type` suffix, to differentiate from the Context object.
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-
-/**
- * Context for the panel splitter. Only internally exported.
- */
-var PanelSplitterContext = exports.PanelSplitterContext = /*#__PURE__*/(0, _react.createContext)(null);
-
 /**
  * Context for the panel splitter's double click handler. Only internally exported.
  *

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter-context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelSplitterContext = void 0;
+var _react = require("react");
+// Disabling the rule to allow for `Type` suffix, to differentiate from the Context object.
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+/**
+ * Context for the panel splitter. Only internally exported.
+ */
+var PanelSplitterContext = exports.PanelSplitterContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelSplitterDragDataSymbol = void 0;
+var panelSplitterDragDataSymbol = exports.panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PanelSplitter = void 0;
-exports.isPanelSplitterDragData = isPanelSplitterDragData;
 require("./panel-splitter.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -33,15 +32,22 @@ var _TooltipContainer = _interopRequireDefault(require("@atlaskit/tooltip/Toolti
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
-var _context = require("./context");
 var _convertResizeBoundToPixels = require("./convert-resize-bound-to-pixels");
 var _getPercentageWithinPixelBounds = require("./get-percentage-within-pixel-bounds");
-var _getWidth = require("./get-width");
+var _getPixelWidth = require("./get-pixel-width");
+var _getWidthFromDragLocation = require("./get-width-from-drag-location");
+var _isPanelSplitterDragData = require("./is-panel-splitter-drag-data");
 var _keyboardResizeManager = require("./keyboard-resize-manager");
+var _onDoubleClickContext = require("./on-double-click-context");
+var _panelSplitterContext = require("./panel-splitter-context");
+var _panelSplitterDragSymbol = require("./panel-splitter-drag-symbol");
 var _excluded = ["children", "className"];
 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; }
+function signPanelSplitterDragData(data) {
+  return _objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2.default)({}, _panelSplitterDragSymbol.panelSplitterDragDataSymbol, true));
+}
 var containerStyles = {
   root: "_12ji1r31 _1qu2glyw _12y31o36 _1e0cglyw _kqswstnw _u7coidpf _152tidpf _1pbykb7n _181n1ule",
   positionEnd: "_rjxpftgi",
@@ -59,10 +65,6 @@ var lineStyles = {
 var tooltipStyles = {
   root: "_ahbq196n _1bsb1ris"
 };
-var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
-function signPanelSplitterDragData(data) {
-  return _objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2.default)({}, panelSplitterDragDataSymbol, true));
-}
 var PanelSplitterTooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -132,9 +134,6 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
   }
   return children;
 };
-function isPanelSplitterDragData(data) {
-  return data[panelSplitterDragDataSymbol] === true;
-}
 function getTextDirection(element) {
   var _window$getComputedSt = window.getComputedStyle(element),
     direction = _window$getComputedSt.direction;
@@ -184,7 +183,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
    * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
    * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context can be removed.
    */
-  var onDoubleClick = (0, _react.useContext)(_context.OnDoubleClickContext);
+  var onDoubleClick = (0, _react.useContext)(_onDoubleClickContext.OnDoubleClickContext);
 
   // Storing the initial `clientX` on `mousedown` events, to workaround a bug caused by some browser extensions
   // where the `dragstart` event incorrectly returns `0` for the `clientX` location.
@@ -225,7 +224,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         _preventUnhandled.preventUnhandled.start();
       },
       getInitialData: function getInitialData() {
-        var initialWidth = (0, _getWidth.getPixelWidth)(panel);
+        var initialWidth = (0, _getPixelWidth.getPixelWidth)(panel);
 
         /**
          * The drag calculations require the actual computed width of the element
@@ -249,7 +248,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
          * ⚠️ Note: We are not using the client locations (e.g. clientX) during `onDragStart`
          * because some browser extensions can cause the event properties to incorrectly return 0.
          */
-        (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
+        (0, _tinyInvariant.default)((0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data));
         onResizeStart === null || onResizeStart === void 0 || onResizeStart({
           initialWidth: source.data.initialWidth
         });
@@ -265,7 +264,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
          * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
          * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
          */
-        (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
+        (0, _tinyInvariant.default)((0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data));
         var _source$data = source.data,
           initialWidth = _source$data.initialWidth,
           resizeBounds = _source$data.resizeBounds,
@@ -276,7 +275,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
          * How wide the element would be if there were no width constraints,
          * based on the pointer's position.
          */
-        var targetWidth = (0, _getWidth.getWidthFromDragLocation)({
+        var targetWidth = (0, _getWidthFromDragLocation.getWidthFromDragLocation)({
           initialWidth: initialWidth,
           location: location,
           // The fallback of 0 won't be used due to the invariant, however we require one to satisfy the type.
@@ -290,9 +289,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
       },
       onDrop: function onDrop(_ref7) {
         var source = _ref7.source;
-        (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
+        (0, _tinyInvariant.default)((0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data));
         _preventUnhandled.preventUnhandled.stop();
-        var finalWidth = (0, _getWidth.getPixelWidth)(panel);
+        var finalWidth = (0, _getPixelWidth.getPixelWidth)(panel);
         onCompleteResize(finalWidth);
         onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd({
           initialWidth: source.data.initialWidth,
@@ -426,7 +425,6 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     className: (0, _runtime.ax)([lineStyles.root])
   })))), portal);
 };
-
 /**
  * _PanelSplitter_
  *
@@ -457,7 +455,7 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref8) {
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     portal = _useState0[0],
     setPortal = _useState0[1];
-  var context = (0, _react.useContext)(_context.PanelSplitterContext);
+  var context = (0, _react.useContext)(_panelSplitterContext.PanelSplitterContext);
   (0, _tinyInvariant.default)(context, 'Panel splitter context not set');
   var panelRef = context.panelRef,
     portalRef = context.portalRef,

package/dist/cjs/ui/page-layout/panel-splitter/provider.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PanelSplitterProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _context = require("./context");
+var _panelSplitterContext = require("./panel-splitter-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); }
 /**
  * Provides the context required for the panel splitter to work within a page layout slot.
@@ -42,7 +42,7 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
       shortcut: shortcut
     };
   }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled, providedPortalRef, shortcut]);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_context.PanelSplitterContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_panelSplitterContext.PanelSplitterContext.Provider, {
     value: context
   }, children), typeof providedPortalRef !== 'undefined' ? null : /*#__PURE__*/_react.default.createElement("div", {
     ref: portalRef

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

@@ -13,8 +13,9 @@ var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-obs
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _useToggleSideNav = require("../side-nav/use-toggle-side-nav");
-var _context = require("./context");
+var _onDoubleClickContext = require("./on-double-click-context");
 var _panelSplitter = require("./panel-splitter");
+var _panelSplitterContext = require("./panel-splitter-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); }
 /**
  * Namespaces to check for open layers that would interfere with the panel splitter.
@@ -93,7 +94,7 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
     _ref$shouldCollapseOn = _ref.shouldCollapseOnDoubleClick,
     shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn,
     tooltipContent = _ref.tooltipContent;
-  var context = (0, _react.useContext)(_context.PanelSplitterContext);
+  var context = (0, _react.useContext)(_panelSplitterContext.PanelSplitterContext);
   (0, _tinyInvariant.default)((context === null || context === void 0 ? void 0 : context.panelId) === _constants.sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
   var toggleSideNav = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'double-click'
@@ -107,7 +108,7 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
   if (hasOpenLayersInSideNavOrTopNav && isFhsEnabled) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_context.OnDoubleClickContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_onDoubleClickContext.OnDoubleClickContext.Provider, {
     value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
   }, /*#__PURE__*/_react.default.createElement(_panelSplitter.PanelSplitter, {
     label: label,

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

@@ -13,14 +13,15 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _elementContext = require("./side-nav/element-context");
+var _useSideNavRef = require("./side-nav/use-side-nav-ref");
+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); }
@@ -62,7 +63,7 @@ function Panel(_ref) {
     _ref$hasBorder = _ref.hasBorder,
     hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
   var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
@@ -75,11 +76,13 @@ function Panel(_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),
@@ -105,7 +108,7 @@ function Panel(_ref) {
       console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Panel` layout slot component has changed. This should not be changed after the component has been mounted.\n\n', 'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n');
     }
   }, [defaultWidth]);
-  var sideNavRef = (0, _elementContext.useSideNavRef)();
+  var sideNavRef = (0, _useSideNavRef.useSideNavRef)();
 
   /**
    * The minimum width that the panel can be resized to by the user.
@@ -158,7 +161,7 @@ function Panel(_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_panelLayoutVar,
     value: "0px",
     mediaQuery: _responsive.media.above.lg,

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

@@ -12,9 +12,9 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _responsive = require("@atlaskit/primitives/responsive");
 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 _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: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
@@ -25,7 +25,7 @@ function UNSAFE_Ribbon(_ref) {
     providedId = _ref.id,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '0px' : _ref$width;
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
@@ -42,7 +42,7 @@ function UNSAFE_Ribbon(_ref) {
   // ------ START UNSAFE STYLES ------
   // These styles are needed for the UNSAFE legacy use case for Jira + Confluence.
   // But also for the panel resizing constraint to work correctly.
-  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_ribbonVar,
     mediaQuery: _responsive.media.above.md,
     value: "0px",

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

@@ -11,11 +11,12 @@ 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 _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
-var _elementContext = require("./side-nav/element-context");
-var _isSideNavShortcutEnabledContext = require("./side-nav/is-side-nav-shortcut-enabled-context");
+var _isSideNavShortcutEnabledProvider = require("./side-nav/is-side-nav-shortcut-enabled-provider");
+var _sideNavElementProvider = require("./side-nav/side-nav-element-provider");
 var _toggleButtonProvider = require("./side-nav/toggle-button-provider");
 var _visibilityProvider = require("./side-nav/visibility-provider");
 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); }
@@ -34,12 +35,12 @@ function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    _ref$skipLinksLabel = _ref.skipLinksLabel,
-    skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
+    skipLinksLabel = _ref.skipLinksLabel,
     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') {
@@ -56,12 +57,12 @@ function Root(_ref) {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, {
     defaultCollapsed: defaultSideNavCollapsed
-  }, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_elementContext.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_isSideNavShortcutEnabledContext.IsSideNavShortcutEnabledProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_sideNavElementProvider.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_isSideNavShortcutEnabledProvider.IsSideNavShortcutEnabledProvider, {
     isSideNavShortcutEnabled: isSideNavShortcutEnabled
   }, /*#__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: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,

package/dist/cjs/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js

@@ -1,36 +1,14 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IsSideNavShortcutEnabledProvider = IsSideNavShortcutEnabledProvider;
-exports.useIsSideNavShortcutEnabled = useIsSideNavShortcutEnabled;
-var _react = _interopRequireWildcard(require("react"));
-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); }
+exports.IsSideNavShortcutEnabledContext = void 0;
+var _react = require("react");
 /**
  * Context for whether the side nav toggle shortcut is enabled.
  *
  * Used to share the `isSideNavShortcutEnabled` prop value from `Root` with other components,
  * so the visual keyboard shortcut in tooltips can be conditionally displayed.
  */
-var IsSideNavShortcutEnabledContext = /*#__PURE__*/(0, _react.createContext)(false);
-
-/**
- * Provider for the `IsSideNavShortcutEnabledContext`.
- */
-function IsSideNavShortcutEnabledProvider(_ref) {
-  var children = _ref.children,
-    isSideNavShortcutEnabled = _ref.isSideNavShortcutEnabled;
-  return /*#__PURE__*/_react.default.createElement(IsSideNavShortcutEnabledContext.Provider, {
-    value: isSideNavShortcutEnabled
-  }, children);
-}
-
-/**
- * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
- * is shared through context.
- */
-function useIsSideNavShortcutEnabled() {
-  return (0, _react.useContext)(IsSideNavShortcutEnabledContext);
-}
+var IsSideNavShortcutEnabledContext = exports.IsSideNavShortcutEnabledContext = /*#__PURE__*/(0, _react.createContext)(false);

package/dist/cjs/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IsSideNavShortcutEnabledProvider = IsSideNavShortcutEnabledProvider;
+var _react = _interopRequireDefault(require("react"));
+var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+function IsSideNavShortcutEnabledProvider(_ref) {
+  var children = _ref.children,
+    isSideNavShortcutEnabled = _ref.isSideNavShortcutEnabled;
+  return /*#__PURE__*/_react.default.createElement(_isSideNavShortcutEnabledContext.IsSideNavShortcutEnabledContext.Provider, {
+    value: isSideNavShortcutEnabled
+  }, children);
+}

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

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

package/dist/cjs/ui/page-layout/side-nav/{element-context.js → side-nav-element-provider.js}

@@ -5,25 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideNavElementProvider = SideNavElementProvider;
-exports.useSideNavRef = useSideNavRef;
 var _react = _interopRequireWildcard(require("react"));
+var _sideNavRefContext = require("./side-nav-ref-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); }
-var SideNavRefContext = /*#__PURE__*/(0, _react.createContext)({
-  current: null
-});
 function SideNavElementProvider(_ref) {
   var children = _ref.children;
   var sideNavRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement(SideNavRefContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_sideNavRefContext.SideNavRefContext.Provider, {
     value: sideNavRef
   }, children);
-}
-
-/**
- * Returns a ref for the side navigation that is accessible to other Page Layout slots.
- *
- * Used by the Panel to measure the SideNav when it is calculating its resize bounds.
- */
-function useSideNavRef() {
-  return (0, _react.useContext)(SideNavRefContext);
 }

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

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

package/dist/cjs/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.js

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

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavToggleButtonElement = void 0;
+var _react = require("react");
+/**
+ * Context for the side nav toggle button element.
+ * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
+ */
+var SideNavToggleButtonElement = exports.SideNavToggleButtonElement = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavVisibilityState = void 0;
+var _react = require("react");
+/**
+ * Context for the visibility of the side nav.
+ * State is initialised as null. This is used when the value has not been set yet - which is important to know for SSR.
+ */
+var SideNavVisibilityState = exports.SideNavVisibilityState = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -23,27 +23,28 @@ var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-obs
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _responsive = require("@atlaskit/primitives/responsive");
-var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
-var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
+var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
+var _topNavStartElement = require("../../../context/top-nav-start/top-nav-start-element");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 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");
-var _elementContext = require("./element-context");
 var _flyoutCloseDelayMs = require("./flyout-close-delay-ms");
-var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+var _setSideNavVisibilityState = require("./set-side-nav-visibility-state");
+var _sideNavToggleButtonElement = require("./side-nav-toggle-button-element");
 var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
-var _toggleButtonContext = require("./toggle-button-context");
+var _sideNavVisibilityState = require("./side-nav-visibility-state");
 var _useExpandSideNav = require("./use-expand-side-nav");
+var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
+var _useSideNavRef = require("./use-side-nav-ref");
 var _useSideNavToggleKeyboardShortcut = require("./use-side-nav-toggle-keyboard-shortcut");
 var _useSideNavVisibility2 = require("./use-side-nav-visibility");
 var _useSideNavVisibilityCallbacks = require("./use-side-nav-visibility-callbacks");
 var _useToggleSideNav = require("./use-toggle-side-nav");
-var _visibilityContext = require("./visibility-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); }
 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; }
@@ -111,7 +112,7 @@ function SideNavInternal(_ref) {
     providedId = _ref.id,
     canToggleWithShortcut = _ref.canToggleWithShortcut;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
   var expandSideNav = (0, _useExpandSideNav.useExpandSideNav)({
@@ -132,13 +133,13 @@ function SideNavInternal(_ref) {
       expandSideNav();
     });
   }, [expandSideNav]);
-  (0, _skipLinksContext.useSkipLinkInternal)({
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
     onBeforeNavigate: synchronouslyExpandSideNav
   });
-  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
-  var setSideNavState = (0, _react.useContext)(_visibilityContext.SetSideNavVisibilityState);
+  var sideNavState = (0, _react.useContext)(_sideNavVisibilityState.SideNavVisibilityState);
+  var setSideNavState = (0, _react.useContext)(_setSideNavVisibilityState.SetSideNavVisibilityState);
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
       defaultCollapsed: defaultCollapsed
     }),
@@ -195,10 +196,10 @@ function SideNavInternal(_ref) {
    * Used to share the side nav element with the `Panel`,
    * which observes the side nav to determine its maximum width.
    */
-  var sharedRef = (0, _elementContext.useSideNavRef)();
+  var sharedRef = (0, _useSideNavRef.useSideNavRef)();
   var mergedRef = (0, _mergeRefs.default)([navRef, sharedRef]);
-  var toggleButtonElement = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonElement);
-  var topNavStartElement = (0, _react.useContext)(_topNavStartContext.TopNavStartElement);
+  var toggleButtonElement = (0, _react.useContext)(_sideNavToggleButtonElement.SideNavToggleButtonElement);
+  var topNavStartElement = (0, _react.useContext)(_topNavStartElement.TopNavStartElement);
   var devTimeOnlyAttributes = {};
   var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
   var flyoutStateRef = (0, _react.useRef)({
@@ -695,7 +696,7 @@ function SideNavInternal(_ref) {
     canToggleWithShortcut: canToggleWithShortcut
   });
   // Used to conditionally display the keyboard shortcut in the SideNavPanelSplitter tooltip.
-  var isShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
+  var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -759,7 +760,7 @@ function SideNavInternal(_ref) {
     ref: mergedRef,
     "data-testid": testId,
     className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
-  }), /*#__PURE__*/_react.default.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  }), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: _responsive.media.above.md,
@@ -769,7 +770,7 @@ function SideNavInternal(_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.default.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  _react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_sideNavLayoutVar,
     value: "var(".concat(_constants.sideNavLiveWidthVar, ")")
   })