@wordpress/compose 5.4.1 → 5.7.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/CHANGELOG.md +18 -0
- package/README.md +35 -9
- package/build/hooks/use-disabled/index.js +114 -42
- package/build/hooks/use-disabled/index.js.map +1 -1
- package/build/hooks/use-focus-on-mount/index.js +6 -1
- package/build/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build/hooks/use-ref-effect/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.js +224 -13
- package/build/hooks/use-resize-observer/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.native.js +0 -2
- package/build/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build/index.js +6 -6
- package/build/index.js.map +1 -1
- package/build/index.native.js +8 -0
- package/build/index.native.js.map +1 -1
- package/build-module/hooks/use-disabled/index.js +110 -40
- package/build-module/hooks/use-disabled/index.js.map +1 -1
- package/build-module/hooks/use-focus-on-mount/index.js +6 -1
- package/build-module/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build-module/hooks/use-ref-effect/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.js +226 -9
- package/build-module/hooks/use-resize-observer/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.native.js +0 -2
- package/build-module/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build-module/index.js +1 -1
- package/build-module/index.js.map +1 -1
- package/build-module/index.native.js +1 -0
- package/build-module/index.native.js.map +1 -1
- package/build-types/higher-order/if-condition/index.d.ts +0 -1
- package/build-types/higher-order/if-condition/index.d.ts.map +1 -1
- package/build-types/higher-order/with-instance-id/index.d.ts +0 -1
- package/build-types/higher-order/with-instance-id/index.d.ts.map +1 -1
- package/build-types/hooks/use-disabled/index.d.ts +7 -3
- package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
- package/build-types/hooks/use-focus-on-mount/index.d.ts.map +1 -1
- package/build-types/hooks/use-ref-effect/index.d.ts +1 -1
- package/build-types/hooks/use-ref-effect/index.d.ts.map +1 -1
- package/build-types/hooks/use-resize-observer/index.d.ts +32 -2
- package/build-types/hooks/use-resize-observer/index.d.ts.map +1 -1
- package/build-types/index.d.ts +1 -1
- package/package.json +8 -9
- package/src/hooks/use-disabled/index.js +141 -51
- package/src/hooks/use-focus-on-mount/index.js +6 -1
- package/src/hooks/use-ref-effect/index.ts +2 -2
- package/src/hooks/use-resize-observer/index.native.js +0 -2
- package/src/hooks/use-resize-observer/index.tsx +362 -0
- package/src/index.js +1 -1
- package/src/index.native.js +1 -0
- package/tsconfig.json +2 -4
- package/tsconfig.tsbuildinfo +1 -1
- package/src/hooks/use-resize-observer/index.js +0 -31
|
@@ -1,15 +1,204 @@
|
|
|
1
|
+
import { createElement } from "@wordpress/element";
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* External dependencies
|
|
3
5
|
*/
|
|
4
|
-
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* WordPress dependencies
|
|
9
|
+
*/
|
|
10
|
+
import { useMemo, useRef, useCallback, useEffect, useState } from '@wordpress/element';
|
|
11
|
+
|
|
12
|
+
// This of course could've been more streamlined with internal state instead of
|
|
13
|
+
// refs, but then host hooks / components could not opt out of renders.
|
|
14
|
+
// This could've been exported to its own module, but the current build doesn't
|
|
15
|
+
// seem to work with module imports and I had no more time to spend on this...
|
|
16
|
+
function useResolvedElement(subscriber, refOrElement) {
|
|
17
|
+
const callbackRefElement = useRef(null);
|
|
18
|
+
const lastReportRef = useRef(null);
|
|
19
|
+
const cleanupRef = useRef();
|
|
20
|
+
const callSubscriber = useCallback(() => {
|
|
21
|
+
let element = null;
|
|
22
|
+
|
|
23
|
+
if (callbackRefElement.current) {
|
|
24
|
+
element = callbackRefElement.current;
|
|
25
|
+
} else if (refOrElement) {
|
|
26
|
+
if (refOrElement instanceof HTMLElement) {
|
|
27
|
+
element = refOrElement;
|
|
28
|
+
} else {
|
|
29
|
+
element = refOrElement.current;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.reporter === callSubscriber) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (cleanupRef.current) {
|
|
38
|
+
cleanupRef.current(); // Making sure the cleanup is not called accidentally multiple times.
|
|
39
|
+
|
|
40
|
+
cleanupRef.current = null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
lastReportRef.current = {
|
|
44
|
+
reporter: callSubscriber,
|
|
45
|
+
element
|
|
46
|
+
}; // Only calling the subscriber, if there's an actual element to report.
|
|
47
|
+
|
|
48
|
+
if (element) {
|
|
49
|
+
cleanupRef.current = subscriber(element);
|
|
50
|
+
}
|
|
51
|
+
}, [refOrElement, subscriber]); // On each render, we check whether a ref changed, or if we got a new raw
|
|
52
|
+
// element.
|
|
53
|
+
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
|
|
56
|
+
// render accompanying that change as well.
|
|
57
|
+
// To guarantee we always have the right element, one must use the ref callback provided instead, but we support
|
|
58
|
+
// RefObjects to make the hook API more convenient in certain cases.
|
|
59
|
+
callSubscriber();
|
|
60
|
+
}, [callSubscriber]);
|
|
61
|
+
return useCallback(element => {
|
|
62
|
+
callbackRefElement.current = element;
|
|
63
|
+
callSubscriber();
|
|
64
|
+
}, [callSubscriber]);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// We're only using the first element of the size sequences, until future versions of the spec solidify on how
|
|
68
|
+
// exactly it'll be used for fragments in multi-column scenarios:
|
|
69
|
+
// From the spec:
|
|
70
|
+
// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
|
|
71
|
+
// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
|
|
72
|
+
// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
|
|
73
|
+
// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
|
|
74
|
+
// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
|
|
75
|
+
// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
|
|
76
|
+
//
|
|
77
|
+
// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
|
|
78
|
+
// regardless of the "box" option.
|
|
79
|
+
// The spec states the following on this:
|
|
80
|
+
// > This does not have any impact on which box dimensions are returned to the defined callback when the event
|
|
81
|
+
// > is fired, it solely defines which box the author wishes to observe layout changes on.
|
|
82
|
+
// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
|
|
83
|
+
// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
|
|
84
|
+
// > This section is non-normative. An author may desire to observe more than one CSS box.
|
|
85
|
+
// > In this case, author will need to use multiple ResizeObservers.
|
|
86
|
+
// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
|
|
87
|
+
// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
|
|
88
|
+
// For this reason I decided to only return the requested size,
|
|
89
|
+
// even though it seems we have access to results for all box types.
|
|
90
|
+
// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
|
|
91
|
+
// regardless of box option.
|
|
92
|
+
const extractSize = (entry, boxProp, sizeType) => {
|
|
93
|
+
if (!entry[boxProp]) {
|
|
94
|
+
if (boxProp === 'contentBoxSize') {
|
|
95
|
+
// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
|
|
96
|
+
// See the 6th step in the description for the RO algorithm:
|
|
97
|
+
// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
|
|
98
|
+
// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
|
|
99
|
+
// In real browser implementations of course these objects differ, but the width/height values should be equivalent.
|
|
100
|
+
return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
return undefined;
|
|
104
|
+
} // A couple bytes smaller than calling Array.isArray() and just as effective here.
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
return entry[boxProp][0] ? entry[boxProp][0][sizeType] : // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
|
|
108
|
+
// behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
|
|
109
|
+
// @ts-ignore
|
|
110
|
+
entry[boxProp][sizeType];
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
function useResizeObserver() {
|
|
114
|
+
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
115
|
+
// Saving the callback as a ref. With this, I don't need to put onResize in the
|
|
116
|
+
// effect dep array, and just passing in an anonymous function without memoising
|
|
117
|
+
// will not reinstantiate the hook's ResizeObserver.
|
|
118
|
+
const onResize = opts.onResize;
|
|
119
|
+
const onResizeRef = useRef(undefined);
|
|
120
|
+
onResizeRef.current = onResize;
|
|
121
|
+
const round = opts.round || Math.round; // Using a single instance throughout the hook's lifetime
|
|
122
|
+
|
|
123
|
+
const resizeObserverRef = useRef();
|
|
124
|
+
const [size, setSize] = useState({
|
|
125
|
+
width: undefined,
|
|
126
|
+
height: undefined
|
|
127
|
+
}); // In certain edge cases the RO might want to report a size change just after
|
|
128
|
+
// the component unmounted.
|
|
129
|
+
|
|
130
|
+
const didUnmount = useRef(false);
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
return () => {
|
|
133
|
+
didUnmount.current = true;
|
|
134
|
+
};
|
|
135
|
+
}, []); // Using a ref to track the previous width / height to avoid unnecessary renders.
|
|
136
|
+
|
|
137
|
+
const previous = useRef({
|
|
138
|
+
width: undefined,
|
|
139
|
+
height: undefined
|
|
140
|
+
}); // This block is kinda like a useEffect, only it's called whenever a new
|
|
141
|
+
// element could be resolved based on the ref option. It also has a cleanup
|
|
142
|
+
// function.
|
|
143
|
+
|
|
144
|
+
const refCallback = useResolvedElement(useCallback(element => {
|
|
145
|
+
// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.
|
|
146
|
+
// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.
|
|
147
|
+
if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
|
|
148
|
+
resizeObserverRef.current = {
|
|
149
|
+
box: opts.box,
|
|
150
|
+
round,
|
|
151
|
+
instance: new ResizeObserver(entries => {
|
|
152
|
+
const entry = entries[0];
|
|
153
|
+
let boxProp = 'borderBoxSize';
|
|
154
|
+
|
|
155
|
+
if (opts.box === 'border-box') {
|
|
156
|
+
boxProp = 'borderBoxSize';
|
|
157
|
+
} else {
|
|
158
|
+
boxProp = opts.box === 'device-pixel-content-box' ? 'devicePixelContentBoxSize' : 'contentBoxSize';
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
const reportedWidth = extractSize(entry, boxProp, 'inlineSize');
|
|
162
|
+
const reportedHeight = extractSize(entry, boxProp, 'blockSize');
|
|
163
|
+
const newWidth = reportedWidth ? round(reportedWidth) : undefined;
|
|
164
|
+
const newHeight = reportedHeight ? round(reportedHeight) : undefined;
|
|
165
|
+
|
|
166
|
+
if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
|
|
167
|
+
const newSize = {
|
|
168
|
+
width: newWidth,
|
|
169
|
+
height: newHeight
|
|
170
|
+
};
|
|
171
|
+
previous.current.width = newWidth;
|
|
172
|
+
previous.current.height = newHeight;
|
|
173
|
+
|
|
174
|
+
if (onResizeRef.current) {
|
|
175
|
+
onResizeRef.current(newSize);
|
|
176
|
+
} else if (!didUnmount.current) {
|
|
177
|
+
setSize(newSize);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
})
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
resizeObserverRef.current.instance.observe(element, {
|
|
185
|
+
box: opts.box
|
|
186
|
+
});
|
|
187
|
+
return () => {
|
|
188
|
+
if (resizeObserverRef.current) {
|
|
189
|
+
resizeObserverRef.current.instance.unobserve(element);
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
}, [opts.box, round]), opts.ref);
|
|
193
|
+
return useMemo(() => ({
|
|
194
|
+
ref: refCallback,
|
|
195
|
+
width: size.width,
|
|
196
|
+
height: size.height
|
|
197
|
+
}), [refCallback, size ? size.width : null, size ? size.height : null]);
|
|
198
|
+
}
|
|
5
199
|
/**
|
|
6
200
|
* Hook which allows to listen the resize event of any target element when it changes sizes.
|
|
7
|
-
* _Note: `useResizeObserver` will report `null` until after first
|
|
8
|
-
*
|
|
9
|
-
* Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>
|
|
10
|
-
* for more details.
|
|
11
|
-
*
|
|
12
|
-
* @see https://github.com/FezVrasta/react-resize-aware
|
|
201
|
+
* _Note: `useResizeObserver` will report `null` until after first render.
|
|
13
202
|
*
|
|
14
203
|
* @example
|
|
15
204
|
*
|
|
@@ -25,8 +214,36 @@ import useResizeAware from 'react-resize-aware';
|
|
|
25
214
|
* );
|
|
26
215
|
* };
|
|
27
216
|
* ```
|
|
28
|
-
*
|
|
29
217
|
*/
|
|
30
218
|
|
|
31
|
-
|
|
219
|
+
|
|
220
|
+
export default function useResizeAware() {
|
|
221
|
+
const {
|
|
222
|
+
ref,
|
|
223
|
+
width,
|
|
224
|
+
height
|
|
225
|
+
} = useResizeObserver();
|
|
226
|
+
const sizes = useMemo(() => {
|
|
227
|
+
return {
|
|
228
|
+
width: width !== null && width !== void 0 ? width : null,
|
|
229
|
+
height: height !== null && height !== void 0 ? height : null
|
|
230
|
+
};
|
|
231
|
+
}, [width, height]);
|
|
232
|
+
const resizeListener = createElement("div", {
|
|
233
|
+
style: {
|
|
234
|
+
position: 'absolute',
|
|
235
|
+
top: 0,
|
|
236
|
+
left: 0,
|
|
237
|
+
right: 0,
|
|
238
|
+
bottom: 0,
|
|
239
|
+
pointerEvents: 'none',
|
|
240
|
+
opacity: 0,
|
|
241
|
+
overflow: 'hidden',
|
|
242
|
+
zIndex: -1
|
|
243
|
+
},
|
|
244
|
+
"aria-hidden": "true",
|
|
245
|
+
ref: ref
|
|
246
|
+
});
|
|
247
|
+
return [resizeListener, sizes];
|
|
248
|
+
}
|
|
32
249
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.js"],"names":["useResizeAware"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,oBAA3B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAeA,cAAf","sourcesContent":["/**\n * External dependencies\n */\nimport useResizeAware from 'react-resize-aware';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render_\n *\n * Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>\n * for more details.\n *\n * @see https://github.com/FezVrasta/react-resize-aware\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n *\n */\nexport default useResizeAware;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"names":["useMemo","useRef","useCallback","useEffect","useState","useResolvedElement","subscriber","refOrElement","callbackRefElement","lastReportRef","cleanupRef","callSubscriber","element","current","HTMLElement","reporter","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useResizeAware","sizes","resizeListener","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport type { WPElement } from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t // @ts-ignore\n\t\t entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tWPElement,\n\t{ width: number | null; height: number | null }\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"]}
|
|
@@ -12,8 +12,6 @@ import { useState, useCallback } from '@wordpress/element';
|
|
|
12
12
|
/**
|
|
13
13
|
* Hook which allows to listen the resize event of any target element when it changes sizes.
|
|
14
14
|
*
|
|
15
|
-
* @return {[JSX.Element, { width: number, height: number } | null]} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
|
|
16
|
-
*
|
|
17
15
|
* @example
|
|
18
16
|
*
|
|
19
17
|
* ```js
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","absoluteFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,oBAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","absoluteFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,oBAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCJ,QAAQ,CAAE,IAAF,CAAlD;AAEA,QAAMK,QAAQ,GAAGJ,WAAW,CAAE,QAAuB;AAAA,QAArB;AAAEK,MAAAA;AAAF,KAAqB;AACpD,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoBF,WAAW,CAACG,MAAtC;AACAL,IAAAA,eAAe,CAAIM,SAAF,IAAiB;AACjC,UACC,CAAEA,SAAF,IACAA,SAAS,CAACH,KAAV,KAAoBA,KADpB,IAEAG,SAAS,CAACF,MAAV,KAAqBA,MAHtB,EAIE;AACD,eAAO;AACND,UAAAA,KAAK,EAAEI,IAAI,CAACC,KAAL,CAAYL,KAAZ,CADD;AAENC,UAAAA,MAAM,EAAEG,IAAI,CAACC,KAAL,CAAYJ,MAAZ;AAFF,SAAP;AAIA;;AACD,aAAOE,SAAP;AACA,KAZc,CAAf;AAaA,GAf2B,EAezB,EAfyB,CAA5B;AAiBA,QAAMG,QAAQ,GACb,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGd,UAAU,CAACe,YAAzB;AAAwC,IAAA,QAAQ,EAAGT;AAAnD,IADD;AAIA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CAzBD;;AA2BA,eAAeD,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n *\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"]}
|
package/build-module/index.js
CHANGED
|
@@ -14,7 +14,7 @@ export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbin
|
|
|
14
14
|
export { default as useCopyOnClick } from './hooks/use-copy-on-click';
|
|
15
15
|
export { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';
|
|
16
16
|
export { default as __experimentalUseDialog } from './hooks/use-dialog';
|
|
17
|
-
export { default as
|
|
17
|
+
export { default as useDisabled } from './hooks/use-disabled';
|
|
18
18
|
export { default as __experimentalUseDragging } from './hooks/use-dragging';
|
|
19
19
|
export { default as useFocusOnMount } from './hooks/use-focus-on-mount';
|
|
20
20
|
export { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/index.js"],"names":["default","createHigherOrderComponent","compose","ifCondition","pure","withGlobalEvents","withInstanceId","withSafeTimeout","withState","useConstrainedTabbing","useCopyOnClick","useCopyToClipboard","__experimentalUseDialog","
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/index.js"],"names":["default","createHigherOrderComponent","compose","ifCondition","pure","withGlobalEvents","withInstanceId","withSafeTimeout","withState","useConstrainedTabbing","useCopyOnClick","useCopyToClipboard","__experimentalUseDialog","useDisabled","__experimentalUseDragging","useFocusOnMount","__experimentalUseFocusOutside","useFocusReturn","useInstanceId","useIsomorphicLayoutEffect","useKeyboardShortcut","useMediaQuery","usePrevious","useReducedMotion","useViewportMatch","useResizeObserver","useAsyncList","useWarnOnChange","useDebounce","useThrottle","useMergeRefs","useRefEffect","__experimentalUseDropZone","useFocusableIframe","__experimentalUseFixedWindowList"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,0BAApB,QAAsD,uCAAtD,C,CAEA;;AACA,SAASD,OAAO,IAAIE,OAApB,QAAmC,wBAAnC,C,CAEA;;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,6BAAvC;AACA,SAASH,OAAO,IAAII,IAApB,QAAgC,qBAAhC;AACA,SAASJ,OAAO,IAAIK,gBAApB,QAA4C,mCAA5C;AACA,SAASL,OAAO,IAAIM,cAApB,QAA0C,iCAA1C;AACA,SAASN,OAAO,IAAIO,eAApB,QAA2C,kCAA3C;AACA,SAASP,OAAO,IAAIQ,SAApB,QAAqC,2BAArC,C,CAEA;;AACA,SAASR,OAAO,IAAIS,qBAApB,QAAiD,iCAAjD;AACA,SAAST,OAAO,IAAIU,cAApB,QAA0C,2BAA1C;AACA,SAASV,OAAO,IAAIW,kBAApB,QAA8C,+BAA9C;AACA,SAASX,OAAO,IAAIY,uBAApB,QAAmD,oBAAnD;AACA,SAASZ,OAAO,IAAIa,WAApB,QAAuC,sBAAvC;AACA,SAASb,OAAO,IAAIc,yBAApB,QAAqD,sBAArD;AACA,SAASd,OAAO,IAAIe,eAApB,QAA2C,4BAA3C;AACA,SAASf,OAAO,IAAIgB,6BAApB,QAAyD,2BAAzD;AACA,SAAShB,OAAO,IAAIiB,cAApB,QAA0C,0BAA1C;AACA,SAASjB,OAAO,IAAIkB,aAApB,QAAyC,yBAAzC;AACA,SAASlB,OAAO,IAAImB,yBAApB,QAAqD,sCAArD;AACA,SAASnB,OAAO,IAAIoB,mBAApB,QAA+C,+BAA/C;AACA,SAASpB,OAAO,IAAIqB,aAApB,QAAyC,yBAAzC;AACA,SAASrB,OAAO,IAAIsB,WAApB,QAAuC,sBAAvC;AACA,SAAStB,OAAO,IAAIuB,gBAApB,QAA4C,4BAA5C;AACA,SAASvB,OAAO,IAAIwB,gBAApB,QAA4C,4BAA5C;AACA,SAASxB,OAAO,IAAIyB,iBAApB,QAA6C,6BAA7C;AACA,SAASzB,OAAO,IAAI0B,YAApB,QAAwC,wBAAxC;AACA,SAAS1B,OAAO,IAAI2B,eAApB,QAA2C,4BAA3C;AACA,SAAS3B,OAAO,IAAI4B,WAApB,QAAuC,sBAAvC;AACA,SAAS5B,OAAO,IAAI6B,WAApB,QAAuC,sBAAvC;AACA,SAAS7B,OAAO,IAAI8B,YAApB,QAAwC,wBAAxC;AACA,SAAS9B,OAAO,IAAI+B,YAApB,QAAwC,wBAAxC;AACA,SAAS/B,OAAO,IAAIgC,yBAApB,QAAqD,uBAArD;AACA,SAAShC,OAAO,IAAIiC,kBAApB,QAA8C,8BAA9C;AACA,SAASjC,OAAO,IAAIkC,gCAApB,QAA4D,+BAA5D","sourcesContent":["// Utils.\nexport { default as createHigherOrderComponent } from './utils/create-higher-order-component';\n\n// Compose helper (aliased flowRight from Lodash)\nexport { default as compose } from './higher-order/compose';\n\n// Higher-order components.\nexport { default as ifCondition } from './higher-order/if-condition';\nexport { default as pure } from './higher-order/pure';\nexport { default as withGlobalEvents } from './higher-order/with-global-events';\nexport { default as withInstanceId } from './higher-order/with-instance-id';\nexport { default as withSafeTimeout } from './higher-order/with-safe-timeout';\nexport { default as withState } from './higher-order/with-state';\n\n// Hooks.\nexport { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';\nexport { default as useCopyOnClick } from './hooks/use-copy-on-click';\nexport { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';\nexport { default as __experimentalUseDialog } from './hooks/use-dialog';\nexport { default as useDisabled } from './hooks/use-disabled';\nexport { default as __experimentalUseDragging } from './hooks/use-dragging';\nexport { default as useFocusOnMount } from './hooks/use-focus-on-mount';\nexport { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';\nexport { default as useFocusReturn } from './hooks/use-focus-return';\nexport { default as useInstanceId } from './hooks/use-instance-id';\nexport { default as useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';\nexport { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';\nexport { default as useMediaQuery } from './hooks/use-media-query';\nexport { default as usePrevious } from './hooks/use-previous';\nexport { default as useReducedMotion } from './hooks/use-reduced-motion';\nexport { default as useViewportMatch } from './hooks/use-viewport-match';\nexport { default as useResizeObserver } from './hooks/use-resize-observer';\nexport { default as useAsyncList } from './hooks/use-async-list';\nexport { default as useWarnOnChange } from './hooks/use-warn-on-change';\nexport { default as useDebounce } from './hooks/use-debounce';\nexport { default as useThrottle } from './hooks/use-throttle';\nexport { default as useMergeRefs } from './hooks/use-merge-refs';\nexport { default as useRefEffect } from './hooks/use-ref-effect';\nexport { default as __experimentalUseDropZone } from './hooks/use-drop-zone';\nexport { default as useFocusableIframe } from './hooks/use-focusable-iframe';\nexport { default as __experimentalUseFixedWindowList } from './hooks/use-fixed-window-list';\n"]}
|
|
@@ -26,5 +26,6 @@ export { default as usePreferredColorScheme } from './hooks/use-preferred-color-
|
|
|
26
26
|
export { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';
|
|
27
27
|
export { default as useResizeObserver } from './hooks/use-resize-observer';
|
|
28
28
|
export { default as useDebounce } from './hooks/use-debounce';
|
|
29
|
+
export { default as useThrottle } from './hooks/use-throttle';
|
|
29
30
|
export { default as useMergeRefs } from './hooks/use-merge-refs';
|
|
30
31
|
//# sourceMappingURL=index.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/index.native.js"],"names":["default","createHigherOrderComponent","compose","ifCondition","pure","withGlobalEvents","withInstanceId","withSafeTimeout","withState","withPreferredColorScheme","useConstrainedTabbing","__experimentalUseDragging","__experimentalUseFocusOutside","useInstanceId","useIsomorphicLayoutEffect","useKeyboardShortcut","useMediaQuery","usePrevious","useReducedMotion","useViewportMatch","useAsyncList","usePreferredColorScheme","usePreferredColorSchemeStyle","useResizeObserver","useDebounce","useMergeRefs"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,0BAApB,QAAsD,uCAAtD,C,CAEA;;AACA,SAASD,OAAO,IAAIE,OAApB,QAAmC,wBAAnC,C,CAEA;;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,6BAAvC;AACA,SAASH,OAAO,IAAII,IAApB,QAAgC,qBAAhC;AACA,SAASJ,OAAO,IAAIK,gBAApB,QAA4C,mCAA5C;AACA,SAASL,OAAO,IAAIM,cAApB,QAA0C,iCAA1C;AACA,SAASN,OAAO,IAAIO,eAApB,QAA2C,kCAA3C;AACA,SAASP,OAAO,IAAIQ,SAApB,QAAqC,2BAArC;AACA,SAASR,OAAO,IAAIS,wBAApB,QAAoD,4CAApD,C,CAEA;;AACA,SAAST,OAAO,IAAIU,qBAApB,QAAiD,iCAAjD;AACA,SAASV,OAAO,IAAIW,yBAApB,QAAqD,sBAArD;AACA,SAASX,OAAO,IAAIY,6BAApB,QAAyD,2BAAzD;AACA,SAASZ,OAAO,IAAIa,aAApB,QAAyC,yBAAzC;AACA,SAASb,OAAO,IAAIc,yBAApB,QAAqD,sCAArD;AACA,SAASd,OAAO,IAAIe,mBAApB,QAA+C,+BAA/C;AACA,SAASf,OAAO,IAAIgB,aAApB,QAAyC,yBAAzC;AACA,SAAShB,OAAO,IAAIiB,WAApB,QAAuC,sBAAvC;AACA,SAASjB,OAAO,IAAIkB,gBAApB,QAA4C,4BAA5C;AACA,SAASlB,OAAO,IAAImB,gBAApB,QAA4C,4BAA5C;AACA,SAASnB,OAAO,IAAIoB,YAApB,QAAwC,wBAAxC;AACA,SAASpB,OAAO,IAAIqB,uBAApB,QAAmD,oCAAnD;AACA,SAASrB,OAAO,IAAIsB,4BAApB,QAAwD,0CAAxD;AACA,SAAStB,OAAO,IAAIuB,iBAApB,QAA6C,6BAA7C;AACA,SAASvB,OAAO,IAAIwB,WAApB,QAAuC,sBAAvC;AACA,SAASxB,OAAO,IAAIyB,YAApB,QAAwC,wBAAxC","sourcesContent":["// Utils.\nexport { default as createHigherOrderComponent } from './utils/create-higher-order-component';\n\n// Compose helper (aliased flowRight from Lodash)\nexport { default as compose } from './higher-order/compose';\n\n// Higher-order components.\nexport { default as ifCondition } from './higher-order/if-condition';\nexport { default as pure } from './higher-order/pure';\nexport { default as withGlobalEvents } from './higher-order/with-global-events';\nexport { default as withInstanceId } from './higher-order/with-instance-id';\nexport { default as withSafeTimeout } from './higher-order/with-safe-timeout';\nexport { default as withState } from './higher-order/with-state';\nexport { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme';\n\n// Hooks.\nexport { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';\nexport { default as __experimentalUseDragging } from './hooks/use-dragging';\nexport { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';\nexport { default as useInstanceId } from './hooks/use-instance-id';\nexport { default as useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';\nexport { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';\nexport { default as useMediaQuery } from './hooks/use-media-query';\nexport { default as usePrevious } from './hooks/use-previous';\nexport { default as useReducedMotion } from './hooks/use-reduced-motion';\nexport { default as useViewportMatch } from './hooks/use-viewport-match';\nexport { default as useAsyncList } from './hooks/use-async-list';\nexport { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';\nexport { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';\nexport { default as useResizeObserver } from './hooks/use-resize-observer';\nexport { default as useDebounce } from './hooks/use-debounce';\nexport { default as useMergeRefs } from './hooks/use-merge-refs';\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/index.native.js"],"names":["default","createHigherOrderComponent","compose","ifCondition","pure","withGlobalEvents","withInstanceId","withSafeTimeout","withState","withPreferredColorScheme","useConstrainedTabbing","__experimentalUseDragging","__experimentalUseFocusOutside","useInstanceId","useIsomorphicLayoutEffect","useKeyboardShortcut","useMediaQuery","usePrevious","useReducedMotion","useViewportMatch","useAsyncList","usePreferredColorScheme","usePreferredColorSchemeStyle","useResizeObserver","useDebounce","useThrottle","useMergeRefs"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,0BAApB,QAAsD,uCAAtD,C,CAEA;;AACA,SAASD,OAAO,IAAIE,OAApB,QAAmC,wBAAnC,C,CAEA;;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,6BAAvC;AACA,SAASH,OAAO,IAAII,IAApB,QAAgC,qBAAhC;AACA,SAASJ,OAAO,IAAIK,gBAApB,QAA4C,mCAA5C;AACA,SAASL,OAAO,IAAIM,cAApB,QAA0C,iCAA1C;AACA,SAASN,OAAO,IAAIO,eAApB,QAA2C,kCAA3C;AACA,SAASP,OAAO,IAAIQ,SAApB,QAAqC,2BAArC;AACA,SAASR,OAAO,IAAIS,wBAApB,QAAoD,4CAApD,C,CAEA;;AACA,SAAST,OAAO,IAAIU,qBAApB,QAAiD,iCAAjD;AACA,SAASV,OAAO,IAAIW,yBAApB,QAAqD,sBAArD;AACA,SAASX,OAAO,IAAIY,6BAApB,QAAyD,2BAAzD;AACA,SAASZ,OAAO,IAAIa,aAApB,QAAyC,yBAAzC;AACA,SAASb,OAAO,IAAIc,yBAApB,QAAqD,sCAArD;AACA,SAASd,OAAO,IAAIe,mBAApB,QAA+C,+BAA/C;AACA,SAASf,OAAO,IAAIgB,aAApB,QAAyC,yBAAzC;AACA,SAAShB,OAAO,IAAIiB,WAApB,QAAuC,sBAAvC;AACA,SAASjB,OAAO,IAAIkB,gBAApB,QAA4C,4BAA5C;AACA,SAASlB,OAAO,IAAImB,gBAApB,QAA4C,4BAA5C;AACA,SAASnB,OAAO,IAAIoB,YAApB,QAAwC,wBAAxC;AACA,SAASpB,OAAO,IAAIqB,uBAApB,QAAmD,oCAAnD;AACA,SAASrB,OAAO,IAAIsB,4BAApB,QAAwD,0CAAxD;AACA,SAAStB,OAAO,IAAIuB,iBAApB,QAA6C,6BAA7C;AACA,SAASvB,OAAO,IAAIwB,WAApB,QAAuC,sBAAvC;AACA,SAASxB,OAAO,IAAIyB,WAApB,QAAuC,sBAAvC;AACA,SAASzB,OAAO,IAAI0B,YAApB,QAAwC,wBAAxC","sourcesContent":["// Utils.\nexport { default as createHigherOrderComponent } from './utils/create-higher-order-component';\n\n// Compose helper (aliased flowRight from Lodash)\nexport { default as compose } from './higher-order/compose';\n\n// Higher-order components.\nexport { default as ifCondition } from './higher-order/if-condition';\nexport { default as pure } from './higher-order/pure';\nexport { default as withGlobalEvents } from './higher-order/with-global-events';\nexport { default as withInstanceId } from './higher-order/with-instance-id';\nexport { default as withSafeTimeout } from './higher-order/with-safe-timeout';\nexport { default as withState } from './higher-order/with-state';\nexport { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme';\n\n// Hooks.\nexport { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';\nexport { default as __experimentalUseDragging } from './hooks/use-dragging';\nexport { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';\nexport { default as useInstanceId } from './hooks/use-instance-id';\nexport { default as useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';\nexport { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';\nexport { default as useMediaQuery } from './hooks/use-media-query';\nexport { default as usePrevious } from './hooks/use-previous';\nexport { default as useReducedMotion } from './hooks/use-reduced-motion';\nexport { default as useViewportMatch } from './hooks/use-viewport-match';\nexport { default as useAsyncList } from './hooks/use-async-list';\nexport { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';\nexport { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';\nexport { default as useResizeObserver } from './hooks/use-resize-observer';\nexport { default as useDebounce } from './hooks/use-debounce';\nexport { default as useThrottle } from './hooks/use-throttle';\nexport { default as useMergeRefs } from './hooks/use-merge-refs';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/if-condition/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/if-condition/index.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,WAAW,qEACgB,OAAO,2HAWtC,CAAC;AAEH,eAAe,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-instance-id/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-instance-id/index.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,cAAc;gBACP,MAAM,GAAG,MAAM;qHAOP,CAAC;AAEtB,eAAe,cAAc,CAAC"}
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
* (input fields, links, buttons, etc.) need to be disabled. This hook adds the
|
|
4
4
|
* behavior to disable nested DOM elements to the returned ref.
|
|
5
5
|
*
|
|
6
|
-
* @
|
|
6
|
+
* @param {Object} config Configuration object.
|
|
7
|
+
* @param {boolean=} config.isDisabled Whether the element should be disabled.
|
|
8
|
+
* @return {import('react').RefCallback<HTMLElement>} Element Ref.
|
|
7
9
|
*
|
|
8
10
|
* @example
|
|
9
11
|
* ```js
|
|
10
|
-
* import {
|
|
12
|
+
* import { useDisabled } from '@wordpress/compose';
|
|
11
13
|
* const DisabledExample = () => {
|
|
12
14
|
* const disabledRef = useDisabled();
|
|
13
15
|
* return (
|
|
@@ -19,5 +21,7 @@
|
|
|
19
21
|
* };
|
|
20
22
|
* ```
|
|
21
23
|
*/
|
|
22
|
-
export default function useDisabled(
|
|
24
|
+
export default function useDisabled({ isDisabled: isDisabledProp, }?: {
|
|
25
|
+
isDisabled?: boolean | undefined;
|
|
26
|
+
}): import('react').RefCallback<HTMLElement>;
|
|
23
27
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH;IAjB4B,UAAU,GAA3B,OAAO;IACN,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAiKnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAiDnD"}
|
|
@@ -21,5 +21,5 @@ import type { DependencyList, RefCallback } from 'react';
|
|
|
21
21
|
*
|
|
22
22
|
* @return Ref callback.
|
|
23
23
|
*/
|
|
24
|
-
export default function useRefEffect<TElement = Node>(callback: (node: TElement) => (() => void) |
|
|
24
|
+
export default function useRefEffect<TElement = Node>(callback: (node: TElement) => (() => void) | void, dependencies: DependencyList): RefCallback<TElement | null>;
|
|
25
25
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-ref-effect/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,QAAQ,GAAG,IAAI,EACpD,QAAQ,EAAE,CAAE,IAAI,EAAE,QAAQ,KAAM,CAAE,MAAM,IAAI,CAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-ref-effect/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,QAAQ,GAAG,IAAI,EACpD,QAAQ,EAAE,CAAE,IAAI,EAAE,QAAQ,KAAM,CAAE,MAAM,IAAI,CAAE,GAAG,IAAI,EACrD,YAAY,EAAE,cAAc,GAC1B,WAAW,CAAE,QAAQ,GAAG,IAAI,CAAE,CAShC"}
|
|
@@ -1,3 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import type { WPElement } from '@wordpress/element';
|
|
2
|
+
declare global {
|
|
3
|
+
interface ResizeObserverEntry {
|
|
4
|
+
readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Hook which allows to listen the resize event of any target element when it changes sizes.
|
|
9
|
+
* _Note: `useResizeObserver` will report `null` until after first render.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
*
|
|
13
|
+
* ```js
|
|
14
|
+
* const App = () => {
|
|
15
|
+
* const [ resizeListener, sizes ] = useResizeObserver();
|
|
16
|
+
*
|
|
17
|
+
* return (
|
|
18
|
+
* <div>
|
|
19
|
+
* { resizeListener }
|
|
20
|
+
* Your content here
|
|
21
|
+
* </div>
|
|
22
|
+
* );
|
|
23
|
+
* };
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export default function useResizeAware(): [
|
|
27
|
+
WPElement,
|
|
28
|
+
{
|
|
29
|
+
width: number | null;
|
|
30
|
+
height: number | null;
|
|
31
|
+
}
|
|
32
|
+
];
|
|
3
33
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AA6FpD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,mBAAmB;QAC5B,QAAQ,CAAC,yBAAyB,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;KACxE;CACD;AA4MD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI;IACzC,SAAS;IACT;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE;CAC/C,CAuBA"}
|
package/build-types/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export { default as useConstrainedTabbing } from "./hooks/use-constrained-tabbin
|
|
|
10
10
|
export { default as useCopyOnClick } from "./hooks/use-copy-on-click";
|
|
11
11
|
export { default as useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
|
|
12
12
|
export { default as __experimentalUseDialog } from "./hooks/use-dialog";
|
|
13
|
-
export { default as
|
|
13
|
+
export { default as useDisabled } from "./hooks/use-disabled";
|
|
14
14
|
export { default as __experimentalUseDragging } from "./hooks/use-dragging";
|
|
15
15
|
export { default as useFocusOnMount } from "./hooks/use-focus-on-mount";
|
|
16
16
|
export { default as __experimentalUseFocusOutside } from "./hooks/use-focus-outside";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/compose",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.7.0",
|
|
4
4
|
"description": "WordPress higher-order components (HOCs).",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -32,16 +32,15 @@
|
|
|
32
32
|
"@babel/runtime": "^7.16.0",
|
|
33
33
|
"@types/lodash": "^4.14.172",
|
|
34
34
|
"@types/mousetrap": "^1.6.8",
|
|
35
|
-
"@wordpress/deprecated": "^3.
|
|
36
|
-
"@wordpress/dom": "^3.
|
|
37
|
-
"@wordpress/element": "^4.
|
|
38
|
-
"@wordpress/is-shallow-equal": "^4.
|
|
39
|
-
"@wordpress/keycodes": "^3.
|
|
40
|
-
"@wordpress/priority-queue": "^2.
|
|
35
|
+
"@wordpress/deprecated": "^3.9.0",
|
|
36
|
+
"@wordpress/dom": "^3.9.0",
|
|
37
|
+
"@wordpress/element": "^4.7.0",
|
|
38
|
+
"@wordpress/is-shallow-equal": "^4.9.0",
|
|
39
|
+
"@wordpress/keycodes": "^3.9.0",
|
|
40
|
+
"@wordpress/priority-queue": "^2.9.0",
|
|
41
41
|
"clipboard": "^2.0.8",
|
|
42
42
|
"lodash": "^4.17.21",
|
|
43
43
|
"mousetrap": "^1.6.5",
|
|
44
|
-
"react-resize-aware": "^3.1.0",
|
|
45
44
|
"use-memo-one": "^1.1.1"
|
|
46
45
|
},
|
|
47
46
|
"peerDependencies": {
|
|
@@ -50,5 +49,5 @@
|
|
|
50
49
|
"publishConfig": {
|
|
51
50
|
"access": "public"
|
|
52
51
|
},
|
|
53
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
|
|
54
53
|
}
|