@atlaskit/navigation-system 7.2.1 → 8.0.0

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

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect } from 'react';
+import { createContext } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 /**
  * Provides a way to register and unregister skip links
@@ -6,56 +6,4 @@ import noop from '@atlaskit/ds-lib/noop';
 export var SkipLinksContext = /*#__PURE__*/createContext({
   registerSkipLink: noop,
   unregisterSkipLink: noop
-});
-var useSkipLinks = function useSkipLinks() {
-  return 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.
- */
-export var 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;
-  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.
- */
-export var useSkipLink = function useSkipLink(id, label, listIndex) {
-  useSkipLinkInternal({
-    id: id,
-    label: label,
-    listIndex: listIndex
-  });
-};
+});

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

@@ -0,0 +1,39 @@
+import { useContext, useEffect } from 'react';
+import { SkipLinksContext } from './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.
+ */
+export var useSkipLinkInternal = function useSkipLinkInternal(_ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    listIndex = _ref.listIndex,
+    onBeforeNavigate = _ref.onBeforeNavigate,
+    isHidden = _ref.isHidden;
+  var _useContext = useContext(SkipLinksContext),
+    registerSkipLink = _useContext.registerSkipLink,
+    unregisterSkipLink = _useContext.unregisterSkipLink;
+  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/esm/context/skip-links/use-skip-link.js

@@ -0,0 +1,12 @@
+import { useSkipLinkInternal } from './use-skip-link-internal';
+
+/**
+ * Call `useSkipLink` to register a skip link for important elements on the page.
+ */
+export var useSkipLink = function useSkipLink(id, label, listIndex) {
+  useSkipLinkInternal({
+    id: id,
+    label: label,
+    listIndex: listIndex
+  });
+};

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

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

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

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { TopNavStartAttachRef, TopNavStartElement } from './top-nav-start-context';
+import { TopNavStartAttachRef } from './top-nav-start-attach-ref';
+import { TopNavStartElement } from './top-nav-start-element';
 
 /**
  * Provider for the TopNavStart container element contexts.

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

@@ -7,12 +7,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 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';

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

@@ -3,12 +3,13 @@ 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 { 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"

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,9 @@ 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 { 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"
 };

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

@@ -6,13 +6,13 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 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';

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

@@ -3,12 +3,11 @@ import "./ribbon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 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"
 };
@@ -22,9 +21,6 @@ export function UNSAFE_Ribbon(_ref) {
     providedId: providedId
   });
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
-  if (!fg('platform_dst_nav4_ribbon_slot')) {
-    return null;
-  }
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,

package/dist/esm/ui/page-layout/root.compiled.css

@@ -4,5 +4,5 @@
 ._1tke1kxc{min-height:100vh}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
-@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}
+@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}}
+@media (min-width:90rem){._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}

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

@@ -3,20 +3,18 @@ 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';
 
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 export var gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
-  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
-  ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
+  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
 /**
@@ -59,7 +57,7 @@ export function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: ax([styles.root, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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.