@atlaskit/page-layout 1.3.7 → 1.3.9

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

@@ -1,38 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _constants = require("../../common/constants");
-
 var _utils = require("../../common/utils");
-
 var _controllers = require("../../controllers");
-
 var _resizeControl = _interopRequireDefault(require("../resize-control"));
-
 var _leftSidebarInner = _interopRequireDefault(require("./internal/left-sidebar-inner"));
-
 var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-outer"));
-
 var _resizableChildrenWrapper = _interopRequireDefault(require("./internal/resizable-children-wrapper"));
-
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
-
 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) { (0, _defineProperty2.default)(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; }
-
 /**
  * __Left sidebar__
  *
@@ -43,42 +28,42 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,
-      width = props.width,
-      _props$isFixed = props.isFixed,
-      isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
-      resizeButtonLabel = props.resizeButtonLabel,
-      resizeGrabAreaLabel = props.resizeGrabAreaLabel,
-      overrides = props.overrides,
-      onExpand = props.onExpand,
-      onCollapse = props.onCollapse,
-      onResizeStart = props.onResizeStart,
-      onResizeEnd = props.onResizeEnd,
-      onFlyoutExpand = props.onFlyoutExpand,
-      onFlyoutCollapse = props.onFlyoutCollapse,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle,
-      collapsedState = props.collapsedState;
+    width = props.width,
+    _props$isFixed = props.isFixed,
+    isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
+    resizeButtonLabel = props.resizeButtonLabel,
+    resizeGrabAreaLabel = props.resizeGrabAreaLabel,
+    overrides = props.overrides,
+    onExpand = props.onExpand,
+    onCollapse = props.onCollapse,
+    onResizeStart = props.onResizeStart,
+    onResizeEnd = props.onResizeEnd,
+    onFlyoutExpand = props.onFlyoutExpand,
+    onFlyoutCollapse = props.onFlyoutCollapse,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle,
+    collapsedState = props.collapsedState;
   var flyoutTimerRef = (0, _react.useRef)();
   var mouseOverEventRef = (0, _react.useRef)();
   var leftSideBarRef = (0, _react.useRef)(null);
-
   var _useContext = (0, _react.useContext)(_controllers.SidebarResizeContext),
-      leftSidebarState = _useContext.leftSidebarState,
-      setLeftSidebarState = _useContext.setLeftSidebarState;
-
+    leftSidebarState = _useContext.leftSidebarState,
+    setLeftSidebarState = _useContext.setLeftSidebarState;
   var isFlyoutOpen = leftSidebarState.isFlyoutOpen,
-      isResizing = leftSidebarState.isResizing,
-      flyoutLockCount = leftSidebarState.flyoutLockCount,
-      isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
-      leftSidebarWidth = leftSidebarState.leftSidebarWidth,
-      lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth;
+    isResizing = leftSidebarState.isResizing,
+    flyoutLockCount = leftSidebarState.flyoutLockCount,
+    isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
+    leftSidebarWidth = leftSidebarState.leftSidebarWidth,
+    lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth;
   var isLocked = flyoutLockCount > 0;
   var isLockedRef = (0, _react.useRef)(isLocked);
   var mouseXRef = (0, _react.useRef)(0);
   var handlerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    isLockedRef.current = isLocked; // I tried a one-time `mousemove` handler that gets attached
+    isLockedRef.current = isLocked;
+
+    // I tried a one-time `mousemove` handler that gets attached
     // when the lock releases. This is not robust because
     // the mouse can stay still after release (e.g. using keyboard)
     // and the sidebar will erroneously stay open.
@@ -89,52 +74,43 @@ var LeftSidebar = function LeftSidebar(props) {
       handlerRef.current = function (event) {
         mouseXRef.current = event.clientX;
       };
-
       document.addEventListener('mousemove', handlerRef.current);
     }
-
     if (!isLocked && handlerRef.current) {
       if (mouseXRef.current >= lastLeftSidebarWidth) {
         setLeftSidebarState(_objectSpread(_objectSpread({}, leftSidebarState), {}, {
           isFlyoutOpen: false
         }));
       }
-
       document.removeEventListener('mousemove', handlerRef.current);
       handlerRef.current = null;
     }
-
     return function () {
       if (handlerRef.current) {
         document.removeEventListener('mousemove', handlerRef.current);
       }
     };
   }, [isLocked, lastLeftSidebarWidth, leftSidebarState, setLeftSidebarState]);
-
   var _width = Math.max(width || 0, _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
-
   var collapsedStateOverrideOpen = collapsedState === 'expanded';
   var leftSidebarWidthOnMount;
-
   if (collapsedStateOverrideOpen) {
     leftSidebarWidthOnMount = (0, _utils.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'));
-  } // Update state from cache on mount
-
+  }
 
+  // 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 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) {
       leftSidebarWidth = _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH;
     }
-
     setLeftSidebarState({
       isFlyoutOpen: false,
       isResizing: isResizing,
@@ -143,46 +119,40 @@ var LeftSidebar = function LeftSidebar(props) {
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       flyoutLockCount: 0,
       isFixed: isFixed
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Every time other than mount,
-  // update the local storage and css variables.
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
+  // Every time other than mount,
+  // update the local storage and css variables.
   var notFirstRun = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
     if (notFirstRun.current) {
       var _publishGridState;
-
       (0, _controllers.publishGridState)((_publishGridState = {}, (0, _defineProperty2.default)(_publishGridState, _constants.VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth || leftSidebarWidthOnMount), (0, _defineProperty2.default)(_publishGridState, _constants.VAR_LEFT_SIDEBAR_FLYOUT, lastLeftSidebarWidth), _publishGridState));
       (0, _utils.mergeGridStateIntoStorage)('isLeftSidebarCollapsed', isLeftSidebarCollapsed);
     }
-
     if (!notFirstRun.current) {
       notFirstRun.current = true;
     }
-
     return function () {
       removeMouseOverListener();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLeftSidebarCollapsed, leftSidebarWidth, id]);
-
   var onMouseOver = function onMouseOver(event) {
     var isMouseOnResizeButton = event.target.matches("[".concat(_constants.RESIZE_BUTTON_SELECTOR, "]")) || event.target.matches("[".concat(_constants.RESIZE_BUTTON_SELECTOR, "] *"));
-
     if (isFlyoutOpen || isMouseOnResizeButton || !isLeftSidebarCollapsed) {
       return;
     }
-
     event.persist();
     flyoutTimerRef.current && clearTimeout(flyoutTimerRef.current);
-
     if (!mouseOverEventRef.current) {
       mouseOverEventRef.current = function (event) {
         var leftSidebar = leftSideBarRef.current;
-
         if (leftSidebar === null || isLockedRef.current) {
           return;
         }
-
         if (!leftSidebar.contains(event.target)) {
           flyoutTimerRef.current && clearTimeout(flyoutTimerRef.current);
           onFlyoutCollapse && onFlyoutCollapse();
@@ -195,7 +165,6 @@ var LeftSidebar = function LeftSidebar(props) {
         }
       };
     }
-
     document.addEventListener('mouseover', mouseOverEventRef.current, {
       capture: true,
       passive: true
@@ -209,23 +178,18 @@ var LeftSidebar = function LeftSidebar(props) {
       onFlyoutExpand && onFlyoutExpand();
     }, _constants.FLYOUT_DELAY);
   };
-
   var removeMouseOverListener = function removeMouseOverListener() {
     mouseOverEventRef.current && document.removeEventListener('mouseover', mouseOverEventRef.current, {
       capture: true,
       passive: true
     });
   };
-
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-
   var onMouseLeave = function onMouseLeave(event) {
     var isMouseOnResizeButton = event.target.matches("[".concat(_constants.RESIZE_BUTTON_SELECTOR, "]")) || event.target.matches("[".concat(_constants.RESIZE_BUTTON_SELECTOR, "] *"));
-
     if (isMouseOnResizeButton || !isLeftSidebarCollapsed || flyoutLockCount > 0) {
       return;
     }
-
     onFlyoutCollapse && onFlyoutCollapse();
     setTimeout(function () {
       setLeftSidebarState(function (current) {
@@ -235,8 +199,8 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     }, _constants.FLYOUT_DELAY);
   };
-
-  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+  return (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     (0, _react2.jsx)(_leftSidebarOuter.default, {
       ref: leftSideBarRef,
       testId: testId,
@@ -258,7 +222,8 @@ var LeftSidebar = function LeftSidebar(props) {
     }, children), (0, _react2.jsx)(_resizeControl.default, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
-      resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      resizeButtonLabel: resizeButtonLabel
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
       ,
       overrides: overrides,
       onCollapse: onCollapse,
@@ -270,6 +235,5 @@ var LeftSidebar = function LeftSidebar(props) {
     })))
   );
 };
-
 var _default = LeftSidebar;
 exports.default = _default;

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

@@ -1,33 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _accessibility = require("@atlaskit/motion/accessibility");
-
 var _curves = require("@atlaskit/motion/curves");
-
 var _constants = require("../../common/constants");
-
 var _hooks = require("../../common/hooks");
-
 var _utils = require("../../common/utils");
-
 var _controllers = require("../../controllers");
-
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
-
 /** @jsx jsx */
+
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
 var mainStyles = (0, _react2.css)({
@@ -43,16 +32,17 @@ var draggingStyles = (0, _react2.css)({
   // Make sure drag to resize remains snappy.
   transition: 'none'
 });
+
 /**
  * Adds a negative left margin to main,
  * which transitions at the same speed as the left sidebar's width increase.
  * This give an illusion that the flyout is appearing on top of the main content,
  * while main remains in place.
  */
-
 var flyoutStyles = (0, _react2.css)({
   marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
+
 /**
  * __Main__
  *
@@ -61,20 +51,17 @@ var flyoutStyles = (0, _react2.css)({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var Main = function Main(props) {
   var children = props.children,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle;
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
   var isDragging = (0, _hooks.useIsSidebarDragging)();
-
   var _useContext = (0, _react.useContext)(_controllers.SidebarResizeContext),
-      _useContext$leftSideb = _useContext.leftSidebarState,
-      isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
-      isFixed = _useContext$leftSideb.isFixed;
-
+    _useContext$leftSideb = _useContext.leftSidebarState,
+    isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
+    isFixed = _useContext$leftSideb.isFixed;
   return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
     return (0, _react2.jsx)("div", (0, _extends2.default)({
@@ -85,6 +72,5 @@ var Main = function Main(props) {
     }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
   });
 };
-
 var _default = Main;
 exports.default = _default;

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

@@ -1,27 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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 _constants = require("../../common/constants");
-
 var _controllers = require("../../controllers");
-
 var _skipLinks = require("../skip-links");
-
 /** @jsx jsx */
+
 var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
 var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
 var gridStyles = (0, _react2.css)({
@@ -32,6 +24,7 @@ var gridStyles = (0, _react2.css)({
   gridTemplateRows: "".concat(_constants.BANNER_HEIGHT, " ").concat(_constants.TOP_NAVIGATION_HEIGHT, " auto"),
   outline: 'none'
 });
+
 /**
  * __Page layout__
  *
@@ -40,14 +33,13 @@ var gridStyles = (0, _react2.css)({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,
-      skipLinksLabel = _ref$skipLinksLabel === void 0 ? _constants.DEFAULT_I18N_PROPS_SKIP_LINKS : _ref$skipLinksLabel,
-      children = _ref.children,
-      testId = _ref.testId,
-      onLeftSidebarExpand = _ref.onLeftSidebarExpand,
-      onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
+    skipLinksLabel = _ref$skipLinksLabel === void 0 ? _constants.DEFAULT_I18N_PROPS_SKIP_LINKS : _ref$skipLinksLabel,
+    children = _ref.children,
+    testId = _ref.testId,
+    onLeftSidebarExpand = _ref.onLeftSidebarExpand,
+    onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
   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, {
@@ -59,6 +51,5 @@ var PageLayout = function PageLayout(_ref) {
     onLeftSidebarExpand: onLeftSidebarExpand
   }, children))));
 };
-
 var _default = PageLayout;
 exports.default = _default;

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

@@ -1,31 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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 _constants = require("../../common/constants");
-
 var _utils = require("../../common/utils");
-
 var _controllers = require("../../controllers");
-
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
-
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
-
 /** @jsx jsx */
+
 var baseStyles = (0, _react2.css)({
   gridArea: _constants.RIGHT_PANEL
 });
@@ -36,6 +26,7 @@ var fixedStyles = (0, _react2.css)({
   right: 0,
   bottom: 0
 });
+
 /**
  * __Right panel__
  *
@@ -44,16 +35,15 @@ var fixedStyles = (0, _react2.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 ? _constants.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 ? _constants.DEFAULT_RIGHT_PANEL_WIDTH : _props$width,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   var rightPanelWidth = (0, _utils.resolveDimension)(_constants.VAR_RIGHT_PANEL_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, rightPanelWidth));
@@ -75,6 +65,5 @@ var RightPanel = function RightPanel(props) {
     }), children);
   });
 };
-
 var _default = RightPanel;
 exports.default = _default;

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

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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 _constants = require("../../common/constants");
-
 var _utils = require("../../common/utils");
-
 var _controllers = require("../../controllers");
-
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
-
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
-
 /** @jsx jsx */
 
 /**
@@ -50,12 +39,12 @@ var staticInnerStyles = (0, _react2.css)({
 var outerStyles = (0, _react2.css)({
   width: _constants.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 = (0, _react2.css)({
   '&::after': {
     display: 'inline-block',
@@ -63,6 +52,7 @@ var fixedOuterStyles = (0, _react2.css)({
     content: "''"
   }
 });
+
 /**
  * __Right sidebar__
  *
@@ -71,16 +61,15 @@ var fixedOuterStyles = (0, _react2.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 ? _constants.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 ? _constants.DEFAULT_RIGHT_SIDEBAR_WIDTH : _props$width,
+    isFixed = props.isFixed,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   var rightSidebarWidth = (0, _utils.resolveDimension)(_constants.VAR_RIGHT_SIDEBAR_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
@@ -106,6 +95,5 @@ var RightSidebar = function RightSidebar(props) {
     }, children));
   });
 };
-
 var _default = RightSidebar;
 exports.default = _default;

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

@@ -1,18 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _default = function _default(_ref) {
   var variableName = _ref.variableName,
-      value = _ref.value;
+    value = _ref.value;
   return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"));
 };
-
 exports.default = _default;

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

@@ -1,31 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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 _constants = require("../../common/constants");
-
 var _utils = require("../../common/utils");
-
 var _controllers = require("../../controllers");
-
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
-
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
-
 /** @jsx jsx */
+
 var topNavigationStyles = (0, _react2.css)({
   height: _constants.TOP_NAVIGATION_HEIGHT,
   gridArea: _constants.TOP_NAVIGATION
@@ -37,6 +27,7 @@ var fixedStyles = (0, _react2.css)({
   right: _constants.RIGHT_PANEL_WIDTH,
   left: _constants.LEFT_PANEL_WIDTH
 });
+
 /**
  * __Top navigation__
  *
@@ -45,17 +36,16 @@ var fixedStyles = (0, _react2.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 ? _constants.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 ? _constants.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 = (0, _utils.resolveDimension)(_constants.VAR_TOP_NAVIGATION_HEIGHT, height, shouldPersistHeight);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
@@ -77,6 +67,5 @@ var TopNavigation = function TopNavigation(props) {
     }), children);
   });
 };
-
 var _default = TopNavigation;
 exports.default = _default;