@atlaskit/page-layout 1.0.6 → 1.2.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSkipLink = exports.useSkipLinks = exports.SkipLinksContext = void 0;
+exports.useSkipLinks = exports.useSkipLink = exports.SkipLinksContext = void 0;
 
 var _react = require("react");
 

package/dist/cjs/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "PageLayout", {
+Object.defineProperty(exports, "BANNER_HEIGHT", {
   enumerable: true,
   get: function get() {
-    return _components.PageLayout;
+    return _constants.BANNER_HEIGHT;
   }
 });
-Object.defineProperty(exports, "Main", {
+Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function get() {
-    return _components.Main;
+    return _components.Banner;
   }
 });
 Object.defineProperty(exports, "Content", {
@@ -21,70 +21,70 @@ Object.defineProperty(exports, "Content", {
     return _components.Content;
   }
 });
-Object.defineProperty(exports, "RightSidebar", {
+Object.defineProperty(exports, "LEFT_PANEL_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _components.RightSidebar;
+    return _constants.LEFT_PANEL_WIDTH;
   }
 });
-Object.defineProperty(exports, "LeftSidebar", {
+Object.defineProperty(exports, "LEFT_SIDEBAR_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _components.LeftSidebar;
+    return _constants.LEFT_SIDEBAR_WIDTH;
   }
 });
-Object.defineProperty(exports, "LeftSidebarWithoutResize", {
+Object.defineProperty(exports, "LeftPanel", {
   enumerable: true,
   get: function get() {
-    return _components.LeftSidebarWithoutResize;
+    return _components.LeftPanel;
   }
 });
-Object.defineProperty(exports, "RightPanel", {
+Object.defineProperty(exports, "LeftSidebar", {
   enumerable: true,
   get: function get() {
-    return _components.RightPanel;
+    return _components.LeftSidebar;
   }
 });
-Object.defineProperty(exports, "LeftPanel", {
+Object.defineProperty(exports, "LeftSidebarWithoutResize", {
   enumerable: true,
   get: function get() {
-    return _components.LeftPanel;
+    return _components.LeftSidebarWithoutResize;
   }
 });
-Object.defineProperty(exports, "Banner", {
+Object.defineProperty(exports, "Main", {
   enumerable: true,
   get: function get() {
-    return _components.Banner;
+    return _components.Main;
   }
 });
-Object.defineProperty(exports, "TopNavigation", {
+Object.defineProperty(exports, "PageLayout", {
   enumerable: true,
   get: function get() {
-    return _components.TopNavigation;
+    return _components.PageLayout;
   }
 });
-Object.defineProperty(exports, "useCustomSkipLink", {
+Object.defineProperty(exports, "RIGHT_PANEL_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _components.useCustomSkipLink;
+    return _constants.RIGHT_PANEL_WIDTH;
   }
 });
-Object.defineProperty(exports, "LEFT_PANEL_WIDTH", {
+Object.defineProperty(exports, "RIGHT_SIDEBAR_WIDTH", {
   enumerable: true,
   get: function get() {
-    return _constants.LEFT_PANEL_WIDTH;
+    return _constants.RIGHT_SIDEBAR_WIDTH;
   }
 });
-Object.defineProperty(exports, "RIGHT_PANEL_WIDTH", {
+Object.defineProperty(exports, "RightPanel", {
   enumerable: true,
   get: function get() {
-    return _constants.RIGHT_PANEL_WIDTH;
+    return _components.RightPanel;
   }
 });
-Object.defineProperty(exports, "BANNER_HEIGHT", {
+Object.defineProperty(exports, "RightSidebar", {
   enumerable: true,
   get: function get() {
-    return _constants.BANNER_HEIGHT;
+    return _components.RightSidebar;
   }
 });
 Object.defineProperty(exports, "TOP_NAVIGATION_HEIGHT", {
@@ -93,28 +93,28 @@ Object.defineProperty(exports, "TOP_NAVIGATION_HEIGHT", {
     return _constants.TOP_NAVIGATION_HEIGHT;
   }
 });
-Object.defineProperty(exports, "LEFT_SIDEBAR_WIDTH", {
+Object.defineProperty(exports, "TopNavigation", {
   enumerable: true,
   get: function get() {
-    return _constants.LEFT_SIDEBAR_WIDTH;
+    return _components.TopNavigation;
   }
 });
-Object.defineProperty(exports, "RIGHT_SIDEBAR_WIDTH", {
+Object.defineProperty(exports, "useCustomSkipLink", {
   enumerable: true,
   get: function get() {
-    return _constants.RIGHT_SIDEBAR_WIDTH;
+    return _components.useCustomSkipLink;
   }
 });
-Object.defineProperty(exports, "usePageLayoutResize", {
+Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
   enumerable: true,
   get: function get() {
-    return _controllers.usePageLayoutResize;
+    return _controllers.useLeftSidebarFlyoutLock;
   }
 });
-Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
+Object.defineProperty(exports, "usePageLayoutResize", {
   enumerable: true,
   get: function get() {
-    return _controllers.useLeftSidebarFlyoutLock;
+    return _controllers.usePageLayoutResize;
   }
 });
 

package/dist/cjs/version.json

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

package/dist/es2019/common/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useIsSidebarCollapsing } from './use-is-sidebar-collapsing';
+export { default as useIsSidebarDragging } from './use-is-sidebar-dragging';

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

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_COLLAPSING } from '../constants';
+
+const 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';
+};
+
+const useIsSidebarCollapsing = () => {
+  const [isCollapsing, setIsCollapsing] = useState(getIsCollapsing);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsCollapsing(getIsCollapsing);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_COLLAPSING]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return isCollapsing;
+};
+
+export default useIsSidebarCollapsing;

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

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_DRAGGING } from '../constants';
+
+const 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';
+};
+
+const useIsSidebarDragging = () => {
+  const [isDragging, setIsDragging] = useState(getIsDragging);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDragging(getIsDragging);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_DRAGGING]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return isDragging;
+};
+
+export default useIsSidebarDragging;

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

@@ -1,9 +1,51 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
-import { grabAreaCSS, lineCSS } from './styles';
+
+/**
+ * Determines the color of the grab line.
+ *
+ * Used on internal leaf node, so naming collisions won't matter.
+ */
+const varLineColor = '--ds-line';
+const grabAreaStyles = css({
+  width: 24,
+  height: '100%',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'ew-resize',
+  '&::-moz-focus-inner': {
+    border: 0
+  },
+  ':focus': {
+    outline: 0
+  },
+  ':enabled': {
+    ':hover': {
+      [varLineColor]: `var(--ds-border-selected, ${B100})`
+    },
+    ':active, :focus': {
+      [varLineColor]: `var(--ds-border-selected, ${B200})`
+    }
+  }
+});
+const grabAreaCollapsedStyles = css({
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'default'
+});
+const lineStyles = css({
+  display: 'block',
+  width: 2,
+  height: '100%',
+  backgroundColor: `var(${varLineColor})`,
+  transition: 'background-color 200ms'
+});
 const grabAreaLineSelector = {
   [GRAB_AREA_LINE_SELECTOR]: true
 };
@@ -18,9 +60,9 @@ const GrabArea = ({
 }) => jsx("button", _extends({}, grabAreaSelector, {
   "data-testid": testId,
   type: "button",
-  css: grabAreaCSS(isLeftSidebarCollapsed)
+  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
 }, rest), jsx("span", _extends({
-  css: lineCSS(isLeftSidebarCollapsed)
+  css: lineStyles
 }, grabAreaLineSelector)));
 
 export default GrabArea;

package/dist/es2019/components/resize-control/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -11,16 +11,19 @@ import { SidebarResizeContext } from '../../controllers/sidebar-resize-context';
 
 import GrabArea from './grab-area';
 import ResizeButton from './resize-button';
-import { resizeControlCSS, shadowCSS } from './styles';
+import Shadow from './shadow';
 const cssSelector = {
   [RESIZE_CONTROL_SELECTOR]: true
 };
-
-const Shadow = ({
-  testId
-}) => jsx("div", {
-  "data-testid": testId,
-  css: shadowCSS
+const resizeControlStyles = css({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '100%',
+  outline: 'none'
+});
+const showResizeButtonStyles = css({
+  '--ds--resize-button--opacity': 1
 });
 
 const ResizeControl = ({
@@ -236,7 +239,7 @@ const ResizeControl = ({
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
   return jsx("div", _extends({}, cssSelector, {
-    css: resizeControlCSS(isGrabAreaFocused, isLeftSidebarCollapsed)
+    css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
   }), jsx(GrabArea, {

package/dist/es2019/components/resize-control/resize-button.js

@@ -1,10 +1,67 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
+import { easeOut } from '@atlaskit/motion/curves';
+import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
+import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
-import { increaseHitArea, resizeIconButtonCSS } from './styles';
+const increaseHitAreaStyles = css({
+  position: 'absolute',
+  top: -8,
+  right: -12,
+  bottom: -8,
+  left: -8
+});
+const resizeIconButtonStyles = css({
+  width: 24,
+  height: 24,
+  padding: 0,
+  position: 'absolute',
+  top: 32,
+  left: 0,
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  border: 0,
+  borderRadius: '50%',
+
+  /**
+   * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
+   * This shadow needs further investigation,
+   * along with the hover and active background colors.
+   */
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  boxShadow: `0 0 0 1px ${N30A}, 0 2px 4px 1px ${N30A}`,
+  color: `var(--ds-text-subtle, ${N200})`,
+  cursor: 'pointer',
+
+  /**
+   * The fallback value of 0 ensures that the button is hidden by default,
+   * unless some parent (or the button itself) overrides it.
+   */
+  opacity: `var(--ds--resize-button--opacity,0)`,
+  outline: 0,
+  transform: 'translateX(-50%)',
+  transition: `
+    background-color ${smallDurationMs}ms linear,
+    color ${smallDurationMs}ms linear,
+    opacity ${mediumDurationMs}ms ${easeOut}
+  `,
+  ':hover': {
+    backgroundColor: `var(--ds-background-selected-bold, ${B100})`,
+    color: `var(--ds-text-inverse, ${N0})`,
+    opacity: 1
+  },
+  ':active, :focus': {
+    backgroundColor: `var(--ds-background-selected-bold-hovered, ${B200})`,
+    color: `var(--ds-text-inverse, ${N0})`,
+    opacity: 1
+  }
+});
+const resizeIconButtonExpandedStyles = css({
+  transform: 'rotate(180deg)',
+  transformOrigin: 7
+});
 
 const preventDefault = event => event.preventDefault();
 
@@ -22,7 +79,7 @@ const ResizeButton = ({
   "aria-expanded": !isLeftSidebarCollapsed,
   "aria-label": label,
   type: "button",
-  css: resizeIconButtonCSS(isLeftSidebarCollapsed),
+  css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
   "data-testid": testId // Prevents focus staying attached to the button
   // when pressed
   ,
@@ -30,7 +87,7 @@ const ResizeButton = ({
 }, props), jsx(ChevronRight, {
   label: ""
 }), jsx("div", {
-  css: increaseHitArea
+  css: increaseHitAreaStyles
 }));
 
 export default ResizeButton;

package/dist/es2019/components/resize-control/shadow.js

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { easeOut } from '@atlaskit/motion';
+import { useIsSidebarDragging } from '../../common/hooks';
+const colorStops = `
+    rgba(0, 0, 0, 0.2) 0px,
+    rgba(0, 0, 0, 0.2) 1px,
+    rgba(0, 0, 0, 0.1) 1px,
+    rgba(0, 0, 0, 0) 100%
+  `;
+const direction = 'to left';
+const transitionDuration = '0.22s';
+const shadowStyles = css({
+  width: 3,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: -1,
+  background: `var(--ds-border, ${`linear-gradient(${direction}, ${colorStops})`})`,
+  opacity: 0.5,
+  pointerEvents: 'none',
+  transitionDuration: transitionDuration,
+  transitionProperty: 'left, opacity, width',
+  transitionTimingFunction: easeOut
+});
+const draggingStyles = css({
+  width: 6,
+  left: -6,
+  background: `var(--ds-background-neutral-subtle, ${`linear-gradient(${direction}, ${colorStops})`})`,
+  opacity: 0.8
+});
+
+const Shadow = ({
+  testId
+}) => {
+  const isDragging = useIsSidebarDragging();
+  return jsx("div", {
+    "data-testid": testId,
+    css: [shadowStyles, isDragging && draggingStyles]
+  });
+};
+
+export default Shadow;

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

@@ -1,8 +1,46 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
+import { N30A, N60A } from '@atlaskit/theme/colors';
 import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
-import { skipLinkStyles } from './styles';
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const prefersReducedMotionStyles = css(prefersReducedMotion());
+const skipLinkStyles = 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, ${`0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`})`,
+  opacity: 0,
+
+  /* Do the transform when focused */
+  transform: 'translateY(-50%)',
+  transition: `transform 0.3s ${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%)'
+  }
+});
+const skipLinkListStyles = css({
+  marginTop: 4,
+  paddingLeft: 0,
+  listStylePosition: 'outside',
+  listStyleType: 'none'
+});
+const skipLinkListItemStyles = css({
+  marginTop: 0
+});
 
 const assignIndex = (num, arr) => {
   if (!arr.includes(num)) {
@@ -58,9 +96,11 @@ export const SkipLinkWrapper = ({
   return jsx("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
-    css: skipLinkStyles,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, jsx("h5", null, skipLinksLabel), jsx("ol", null, sortSkipLinks(skipLinksData).map(({
+  }, jsx("h5", null, skipLinksLabel), jsx("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(({
     id,
     skipLinkTitle
   }) => jsx(SkipLink, {
@@ -110,7 +150,9 @@ export const SkipLink = ({
   isFocusable,
   title
 }) => {
-  return jsx("li", null, jsx("a", {
+  return jsx("li", {
+    css: skipLinkListItemStyles
+  }, jsx("a", {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
     onClick: focusTargetRef(href),

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

@@ -2,12 +2,23 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_BANNER_HEIGHT, VAR_BANNER_HEIGHT } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { BANNER, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
+import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
-import { bannerStyles } from './styles';
+const bannerStyles = css({
+  height: BANNER_HEIGHT,
+  gridArea: BANNER
+});
+const bannerFixedStyles = css({
+  position: 'fixed',
+  zIndex: 2,
+  top: 0,
+  right: RIGHT_PANEL_WIDTH,
+  left: LEFT_PANEL_WIDTH
+});
 
 const Banner = props => {
   const {
@@ -28,17 +39,20 @@ const Banner = props => {
       publishGridState({
         [VAR_BANNER_HEIGHT]: 0
       });
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [bannerHeight]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: bannerStyles(isFixed),
+  return jsx(SlotFocusRing, null, ({
+    className
+  }) => jsx("div", _extends({
+    css: [bannerStyles, isFixed && bannerFixedStyles],
+    className: className,
     "data-testid": testId,
     id: id
   }, getPageLayoutSlotSelector('banner')), jsx(SlotDimensions, {
     variableName: VAR_BANNER_HEIGHT,
     value: bannerHeight
-  }), children);
+  }), children));
 };
 
 export default Banner;

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

@@ -1,6 +1,12 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { contentStyles } from './styles';
+import { css, jsx } from '@emotion/core';
+import { CONTENT } from '../../common/constants';
+const contentStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  gridArea: CONTENT
+});
 
 const Content = props => {
   const {

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

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
+import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
+import { useIsSidebarDragging } from '../../../common/hooks';
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const prefersReducedMotionStyles = css(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.
+ */
+
+const fixedInnerStyles = css({
+  width: `${LEFT_SIDEBAR_WIDTH}`,
+  position: 'fixed',
+  top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
+  bottom: 0,
+  left: `${LEFT_PANEL_WIDTH}`,
+  transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`
+});
+const fixedInnerFlyoutStyles = css({
+  width: LEFT_SIDEBAR_FLYOUT_WIDTH
+});
+/**
+ * Static in the sense of `position: static`.
+ *
+ * It will expand the page height to fit its content.
+ */
+
+const staticInnerStyles = css({
+  height: '100%'
+});
+const draggingStyles = css({
+  cursor: 'ew-resize',
+  // Make sure drag to resize does not animate as the user drags
+  transition: 'none'
+});
+
+const LeftSidebarInner = ({
+  children,
+  isFixed = false,
+  isFlyoutOpen = false
+}) => {
+  const isDragging = useIsSidebarDragging();
+  return jsx("div", {
+    css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
+  }, children);
+};
+
+export default LeftSidebarInner;