@atlaskit/navigation-system 7.3.0 → 8.1.0

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

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var TopNavStartElement = /*#__PURE__*/createContext(null);

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

@@ -1 +1,4 @@
-export { Button as TopNavButton, LinkButton as TopNavLinkButton, IconButton as TopNavIconButton, LinkIconButton as TopNavLinkIconButton } from '../../ui/top-nav-items/themed/migration';
+export { Button as TopNavButton } from '../../ui/top-nav-items/themed/button';
+export { LinkButton as TopNavLinkButton } from '../../ui/top-nav-items/themed/link-button';
+export { IconButton as TopNavIconButton } from '../../ui/top-nav-items/themed/icon-button';
+export { LinkIconButton as TopNavLinkIconButton } from '../../ui/top-nav-items/themed/link-icon-button';

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

@@ -1,2 +1,2 @@
-export { useSkipLinkId } from '../../ui/page-layout/id-utils';
-export { useSkipLink } from '../../context/skip-links/skip-links-context';
+export { useSkipLinkId } from '../../ui/page-layout/use-skip-link-id';
+export { useSkipLink } from '../../context/skip-links/use-skip-link';

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

@@ -6,13 +6,14 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
-import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
+import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
+import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
-import { useLayoutId } from './id-utils';
 import { PanelSplitterProvider } from './panel-splitter/provider';
+import { useLayoutId } from './use-layout-id';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
 import { useSafeDefaultWidth } from './use-safe-default-width';
 var panelSplitterResizingVar = '--n_asdRsz';
@@ -80,11 +81,13 @@ export 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
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = useRef(null);
   var _useState = useState(defaultWidth),

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

