@atlaskit/page-layout 1.0.6 → 1.2.0

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,13 +21,17 @@ 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"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,
@@ -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,

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

@@ -9,26 +9,73 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("react");
+
 var _core = require("@emotion/core");
 
+var _accessibility = require("@atlaskit/motion/accessibility");
+
+var _curves = require("@atlaskit/motion/curves");
+
+var _constants = require("../../common/constants");
+
+var _hooks = require("../../common/hooks");
+
 var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _styles = require("./styles");
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
 /** @jsx jsx */
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var prefersReducedMotionStyles = (0, _core.css)((0, _accessibility.prefersReducedMotion)());
+var mainStyles = (0, _core.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(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
+});
+var draggingStyles = (0, _core.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 = (0, _core.css)({
+  marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
+});
+
 var Main = function Main(props) {
   var children = props.children,
       testId = props.testId,
       id = props.id,
       skipLinkTitle = props.skipLinkTitle;
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId,
-    css: _styles.mainStyles,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
+  var isDragging = (0, _hooks.useIsSidebarDragging)();
+
+  var _useContext = (0, _react.useContext)(_controllers.SidebarResizeContext),
+      _useContext$leftSideb = _useContext.leftSidebarState,
+      isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
+      isFixed = _useContext$leftSideb.isFixed;
+
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      "data-testid": testId,
+      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
+      className: className,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
+  });
 };
 
 var _default = Main;

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

@@ -21,10 +21,17 @@ var _controllers = require("../../controllers");
 
 var _skipLinks = require("../skip-links");
 
-var _styles = require("./styles");
-
 /** @jsx jsx */
 var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
+var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
+var gridStyles = (0, _core.css)({
+  display: 'grid',
+  height: '100%',
+  gridTemplateAreas: gridTemplateAreas,
+  gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr) ").concat(_constants.RIGHT_PANEL_WIDTH),
+  gridTemplateRows: "".concat(_constants.BANNER_HEIGHT, " ").concat(_constants.TOP_NAVIGATION_HEIGHT, " auto"),
+  outline: 'none'
+});
 
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,
@@ -37,7 +44,7 @@ var PageLayout = function PageLayout(_ref) {
     skipLinksLabel: skipLinksLabel
   }), (0, _core.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: _styles.gridStyles,
+    css: gridStyles,
     tabIndex: -1
   }), (0, _core.jsx)(_controllers.SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

package/dist/cjs/components/slots/right-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 baseStyles = (0, _core.css)({
+  gridArea: _constants.RIGHT_PANEL
+});
+var fixedStyles = (0, _core.css)({
+  width: _constants.RIGHT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0
+});
+
 var RightPanel = function RightPanel(props) {
   var children = props.children,
       isFixed = props.isFixed,
@@ -40,17 +51,21 @@ var RightPanel = function RightPanel(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, rightPanelWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightPanelWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.rightPanelStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
-    value: rightPanelWidth
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [baseStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
+      value: rightPanelWidth
+    }), children);
+  });
 };
 
 var _default = RightPanel;

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

