@atlaskit/primitives 0.12.3 → 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 +6 -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/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/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/types/helpers/responsive/index.d.ts +1 -0
- package/dist/types/helpers/responsive/use-media-query.d.ts +23 -0
- 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/package.json +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
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
|
+
|
|
3
9
|
## 0.12.3
|
|
4
10
|
|
|
5
11
|
### 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
|
@@ -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
|
@@ -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
|
@@ -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 {};
|
|
@@ -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 {};
|
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",
|
|
@@ -97,7 +97,8 @@
|
|
|
97
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",
|