@@ -3,12 +3,14 @@ import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
-import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
+import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
+import { HoistCssVarToLocalGrid } from './hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from './hoist-utils';
-import { useLayoutId } from './id-utils';
+import { useLayoutId } from './use-layout-id';
 var styles = {
   root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
   fullHeightSidebar: "_1pby11wp"
@@ -36,11 +38,13 @@ export function Banner(_ref) {
 
   /**
    * 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
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,

package/dist/esm/ui/page-layout/dangerously-hoist-css-var-to-document-root.js

@@ -0,0 +1,31 @@
+import React from 'react';
+var getCssStringValue = function getCssStringValue(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+};
+export var 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>
+   *   {css1}
+   *   {css2}
+   * </style>
+   *
+   * React will insert an empty HTML comment in between the text in SSR.
+   * This is not a valid tag and will break the page.
+   * <style>foo<!-- -->bar</style>
+   */
+  var style = ":root { ".concat(variableName, ": ").concat(getCssStringValue(value), " }");
+  if (mediaQuery && responsiveValue) {
+    style += " ".concat(mediaQuery, " { :root { ").concat(variableName, ": ").concat(getCssStringValue(responsiveValue), " } }");
+  }
+  return (
+    /*#__PURE__*/
+    // Using a global style is required for SSR, as we can't use React hooks
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+    React.createElement("style", null, style)
+  );
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { gridRootId } from './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`.
+ */
+export var HoistCssVarToLocalGrid = function HoistCssVarToLocalGrid(_ref) {
+  var variableName = _ref.variableName,
+    value = _ref.value;
+  return /*#__PURE__*/React.createElement("style", null, "#".concat(gridRootId, " { ").concat(variableName, ": ").concat(value, "px }"));
+};

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

@@ -3,9 +3,10 @@ import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
-import { useSkipLink } from '../../../context/skip-links/skip-links-context';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
-import { useLayoutId } from '../id-utils';
+import { useLayoutId } from '../use-layout-id';
 var mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
 };
@@ -17,7 +18,7 @@ export 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 ? fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id;
   var id = useLayoutId({

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

@@ -0,0 +1,7 @@
+/**
+ * Returns the computed width of an element in pixels.
+ */
+export var getPixelWidth = function getPixelWidth(element) {
+  // Always returns an integer. Returns 0 if element is hidden / removed.
+  return element.offsetWidth;
+};

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

@@ -1,7 +1,3 @@
-/**
- * ⚠️ 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.
- */
 export var getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
@@ -19,11 +15,4 @@ export var getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   // 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.
- */
-export var getPixelWidth = function getPixelWidth(element) {
-  // Always returns an integer. Returns 0 if element is hidden / removed.
-  return element.offsetWidth;
 };

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

@@ -0,0 +1,4 @@
+import { panelSplitterDragDataSymbol } from './panel-splitter-drag-symbol';
+export function isPanelSplitterDragData(data) {
+  return data[panelSplitterDragDataSymbol] === true;
+}

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

@@ -1,13 +1,5 @@
 import { createContext } from '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.
- */
-export var PanelSplitterContext = /*#__PURE__*/createContext(null);
-
 /**
  * Context for the panel splitter's double click handler. Only internally exported.
  *

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

@@ -0,0 +1,9 @@
+import { createContext } from '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.
+ */
+export var PanelSplitterContext = /*#__PURE__*/createContext(null);

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

@@ -0,0 +1 @@
+export var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');

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

@@ -27,11 +27,18 @@ import TooltipContainer from '@atlaskit/tooltip/TooltipContainer';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { contentInsetBlockStart } from '../constants';
-import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
 import { getPercentageWithinPixelBounds } from './get-percentage-within-pixel-bounds';
-import { getPixelWidth, getWidthFromDragLocation } from './get-width';
+import { getPixelWidth } from './get-pixel-width';
+import { getWidthFromDragLocation } from './get-width-from-drag-location';
+import { isPanelSplitterDragData } from './is-panel-splitter-drag-data';
 import { createKeyboardResizeManager } from './keyboard-resize-manager';
+import { OnDoubleClickContext } from './on-double-click-context';
+import { PanelSplitterContext } from './panel-splitter-context';
+import { panelSplitterDragDataSymbol } from './panel-splitter-drag-symbol';
+function signPanelSplitterDragData(data) {
+  return _objectSpread(_objectSpread({}, data), {}, _defineProperty({}, panelSplitterDragDataSymbol, true));
+}
 var containerStyles = {
   root: "_12ji1r31 _1qu2glyw _12y31o36 _1e0cglyw _kqswstnw _u7coidpf _152tidpf _1pbykb7n _181n1ule",
   positionEnd: "_rjxpftgi",
@@ -49,10 +56,6 @@ var lineStyles = {
 var tooltipStyles = {
   root: "_ahbq196n _1bsb1ris"
 };
-var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
-function signPanelSplitterDragData(data) {
-  return _objectSpread(_objectSpread({}, data), {}, _defineProperty({}, panelSplitterDragDataSymbol, true));
-}
 var PanelSplitterTooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -122,9 +125,6 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
   }
   return children;
 };
-export function isPanelSplitterDragData(data) {
-  return data[panelSplitterDragDataSymbol] === true;
-}
 function getTextDirection(element) {
   var _window$getComputedSt = window.getComputedStyle(element),
     direction = _window$getComputedSt.direction;
@@ -416,7 +416,6 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     className: ax([lineStyles.root])
   })))), portal);
 };
