@atlaskit/page-layout 1.3.7 → 1.3.9

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

@@ -4,13 +4,12 @@ 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';
-
 const handleDataAttributesAndCb = (callback = noop, isLeftSidebarCollapsed, leftSidebarState) => {
   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 const SidebarResizeController = ({
   children,
   onLeftSidebarExpand: onExpand,
@@ -33,16 +32,16 @@ export const SidebarResizeController = ({
     if (event.propertyName === 'width' && event.target && event.target.matches(leftSidebarSelector)) {
       const $leftSidebarResizeController = document.querySelector(`[${GRAB_AREA_SELECTOR}]`);
       const 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(() => {
     const $leftSidebar = document.querySelector(leftSidebarSelector);
-
     if ($leftSidebar && !isReducedMotion()) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       $leftSidebar.addEventListener('transitionend', transitionEventHandler);
@@ -55,11 +54,9 @@ export const SidebarResizeController = ({
       flyoutLockCount,
       isFixed
     } = leftSidebarState;
-
     if (isResizing) {
       return;
     }
-
     const width = Math.max(lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH);
     const updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -70,8 +67,9 @@ export const SidebarResizeController = ({
       flyoutLockCount,
       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);
     }
@@ -84,13 +82,12 @@ export const SidebarResizeController = ({
       isFixed,
       isLeftSidebarCollapsed
     } = leftSidebarState;
-
     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');
     const updatedLeftSidebarState = {
       isLeftSidebarCollapsed: true,
@@ -101,8 +98,9 @@ export const SidebarResizeController = ({
       flyoutLockCount,
       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/es2019/controllers/skip-link-context.js

@@ -19,7 +19,6 @@ export const useSkipLink = (id, skipLinkTitle) => {
         skipLinkTitle
       });
     }
-
     return () => {
       unregisterSkipLink(id);
     };

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

@@ -1,22 +1,20 @@
 import React, { useRef, useState } from 'react';
 import { PAGE_LAYOUT_SLOT_SELECTOR } from '../common/constants';
 import { SkipLinksContext } from './skip-link-context';
-
 const byDOMOrder = (a, b) => {
   var _a$listIndex, _b$listIndex;
-
   const elems = Array.from(document.querySelectorAll(`[${PAGE_LAYOUT_SLOT_SELECTOR}]`));
   const elemA = document.getElementById(a.id);
   const elemB = document.getElementById(b.id);
   const indexA = (_a$listIndex = a.listIndex) !== null && _a$listIndex !== void 0 ? _a$listIndex : elems.indexOf(elemA);
   const 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;
@@ -24,11 +22,10 @@ const 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 const SkipLinksController = ({
   children
 }) => {
@@ -41,7 +38,6 @@ export const SkipLinksController = ({
       }) => id === skipLinkData.id)) {
         return oldLinks;
       }
-
       return [...oldLinks, skipLinkData].sort(byDOMOrder);
     });
   });

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

@@ -1,21 +1,20 @@
 import { mergeGridStateIntoStorage, removeFromGridStateInStorage } from '../common/utils';
-
 const publishGridState = gridState => {
   Object.entries(gridState).forEach(([slotName, value]) => {
     if (!value) {
       document.documentElement.style.removeProperty(`--${slotName}`);
       removeFromGridStateInStorage('gridState', slotName);
       return;
-    } //Update the css variable
+    }
 
+    //Update the css variable
+    document.documentElement.style.setProperty(`--${slotName}`, `${value}px`);
 
-    document.documentElement.style.setProperty(`--${slotName}`, `${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', {
       [slotName]: value
     });
   });
 };
-
 export default publishGridState;

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

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

package/dist/es2019/version.json

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

package/dist/esm/common/constants.js

@@ -6,8 +6,9 @@ export var VAR_RIGHT_PANEL_WIDTH = 'rightPanelWidth';
 export var VAR_TOP_NAVIGATION_HEIGHT = 'topNavigationHeight';
 export var VAR_BANNER_HEIGHT = 'bannerHeight';
 export var VAR_LEFT_SIDEBAR_FLYOUT = 'leftSidebarFlyoutWidth';
-export var DIMENSIONS = [VAR_LEFT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT, VAR_LEFT_SIDEBAR_WIDTH, VAR_RIGHT_SIDEBAR_WIDTH]; // Grid area names
+export var DIMENSIONS = [VAR_LEFT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT, VAR_LEFT_SIDEBAR_WIDTH, VAR_RIGHT_SIDEBAR_WIDTH];
 
+// Grid area names
 export var LEFT_PANEL = 'left-panel';
 export var RIGHT_PANEL = 'right-panel';
 export var BANNER = 'banner';
@@ -15,15 +16,17 @@ export var TOP_NAVIGATION = 'top-navigation';
 export var CONTENT = 'content';
 export var MAIN = 'main';
 export var LEFT_SIDEBAR = 'left-sidebar';
-export var RIGHT_SIDEBAR = 'right-sidebar'; // Default slot dimension values
+export var RIGHT_SIDEBAR = 'right-sidebar';
 
+// Default slot dimension values
 export var DEFAULT_BANNER_HEIGHT = 56;
 export var DEFAULT_TOP_NAVIGATION_HEIGHT = 56;
 export var DEFAULT_LEFT_SIDEBAR_WIDTH = 240;
 export var DEFAULT_RIGHT_SIDEBAR_WIDTH = 280;
 export var DEFAULT_RIGHT_PANEL_WIDTH = 368;
-export var DEFAULT_LEFT_PANEL_WIDTH = 368; // Other constants
+export var DEFAULT_LEFT_PANEL_WIDTH = 368;
 
+// Other constants
 export var COLLAPSED_LEFT_SIDEBAR_WIDTH = 20;
 export var MIN_LEFT_SIDEBAR_WIDTH = 80;
 export var DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = 240;
@@ -31,8 +34,9 @@ export var MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = 200;
 export var TRANSITION_DURATION = 300;
 export var FLYOUT_DELAY = 200;
 export var LEFT_SIDEBAR_EXPANDED_WIDTH = 'expandedLeftSidebarWidth';
-export var PAGE_LAYOUT_LS_KEY = 'DS_PAGE_LAYOUT_UI_STATE'; // Data attributes
+export var PAGE_LAYOUT_LS_KEY = 'DS_PAGE_LAYOUT_UI_STATE';
 
+// Data attributes
 export var IS_SIDEBAR_DRAGGING = 'data-is-sidebar-dragging';
 export var IS_SIDEBAR_COLLAPSING = 'data-is-sidebar-collapsing';
 export var IS_FLYOUT_OPEN = 'data-is-flyout-open';

package/dist/esm/common/hooks/use-is-sidebar-collapsing.js

@@ -1,22 +1,18 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useState } from 'react';
 import { IS_SIDEBAR_COLLAPSING } from '../constants';
-
 var getIsCollapsing = function getIsCollapsing() {
   // SSR bail-out because document is undefined on the server
   if (typeof document === 'undefined') {
     return false;
   }
-
   return document.documentElement.getAttribute(IS_SIDEBAR_COLLAPSING) === 'true';
 };
-
 var useIsSidebarCollapsing = function useIsSidebarCollapsing() {
   var _useState = useState(getIsCollapsing),
-      _useState2 = _slicedToArray(_useState, 2),
-      isCollapsing = _useState2[0],
-      setIsCollapsing = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsing = _useState2[0],
+    setIsCollapsing = _useState2[1];
   useEffect(function () {
     var observer = new MutationObserver(function () {
       setIsCollapsing(getIsCollapsing);
@@ -30,5 +26,4 @@ var useIsSidebarCollapsing = function useIsSidebarCollapsing() {
   }, []);
   return isCollapsing;
 };
-
 export default useIsSidebarCollapsing;

package/dist/esm/common/hooks/use-is-sidebar-dragging.js

@@ -1,22 +1,18 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useState } from 'react';
 import { IS_SIDEBAR_DRAGGING } from '../constants';
-
 var getIsDragging = function getIsDragging() {
   // SSR bail-out because document is undefined on the server
   if (typeof document === 'undefined') {
     return false;
   }
-
   return document.documentElement.getAttribute(IS_SIDEBAR_DRAGGING) === 'true';
 };
-
 var useIsSidebarDragging = function useIsSidebarDragging() {
   var _useState = useState(getIsDragging),
-      _useState2 = _slicedToArray(_useState, 2),
-      isDragging = _useState2[0],
-      setIsDragging = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
   useEffect(function () {
     var observer = new MutationObserver(function () {
       setIsDragging(getIsDragging);
@@ -30,5 +26,4 @@ var useIsSidebarDragging = function useIsSidebarDragging() {
   }, []);
   return isDragging;
 };
-
 export default useIsSidebarDragging;

package/dist/esm/common/safe-local-storage.js

@@ -13,13 +13,12 @@ var isLocalStorageSupported = function isLocalStorageSupported() {
     return false;
   }
 };
-
 var safeLocalStorage = function safeLocalStorage() {
   if (isLocalStorageSupported()) {
     return localStorage;
-  } // Returning a mock object here in the case that this is run in SSR mode
-
+  }
 
+  // Returning a mock object here in the case that this is run in SSR mode
   if (typeof window === 'undefined') {
     return {
       getItem: function getItem(_key) {
@@ -37,24 +36,19 @@ var safeLocalStorage = function safeLocalStorage() {
       key: function key(_index) {
         return null;
       },
-
       get length() {
         return 0;
       }
-
     };
   }
-
   if (window.__localStorageFallback && Object.keys(window.__localStorageFallback).length !== 0) {
     return window.__localStorageFallback;
   }
-
   var storageAPI = {
     getItem: function getItem(key) {
       if (window.__localStorageFallback.hasOwnProperty(key)) {
         return window.__localStorageFallback[key];
       }
-
       return null;
     },
     setItem: function setItem(key, value) {
@@ -70,18 +64,14 @@ var safeLocalStorage = function safeLocalStorage() {
         }
       }
     },
-
     get length() {
       if (!window.__localStorageFallback) {
         return 0;
       }
-
       return Object.keys(window.__localStorageFallback).length;
     }
-
   };
   window.__localStorageFallback = Object.create(storageAPI);
   return window.__localStorageFallback;
 };
-
 export default safeLocalStorage;

package/dist/esm/common/utils.js

@@ -1,85 +1,63 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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 { DEFAULT_LEFT_SIDEBAR_WIDTH, DIMENSIONS, LEFT_PANEL_WIDTH, PAGE_LAYOUT_LS_KEY, PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
 import safeLocalStorage from './safe-local-storage';
 var emptyGridState = DIMENSIONS.reduce(function (acc, currentValue) {
   return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, currentValue, 0));
 }, {});
-
 var mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
   var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
-
   if (value !== null && _typeof(value) === 'object') {
     storageValue[key] = _objectSpread(_objectSpread({}, storageValue[key]), value);
   } else {
     storageValue[key] = value;
   }
-
   safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
 };
-
 var getGridStateFromStorage = function getGridStateFromStorage(key) {
   var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
   return storageValue[key];
 };
-
 var removeFromGridStateInStorage = function removeFromGridStateInStorage(key, secondKey) {
   var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
-
   if (secondKey && storageValue[key]) {
     delete storageValue[key][secondKey];
   } else {
     delete storageValue[key];
   }
-
   safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
 };
-
 var resolveDimension = function resolveDimension(key) {
   var dimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var shouldPersist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
   if (shouldPersist) {
     var cachedGridState = getGridStateFromStorage('gridState');
     return cachedGridState && Object.keys(cachedGridState).length > 0 && cachedGridState[key] ? cachedGridState[key] : dimension;
   }
-
   return dimension;
 };
-
 var getLeftPanelWidth = function getLeftPanelWidth() {
   if (typeof window === 'undefined') {
     return 0;
   }
-
   return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("--".concat(LEFT_PANEL_WIDTH)), 10) || 0;
 };
-
 var getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, maxWidth) {
   var total = (currentWidth - DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - DEFAULT_LEFT_SIDEBAR_WIDTH);
-
   if (total < 0) {
     return 0;
   }
-
   if (total > 1) {
     return 100;
   }
-
   return Math.floor(total * 100);
 };
-
 var getPageLayoutSlotSelector = function getPageLayoutSlotSelector(slotName) {
   return _defineProperty({}, PAGE_LAYOUT_SLOT_SELECTOR, slotName);
 };
-
 var getPageLayoutSlotCSSSelector = function getPageLayoutSlotCSSSelector(slotName) {
   return "[".concat(PAGE_LAYOUT_SLOT_SELECTOR, "='").concat(slotName, "']");
 };
-
 export { emptyGridState, mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector };

package/dist/esm/components/resize-control/grab-area.js

@@ -2,12 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["testId", "isLeftSidebarCollapsed"];
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
-
 /**
  * Determines the color of the grab line.
  *
@@ -45,26 +44,22 @@ var lineStyles = css({
   backgroundColor: "var(".concat(varLineColor, ")"),
   transition: 'background-color 200ms'
 });
-
 var grabAreaLineSelector = _defineProperty({}, GRAB_AREA_LINE_SELECTOR, true);
-
-var grabAreaSelector = _defineProperty({}, GRAB_AREA_SELECTOR, true); // TODO: Consider allowing this to be controlled using arrow keys
-
-
+var grabAreaSelector = _defineProperty({}, GRAB_AREA_SELECTOR, true);
+// TODO: Consider allowing this to be controlled using arrow keys
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
-      isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return jsx("button", _extends({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest), jsx("span", _extends({
     css: lineStyles
   }, grabAreaLineSelector)));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default GrabArea;