@atlaskit/primitives 0.12.2 → 0.12.4
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.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/helpers/responsive/index.js +8 -1
- package/dist/cjs/helpers/responsive/use-media-query.js +80 -0
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/xcss/style-maps.partial.js +15 -13
- package/dist/es2019/helpers/responsive/index.js +2 -1
- package/dist/es2019/helpers/responsive/use-media-query.js +73 -0
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/xcss/style-maps.partial.js +15 -13
- package/dist/esm/helpers/responsive/index.js +2 -1
- package/dist/esm/helpers/responsive/use-media-query.js +73 -0
- package/dist/esm/version.json +1 -1
- package/dist/esm/xcss/style-maps.partial.js +15 -13
- package/dist/types/helpers/responsive/index.d.ts +1 -0
- package/dist/types/helpers/responsive/use-media-query.d.ts +23 -0
- package/dist/types/xcss/style-maps.partial.d.ts +15 -13
- package/dist/types-ts4.5/helpers/responsive/index.d.ts +1 -0
- package/dist/types-ts4.5/helpers/responsive/use-media-query.d.ts +23 -0
- package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +15 -13
- package/package.json +5 -3
- package/report.api.md +11 -9
- package/scripts/border-codegen-template.tsx +3 -3
- package/tmp/api-report-tmp.d.ts +11 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 0.12.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`b2706220d22`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2706220d22) - Adds an experimental `UNSAFE_useMediaQuery` hook to utilize our media query breakpoints in JavaScript. This is not SSR-safe and will return `null` or perhaps incorrectly depending on your SSR environment.
|
|
8
|
+
|
|
9
|
+
## 0.12.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`79e94411a9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79e94411a9c) - Bump to account for regeneration of tokens artifacts.
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 0.12.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -33,6 +33,13 @@ Object.defineProperty(exports, "UNSAFE_media", {
|
|
|
33
33
|
return _mediaHelper.UNSAFE_media;
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
+
Object.defineProperty(exports, "UNSAFE_useMediaQuery", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function get() {
|
|
39
|
+
return _useMediaQuery.UNSAFE_useMediaQuery;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
36
42
|
var _mediaHelper = require("./media-helper");
|
|
37
43
|
var _buildMediaQueryCss = require("./build-media-query-css");
|
|
38
|
-
var _constants = require("./constants");
|
|
44
|
+
var _constants = require("./constants");
|
|
45
|
+
var _useMediaQuery = require("./use-media-query");
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.UNSAFE_useMediaQuery = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _bindEventListener = require("bind-event-listener");
|
|
9
|
+
var _mediaHelper = require("./media-helper");
|
|
10
|
+
var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia, _window12, _window12$matchMedia, _window13, _window13$matchMedia;
|
|
11
|
+
var queries = {
|
|
12
|
+
'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, _mediaHelper.UNSAFE_media.above.xxs.replace('@media ', '').trim()),
|
|
13
|
+
'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, _mediaHelper.UNSAFE_media.above.xs.replace('@media ', '').trim()),
|
|
14
|
+
'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, _mediaHelper.UNSAFE_media.above.sm.replace('@media ', '').trim()),
|
|
15
|
+
'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, _mediaHelper.UNSAFE_media.above.md.replace('@media ', '').trim()),
|
|
16
|
+
'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, _mediaHelper.UNSAFE_media.above.lg.replace('@media ', '').trim()),
|
|
17
|
+
'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, _mediaHelper.UNSAFE_media.above.xl.replace('@media ', '').trim()),
|
|
18
|
+
'above.xxl': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, _mediaHelper.UNSAFE_media.above.xxl.replace('@media ', '').trim()),
|
|
19
|
+
'below.xs': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, _mediaHelper.UNSAFE_media.below.xs.replace('@media ', '').trim()),
|
|
20
|
+
'below.sm': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, _mediaHelper.UNSAFE_media.below.sm.replace('@media ', '').trim()),
|
|
21
|
+
'below.md': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, _mediaHelper.UNSAFE_media.below.md.replace('@media ', '').trim()),
|
|
22
|
+
'below.lg': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, _mediaHelper.UNSAFE_media.below.lg.replace('@media ', '').trim()),
|
|
23
|
+
'below.xl': typeof window === 'undefined' ? undefined : (_window12 = window) === null || _window12 === void 0 ? void 0 : (_window12$matchMedia = _window12.matchMedia) === null || _window12$matchMedia === void 0 ? void 0 : _window12$matchMedia.call(_window12, _mediaHelper.UNSAFE_media.below.xl.replace('@media ', '').trim()),
|
|
24
|
+
'below.xxl': typeof window === 'undefined' ? undefined : (_window13 = window) === null || _window13 === void 0 ? void 0 : (_window13$matchMedia = _window13.matchMedia) === null || _window13$matchMedia === void 0 ? void 0 : _window13$matchMedia.call(_window13, _mediaHelper.UNSAFE_media.below.xxl.replace('@media ', '').trim())
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
|
|
29
|
+
*
|
|
30
|
+
* The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
|
|
31
|
+
*
|
|
32
|
+
* @important
|
|
33
|
+
* - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
|
|
34
|
+
* - `above.xxs` will always be truthy, your listener should never fire.
|
|
35
|
+
*
|
|
36
|
+
* @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
|
|
40
|
+
* const isMobile = mq?.matches;
|
|
41
|
+
*
|
|
42
|
+
* @returns
|
|
43
|
+
* - `MediaQueryList`, primarily used to get if that media query is currently
|
|
44
|
+
* - `null` when `matchMedia` is unavailable, eg. in SSR.
|
|
45
|
+
*/
|
|
46
|
+
var UNSAFE_useMediaQuery = function UNSAFE_useMediaQuery(queryString, listener) {
|
|
47
|
+
var listenerRef = (0, _react.useRef)(listener);
|
|
48
|
+
(0, _react.useEffect)(function () {
|
|
49
|
+
// Bind the listener if changed so it's called on the next change event; no guarantee on timing.
|
|
50
|
+
listenerRef.current = listener;
|
|
51
|
+
}, [listener]);
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* We explicitly only react to boolean changes for binding our listener
|
|
55
|
+
* Changes to the functional reference are ignored.
|
|
56
|
+
*/
|
|
57
|
+
var hasListener = !!listener;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* The `matchMedia(…)` return value for our breakpoint query.
|
|
61
|
+
*/
|
|
62
|
+
var mq = queries[queryString];
|
|
63
|
+
(0, _react.useLayoutEffect)(function () {
|
|
64
|
+
listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
|
|
65
|
+
if (!mq || !hasListener || !listenerRef.current) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
return (0, _bindEventListener.bind)(mq, {
|
|
69
|
+
type: 'change',
|
|
70
|
+
listener: function listener(event) {
|
|
71
|
+
// We explicitly call the current version of the function
|
|
72
|
+
return listenerRef.current(event);
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
},
|
|
76
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
|
|
77
|
+
[mq, hasListener]);
|
|
78
|
+
return mq || null;
|
|
79
|
+
};
|
|
80
|
+
exports.UNSAFE_useMediaQuery = UNSAFE_useMediaQuery;
|
package/dist/cjs/version.json
CHANGED
|
@@ -60,11 +60,11 @@ exports.spaceMap = spaceMap;
|
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
62
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
63
|
-
* @codegen <<SignedSource::
|
|
63
|
+
* @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
|
|
64
64
|
* @codegenId colors
|
|
65
65
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
66
66
|
* @codegenParams ["border", "background", "shadow", "text", "fill"]
|
|
67
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
67
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
|
|
68
68
|
*/
|
|
69
69
|
var borderColorMap = {
|
|
70
70
|
'color.border': "var(--ds-border, #091e4221)",
|
|
@@ -367,25 +367,27 @@ exports.positionMap = positionMap;
|
|
|
367
367
|
|
|
368
368
|
/**
|
|
369
369
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
370
|
-
* @codegen <<SignedSource::
|
|
370
|
+
* @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
|
|
371
371
|
* @codegenId border
|
|
372
372
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
373
373
|
* @codegenParams ["width", "radius"]
|
|
374
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::
|
|
374
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
|
|
375
375
|
*/
|
|
376
376
|
var borderWidthMap = {
|
|
377
|
-
'border.width
|
|
378
|
-
'border.width.
|
|
379
|
-
'border.width.
|
|
377
|
+
'border.width': "var(--ds-border-width, 1px)",
|
|
378
|
+
'border.width.0': "var(--ds-border-width-0, 0px)",
|
|
379
|
+
'border.width.050': "var(--ds-border-width-050, 1px)",
|
|
380
|
+
'border.width.100': "var(--ds-border-width-100, 2px)"
|
|
380
381
|
};
|
|
381
382
|
exports.borderWidthMap = borderWidthMap;
|
|
382
383
|
var borderRadiusMap = {
|
|
383
|
-
'border.radius.050': "var(--ds-radius-050, 2px)",
|
|
384
|
-
'border.radius
|
|
385
|
-
'border.radius.
|
|
386
|
-
'border.radius.
|
|
387
|
-
'border.radius.
|
|
388
|
-
'border.radius.
|
|
384
|
+
'border.radius.050': "var(--ds-border-radius-050, 2px)",
|
|
385
|
+
'border.radius': "var(--ds-border-radius, 3px)",
|
|
386
|
+
'border.radius.100': "var(--ds-border-radius-100, 3px)",
|
|
387
|
+
'border.radius.200': "var(--ds-border-radius-200, 8px)",
|
|
388
|
+
'border.radius.300': "var(--ds-border-radius-300, 12px)",
|
|
389
|
+
'border.radius.400': "var(--ds-border-radius-400, 16px)",
|
|
390
|
+
'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
|
|
389
391
|
};
|
|
390
392
|
|
|
391
393
|
/**
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { UNSAFE_media } from './media-helper';
|
|
2
2
|
export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
|
|
3
|
-
export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
|
|
3
|
+
export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
|
|
4
|
+
export { UNSAFE_useMediaQuery } from './use-media-query';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia, _window12, _window12$matchMedia, _window13, _window13$matchMedia;
|
|
2
|
+
import { useEffect, useLayoutEffect, useRef } from 'react';
|
|
3
|
+
import { bind } from 'bind-event-listener';
|
|
4
|
+
import { UNSAFE_media as media } from './media-helper';
|
|
5
|
+
const queries = {
|
|
6
|
+
'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, media.above.xxs.replace('@media ', '').trim()),
|
|
7
|
+
'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, media.above.xs.replace('@media ', '').trim()),
|
|
8
|
+
'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, media.above.sm.replace('@media ', '').trim()),
|
|
9
|
+
'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, media.above.md.replace('@media ', '').trim()),
|
|
10
|
+
'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, media.above.lg.replace('@media ', '').trim()),
|
|
11
|
+
'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, media.above.xl.replace('@media ', '').trim()),
|
|
12
|
+
'above.xxl': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, media.above.xxl.replace('@media ', '').trim()),
|
|
13
|
+
'below.xs': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, media.below.xs.replace('@media ', '').trim()),
|
|
14
|
+
'below.sm': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, media.below.sm.replace('@media ', '').trim()),
|
|
15
|
+
'below.md': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, media.below.md.replace('@media ', '').trim()),
|
|
16
|
+
'below.lg': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, media.below.lg.replace('@media ', '').trim()),
|
|
17
|
+
'below.xl': typeof window === 'undefined' ? undefined : (_window12 = window) === null || _window12 === void 0 ? void 0 : (_window12$matchMedia = _window12.matchMedia) === null || _window12$matchMedia === void 0 ? void 0 : _window12$matchMedia.call(_window12, media.below.xl.replace('@media ', '').trim()),
|
|
18
|
+
'below.xxl': typeof window === 'undefined' ? undefined : (_window13 = window) === null || _window13 === void 0 ? void 0 : (_window13$matchMedia = _window13.matchMedia) === null || _window13$matchMedia === void 0 ? void 0 : _window13$matchMedia.call(_window13, media.below.xxl.replace('@media ', '').trim())
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
|
|
23
|
+
*
|
|
24
|
+
* The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
|
|
25
|
+
*
|
|
26
|
+
* @important
|
|
27
|
+
* - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
|
|
28
|
+
* - `above.xxs` will always be truthy, your listener should never fire.
|
|
29
|
+
*
|
|
30
|
+
* @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
|
|
34
|
+
* const isMobile = mq?.matches;
|
|
35
|
+
*
|
|
36
|
+
* @returns
|
|
37
|
+
* - `MediaQueryList`, primarily used to get if that media query is currently
|
|
38
|
+
* - `null` when `matchMedia` is unavailable, eg. in SSR.
|
|
39
|
+
*/
|
|
40
|
+
export const UNSAFE_useMediaQuery = (queryString, listener) => {
|
|
41
|
+
const listenerRef = useRef(listener);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
// Bind the listener if changed so it's called on the next change event; no guarantee on timing.
|
|
44
|
+
listenerRef.current = listener;
|
|
45
|
+
}, [listener]);
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* We explicitly only react to boolean changes for binding our listener
|
|
49
|
+
* Changes to the functional reference are ignored.
|
|
50
|
+
*/
|
|
51
|
+
const hasListener = !!listener;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* The `matchMedia(…)` return value for our breakpoint query.
|
|
55
|
+
*/
|
|
56
|
+
const mq = queries[queryString];
|
|
57
|
+
useLayoutEffect(() => {
|
|
58
|
+
listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
|
|
59
|
+
if (!mq || !hasListener || !listenerRef.current) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
return bind(mq, {
|
|
63
|
+
type: 'change',
|
|
64
|
+
listener: event => {
|
|
65
|
+
// We explicitly call the current version of the function
|
|
66
|
+
return listenerRef.current(event);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
},
|
|
70
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
|
|
71
|
+
[mq, hasListener]);
|
|
72
|
+
return mq || null;
|
|
73
|
+
};
|
package/dist/es2019/version.json
CHANGED
|
@@ -48,11 +48,11 @@ export const spaceMap = {
|
|
|
48
48
|
*/
|
|
49
49
|
/**
|
|
50
50
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
51
|
-
* @codegen <<SignedSource::
|
|
51
|
+
* @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
|
|
52
52
|
* @codegenId colors
|
|
53
53
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
54
54
|
* @codegenParams ["border", "background", "shadow", "text", "fill"]
|
|
55
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
55
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
|
|
56
56
|
*/
|
|
57
57
|
export const borderColorMap = {
|
|
58
58
|
'color.border': "var(--ds-border, #091e4221)",
|
|
@@ -336,24 +336,26 @@ export const positionMap = {
|
|
|
336
336
|
*/
|
|
337
337
|
/**
|
|
338
338
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
339
|
-
* @codegen <<SignedSource::
|
|
339
|
+
* @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
|
|
340
340
|
* @codegenId border
|
|
341
341
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
342
342
|
* @codegenParams ["width", "radius"]
|
|
343
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::
|
|
343
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
|
|
344
344
|
*/
|
|
345
345
|
export const borderWidthMap = {
|
|
346
|
-
'border.width
|
|
347
|
-
'border.width.
|
|
348
|
-
'border.width.
|
|
346
|
+
'border.width': "var(--ds-border-width, 1px)",
|
|
347
|
+
'border.width.0': "var(--ds-border-width-0, 0px)",
|
|
348
|
+
'border.width.050': "var(--ds-border-width-050, 1px)",
|
|
349
|
+
'border.width.100': "var(--ds-border-width-100, 2px)"
|
|
349
350
|
};
|
|
350
351
|
export const borderRadiusMap = {
|
|
351
|
-
'border.radius.050': "var(--ds-radius-050, 2px)",
|
|
352
|
-
'border.radius
|
|
353
|
-
'border.radius.
|
|
354
|
-
'border.radius.
|
|
355
|
-
'border.radius.
|
|
356
|
-
'border.radius.
|
|
352
|
+
'border.radius.050': "var(--ds-border-radius-050, 2px)",
|
|
353
|
+
'border.radius': "var(--ds-border-radius, 3px)",
|
|
354
|
+
'border.radius.100': "var(--ds-border-radius-100, 3px)",
|
|
355
|
+
'border.radius.200': "var(--ds-border-radius-200, 8px)",
|
|
356
|
+
'border.radius.300': "var(--ds-border-radius-300, 12px)",
|
|
357
|
+
'border.radius.400': "var(--ds-border-radius-400, 16px)",
|
|
358
|
+
'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
|
|
357
359
|
};
|
|
358
360
|
|
|
359
361
|
/**
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { UNSAFE_media } from './media-helper';
|
|
2
2
|
export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
|
|
3
|
-
export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
|
|
3
|
+
export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
|
|
4
|
+
export { UNSAFE_useMediaQuery } from './use-media-query';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia, _window12, _window12$matchMedia, _window13, _window13$matchMedia;
|
|
2
|
+
import { useEffect, useLayoutEffect, useRef } from 'react';
|
|
3
|
+
import { bind } from 'bind-event-listener';
|
|
4
|
+
import { UNSAFE_media as media } from './media-helper';
|
|
5
|
+
var queries = {
|
|
6
|
+
'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, media.above.xxs.replace('@media ', '').trim()),
|
|
7
|
+
'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, media.above.xs.replace('@media ', '').trim()),
|
|
8
|
+
'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, media.above.sm.replace('@media ', '').trim()),
|
|
9
|
+
'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, media.above.md.replace('@media ', '').trim()),
|
|
10
|
+
'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, media.above.lg.replace('@media ', '').trim()),
|
|
11
|
+
'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, media.above.xl.replace('@media ', '').trim()),
|
|
12
|
+
'above.xxl': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, media.above.xxl.replace('@media ', '').trim()),
|
|
13
|
+
'below.xs': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, media.below.xs.replace('@media ', '').trim()),
|
|
14
|
+
'below.sm': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, media.below.sm.replace('@media ', '').trim()),
|
|
15
|
+
'below.md': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, media.below.md.replace('@media ', '').trim()),
|
|
16
|
+
'below.lg': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, media.below.lg.replace('@media ', '').trim()),
|
|
17
|
+
'below.xl': typeof window === 'undefined' ? undefined : (_window12 = window) === null || _window12 === void 0 ? void 0 : (_window12$matchMedia = _window12.matchMedia) === null || _window12$matchMedia === void 0 ? void 0 : _window12$matchMedia.call(_window12, media.below.xl.replace('@media ', '').trim()),
|
|
18
|
+
'below.xxl': typeof window === 'undefined' ? undefined : (_window13 = window) === null || _window13 === void 0 ? void 0 : (_window13$matchMedia = _window13.matchMedia) === null || _window13$matchMedia === void 0 ? void 0 : _window13$matchMedia.call(_window13, media.below.xxl.replace('@media ', '').trim())
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
|
|
23
|
+
*
|
|
24
|
+
* The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
|
|
25
|
+
*
|
|
26
|
+
* @important
|
|
27
|
+
* - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
|
|
28
|
+
* - `above.xxs` will always be truthy, your listener should never fire.
|
|
29
|
+
*
|
|
30
|
+
* @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
|
|
34
|
+
* const isMobile = mq?.matches;
|
|
35
|
+
*
|
|
36
|
+
* @returns
|
|
37
|
+
* - `MediaQueryList`, primarily used to get if that media query is currently
|
|
38
|
+
* - `null` when `matchMedia` is unavailable, eg. in SSR.
|
|
39
|
+
*/
|
|
40
|
+
export var UNSAFE_useMediaQuery = function UNSAFE_useMediaQuery(queryString, listener) {
|
|
41
|
+
var listenerRef = useRef(listener);
|
|
42
|
+
useEffect(function () {
|
|
43
|
+
// Bind the listener if changed so it's called on the next change event; no guarantee on timing.
|
|
44
|
+
listenerRef.current = listener;
|
|
45
|
+
}, [listener]);
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* We explicitly only react to boolean changes for binding our listener
|
|
49
|
+
* Changes to the functional reference are ignored.
|
|
50
|
+
*/
|
|
51
|
+
var hasListener = !!listener;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* The `matchMedia(…)` return value for our breakpoint query.
|
|
55
|
+
*/
|
|
56
|
+
var mq = queries[queryString];
|
|
57
|
+
useLayoutEffect(function () {
|
|
58
|
+
listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
|
|
59
|
+
if (!mq || !hasListener || !listenerRef.current) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
return bind(mq, {
|
|
63
|
+
type: 'change',
|
|
64
|
+
listener: function listener(event) {
|
|
65
|
+
// We explicitly call the current version of the function
|
|
66
|
+
return listenerRef.current(event);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
},
|
|
70
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
|
|
71
|
+
[mq, hasListener]);
|
|
72
|
+
return mq || null;
|
|
73
|
+
};
|
package/dist/esm/version.json
CHANGED
|
@@ -49,11 +49,11 @@ export var spaceMap = {
|
|
|
49
49
|
*/
|
|
50
50
|
/**
|
|
51
51
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
52
|
-
* @codegen <<SignedSource::
|
|
52
|
+
* @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
|
|
53
53
|
* @codegenId colors
|
|
54
54
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
55
55
|
* @codegenParams ["border", "background", "shadow", "text", "fill"]
|
|
56
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
56
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
|
|
57
57
|
*/
|
|
58
58
|
export var borderColorMap = {
|
|
59
59
|
'color.border': "var(--ds-border, #091e4221)",
|
|
@@ -337,24 +337,26 @@ export var positionMap = {
|
|
|
337
337
|
*/
|
|
338
338
|
/**
|
|
339
339
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
340
|
-
* @codegen <<SignedSource::
|
|
340
|
+
* @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
|
|
341
341
|
* @codegenId border
|
|
342
342
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
343
343
|
* @codegenParams ["width", "radius"]
|
|
344
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::
|
|
344
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
|
|
345
345
|
*/
|
|
346
346
|
export var borderWidthMap = {
|
|
347
|
-
'border.width
|
|
348
|
-
'border.width.
|
|
349
|
-
'border.width.
|
|
347
|
+
'border.width': "var(--ds-border-width, 1px)",
|
|
348
|
+
'border.width.0': "var(--ds-border-width-0, 0px)",
|
|
349
|
+
'border.width.050': "var(--ds-border-width-050, 1px)",
|
|
350
|
+
'border.width.100': "var(--ds-border-width-100, 2px)"
|
|
350
351
|
};
|
|
351
352
|
export var borderRadiusMap = {
|
|
352
|
-
'border.radius.050': "var(--ds-radius-050, 2px)",
|
|
353
|
-
'border.radius
|
|
354
|
-
'border.radius.
|
|
355
|
-
'border.radius.
|
|
356
|
-
'border.radius.
|
|
357
|
-
'border.radius.
|
|
353
|
+
'border.radius.050': "var(--ds-border-radius-050, 2px)",
|
|
354
|
+
'border.radius': "var(--ds-border-radius, 3px)",
|
|
355
|
+
'border.radius.100': "var(--ds-border-radius-100, 3px)",
|
|
356
|
+
'border.radius.200': "var(--ds-border-radius-200, 8px)",
|
|
357
|
+
'border.radius.300': "var(--ds-border-radius-300, 12px)",
|
|
358
|
+
'border.radius.400': "var(--ds-border-radius-400, 16px)",
|
|
359
|
+
'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
|
|
358
360
|
};
|
|
359
361
|
|
|
360
362
|
/**
|
|
@@ -2,3 +2,4 @@ export { UNSAFE_media } from './media-helper';
|
|
|
2
2
|
export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS, } from './build-media-query-css';
|
|
3
3
|
export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
|
|
4
4
|
export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
|
|
5
|
+
export { UNSAFE_useMediaQuery } from './use-media-query';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { UNSAFE_media as media } from './media-helper';
|
|
2
|
+
type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
|
|
3
|
+
/**
|
|
4
|
+
* A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
|
|
5
|
+
*
|
|
6
|
+
* The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
|
|
7
|
+
*
|
|
8
|
+
* @important
|
|
9
|
+
* - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
|
|
10
|
+
* - `above.xxs` will always be truthy, your listener should never fire.
|
|
11
|
+
*
|
|
12
|
+
* @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
|
|
16
|
+
* const isMobile = mq?.matches;
|
|
17
|
+
*
|
|
18
|
+
* @returns
|
|
19
|
+
* - `MediaQueryList`, primarily used to get if that media query is currently
|
|
20
|
+
* - `null` when `matchMedia` is unavailable, eg. in SSR.
|
|
21
|
+
*/
|
|
22
|
+
export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
|
|
23
|
+
export {};
|
|
@@ -66,11 +66,11 @@ export type Space = keyof typeof spaceMap;
|
|
|
66
66
|
*/
|
|
67
67
|
/**
|
|
68
68
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
69
|
-
* @codegen <<SignedSource::
|
|
69
|
+
* @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
|
|
70
70
|
* @codegenId colors
|
|
71
71
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
72
72
|
* @codegenParams ["border", "background", "shadow", "text", "fill"]
|
|
73
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
73
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
|
|
74
74
|
*/
|
|
75
75
|
export declare const borderColorMap: {
|
|
76
76
|
readonly 'color.border': "var(--ds-border)";
|
|
@@ -371,25 +371,27 @@ export type Position = keyof typeof positionMap;
|
|
|
371
371
|
*/
|
|
372
372
|
/**
|
|
373
373
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
374
|
-
* @codegen <<SignedSource::
|
|
374
|
+
* @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
|
|
375
375
|
* @codegenId border
|
|
376
376
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
377
377
|
* @codegenParams ["width", "radius"]
|
|
378
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::
|
|
378
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
|
|
379
379
|
*/
|
|
380
380
|
export declare const borderWidthMap: {
|
|
381
|
-
readonly 'border.width
|
|
382
|
-
readonly 'border.width.
|
|
383
|
-
readonly 'border.width.
|
|
381
|
+
readonly 'border.width': "var(--ds-border-width)";
|
|
382
|
+
readonly 'border.width.0': "var(--ds-border-width-0)";
|
|
383
|
+
readonly 'border.width.050': "var(--ds-border-width-050)";
|
|
384
|
+
readonly 'border.width.100': "var(--ds-border-width-100)";
|
|
384
385
|
};
|
|
385
386
|
export type BorderWidth = keyof typeof borderWidthMap;
|
|
386
387
|
export declare const borderRadiusMap: {
|
|
387
|
-
readonly 'border.radius.050': "var(--ds-radius-050)";
|
|
388
|
-
readonly 'border.radius
|
|
389
|
-
readonly 'border.radius.
|
|
390
|
-
readonly 'border.radius.
|
|
391
|
-
readonly 'border.radius.
|
|
392
|
-
readonly 'border.radius.
|
|
388
|
+
readonly 'border.radius.050': "var(--ds-border-radius-050)";
|
|
389
|
+
readonly 'border.radius': "var(--ds-border-radius)";
|
|
390
|
+
readonly 'border.radius.100': "var(--ds-border-radius-100)";
|
|
391
|
+
readonly 'border.radius.200': "var(--ds-border-radius-200)";
|
|
392
|
+
readonly 'border.radius.300': "var(--ds-border-radius-300)";
|
|
393
|
+
readonly 'border.radius.400': "var(--ds-border-radius-400)";
|
|
394
|
+
readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
|
|
393
395
|
};
|
|
394
396
|
export type BorderRadius = keyof typeof borderRadiusMap;
|
|
395
397
|
/**
|
|
@@ -2,3 +2,4 @@ export { UNSAFE_media } from './media-helper';
|
|
|
2
2
|
export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS, } from './build-media-query-css';
|
|
3
3
|
export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
|
|
4
4
|
export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
|
|
5
|
+
export { UNSAFE_useMediaQuery } from './use-media-query';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { UNSAFE_media as media } from './media-helper';
|
|
2
|
+
type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
|
|
3
|
+
/**
|
|
4
|
+
* A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
|
|
5
|
+
*
|
|
6
|
+
* The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
|
|
7
|
+
*
|
|
8
|
+
* @important
|
|
9
|
+
* - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
|
|
10
|
+
* - `above.xxs` will always be truthy, your listener should never fire.
|
|
11
|
+
*
|
|
12
|
+
* @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
|
|
16
|
+
* const isMobile = mq?.matches;
|
|
17
|
+
*
|
|
18
|
+
* @returns
|
|
19
|
+
* - `MediaQueryList`, primarily used to get if that media query is currently
|
|
20
|
+
* - `null` when `matchMedia` is unavailable, eg. in SSR.
|
|
21
|
+
*/
|
|
22
|
+
export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
|
|
23
|
+
export {};
|
|
@@ -66,11 +66,11 @@ export type Space = keyof typeof spaceMap;
|
|
|
66
66
|
*/
|
|
67
67
|
/**
|
|
68
68
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
69
|
-
* @codegen <<SignedSource::
|
|
69
|
+
* @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
|
|
70
70
|
* @codegenId colors
|
|
71
71
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
72
72
|
* @codegenParams ["border", "background", "shadow", "text", "fill"]
|
|
73
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
73
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
|
|
74
74
|
*/
|
|
75
75
|
export declare const borderColorMap: {
|
|
76
76
|
readonly 'color.border': "var(--ds-border)";
|
|
@@ -371,25 +371,27 @@ export type Position = keyof typeof positionMap;
|
|
|
371
371
|
*/
|
|
372
372
|
/**
|
|
373
373
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
374
|
-
* @codegen <<SignedSource::
|
|
374
|
+
* @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
|
|
375
375
|
* @codegenId border
|
|
376
376
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
377
377
|
* @codegenParams ["width", "radius"]
|
|
378
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::
|
|
378
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
|
|
379
379
|
*/
|
|
380
380
|
export declare const borderWidthMap: {
|
|
381
|
-
readonly 'border.width
|
|
382
|
-
readonly 'border.width.
|
|
383
|
-
readonly 'border.width.
|
|
381
|
+
readonly 'border.width': "var(--ds-border-width)";
|
|
382
|
+
readonly 'border.width.0': "var(--ds-border-width-0)";
|
|
383
|
+
readonly 'border.width.050': "var(--ds-border-width-050)";
|
|
384
|
+
readonly 'border.width.100': "var(--ds-border-width-100)";
|
|
384
385
|
};
|
|
385
386
|
export type BorderWidth = keyof typeof borderWidthMap;
|
|
386
387
|
export declare const borderRadiusMap: {
|
|
387
|
-
readonly 'border.radius.050': "var(--ds-radius-050)";
|
|
388
|
-
readonly 'border.radius
|
|
389
|
-
readonly 'border.radius.
|
|
390
|
-
readonly 'border.radius.
|
|
391
|
-
readonly 'border.radius.
|
|
392
|
-
readonly 'border.radius.
|
|
388
|
+
readonly 'border.radius.050': "var(--ds-border-radius-050)";
|
|
389
|
+
readonly 'border.radius': "var(--ds-border-radius)";
|
|
390
|
+
readonly 'border.radius.100': "var(--ds-border-radius-100)";
|
|
391
|
+
readonly 'border.radius.200': "var(--ds-border-radius-200)";
|
|
392
|
+
readonly 'border.radius.300': "var(--ds-border-radius-300)";
|
|
393
|
+
readonly 'border.radius.400': "var(--ds-border-radius-400)";
|
|
394
|
+
readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
|
|
393
395
|
};
|
|
394
396
|
export type BorderRadius = keyof typeof borderRadiusMap;
|
|
395
397
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.4",
|
|
4
4
|
"description": "Primitives are token-backed low-level building blocks.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -94,10 +94,11 @@
|
|
|
94
94
|
},
|
|
95
95
|
"dependencies": {
|
|
96
96
|
"@atlaskit/ds-lib": "^2.2.0",
|
|
97
|
-
"@atlaskit/tokens": "^1.
|
|
97
|
+
"@atlaskit/tokens": "^1.6.0",
|
|
98
98
|
"@babel/runtime": "^7.0.0",
|
|
99
99
|
"@emotion/react": "^11.7.1",
|
|
100
|
-
"@emotion/serialize": "^1.1.0"
|
|
100
|
+
"@emotion/serialize": "^1.1.0",
|
|
101
|
+
"bind-event-listener": "^2.1.1"
|
|
101
102
|
},
|
|
102
103
|
"peerDependencies": {
|
|
103
104
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
@@ -124,6 +125,7 @@
|
|
|
124
125
|
"@atlassian/codegen": "^0.1.0",
|
|
125
126
|
"@atlassian/gemini-visual-regression": "^0.0.28",
|
|
126
127
|
"@testing-library/react": "^12.1.5",
|
|
128
|
+
"@testing-library/react-hooks": "^8.0.1",
|
|
127
129
|
"csstype": "^3.1.0",
|
|
128
130
|
"prettier": "^2.8.0",
|
|
129
131
|
"react-dom": "^16.8.0",
|
package/report.api.md
CHANGED
|
@@ -258,12 +258,13 @@ type BorderRadius = keyof typeof borderRadiusMap;
|
|
|
258
258
|
|
|
259
259
|
// @public (undocumented)
|
|
260
260
|
const borderRadiusMap: {
|
|
261
|
-
readonly 'border.radius.050': 'var(--ds-radius-050)';
|
|
262
|
-
readonly 'border.radius
|
|
263
|
-
readonly 'border.radius.
|
|
264
|
-
readonly 'border.radius.
|
|
265
|
-
readonly 'border.radius.
|
|
266
|
-
readonly 'border.radius.
|
|
261
|
+
readonly 'border.radius.050': 'var(--ds-border-radius-050)';
|
|
262
|
+
readonly 'border.radius': 'var(--ds-border-radius)';
|
|
263
|
+
readonly 'border.radius.100': 'var(--ds-border-radius-100)';
|
|
264
|
+
readonly 'border.radius.200': 'var(--ds-border-radius-200)';
|
|
265
|
+
readonly 'border.radius.300': 'var(--ds-border-radius-300)';
|
|
266
|
+
readonly 'border.radius.400': 'var(--ds-border-radius-400)';
|
|
267
|
+
readonly 'border.radius.circle': 'var(--ds-border-radius-circle)';
|
|
267
268
|
};
|
|
268
269
|
|
|
269
270
|
// @public (undocumented)
|
|
@@ -280,9 +281,10 @@ type BorderWidth = keyof typeof borderWidthMap;
|
|
|
280
281
|
|
|
281
282
|
// @public
|
|
282
283
|
const borderWidthMap: {
|
|
283
|
-
readonly 'border.width
|
|
284
|
-
readonly 'border.width.
|
|
285
|
-
readonly 'border.width.
|
|
284
|
+
readonly 'border.width': 'var(--ds-border-width)';
|
|
285
|
+
readonly 'border.width.0': 'var(--ds-border-width-0)';
|
|
286
|
+
readonly 'border.width.050': 'var(--ds-border-width-050)';
|
|
287
|
+
readonly 'border.width.100': 'var(--ds-border-width-100)';
|
|
286
288
|
};
|
|
287
289
|
|
|
288
290
|
// @public (undocumented)
|
|
@@ -15,14 +15,14 @@ type Token = {
|
|
|
15
15
|
const tokenStyles = {
|
|
16
16
|
width: {
|
|
17
17
|
objectName: 'borderWidth',
|
|
18
|
-
filterPrefix: 'border.width
|
|
18
|
+
filterPrefix: 'border.width',
|
|
19
19
|
cssProperty: 'borderWidth',
|
|
20
20
|
filterFn: <T extends Token>(t: T) =>
|
|
21
21
|
t.token.startsWith(tokenStyles.width.filterPrefix),
|
|
22
22
|
},
|
|
23
23
|
radius: {
|
|
24
24
|
objectName: 'borderRadius',
|
|
25
|
-
filterPrefix: 'border.radius
|
|
25
|
+
filterPrefix: 'border.radius',
|
|
26
26
|
cssProperty: 'borderRadius',
|
|
27
27
|
filterFn: <T extends Token>(t: T) =>
|
|
28
28
|
t.token.startsWith(tokenStyles.radius.filterPrefix),
|
|
@@ -33,7 +33,7 @@ const activeTokens = tokens
|
|
|
33
33
|
.filter(t => t.attributes.state !== 'deleted')
|
|
34
34
|
.map(
|
|
35
35
|
(t): Token => ({
|
|
36
|
-
token: t.
|
|
36
|
+
token: t.cleanName,
|
|
37
37
|
fallback: t.value === '4px' ? '3px' : (t.value as string),
|
|
38
38
|
isDeprecated: t.attributes.state === 'deprecated',
|
|
39
39
|
}),
|
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -229,12 +229,13 @@ type BorderRadius = keyof typeof borderRadiusMap;
|
|
|
229
229
|
|
|
230
230
|
// @public (undocumented)
|
|
231
231
|
const borderRadiusMap: {
|
|
232
|
-
readonly 'border.radius.050': "var(--ds-radius-050)";
|
|
233
|
-
readonly 'border.radius
|
|
234
|
-
readonly 'border.radius.
|
|
235
|
-
readonly 'border.radius.
|
|
236
|
-
readonly 'border.radius.
|
|
237
|
-
readonly 'border.radius.
|
|
232
|
+
readonly 'border.radius.050': "var(--ds-border-radius-050)";
|
|
233
|
+
readonly 'border.radius': "var(--ds-border-radius)";
|
|
234
|
+
readonly 'border.radius.100': "var(--ds-border-radius-100)";
|
|
235
|
+
readonly 'border.radius.200': "var(--ds-border-radius-200)";
|
|
236
|
+
readonly 'border.radius.300': "var(--ds-border-radius-300)";
|
|
237
|
+
readonly 'border.radius.400': "var(--ds-border-radius-400)";
|
|
238
|
+
readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
|
|
238
239
|
};
|
|
239
240
|
|
|
240
241
|
// @public (undocumented)
|
|
@@ -251,9 +252,10 @@ type BorderWidth = keyof typeof borderWidthMap;
|
|
|
251
252
|
|
|
252
253
|
// @public
|
|
253
254
|
const borderWidthMap: {
|
|
254
|
-
readonly 'border.width
|
|
255
|
-
readonly 'border.width.
|
|
256
|
-
readonly 'border.width.
|
|
255
|
+
readonly 'border.width': "var(--ds-border-width)";
|
|
256
|
+
readonly 'border.width.0': "var(--ds-border-width-0)";
|
|
257
|
+
readonly 'border.width.050': "var(--ds-border-width-050)";
|
|
258
|
+
readonly 'border.width.100': "var(--ds-border-width-100)";
|
|
257
259
|
};
|
|
258
260
|
|
|
259
261
|
// @public (undocumented)
|