@sanity/ui 1.1.0-beta.2 → 1.2.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.
- package/LICENSE +1 -1
- package/dist/index.cjs.mjs +120 -0
- package/dist/index.d.ts +26 -4
- package/dist/{index.cjs → index.esm.js} +1987 -1946
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +2114 -1819
- package/dist/index.js.map +1 -1
- package/package.json +47 -44
- package/src/components/dialog/__workshop__/activate.tsx +134 -0
- package/src/components/dialog/__workshop__/index.ts +3 -0
- package/src/components/dialog/__workshop__/nested.tsx +14 -3
- package/src/components/dialog/__workshop__/panes.tsx +86 -0
- package/src/components/dialog/__workshop__/wrapped.tsx +78 -0
- package/src/components/dialog/dialog.tsx +110 -25
- package/src/components/toast/toastProvider.tsx +55 -52
- package/src/constants.ts +2 -2
- package/src/helpers/element.ts +7 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useArrayProp.ts +2 -1
- package/src/hooks/useMediaIndex/useMediaIndex.test.tsx +31 -0
- package/src/hooks/useMediaIndex/useMediaIndex.ts +98 -6
- package/src/hooks/useMounted.ts +14 -0
- package/src/hooks/usePrefersDark.hydration.test.tsx +56 -0
- package/src/hooks/usePrefersDark.test.tsx +18 -0
- package/src/hooks/usePrefersDark.ts +51 -18
- package/src/hooks/usePrefersReducedMotion.hydration.test.tsx +56 -0
- package/src/hooks/usePrefersReducedMotion.test.tsx +18 -0
- package/src/hooks/usePrefersReducedMotion.ts +62 -0
- package/src/observers/resizeObserver.ts +1 -1
- package/src/primitives/code/styles.ts +6 -0
- package/src/primitives/heading/styles.ts +6 -0
- package/src/primitives/label/styles.ts +6 -0
- package/src/primitives/popover/__workshop__/OpenOnMountStory.tsx +11 -0
- package/src/primitives/popover/__workshop__/index.ts +5 -0
- package/src/primitives/text/styles.ts +6 -0
- package/src/utils/layer/__workshop__/_debug.tsx +9 -3
- package/src/utils/layer/__workshop__/index.ts +3 -3
- package/src/utils/layer/__workshop__/multipleRoots.tsx +2 -1
- package/src/utils/layer/__workshop__/{plain.tsx → nested.tsx} +14 -4
- package/src/utils/layer/getLayerContext.test.ts +30 -0
- package/src/utils/layer/getLayerContext.ts +21 -0
- package/src/utils/layer/layer.test.tsx +1 -0
- package/src/utils/layer/layer.tsx +49 -7
- package/src/utils/layer/layerContext.ts +2 -2
- package/src/utils/layer/layerProvider.tsx +73 -12
- package/src/utils/layer/types.ts +3 -4
- package/src/utils/layer/useLayer.ts +9 -8
- package/src/utils/portal/portalContext.ts +1 -1
- package/src/utils/portal/portalProvider.tsx +1 -1
- package/dist/index.cjs.map +0 -1
- package/src/hooks/useMediaIndex/lib/media.ts +0 -88
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @internal
|
|
3
|
-
*/
|
|
4
|
-
export interface _MediaManager {
|
|
5
|
-
getCurrentIndex: () => number
|
|
6
|
-
subscribe: (subscriber: (index: number) => void) => () => void
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const MEDIA_MANAGER_CACHE = new WeakMap<number[], _MediaManager>()
|
|
10
|
-
|
|
11
|
-
function _getMediaQuery(media: number[], index: number) {
|
|
12
|
-
if (index === 0) {
|
|
13
|
-
return `screen and (max-width: ${media[index] - 1}px)`
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
if (index === media.length) {
|
|
17
|
-
return `screen and (min-width: ${media[index - 1]}px)`
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function _createMediaManager(media: number[]): _MediaManager {
|
|
24
|
-
const mediaLen = media.length
|
|
25
|
-
const sizes: {mq: MediaQueryList; index: number}[] = []
|
|
26
|
-
|
|
27
|
-
if (typeof window !== 'undefined') {
|
|
28
|
-
for (let index = mediaLen; index > -1; index -= 1) {
|
|
29
|
-
const mediaQuery = _getMediaQuery(media, index)
|
|
30
|
-
|
|
31
|
-
sizes.push({index, mq: window.matchMedia(mediaQuery)})
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const getCurrentIndex = () => {
|
|
36
|
-
for (const {index, mq} of sizes) {
|
|
37
|
-
if (mq.matches) return index
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
return 0
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const subscribe = (subscriber: (index: number) => void) => {
|
|
44
|
-
const disposeFns: (() => void)[] = []
|
|
45
|
-
|
|
46
|
-
for (const {index, mq} of sizes) {
|
|
47
|
-
const handleChange = () => {
|
|
48
|
-
if (mq.matches) subscriber(index)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
if (mq.addEventListener) {
|
|
52
|
-
mq.addEventListener('change', handleChange)
|
|
53
|
-
} else {
|
|
54
|
-
mq.addListener(handleChange)
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
disposeFns.push(() => {
|
|
58
|
-
if (mq.removeEventListener) {
|
|
59
|
-
mq.removeEventListener('change', handleChange)
|
|
60
|
-
} else {
|
|
61
|
-
mq.removeListener(handleChange)
|
|
62
|
-
}
|
|
63
|
-
})
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
return () => {
|
|
67
|
-
for (const disposeFn of disposeFns) {
|
|
68
|
-
disposeFn()
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
return {getCurrentIndex, subscribe}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* @internal
|
|
78
|
-
*/
|
|
79
|
-
export function _getMediaManager(media: number[]): _MediaManager {
|
|
80
|
-
let manager = MEDIA_MANAGER_CACHE.get(media)
|
|
81
|
-
|
|
82
|
-
if (!manager) {
|
|
83
|
-
manager = _createMediaManager(media)
|
|
84
|
-
MEDIA_MANAGER_CACHE.set(media, manager)
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
return manager
|
|
88
|
-
}
|