@atlaskit/page-layout 4.3.0 → 4.3.2

package/dist/es2019/components/slots/right-panel.js

@@ -8,7 +8,8 @@ import { useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { DEFAULT_RIGHT_PANEL_WIDTH, RIGHT_PANEL, RIGHT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH } from '../../common/constants';
-import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
+import { getPageLayoutSlotSelector } from '../../common/get-page-layout-slot-selector';
+import { resolveDimension } from '../../common/resolve-dimension';
 import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
@@ -32,6 +33,8 @@ const fixedStyles = css({
  *
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
+ *
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
  */
 const RightPanel = props => {
   const {

package/dist/es2019/components/slots/right-sidebar.js

@@ -8,7 +8,8 @@ import { useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { BANNER_HEIGHT, DEFAULT_RIGHT_SIDEBAR_WIDTH, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
-import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
+import { getPageLayoutSlotSelector } from '../../common/get-page-layout-slot-selector';
+import { resolveDimension } from '../../common/resolve-dimension';
 import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
@@ -59,6 +60,8 @@ const fixedOuterStyles = css({
  *
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
+ *
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
  */
 const RightSidebar = props => {
   const {

package/dist/es2019/components/slots/top-navigation.js

@@ -8,7 +8,8 @@ import { useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { BANNER_HEIGHT, DEFAULT_TOP_NAVIGATION_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT } from '../../common/constants';
-import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
+import { getPageLayoutSlotSelector } from '../../common/get-page-layout-slot-selector';
+import { resolveDimension } from '../../common/resolve-dimension';
 import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
@@ -36,6 +37,8 @@ const fixedStyles = css({
  *
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
+ *
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
  */
 const TopNavigation = props => {
   const {

package/dist/es2019/controllers/index.js

@@ -1,5 +1,8 @@
 export { default as publishGridState } from './use-page-layout-grid';
-export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock } from './sidebar-resize-context';
+export { SidebarResizeContext } from './sidebar-resize-context';
+export { usePageLayoutResize } from './use-page-layout-resize';
+export { useLeftSidebarFlyoutLock } from './use-left-sidebar-flyout-lock';
 export { SidebarResizeController } from './sidebar-resize-controller';
-export { useSkipLinks, useSkipLink } from './skip-link-context';
+export { useSkipLink } from './skip-link-context';
+export { useSkipLinks } from './use-skip-links';
 export { SkipLinksController } from './skip-link-controller';

package/dist/es2019/controllers/sidebar-resize-context.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect } from 'react';
+import { createContext } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 const leftSidebarState = {
   isFlyoutOpen: false,
@@ -10,7 +10,6 @@ const leftSidebarState = {
   isFixed: true,
   hasInit: false
 };
-
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
@@ -19,46 +18,4 @@ export const SidebarResizeContext = /*#__PURE__*/createContext({
   leftSidebarState,
   setLeftSidebarState: noop,
   toggleLeftSidebar: noop
-});
-export const usePageLayoutResize = () => {
-  const {
-    setLeftSidebarState,
-    ...context
-  } = useContext(SidebarResizeContext);
-  return context;
-};
-
-/**
- * _**WARNING:**_ This hook is intended as a temporary solution and
- * is likely to be removed in a future version of page-layout.
- *
- * ---
- *
- * This hook will prevent the left sidebar from automatically collapsing
- * when it is in a flyout state.
- *
- * The intended use case for this hook is to allow popup menus in the
- * left sidebar to be usable while it is in a flyout state.
- *
- * ## Usage
- * The intended usage is to use this hook within the popup component
- * you are rendering. This way the left sidebar will be locked for
- * as long as the popup is open.
- */
-export const useLeftSidebarFlyoutLock = () => {
-  const {
-    setLeftSidebarState
-  } = useContext(SidebarResizeContext);
-  useEffect(() => {
-    setLeftSidebarState(current => ({
-      ...current,
-      flyoutLockCount: current.flyoutLockCount + 1
-    }));
-    return () => {
-      setLeftSidebarState(current => ({
-        ...current,
-        flyoutLockCount: current.flyoutLockCount - 1
-      }));
-    };
-  }, [setLeftSidebarState]);
-};
+});

package/dist/es2019/controllers/sidebar-resize-controller.js

@@ -4,7 +4,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { isReducedMotion } from '@atlaskit/motion';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_COLLAPSING } from '../common/constants';
-import { getPageLayoutSlotCSSSelector } from '../common/utils';
+import { getPageLayoutSlotCSSSelector } from '../common/get-page-layout-slot-css-selector';
 import { SidebarResizeContext } from './sidebar-resize-context';
 const handleDataAttributesAndCb = (callback = noop, leftSidebarState) => {
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);

package/dist/es2019/controllers/skip-link-context.js

@@ -1,12 +1,5 @@
-import { createContext, useContext, useEffect } from 'react';
-import noop from '@atlaskit/ds-lib/noop';
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export const SkipLinksContext = /*#__PURE__*/createContext({
-  skipLinksData: [],
-  registerSkipLink: noop,
-  unregisterSkipLink: noop
-});
-export const useSkipLinks = () => useContext(SkipLinksContext);
+import { useEffect } from 'react';
+import { useSkipLinks } from './use-skip-links';
 export const useSkipLink = (id, skipLinkTitle) => {
   const {
     registerSkipLink,

package/dist/es2019/controllers/skip-link-controller.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { PAGE_LAYOUT_SLOT_SELECTOR } from '../common/constants';
-import { SkipLinksContext } from './skip-link-context';
+import { SkipLinksContext } from './skip-links-context';
 const byDOMOrder = (a, b) => {
   var _a$listIndex, _b$listIndex;
   const elems = Array.from(document.querySelectorAll(`[${PAGE_LAYOUT_SLOT_SELECTOR}]`));

package/dist/es2019/controllers/skip-links-context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SkipLinksContext = /*#__PURE__*/createContext({
+  skipLinksData: [],
+  registerSkipLink: noop,
+  unregisterSkipLink: noop
+});

package/dist/es2019/controllers/use-left-sidebar-flyout-lock.js

@@ -0,0 +1,39 @@
+import { useContext, useEffect } from 'react';
+import { SidebarResizeContext } from './sidebar-resize-context';
+
+/**
+ * _**WARNING:**_ This hook is intended as a temporary solution and
+ * is likely to be removed in a future version of page-layout.
+ *
+ * ---
+ *
+ * This hook will prevent the left sidebar from automatically collapsing
+ * when it is in a flyout state.
+ *
+ * The intended use case for this hook is to allow popup menus in the
+ * left sidebar to be usable while it is in a flyout state.
+ *
+ * ## Usage
+ * The intended usage is to use this hook within the popup component
+ * you are rendering. This way the left sidebar will be locked for
+ * as long as the popup is open.
+ *
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
+export const useLeftSidebarFlyoutLock = () => {
+  const {
+    setLeftSidebarState
+  } = useContext(SidebarResizeContext);
+  useEffect(() => {
+    setLeftSidebarState(current => ({
+      ...current,
+      flyoutLockCount: current.flyoutLockCount + 1
+    }));
+    return () => {
+      setLeftSidebarState(current => ({
+        ...current,
+        flyoutLockCount: current.flyoutLockCount - 1
+      }));
+    };
+  }, [setLeftSidebarState]);
+};

package/dist/es2019/controllers/use-page-layout-grid.js

@@ -1,4 +1,5 @@
-import { mergeGridStateIntoStorage, removeFromGridStateInStorage } from '../common/utils';
+import { mergeGridStateIntoStorage } from '../common/merge-grid-state-into-storage';
+import { removeFromGridStateInStorage } from '../common/remove-from-grid-state-in-storage';
 const publishGridState = gridState => {
   Object.entries(gridState).forEach(([slotName, value]) => {
     if (!value) {

package/dist/es2019/controllers/use-page-layout-resize.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { SidebarResizeContext } from './sidebar-resize-context';
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
+export const usePageLayoutResize = () => {
+  const {
+    setLeftSidebarState,
+    ...context
+  } = useContext(SidebarResizeContext);
+  return context;
+};

package/dist/es2019/controllers/use-skip-links.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { SkipLinksContext } from './skip-links-context';
+export const useSkipLinks = () => useContext(SkipLinksContext);

package/dist/es2019/entry-points/sidebar-resize-context.js

@@ -1 +1,2 @@
-export { usePageLayoutResize, useLeftSidebarFlyoutLock } from '../controllers/sidebar-resize-context';
+export { usePageLayoutResize } from '../controllers/use-page-layout-resize';
+export { useLeftSidebarFlyoutLock } from '../controllers/use-left-sidebar-flyout-lock';

package/dist/esm/common/constants.js

@@ -42,10 +42,29 @@ export var RESIZE_CONTROL_SELECTOR = 'data-resize-control';
 export var PAGE_LAYOUT_SLOT_SELECTOR = 'data-ds--page-layout--slot';
 export var DEFAULT_I18N_PROPS_SKIP_LINKS = 'Skip to:';
 export var PAGE_LAYOUT_CONTAINER_SELECTOR = 'data-layout-container';
+
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export var LEFT_PANEL_WIDTH = "var(--".concat(VAR_LEFT_PANEL_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export var RIGHT_PANEL_WIDTH = "var(--".concat(VAR_RIGHT_PANEL_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export var LEFT_SIDEBAR_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export var RIGHT_SIDEBAR_WIDTH = "var(--".concat(VAR_RIGHT_SIDEBAR_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export var TOP_NAVIGATION_HEIGHT = "var(--".concat(VAR_TOP_NAVIGATION_HEIGHT, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export var BANNER_HEIGHT = "var(--".concat(VAR_BANNER_HEIGHT, ", 0px)");
 export var LEFT_SIDEBAR_FLYOUT_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px)");

package/dist/esm/common/get-grid-state-from-storage.js

@@ -0,0 +1,6 @@
+import { PAGE_LAYOUT_LS_KEY } from './constants';
+import safeLocalStorage from './safe-local-storage';
+export var getGridStateFromStorage = function getGridStateFromStorage(key) {
+  var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
+  return storageValue[key];
+};

package/dist/esm/common/get-left-panel-width.js

@@ -0,0 +1,7 @@
+import { LEFT_PANEL_WIDTH } from './constants';
+export var getLeftPanelWidth = function getLeftPanelWidth() {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("--".concat(LEFT_PANEL_WIDTH)), 10) || 0;
+};

package/dist/esm/common/get-left-sidebar-percentage.js

@@ -0,0 +1,11 @@
+import { DEFAULT_LEFT_SIDEBAR_WIDTH } from './constants';
+export var getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, maxWidth) {
+  var total = (currentWidth - DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - DEFAULT_LEFT_SIDEBAR_WIDTH);
+  if (total < 0) {
+    return 0;
+  }
+  if (total > 1) {
+    return 100;
+  }
+  return Math.floor(total * 100);
+};

package/dist/esm/common/get-page-layout-slot-css-selector.js

@@ -0,0 +1,4 @@
+import { PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
+export var getPageLayoutSlotCSSSelector = function getPageLayoutSlotCSSSelector(slotName) {
+  return "[".concat(PAGE_LAYOUT_SLOT_SELECTOR, "='").concat(slotName, "']");
+};

package/dist/esm/common/get-page-layout-slot-selector.js

@@ -0,0 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
+export var getPageLayoutSlotSelector = function getPageLayoutSlotSelector(slotName) {
+  return _defineProperty({}, PAGE_LAYOUT_SLOT_SELECTOR, slotName);
+};

package/dist/esm/common/merge-grid-state-into-storage.js

@@ -0,0 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _typeof from "@babel/runtime/helpers/typeof";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { PAGE_LAYOUT_LS_KEY } from './constants';
+import safeLocalStorage from './safe-local-storage';
+export var mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
+  var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
+  if (value !== null && _typeof(value) === 'object') {
+    storageValue[key] = _objectSpread(_objectSpread({}, storageValue[key]), value);
+  } else {
+    storageValue[key] = value;
+  }
+  safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
+};

package/dist/esm/common/remove-from-grid-state-in-storage.js

@@ -0,0 +1,11 @@
+import { PAGE_LAYOUT_LS_KEY } from './constants';
+import safeLocalStorage from './safe-local-storage';
+export var removeFromGridStateInStorage = function removeFromGridStateInStorage(key, secondKey) {
+  var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
+  if (secondKey && storageValue[key]) {
+    delete storageValue[key][secondKey];
+  } else {
+    delete storageValue[key];
+  }
+  safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
+};

package/dist/esm/common/resolve-dimension.js

@@ -0,0 +1,10 @@
+import { getGridStateFromStorage } from './get-grid-state-from-storage';
+export var resolveDimension = function resolveDimension(key) {
+  var dimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var shouldPersist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (shouldPersist) {
+    var cachedGridState = getGridStateFromStorage('gridState');
+    return cachedGridState && Object.keys(cachedGridState).length > 0 && cachedGridState[key] ? cachedGridState[key] : dimension;
+  }
+  return dimension;
+};

package/dist/esm/components/resize-control/index.js

@@ -15,7 +15,8 @@ import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
-import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
+import { getLeftPanelWidth } from '../../common/get-left-panel-width';
+import { getLeftSidebarPercentage } from '../../common/get-left-sidebar-percentage';
 import { SidebarResizeContext } from '../../controllers/sidebar-resize-context';
 /* import useUpdateCssVar from '../../controllers/use-update-css-vars'; */
 

package/dist/esm/components/skip-links/skip-link-components.js

@@ -1,179 +1,2 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
-import { css, jsx } from '@emotion/react';
-import Link from '@atlaskit/link';
-import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
-import { useSkipLinks } from '../../controllers';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var prefersReducedMotionStyles = css(prefersReducedMotion());
-var skipLinkStyles = css({
-  margin: "var(--ds-space-250, 20px)",
-  padding: '0.8rem 1rem',
-  position: 'fixed',
-  zIndex: -1,
-  background: "var(--ds-surface-overlay, #FFFFFF)",
-  border: 'none',
-  borderRadius: "var(--ds-radius-small, 3px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
-  insetInlineStart: -999999,
-  opacity: 0,
-  transform: 'translateY(-50%)',
-  transition: "transform 0.3s ".concat(easeOut),
-  '&:focus-within': {
-    zIndex: 2147483640,
-    insetInlineStart: 0,
-    opacity: 1,
-    transform: 'translateY(0%)'
-  }
-});
-var skipLinkHeadingStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)"
-});
-var skipLinkListStyles = css({
-  listStylePosition: 'outside',
-  listStyleType: 'none',
-  marginBlockStart: "var(--ds-space-050, 4px)",
-  paddingInlineStart: 0
-});
-var skipLinkListItemStyles = css({
-  marginBlockStart: 0
-});
-var _assignIndex = function assignIndex(num, arr) {
-  if (!arr.includes(num)) {
-    return num;
-  }
-  return _assignIndex(num + 1, arr);
-};
-
-/**
- * The default label will be used when the `skipLinksLabel` attribute is not
- * provided or the attribute is an empty string. If a string comprised only of
- * spaces is provided, the skip link heading element will be removed, but the
- * default label will still be used in `title` attribute of the skip links
- * themselves.
- */
-export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
-  var skipLinksLabel = _ref.skipLinksLabel;
-  var _useSkipLinks = useSkipLinks(),
-    skipLinksData = _useSkipLinks.skipLinksData;
-  if (skipLinksData.length === 0) {
-    return null;
-  }
-  var sortSkipLinks = function sortSkipLinks(arr) {
-    var customLinks = arr.filter(function (link) {
-      return Number.isInteger(link.listIndex);
-    });
-    if (customLinks.length === 0) {
-      return arr;
-    }
-    var usedIndexes = customLinks.map(function (a) {
-      return a.listIndex;
-    });
-    var regularLinksWithIdx = arr.filter(function (link) {
-      return link.listIndex === undefined;
-    }).map(function (link, idx) {
-      var listIndex = _assignIndex(idx, usedIndexes);
-      usedIndexes.push(listIndex);
-      return _objectSpread(_objectSpread({}, link), {}, {
-        listIndex: listIndex
-      });
-    });
-    return [].concat(_toConsumableArray(customLinks), _toConsumableArray(regularLinksWithIdx)).sort(function (a, b) {
-      return a.listIndex - b.listIndex;
-    });
-  };
-  var escapeHandler = function escapeHandler(event) {
-    if (event.keyCode === 27) {
-      var container = document.querySelector("[".concat(PAGE_LAYOUT_CONTAINER_SELECTOR, "=\"true\"]") // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-      );
-      if (container !== null) {
-        container.focus();
-      }
-    }
-  };
-  var attachEscHandler = function attachEscHandler() {
-    return window.addEventListener('keydown', escapeHandler, false);
-  };
-  var removeEscHandler = function removeEscHandler() {
-    return window.removeEventListener('keydown', escapeHandler, false);
-  };
-  var emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
-  var label = skipLinksLabel || DEFAULT_I18N_PROPS_SKIP_LINKS;
-  return jsx("div", {
-    onFocus: attachEscHandler,
-    onBlur: removeEscHandler,
-    css: [skipLinkStyles, prefersReducedMotionStyles],
-    "data-skip-link-wrapper": true
-  }, emptyLabelOverride ? null : jsx("p", {
-    css: skipLinkHeadingStyles
-  }, label), jsx("ol", {
-    css: skipLinkListStyles
-  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
-    var id = _ref2.id,
-      skipLinkTitle = _ref2.skipLinkTitle;
-    return jsx(SkipLink, {
-      key: id,
-      href: "#".concat(id),
-      isFocusable: true
-    }, skipLinkTitle);
-  })));
-};
-var _handleBlur = function handleBlur(event) {
-  // @ts-ignore
-  event.target.removeAttribute('tabindex');
-  // @ts-ignore
-  event.target.removeEventListener('blur', _handleBlur);
-};
-var focusTargetRef = function focusTargetRef(href) {
-  return function (event) {
-    event.preventDefault();
-    var targetRef = document.querySelector(href);
-
-    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-    // @ts-ignore
-    var key = event.which || event.keycode;
-    // if it is a keypress and the key is not
-    // space or enter, just ignore it.
-    if (key && key !== 13 && key !== 32) {
-      return;
-    }
-    if (targetRef) {
-      targetRef.setAttribute('tabindex', '-1');
-      // @ts-ignore
-      targetRef.addEventListener('blur', _handleBlur);
-      // @ts-ignore
-      targetRef.focus();
-      document.activeElement && document.activeElement.scrollIntoView({
-        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-        behavior: 'smooth'
-        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-      });
-      window.scrollTo(0, 0);
-    }
-    return false;
-  };
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var SkipLink = function SkipLink(_ref3) {
-  var href = _ref3.href,
-    children = _ref3.children,
-    isFocusable = _ref3.isFocusable;
-  return jsx("li", {
-    css: skipLinkListItemStyles
-  }, jsx(Link, {
-    tabIndex: isFocusable ? 0 : -1,
-    href: href,
-    onClick: focusTargetRef(href)
-  }, children));
-};
+export { SkipLinkWrapper } from './skip-link-wrapper';
+export { SkipLink } from './skip-link';