@atlaskit/page-layout 1.7.8 → 1.7.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 1.7.10
+
+### Patch Changes
+
+- [`6263a07010c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6263a07010c) - Still behind a feature flag, reduces the breakpoint at which the new mobile functionality for our left sidebar "flyout mode" in mobile is applied (reduced from ~1024px to ~768px).
+
+## 1.7.9
+
+### Patch Changes
+
+- [`55c42f7ce9d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/55c42f7ce9d) - [ux] Add proper orientation to grab area.
+
 ## 1.7.8
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -48,7 +48,7 @@ const Wrapper = ({
 
 const sidebarWrapperStyles = css({
   height: '100%',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   nav: {
     minWidth: 20,
     overflowX: 'hidden',

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

@@ -75,6 +75,7 @@ var GrabArea = function GrabArea(_ref) {
     ,
     role: "separator",
     css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
     "aria-valuemax": 100,

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

@@ -37,7 +37,7 @@ var showResizeButtonStyles = (0, _react2.css)({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = (0, _react2.css)({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -50,7 +50,7 @@ var globalResizingStyles = (0, _react2.css)({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them
@@ -87,7 +87,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var unbindEvents = (0, _react.useRef)(null);
   var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
+  (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`

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

@@ -27,7 +27,7 @@ var increaseHitAreaStyles = (0, _react.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   opacity: 1
 })) : undefined;
 var resizeIconButtonStyles = (0, _react.css)({

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

@@ -18,7 +18,7 @@ var _hooks = require("../../../common/hooks");
 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, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   width: "".concat(_constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
   position: 'fixed',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -30,7 +30,7 @@ var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-syst
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileInnerFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileInnerFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   width: "min(90vw, ".concat(_constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
   maxWidth: _constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
   transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s, box-shadow ").concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")

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

@@ -23,7 +23,7 @@ var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
 var prefersReducedMotionStyles = (0, _react2.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, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   width: _constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
   cursor: 'pointer',
   opacity: 1,
@@ -36,7 +36,7 @@ var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-syst
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var mobileFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   cursor: 'revert'
 })) : undefined;
 var outerStyles = (0, _react2.css)({

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

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 var focusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
       outline: 'none'
@@ -26,7 +26,7 @@ var focusStyles = (0, _react.css)({
 var sidebarFocusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
       outline: 'none'

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

@@ -229,7 +229,7 @@ var LeftSidebar = function LeftSidebar(props) {
   };
   var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
+  (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
   var openMobileFlyout = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
   (0, _react.useCallback)(function () {
@@ -264,7 +264,7 @@ var LeftSidebar = function LeftSidebar(props) {
   }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-    (0, _responsive.UNSAFE_useMediaQuery)('below.md', function (event) {
+    (0, _responsive.UNSAFE_useMediaQuery)('below.sm', function (event) {
       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

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

@@ -29,7 +29,7 @@ var gridStyles = (0, _react2.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var gridStylesMobile = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+var gridStylesMobile = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
   gridTemplateAreas: gridTemplateAreasMobile,
   gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
 })) : undefined;

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

@@ -12,6 +12,6 @@ var _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.md, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
+  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;} }"));
 };
 exports.default = _default;

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

@@ -65,7 +65,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var transition = (0, _react.useRef)(null);
   var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
+  (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
   var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = (0, _react.useCallback)(function () {
     var _transition$current2, _transition$current3;

package/dist/cjs/version.json

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

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

@@ -74,6 +74,7 @@ const GrabArea = ({
   ,
   role: "separator",
   css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+  "aria-orientation": "vertical",
   "aria-valuenow": leftSidebarPercentageExpanded,
   "aria-valuemin": 0,
   "aria-valuemax": 100,

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

@@ -31,7 +31,7 @@ const showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 const globalResizingStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -44,7 +44,7 @@ const globalResizingStyles = css({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them
@@ -80,7 +80,7 @@ const ResizeControl = ({
   const unbindEvents = useRef(null);
   const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`

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

@@ -19,8 +19,8 @@ const increaseHitAreaStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  [UNSAFE_media.below.sm]: {
     opacity: 1
   }
 }) : undefined;

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

@@ -11,8 +11,8 @@ 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 = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  [UNSAFE_media.below.sm]: {
     width: `${MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH}px`,
     position: 'fixed',
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -26,8 +26,8 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  [UNSAFE_media.below.sm]: {
     width: `min(90vw, ${MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH}px)`,
     maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
     transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s, box-shadow ${TRANSITION_DURATION}ms ${easeOut} 0s`

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

@@ -15,8 +15,8 @@ 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 = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  [UNSAFE_media.below.sm]: {
     width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
     cursor: 'pointer',
     opacity: 1,
@@ -31,8 +31,8 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  [UNSAFE_media.below.sm]: {
     cursor: 'revert'
   }
 }) : undefined;

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

@@ -5,7 +5,7 @@ import { B100 } from '@atlaskit/theme/colors';
 const focusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'
@@ -20,7 +20,7 @@ const focusStyles = css({
 const sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'

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

@@ -224,7 +224,7 @@ const LeftSidebar = props => {
   };
   const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   const openMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
   useCallback(() => {
@@ -261,7 +261,7 @@ const LeftSidebar = props => {
   }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
   if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-    useMediaQuery('below.md', event => {
+    useMediaQuery('below.sm', event => {
       setLeftSidebarState(current => {
         if (event.matches && !current.isLeftSidebarCollapsed) {
           // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open

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

@@ -31,8 +31,8 @@ const gridStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  [UNSAFE_media.below.md]: {
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  [UNSAFE_media.below.sm]: {
     gridTemplateAreas: gridTemplateAreasMobile,
     gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`
   }

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

@@ -5,4 +5,4 @@ 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.md} { :root{--${variableName}:${mobileValue}px;} }`));
+}) => /*#__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;} }`));

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

@@ -52,7 +52,7 @@ export const SidebarResizeController = ({
   const transition = useRef(null);
   const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   const isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   const expandLeftSidebar = useCallback(() => {
     var _transition$current2, _transition$current3;

package/dist/es2019/version.json

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

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

@@ -69,6 +69,7 @@ var GrabArea = function GrabArea(_ref) {
     ,
     role: "separator",
     css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
     "aria-valuemax": 100,

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

@@ -33,7 +33,7 @@ var showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -46,7 +46,7 @@ var globalResizingStyles = css({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them
@@ -83,7 +83,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var unbindEvents = useRef(null);
   var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`

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

@@ -21,7 +21,7 @@ var increaseHitAreaStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   opacity: 1
 })) : undefined;
 var resizeIconButtonStyles = css({

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

@@ -11,7 +11,7 @@ import { useIsSidebarDragging } from '../../../common/hooks';
 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 = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   width: "".concat(MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
   position: 'fixed',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -23,7 +23,7 @@ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-lay
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   width: "min(90vw, ".concat(MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
   maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s, box-shadow ").concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")

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

@@ -15,7 +15,7 @@ import SlotFocusRing from './slot-focus-ring';
 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 = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
   cursor: 'pointer',
   opacity: 1,
@@ -28,7 +28,7 @@ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-lay
 })) : undefined;
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   cursor: 'revert'
 })) : undefined;
 var outerStyles = css({

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

@@ -5,7 +5,7 @@ import { B100 } from '@atlaskit/theme/colors';
 var focusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'
@@ -20,7 +20,7 @@ var focusStyles = css({
 var sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'

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

@@ -225,7 +225,7 @@ var LeftSidebar = function LeftSidebar(props) {
   };
   var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   var openMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
   useCallback(function () {
@@ -260,7 +260,7 @@ var LeftSidebar = function LeftSidebar(props) {
   }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
   if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
-    useMediaQuery('below.md', function (event) {
+    useMediaQuery('below.sm', function (event) {
       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

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

@@ -21,7 +21,7 @@ var gridStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
-var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
+var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
   gridTemplateAreas: gridTemplateAreasMobile,
   gridTemplateColumns: "".concat(LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
 })) : undefined;

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

@@ -5,5 +5,5 @@ 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.md, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
+  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;} }"));
 });

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

@@ -55,7 +55,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   var transition = useRef(null);
   var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
-  useMediaQuery('below.md') : null;
+  useMediaQuery('below.sm') : null;
   var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = useCallback(function () {
     var _transition$current2, _transition$current3;

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.7.8",
+  "version": "1.7.10",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
     "@atlaskit/menu": "^1.9.0",
     "@atlaskit/notification-indicator": "^9.1.0",
     "@atlaskit/notification-log-client": "^6.1.0",
-    "@atlaskit/popup": "^1.8.0",
+    "@atlaskit/popup": "^1.9.0",
     "@atlaskit/side-navigation": "^1.10.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,174 @@
+## API Report File for "@atlaskit/page-layout"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ButtonHTMLAttributes } from 'react';
+import { ElementType } from 'react';
+import { jsx } from '@emotion/react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+// @public
+export const Banner: (props: SlotHeightProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export const BANNER_HEIGHT: string;
+
+// @public
+export const Content: (props: ContentProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+interface ContentProps {
+    children: ReactNode;
+    testId?: string;
+}
+
+// @public (undocumented)
+type DimensionNames = 'bannerHeight' | 'leftPanelWidth' | 'leftSidebarFlyoutWidth' | 'leftSidebarWidth' | 'rightPanelWidth' | 'rightSidebarWidth' | 'topNavigationHeight';
+
+// @public (undocumented)
+export type Dimensions = Partial<Record<DimensionNames, number>>;
+
+// @public (undocumented)
+export const LEFT_PANEL_WIDTH: string;
+
+// @public (undocumented)
+export const LEFT_SIDEBAR_WIDTH: string;
+
+// @public
+export const LeftPanel: (props: SlotWidthProps) => jsx.JSX.Element;
+
+// @public
+export const LeftSidebar: (props: LeftSidebarProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+interface LeftSidebarProps extends SlotWidthProps {
+    collapsedState?: 'collapsed' | 'expanded';
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    onFlyoutCollapse?: () => void;
+    onFlyoutExpand?: () => void;
+    onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
+    onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
+    overrides?: {
+        ResizeButton?: {
+            render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
+        };
+    };
+    resizeButtonLabel?: string;
+    resizeGrabAreaLabel?: string;
+    testId?: string;
+    width?: number;
+}
+
+// @public (undocumented)
+export type LeftSidebarState = {
+    isFlyoutOpen: boolean;
+    isResizing: boolean;
+    isLeftSidebarCollapsed: boolean;
+    leftSidebarWidth: number;
+    lastLeftSidebarWidth: number;
+    flyoutLockCount: number;
+    isFixed: boolean;
+};
+
+// @public
+export const LeftSidebarWithoutResize: (props: SlotWidthProps) => jsx.JSX.Element;
+
+// @public
+export const Main: (props: SlotWidthProps) => jsx.JSX.Element;
+
+// @public
+export const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+interface PageLayoutProps extends SidebarResizeControllerProps {
+    // (undocumented)
+    skipLinksLabel?: string;
+    testId?: string;
+}
+
+// @public (undocumented)
+type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    isLeftSidebarCollapsed: boolean;
+    label: string;
+    testId?: string;
+};
+
+// @public (undocumented)
+export const RIGHT_PANEL_WIDTH: string;
+
+// @public (undocumented)
+export const RIGHT_SIDEBAR_WIDTH: string;
+
+// @public
+export const RightPanel: (props: SlotWidthProps) => jsx.JSX.Element;
+
+// @public
+export const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+type SidebarResizeControllerProps = {
+    children: ReactNode;
+    onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
+    onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
+};
+
+// @public (undocumented)
+type SkipLinkData = {
+    id: string;
+    skipLinkTitle: string;
+    listIndex?: number;
+};
+
+// @public (undocumented)
+export interface SlotHeightProps extends SlotProps {
+    height?: number;
+    shouldPersistHeight?: boolean;
+}
+
+// @public (undocumented)
+interface SlotProps {
+    children: ReactNode;
+    // (undocumented)
+    id?: string;
+    isFixed?: boolean;
+    // (undocumented)
+    skipLinkTitle?: string;
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface SlotWidthProps extends SlotProps {
+    shouldPersistWidth?: boolean;
+    width?: number;
+}
+
+// @public (undocumented)
+export const TOP_NAVIGATION_HEIGHT: string;
+
+// @public
+export const TopNavigation: (props: SlotHeightProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export const useCustomSkipLink: (id: SkipLinkData['id'], skipLinkTitle: SkipLinkData['skipLinkTitle'], listIndex?: SkipLinkData['listIndex']) => void;
+
+// @public
+export const useLeftSidebarFlyoutLock: () => void;
+
+// @public (undocumented)
+export const usePageLayoutResize: () => {
+    isLeftSidebarCollapsed: boolean;
+    expandLeftSidebar: () => void;
+    collapseLeftSidebar: (event?: KeyboardEvent_2 | MouseEvent_2, collapseWithoutTransition?: boolean) => void;
+    toggleLeftSidebar: (event?: KeyboardEvent_2 | MouseEvent_2, collapseWithoutTransition?: boolean) => void;
+    leftSidebarState: LeftSidebarState;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```