@atlaskit/page-layout 1.1.0 → 1.2.0

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;

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

@@ -0,0 +1,79 @@
+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
+const prefersReducedMotionStyles = css(prefersReducedMotion());
+const outerStyles = css({
+  width: LEFT_SIDEBAR_WIDTH,
+  marginLeft: 0,
+  position: 'relative',
+  zIndex: 1,
+  transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`,
+  ':hover': {
+    '--ds--resize-button--opacity': 1
+  }
+});
+const 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.
+ */
+
+const fixedStyles = css({
+  '::after': {
+    display: 'inline-block',
+    width: `${LEFT_SIDEBAR_WIDTH}`,
+    content: "''"
+  }
+});
+const flyoutStyles = css({
+  width: LEFT_SIDEBAR_FLYOUT_WIDTH
+});
+const flyoutFixedStyles = css({
+  width: COLLAPSED_LEFT_SIDEBAR_WIDTH
+});
+const selector = getPageLayoutSlotSelector('left-sidebar');
+
+const LeftSidebarOuter = ({
+  children,
+  isFixed = false,
+  isFlyoutOpen = false,
+  testId,
+  onMouseLeave,
+  onMouseOver,
+  id
+}, ref) => {
+  const isDragging = useIsSidebarDragging();
+  return jsx(SlotFocusRing, {
+    isSidebar: true
+  }, ({
+    className
+  }) =>
+  /**
+   * 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/es2019/components/slots/internal/resizable-children-wrapper.js

@@ -0,0 +1,49 @@
+/** @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
+const 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.
+ */
+
+const hideLeftSidebarContentsStyles = css({
+  opacity: 0,
+  transition: `opacity 0ms linear, visibility 0ms linear`,
+  transitionDelay: `${TRANSITION_DURATION - 100}ms`,
+  visibility: 'hidden'
+});
+const resizableChildrenWrapperStyles = css({
+  height: '100%',
+  opacity: 1,
+  overflow: 'hidden auto',
+  transition: 'none',
+  visibility: 'visible'
+});
+const fixedChildrenWrapperStyles = css({
+  minWidth: 240,
+  height: '100%'
+});
+
+const ResizableChildrenWrapper = ({
+  children,
+  isLeftSidebarCollapsed = false,
+  hasCollapsedState = false,
+  isFlyoutOpen = false
+}) => {
+  const isCollapsing = useIsSidebarCollapsing();
+  const isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
+  const isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
+  return jsx("div", {
+    css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
+  }, jsx("div", {
+    css: fixedChildrenWrapperStyles
+  }, children));
+};
+
+export default ResizableChildrenWrapper;

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

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { ClassNames, css, jsx } from '@emotion/core';
+import { B100 } from '@atlaskit/theme/colors';
+const focusStyles = css({
+  ':focus': {
+    outline: 'none',
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '> div': {
+      boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${B100})`}`,
+      outline: 'none'
+    }
+  }
+});
+/**
+ * Sidebars have an outer and inner component,
+ * so the nested selector needs to target an extra level deeper.
+ */
+
+const sidebarFocusStyles = css({
+  ':focus': {
+    outline: 'none',
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '> div > div': {
+      boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${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`.
+ */
+
+const SlotFocusRing = ({
+  children,
+  isSidebar = false
+}) => {
+  return jsx(ClassNames, null, ({
+    css
+  }) => children({
+    className: isSidebar ? css(sidebarFocusStyles) : css(focusStyles)
+  }));
+};
+
+export default SlotFocusRing;

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

@@ -2,12 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @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';
+const leftPanelStyles = css({
+  gridArea: LEFT_PANEL
+});
+const leftPanelFixedStyles = css({
+  width: LEFT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  left: 0
+});
 
 const LeftPanel = props => {
   const {
@@ -28,17 +38,20 @@ const LeftPanel = props => {
       publishGridState({
         [VAR_LEFT_PANEL_WIDTH]: 0
       });
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [leftPanelWidth]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: leftPanelStyles(isFixed),
+  return jsx(SlotFocusRing, null, ({
+    className
+  }) => 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);
+  }), children));
 };
 
 export default LeftPanel;

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

@@ -1,12 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @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';
 
 const LeftSidebarWithoutResize = props => {
@@ -28,18 +27,18 @@ const LeftSidebarWithoutResize = props => {
       publishGridState({
         [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/es2019/components/slots/left-sidebar.js

@@ -1,13 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 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';
 
 const LeftSidebar = props => {
@@ -112,7 +112,8 @@ const LeftSidebar = props => {
       isLeftSidebarCollapsed: cachedCollapsedState,
       leftSidebarWidth,
       lastLeftSidebarWidth,
-      flyoutLockCount: 0
+      flyoutLockCount: 0,
+      isFixed
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Every time other than mount,
   // update the local storage and css variables.
@@ -202,23 +203,25 @@ const 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/es2019/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
+
+const prefersReducedMotionStyles = css(prefersReducedMotion());
+const 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 ${TRANSITION_DURATION}ms ${easeOut} 0s`
+});
+const 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.
+ */
+
+const flyoutStyles = css({
+  marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
+});
 
 const Main = props => {
   const {
@@ -14,11 +44,21 @@ const Main = props => {
     skipLinkTitle
   } = props;
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
+  const isDragging = useIsSidebarDragging();
+  const {
+    leftSidebarState: {
+      isFlyoutOpen,
+      isFixed
+    }
+  } = useContext(SidebarResizeContext);
+  return jsx(SlotFocusRing, null, ({
+    className
+  }) => jsx("div", _extends({
     "data-testid": testId,
-    css: mainStyles,
+    css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
+    className: className,
     id: id
-  }, getPageLayoutSlotSelector('main')), children);
+  }, getPageLayoutSlotSelector('main')), children));
 };
 
 export default Main;

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

@@ -2,14 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @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';
 const pageLayoutSelector = {
   [PAGE_LAYOUT_CONTAINER_SELECTOR]: true
 };
+const gridTemplateAreas = `
+  "${LEFT_PANEL} ${BANNER} ${RIGHT_PANEL}"
+  "${LEFT_PANEL} ${TOP_NAVIGATION} ${RIGHT_PANEL}"
+  "${LEFT_PANEL} ${CONTENT} ${RIGHT_PANEL}"
+ `;
+const gridStyles = css({
+  display: 'grid',
+  height: '100%',
+  gridTemplateAreas,
+  gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr) ${RIGHT_PANEL_WIDTH}`,
+  gridTemplateRows: `${BANNER_HEIGHT} ${TOP_NAVIGATION_HEIGHT} auto`,
+  outline: 'none'
+});
 
 const PageLayout = ({
   skipLinksLabel = DEFAULT_I18N_PROPS_SKIP_LINKS,

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

@@ -2,12 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @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';
+const baseStyles = css({
+  gridArea: RIGHT_PANEL
+});
+const fixedStyles = css({
+  width: RIGHT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0
+});
 
 const RightPanel = props => {
   const {
@@ -28,17 +38,20 @@ const RightPanel = props => {
       publishGridState({
         [VAR_RIGHT_PANEL_WIDTH]: 0
       });
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightPanelWidth]);
   useSkipLink(id, skipLinkTitle);
-  return jsx("div", _extends({
-    css: rightPanelStyles(isFixed),
+  return jsx(SlotFocusRing, null, ({
+    className
+  }) => 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);
+  }), children));
 };
 
 export default RightPanel;