@atlaskit/page-layout 1.0.7 → 1.2.1

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

@@ -3,12 +3,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @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';
+var bannerStyles = css({
+  height: BANNER_HEIGHT,
+  gridArea: BANNER
+});
+var bannerFixedStyles = css({
+  position: 'fixed',
+  zIndex: 2,
+  top: 0,
+  right: RIGHT_PANEL_WIDTH,
+  left: LEFT_PANEL_WIDTH
+});
 
 var Banner = function Banner(props) {
   var children = props.children,
@@ -25,17 +36,21 @@ var Banner = function Banner(props) {
     publishGridState(_defineProperty({}, VAR_BANNER_HEIGHT, bannerHeight));
     return function () {
       publishGridState(_defineProperty({}, VAR_BANNER_HEIGHT, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [bannerHeight]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: bannerStyles(isFixed),
-    "data-testid": testId,
-    id: id
-  }, getPageLayoutSlotSelector('banner')), jsx(SlotDimensions, {
-    variableName: VAR_BANNER_HEIGHT,
-    value: bannerHeight
-  }), children);
+  return jsx(SlotFocusRing, null, function (_ref) {
+    var className = _ref.className;
+    return 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);
+  });
 };
 
 export default Banner;

package/dist/esm/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';
+var contentStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  gridArea: CONTENT
+});
 
 var Content = function Content(props) {
   var children = props.children,

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

@@ -0,0 +1,53 @@
+/** @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
+var 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.
+ */
+
+var fixedInnerStyles = css({
+  width: "".concat(LEFT_SIDEBAR_WIDTH),
+  position: 'fixed',
+  top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
+  bottom: 0,
+  left: "".concat(LEFT_PANEL_WIDTH),
+  transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
+});
+var fixedInnerFlyoutStyles = css({
+  width: LEFT_SIDEBAR_FLYOUT_WIDTH
+});
+/**
+ * Static in the sense of `position: static`.
+ *
+ * It will expand the page height to fit its content.
+ */
+
+var staticInnerStyles = css({
+  height: '100%'
+});
+var draggingStyles = 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 = useIsSidebarDragging();
+  return jsx("div", {
+    css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
+  }, children);
+};
+
+export default LeftSidebarInner;

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

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
+import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
+import { useIsSidebarDragging } from '../../../common/hooks';
+import { getPageLayoutSlotSelector } from '../../../common/utils';
+import SlotFocusRing from './slot-focus-ring';
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var prefersReducedMotionStyles = css(prefersReducedMotion());
+var outerStyles = css({
+  width: LEFT_SIDEBAR_WIDTH,
+  marginLeft: 0,
+  position: 'relative',
+  zIndex: 1,
+  transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
+  ':hover': {
+    '--ds--resize-button--opacity': 1
+  }
+});
+var draggingStyles = 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 = css({
+  '::after': {
+    display: 'inline-block',
+    width: "".concat(LEFT_SIDEBAR_WIDTH),
+    content: "''"
+  }
+});
+var flyoutStyles = css({
+  width: LEFT_SIDEBAR_FLYOUT_WIDTH
+});
+var flyoutFixedStyles = css({
+  width: COLLAPSED_LEFT_SIDEBAR_WIDTH
+});
+var selector = 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 = useIsSidebarDragging();
+  return jsx(SlotFocusRing, {
+    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
+      jsx("div", _extends({
+        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)
+    );
+  });
+};
+
+export default /*#__PURE__*/forwardRef(LeftSidebarOuter);

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

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { prefersReducedMotion } from '@atlaskit/motion';
+import { TRANSITION_DURATION } from '../../../common/constants';
+import { useIsSidebarCollapsing } from '../../../common/hooks';
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var prefersReducedMotionStyles = css(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 = css({
+  opacity: 0,
+  transition: "opacity 0ms linear, visibility 0ms linear",
+  transitionDelay: "".concat(TRANSITION_DURATION - 100, "ms"),
+  visibility: 'hidden'
+});
+var resizableChildrenWrapperStyles = css({
+  height: '100%',
+  opacity: 1,
+  overflow: 'hidden auto',
+  transition: 'none',
+  visibility: 'visible'
+});
+var fixedChildrenWrapperStyles = 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 = useIsSidebarCollapsing();
+  var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
+  var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
+  return jsx("div", {
+    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
+  }, jsx("div", {
+    css: fixedChildrenWrapperStyles
+  }, children));
+};
+
+export default ResizableChildrenWrapper;

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

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+import { ClassNames, css, jsx } from '@emotion/core';
+import { B100 } from '@atlaskit/theme/colors';
+var focusStyles = 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(B100, ")")),
+      outline: 'none'
+    }
+  }
+});
+/**
+ * Sidebars have an outer and inner component,
+ * so the nested selector needs to target an extra level deeper.
+ */
+
+var sidebarFocusStyles = 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(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 jsx(ClassNames, null, function (_ref2) {
+    var css = _ref2.css;
+    return children({
+      className: isSidebar ? css(sidebarFocusStyles) : css(focusStyles)
+    });
+  });
+};
+
+export default SlotFocusRing;

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