-
 /**
  * _PanelSplitter_
  *

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

@@ -1,5 +1,5 @@
 import React, { Fragment, useMemo, useRef } from 'react';
-import { PanelSplitterContext } from './context';
+import { PanelSplitterContext } from './panel-splitter-context';
 /**
  * Provides the context required for the panel splitter to work within a page layout slot.
  *

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

@@ -5,8 +5,9 @@ import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { openLayerObserverSideNavNamespace, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavPanelSplitterId } from '../constants';
 import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';
-import { OnDoubleClickContext, PanelSplitterContext } from './context';
+import { OnDoubleClickContext } from './on-double-click-context';
 import { PanelSplitter } from './panel-splitter';
+import { PanelSplitterContext } from './panel-splitter-context';
 
 /**
  * Namespaces to check for open layers that would interfere with the panel splitter.

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

@@ -5,14 +5,15 @@ import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
-import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
+import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
+import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
-import { useLayoutId } from './id-utils';
 import { PanelSplitterProvider } from './panel-splitter/provider';
-import { useSideNavRef } from './side-nav/element-context';
+import { useSideNavRef } from './side-nav/use-side-nav-ref';
+import { useLayoutId } from './use-layout-id';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
 import { useSafeDefaultWidth } from './use-safe-default-width';
 var panelSplitterResizingVar = '--n_pnlRsz';
@@ -66,11 +67,13 @@ export 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
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = useRef(null);
   var _useState = useState(defaultWidth),

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

@@ -5,9 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { media } from '@atlaskit/primitives/responsive';
 import { localSlotLayers, UNSAFE_ribbonVar } from './constants';
+import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
-import { useLayoutId } from './id-utils';
+import { useLayoutId } from './use-layout-id';
 var styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

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

@@ -3,11 +3,12 @@ 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 { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
-import { SideNavElementProvider } from './side-nav/element-context';
-import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-context';
+import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-provider';
+import { SideNavElementProvider } from './side-nav/side-nav-element-provider';
 import { SideNavToggleButtonProvider } from './side-nav/toggle-button-provider';
 import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 
@@ -26,12 +27,12 @@ export 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 : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -53,7 +54,7 @@ export function Root(_ref) {
   }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
-    label: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

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

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import { createContext } from 'react';
 
 /**
  * Context for whether the side nav toggle shortcut is enabled.
@@ -6,23 +6,4 @@ import React, { createContext, useContext } from 'react';
  * 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__*/createContext(false);
-
-/**
- * Provider for the `IsSideNavShortcutEnabledContext`.
- */
-export function IsSideNavShortcutEnabledProvider(_ref) {
-  var children = _ref.children,
-    isSideNavShortcutEnabled = _ref.isSideNavShortcutEnabled;
-  return /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledContext.Provider, {
-    value: isSideNavShortcutEnabled
-  }, children);
-}
-
-/**
- * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
- * is shared through context.
- */
-export function useIsSideNavShortcutEnabled() {
-  return useContext(IsSideNavShortcutEnabledContext);
-}
+export var IsSideNavShortcutEnabledContext = /*#__PURE__*/createContext(false);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IsSideNavShortcutEnabledContext } from './is-side-nav-shortcut-enabled-context';
+export function IsSideNavShortcutEnabledProvider(_ref) {
+  var children = _ref.children,
+    isSideNavShortcutEnabled = _ref.isSideNavShortcutEnabled;
+  return /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledContext.Provider, {
+    value: isSideNavShortcutEnabled
+  }, children);
+}

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

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+import __noop from '@atlaskit/ds-lib/noop';
+export var SetSideNavVisibilityState = /*#__PURE__*/createContext(__noop);

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

@@ -0,0 +1,9 @@
+import React, { useRef } from 'react';
+import { SideNavRefContext } from './side-nav-ref-context';
+export function SideNavElementProvider(_ref) {
+  var children = _ref.children;
+  var sideNavRef = useRef(null);
+  return /*#__PURE__*/React.createElement(SideNavRefContext.Provider, {
+    value: sideNavRef
+  }, children);
+}

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

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export var SideNavRefContext = /*#__PURE__*/createContext({
+  current: null
+});

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

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+import __noop from '@atlaskit/ds-lib/noop';
+export var SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);

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

@@ -0,0 +1,7 @@
+import { createContext } from '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.
+ */
+export var SideNavToggleButtonElement = /*#__PURE__*/createContext(null);

package/dist/esm/ui/page-layout/side-nav/{visibility-context.js → side-nav-visibility-state.js}

