@atlaskit/navigation-system 7.2.1 → 8.0.0

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

@@ -1,5 +1,6 @@
 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/es2019/context/top-nav-start/top-nav-start-element.js

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

package/dist/es2019/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/es2019/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/es2019/ui/page-layout/aside.js

@@ -5,12 +5,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';
 const panelSplitterResizingVar = '--n_asdRsz';

package/dist/es2019/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';
 const styles = {
   root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
   fullHeightSidebar: "_1pby11wp"

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

@@ -1,24 +1,5 @@
 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 const HoistCssVarToLocalGrid = ({
-  variableName,
-  value
-}) => /*#__PURE__*/React.createElement("style", null, `#${gridRootId} { ${variableName}: ${value}px }`);
 const getCssStringValue = value => typeof value === 'number' ? `${value}px` : value;
-
-/**
- * Hoists CSS variables to the document root. This is support the legacy edge case of monolith pages being injected as a
- * sibling to the page layout, as opposed to within the `Main` slot.
- */
 export const DangerouslyHoistCssVarToDocumentRoot = ({
   variableName,
   value,

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

@@ -0,0 +1,15 @@
+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 const HoistCssVarToLocalGrid = ({
+  variableName,
+  value
+}) => /*#__PURE__*/React.createElement("style", null, `#${gridRootId} { ${variableName}: ${value}px }`);

package/dist/es2019/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';
 const mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
 };

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

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

package/dist/es2019/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 const getWidthFromDragLocation = ({
   initialWidth,
   location,
@@ -20,11 +16,4 @@ export const getWidthFromDragLocation = ({
   // 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 const getPixelWidth = element => {
-  // Always returns an integer. Returns 0 if element is hidden / removed.
-  return element.offsetWidth;
 };

package/dist/es2019/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/es2019/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 const PanelSplitterContext = /*#__PURE__*/createContext(null);
-
 /**
  * Context for the panel splitter's double click handler. Only internally exported.
  *

package/dist/es2019/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 const PanelSplitterContext = /*#__PURE__*/createContext(null);

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

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

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

@@ -21,11 +21,21 @@ 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 {
+    ...data,
+    [panelSplitterDragDataSymbol]: true
+  };
+}
 const containerStyles = {
   root: "_12ji1r31 _1qu2glyw _12y31o36 _1e0cglyw _kqswstnw _u7coidpf _152tidpf _1pbykb7n _181n1ule",
   positionEnd: "_rjxpftgi",
@@ -43,13 +53,6 @@ const lineStyles = {
 const tooltipStyles = {
   root: "_ahbq196n _1bsb1ris"
 };
-const panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
-function signPanelSplitterDragData(data) {
-  return {
-    ...data,
-    [panelSplitterDragDataSymbol]: true
-  };
-}
 const PanelSplitterTooltip = /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -119,9 +122,6 @@ const MaybeTooltip = ({
   }
   return children;
 };
-export function isPanelSplitterDragData(data) {
-  return data[panelSplitterDragDataSymbol] === true;
-}
 function getTextDirection(element) {
   const {
     direction
@@ -402,7 +402,6 @@ const PortaledPanelSplitter = ({
     className: ax([lineStyles.root])
   })))), portal);
 };
-
 /**
  * _PanelSplitter_
  *

package/dist/es2019/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/es2019/ui/page-layout/panel-splitter/side-nav-panel-splitter.js

@@ -4,8 +4,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/es2019/ui/page-layout/panel.js

@@ -4,13 +4,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';
 const panelSplitterResizingVar = '--n_pnlRsz';

package/dist/es2019/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';
 const styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };
@@ -22,9 +21,6 @@ export function UNSAFE_Ribbon({
     providedId
   });
   const 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/es2019/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/es2019/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 const gridRootId = 'unsafe-design-system-page-layout-root';
 const 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"
 };
 
 /**
@@ -66,7 +64,7 @@ This message will not be displayed in production.
     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/es2019/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,24 +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.
  */
-const IsSideNavShortcutEnabledContext = /*#__PURE__*/createContext(false);
-
-/**
- * Provider for the `IsSideNavShortcutEnabledContext`.
- */
-export function IsSideNavShortcutEnabledProvider({
-  children,
-  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 const IsSideNavShortcutEnabledContext = /*#__PURE__*/createContext(false);

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

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

package/dist/es2019/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 const SetSideNavVisibilityState = /*#__PURE__*/createContext(__noop);

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

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

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

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

package/dist/es2019/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 const SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);

package/dist/es2019/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 const SideNavToggleButtonElement = /*#__PURE__*/createContext(null);

package/dist/es2019/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 const SideNavVisibilityState = /*#__PURE__*/createContext(null);
-
-/**
- * Sets the visibility of the side nav.
- */
-export const SetSideNavVisibilityState = /*#__PURE__*/createContext(__noop);
+export const SideNavVisibilityState = /*#__PURE__*/createContext(null);

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

@@ -12,27 +12,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';
 const 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/es2019/ui/page-layout/side-nav/toggle-button-provider.js

@@ -1,5 +1,6 @@
 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/es2019/ui/page-layout/side-nav/toggle-button.js

@@ -8,13 +8,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';
 const 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/es2019/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/es2019/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/es2019/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/es2019/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/es2019/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/es2019/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/es2019/ui/page-layout/side-nav/visibility-provider.js

@@ -1,6 +1,6 @@
 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/es2019/ui/page-layout/top-nav/top-nav-end.js

@@ -12,7 +12,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';
 const containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js

@@ -6,13 +6,13 @@ import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
-import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
+import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-attach-ref';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useHasCustomTheme } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { openLayerObserverTopNavStartNamespace } from '../constants';
+import { SideNavVisibilityState } from '../side-nav/side-nav-visibility-state';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
 /**
  * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.