@@ -3,12 +3,22 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_LEFT_PANEL_WIDTH, VAR_LEFT_PANEL_WIDTH } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { DEFAULT_LEFT_PANEL_WIDTH, LEFT_PANEL, LEFT_PANEL_WIDTH, VAR_LEFT_PANEL_WIDTH } 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 { leftPanelStyles } from './styles';
+var leftPanelStyles = css({
+  gridArea: LEFT_PANEL
+});
+var leftPanelFixedStyles = css({
+  width: LEFT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  left: 0
+});
 
 var LeftPanel = function LeftPanel(props) {
   var children = props.children,
@@ -24,17 +34,21 @@ var LeftPanel = function LeftPanel(props) {
     publishGridState(_defineProperty({}, VAR_LEFT_PANEL_WIDTH, leftPanelWidth));
     return function () {
       publishGridState(_defineProperty({}, VAR_LEFT_PANEL_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [leftPanelWidth]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: leftPanelStyles(isFixed),
-    "data-testid": testId,
-    id: id
-  }, getPageLayoutSlotSelector('left-panel')), jsx(SlotDimensions, {
-    variableName: VAR_LEFT_PANEL_WIDTH,
-    value: leftPanelWidth
-  }), children);
+  return jsx(SlotFocusRing, null, function (_ref) {
+    var className = _ref.className;
+    return jsx("div", _extends({
+      css: [leftPanelStyles, isFixed && leftPanelFixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, getPageLayoutSlotSelector('left-panel')), jsx(SlotDimensions, {
+      variableName: VAR_LEFT_PANEL_WIDTH,
+      value: leftPanelWidth
+    }), children);
+  });
 };
 
 export default LeftPanel;

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

@@ -1,13 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { jsx } from '@emotion/core';
 import { VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
-import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
+import { resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
-import { fixedLeftSidebarInnerStyles, leftSidebarStyles } from './left-sidebar-styles';
+import LeftSidebarInner from './internal/left-sidebar-inner';
+import LeftSidebarOuter from './internal/left-sidebar-outer';
 import SlotDimensions from './slot-dimensions';
 
 var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
@@ -23,18 +23,18 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     publishGridState(_defineProperty({}, VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth));
     return function () {
       publishGridState(_defineProperty({}, VAR_LEFT_SIDEBAR_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [leftSidebarWidth]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
+  return jsx(LeftSidebarOuter, {
     id: id,
-    "data-testid": testId,
-    css: leftSidebarStyles(isFixed)
-  }, getPageLayoutSlotSelector('left-sidebar')), jsx(SlotDimensions, {
+    testId: testId,
+    isFixed: isFixed
+  }, jsx(SlotDimensions, {
     variableName: VAR_LEFT_SIDEBAR_WIDTH,
     value: leftSidebarWidth
-  }), jsx("div", {
-    css: fixedLeftSidebarInnerStyles(isFixed)
+  }), jsx(LeftSidebarInner, {
+    isFixed: isFixed
   }, children));
 };
 

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 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; }
@@ -9,10 +8,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useContext, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, RESIZE_BUTTON_SELECTOR, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
-import { getGridStateFromStorage, getPageLayoutSlotSelector, mergeGridStateIntoStorage, resolveDimension } from '../../common/utils';
+import { getGridStateFromStorage, mergeGridStateIntoStorage, resolveDimension } from '../../common/utils';
 import { publishGridState, SidebarResizeContext, useSkipLink } from '../../controllers';
 import ResizeControl from '../resize-control';
-import { fixedChildrenWrapperStyle, fixedLeftSidebarInnerStyles, leftSidebarStyles, resizeableChildrenWrapperStyle } from './left-sidebar-styles';
+import LeftSidebarInner from './internal/left-sidebar-inner';
+import LeftSidebarOuter from './internal/left-sidebar-outer';
+import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
 import SlotDimensions from './slot-dimensions';
 
 var LeftSidebar = function LeftSidebar(props) {
@@ -115,7 +116,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.
@@ -210,23 +212,25 @@ var LeftSidebar = function LeftSidebar(props) {
   };
 
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    jsx("div", _extends({
+    jsx(LeftSidebarOuter, {
       ref: leftSideBarRef,
-      css: leftSidebarStyles(isFixed, isFlyoutOpen),
-      "data-testid": testId,
+      testId: testId,
       onMouseOver: onMouseOver,
       onMouseLeave: onMouseLeave,
-      id: id
-    }, getPageLayoutSlotSelector('left-sidebar')), jsx(SlotDimensions, {
+      id: id,
+      isFixed: isFixed,
+      isFlyoutOpen: isFlyoutOpen
+    }, jsx(SlotDimensions, {
       variableName: VAR_LEFT_SIDEBAR_WIDTH,
       value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount
-    }), jsx("div", {
-      css: fixedLeftSidebarInnerStyles(isFixed, isFlyoutOpen)
-    }, jsx("div", {
-      css: resizeableChildrenWrapperStyle(isFlyoutOpen, isLeftSidebarCollapsed, !notFirstRun.current && collapsedState === 'collapsed')
-    }, jsx("div", {
-      css: fixedChildrenWrapperStyle
-    }, children)), jsx(ResizeControl, {
+    }), jsx(LeftSidebarInner, {
+      isFixed: isFixed,
+      isFlyoutOpen: isFlyoutOpen
+    }, jsx(ResizableChildrenWrapper, {
+      isFlyoutOpen: isFlyoutOpen,
+      isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+      hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
+    }, children), jsx(ResizeControl, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
       resizeButtonLabel: resizeButtonLabel,

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

@@ -1,10 +1,40 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { useContext } from 'react';
+import { css, jsx } from '@emotion/core';
+import { prefersReducedMotion } from '@atlaskit/motion/accessibility';
+import { easeOut } from '@atlaskit/motion/curves';
+import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT } from '../../common/constants';
+import { useIsSidebarDragging } from '../../common/hooks';
 import { getPageLayoutSlotSelector } from '../../common/utils';
-import { useSkipLink } from '../../controllers';
-import { mainStyles } from './styles';
+import { SidebarResizeContext, useSkipLink } from '../../controllers';
+import SlotFocusRing from './internal/slot-focus-ring'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var prefersReducedMotionStyles = css(prefersReducedMotion());
+var mainStyles = css({
+  minWidth: 0,
+  marginLeft: 0,
+  // Prevent flex container from blowing up when there's super wide content.
+  flexGrow: 1,
+  // Transition negative margin on main in sync with the increase in width of leftSidebar.
+  transition: "margin-left ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
+});
+var draggingStyles = css({
+  cursor: 'ew-resize',
+  // 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 = css({
+  marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
+});
 
 var Main = function Main(props) {
   var children = props.children,
@@ -12,11 +42,22 @@ var Main = function Main(props) {
       id = props.id,
       skipLinkTitle = props.skipLinkTitle;
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    "data-testid": testId,
-    css: mainStyles,
-    id: id
-  }, getPageLayoutSlotSelector('main')), children);
+  var isDragging = useIsSidebarDragging();
+
+  var _useContext = useContext(SidebarResizeContext),
+      _useContext$leftSideb = _useContext.leftSidebarState,
+      isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
+      isFixed = _useContext$leftSideb.isFixed;
+
+  return jsx(SlotFocusRing, null, function (_ref) {
+    var className = _ref.className;
+    return jsx("div", _extends({
+      "data-testid": testId,
+      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
+      className: className,
+      id: id
+    }, getPageLayoutSlotSelector('main')), children);
+  });
 };
 
 export default Main;

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

@@ -3,14 +3,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { BANNER, BANNER_HEIGHT, CONTENT, DEFAULT_I18N_PROPS_SKIP_LINKS, LEFT_PANEL, LEFT_PANEL_WIDTH, PAGE_LAYOUT_CONTAINER_SELECTOR, RIGHT_PANEL, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { SidebarResizeController, SkipLinksController } from '../../controllers';
 import { SkipLinkWrapper } from '../skip-links';
-import { gridStyles } from './styles';
 
 var pageLayoutSelector = _defineProperty({}, PAGE_LAYOUT_CONTAINER_SELECTOR, true);
 
+var gridTemplateAreas = "\n  \"".concat(LEFT_PANEL, " ").concat(BANNER, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, " ").concat(RIGHT_PANEL, "\"\n ");
+var gridStyles = css({
+  display: 'grid',
+  height: '100%',
+  gridTemplateAreas: gridTemplateAreas,
+  gridTemplateColumns: "".concat(LEFT_PANEL_WIDTH, " minmax(0, 1fr) ").concat(RIGHT_PANEL_WIDTH),
+  gridTemplateRows: "".concat(BANNER_HEIGHT, " ").concat(TOP_NAVIGATION_HEIGHT, " auto"),
+  outline: 'none'
+});
+
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,
       skipLinksLabel = _ref$skipLinksLabel === void 0 ? DEFAULT_I18N_PROPS_SKIP_LINKS : _ref$skipLinksLabel,

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

@@ -3,12 +3,22 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
-import { DEFAULT_RIGHT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH } from '../../common/constants';
+import { css, jsx } from '@emotion/core';
+import { DEFAULT_RIGHT_PANEL_WIDTH, RIGHT_PANEL, RIGHT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH } 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 { rightPanelStyles } from './styles';
+var baseStyles = css({
+  gridArea: RIGHT_PANEL
+});
+var fixedStyles = css({
+  width: RIGHT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0
+});
 
 var RightPanel = function RightPanel(props) {
   var children = props.children,
@@ -24,17 +34,21 @@ var RightPanel = function RightPanel(props) {
     publishGridState(_defineProperty({}, VAR_RIGHT_PANEL_WIDTH, rightPanelWidth));
     return function () {
       publishGridState(_defineProperty({}, VAR_RIGHT_PANEL_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightPanelWidth]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: rightPanelStyles(isFixed),
-    "data-testid": testId,
-    id: id
-  }, getPageLayoutSlotSelector('right-panel')), jsx(SlotDimensions, {
-    variableName: VAR_RIGHT_PANEL_WIDTH,
-    value: rightPanelWidth
-  }), children);
+  return jsx(SlotFocusRing, null, function (_ref) {
+    var className = _ref.className;
+    return jsx("div", _extends({
+      css: [baseStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, getPageLayoutSlotSelector('right-panel')), jsx(SlotDimensions, {
+      variableName: VAR_RIGHT_PANEL_WIDTH,
+      value: rightPanelWidth
+    }), children);
+  });
 };
 
 export default RightPanel;