@atlaskit/navigation-system 7.3.0 → 8.1.0

package/dist/es2019/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 const SkipLinksContext = /*#__PURE__*/createContext({
   registerSkipLink: noop,
   unregisterSkipLink: noop
-});
-const useSkipLinks = () => 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 const useSkipLinkInternal = ({
-  id,
-  label,
-  listIndex,
-  onBeforeNavigate,
-  isHidden
-}) => {
-  const {
-    registerSkipLink,
-    unregisterSkipLink
-  } = useSkipLinks();
-  useEffect(() => {
-    if (isHidden) {
-      /**
-       * Skip links are hidden for slots with 0 height or width.
-       * They should not be registered.
-       */
-      return;
-    }
-    registerSkipLink({
-      id,
-      label,
-      listIndex,
-      onBeforeNavigate,
-      isHidden
-    });
-    return () => {
-      unregisterSkipLink(id);
-    };
-  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
-};
-
-/**
- * Call `useSkipLink` to register a skip link for important elements on the page.
- */
-export const useSkipLink = (id, label, listIndex) => {
-  useSkipLinkInternal({
-    id,
-    label,
-    listIndex
-  });
-};
+});

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

@@ -0,0 +1,41 @@
+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 const useSkipLinkInternal = ({
+  id,
+  label,
+  listIndex,
+  onBeforeNavigate,
+  isHidden
+}) => {
+  const {
+    registerSkipLink,
+    unregisterSkipLink
+  } = useContext(SkipLinksContext);
+  useEffect(() => {
+    if (isHidden) {
+      /**
+       * Skip links are hidden for slots with 0 height or width.
+       * They should not be registered.
+       */
+      return;
+    }
+    registerSkipLink({
+      id,
+      label,
+      listIndex,
+      onBeforeNavigate,
+      isHidden
+    });
+    return () => {
+      unregisterSkipLink(id);
+    };
+  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
+};

package/dist/es2019/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 const useSkipLink = (id, label, listIndex) => {
+  useSkipLinkInternal({
+    id,
+    label,
+    listIndex
+  });
+};

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

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

@@ -4,13 +4,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';
 const panelSplitterResizingVar = '--n_asdRsz';
@@ -76,11 +77,13 @@ export function Aside({
    * 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,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   const ref = useRef(null);
   const [width, setWidth] = useState(defaultWidth);

package/dist/es2019/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';
 const styles = {
   root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
   fullHeightSidebar: "_1pby11wp"
@@ -36,11 +38,13 @@ export function Banner({
 
   /**
    * 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,
     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/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,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';
 const mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
 };
@@ -16,7 +17,7 @@ const mainElementStyles = {
 export function Main({
   children,
   xcss,
-  skipLinkLabel = 'Main Content',
+  skipLinkLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content',
   testId,
   id: providedId
 }) {

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

@@ -3,14 +3,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';
 const panelSplitterResizingVar = '--n_pnlRsz';
@@ -61,11 +62,13 @@ export function Panel({
    * 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,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   const ref = useRef(null);
   const [width, setWidth] = useState(defaultWidth);

package/dist/es2019/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';
 const styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

package/dist/es2019/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';
 
@@ -25,11 +26,12 @@ export function Root({
   children,
   xcss,
   UNSAFE_dangerouslyHoistSlotSizes = false,
-  skipLinksLabel = 'Skip to:',
+  skipLinksLabel,
   testId,
   defaultSideNavCollapsed,
   isSideNavShortcutEnabled = false
 }) {
+  const resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   const ref = useRef(null);
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
@@ -60,7 +62,7 @@ This message will not be displayed in production.
   }, /*#__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/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);