@atlaskit/navigation-system 7.3.0 → 8.1.0

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.

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

@@ -5,16 +5,19 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { useSkipLink } 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 { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
-import { useCustomTheme, useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme';
+import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
+import { useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme-new';
 import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } 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 { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+import { useLayoutId } from '../use-layout-id';
+
 /**
  * Styles for the container for the top nav items.
  *
@@ -39,17 +42,21 @@ function TopNavOld({
   skipLinkLabel = 'Top Bar',
   testId,
   id: providedId,
-  UNSAFE_theme
+  customTheme: customThemeConfig
 }) {
   const isFhsEnabled = useIsFhsEnabled();
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
     providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  const customTheme = useCustomTheme(UNSAFE_theme);
+  const customTheme = useCustomTheme(customThemeConfig);
   const {
     isExpandedOnDesktop
   } = useSideNavVisibility();
@@ -89,17 +96,21 @@ function TopNavNew({
   skipLinkLabel = 'Top Bar',
   testId,
   id: providedId,
-  UNSAFE_theme
+  customTheme: customThemeConfig
 }) {
   const isFhsEnabled = useIsFhsEnabled();
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
     providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  const customTheme = useCustomThemeNew(UNSAFE_theme);
+  const customTheme = useCustomThemeNew(customThemeConfig);
   const hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
   const {
     isExpandedOnDesktop

package/dist/es2019/ui/page-layout/use-layout-id.js

@@ -0,0 +1,15 @@
+import { useSkipLinkId } from './use-skip-link-id';
+
+/**
+ * Returns an ID for use by the layout element and skip links.
+ *
+ * If the consumer has already provided an ID, it will be used instead.
+ * Otherwise, a unique ID will be returned.
+ */
+export function useLayoutId({
+  providedId
+} = {}) {
+  const uniqueId = useSkipLinkId();
+  const id = providedId ? providedId : uniqueId;
+  return id;
+}

package/dist/es2019/ui/page-layout/use-resizing-width-css-var-on-root-element.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { isPanelSplitterDragData } from './panel-splitter/panel-splitter';
+import { isPanelSplitterDragData } from './panel-splitter/is-panel-splitter-drag-data';
 
 /**
  * Monitors resizing on the panel splitter with the provided `panelId`

package/dist/es2019/ui/page-layout/{id-utils.js → use-skip-link-id.js}

@@ -9,18 +9,4 @@ import { useId } from '@atlaskit/ds-lib/use-id';
 export function useSkipLinkId() {
   const uniqueId = useId();
   return uniqueId;
-}
-
-/**
- * Returns an ID for use by the layout element and skip links.
- *
- * If the consumer has already provided an ID, it will be used instead.
- * Otherwise, a unique ID will be returned.
- */
-export function useLayoutId({
-  providedId
-} = {}) {
-  const uniqueId = useSkipLinkId();
-  const id = providedId ? providedId : uniqueId;
-  return id;
 }

package/dist/es2019/ui/top-nav-items/app-switcher.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import AppSwitcherIcon from '@atlaskit/icon/core/app-switcher';
-import { IconButton } from './themed/migration';
+import { IconButton } from './themed/icon-button';
 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/top-nav-items/chat-button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ChatIcon from '@atlaskit/icon/core/ai-chat';
 import { ListItem } from '../../components/list-item';
-import { Button } from './themed/migration';
+import { Button } from './themed/button';
 
 /**
  * __Chat button__

package/dist/es2019/ui/top-nav-items/create-button.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import AddIcon from '@atlaskit/icon/core/add';
-import { Button } from './themed/migration';
+import { Button } from './themed/button';
 /**
  * __Create button__
  *

package/dist/es2019/ui/top-nav-items/end-item.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, Fragment } from 'react';
 import { ListItem } from '../../components/list-item';
-import { IconButton } from './themed/migration';
+import { IconButton } from './themed/icon-button';
 /**
  * __EndItem__
  *

package/dist/es2019/ui/top-nav-items/log-in.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import LogInIcon from '@atlaskit/icon/core/log-in';
 import { ListItem } from '../../components/list-item';
-import { LinkIconButton } from './themed/migration';
+import { LinkIconButton } from './themed/link-icon-button';
 /**
  * __Log in__
  *

package/dist/es2019/ui/top-nav-items/search.js

@@ -7,7 +7,7 @@ import SearchIcon from '@atlaskit/icon/core/search';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { IconButton } from './themed/migration';
+import { IconButton } from './themed/icon-button';
 const styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
   rootT26Shape: "_2rko1qi0",