@atlaskit/page-layout 1.0.7 → 1.2.1

package/dist/cjs/components/skip-links/skip-link-components.js

@@ -13,16 +13,56 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = require("@emotion/core");
 
+var _motion = require("@atlaskit/motion");
+
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("../../common/constants");
 
 var _controllers = require("../../controllers");
 
-var _styles = require("./styles");
-
 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; }
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
+var skipLinkStyles = (0, _core.css)({
+  margin: 10,
+  padding: '0.8rem 1rem',
+  position: 'fixed',
+  zIndex: -1,
+  left: -999999,
+  background: "var(--ds-surface-overlay, white)",
+  border: 'none',
+  borderRadius: 3,
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 10px ").concat(_colors.N30A, ", 0 0 20px -4px ").concat(_colors.N60A), ")"),
+  opacity: 0,
+
+  /* Do the transform when focused */
+  transform: 'translateY(-50%)',
+  transition: "transform 0.3s ".concat(_motion.easeOut),
+  ':focus-within': {
+    /**
+     * Max z-index is 2147483647. Skip links always be on top,
+     * but giving a few digits extra space just in case there's a future need.
+     */
+    zIndex: 2147483640,
+    left: 0,
+    opacity: 1,
+    transform: 'translateY(0%)'
+  }
+});
+var skipLinkListStyles = (0, _core.css)({
+  marginTop: 4,
+  paddingLeft: 0,
+  listStylePosition: 'outside',
+  listStyleType: 'none'
+});
+var skipLinkListItemStyles = (0, _core.css)({
+  marginTop: 0
+});
+
 var assignIndex = function assignIndex(num, arr) {
   if (!arr.includes(num)) {
     return num;
@@ -88,9 +128,11 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   return (0, _core.jsx)("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
-    css: _styles.skipLinkStyles,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, (0, _core.jsx)("h5", null, skipLinksLabel), (0, _core.jsx)("ol", null, sortSkipLinks(skipLinksData).map(function (_ref2) {
+  }, (0, _core.jsx)("h5", null, skipLinksLabel), (0, _core.jsx)("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
         skipLinkTitle = _ref2.skipLinkTitle;
     return (0, _core.jsx)(SkipLink, {
@@ -144,7 +186,9 @@ var SkipLink = function SkipLink(_ref3) {
       children = _ref3.children,
       isFocusable = _ref3.isFocusable,
       title = _ref3.title;
-  return (0, _core.jsx)("li", null, (0, _core.jsx)("a", {
+  return (0, _core.jsx)("li", {
+    css: skipLinkListItemStyles
+  }, (0, _core.jsx)("a", {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
     onClick: focusTargetRef(href),

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

@@ -21,11 +21,23 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+var bannerStyles = (0, _core.css)({
+  height: _constants.BANNER_HEIGHT,
+  gridArea: _constants.BANNER
+});
+var bannerFixedStyles = (0, _core.css)({
+  position: 'fixed',
+  zIndex: 2,
+  top: 0,
+  right: _constants.RIGHT_PANEL_WIDTH,
+  left: _constants.LEFT_PANEL_WIDTH
+});
+
 var Banner = function Banner(props) {
   var children = props.children,
       _props$height = props.height,
@@ -41,17 +53,21 @@ var Banner = function Banner(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_BANNER_HEIGHT, bannerHeight));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_BANNER_HEIGHT, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [bannerHeight]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.bannerStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_BANNER_HEIGHT,
-    value: bannerHeight
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [bannerStyles, isFixed && bannerFixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_BANNER_HEIGHT,
+      value: bannerHeight
+    }), children);
+  });
 };
 
 var _default = Banner;

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

@@ -7,15 +7,22 @@ exports.default = void 0;
 
 var _core = require("@emotion/core");
 
-var _styles = require("./styles");
+var _constants = require("../../common/constants");
 
 /** @jsx jsx */
+var contentStyles = (0, _core.css)({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  gridArea: _constants.CONTENT
+});
+
 var Content = function Content(props) {
   var children = props.children,
       testId = props.testId;
   return (0, _core.jsx)("div", {
     "data-testid": testId,
-    css: _styles.contentStyles
+    css: contentStyles
   }, children);
 };
 

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+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, _core.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, _core.css)({
+  width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
+  position: 'fixed',
+  top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
+  bottom: 0,
+  left: "".concat(_constants.LEFT_PANEL_WIDTH),
+  transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
+});
+var fixedInnerFlyoutStyles = (0, _core.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, _core.css)({
+  height: '100%'
+});
+var draggingStyles = (0, _core.css)({
+  cursor: 'ew-resize',
+  // 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;
+  var isDragging = (0, _hooks.useIsSidebarDragging)();
+  return (0, _core.jsx)("div", {
+    css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
+  }, children);
+};
+
+var _default = LeftSidebarInner;
+exports.default = _default;

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

@@ -0,0 +1,100 @@
+"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 _core = require("@emotion/core");
+
+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, _core.css)((0, _motion.prefersReducedMotion)());
+var outerStyles = (0, _core.css)({
+  width: _constants.LEFT_SIDEBAR_WIDTH,
+  marginLeft: 0,
+  position: 'relative',
+  zIndex: 1,
+  transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s"),
+  ':hover': {
+    '--ds--resize-button--opacity': 1
+  }
+});
+var draggingStyles = (0, _core.css)({
+  cursor: 'ew-resize',
+  // 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, _core.css)({
+  '::after': {
+    display: 'inline-block',
+    width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
+    content: "''"
+  }
+});
+var flyoutStyles = (0, _core.css)({
+  width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
+});
+var flyoutFixedStyles = (0, _core.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;
+  var isDragging = (0, _hooks.useIsSidebarDragging)();
+  return (0, _core.jsx)(_slotFocusRing.default, {
+    isSidebar: true
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return (
+      /**
+       * The mouse handlers control flyout behavior, a mouse-only experience.
+       */
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      (0, _core.jsx)("div", (0, _extends2.default)({
+        css: [outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
+        className: className,
+        "data-testid": testId,
+        id: id,
+        onMouseOver: onMouseOver,
+        onMouseLeave: onMouseLeave,
+        ref: ref
+      }, selector), children)
+    );
+  });
+};
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(LeftSidebarOuter);
+
+exports.default = _default;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+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, _core.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, _core.css)({
+  opacity: 0,
+  transition: "opacity 0ms linear, visibility 0ms linear",
+  transitionDelay: "".concat(_constants.TRANSITION_DURATION - 100, "ms"),
+  visibility: 'hidden'
+});
+var resizableChildrenWrapperStyles = (0, _core.css)({
+  height: '100%',
+  opacity: 1,
+  overflow: 'hidden auto',
+  transition: 'none',
+  visibility: 'visible'
+});
+var fixedChildrenWrapperStyles = (0, _core.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;
+  var isCollapsing = (0, _hooks.useIsSidebarCollapsing)();
+  var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
+  var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
+  return (0, _core.jsx)("div", {
+    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
+  }, (0, _core.jsx)("div", {
+    css: fixedChildrenWrapperStyles
+  }, children));
+};
+
+var _default = ResizableChildrenWrapper;
+exports.default = _default;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+var focusStyles = (0, _core.css)({
+  ':focus': {
+    outline: 'none',
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '> div': {
+      boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+      outline: 'none'
+    }
+  }
+});
+/**
+ * Sidebars have an outer and inner component,
+ * so the nested selector needs to target an extra level deeper.
+ */
+
+var sidebarFocusStyles = (0, _core.css)({
+  ':focus': {
+    outline: 'none',
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '> div > div': {
+      boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+      outline: 'none'
+    }
+  }
+});
+/**
+ * We don't use `@atlaskit/focus-ring` here,
+ * because we need inset focus styles and:
+ *
+ * 1. If we set them directly to the layout element,
+ *    then any child element's background will cover the shadow.
+ * 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;
+  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
+    var css = _ref2.css;
+    return children({
+      className: isSidebar ? css(sidebarFocusStyles) : css(focusStyles)
+    });
+  });
+};
+
+var _default = SlotFocusRing;
+exports.default = _default;

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

@@ -21,11 +21,22 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+var leftPanelStyles = (0, _core.css)({
+  gridArea: _constants.LEFT_PANEL
+});
+var leftPanelFixedStyles = (0, _core.css)({
+  width: _constants.LEFT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  left: 0
+});
+
 var LeftPanel = function LeftPanel(props) {
   var children = props.children,
       isFixed = props.isFixed,
@@ -40,17 +51,21 @@ var LeftPanel = function LeftPanel(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_PANEL_WIDTH, leftPanelWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_PANEL_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [leftPanelWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.leftPanelStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_LEFT_PANEL_WIDTH,
-    value: leftPanelWidth
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [leftPanelStyles, isFixed && leftPanelFixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_LEFT_PANEL_WIDTH,
+      value: leftPanelWidth
+    }), children);
+  });
 };
 
 var _default = LeftPanel;

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

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = require("react");
@@ -21,7 +19,9 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _leftSidebarStyles = require("./left-sidebar-styles");
+var _leftSidebarInner = _interopRequireDefault(require("./internal/left-sidebar-inner"));
+
+var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-outer"));
 
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
@@ -39,18 +39,18 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_SIDEBAR_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [leftSidebarWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+  return (0, _core.jsx)(_leftSidebarOuter.default, {
     id: id,
-    "data-testid": testId,
-    css: (0, _leftSidebarStyles.leftSidebarStyles)(isFixed)
-  }, (0, _utils.getPageLayoutSlotSelector)('left-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
+    testId: testId,
+    isFixed: isFixed
+  }, (0, _core.jsx)(_slotDimensions.default, {
     variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
     value: leftSidebarWidth
-  }), (0, _core.jsx)("div", {
-    css: (0, _leftSidebarStyles.fixedLeftSidebarInnerStyles)(isFixed)
+  }), (0, _core.jsx)(_leftSidebarInner.default, {
+    isFixed: isFixed
   }, children));
 };
 

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

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = require("react");
@@ -23,7 +21,11 @@ var _controllers = require("../../controllers");
 
 var _resizeControl = _interopRequireDefault(require("../resize-control"));
 
-var _leftSidebarStyles = require("./left-sidebar-styles");
+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"));
 
@@ -131,7 +133,8 @@ var LeftSidebar = function LeftSidebar(props) {
       isLeftSidebarCollapsed: cachedCollapsedState,
       leftSidebarWidth: leftSidebarWidth,
       lastLeftSidebarWidth: lastLeftSidebarWidth,
-      flyoutLockCount: 0
+      flyoutLockCount: 0,
+      isFixed: isFixed
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Every time other than mount,
   // update the local storage and css variables.
@@ -226,23 +229,25 @@ var LeftSidebar = function LeftSidebar(props) {
   };
 
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    (0, _core.jsx)("div", (0, _extends2.default)({
+    (0, _core.jsx)(_leftSidebarOuter.default, {
       ref: leftSideBarRef,
-      css: (0, _leftSidebarStyles.leftSidebarStyles)(isFixed, isFlyoutOpen),
-      "data-testid": testId,
+      testId: testId,
       onMouseOver: onMouseOver,
       onMouseLeave: onMouseLeave,
-      id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('left-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
+      id: id,
+      isFixed: isFixed,
+      isFlyoutOpen: isFlyoutOpen
+    }, (0, _core.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
       value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount
-    }), (0, _core.jsx)("div", {
-      css: (0, _leftSidebarStyles.fixedLeftSidebarInnerStyles)(isFixed, isFlyoutOpen)
-    }, (0, _core.jsx)("div", {
-      css: (0, _leftSidebarStyles.resizeableChildrenWrapperStyle)(isFlyoutOpen, isLeftSidebarCollapsed, !notFirstRun.current && collapsedState === 'collapsed')
-    }, (0, _core.jsx)("div", {
-      css: _leftSidebarStyles.fixedChildrenWrapperStyle
-    }, children)), (0, _core.jsx)(_resizeControl.default, {
+    }), (0, _core.jsx)(_leftSidebarInner.default, {
+      isFixed: isFixed,
+      isFlyoutOpen: isFlyoutOpen
+    }, (0, _core.jsx)(_resizableChildrenWrapper.default, {
+      isFlyoutOpen: isFlyoutOpen,
+      isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+      hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
+    }, children), (0, _core.jsx)(_resizeControl.default, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
       resizeButtonLabel: resizeButtonLabel,