@atlaskit/page-layout 4.3.0 → 4.3.2

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

@@ -10,7 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _getPageLayoutSlotSelector = require("../../common/get-page-layout-slot-selector");
+var _resolveDimension = require("../../common/resolve-dimension");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
@@ -44,6 +45,8 @@ var bannerFixedStyles = (0, _react2.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,
@@ -55,7 +58,7 @@ var Banner = function Banner(props) {
     testId = props.testId,
     skipLinkTitle = props.skipLinkTitle,
     id = props.id;
-  var bannerHeight = (0, _utils.resolveDimension)(_constants.VAR_BANNER_HEIGHT, height, shouldPersistHeight);
+  var bannerHeight = (0, _resolveDimension.resolveDimension)(_constants.VAR_BANNER_HEIGHT, height, shouldPersistHeight);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_BANNER_HEIGHT, bannerHeight));
     return function () {
@@ -72,7 +75,7 @@ var Banner = function Banner(props) {
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _react2.jsx)(_slotDimensions.default, {
+    }, (0, _getPageLayoutSlotSelector.getPageLayoutSlotSelector)('banner')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_BANNER_HEIGHT,
       value: bannerHeight
     }), children);

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

@@ -28,6 +28,8 @@ var contentStyles = (0, _react.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/cjs/components/slots/internal/left-sidebar-outer.js

@@ -12,8 +12,8 @@ var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../../common/constants");
+var _getPageLayoutSlotSelector = require("../../../common/get-page-layout-slot-selector");
 var _hooks = require("../../../common/hooks");
-var _utils = require("../../../common/utils");
 var _controllers = require("../../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
 /**
@@ -83,7 +83,7 @@ var flyoutFixedStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
-var selector = (0, _utils.getPageLayoutSlotSelector)('left-sidebar');
+var selector = (0, _getPageLayoutSlotSelector.getPageLayoutSlotSelector)('left-sidebar');
 var LeftSidebarOuterComponent = function LeftSidebarOuterComponent(_ref, ref) {
   var children = _ref.children,
     _ref$isFixed = _ref.isFixed,

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

@@ -10,7 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _getPageLayoutSlotSelector = require("../../common/get-page-layout-slot-selector");
+var _resolveDimension = require("../../common/resolve-dimension");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
@@ -41,6 +42,8 @@ var leftPanelFixedStyles = (0, _react2.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,
@@ -51,7 +54,7 @@ var LeftPanel = function LeftPanel(props) {
     testId = props.testId,
     id = props.id,
     skipLinkTitle = props.skipLinkTitle;
-  var leftPanelWidth = (0, _utils.resolveDimension)(_constants.VAR_LEFT_PANEL_WIDTH, width, shouldPersistWidth);
+  var leftPanelWidth = (0, _resolveDimension.resolveDimension)(_constants.VAR_LEFT_PANEL_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_PANEL_WIDTH, leftPanelWidth));
     return function () {
@@ -68,7 +71,7 @@ var LeftPanel = function LeftPanel(props) {
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _react2.jsx)(_slotDimensions.default, {
+    }, (0, _getPageLayoutSlotSelector.getPageLayoutSlotSelector)('left-panel')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_LEFT_PANEL_WIDTH,
       value: leftPanelWidth
     }), children);

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

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _resolveDimension = require("../../common/resolve-dimension");
 var _controllers = require("../../controllers");
 var _leftSidebarInner = _interopRequireDefault(require("./internal/left-sidebar-inner"));
 var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-outer"));
@@ -28,6 +28,8 @@ var _slotDimensions = _interopRequireDefault(require("./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,
@@ -37,7 +39,7 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     shouldPersistWidth = props.shouldPersistWidth,
     testId = props.testId,
     skipLinkTitle = props.skipLinkTitle;
-  var leftSidebarWidth = (0, _utils.resolveDimension)(_constants.VAR_LEFT_SIDEBAR_WIDTH, width, shouldPersistWidth);
+  var leftSidebarWidth = (0, _resolveDimension.resolveDimension)(_constants.VAR_LEFT_SIDEBAR_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth));
     return function () {

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

@@ -12,7 +12,9 @@ var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/us
 var _motion = require("@atlaskit/motion");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _getGridStateFromStorage = require("../../common/get-grid-state-from-storage");
+var _mergeGridStateIntoStorage = require("../../common/merge-grid-state-into-storage");
+var _resolveDimension = require("../../common/resolve-dimension");
 var _controllers = require("../../controllers");
 var _resizeControl = _interopRequireDefault(require("../resize-control"));
 var _leftSidebarInner = _interopRequireDefault(require("./internal/left-sidebar-inner"));
@@ -49,6 +51,8 @@ var hiddenBackdropStyles = (0, _react2.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,
@@ -125,17 +129,17 @@ var LeftSidebar = function LeftSidebar(props) {
   var collapsedStateOverrideOpen = collapsedState === 'expanded';
   var leftSidebarWidthOnMount;
   if (collapsedStateOverrideOpen) {
-    leftSidebarWidthOnMount = (0, _utils.resolveDimension)(_constants.VAR_LEFT_SIDEBAR_FLYOUT, _width, !width);
+    leftSidebarWidthOnMount = (0, _resolveDimension.resolveDimension)(_constants.VAR_LEFT_SIDEBAR_FLYOUT, _width, !width);
   } else if (isLeftSidebarCollapsed || collapsedState === 'collapsed') {
     leftSidebarWidthOnMount = _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH;
   } else {
-    leftSidebarWidthOnMount = (0, _utils.resolveDimension)(_constants.VAR_LEFT_SIDEBAR_WIDTH, _width, !width || !collapsedStateOverrideOpen && (0, _utils.getGridStateFromStorage)('isLeftSidebarCollapsed'));
+    leftSidebarWidthOnMount = (0, _resolveDimension.resolveDimension)(_constants.VAR_LEFT_SIDEBAR_WIDTH, _width, !width || !collapsedStateOverrideOpen && (0, _getGridStateFromStorage.getGridStateFromStorage)('isLeftSidebarCollapsed'));
   }
 
   // Update state from cache on mount
   (0, _react.useEffect)(function () {
-    var cachedCollapsedState = !collapsedStateOverrideOpen && (collapsedState === 'collapsed' || (0, _utils.getGridStateFromStorage)('isLeftSidebarCollapsed') || false);
-    var cachedGridState = (0, _utils.getGridStateFromStorage)('gridState') || {};
+    var cachedCollapsedState = !collapsedStateOverrideOpen && (collapsedState === 'collapsed' || (0, _getGridStateFromStorage.getGridStateFromStorage)('isLeftSidebarCollapsed') || false);
+    var cachedGridState = (0, _getGridStateFromStorage.getGridStateFromStorage)('gridState') || {};
     var leftSidebarWidth = !width && cachedGridState[_constants.VAR_LEFT_SIDEBAR_FLYOUT] ? Math.max(cachedGridState[_constants.VAR_LEFT_SIDEBAR_FLYOUT], _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) : _width;
     var lastLeftSidebarWidth = !width && cachedGridState[_constants.VAR_LEFT_SIDEBAR_FLYOUT] ? Math.max(cachedGridState[_constants.VAR_LEFT_SIDEBAR_FLYOUT], _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) : _width;
     if (cachedCollapsedState) {
@@ -160,7 +164,7 @@ var LeftSidebar = function LeftSidebar(props) {
   (0, _react.useEffect)(function () {
     if (notFirstRun.current) {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth || leftSidebarWidthOnMount), _constants.VAR_LEFT_SIDEBAR_FLYOUT, lastLeftSidebarWidth));
-      (0, _utils.mergeGridStateIntoStorage)('isLeftSidebarCollapsed', isLeftSidebarCollapsed);
+      (0, _mergeGridStateIntoStorage.mergeGridStateIntoStorage)('isLeftSidebarCollapsed', isLeftSidebarCollapsed);
     }
     if (!notFirstRun.current) {
       notFirstRun.current = true;

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

@@ -11,8 +11,8 @@ var _react2 = require("@emotion/react");
 var _accessibility = require("@atlaskit/motion/accessibility");
 var _curves = require("@atlaskit/motion/curves");
 var _constants = require("../../common/constants");
+var _getPageLayoutSlotSelector = require("../../common/get-page-layout-slot-selector");
 var _hooks = require("../../common/hooks");
-var _utils = require("../../common/utils");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 /**
@@ -54,6 +54,8 @@ var flyoutStyles = (0, _react2.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,
@@ -75,7 +77,7 @@ var Main = function Main(props) {
       ,
       className: className,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
+    }, (0, _getPageLayoutSlotSelector.getPageLayoutSlotSelector)('main')), children);
   });
 };
 var _default = exports.default = Main;

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

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
 var _controllers = require("../../controllers");
@@ -46,6 +47,8 @@ var gridStylesMobileStyles = (0, _react2.css)((0, _defineProperty2.default)({},
  *
  * - [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,
@@ -54,6 +57,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') {
+    (0, _warnOnce.default)('@atlaskit/page-layout is deprecated. Use @atlaskit/navigation-system instead.');
+  }
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_controllers.SkipLinksController, null, (0, _react2.jsx)(_skipLinks.SkipLinkWrapper, {
     skipLinksLabel: skipLinksLabel
   }), (0, _react2.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {

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

@@ -10,7 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _getPageLayoutSlotSelector = require("../../common/get-page-layout-slot-selector");
+var _resolveDimension = require("../../common/resolve-dimension");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
@@ -41,6 +42,8 @@ var fixedStyles = (0, _react2.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,
@@ -51,7 +54,7 @@ var RightPanel = function RightPanel(props) {
     testId = props.testId,
     id = props.id,
     skipLinkTitle = props.skipLinkTitle;
-  var rightPanelWidth = (0, _utils.resolveDimension)(_constants.VAR_RIGHT_PANEL_WIDTH, width, shouldPersistWidth);
+  var rightPanelWidth = (0, _resolveDimension.resolveDimension)(_constants.VAR_RIGHT_PANEL_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, rightPanelWidth));
     return function () {
@@ -68,7 +71,7 @@ var RightPanel = function RightPanel(props) {
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _react2.jsx)(_slotDimensions.default, {
+    }, (0, _getPageLayoutSlotSelector.getPageLayoutSlotSelector)('right-panel')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
       value: rightPanelWidth
     }), children);

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

@@ -10,7 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _getPageLayoutSlotSelector = require("../../common/get-page-layout-slot-selector");
+var _resolveDimension = require("../../common/resolve-dimension");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
@@ -67,6 +68,8 @@ var fixedOuterStyles = (0, _react2.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,
@@ -77,7 +80,7 @@ var RightSidebar = function RightSidebar(props) {
     testId = props.testId,
     id = props.id,
     skipLinkTitle = props.skipLinkTitle;
-  var rightSidebarWidth = (0, _utils.resolveDimension)(_constants.VAR_RIGHT_SIDEBAR_WIDTH, width, shouldPersistWidth);
+  var rightSidebarWidth = (0, _resolveDimension.resolveDimension)(_constants.VAR_RIGHT_SIDEBAR_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
     return function () {
@@ -96,7 +99,7 @@ var RightSidebar = function RightSidebar(props) {
       ,
       className: className,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _react2.jsx)(_slotDimensions.default, {
+    }, (0, _getPageLayoutSlotSelector.getPageLayoutSlotSelector)('right-sidebar')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
       value: rightSidebarWidth
     }), (0, _react2.jsx)("div", {

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

@@ -10,7 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _getPageLayoutSlotSelector = require("../../common/get-page-layout-slot-selector");
+var _resolveDimension = require("../../common/resolve-dimension");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
@@ -45,6 +46,8 @@ var fixedStyles = (0, _react2.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,
@@ -56,7 +59,7 @@ var TopNavigation = function TopNavigation(props) {
     testId = props.testId,
     id = props.id,
     skipLinkTitle = props.skipLinkTitle;
-  var topNavigationHeight = (0, _utils.resolveDimension)(_constants.VAR_TOP_NAVIGATION_HEIGHT, height, shouldPersistHeight);
+  var topNavigationHeight = (0, _resolveDimension.resolveDimension)(_constants.VAR_TOP_NAVIGATION_HEIGHT, height, shouldPersistHeight);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
     return function () {
@@ -73,7 +76,7 @@ var TopNavigation = function TopNavigation(props) {
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _react2.jsx)(_slotDimensions.default, {
+    }, (0, _getPageLayoutSlotSelector.getPageLayoutSlotSelector)('top-navigation')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
       value: topNavigationHeight
     }), children);

package/dist/cjs/controllers/index.js

@@ -31,13 +31,13 @@ Object.defineProperty(exports, "publishGridState", {
 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;
   }
 });
 Object.defineProperty(exports, "useSkipLink", {
@@ -49,11 +49,14 @@ Object.defineProperty(exports, "useSkipLink", {
 Object.defineProperty(exports, "useSkipLinks", {
   enumerable: true,
   get: function get() {
-    return _skipLinkContext.useSkipLinks;
+    return _useSkipLinks.useSkipLinks;
   }
 });
 var _usePageLayoutGrid = _interopRequireDefault(require("./use-page-layout-grid"));
 var _sidebarResizeContext = require("./sidebar-resize-context");
+var _usePageLayoutResize = require("./use-page-layout-resize");
+var _useLeftSidebarFlyoutLock = require("./use-left-sidebar-flyout-lock");
 var _sidebarResizeController = require("./sidebar-resize-controller");
 var _skipLinkContext = require("./skip-link-context");
+var _useSkipLinks = require("./use-skip-links");
 var _skipLinkController = require("./skip-link-controller");

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

@@ -4,14 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePageLayoutResize = exports.useLeftSidebarFlyoutLock = exports.SidebarResizeContext = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports.SidebarResizeContext = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-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) { (0, _defineProperty2.default)(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; }
 var leftSidebarState = {
   isFlyoutOpen: false,
   isResizing: false,
@@ -22,7 +17,6 @@ var leftSidebarState = {
   isFixed: true,
   hasInit: false
 };
-
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SidebarResizeContext = exports.SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   isLeftSidebarCollapsed: false,
@@ -31,46 +25,4 @@ var SidebarResizeContext = exports.SidebarResizeContext = /*#__PURE__*/(0, _reac
   leftSidebarState: leftSidebarState,
   setLeftSidebarState: _noop.default,
   toggleLeftSidebar: _noop.default
-});
-var usePageLayoutResize = exports.usePageLayoutResize = function usePageLayoutResize() {
-  var _useContext = (0, _react.useContext)(SidebarResizeContext),
-    setLeftSidebarState = _useContext.setLeftSidebarState,
-    context = (0, _objectWithoutProperties2.default)(_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.
- */
-var useLeftSidebarFlyoutLock = exports.useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
-  var _useContext2 = (0, _react.useContext)(SidebarResizeContext),
-    setLeftSidebarState = _useContext2.setLeftSidebarState;
-  (0, _react.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/cjs/controllers/sidebar-resize-controller.js

@@ -13,7 +13,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _motion = require("@atlaskit/motion");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../common/constants");
-var _utils = require("../common/utils");
+var _getPageLayoutSlotCssSelector = require("../common/get-page-layout-slot-css-selector");
 var _sidebarResizeContext = require("./sidebar-resize-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
@@ -22,7 +22,7 @@ var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   document.documentElement.removeAttribute(_constants.IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
 };
-var leftSidebarSelector = (0, _utils.getPageLayoutSlotCSSSelector)('left-sidebar');
+var leftSidebarSelector = (0, _getPageLayoutSlotCssSelector.getPageLayoutSlotCSSSelector)('left-sidebar');
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SidebarResizeController = exports.SidebarResizeController = function SidebarResizeController(_ref) {
   var children = _ref.children,

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

@@ -1,23 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSkipLinks = exports.useSkipLink = exports.SkipLinksContext = void 0;
+exports.useSkipLink = void 0;
 var _react = require("react");
-var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SkipLinksContext = exports.SkipLinksContext = /*#__PURE__*/(0, _react.createContext)({
-  skipLinksData: [],
-  registerSkipLink: _noop.default,
-  unregisterSkipLink: _noop.default
-});
-var useSkipLinks = exports.useSkipLinks = function useSkipLinks() {
-  return (0, _react.useContext)(SkipLinksContext);
-};
+var _useSkipLinks2 = require("./use-skip-links");
 var useSkipLink = exports.useSkipLink = function useSkipLink(id, skipLinkTitle) {
-  var _useSkipLinks = useSkipLinks(),
+  var _useSkipLinks = (0, _useSkipLinks2.useSkipLinks)(),
     registerSkipLink = _useSkipLinks.registerSkipLink,
     unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
   (0, _react.useEffect)(function () {

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

@@ -10,7 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../common/constants");
-var _skipLinkContext = require("./skip-link-context");
+var _skipLinksContext = require("./skip-links-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var byDOMOrder = function byDOMOrder(a, b) {
   var _a$listIndex, _b$listIndex;
@@ -67,7 +67,7 @@ var SkipLinksController = exports.SkipLinksController = function SkipLinksContro
     skipLinksData: links,
     unregisterSkipLink: unregisterSkipLink.current
   };
-  return /*#__PURE__*/_react.default.createElement(_skipLinkContext.SkipLinksContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_skipLinksContext.SkipLinksContext.Provider, {
     value: context
   }, children);
 };

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipLinksContext = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var SkipLinksContext = exports.SkipLinksContext = /*#__PURE__*/(0, _react.createContext)({
+  skipLinksData: [],
+  registerSkipLink: _noop.default,
+  unregisterSkipLink: _noop.default
+});

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLeftSidebarFlyoutLock = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _sidebarResizeContext = require("./sidebar-resize-context");
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * _**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.
+ */
+var useLeftSidebarFlyoutLock = exports.useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
+  var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
+    setLeftSidebarState = _useContext.setLeftSidebarState;
+  (0, _react.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/cjs/controllers/use-page-layout-grid.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _utils = require("../common/utils");
+var _mergeGridStateIntoStorage = require("../common/merge-grid-state-into-storage");
+var _removeFromGridStateInStorage = require("../common/remove-from-grid-state-in-storage");
 var publishGridState = function publishGridState(gridState) {
   Object.entries(gridState).forEach(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
@@ -15,7 +16,7 @@ var publishGridState = function publishGridState(gridState) {
       value = _ref2[1];
     if (!value) {
       document.documentElement.style.removeProperty("--".concat(slotName));
-      (0, _utils.removeFromGridStateInStorage)('gridState', slotName);
+      (0, _removeFromGridStateInStorage.removeFromGridStateInStorage)('gridState', slotName);
       return;
     }
 
@@ -24,7 +25,7 @@ var publishGridState = function publishGridState(gridState) {
 
     // also update state in local storage so that
     // it persists across page refresh, across tabs etc
-    (0, _utils.mergeGridStateIntoStorage)('gridState', (0, _defineProperty2.default)({}, slotName, value));
+    (0, _mergeGridStateIntoStorage.mergeGridStateIntoStorage)('gridState', (0, _defineProperty2.default)({}, slotName, value));
   });
 };
 var _default = exports.default = publishGridState;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePageLayoutResize = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _sidebarResizeContext = require("./sidebar-resize-context");
+var _excluded = ["setLeftSidebarState"];
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
+var usePageLayoutResize = exports.usePageLayoutResize = function usePageLayoutResize() {
+  var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
+    setLeftSidebarState = _useContext.setLeftSidebarState,
+    context = (0, _objectWithoutProperties2.default)(_useContext, _excluded);
+  return context;
+};