@atlaskit/page-layout 1.3.7 → 1.3.9

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -19,6 +18,7 @@ var fixedStyles = css({
   right: 0,
   bottom: 0
 });
+
 /**
  * __Right panel__
  *
@@ -27,16 +27,15 @@ var fixedStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var RightPanel = function RightPanel(props) {
   var children = props.children,
-      isFixed = props.isFixed,
-      _props$width = props.width,
-      width = _props$width === void 0 ? DEFAULT_RIGHT_PANEL_WIDTH : _props$width,
-      shouldPersistWidth = props.shouldPersistWidth,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle;
+    isFixed = props.isFixed,
+    _props$width = props.width,
+    width = _props$width === void 0 ? DEFAULT_RIGHT_PANEL_WIDTH : _props$width,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   var rightPanelWidth = resolveDimension(VAR_RIGHT_PANEL_WIDTH, width, shouldPersistWidth);
   useEffect(function () {
     publishGridState(_defineProperty({}, VAR_RIGHT_PANEL_WIDTH, rightPanelWidth));
@@ -58,5 +57,4 @@ var RightPanel = function RightPanel(props) {
     }), children);
   });
 };
-
 export default RightPanel;

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -9,13 +8,13 @@ import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils'
 import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
  * If we were to apply `position: fixed` to the outer wrapper, it will be popped
  * out of its flex container and Main would stretch to occupy all the space.
  */
