@atlaskit/page-layout 1.7.9 → 1.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/resize-control/index.js +1 -1
  3. package/dist/cjs/components/resize-control/resize-button.js +1 -1
  4. package/dist/cjs/components/slots/internal/left-sidebar-inner.js +2 -2
  5. package/dist/cjs/components/slots/internal/left-sidebar-outer.js +2 -2
  6. package/dist/cjs/components/slots/left-sidebar.js +2 -2
  7. package/dist/cjs/components/slots/page-layout.js +1 -1
  8. package/dist/cjs/components/slots/slot-dimensions.js +1 -1
  9. package/dist/cjs/controllers/sidebar-resize-controller.js +1 -1
  10. package/dist/cjs/version.json +1 -1
  11. package/dist/es2019/components/resize-control/index.js +1 -1
  12. package/dist/es2019/components/resize-control/resize-button.js +1 -1
  13. package/dist/es2019/components/slots/internal/left-sidebar-inner.js +2 -2
  14. package/dist/es2019/components/slots/internal/left-sidebar-outer.js +2 -2
  15. package/dist/es2019/components/slots/left-sidebar.js +2 -2
  16. package/dist/es2019/components/slots/page-layout.js +1 -1
  17. package/dist/es2019/components/slots/slot-dimensions.js +1 -1
  18. package/dist/es2019/controllers/sidebar-resize-controller.js +1 -1
  19. package/dist/es2019/version.json +1 -1
  20. package/dist/esm/components/resize-control/index.js +1 -1
  21. package/dist/esm/components/resize-control/resize-button.js +1 -1
  22. package/dist/esm/components/slots/internal/left-sidebar-inner.js +2 -2
  23. package/dist/esm/components/slots/internal/left-sidebar-outer.js +2 -2
  24. package/dist/esm/components/slots/left-sidebar.js +2 -2
  25. package/dist/esm/components/slots/page-layout.js +1 -1
  26. package/dist/esm/components/slots/slot-dimensions.js +1 -1
  27. package/dist/esm/controllers/sidebar-resize-controller.js +1 -1
  28. package/dist/esm/version.json +1 -1
  29. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/page-layout
2
2
 
