@atlaskit/page-layout 4.3.1 → 4.3.3

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkipLinks = void 0;
+var _react = require("react");
+var _skipLinksContext = require("./skip-links-context");
+var useSkipLinks = exports.useSkipLinks = function useSkipLinks() {
+  return (0, _react.useContext)(_skipLinksContext.SkipLinksContext);
+};

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

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.useLeftSidebarFlyoutLock;
+    return _useLeftSidebarFlyoutLock.useLeftSidebarFlyoutLock;
   }
 });
 Object.defineProperty(exports, "usePageLayoutResize", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.usePageLayoutResize;
+    return _usePageLayoutResize.usePageLayoutResize;
   }
 });
-var _sidebarResizeContext = require("../controllers/sidebar-resize-context");
+var _usePageLayoutResize = require("../controllers/use-page-layout-resize");
+var _useLeftSidebarFlyoutLock = require("../controllers/use-left-sidebar-flyout-lock");

package/dist/es2019/common/constants.js

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

package/dist/es2019/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 const getGridStateFromStorage = key => {
+  const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
+  return storageValue[key];
+};

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

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

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

@@ -0,0 +1,11 @@
+import { DEFAULT_LEFT_SIDEBAR_WIDTH } from './constants';
+export const getLeftSidebarPercentage = (currentWidth, maxWidth) => {
+  const 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/es2019/common/get-page-layout-slot-css-selector.js

@@ -0,0 +1,2 @@
+import { PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
+export const getPageLayoutSlotCSSSelector = slotName => `[${PAGE_LAYOUT_SLOT_SELECTOR}='${slotName}']`;

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

@@ -0,0 +1,4 @@
+import { PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
+export const getPageLayoutSlotSelector = slotName => ({
+  [PAGE_LAYOUT_SLOT_SELECTOR]: slotName
+});

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

@@ -0,0 +1,14 @@
+import { PAGE_LAYOUT_LS_KEY } from './constants';
+import safeLocalStorage from './safe-local-storage';
+export const mergeGridStateIntoStorage = (key, value) => {
+  const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
+  if (value !== null && typeof value === 'object') {
+    storageValue[key] = {
+      ...storageValue[key],
+      ...value
+    };
+  } else {
+    storageValue[key] = value;
+  }
+  safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
+};

package/dist/es2019/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 const removeFromGridStateInStorage = (key, secondKey) => {
+  const 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/es2019/common/resolve-dimension.js

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

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

@@ -11,7 +11,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/es2019/components/skip-links/skip-link-components.js

@@ -1,165 +1,2 @@
-/* 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
-const prefersReducedMotionStyles = css(prefersReducedMotion());
-const 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 ${easeOut}`,
-  '&:focus-within': {
-    zIndex: 2147483640,
-    insetInlineStart: 0,
-    opacity: 1,
-    transform: 'translateY(0%)'
-  }
-});
-const skipLinkHeadingStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)"
-});
-const skipLinkListStyles = css({
-  listStylePosition: 'outside',
-  listStyleType: 'none',
-  marginBlockStart: "var(--ds-space-050, 4px)",
-  paddingInlineStart: 0
-});
-const skipLinkListItemStyles = css({
-  marginBlockStart: 0
-});
-const 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 const SkipLinkWrapper = ({
-  skipLinksLabel
-}) => {
-  const {
-    skipLinksData
-  } = useSkipLinks();
-  if (skipLinksData.length === 0) {
-    return null;
-  }
-  const sortSkipLinks = arr => {
-    const customLinks = arr.filter(link => Number.isInteger(link.listIndex));
-    if (customLinks.length === 0) {
-      return arr;
-    }
-    const usedIndexes = customLinks.map(a => a.listIndex);
-    const regularLinksWithIdx = arr.filter(link => link.listIndex === undefined).map((link, idx) => {
-      const listIndex = assignIndex(idx, usedIndexes);
-      usedIndexes.push(listIndex);
-      return {
-        ...link,
-        listIndex
-      };
-    });
-    return [...customLinks, ...regularLinksWithIdx].sort((a, b) => a.listIndex - b.listIndex);
-  };
-  const escapeHandler = event => {
-    if (event.keyCode === 27) {
-      const container = document.querySelector(`[${PAGE_LAYOUT_CONTAINER_SELECTOR}="true"]`
-      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-      );
-      if (container !== null) {
-        container.focus();
-      }
-    }
-  };
-  const attachEscHandler = () => window.addEventListener('keydown', escapeHandler, false);
-  const removeEscHandler = () => window.removeEventListener('keydown', escapeHandler, false);
-  const emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
-  const 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(({
-    id,
-    skipLinkTitle
-  }) => jsx(SkipLink, {
-    key: id,
-    href: `#${id}`,
-    isFocusable: true
-  }, skipLinkTitle))));
-};
-const handleBlur = event => {
-  // @ts-ignore
-  event.target.removeAttribute('tabindex');
-  // @ts-ignore
-  event.target.removeEventListener('blur', handleBlur);
-};
-const focusTargetRef = href => event => {
-  event.preventDefault();
-  const targetRef = document.querySelector(href);
-
-  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-  // @ts-ignore
-  const 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 const SkipLink = ({
-  href,
-  children,
-  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';

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

@@ -0,0 +1,114 @@
+/* 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
+const prefersReducedMotionStyles = css(prefersReducedMotion());
+const 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 ${easeOut}`,
+  '&:focus-within': {
+    zIndex: 2147483640,
+    insetInlineStart: 0,
+    opacity: 1,
+    transform: 'translateY(0%)'
+  }
+});
+const skipLinkHeadingStyles = css({
+  fontWeight: "var(--ds-font-weight-semibold, 600)"
+});
+const skipLinkListStyles = css({
+  listStylePosition: 'outside',
+  listStyleType: 'none',
+  marginBlockStart: "var(--ds-space-050, 4px)",
+  paddingInlineStart: 0
+});
+const 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 const SkipLinkWrapper = ({
+  skipLinksLabel
+}) => {
+  const {
+    skipLinksData
+  } = useSkipLinks();
+  if (skipLinksData.length === 0) {
+    return null;
+  }
+  const sortSkipLinks = arr => {
+    const customLinks = arr.filter(link => Number.isInteger(link.listIndex));
+    if (customLinks.length === 0) {
+      return arr;
+    }
+    const usedIndexes = customLinks.map(a => a.listIndex);
+    const regularLinksWithIdx = arr.filter(link => link.listIndex === undefined).map((link, idx) => {
+      const listIndex = assignIndex(idx, usedIndexes);
+      usedIndexes.push(listIndex);
+      return {
+        ...link,
+        listIndex
+      };
+    });
+    return [...customLinks, ...regularLinksWithIdx].sort((a, b) => a.listIndex - b.listIndex);
+  };
+  const escapeHandler = event => {
+    if (event.keyCode === 27) {
+      const container = document.querySelector(`[${PAGE_LAYOUT_CONTAINER_SELECTOR}="true"]`
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      );
+      if (container !== null) {
+        container.focus();
+      }
+    }
+  };
+  const attachEscHandler = () => window.addEventListener('keydown', escapeHandler, false);
+  const removeEscHandler = () => window.removeEventListener('keydown', escapeHandler, false);
+  const emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
+  const 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(({
+    id,
+    skipLinkTitle
+  }) => jsx(SkipLink, {
+    key: id,
+    href: `#${id}`,
+    isFocusable: true
+  }, skipLinkTitle))));
+};

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

@@ -0,0 +1,54 @@
+/* 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';
+const skipLinkListItemStyles = css({
+  marginBlockStart: 0
+});
+const focusTargetRef = href => event => {
+  event.preventDefault();
+  const targetRef = document.querySelector(href);
+
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+  // @ts-ignore
+  const 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 const SkipLink = ({
+  href,
+  children,
+  isFocusable
+}) => {
+  return jsx("li", {
+    css: skipLinkListItemStyles
+  }, jsx(Link, {
+    tabIndex: isFocusable ? 0 : -1,
+    href: href,
+    onClick: focusTargetRef(href)
+  }, children));
+};

package/dist/es2019/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 const useCustomSkipLink = (id, skipLinkTitle, listIndex = 0) => {
   const {
     registerSkipLink,

package/dist/es2019/components/slots/banner-slot.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, 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';
@@ -35,6 +36,8 @@ const 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.
  */
 const Banner = props => {
   const {

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

@@ -21,6 +21,8 @@ const 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.
  */
 const Content = props => {
   const {

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

@@ -10,8 +10,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/es2019/components/slots/left-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_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';
@@ -32,6 +33,8 @@ const 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.
  */
 const LeftPanel = props => {
   const {

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

@@ -7,7 +7,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';
@@ -20,6 +20,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.
  */
 const LeftSidebarWithoutResize = props => {
   const {

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

@@ -11,7 +11,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';
@@ -43,6 +45,8 @@ const 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.
  */
 const LeftSidebar = props => {
   const {

package/dist/es2019/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 @@ const 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.
  */
 const Main = props => {
   const {

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

@@ -7,6 +7,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';
@@ -56,6 +57,8 @@ const gridStylesMobileStyles = 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 PageLayout = ({
   skipLinksLabel = DEFAULT_I18N_PROPS_SKIP_LINKS,
@@ -64,6 +67,9 @@ const PageLayout = ({
   onLeftSidebarExpand,
   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, {