-
 var fixedInnerStyles = css({
   /**
    * This width on the inner wrapper is required when it is using fixed
@@ -33,12 +32,12 @@ var staticInnerStyles = css({
 var outerStyles = css({
   width: RIGHT_SIDEBAR_WIDTH
 });
+
 /**
  * In fixed mode this element's child is taken out of the document flow.
  * It doesn't take up the width as expected,
  * so the pseudo element forces it to take up the necessary width.
  */
-
 var fixedOuterStyles = css({
   '&::after': {
     display: 'inline-block',
@@ -46,6 +45,7 @@ var fixedOuterStyles = css({
     content: "''"
   }
 });
+
 /**
  * __Right sidebar__
  *
@@ -54,16 +54,15 @@ var fixedOuterStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,
-      _props$width = props.width,
-      width = _props$width === void 0 ? DEFAULT_RIGHT_SIDEBAR_WIDTH : _props$width,
-      isFixed = props.isFixed,
-      shouldPersistWidth = props.shouldPersistWidth,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle;
+    _props$width = props.width,
+    width = _props$width === void 0 ? DEFAULT_RIGHT_SIDEBAR_WIDTH : _props$width,
+    isFixed = props.isFixed,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   var rightSidebarWidth = resolveDimension(VAR_RIGHT_SIDEBAR_WIDTH, width, shouldPersistWidth);
   useEffect(function () {
     publishGridState(_defineProperty({}, VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
@@ -89,5 +88,4 @@ var RightSidebar = function RightSidebar(props) {
     }, children));
   });
 };
-
 export default RightSidebar;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export default (function (_ref) {
   var variableName = _ref.variableName,
-      value = _ref.value;
+    value = _ref.value;
   return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"));
 });

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -20,6 +19,7 @@ var fixedStyles = css({
   right: RIGHT_PANEL_WIDTH,
   left: LEFT_PANEL_WIDTH
 });
+
 /**
  * __Top navigation__
  *
@@ -28,17 +28,16 @@ var fixedStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,
-      _props$height = props.height,
-      height = _props$height === void 0 ? DEFAULT_TOP_NAVIGATION_HEIGHT : _props$height,
-      _props$isFixed = props.isFixed,
-      isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
-      shouldPersistHeight = props.shouldPersistHeight,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle;
+    _props$height = props.height,
+    height = _props$height === void 0 ? DEFAULT_TOP_NAVIGATION_HEIGHT : _props$height,
+    _props$isFixed = props.isFixed,
+    isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
+    shouldPersistHeight = props.shouldPersistHeight,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   var topNavigationHeight = resolveDimension(VAR_TOP_NAVIGATION_HEIGHT, height, shouldPersistHeight);
   useEffect(function () {
     publishGridState(_defineProperty({}, VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
@@ -60,5 +59,4 @@ var TopNavigation = function TopNavigation(props) {
     }), children);
   });
 };
-
 export default TopNavigation;

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

@@ -1,11 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["setLeftSidebarState"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { createContext, useContext, useEffect } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 var leftSidebarState = {
@@ -16,8 +13,8 @@ var leftSidebarState = {
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
   isFixed: true
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
   expandLeftSidebar: noop,
@@ -27,11 +24,11 @@ export var SidebarResizeContext = /*#__PURE__*/createContext({
 });
 export var usePageLayoutResize = function usePageLayoutResize() {
   var _useContext = useContext(SidebarResizeContext),
-      setLeftSidebarState = _useContext.setLeftSidebarState,
-      context = _objectWithoutProperties(_useContext, _excluded);
-
+    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.
@@ -49,11 +46,9 @@ export var usePageLayoutResize = function usePageLayoutResize() {
  * 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;
-
+    setLeftSidebarState = _useContext2.setLeftSidebarState;
   useEffect(function () {
     setLeftSidebarState(function (current) {
       return _objectSpread(_objectSpread({}, current), {}, {

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

@@ -5,50 +5,47 @@ import { isReducedMotion } from '@atlaskit/motion';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, GRAB_AREA_SELECTOR, IS_SIDEBAR_COLLAPSING } from '../common/constants';
 import { getPageLayoutSlotCSSSelector } from '../common/utils';
 import { SidebarResizeContext } from './sidebar-resize-context';
-
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
   var isLeftSidebarCollapsed = arguments.length > 1 ? arguments[1] : undefined;
   var leftSidebarState = arguments.length > 2 ? arguments[2] : undefined;
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SidebarResizeController = function SidebarResizeController(_ref) {
   var children = _ref.children,
-      onExpand = _ref.onLeftSidebarExpand,
-      onCollapse = _ref.onLeftSidebarCollapse;
-
+    onExpand = _ref.onLeftSidebarExpand,
+    onCollapse = _ref.onLeftSidebarCollapse;
   var _useState = useState({
-    isFlyoutOpen: false,
-    isResizing: false,
-    isLeftSidebarCollapsed: false,
-    leftSidebarWidth: 0,
-    lastLeftSidebarWidth: 0,
-    flyoutLockCount: 0,
-    isFixed: true
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      leftSidebarState = _useState2[0],
-      setLeftSidebarState = _useState2[1];
-
+      isFlyoutOpen: false,
+      isResizing: false,
+      isLeftSidebarCollapsed: false,
+      leftSidebarWidth: 0,
+      lastLeftSidebarWidth: 0,
+      flyoutLockCount: 0,
+      isFixed: true
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    leftSidebarState = _useState2[0],
+    setLeftSidebarState = _useState2[1];
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
   var leftSidebarSelector = getPageLayoutSlotCSSSelector('left-sidebar');
   var transitionEventHandler = useCallback(function (event) {
     if (event.propertyName === 'width' && event.target && event.target.matches(leftSidebarSelector)) {
       var $leftSidebarResizeController = document.querySelector("[".concat(GRAB_AREA_SELECTOR, "]"));
       var isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
-      handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState); // Make sure multiple event handlers do not get attached
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState);
 
+      // Make sure multiple event handlers do not get attached
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(function () {
     var $leftSidebar = document.querySelector(leftSidebarSelector);
-
     if ($leftSidebar && !isReducedMotion()) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       $leftSidebar.addEventListener('transitionend', transitionEventHandler);
@@ -56,14 +53,12 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);
   var expandLeftSidebar = useCallback(function () {
     var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
-        isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount,
-        isFixed = leftSidebarState.isFixed;
-
+      isResizing = leftSidebarState.isResizing,
+      flyoutLockCount = leftSidebarState.flyoutLockCount,
+      isFixed = leftSidebarState.isFixed;
     if (isResizing) {
       return;
     }
-
     var width = Math.max(lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH);
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -74,25 +69,25 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       flyoutLockCount: flyoutLockCount,
       isFixed: isFixed
     };
-    setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
+    setLeftSidebarState(updatedLeftSidebarState);
 
+    // onTransitionEnd isn't triggered when a user prefers reduced motion
     if (isReducedMotion()) {
       handleDataAttributesAndCb(onExpand, false, updatedLeftSidebarState);
     }
   }, [leftSidebarState, onExpand]);
   var collapseLeftSidebar = useCallback(function (event, collapseWithoutTransition) {
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth,
-        isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount,
-        isFixed = leftSidebarState.isFixed,
-        isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
-
+      isResizing = leftSidebarState.isResizing,
+      flyoutLockCount = leftSidebarState.flyoutLockCount,
+      isFixed = leftSidebarState.isFixed,
+      isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
     if (isResizing || isLeftSidebarCollapsed) {
       return;
-    } // data-attribute is used as a CSS selector to sync the hiding/showing
-    // of the nav contents with expand/collapse animation
-
+    }
 
+    // data-attribute is used as a CSS selector to sync the hiding/showing
+    // of the nav contents with expand/collapse animation
     document.documentElement.setAttribute(IS_SIDEBAR_COLLAPSING, 'true');
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: true,
@@ -103,8 +98,9 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       flyoutLockCount: flyoutLockCount,
       isFixed: isFixed
     };
-    setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
+    setLeftSidebarState(updatedLeftSidebarState);
 
+    // onTransitionEnd isn't triggered when a user prefers reduced motion
     if (collapseWithoutTransition || isReducedMotion()) {
       handleDataAttributesAndCb(onCollapse, true, updatedLeftSidebarState);
     }

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

@@ -11,9 +11,8 @@ export var useSkipLinks = function useSkipLinks() {
 };
 export var useSkipLink = function useSkipLink(id, skipLinkTitle) {
   var _useSkipLinks = useSkipLinks(),
-      registerSkipLink = _useSkipLinks.registerSkipLink,
-      unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
-
+    registerSkipLink = _useSkipLinks.registerSkipLink,
+    unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
   useEffect(function () {
     if (id && skipLinkTitle) {
       registerSkipLink({
@@ -21,7 +20,6 @@ export var useSkipLink = function useSkipLink(id, skipLinkTitle) {
         skipLinkTitle: skipLinkTitle
       });
     }
-
     return function () {
       unregisterSkipLink(id);
     };

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

@@ -3,22 +3,20 @@ 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';
-
 var byDOMOrder = function byDOMOrder(a, b) {
   var _a$listIndex, _b$listIndex;
-
   var elems = Array.from(document.querySelectorAll("[".concat(PAGE_LAYOUT_SLOT_SELECTOR, "]")));
   var elemA = document.getElementById(a.id);
   var elemB = document.getElementById(b.id);
   var indexA = (_a$listIndex = a.listIndex) !== null && _a$listIndex !== void 0 ? _a$listIndex : elems.indexOf(elemA);
   var indexB = (_b$listIndex = b.listIndex) !== null && _b$listIndex !== void 0 ? _b$listIndex : elems.indexOf(elemB);
+
   /**
    * If they are tied it is because one (or both) is
    * a custom skiplink with a set index.
    *
    * Give the custom skiplink priority.
    */
-
   if (indexA === indexB) {
     if (a.listIndex !== undefined) {
       return -1;
@@ -26,19 +24,16 @@ var byDOMOrder = function byDOMOrder(a, b) {
       return 1;
     }
   }
-
   return indexA - indexB;
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SkipLinksController = function SkipLinksController(_ref) {
   var children = _ref.children;
-
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      links = _useState2[0],
-      setLinks = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    links = _useState2[0],
+    setLinks = _useState2[1];
   var registerSkipLink = useRef(function (skipLinkData) {
     // Don't add duplicate SkipLinks
     setLinks(function (oldLinks) {
@@ -48,7 +43,6 @@ export var SkipLinksController = function SkipLinksController(_ref) {
       })) {
         return oldLinks;
       }
-
       return [].concat(_toConsumableArray(oldLinks), [skipLinkData]).sort(byDOMOrder);
     });
   });

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

@@ -1,25 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { mergeGridStateIntoStorage, removeFromGridStateInStorage } from '../common/utils';
-
 var publishGridState = function publishGridState(gridState) {
   Object.entries(gridState).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        slotName = _ref2[0],
-        value = _ref2[1];
-
+      slotName = _ref2[0],
+      value = _ref2[1];
     if (!value) {
       document.documentElement.style.removeProperty("--".concat(slotName));
       removeFromGridStateInStorage('gridState', slotName);
       return;
-    } //Update the css variable
+    }
 
+    //Update the css variable
+    document.documentElement.style.setProperty("--".concat(slotName), "".concat(value, "px"));
 
-    document.documentElement.style.setProperty("--".concat(slotName), "".concat(value, "px")); // also update state in local storage so that
+    // also update state in local storage so that
     // it persists across page refresh, across tabs etc
-
     mergeGridStateIntoStorage('gridState', _defineProperty({}, slotName, value));
   });
 };
-
 export default publishGridState;

package/dist/esm/controllers/use-update-css-vars.js

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-
 function useUpdateCssVar(cssVar, value) {
   useEffect(function () {
     document.documentElement.style.setProperty("--".concat(cssVar), "".concat(value, "px"));
@@ -8,5 +7,4 @@ function useUpdateCssVar(cssVar, value) {
     };
   }, [cssVar, value]);
 }
-
 export default useUpdateCssVar;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.3.7",
+	"version": "1.3.9",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",