3
+ ## 1.7.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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).
8
+
3
9
  ## 1.7.9
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/resize-control/index.js CHANGED
@@ -87,7 +87,7 @@ var ResizeControl = function ResizeControl(_ref) {
87
87
  var unbindEvents = (0, _react.useRef)(null);
88
88
  var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
89
89
  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
90
- (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
90
+ (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
91
91
 
92
92
  // Used in some cases to ensure function references don't have to change
93
93
  // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
package/dist/cjs/components/resize-control/resize-button.js CHANGED
@@ -27,7 +27,7 @@ var increaseHitAreaStyles = (0, _react.css)({
27
27
  });
28
28
 
29
29
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
30
- 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, {
30
+ 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, {
31
31
  opacity: 1
32
32
  })) : undefined;
33
33
  var resizeIconButtonStyles = (0, _react.css)({
package/dist/cjs/components/slots/internal/left-sidebar-inner.js CHANGED
@@ -18,7 +18,7 @@ var _hooks = require("../../../common/hooks");
18
18
  var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
19
19
 
20
20
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
21
- 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, {
21
+ 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, {
22
22
  width: "".concat(_constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
23
23
  position: 'fixed',
24
24
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -30,7 +30,7 @@ var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-syst
30
30
  })) : undefined;
31
31
 
32
32
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
33
- 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, {
33
+ 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, {
34
34
  width: "min(90vw, ".concat(_constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
35
35
  maxWidth: _constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
36
36
  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 CHANGED
@@ -23,7 +23,7 @@ var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
23
23
  var prefersReducedMotionStyles = (0, _react2.css)((0, _motion.prefersReducedMotion)());
24
24
 
25
25
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
26
- 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, {
26
+ 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, {
27
27
  width: _constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
28
28
  cursor: 'pointer',
29
29
  opacity: 1,
@@ -36,7 +36,7 @@ var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-syst
36
36
  })) : undefined;
37
37
 
38
38
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
39
- 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, {
39
+ 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, {
40
40
  cursor: 'revert'
41
41
  })) : undefined;
42
42
  var outerStyles = (0, _react2.css)({
package/dist/cjs/components/slots/left-sidebar.js CHANGED
@@ -229,7 +229,7 @@ var LeftSidebar = function LeftSidebar(props) {
229
229
  };
230
230
  var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
231
231
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
232
- (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
232
+ (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
233
233
  var openMobileFlyout = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
234
234
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
235
235
  (0, _react.useCallback)(function () {
@@ -264,7 +264,7 @@ var LeftSidebar = function LeftSidebar(props) {
264
264
  }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
265
265
  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
266
266
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
267
- (0, _responsive.UNSAFE_useMediaQuery)('below.md', function (event) {
267
+ (0, _responsive.UNSAFE_useMediaQuery)('below.sm', function (event) {
268
268
  setLeftSidebarState(function (current) {
269
269
  if (event.matches && !current.isLeftSidebarCollapsed) {
270
270
  // 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 CHANGED
@@ -29,7 +29,7 @@ var gridStyles = (0, _react2.css)({
29
29
  });
30
30
 
31
31
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
32
- 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, {
32
+ 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, {
33
33
  gridTemplateAreas: gridTemplateAreasMobile,
34
34
  gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
35
35
  })) : undefined;
package/dist/cjs/components/slots/slot-dimensions.js CHANGED
@@ -12,6 +12,6 @@ var _default = function _default(_ref) {
12
12
  var variableName = _ref.variableName,
13
13
  value = _ref.value,
14
14
  mobileValue = _ref.mobileValue;
15
- 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;} }"));
15
+ 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;} }"));
16
16
  };
17
17
  exports.default = _default;
package/dist/cjs/controllers/sidebar-resize-controller.js CHANGED
@@ -65,7 +65,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
65
65
  var transition = (0, _react.useRef)(null);
66
66
  var mobileMediaQuery = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
67
67
  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
68
- (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
68
+ (0, _responsive.UNSAFE_useMediaQuery)('below.sm') : null;
69
69
  var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
70
70
  var expandLeftSidebar = (0, _react.useCallback)(function () {
71
71
  var _transition$current2, _transition$current3;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "1.7.9",
3
+ "version": "1.7.10",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/resize-control/index.js CHANGED
@@ -80,7 +80,7 @@ const ResizeControl = ({
80
80
  const unbindEvents = useRef(null);
81
81
  const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
82
82
  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
83
- useMediaQuery('below.md') : null;
83
+ useMediaQuery('below.sm') : null;
84
84
 
85
85
  // Used in some cases to ensure function references don't have to change
86
86
  // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
package/dist/es2019/components/resize-control/resize-button.js CHANGED
@@ -20,7 +20,7 @@ const increaseHitAreaStyles = css({
20
20
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
21
21
  const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
22
22
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
23
- [UNSAFE_media.below.md]: {
23
+ [UNSAFE_media.below.sm]: {
24
24
  opacity: 1
25
25
  }
26
26
  }) : undefined;
package/dist/es2019/components/slots/internal/left-sidebar-inner.js CHANGED
@@ -12,7 +12,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
12
12
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
13
13
  const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
14
14
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
15
- [UNSAFE_media.below.md]: {
15
+ [UNSAFE_media.below.sm]: {
16
16
  width: `${MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH}px`,
17
17
  position: 'fixed',
18
18
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -27,7 +27,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
27
27
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
28
28
  const mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
29
29
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
30
- [UNSAFE_media.below.md]: {
30
+ [UNSAFE_media.below.sm]: {
31
31
  width: `min(90vw, ${MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH}px)`,
32
32
  maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
33
33
  transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s, box-shadow ${TRANSITION_DURATION}ms ${easeOut} 0s`
package/dist/es2019/components/slots/internal/left-sidebar-outer.js CHANGED
@@ -16,7 +16,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
16
16
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
17
17
  const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
18
18
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
19
- [UNSAFE_media.below.md]: {
19
+ [UNSAFE_media.below.sm]: {
20
20
  width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
21
21
  cursor: 'pointer',
22
22
  opacity: 1,
@@ -32,7 +32,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
32
32
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
33
33
  const mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
34
34
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
35
- [UNSAFE_media.below.md]: {
35
+ [UNSAFE_media.below.sm]: {
36
36
  cursor: 'revert'
37
37
  }
38
38
  }) : undefined;
package/dist/es2019/components/slots/left-sidebar.js CHANGED
@@ -224,7 +224,7 @@ const LeftSidebar = props => {
224
224
  };
225
225
  const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
226
226
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
227
- useMediaQuery('below.md') : null;
227
+ useMediaQuery('below.sm') : null;
228
228
  const openMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
229
229
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
230
230
  useCallback(() => {
@@ -261,7 +261,7 @@ const LeftSidebar = props => {
261
261
  }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
262
262
  if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
263
263
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
264
- useMediaQuery('below.md', event => {
264
+ useMediaQuery('below.sm', event => {
265
265
  setLeftSidebarState(current => {
266
266
  if (event.matches && !current.isLeftSidebarCollapsed) {
267
267
  // 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 CHANGED
@@ -32,7 +32,7 @@ const gridStyles = css({
32
32
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
33
33
  const gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
34
34
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
35
- [UNSAFE_media.below.md]: {
35
+ [UNSAFE_media.below.sm]: {
36
36
  gridTemplateAreas: gridTemplateAreasMobile,
37
37
  gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`
38
38
  }
package/dist/es2019/components/slots/slot-dimensions.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  variableName,
6
6
  value,
7
7
  mobileValue
8
- }) => /*#__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;} }`));
8
+ }) => /*#__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 CHANGED
@@ -52,7 +52,7 @@ export const SidebarResizeController = ({
52
52
  const transition = useRef(null);
53
53
  const mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
54
54
  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
55
- useMediaQuery('below.md') : null;
55
+ useMediaQuery('below.sm') : null;
56
56
  const isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
57
57
  const expandLeftSidebar = useCallback(() => {
58
58
  var _transition$current2, _transition$current3;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "1.7.9",
3
+ "version": "1.7.10",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/resize-control/index.js CHANGED
@@ -83,7 +83,7 @@ var ResizeControl = function ResizeControl(_ref) {
83
83
  var unbindEvents = useRef(null);
84
84
  var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
85
85
  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
86
- useMediaQuery('below.md') : null;
86
+ useMediaQuery('below.sm') : null;
87
87
 
88
88
  // Used in some cases to ensure function references don't have to change
89
89
  // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
package/dist/esm/components/resize-control/resize-button.js CHANGED
@@ -21,7 +21,7 @@ var increaseHitAreaStyles = css({
21
21
  });
22
22
 
23
23
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
24
- var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
24
+ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
25
25
  opacity: 1
26
26
  })) : undefined;
27
27
  var resizeIconButtonStyles = css({
package/dist/esm/components/slots/internal/left-sidebar-inner.js CHANGED
@@ -11,7 +11,7 @@ import { useIsSidebarDragging } from '../../../common/hooks';
11
11
  var prefersReducedMotionStyles = css(prefersReducedMotion());
12
12
 
13
13
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
14
- var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
14
+ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
15
15
  width: "".concat(MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
16
16
  position: 'fixed',
17
17
  // 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
23
23
  })) : undefined;
24
24
 
25
25
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
26
- var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
26
+ var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
27
27
  width: "min(90vw, ".concat(MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
28
28
  maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
29
29
  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 CHANGED
@@ -15,7 +15,7 @@ import SlotFocusRing from './slot-focus-ring';
15
15
  var prefersReducedMotionStyles = css(prefersReducedMotion());
16
16
 
17
17
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
18
- var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
18
+ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
19
19
  width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
20
20
  cursor: 'pointer',
21
21
  opacity: 1,
@@ -28,7 +28,7 @@ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-lay
28
28
  })) : undefined;
29
29
 
30
30
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
31
- var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
31
+ var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
32
32
  cursor: 'revert'
33
33
  })) : undefined;
34
34
  var outerStyles = css({
package/dist/esm/components/slots/left-sidebar.js CHANGED
@@ -225,7 +225,7 @@ var LeftSidebar = function LeftSidebar(props) {
225
225
  };
226
226
  var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
227
227
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
228
- useMediaQuery('below.md') : null;
228
+ useMediaQuery('below.sm') : null;
229
229
  var openMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
230
230
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
231
231
  useCallback(function () {
@@ -260,7 +260,7 @@ var LeftSidebar = function LeftSidebar(props) {
260
260
  }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
261
261
  if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
262
262
  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
263
- useMediaQuery('below.md', function (event) {
263
+ useMediaQuery('below.sm', function (event) {
264
264
  setLeftSidebarState(function (current) {
265
265
  if (event.matches && !current.isLeftSidebarCollapsed) {
266
266
  // 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 CHANGED
@@ -21,7 +21,7 @@ var gridStyles = css({
21
21
  });
22
22
 
23
23
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
24
- var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
24
+ var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.sm, {
25
25
  gridTemplateAreas: gridTemplateAreasMobile,
26
26
  gridTemplateColumns: "".concat(LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
27
27
  })) : undefined;
package/dist/esm/components/slots/slot-dimensions.js CHANGED
@@ -5,5 +5,5 @@ export default (function (_ref) {
5
5
  var variableName = _ref.variableName,
6
6
  value = _ref.value,
7
7
  mobileValue = _ref.mobileValue;
8
- 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;} }"));
8
+ 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;} }"));
9
9
  });
package/dist/esm/controllers/sidebar-resize-controller.js CHANGED
@@ -55,7 +55,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
55
55
  var transition = useRef(null);
56
56
  var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
57
57
  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
58
- useMediaQuery('below.md') : null;
58
+ useMediaQuery('below.sm') : null;
59
59
  var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
60
60
  var expandLeftSidebar = useCallback(function () {
61
61
  var _transition$current2, _transition$current3;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "1.7.9",
3
+ "version": "1.7.10",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "1.7.9",
3
+ "version": "1.7.10",
4
4
  "description": "A collection of components which let you compose an application's page layout.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
58
58
  "@atlaskit/menu": "^1.9.0",
59
59
  "@atlaskit/notification-indicator": "^9.1.0",
60
60
  "@atlaskit/notification-log-client": "^6.1.0",
61
- "@atlaskit/popup": "^1.8.0",
61
+ "@atlaskit/popup": "^1.9.0",
62
62
  "@atlaskit/side-navigation": "^1.10.0",
63
63
  "@atlaskit/ssr": "*",
64
64
  "@atlaskit/tooltip": "*",