@atlaskit/page-layout 1.7.1 → 1.7.3

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 (15) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/es2019/components/resize-control/resize-button.js +2 -2
  4. package/dist/es2019/components/slots/internal/left-sidebar-inner.js +3 -3
  5. package/dist/es2019/components/slots/internal/left-sidebar-outer.js +3 -3
  6. package/dist/es2019/components/slots/page-layout.js +2 -2
  7. package/dist/es2019/components/slots/slot-dimensions.js +2 -2
  8. package/dist/es2019/version.json +1 -1
  9. package/dist/esm/components/resize-control/resize-button.js +2 -2
  10. package/dist/esm/components/slots/internal/left-sidebar-inner.js +3 -3
  11. package/dist/esm/components/slots/internal/left-sidebar-outer.js +3 -3
  12. package/dist/esm/components/slots/page-layout.js +2 -2
  13. package/dist/esm/components/slots/slot-dimensions.js +2 -2
  14. package/dist/esm/version.json +1 -1
  15. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/page-layout
2
2
 
3
+ ## 1.7.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.7.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`37131e3a8ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37131e3a8ea) - Uses the Alpha release of our responsive media helpers via either the public `media` export or the internal `UNSAFE_media` export.
14
+ - Updated dependencies
15
+
3
16
  ## 1.7.1
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "1.7.1",
3
+ "version": "1.7.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/resize-control/resize-button.js CHANGED
@@ -6,7 +6,7 @@ import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
6
6
  import { easeOut } from '@atlaskit/motion/curves';
7
7
  import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
8
8
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
9
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
10
10
  import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
11
11
  import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
12
12
  const increaseHitAreaStyles = css({
@@ -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 @repo/internal/styles/no-nested-styles
23
- [media.below.md]: {
23
+ [UNSAFE_media.below.md]: {
24
24
  opacity: 1
25
25
  }
26
26
  }) : undefined;
package/dist/es2019/components/slots/internal/left-sidebar-inner.js CHANGED
@@ -3,7 +3,7 @@
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
5
5
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
6
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
7
7
  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';
8
8
  import { useIsSidebarDragging } from '../../../common/hooks';
9
9
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -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 @repo/internal/styles/no-nested-styles
15
- [media.below.md]: {
15
+ [UNSAFE_media.below.md]: {
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-spacing
@@ -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 @repo/internal/styles/no-nested-styles
30
- [media.below.md]: {
30
+ [UNSAFE_media.below.md]: {
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
@@ -4,7 +4,7 @@ import { forwardRef, useContext } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
6
6
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
7
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
8
8
  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';
9
9
  import { useIsSidebarDragging } from '../../../common/hooks';
10
10
  import { getPageLayoutSlotSelector } from '../../../common/utils';
@@ -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 @repo/internal/styles/no-nested-styles
19
- [media.below.md]: {
19
+ [UNSAFE_media.below.md]: {
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 @repo/internal/styles/no-nested-styles
35
- [media.below.md]: {
35
+ [UNSAFE_media.below.md]: {
36
36
  cursor: 'revert'
37
37
  }
38
38
  }) : undefined;
package/dist/es2019/components/slots/page-layout.js CHANGED
@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import { Fragment } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
6
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
7
7
  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';
8
8
  import { SidebarResizeController, SkipLinksController } from '../../controllers';
9
9
  import { SkipLinkWrapper } from '../skip-links';
@@ -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 @repo/internal/styles/no-nested-styles
35
- [media.below.md]: {
35
+ [UNSAFE_media.below.md]: {
36
36
  gridTemplateAreas: gridTemplateAreasMobile,
37
37
  gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`
38
38
  }
package/dist/es2019/components/slots/slot-dimensions.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
3
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
3
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
4
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 && `${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.md} { :root{--${variableName}:${mobileValue}px;} }`));
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "1.7.1",
3
+ "version": "1.7.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/resize-control/resize-button.js CHANGED
@@ -9,7 +9,7 @@ import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
9
9
  import { easeOut } from '@atlaskit/motion/curves';
10
10
  import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
11
11
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
12
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
13
13
  import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
14
14
  import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
15
15
  var increaseHitAreaStyles = css({
@@ -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({}, media.below.md, {
24
+ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
25
25
  opacity: 1
26
26
  })) : undefined;
27
27
  var resizeIconButtonStyles = css({
package/dist/esm/components/slots/internal/left-sidebar-inner.js CHANGED
@@ -4,14 +4,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
6
6
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
7
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
8
8
  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';
9
9
  import { useIsSidebarDragging } from '../../../common/hooks';
10
10
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
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({}, media.below.md, {
14
+ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
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-spacing
@@ -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({}, media.below.md, {
26
+ var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
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
@@ -5,7 +5,7 @@ import { forwardRef, useContext } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
7
7
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
8
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
9
9
  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';
10
10
  import { useIsSidebarDragging } from '../../../common/hooks';
11
11
  import { getPageLayoutSlotSelector } from '../../../common/utils';
@@ -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({}, media.below.md, {
18
+ var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
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({}, media.below.md, {
31
+ var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
32
32
  cursor: 'revert'
33
33
  })) : undefined;
34
34
  var outerStyles = css({
package/dist/esm/components/slots/page-layout.js CHANGED
@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import { Fragment } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
7
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
8
8
  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';
9
9
  import { SidebarResizeController, SkipLinksController } from '../../controllers';
10
10
  import { SkipLinkWrapper } from '../skip-links';
@@ -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({}, media.below.md, {
24
+ var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, UNSAFE_media.below.md, {
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
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
3
- import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
3
+ import { UNSAFE_media } from '@atlaskit/primitives/responsive';
4
4
  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(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.md, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
9
9
  });
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "1.7.1",
3
+ "version": "1.7.3",
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.1",
3
+ "version": "1.7.3",
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/"
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/icon": "^21.12.0",
38
38
  "@atlaskit/motion": "^1.4.0",
39
39
  "@atlaskit/platform-feature-flags": "^0.2.0",
40
- "@atlaskit/primitives": "^0.12.4",
40
+ "@atlaskit/primitives": "^0.14.0",
41
41
  "@atlaskit/theme": "^12.5.0",
42
42
  "@atlaskit/tokens": "^1.9.0",
43
43
  "@babel/runtime": "^7.0.0",
@@ -57,10 +57,10 @@
57
57
  "@atlaskit/drawer": "^7.5.0",
58
58
  "@atlaskit/icon": "*",
59
59
  "@atlaskit/logo": "^13.14.0",
60
- "@atlaskit/menu": "^1.7.0",
60
+ "@atlaskit/menu": "^1.8.0",
61
61
  "@atlaskit/notification-indicator": "^9.1.0",
62
62
  "@atlaskit/notification-log-client": "^6.1.0",
63
- "@atlaskit/popup": "^1.7.0",
63
+ "@atlaskit/popup": "^1.8.0",
64
64
  "@atlaskit/section-message": "^6.4.0",
65
65
  "@atlaskit/side-navigation": "^1.8.0",
66
66
  "@atlaskit/ssr": "*",