@atlaskit/page-layout 1.3.8 → 1.3.10

package/dist/cjs/components/slots/banner-slot.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 bannerStyles = (0, _react2.css)({
   height: _constants.BANNER_HEIGHT,
   gridArea: _constants.BANNER
@@ -37,6 +27,7 @@ var bannerFixedStyles = (0, _react2.css)({
   right: _constants.RIGHT_PANEL_WIDTH,
   left: _constants.LEFT_PANEL_WIDTH
 });
+
 /**
  * __Banner__
  *
@@ -45,17 +36,16 @@ var bannerFixedStyles = (0, _react2.css)({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var Banner = function Banner(props) {
   var children = props.children,
-      _props$height = props.height,
-      height = _props$height === void 0 ? _constants.DEFAULT_BANNER_HEIGHT : _props$height,
-      _props$isFixed = props.isFixed,
-      isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
-      shouldPersistHeight = props.shouldPersistHeight,
-      testId = props.testId,
-      skipLinkTitle = props.skipLinkTitle,
-      id = props.id;
+    _props$height = props.height,
+    height = _props$height === void 0 ? _constants.DEFAULT_BANNER_HEIGHT : _props$height,
+    _props$isFixed = props.isFixed,
+    isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
+    shouldPersistHeight = props.shouldPersistHeight,
+    testId = props.testId,
+    skipLinkTitle = props.skipLinkTitle,
+    id = props.id;
   var bannerHeight = (0, _utils.resolveDimension)(_constants.VAR_BANNER_HEIGHT, height, shouldPersistHeight);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_BANNER_HEIGHT, bannerHeight));
@@ -77,6 +67,5 @@ var Banner = function Banner(props) {
     }), children);
   });
 };
-
 var _default = Banner;
 exports.default = _default;

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

@@ -4,18 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _constants = require("../../common/constants");
-
 /** @jsx jsx */
+
 var contentStyles = (0, _react.css)({
   display: 'flex',
   height: '100%',
   position: 'relative',
   gridArea: _constants.CONTENT
 });
+
 /**
  * __Content__
  *
@@ -24,15 +23,13 @@ var contentStyles = (0, _react.css)({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var Content = function Content(props) {
   var children = props.children,
-      testId = props.testId;
+    testId = props.testId;
   return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: contentStyles
   }, children);
 };
-
 var _default = Content;
 exports.default = _default;

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

@@ -4,25 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _motion = require("@atlaskit/motion");
-
 var _constants = require("../../../common/constants");
-
 var _hooks = require("../../../common/hooks");
-
 /** @jsx jsx */
+
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
+
 /**
  * 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 = (0, _react.css)({
   width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
@@ -34,12 +30,12 @@ var fixedInnerStyles = (0, _react.css)({
 var fixedInnerFlyoutStyles = (0, _react.css)({
   width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
 });
+
 /**
  * Static in the sense of `position: static`.
  *
  * It will expand the page height to fit its content.
  */
-
 var staticInnerStyles = (0, _react.css)({
   height: '100%'
 });
@@ -48,19 +44,18 @@ var draggingStyles = (0, _react.css)({
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
 });
-
 var LeftSidebarInner = function LeftSidebarInner(_ref) {
   var children = _ref.children,
-      _ref$isFixed = _ref.isFixed,
-      isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
-      _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-      isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
+    _ref$isFixed = _ref.isFixed,
+    isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
+    _ref$isFlyoutOpen = _ref.isFlyoutOpen,
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
   return (0, _react.jsx)("div", {
     css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = LeftSidebarInner;
 exports.default = _default;

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

@@ -1,29 +1,20 @@
 "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 _motion = require("@atlaskit/motion");
-
 var _constants = require("../../../common/constants");
-
 var _hooks = require("../../../common/hooks");
-
 var _utils = require("../../../common/utils");
-
 var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
-
 /** @jsx jsx */
+
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react2.css)((0, _motion.prefersReducedMotion)());
 var outerStyles = (0, _react2.css)({
@@ -41,12 +32,12 @@ var draggingStyles = (0, _react2.css)({
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
 });
+
 /**
  * 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 fixedStyles = (0, _react2.css)({
   '::after': {
     display: 'inline-block',
@@ -61,17 +52,16 @@ var flyoutFixedStyles = (0, _react2.css)({
   width: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
 var selector = (0, _utils.getPageLayoutSlotSelector)('left-sidebar');
-
 var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
   var children = _ref.children,
-      _ref$isFixed = _ref.isFixed,
-      isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
-      _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-      isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen,
-      testId = _ref.testId,
-      onMouseLeave = _ref.onMouseLeave,
-      onMouseOver = _ref.onMouseOver,
-      id = _ref.id;
+    _ref$isFixed = _ref.isFixed,
+    isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
+    _ref$isFlyoutOpen = _ref.isFlyoutOpen,
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen,
+    testId = _ref.testId,
+    onMouseLeave = _ref.onMouseLeave,
+    onMouseOver = _ref.onMouseOver,
+    id = _ref.id;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
   return (0, _react2.jsx)(_slotFocusRing.default, {
     isSidebar: true
@@ -94,7 +84,5 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
     );
   });
 };
-
 var _default = /*#__PURE__*/(0, _react.forwardRef)(LeftSidebarOuter);
-
 exports.default = _default;

package/dist/cjs/components/slots/internal/resizable-children-wrapper.js

@@ -4,25 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _motion = require("@atlaskit/motion");
-
 var _constants = require("../../../common/constants");
-
 var _hooks = require("../../../common/hooks");
-
 /** @jsx jsx */
+
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
+
 /**
  * The transition duration is intentionally set to 0ms.
  *
  * A transition is being used here to delay the setting of
  * opacity and visibility so that it syncs collapsing sidebar.
  */
-
 var hideLeftSidebarContentsStyles = (0, _react.css)({
   opacity: 0,
   transition: "opacity 0ms linear, visibility 0ms linear",
@@ -40,15 +36,14 @@ var fixedChildrenWrapperStyles = (0, _react.css)({
   minWidth: 240,
   height: '100%'
 });
-
 var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   var children = _ref.children,
-      _ref$isLeftSidebarCol = _ref.isLeftSidebarCollapsed,
-      isLeftSidebarCollapsed = _ref$isLeftSidebarCol === void 0 ? false : _ref$isLeftSidebarCol,
-      _ref$hasCollapsedStat = _ref.hasCollapsedState,
-      hasCollapsedState = _ref$hasCollapsedStat === void 0 ? false : _ref$hasCollapsedStat,
-      _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-      isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
+    _ref$isLeftSidebarCol = _ref.isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed = _ref$isLeftSidebarCol === void 0 ? false : _ref$isLeftSidebarCol,
+    _ref$hasCollapsedStat = _ref.hasCollapsedState,
+    hasCollapsedState = _ref$hasCollapsedStat === void 0 ? false : _ref$hasCollapsedStat,
+    _ref$isFlyoutOpen = _ref.isFlyoutOpen,
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
   var isCollapsing = (0, _hooks.useIsSidebarCollapsing)();
   var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
   var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
@@ -57,8 +52,8 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   }, (0, _react.jsx)("div", {
     css: fixedChildrenWrapperStyles
   }, children));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = ResizableChildrenWrapper;
 exports.default = _default;

package/dist/cjs/components/slots/internal/slot-focus-ring.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 /** @jsx jsx */
+
 var focusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
@@ -20,11 +18,11 @@ var focusStyles = (0, _react.css)({
     }
   }
 });
+
 /**
  * Sidebars have an outer and inner component,
  * so the nested selector needs to target an extra level deeper.
  */
-
 var sidebarFocusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
@@ -35,6 +33,7 @@ var sidebarFocusStyles = (0, _react.css)({
     }
   }
 });
+
 /**
  * We don't use `@atlaskit/focus-ring` here,
  * because we need inset focus styles and:
@@ -44,11 +43,10 @@ var sidebarFocusStyles = (0, _react.css)({
  * 2. We cannot wrap `children` in `FocusRing`,
  *    because there's no guarantee the passed child takes `className`.
  */
-
 var SlotFocusRing = function SlotFocusRing(_ref) {
   var children = _ref.children,
-      _ref$isSidebar = _ref.isSidebar,
-      isSidebar = _ref$isSidebar === void 0 ? false : _ref$isSidebar;
+    _ref$isSidebar = _ref.isSidebar,
+    isSidebar = _ref$isSidebar === void 0 ? false : _ref$isSidebar;
   return (0, _react.jsx)(_react.ClassNames, null, function (_ref2) {
     var css = _ref2.css;
     return children({
@@ -56,6 +54,5 @@ var SlotFocusRing = function SlotFocusRing(_ref) {
     });
   });
 };
-
 var _default = SlotFocusRing;
 exports.default = _default;

package/dist/cjs/components/slots/left-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 leftPanelStyles = (0, _react2.css)({
   gridArea: _constants.LEFT_PANEL
 });
@@ -36,6 +26,7 @@ var leftPanelFixedStyles = (0, _react2.css)({
   bottom: 0,
   left: 0
 });
+
 /**
  * __Left panel__
  *
@@ -44,16 +35,15 @@ var leftPanelFixedStyles = (0, _react2.css)({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var LeftPanel = function LeftPanel(props) {
   var children = props.children,
-      isFixed = props.isFixed,
-      _props$width = props.width,
-      width = _props$width === void 0 ? _constants.DEFAULT_LEFT_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_LEFT_PANEL_WIDTH : _props$width,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   var leftPanelWidth = (0, _utils.resolveDimension)(_constants.VAR_LEFT_PANEL_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_PANEL_WIDTH, leftPanelWidth));
@@ -75,6 +65,5 @@ var LeftPanel = function LeftPanel(props) {
     }), children);
   });
 };
-
 var _default = LeftPanel;
 exports.default = _default;

package/dist/cjs/components/slots/left-sidebar-without-resize.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 _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 _leftSidebarInner = _interopRequireDefault(require("./internal/left-sidebar-inner"));
-
 var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-outer"));
-
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
-
 /** @jsx jsx */
 
 /**
@@ -37,12 +26,12 @@ var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
  */
 var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
   var children = props.children,
-      id = props.id,
-      width = props.width,
-      isFixed = props.isFixed,
-      shouldPersistWidth = props.shouldPersistWidth,
-      testId = props.testId,
-      skipLinkTitle = props.skipLinkTitle;
+    id = props.id,
+    width = props.width,
+    isFixed = props.isFixed,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    skipLinkTitle = props.skipLinkTitle;
   var leftSidebarWidth = (0, _utils.resolveDimension)(_constants.VAR_LEFT_SIDEBAR_WIDTH, width, shouldPersistWidth);
   (0, _react.useEffect)(function () {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth));
@@ -62,6 +51,5 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     isFixed: isFixed
   }, children));
 };
-
 var _default = LeftSidebarWithoutResize;
 exports.default = _default;