@atlaskit/page-layout 4.3.1 → 4.3.2

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

@@ -0,0 +1,127 @@
+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
+import { css, jsx } from '@emotion/react';
+import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
+import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
+import { useSkipLinks } from '../../controllers';
+import { SkipLink } from './skip-link';
+// 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,
+  backgroundColor: "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 _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);
+  })));
+};

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

@@ -0,0 +1,55 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import Link from '@atlaskit/link';
+var skipLinkListItemStyles = css({
+  marginBlockStart: 0
+});
+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(_ref) {
+  var href = _ref.href,
+    children = _ref.children,
+    isFocusable = _ref.isFocusable;
+  return jsx("li", {
+    css: skipLinkListItemStyles
+  }, jsx(Link, {
+    tabIndex: isFocusable ? 0 : -1,
+    href: href,
+    onClick: focusTargetRef(href)
+  }, children));
+};

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

@@ -4,6 +4,12 @@
  */
 import { useEffect } from 'react';
 import { useSkipLinks } from '../../controllers';
+
+/**
+ * __useCustomSkipLink__
+ *
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export var useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {
   var listIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var _useSkipLinks = useSkipLinks(),

package/dist/esm/components/slots/banner-slot.js

@@ -9,7 +9,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, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_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 @@ var bannerFixedStyles = 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.
  */
 var Banner = function Banner(props) {
   var children = props.children,

package/dist/esm/components/slots/content.js

@@ -21,6 +21,8 @@ var contentStyles = 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.
  */
 var Content = function Content(props) {
   var children = props.children,

package/dist/esm/components/slots/internal/left-sidebar-outer.js

@@ -11,8 +11,8 @@ import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
+import { getPageLayoutSlotSelector } from '../../../common/get-page-layout-slot-selector';
 import { useIsSidebarDragging } from '../../../common/hooks';
-import { getPageLayoutSlotSelector } from '../../../common/utils';
 import { SidebarResizeContext } from '../../../controllers';
 import SlotFocusRing from './slot-focus-ring';
 // 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

package/dist/esm/components/slots/left-panel.js

@@ -9,7 +9,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_LEFT_PANEL_WIDTH, LEFT_PANEL, LEFT_PANEL_WIDTH, VAR_LEFT_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';
@@ -33,6 +34,8 @@ var leftPanelFixedStyles = 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.
  */
 var LeftPanel = function LeftPanel(props) {
   var children = props.children,

package/dist/esm/components/slots/left-sidebar-without-resize.js

@@ -8,7 +8,7 @@ import { useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
-import { resolveDimension } from '../../common/utils';
+import { resolveDimension } from '../../common/resolve-dimension';
 import { publishGridState, useSkipLink } from '../../controllers';
 import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
@@ -21,6 +21,8 @@ import SlotDimensions from './slot-dimensions';
  *
  * - [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.
  */
 var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
   var children = props.children,

package/dist/esm/components/slots/left-sidebar.js

@@ -14,7 +14,9 @@ import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { easeOut } from '@atlaskit/motion';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
-import { getGridStateFromStorage, mergeGridStateIntoStorage, resolveDimension } from '../../common/utils';
+import { getGridStateFromStorage } from '../../common/get-grid-state-from-storage';
+import { mergeGridStateIntoStorage } from '../../common/merge-grid-state-into-storage';
+import { resolveDimension } from '../../common/resolve-dimension';
 import { publishGridState, SidebarResizeContext, useSkipLink } from '../../controllers';
 import ResizeControl from '../resize-control';
 import LeftSidebarInner from './internal/left-sidebar-inner';
@@ -46,6 +48,8 @@ var hiddenBackdropStyles = 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.
  */
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,

package/dist/esm/components/slots/main.js

@@ -10,8 +10,8 @@ import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion/accessibility';
 import { easeOut } from '@atlaskit/motion/curves';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT } from '../../common/constants';
+import { getPageLayoutSlotSelector } from '../../common/get-page-layout-slot-selector';
 import { useIsSidebarDragging } from '../../common/hooks';
-import { getPageLayoutSlotSelector } from '../../common/utils';
 import { SidebarResizeContext, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 
@@ -47,6 +47,8 @@ var flyoutStyles = 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.
  */
 var Main = function Main(props) {
   var children = props.children,

package/dist/esm/components/slots/page-layout.js

@@ -8,6 +8,7 @@ import { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
+import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { BANNER, BANNER_HEIGHT, CONTENT, DEFAULT_I18N_PROPS_SKIP_LINKS, LEFT_PANEL, LEFT_PANEL_WIDTH, PAGE_LAYOUT_CONTAINER_SELECTOR, RIGHT_PANEL, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { SidebarResizeController, SkipLinksController } from '../../controllers';
@@ -38,6 +39,8 @@ var gridStylesMobileStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
  *
  * - [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.
  */
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,
@@ -46,6 +49,9 @@ var PageLayout = function PageLayout(_ref) {
     testId = _ref.testId,
     onLeftSidebarExpand = _ref.onLeftSidebarExpand,
     onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
+    warnOnce('@atlaskit/page-layout is deprecated. Use @atlaskit/navigation-system instead.');
+  }
   return jsx(Fragment, null, jsx(SkipLinksController, null, jsx(SkipLinkWrapper, {
     skipLinksLabel: skipLinksLabel
   }), jsx("div", _extends({}, pageLayoutSelector, {

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

@@ -9,7 +9,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';
@@ -33,6 +34,8 @@ var 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.
  */
 var RightPanel = function RightPanel(props) {
   var children = props.children,

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

@@ -9,7 +9,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';
@@ -60,6 +61,8 @@ var 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.
  */
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,

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

@@ -9,7 +9,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';
@@ -37,6 +38,8 @@ var 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.
  */
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,

package/dist/esm/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/esm/controllers/sidebar-resize-context.js

@@ -1,9 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["setLeftSidebarState"];
-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 { createContext, useContext, useEffect } from 'react';
+import { createContext } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 var leftSidebarState = {
   isFlyoutOpen: false,
@@ -15,7 +10,6 @@ var leftSidebarState = {
   isFixed: true,
   hasInit: false
 };
-
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
@@ -24,46 +18,4 @@ export var SidebarResizeContext = /*#__PURE__*/createContext({
   leftSidebarState: leftSidebarState,
   setLeftSidebarState: noop,
   toggleLeftSidebar: noop
-});
-export var usePageLayoutResize = function usePageLayoutResize() {
-  var _useContext = useContext(SidebarResizeContext),
-    setLeftSidebarState = _useContext.setLeftSidebarState,
-    context = _objectWithoutProperties(_useContext, _excluded);
-  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 var useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
-  var _useContext2 = useContext(SidebarResizeContext),
-    setLeftSidebarState = _useContext2.setLeftSidebarState;
-  useEffect(function () {
-    setLeftSidebarState(function (current) {
-      return _objectSpread(_objectSpread({}, current), {}, {
-        flyoutLockCount: current.flyoutLockCount + 1
-      });
-    });
-    return function () {
-      setLeftSidebarState(function (current) {
-        return _objectSpread(_objectSpread({}, current), {}, {
-          flyoutLockCount: current.flyoutLockCount - 1
-        });
-      });
-    };
-  }, [setLeftSidebarState]);
-};
+});

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

@@ -5,7 +5,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';
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;

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

@@ -1,14 +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 var SkipLinksContext = /*#__PURE__*/createContext({
-  skipLinksData: [],
-  registerSkipLink: noop,
-  unregisterSkipLink: noop
-});
-export var useSkipLinks = function useSkipLinks() {
-  return useContext(SkipLinksContext);
-};
+import { useEffect } from 'react';
+import { useSkipLinks } from './use-skip-links';
 export var useSkipLink = function useSkipLink(id, skipLinkTitle) {
   var _useSkipLinks = useSkipLinks(),
     registerSkipLink = _useSkipLinks.registerSkipLink,

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

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
 var byDOMOrder = function byDOMOrder(a, b) {
   var _a$listIndex, _b$listIndex;
   var elems = Array.from(document.querySelectorAll("[".concat(PAGE_LAYOUT_SLOT_SELECTOR, "]")));

package/dist/esm/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 var SkipLinksContext = /*#__PURE__*/createContext({
+  skipLinksData: [],
+  registerSkipLink: noop,
+  unregisterSkipLink: noop
+});

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

@@ -0,0 +1,43 @@
+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; }
+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 var useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
+  var _useContext = useContext(SidebarResizeContext),
+    setLeftSidebarState = _useContext.setLeftSidebarState;
+  useEffect(function () {
+    setLeftSidebarState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        flyoutLockCount: current.flyoutLockCount + 1
+      });
+    });
+    return function () {
+      setLeftSidebarState(function (current) {
+        return _objectSpread(_objectSpread({}, current), {}, {
+          flyoutLockCount: current.flyoutLockCount - 1
+        });
+      });
+    };
+  }, [setLeftSidebarState]);
+};

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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';
 var publishGridState = function publishGridState(gridState) {
   Object.entries(gridState).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),

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

@@ -0,0 +1,13 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["setLeftSidebarState"];
+import { useContext } from 'react';
+import { SidebarResizeContext } from './sidebar-resize-context';
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
+export var usePageLayoutResize = function usePageLayoutResize() {
+  var _useContext = useContext(SidebarResizeContext),
+    setLeftSidebarState = _useContext.setLeftSidebarState,
+    context = _objectWithoutProperties(_useContext, _excluded);
+  return context;
+};

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

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { SkipLinksContext } from './skip-links-context';
+export var useSkipLinks = function useSkipLinks() {
+  return useContext(SkipLinksContext);
+};

package/dist/esm/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/types/common/constants.d.ts

@@ -33,10 +33,28 @@ export declare const RESIZE_CONTROL_SELECTOR = "data-resize-control";
 export declare const PAGE_LAYOUT_SLOT_SELECTOR = "data-ds--page-layout--slot";
 export declare const DEFAULT_I18N_PROPS_SKIP_LINKS = "Skip to:";
 export declare const PAGE_LAYOUT_CONTAINER_SELECTOR = "data-layout-container";
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export declare const LEFT_PANEL_WIDTH: 'var(--leftPanelWidth, 0px)';
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export declare const RIGHT_PANEL_WIDTH: 'var(--rightPanelWidth, 0px)';
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export declare const LEFT_SIDEBAR_WIDTH: 'var(--leftSidebarWidth, 0px)';
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export declare const RIGHT_SIDEBAR_WIDTH: 'var(--rightSidebarWidth, 0px)';
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export declare const TOP_NAVIGATION_HEIGHT: 'var(--topNavigationHeight, 0px)';
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 export declare const BANNER_HEIGHT: 'var(--bannerHeight, 0px)';
 export declare const LEFT_SIDEBAR_FLYOUT_WIDTH: 'var(--leftSidebarFlyoutWidth, 240px)';