@@ -21,11 +21,49 @@ 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 */
+
+/**
+ * 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)({
+  /**
+   * This width on the inner wrapper is required when it is using fixed
+   * positioning. Otherwise its width is slightly off.
+   */
+  width: _constants.RIGHT_SIDEBAR_WIDTH,
+  position: 'fixed',
+  top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
+  right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
+  bottom: 0
+});
+var staticInnerStyles = (0, _core.css)({
+  height: '100%'
+});
+var outerStyles = (0, _core.css)({
+  width: _constants.RIGHT_SIDEBAR_WIDTH
+});
+/**
+ * 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 fixedOuterStyles = (0, _core.css)({
+  '&::after': {
+    display: 'inline-block',
+    width: _constants.RIGHT_SIDEBAR_WIDTH,
+    content: "''"
+  }
+});
+
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,
       _props$width = props.width,
@@ -40,19 +78,25 @@ var RightSidebar = function RightSidebar(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightSidebarWidth, id]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId,
-    css: (0, _styles.rightSidebarStyles)(isFixed),
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
-    value: rightSidebarWidth
-  }), (0, _core.jsx)("div", {
-    css: (0, _styles.fixedRightSidebarInnerStyles)(isFixed)
-  }, children));
+  return (0, _core.jsx)(_slotFocusRing.default, {
+    isSidebar: true
+  }, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      "data-testid": testId,
+      css: [outerStyles, isFixed && fixedOuterStyles],
+      className: className,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
+      value: rightSidebarWidth
+    }), (0, _core.jsx)("div", {
+      css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
+    }, children));
+  });
 };
 
 var _default = RightSidebar;

package/dist/cjs/components/slots/top-navigation.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 topNavigationStyles = (0, _core.css)({
+  height: _constants.TOP_NAVIGATION_HEIGHT,
+  gridArea: _constants.TOP_NAVIGATION
+});
+var fixedStyles = (0, _core.css)({
+  position: 'fixed',
+  zIndex: 2,
+  top: _constants.BANNER_HEIGHT,
+  right: _constants.RIGHT_PANEL_WIDTH,
+  left: _constants.LEFT_PANEL_WIDTH
+});
+
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,
       _props$height = props.height,
@@ -41,17 +53,21 @@ var TopNavigation = function TopNavigation(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [topNavigationHeight]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.topNavigationStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
-    value: topNavigationHeight
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [topNavigationStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
+      value: topNavigationHeight
+    }), children);
+  });
 };
 
 var _default = TopNavigation;

package/dist/cjs/controllers/index.js

@@ -5,40 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "publishGridState", {
+Object.defineProperty(exports, "SidebarResizeContext", {
   enumerable: true,
   get: function get() {
-    return _usePageLayoutGrid.default;
+    return _sidebarResizeContext.SidebarResizeContext;
   }
 });
-Object.defineProperty(exports, "SidebarResizeContext", {
+Object.defineProperty(exports, "SidebarResizeController", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.SidebarResizeContext;
+    return _sidebarResizeController.SidebarResizeController;
   }
 });
-Object.defineProperty(exports, "usePageLayoutResize", {
+Object.defineProperty(exports, "SkipLinksController", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.usePageLayoutResize;
+    return _skipLinkController.SkipLinksController;
   }
 });
-Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
+Object.defineProperty(exports, "publishGridState", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.useLeftSidebarFlyoutLock;
+    return _usePageLayoutGrid.default;
   }
 });
-Object.defineProperty(exports, "SidebarResizeController", {
+Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeController.SidebarResizeController;
+    return _sidebarResizeContext.useLeftSidebarFlyoutLock;
   }
 });
-Object.defineProperty(exports, "useSkipLinks", {
+Object.defineProperty(exports, "usePageLayoutResize", {
   enumerable: true,
   get: function get() {
-    return _skipLinkContext.useSkipLinks;
+    return _sidebarResizeContext.usePageLayoutResize;
   }
 });
 Object.defineProperty(exports, "useSkipLink", {
@@ -47,10 +47,10 @@ Object.defineProperty(exports, "useSkipLink", {
     return _skipLinkContext.useSkipLink;
   }
 });
-Object.defineProperty(exports, "SkipLinksController", {
+Object.defineProperty(exports, "useSkipLinks", {
   enumerable: true,
   get: function get() {
-    return _skipLinkController.SkipLinksController;
+    return _skipLinkContext.useSkipLinks;
   }
 });
 

package/dist/cjs/controllers/sidebar-resize-context.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLeftSidebarFlyoutLock = exports.usePageLayoutResize = exports.SidebarResizeContext = void 0;
+exports.usePageLayoutResize = exports.useLeftSidebarFlyoutLock = exports.SidebarResizeContext = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,9 +13,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["setLeftSidebarState"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 var noop = function noop() {};
 
@@ -25,7 +27,8 @@ var leftSidebarState = {
   isLeftSidebarCollapsed: false,
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
-  flyoutLockCount: 0
+  flyoutLockCount: 0,
+  isFixed: true
 };
 var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   isLeftSidebarCollapsed: false,
@@ -39,7 +42,7 @@ exports.SidebarResizeContext = SidebarResizeContext;
 var usePageLayoutResize = function usePageLayoutResize() {
   var _useContext = (0, _react.useContext)(SidebarResizeContext),
       setLeftSidebarState = _useContext.setLeftSidebarState,
-      context = (0, _objectWithoutProperties2.default)(_useContext, ["setLeftSidebarState"]);
+      context = (0, _objectWithoutProperties2.default)(_useContext, _excluded);
 
   return context;
 };

package/dist/cjs/controllers/sidebar-resize-controller.js

@@ -46,7 +46,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     isLeftSidebarCollapsed: false,
     leftSidebarWidth: 0,
     lastLeftSidebarWidth: 0,
-    flyoutLockCount: 0
+    flyoutLockCount: 0,
+    isFixed: true
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       leftSidebarState = _useState2[0],
@@ -74,7 +75,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var expandLeftSidebar = (0, _react.useCallback)(function () {
     var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -87,7 +89,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: width,
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 
@@ -98,7 +101,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var collapseLeftSidebar = (0, _react.useCallback)(function (event, collapseWithoutTransition) {
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -113,7 +117,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH,
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion