@atlaskit/page-layout 2.1.4 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/page-layout
 
+## 3.1.0
+
+### Minor Changes
+
+- [#81736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81736) [`5ce631eec537`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ce631eec537) - Added `UNSAFE_useSetLeftSidebarState` to support an internal redesign. `UNSAFE_useSetLeftSidebarState` returns noop and will be removed in the next major release.
+
+## 3.0.0
+
+### Major Changes
+
+- [#80897](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80897) [`8ce3bb563079`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ce3bb563079) - [ux] If you view a product in a small window or at higher zoom levels, the sidebar now changes sizes to keep all controls in view. In these smaller windows, the sidebar no longer opens on hover to avoid accidental opening.
+
+  The sidebar is unchanged in views wider than 768 pixels.
+
+  When viewing a product in a window narrower than 768px or zoomed in at 200%, you'll notice that hovering your cursor over the sidebar no longer expands the sidebar.
+
+  To open the sidebar, select the expand sidebar button ( > icon). Select the button again to collapse the sidebar. You can also select the edge of the sidebar itself to expand and collapse it.
+
 ## 2.1.4
 
 ### Patch Changes

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

@@ -12,7 +12,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
 var _utils = require("../../common/utils");
@@ -59,7 +58,6 @@ var globalResizingStyles = (0, _react2.css)({
   // However, to minimize risk we are just disabling `pointer-events` on iframes
   // as that change is actually needed to fix resizing with iframes
 });
-
 var ResizeControl = function ResizeControl(_ref) {
   var testId = _ref.testId,
     overrides = _ref.overrides,
@@ -332,10 +330,8 @@ var ResizeControl = function ResizeControl(_ref) {
   }), (0, _react2.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
   }),
-  // Without the feature flag, always show the GrabArea
-  (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ||
-  // With the feature flag, only show the GrabArea if we're not on the mobile viewport
-  (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) && (0, _react2.jsx)(_grabArea.default, {
+  // Only show the GrabArea if we're not on the mobile viewport
+  !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && (0, _react2.jsx)(_grabArea.default, {
     isDisabled: isLeftSidebarCollapsed,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     label: resizeGrabAreaLabel,
@@ -347,7 +343,7 @@ var ResizeControl = function ResizeControl(_ref) {
     onMouseDown: onMouseDown,
     testId: testId && "".concat(testId, "-grab-area")
   }), resizeButton.render(_resizeButton.default, {
-    isLeftSidebarCollapsed: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && "".concat(testId, "-resize-button")

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

@@ -12,7 +12,6 @@ var _react = require("@emotion/react");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
@@ -79,7 +78,7 @@ var ResizeButton = function ResizeButton(_ref) {
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
     type: "button",
-    css: [resizeIconButtonStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
+    css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId
     // Prevents focus staying attached to the button when pressed
     ,

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

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

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

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../../common/constants");
 var _hooks = require("../../../common/hooks");
@@ -16,8 +15,6 @@ var _hooks = require("../../../common/hooks");
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 var mobileStyles = (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   width: "".concat(_constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
   position: 'fixed',
@@ -72,8 +69,8 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
   var isDragging = (0, _hooks.useIsSidebarDragging)();
   return (0, _react.jsx)("div", {
     css: [
-    // feature flagged mobile viewport styles
-    (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && isFlyoutOpen && mobileInnerFlyoutStyles,
+    // mobile viewport styles
+    mobileStyles, isFlyoutOpen && mobileInnerFlyoutStyles,
     // generic styles
     !isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);

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

@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../../common/constants");
 var _hooks = require("../../../common/hooks");
@@ -97,8 +96,8 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       (0, _react2.jsx)("div", (0, _extends2.default)({
         css: [
-        // feature flagged mobile viewport styles
-        (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && isFlyoutOpen && mobileFlyoutStyles,
+        // mobile viewport styles
+        mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
         // generic styles
         outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
         className: className,

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

@@ -10,7 +10,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
 var _motion = require("@atlaskit/motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
@@ -40,7 +39,6 @@ var hiddenBackdropStyles = (0, _react2.css)({
  *
  * Provides a slot for a left sidebar within the PageLayout.
  *
- * [Behind a feature-flag 'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g']:
  * On smaller viewports, the left sidebar can no longer be expanded.  Instead, expanding it will
  * put it into our "flyout mode" to lay overtop (which in desktop is explicitly a hover state).
  * This ensures the contents behind do not reflow oddly and allows for a better experience
@@ -224,11 +222,8 @@ var LeftSidebar = function LeftSidebar(props) {
     }, _constants.FLYOUT_DELAY);
   };
   var mobileMediaQuery = (0, _responsive.UNSAFE_useMediaQuery)('below.sm');
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   var openMobileFlyout = (0, _react.useCallback)(function () {
-    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
-      // Only do this for our feature flag and for mobile viewports
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
       return;
     }
     setLeftSidebarState(function (current) {
@@ -240,10 +235,8 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     });
   }, [setLeftSidebarState, mobileMediaQuery]);
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   var closeMobileFlyout = (0, _react.useCallback)(function () {
-    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
       return;
     }
     setLeftSidebarState(function (current) {
@@ -255,12 +248,7 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     });
   }, [setLeftSidebarState, mobileMediaQuery]);
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   (0, _responsive.UNSAFE_useMediaQuery)('below.sm', function (event) {
-    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
-      return;
-    }
     setLeftSidebarState(function (current) {
       if (event.matches && !current.isLeftSidebarCollapsed) {
         // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
@@ -287,12 +275,11 @@ var LeftSidebar = function LeftSidebar(props) {
   });
 
   // Close the flyout when the "escape" key is pressed.
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone as `closeMobileFlyout` only does something with the feature flag.
   (0, _useCloseOnEscapePress.default)({
     onClose: closeMobileFlyout,
-    isDisabled: !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !isFlyoutOpen
+    isDisabled: !isFlyoutOpen
   });
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
+  return (0, _react2.jsx)(_react.Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.
    * This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
@@ -307,9 +294,9 @@ var LeftSidebar = function LeftSidebar(props) {
   }), (0, _react2.jsx)(_leftSidebarOuter.default, {
     ref: leftSideBarRef,
     testId: testId,
-    onMouseOver: !((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseOver : undefined,
-    onMouseLeave: !((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseLeave : undefined,
-    onClick: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? openMobileFlyout : undefined,
+    onMouseOver: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseOver : undefined,
+    onMouseLeave: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseLeave : undefined,
+    onClick: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? openMobileFlyout : undefined,
     id: id,
     isFixed: isFixed
   }, (0, _react2.jsx)(_slotDimensions.default, {

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

@@ -9,7 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
 var _controllers = require("../../controllers");
@@ -51,7 +50,7 @@ var PageLayout = function PageLayout(_ref) {
     skipLinksLabel: skipLinksLabel
   }), (0, _react2.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: [gridStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && gridStylesMobileStyles],
+    css: [gridStyles, gridStylesMobileStyles],
     tabIndex: -1
   }), (0, _react2.jsx)(_controllers.SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

package/dist/cjs/components/slots/slot-dimensions.js

@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _default = exports.default = function _default(_ref) {
   var variableName = _ref.variableName,
     value = _ref.value,
     mobileValue = _ref.mobileValue;
-  return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
+  return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
 };

package/dist/cjs/controllers/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "SkipLinksController", {
     return _skipLinkController.SkipLinksController;
   }
 });
+Object.defineProperty(exports, "UNSAFE_useSetLeftSidebarState", {
+  enumerable: true,
+  get: function get() {
+    return _sidebarResizeContext.UNSAFE_useSetLeftSidebarState;
+  }
+});
 Object.defineProperty(exports, "publishGridState", {
   enumerable: true,
   get: function get() {

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

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePageLayoutResize = exports.useLeftSidebarFlyoutLock = exports.SidebarResizeContext = void 0;
+exports.usePageLayoutResize = exports.useLeftSidebarFlyoutLock = exports.UNSAFE_useSetLeftSidebarState = exports.SidebarResizeContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["setLeftSidebarState"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,6 +22,7 @@ var leftSidebarState = {
   flyoutLockCount: 0,
   isFixed: true
 };
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SidebarResizeContext = exports.SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   isLeftSidebarCollapsed: false,
@@ -71,4 +73,13 @@ var useLeftSidebarFlyoutLock = exports.useLeftSidebarFlyoutLock = function useLe
       });
     };
   }, [setLeftSidebarState]);
+};
+
+/**
+ * @deprecated Returns noop. Added to support an internal redesign, `UNSAFE_useSetLeftSidebarState` will be removed in the next major release.
+ */
+var UNSAFE_useSetLeftSidebarState = exports.UNSAFE_useSetLeftSidebarState = function UNSAFE_useSetLeftSidebarState() {
+  var _useContext3 = (0, _react.useContext)(SidebarResizeContext),
+    setLeftSidebarState = _useContext3.setLeftSidebarState;
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.atlassian.griffin-navigation-redesign') ? setLeftSidebarState : _noop.default;
 };

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

@@ -11,13 +11,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _motion = require("@atlaskit/motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../common/constants");
 var _utils = require("../common/utils");
 var _sidebarResizeContext = require("./sidebar-resize-context");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _noop.default;
   var leftSidebarState = arguments.length > 1 ? arguments[1] : undefined;
@@ -64,7 +63,7 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
   }, [onExpand, onCollapse]);
   var transition = (0, _react.useRef)(null);
   var mobileMediaQuery = (0, _responsive.UNSAFE_useMediaQuery)('below.sm');
-  var isOpen = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
+  var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = (0, _react.useCallback)(function () {
     var _transition$current2, _transition$current3;
     if (isOpen) {
@@ -73,7 +72,7 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
 
     // If the user is at a mobile viewport when this runs, we handle it differently
     // We don't expand at mobile widths; instead we use a flyout which is treated the same otherwise
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
       var _transition$current;
       var flyoutOpenSidebarState = {
         isResizing: false,
@@ -149,7 +148,7 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
 
     // If the user is at a mobile viewport when this runs, we handle it differently
     // We don't collapse at mobile widths; instead we close the flyout.
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
       var _transition$current5;
       var flyoutCloseSidebarState = {
         isResizing: false,

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

@@ -11,8 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../common/constants");
 var _skipLinkContext = require("./skip-link-context");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var byDOMOrder = function byDOMOrder(a, b) {
   var _a$listIndex, _b$listIndex;
   var elems = Array.from(document.querySelectorAll("[".concat(_constants.PAGE_LAYOUT_SLOT_SELECTOR, "]")));

package/dist/cjs/controllers/types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/dist/cjs/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "TopNavigation", {
     return _components.TopNavigation;
   }
 });
+Object.defineProperty(exports, "UNSAFE_useSetLeftSidebarState", {
+  enumerable: true,
+  get: function get() {
+    return _controllers.UNSAFE_useSetLeftSidebarState;
+  }
+});
 Object.defineProperty(exports, "useCustomSkipLink", {
   enumerable: true,
   get: function get() {

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

@@ -4,7 +4,6 @@ import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState
 import { css, Global, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -53,7 +52,6 @@ const globalResizingStyles = css({
   // However, to minimize risk we are just disabling `pointer-events` on iframes
   // as that change is actually needed to fix resizing with iframes
 });
-
 const ResizeControl = ({
   testId,
   overrides,
@@ -332,10 +330,8 @@ const ResizeControl = ({
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
   }),
-  // Without the feature flag, always show the GrabArea
-  (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ||
-  // With the feature flag, only show the GrabArea if we're not on the mobile viewport
-  getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) && jsx(GrabArea, {
+  // Only show the GrabArea if we're not on the mobile viewport
+  !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
     isDisabled: isLeftSidebarCollapsed,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     label: resizeGrabAreaLabel,
@@ -347,7 +343,7 @@ const ResizeControl = ({
     onMouseDown: onMouseDown,
     testId: testId && `${testId}-grab-area`
   }), resizeButton.render(ResizeButton, {
-    isLeftSidebarCollapsed: getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && `${testId}-resize-button`

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

@@ -5,7 +5,6 @@ import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
@@ -77,7 +76,7 @@ const ResizeButton = ({
   "aria-expanded": !isLeftSidebarCollapsed,
   "aria-label": label,
   type: "button",
-  css: [resizeIconButtonStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
+  css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
   "data-testid": testId
   // Prevents focus staying attached to the button when pressed
   ,

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

@@ -1 +0,0 @@
-export {};

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

@@ -2,14 +2,11 @@
 
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.sm]: {
@@ -69,8 +66,8 @@ const LeftSidebarInner = ({
   const isDragging = useIsSidebarDragging();
   return jsx("div", {
     css: [
-    // feature flagged mobile viewport styles
-    getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && isFlyoutOpen && mobileInnerFlyoutStyles,
+    // mobile viewport styles
+    mobileStyles, isFlyoutOpen && mobileInnerFlyoutStyles,
     // generic styles
     !isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);

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

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
@@ -98,8 +97,8 @@ const LeftSidebarOuter = ({
   // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   jsx("div", _extends({
     css: [
-    // feature flagged mobile viewport styles
-    getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && isFlyoutOpen && mobileFlyoutStyles,
+    // mobile viewport styles
+    mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
     // generic styles
     outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
     className: className,

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

@@ -4,7 +4,6 @@ import { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { easeOut } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { N100A } from '@atlaskit/theme/colors';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
@@ -32,7 +31,6 @@ const hiddenBackdropStyles = css({
  *
  * Provides a slot for a left sidebar within the PageLayout.
  *
- * [Behind a feature-flag 'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g']:
  * On smaller viewports, the left sidebar can no longer be expanded.  Instead, expanding it will
  * put it into our "flyout mode" to lay overtop (which in desktop is explicitly a hover state).
  * This ensures the contents behind do not reflow oddly and allows for a better experience
@@ -218,11 +216,8 @@ const LeftSidebar = props => {
     }, FLYOUT_DELAY);
   };
   const mobileMediaQuery = useMediaQuery('below.sm');
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   const openMobileFlyout = useCallback(() => {
-    if (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
-      // Only do this for our feature flag and for mobile viewports
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
       return;
     }
     setLeftSidebarState(current => {
@@ -235,10 +230,8 @@ const LeftSidebar = props => {
       };
     });
   }, [setLeftSidebarState, mobileMediaQuery]);
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   const closeMobileFlyout = useCallback(() => {
-    if (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
       return;
     }
     setLeftSidebarState(current => {
@@ -251,12 +244,7 @@ const LeftSidebar = props => {
       };
     });
   }, [setLeftSidebarState, mobileMediaQuery]);
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   useMediaQuery('below.sm', event => {
-    if (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
-      return;
-    }
     setLeftSidebarState(current => {
       if (event.matches && !current.isLeftSidebarCollapsed) {
         // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
@@ -285,12 +273,11 @@ const LeftSidebar = props => {
   });
 
   // Close the flyout when the "escape" key is pressed.
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone as `closeMobileFlyout` only does something with the feature flag.
   useCloseOnEscapePress({
     onClose: closeMobileFlyout,
-    isDisabled: !getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !isFlyoutOpen
+    isDisabled: !isFlyoutOpen
   });
-  return jsx(Fragment, null, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
+  return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.
    * This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
@@ -305,9 +292,9 @@ const LeftSidebar = props => {
   }), jsx(LeftSidebarOuter, {
     ref: leftSideBarRef,
     testId: testId,
-    onMouseOver: !(getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseOver : undefined,
-    onMouseLeave: !(getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseLeave : undefined,
-    onClick: getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? openMobileFlyout : undefined,
+    onMouseOver: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseOver : undefined,
+    onMouseLeave: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseLeave : undefined,
+    onClick: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? openMobileFlyout : undefined,
     id: id,
     isFixed: isFixed
   }, jsx(SlotDimensions, {

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 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';
@@ -55,7 +54,7 @@ const PageLayout = ({
     skipLinksLabel: skipLinksLabel
   }), jsx("div", _extends({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: [gridStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && gridStylesMobileStyles],
+    css: [gridStyles, gridStylesMobileStyles],
     tabIndex: -1
   }), jsx(SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

package/dist/es2019/components/slots/slot-dimensions.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 export default (({
   variableName,
   value,
   mobileValue
-}) => /*#__PURE__*/React.createElement("style", null, `:root{--${variableName}:${value}px;}`, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && `${UNSAFE_media.below.sm} { :root{--${variableName}:${mobileValue}px;} }`));
+}) => /*#__PURE__*/React.createElement("style", null, `:root{--${variableName}:${value}px;}`, mobileValue && `${UNSAFE_media.below.sm} { :root{--${variableName}:${mobileValue}px;} }`));

package/dist/es2019/controllers/index.js

@@ -1,5 +1,5 @@
 export { default as publishGridState } from './use-page-layout-grid';
-export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock } from './sidebar-resize-context';
+export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState } from './sidebar-resize-context';
 export { SidebarResizeController } from './sidebar-resize-controller';
 export { useSkipLinks, useSkipLink } from './skip-link-context';
 export { SkipLinksController } from './skip-link-controller';

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

@@ -1,5 +1,6 @@
 import { createContext, useContext, useEffect } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const leftSidebarState = {
   isFlyoutOpen: false,
   isResizing: false,
@@ -9,6 +10,7 @@ const leftSidebarState = {
   flyoutLockCount: 0,
   isFixed: true
 };
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
@@ -59,4 +61,14 @@ export const useLeftSidebarFlyoutLock = () => {
       }));
     };
   }, [setLeftSidebarState]);
+};
+
+/**
+ * @deprecated Returns noop. Added to support an internal redesign, `UNSAFE_useSetLeftSidebarState` will be removed in the next major release.
+ */
+export const UNSAFE_useSetLeftSidebarState = () => {
+  const {
+    setLeftSidebarState
+  } = useContext(SidebarResizeContext);
+  return getBooleanFF('platform.atlassian.griffin-navigation-redesign') ? setLeftSidebarState : noop;
 };

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

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { isReducedMotion } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_COLLAPSING } from '../common/constants';
 import { getPageLayoutSlotCSSSelector } from '../common/utils';
@@ -51,7 +50,7 @@ export const SidebarResizeController = ({
   }, [onExpand, onCollapse]);
   const transition = useRef(null);
   const mobileMediaQuery = useMediaQuery('below.sm');
-  const isOpen = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
+  const isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   const expandLeftSidebar = useCallback(() => {
     var _transition$current2, _transition$current3;
     if (isOpen) {
@@ -60,7 +59,7 @@ export const SidebarResizeController = ({
 
     // If the user is at a mobile viewport when this runs, we handle it differently
     // We don't expand at mobile widths; instead we use a flyout which is treated the same otherwise
-    if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
       var _transition$current;
       const flyoutOpenSidebarState = {
         isResizing: false,
@@ -136,7 +135,7 @@ export const SidebarResizeController = ({
 
     // If the user is at a mobile viewport when this runs, we handle it differently
     // We don't collapse at mobile widths; instead we close the flyout.
-    if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
       var _transition$current5;
       const flyoutCloseSidebarState = {
         isResizing: false,

package/dist/es2019/controllers/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/index.js

@@ -1,3 +1,3 @@
 export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink } from './components';
 export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH } from './common/constants';
-export { usePageLayoutResize, useLeftSidebarFlyoutLock } from './controllers';
+export { usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState } from './controllers';

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

@@ -8,7 +8,6 @@ import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState
 import { css, Global, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -55,7 +54,6 @@ var globalResizingStyles = css({
   // However, to minimize risk we are just disabling `pointer-events` on iframes
   // as that change is actually needed to fix resizing with iframes
 });
-
 var ResizeControl = function ResizeControl(_ref) {
   var testId = _ref.testId,
     overrides = _ref.overrides,
@@ -328,10 +326,8 @@ var ResizeControl = function ResizeControl(_ref) {
   }), jsx(Shadow, {
     testId: testId && "".concat(testId, "-shadow")
   }),
-  // Without the feature flag, always show the GrabArea
-  (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ||
-  // With the feature flag, only show the GrabArea if we're not on the mobile viewport
-  getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) && jsx(GrabArea, {
+  // Only show the GrabArea if we're not on the mobile viewport
+  !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
     isDisabled: isLeftSidebarCollapsed,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     label: resizeGrabAreaLabel,
@@ -343,7 +339,7 @@ var ResizeControl = function ResizeControl(_ref) {
     onMouseDown: onMouseDown,
     testId: testId && "".concat(testId, "-grab-area")
   }), resizeButton.render(ResizeButton, {
-    isLeftSidebarCollapsed: getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && "".concat(testId, "-resize-button")

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

@@ -8,7 +8,6 @@ import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
@@ -73,7 +72,7 @@ var ResizeButton = function ResizeButton(_ref) {
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
     type: "button",
-    css: [resizeIconButtonStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
+    css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId
     // Prevents focus staying attached to the button when pressed
     ,

package/dist/esm/components/skip-links/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -3,14 +3,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 var mobileStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
   width: "".concat(MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
   position: 'fixed',
@@ -65,8 +62,8 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
   var isDragging = useIsSidebarDragging();
   return jsx("div", {
     css: [
-    // feature flagged mobile viewport styles
-    getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && isFlyoutOpen && mobileInnerFlyoutStyles,
+    // mobile viewport styles
+    mobileStyles, isFlyoutOpen && mobileInnerFlyoutStyles,
     // generic styles
     !isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);

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

@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { forwardRef, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
@@ -89,8 +88,8 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       jsx("div", _extends({
         css: [
-        // feature flagged mobile viewport styles
-        getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && isFlyoutOpen && mobileFlyoutStyles,
+        // mobile viewport styles
+        mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
         // generic styles
         outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
         className: className,

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

@@ -7,7 +7,6 @@ import { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { easeOut } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { N100A } from '@atlaskit/theme/colors';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
@@ -35,7 +34,6 @@ var hiddenBackdropStyles = css({
  *
  * Provides a slot for a left sidebar within the PageLayout.
  *
- * [Behind a feature-flag 'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g']:
  * On smaller viewports, the left sidebar can no longer be expanded.  Instead, expanding it will
  * put it into our "flyout mode" to lay overtop (which in desktop is explicitly a hover state).
  * This ensures the contents behind do not reflow oddly and allows for a better experience
@@ -219,11 +217,8 @@ var LeftSidebar = function LeftSidebar(props) {
     }, FLYOUT_DELAY);
   };
   var mobileMediaQuery = useMediaQuery('below.sm');
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   var openMobileFlyout = useCallback(function () {
-    if (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
-      // Only do this for our feature flag and for mobile viewports
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
       return;
     }
     setLeftSidebarState(function (current) {
@@ -235,10 +230,8 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     });
   }, [setLeftSidebarState, mobileMediaQuery]);
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   var closeMobileFlyout = useCallback(function () {
-    if (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
       return;
     }
     setLeftSidebarState(function (current) {
@@ -250,12 +243,7 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     });
   }, [setLeftSidebarState, mobileMediaQuery]);
-
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   useMediaQuery('below.sm', function (event) {
-    if (!getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
-      return;
-    }
     setLeftSidebarState(function (current) {
       if (event.matches && !current.isLeftSidebarCollapsed) {
         // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
@@ -282,12 +270,11 @@ var LeftSidebar = function LeftSidebar(props) {
   });
 
   // Close the flyout when the "escape" key is pressed.
-  // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone as `closeMobileFlyout` only does something with the feature flag.
   useCloseOnEscapePress({
     onClose: closeMobileFlyout,
-    isDisabled: !getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') || !isFlyoutOpen
+    isDisabled: !isFlyoutOpen
   });
-  return jsx(Fragment, null, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
+  return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.
    * This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
@@ -302,9 +289,9 @@ var LeftSidebar = function LeftSidebar(props) {
   }), jsx(LeftSidebarOuter, {
     ref: leftSideBarRef,
     testId: testId,
-    onMouseOver: !(getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseOver : undefined,
-    onMouseLeave: !(getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseLeave : undefined,
-    onClick: getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? openMobileFlyout : undefined,
+    onMouseOver: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseOver : undefined,
+    onMouseLeave: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseLeave : undefined,
+    onClick: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? openMobileFlyout : undefined,
     id: id,
     isFixed: isFixed
   }, jsx(SlotDimensions, {

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

@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 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';
@@ -43,7 +42,7 @@ var PageLayout = function PageLayout(_ref) {
     skipLinksLabel: skipLinksLabel
   }), jsx("div", _extends({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: [gridStyles, getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && gridStylesMobileStyles],
+    css: [gridStyles, gridStylesMobileStyles],
     tabIndex: -1
   }), jsx(SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

package/dist/esm/components/slots/slot-dimensions.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 export default (function (_ref) {
   var variableName = _ref.variableName,
     value = _ref.value,
     mobileValue = _ref.mobileValue;
-  return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
+  return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
 });

package/dist/esm/controllers/index.js

@@ -1,5 +1,5 @@
 export { default as publishGridState } from './use-page-layout-grid';
-export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock } from './sidebar-resize-context';
+export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState } from './sidebar-resize-context';
 export { SidebarResizeController } from './sidebar-resize-controller';
 export { useSkipLinks, useSkipLink } from './skip-link-context';
 export { SkipLinksController } from './skip-link-controller';

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

@@ -5,6 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createContext, useContext, useEffect } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var leftSidebarState = {
   isFlyoutOpen: false,
   isResizing: false,
@@ -14,6 +15,7 @@ var leftSidebarState = {
   flyoutLockCount: 0,
   isFixed: true
 };
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
@@ -64,4 +66,13 @@ export var useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
       });
     };
   }, [setLeftSidebarState]);
+};
+
+/**
+ * @deprecated Returns noop. Added to support an internal redesign, `UNSAFE_useSetLeftSidebarState` will be removed in the next major release.
+ */
+export var UNSAFE_useSetLeftSidebarState = function UNSAFE_useSetLeftSidebarState() {
+  var _useContext3 = useContext(SidebarResizeContext),
+    setLeftSidebarState = _useContext3.setLeftSidebarState;
+  return getBooleanFF('platform.atlassian.griffin-navigation-redesign') ? setLeftSidebarState : noop;
 };

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

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { isReducedMotion } from '@atlaskit/motion';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_COLLAPSING } from '../common/constants';
 import { getPageLayoutSlotCSSSelector } from '../common/utils';
@@ -54,7 +53,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   }, [onExpand, onCollapse]);
   var transition = useRef(null);
   var mobileMediaQuery = useMediaQuery('below.sm');
-  var isOpen = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
+  var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = useCallback(function () {
     var _transition$current2, _transition$current3;
     if (isOpen) {
@@ -63,7 +62,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
 
     // If the user is at a mobile viewport when this runs, we handle it differently
     // We don't expand at mobile widths; instead we use a flyout which is treated the same otherwise
-    if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
       var _transition$current;
       var flyoutOpenSidebarState = {
         isResizing: false,
@@ -139,7 +138,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
 
     // If the user is at a mobile viewport when this runs, we handle it differently
     // We don't collapse at mobile widths; instead we close the flyout.
-    if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
       var _transition$current5;
       var flyoutCloseSidebarState = {
         isResizing: false,

package/dist/esm/controllers/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink } from './components';
 export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH } from './common/constants';
-export { usePageLayoutResize, useLeftSidebarFlyoutLock } from './controllers';
+export { usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState } from './controllers';

package/dist/types/components/slots/left-sidebar.d.ts

@@ -5,7 +5,6 @@ import { LeftSidebarProps } from '../../common/types';
  *
  * Provides a slot for a left sidebar within the PageLayout.
  *
- * [Behind a feature-flag 'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g']:
  * On smaller viewports, the left sidebar can no longer be expanded.  Instead, expanding it will
  * put it into our "flyout mode" to lay overtop (which in desktop is explicitly a hover state).
  * This ensures the contents behind do not reflow oddly and allows for a better experience

package/dist/types/controllers/index.d.ts

@@ -1,6 +1,6 @@
 export type { SkipLinkData } from './types';
 export { default as publishGridState } from './use-page-layout-grid';
-export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, } from './sidebar-resize-context';
+export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState, } from './sidebar-resize-context';
 export { SidebarResizeController } from './sidebar-resize-controller';
 export { useSkipLinks, useSkipLink } from './skip-link-context';
 export { SkipLinksController } from './skip-link-controller';

package/dist/types/controllers/sidebar-resize-context.d.ts

@@ -50,3 +50,7 @@ export declare const usePageLayoutResize: () => {
  * as long as the popup is open.
  */
 export declare const useLeftSidebarFlyoutLock: () => void;
+/**
+ * @deprecated Returns noop. Added to support an internal redesign, `UNSAFE_useSetLeftSidebarState` will be removed in the next major release.
+ */
+export declare const UNSAFE_useSetLeftSidebarState: () => SidebarResizeContextValue['setLeftSidebarState'];

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink, } from './components';
 export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH, } from './common/constants';
-export { usePageLayoutResize, useLeftSidebarFlyoutLock } from './controllers';
+export { usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState, } from './controllers';
 export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState, } from './common/types';

package/dist/types-ts4.5/components/slots/left-sidebar.d.ts

@@ -5,7 +5,6 @@ import { LeftSidebarProps } from '../../common/types';
  *
  * Provides a slot for a left sidebar within the PageLayout.
  *
- * [Behind a feature-flag 'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g']:
  * On smaller viewports, the left sidebar can no longer be expanded.  Instead, expanding it will
  * put it into our "flyout mode" to lay overtop (which in desktop is explicitly a hover state).
  * This ensures the contents behind do not reflow oddly and allows for a better experience

package/dist/types-ts4.5/controllers/index.d.ts

@@ -1,6 +1,6 @@
 export type { SkipLinkData } from './types';
 export { default as publishGridState } from './use-page-layout-grid';
-export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, } from './sidebar-resize-context';
+export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState, } from './sidebar-resize-context';
 export { SidebarResizeController } from './sidebar-resize-controller';
 export { useSkipLinks, useSkipLink } from './skip-link-context';
 export { SkipLinksController } from './skip-link-controller';

package/dist/types-ts4.5/controllers/sidebar-resize-context.d.ts

@@ -50,3 +50,7 @@ export declare const usePageLayoutResize: () => {
  * as long as the popup is open.
  */
 export declare const useLeftSidebarFlyoutLock: () => void;
+/**
+ * @deprecated Returns noop. Added to support an internal redesign, `UNSAFE_useSetLeftSidebarState` will be removed in the next major release.
+ */
+export declare const UNSAFE_useSetLeftSidebarState: () => SidebarResizeContextValue['setLeftSidebarState'];

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
 export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink, } from './components';
 export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH, } from './common/constants';
-export { usePageLayoutResize, useLeftSidebarFlyoutLock } from './controllers';
+export { usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState, } from './controllers';
 export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState, } from './common/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "2.1.4",
+  "version": "3.1.0",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,9 +42,9 @@
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^4.0.0",
+    "@atlaskit/primitives": "^4.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.39.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -57,9 +57,9 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/atlassian-navigation": "^3.2.0",
+    "@atlaskit/atlassian-navigation": "^3.3.0",
     "@atlaskit/atlassian-notifications": "^0.4.0",
-    "@atlaskit/drawer": "^7.6.0",
+    "@atlaskit/drawer": "^7.7.0",
     "@atlaskit/logo": "^13.15.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/notification-indicator": "^9.2.0",
@@ -113,10 +113,10 @@
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "platform-feature-flags": {
-    "platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g": {
+    "platform.design-system-team.page-layout-resize-button-fix_u0qxv": {
       "type": "boolean"
     },
-    "platform.design-system-team.page-layout-resize-button-fix_u0qxv": {
+    "platform.atlassian.griffin-navigation-redesign": {
       "type": "boolean"
     }
   }