@atlaskit/primitives 1.13.1 → 1.14.0

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 (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/responsive/media-helper.js +27 -83
  3. package/dist/es2019/responsive/media-helper.js +27 -84
  4. package/dist/esm/responsive/media-helper.js +27 -84
  5. package/dist/types/responsive/media-helper.d.ts +35 -58
  6. package/dist/types-ts4.5/responsive/media-helper.d.ts +35 -58
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 1.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#58048](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58048) [`cc9e9495e995`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cc9e9495e995) - Export `media.only` and `media.below` for Compiled CSS-in-JS support.
8
+
3
9
  ## 1.13.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/responsive/media-helper.js CHANGED
@@ -4,91 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.media = exports.UNSAFE_media = void 0;
7
- var _constants = require("./constants");
8
7
  /**
9
8
  * This is an object of usable media query helpers using our internal breakpoints configuration.
10
9
  *
11
- * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
12
- */
13
- var UNSAFE_media = exports.UNSAFE_media = {
14
- /**
15
- * A media query to target viewports above the min width of a given breakpoint.
16
- * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
17
- */
18
- above: {
19
- /**
20
- * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
21
- */
22
- xxs: "@media all",
23
- /**
24
- * Used for mobile viewports.
25
- */
26
- xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
27
- /**
28
- * Used for tablet viewports.
29
- */
30
- sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
31
- /**
32
- * Used for laptop viewports.
33
- */
34
- md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
35
- /**
36
- * Used for desktop viewports.
37
- */
38
- lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
39
- /**
40
- * Used for wide screen desktop viewports.
41
- */
42
- xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
43
- },
44
- /**
45
- * A media query to target viewports below the min width of a given breakpoint. We do this by testing the inverse, eg. below = not above…
46
- *
47
- * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
48
- *
49
- * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
50
- * This is well describe in this: @see https://stackoverflow.com/a/13649011
51
- *
52
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
53
- *
54
- * @internal Not intended to be used outside of DST at this stage.
55
- * @experimental Not intended to be used outside of DST at this stage.
56
- */
57
- below: {
58
- xs: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
59
- sm: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
60
- md: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
61
- lg: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
62
- xl: "@media not all and (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
63
- },
64
- /**
65
- * A media query to target viewports exactly between the min and max of a given breakpoint.
66
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
67
- *
68
- * @internal Not intended to be used outside of DST at this stage.
69
- * @experimental Not intended to be used outside of DST at this stage.
70
- */
71
- only: {
72
- xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.max, ")"),
73
- xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.max, ")"),
74
- sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.max, ")"),
75
- md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.max, ")"),
76
- lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.max, ")"),
77
- xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
78
- }
79
- };
80
-
81
- /**
82
- * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
83
- * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
84
- * object that Compiled parses easily.
85
- * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
86
- */
87
-
88
- /**
89
- * This is an object of usable media query helpers using our internal breakpoints configuration.
90
- *
91
- * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
10
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
11
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
12
+ * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
13
+ * Instead, make sure that only one breakpoint can take effect at a time,
14
+ * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
15
+ * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
92
16
  */