@@ -1,12 +1,6 @@
 import { createContext } from 'react';
-import __noop from '@atlaskit/ds-lib/noop';
 /**
  * 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.
  */
-export var SideNavVisibilityState = /*#__PURE__*/createContext(null);
-
-/**
- * Sets the visibility of the side nav.
- */
-export var SetSideNavVisibilityState = /*#__PURE__*/createContext(__noop);
+export var SideNavVisibilityState = /*#__PURE__*/createContext(null);

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

@@ -16,27 +16,28 @@ import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlas
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { media } from '@atlaskit/primitives/responsive';
-import { useSkipLinkInternal } from '../../../context/skip-links/skip-links-context';
-import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-context';
+import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
+import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot } from '../hoist-utils';
-import { useLayoutId } from '../id-utils';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
+import { useLayoutId } from '../use-layout-id';
 import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-var-on-root-element';
 import { useSafeDefaultWidth } from '../use-safe-default-width';
-import { useSideNavRef } from './element-context';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
-import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
+import { SideNavToggleButtonElement } from './side-nav-toggle-button-element';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
-import { SideNavToggleButtonElement } from './toggle-button-context';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
 import { useExpandSideNav } from './use-expand-side-nav';
+import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
+import { useSideNavRef } from './use-side-nav-ref';
 import { useSideNavToggleKeyboardShortcut } from './use-side-nav-toggle-keyboard-shortcut';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useSideNavVisibilityCallbacks } from './use-side-nav-visibility-callbacks';
 import { useToggleSideNav } from './use-toggle-side-nav';
-import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 var panelSplitterResizingVar = '--n_snvRsz';
 // Used to share the side nav width with the panel splitter, which is rendered outside the side nav element
 // but positioned to stay at its right edge.

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

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { SideNavToggleButtonAttachRef, SideNavToggleButtonElement } from './toggle-button-context';
+import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
+import { SideNavToggleButtonElement } from './side-nav-toggle-button-element';
 
 /**
  * Provider for the side nav toggle button contexts.

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

@@ -12,13 +12,13 @@ import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { IconButton } from '../../top-nav-items/themed/migration';
-import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { IconButton } from '../../top-nav-items/themed/icon-button';
+import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
-import { SideNavToggleButtonAttachRef } from './toggle-button-context';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
+import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
-import { SideNavVisibilityState } from './visibility-context';
 var toggleButtonTooltipOptions = {
   // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
   // when moving the mouse from the top bar to the side nav.

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

@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react';
-import { SetSideNavVisibilityState } from './visibility-context';
+import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
 /**
  * __useExpandSideNav__
  *

package/dist/esm/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { IsSideNavShortcutEnabledContext } from './is-side-nav-shortcut-enabled-context';
+
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+export function useIsSideNavShortcutEnabled() {
+  return useContext(IsSideNavShortcutEnabledContext);
+}

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

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { SideNavRefContext } from './side-nav-ref-context';
+
+/**
+ * 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.
+ */
+export function useSideNavRef() {
+  return useContext(SideNavRefContext);
+}

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -3,7 +3,7 @@ import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
 
 /**

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

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { SideNavVisibilityState } from './visibility-context';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
 /**
  * This hook is intended to be used internally within the `@atlaskit/navigation-system` package.
  *

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

@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react';
-import { SetSideNavVisibilityState } from './visibility-context';
+import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
 /**
  * __useToggleSideNav__
  *

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
-
+import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
 /**
  * Manages the side nav visibility state and provides the context.
  */

package/dist/esm/ui/page-layout/top-nav/top-nav-end.js

@@ -13,7 +13,7 @@ import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/comp
 import { List } from '../../../components/list';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
-import { IconButton } from '../../top-nav-items/themed/migration';
+import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { openLayerObserverTopNavEndNamespace } from '../constants';
 var containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",