93
17
  var media = exports.media = {
94
18
  above: {
@@ -98,5 +22,25 @@ var media = exports.media = {
98
22
  md: '@media (min-width: 64rem)',
99
23
  lg: '@media (min-width: 90rem)',
100
24
  xl: '@media (min-width: 110rem)'
25
+ },
26
+ only: {
27
+ xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
28
+ xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
29
+ sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
30
+ md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
31
+ lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
32
+ xl: '@media (min-width: 110rem)'
33
+ },
34
+ below: {
35
+ xs: '@media not all and (min-width: 30rem)',
36
+ sm: '@media not all and (min-width: 48rem)',
37
+ md: '@media not all and (min-width: 64rem)',
38
+ lg: '@media not all and (min-width: 90rem)',
39
+ xl: '@media not all and (min-width: 110rem)'
101
40
  }
102
- };
41
+ };
42
+
43
+ /**
44
+ * Keep `UNSAFE_media` for backwards compatibility.
45
+ */
46
+ var UNSAFE_media = exports.UNSAFE_media = media;
package/dist/es2019/responsive/media-helper.js CHANGED
@@ -1,89 +1,12 @@
1
- import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
2
-
3
1
  /**
4
2
  * This is an object of usable media query helpers using our internal breakpoints configuration.
5
3
  *
6
- * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
7
- */
8
- export const UNSAFE_media = {
9
- /**
10
- * A media query to target viewports above the min width of a given breakpoint.
11
- * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
12
- */
13
- above: {
14
- /**
15
- * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
16
- */
17
- xxs: `@media all`,
18
- /**
19
- * Used for mobile viewports.
20
- */
21
- xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min})`,
22
- /**
23
- * Used for tablet viewports.
24
- */
25
- sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min})`,
26
- /**
27
- * Used for laptop viewports.
28
- */
29
- md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min})`,
30
- /**
31
- * Used for desktop viewports.
32
- */
33
- lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min})`,
34
- /**
35
- * Used for wide screen desktop viewports.
36
- */
37
- xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min})`
38
- },
39
- /**
40
- * A media query to target viewports below the min width of a given breakpoint. We do this by testing the inverse, eg. below = not above…
41
- *
42
- * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
43
- *
44
- * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
45
- * This is well describe in this: @see https://stackoverflow.com/a/13649011
46
- *
47
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
48
- *
49
- * @internal Not intended to be used outside of DST at this stage.
50
- * @experimental Not intended to be used outside of DST at this stage.
51
- */
52
- below: {
53
- xs: `@media not all and (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min})`,
54
- sm: `@media not all and (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min})`,
55
- md: `@media not all and (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min})`,
56
- lg: `@media not all and (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min})`,
57
- xl: `@media not all and (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min})`
58
- },
59
- /**
60
- * A media query to target viewports exactly between the min and max of a given breakpoint.
61
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
62
- *
63
- * @internal Not intended to be used outside of DST at this stage.
64
- * @experimental Not intended to be used outside of DST at this stage.
65
- */
66
- only: {
67
- xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.max})`,
68
- xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.max})`,
69
- sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.max})`,
70
- md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.max})`,
71
- lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.max})`,
72
- xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min})`
73
- }
74
- };
75
-
76
- /**
77
- * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
78
- * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
79
- * object that Compiled parses easily.
80
- * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
81
- */
82
-
83
- /**
84
- * This is an object of usable media query helpers using our internal breakpoints configuration.
85
- *
86
- * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
4
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
5
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
6
+ * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
7
+ * Instead, make sure that only one breakpoint can take effect at a time,
8
+ * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
9
+ * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
87
10
  */
88
11
  export const media = {
89
12
  above: {
@@ -93,5 +16,25 @@ export const media = {
93
16
  md: '@media (min-width: 64rem)',
94
17
  lg: '@media (min-width: 90rem)',
95
18
  xl: '@media (min-width: 110rem)'
19
+ },
20
+ only: {
21
+ xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
22
+ xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
23
+ sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
24
+ md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
25
+ lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
26
+ xl: '@media (min-width: 110rem)'
27
+ },
28
+ below: {
29
+ xs: '@media not all and (min-width: 30rem)',
30
+ sm: '@media not all and (min-width: 48rem)',
31
+ md: '@media not all and (min-width: 64rem)',
32
+ lg: '@media not all and (min-width: 90rem)',
33
+ xl: '@media not all and (min-width: 110rem)'
96
34
  }
97
- };
35
+ };
36
+
37
+ /**
38
+ * Keep `UNSAFE_media` for backwards compatibility.
39
+ */
40
+ export const UNSAFE_media = media;
package/dist/esm/responsive/media-helper.js CHANGED
@@ -1,89 +1,12 @@
1
- import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
2
-
3
1
  /**
4
2
  * This is an object of usable media query helpers using our internal breakpoints configuration.
5
3
  *
6
- * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
7
- */
8
- export var UNSAFE_media = {
9
- /**
10
- * A media query to target viewports above the min width of a given breakpoint.
11
- * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
12
- */
13
- above: {
14
- /**
15
- * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
16
- */
17
- xxs: "@media all",
18
- /**
19
- * Used for mobile viewports.
20
- */
21
- xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
22
- /**
23
- * Used for tablet viewports.
24
- */
25
- sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
26
- /**
27
- * Used for laptop viewports.
28
- */
29
- md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
30
- /**
31
- * Used for desktop viewports.
32
- */
33
- lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
34
- /**
35
- * Used for wide screen desktop viewports.
36
- */
37
- xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
38
- },
39
- /**
40
- * A media query to target viewports below the min width of a given breakpoint. We do this by testing the inverse, eg. below = not above…
41
- *
42
- * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
43
- *
44
- * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
45
- * This is well describe in this: @see https://stackoverflow.com/a/13649011
46
- *
47
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
48
- *
49
- * @internal Not intended to be used outside of DST at this stage.
50
- * @experimental Not intended to be used outside of DST at this stage.
51
- */
52
- below: {
53
- xs: "@media not all and (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
54
- sm: "@media not all and (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
55
- md: "@media not all and (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
56
- lg: "@media not all and (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
57
- xl: "@media not all and (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
58
- },
59
- /**
60
- * A media query to target viewports exactly between the min and max of a given breakpoint.
61
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
62
- *
63
- * @internal Not intended to be used outside of DST at this stage.
64
- * @experimental Not intended to be used outside of DST at this stage.
65
- */
66
- only: {
67
- xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.max, ")"),
68
- xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xs.max, ")"),
69
- sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.sm.max, ")"),
70
- md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.md.max, ")"),
71
- lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.lg.max, ")"),
72
- xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
73
- }
74
- };
75
-
76
- /**
77
- * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
78
- * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
79
- * object that Compiled parses easily.
80
- * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
81
- */
82
-
83
- /**
84
- * This is an object of usable media query helpers using our internal breakpoints configuration.
85
- *
86
- * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
4
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
5
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
6
+ * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
7
+ * Instead, make sure that only one breakpoint can take effect at a time,
8
+ * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
9
+ * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
87
10
  */
88
11
  export var media = {
89
12
  above: {
@@ -93,5 +16,25 @@ export var media = {
93
16
  md: '@media (min-width: 64rem)',
94
17
  lg: '@media (min-width: 90rem)',
95
18
  xl: '@media (min-width: 110rem)'
19
+ },
20
+ only: {
21
+ xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
22
+ xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
23
+ sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
24
+ md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
25
+ lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
26
+ xl: '@media (min-width: 110rem)'
27
+ },
28
+ below: {
29
+ xs: '@media not all and (min-width: 30rem)',
30
+ sm: '@media not all and (min-width: 48rem)',
31
+ md: '@media not all and (min-width: 64rem)',
32
+ lg: '@media not all and (min-width: 90rem)',
33
+ xl: '@media not all and (min-width: 110rem)'
96
34
  }
97
- };
35
+ };
36
+
37
+ /**
38
+ * Keep `UNSAFE_media` for backwards compatibility.
39
+ */
40
+ export var UNSAFE_media = media;
package/dist/types/responsive/media-helper.d.ts CHANGED
@@ -1,52 +1,30 @@
1
1
  /**
2
2
  * This is an object of usable media query helpers using our internal breakpoints configuration.
3
3
  *
4
- * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
4
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
5
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
6
+ * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
7
+ * Instead, make sure that only one breakpoint can take effect at a time,
8
+ * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
9
+ * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
5
10
  */
6
- export declare const UNSAFE_media: {
7
- /**
8
- * A media query to target viewports above the min width of a given breakpoint.
9
- * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
10
- */
11
+ export declare const media: {
11
12
  above: {
12
- /**
13
- * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
14
- */
15
13
  readonly xxs: "@media all";
16
- /**
17
- * Used for mobile viewports.
18
- */
19
14
  readonly xs: "@media (min-width: 30rem)";
20
- /**
21
- * Used for tablet viewports.
22
- */
23
15
  readonly sm: "@media (min-width: 48rem)";
24
- /**
25
- * Used for laptop viewports.
26
- */
27
16
  readonly md: "@media (min-width: 64rem)";
28
- /**
29
- * Used for desktop viewports.
30
- */
31
17
  readonly lg: "@media (min-width: 90rem)";
32
- /**
33
- * Used for wide screen desktop viewports.
34
- */
35
18
  readonly xl: "@media (min-width: 110rem)";
36
19
  };
37
- /**
38
- * A media query to target viewports below the min width of a given breakpoint. We do this by testing the inverse, eg. below = not above…
39
- *
40
- * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
41
- *
42
- * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
43
- * This is well describe in this: @see https://stackoverflow.com/a/13649011
44
- *
45
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
46
- *
47
- * @internal Not intended to be used outside of DST at this stage.
48
- * @experimental Not intended to be used outside of DST at this stage.
49
- */
20
+ only: {
21
+ readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
22
+ readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
23
+ readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
24
+ readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
25
+ readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
26
+ readonly xl: "@media (min-width: 110rem)";
27
+ };
50
28
  below: {
51
29
  readonly xs: "@media not all and (min-width: 30rem)";
52
30
  readonly sm: "@media not all and (min-width: 48rem)";
@@ -54,13 +32,19 @@ export declare const UNSAFE_media: {
54
32
  readonly lg: "@media not all and (min-width: 90rem)";
55
33
  readonly xl: "@media not all and (min-width: 110rem)";
56
34
  };
57
- /**
58
- * A media query to target viewports exactly between the min and max of a given breakpoint.
59
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
60
- *
61
- * @internal Not intended to be used outside of DST at this stage.
62
- * @experimental Not intended to be used outside of DST at this stage.
63
- */
35
+ };
36
+ /**
37
+ * Keep `UNSAFE_media` for backwards compatibility.
38
+ */
39
+ export declare const UNSAFE_media: {
40
+ above: {
41
+ readonly xxs: "@media all";
42
+ readonly xs: "@media (min-width: 30rem)";
43
+ readonly sm: "@media (min-width: 48rem)";
44
+ readonly md: "@media (min-width: 64rem)";
45
+ readonly lg: "@media (min-width: 90rem)";
46
+ readonly xl: "@media (min-width: 110rem)";
47
+ };
64
48
  only: {
65
49
  readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
66
50
  readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
@@ -69,18 +53,11 @@ export declare const UNSAFE_media: {
69
53
  readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
70
54
  readonly xl: "@media (min-width: 110rem)";
71
55
  };
56
+ below: {
57
+ readonly xs: "@media not all and (min-width: 30rem)";
58
+ readonly sm: "@media not all and (min-width: 48rem)";
59
+ readonly md: "@media not all and (min-width: 64rem)";
60
+ readonly lg: "@media not all and (min-width: 90rem)";
61
+ readonly xl: "@media not all and (min-width: 110rem)";
62
+ };
72
63
  };
73
- /**
74
- * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
75
- * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
76
- * object that Compiled parses easily.
77
- * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
78
- */
79
- type SafeMedia = Pick<typeof UNSAFE_media, 'above'>;
80
- /**
81
- * This is an object of usable media query helpers using our internal breakpoints configuration.
82
- *
83
- * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
84
- */
85
- export declare const media: SafeMedia;
86
- export {};
package/dist/types-ts4.5/responsive/media-helper.d.ts CHANGED
@@ -1,52 +1,30 @@
1
1
  /**
2
2
  * This is an object of usable media query helpers using our internal breakpoints configuration.
3
3
  *
4
- * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
4
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
5
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
6
+ * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
7
+ * Instead, make sure that only one breakpoint can take effect at a time,
8
+ * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
9
+ * For more details, please see https://compiledcssinjs.com/docs/atomic-css#selector-specificity
5
10
  */
6
- export declare const UNSAFE_media: {
7
- /**
8
- * A media query to target viewports above the min width of a given breakpoint.
9
- * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
10
- */
11
+ export declare const media: {
11
12
  above: {
12
- /**
13
- * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
14
- */
15
13
  readonly xxs: "@media all";
16
- /**
17
- * Used for mobile viewports.
18
- */
19
14
  readonly xs: "@media (min-width: 30rem)";
20
- /**
21
- * Used for tablet viewports.
22
- */
23
15
  readonly sm: "@media (min-width: 48rem)";
24
- /**
25
- * Used for laptop viewports.
26
- */
27
16
  readonly md: "@media (min-width: 64rem)";
28
- /**
29
- * Used for desktop viewports.
30
- */
31
17
  readonly lg: "@media (min-width: 90rem)";
32
- /**
33
- * Used for wide screen desktop viewports.
34
- */
35
18
  readonly xl: "@media (min-width: 110rem)";
36
19
  };
37
- /**
38
- * A media query to target viewports below the min width of a given breakpoint. We do this by testing the inverse, eg. below = not above…
39
- *
40
- * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
41
- *
42
- * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
43
- * This is well describe in this: @see https://stackoverflow.com/a/13649011
44
- *
45
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
46
- *
47
- * @internal Not intended to be used outside of DST at this stage.
48
- * @experimental Not intended to be used outside of DST at this stage.
49
- */
20
+ only: {
21
+ readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
22
+ readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
23
+ readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
24
+ readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
25
+ readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
26
+ readonly xl: "@media (min-width: 110rem)";
27
+ };
50
28
  below: {
51
29
  readonly xs: "@media not all and (min-width: 30rem)";
52
30
  readonly sm: "@media not all and (min-width: 48rem)";
@@ -54,13 +32,19 @@ export declare const UNSAFE_media: {
54
32
  readonly lg: "@media not all and (min-width: 90rem)";
55
33
  readonly xl: "@media not all and (min-width: 110rem)";
56
34
  };
57
- /**
58
- * A media query to target viewports exactly between the min and max of a given breakpoint.
59
- * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
60
- *
61
- * @internal Not intended to be used outside of DST at this stage.
62
- * @experimental Not intended to be used outside of DST at this stage.
63
- */
35
+ };
36
+ /**
37
+ * Keep `UNSAFE_media` for backwards compatibility.
38
+ */
39
+ export declare const UNSAFE_media: {
40
+ above: {
41
+ readonly xxs: "@media all";
42
+ readonly xs: "@media (min-width: 30rem)";
43
+ readonly sm: "@media (min-width: 48rem)";
44
+ readonly md: "@media (min-width: 64rem)";
45
+ readonly lg: "@media (min-width: 90rem)";
46
+ readonly xl: "@media (min-width: 110rem)";
47
+ };
64
48
  only: {
65
49
  readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
66
50
  readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
@@ -69,18 +53,11 @@ export declare const UNSAFE_media: {
69
53
  readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
70
54
  readonly xl: "@media (min-width: 110rem)";
71
55
  };
56
+ below: {
57
+ readonly xs: "@media not all and (min-width: 30rem)";
58
+ readonly sm: "@media not all and (min-width: 48rem)";
59
+ readonly md: "@media not all and (min-width: 64rem)";
60
+ readonly lg: "@media not all and (min-width: 90rem)";
61
+ readonly xl: "@media not all and (min-width: 110rem)";
62
+ };
72
63
  };
73
- /**
74
- * We needed to simplify the `media` export below to rely on less AST traversal so that Compiled could understand it.
75
- * This type provides the same guarantees as `const media = { above: UNSAFE_media.above }` would but allows it to be a simple
76
- * object that Compiled parses easily.
77
- * See https://product-fabric.atlassian.net/browse/DSP-13626 for more detail.
78
- */
79
- type SafeMedia = Pick<typeof UNSAFE_media, 'above'>;
80
- /**
81
- * This is an object of usable media query helpers using our internal breakpoints configuration.
82
- *
83
- * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
84
- */
85
- export declare const media: SafeMedia;
86
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "1.13.1",
3
+ "version": "1.14.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"