@arun-dev/headless 4.19.0 → 4.19.1
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/dist/checkbox/index.cjs +38 -20
- package/dist/checkbox/index.js +2 -1
- package/dist/{chunk-IWUVUY76.js → chunk-FDGT4JPK.js} +12 -6
- package/dist/chunk-JJ5FACZU.js +19 -0
- package/dist/otp-input/index.cjs +42 -28
- package/dist/otp-input/index.js +7 -4
- package/dist/radio-group/index.cjs +43 -27
- package/dist/radio-group/index.js +11 -6
- package/dist/switch/index.cjs +38 -20
- package/dist/switch/index.js +2 -1
- package/package.json +1 -1
package/dist/checkbox/index.cjs
CHANGED
|
@@ -32,7 +32,7 @@ __export(index_parts_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
// src/checkbox/CheckboxRoot.tsx
|
|
35
|
-
var
|
|
35
|
+
var import_react6 = require("react");
|
|
36
36
|
|
|
37
37
|
// src/core/useControlled.ts
|
|
38
38
|
var import_react = require("react");
|
|
@@ -68,7 +68,24 @@ function useControlled({
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
// src/core/useFormReset.ts
|
|
71
|
+
var import_react3 = require("react");
|
|
72
|
+
|
|
73
|
+
// src/core/useLatest.ts
|
|
71
74
|
var import_react2 = require("react");
|
|
75
|
+
function useLatest(value) {
|
|
76
|
+
const ref = (0, import_react2.useRef)(value);
|
|
77
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
78
|
+
ref.current = value;
|
|
79
|
+
});
|
|
80
|
+
return ref;
|
|
81
|
+
}
|
|
82
|
+
function afterReset(event, work) {
|
|
83
|
+
setTimeout(() => {
|
|
84
|
+
if (!event.defaultPrevented) work();
|
|
85
|
+
}, 0);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// src/core/useFormReset.ts
|
|
72
89
|
function useFormReset({
|
|
73
90
|
elementRef,
|
|
74
91
|
inputRef,
|
|
@@ -76,25 +93,26 @@ function useFormReset({
|
|
|
76
93
|
inputChecked,
|
|
77
94
|
commit
|
|
78
95
|
}) {
|
|
79
|
-
const { current: initialValue } = (0,
|
|
80
|
-
(
|
|
96
|
+
const { current: initialValue } = (0, import_react3.useRef)(value);
|
|
97
|
+
const latest = useLatest({ value, inputChecked, commit });
|
|
98
|
+
(0, import_react3.useEffect)(() => {
|
|
81
99
|
const form = elementRef.current?.form;
|
|
82
100
|
if (!form) return;
|
|
83
101
|
function onReset(event) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
if (inputRef.current) inputRef.current.checked =
|
|
87
|
-
if (
|
|
88
|
-
|
|
102
|
+
afterReset(event, () => {
|
|
103
|
+
const { value: current, inputChecked: checked, commit: set } = latest.current;
|
|
104
|
+
if (inputRef.current) inputRef.current.checked = checked;
|
|
105
|
+
if (current === initialValue) return;
|
|
106
|
+
set(initialValue);
|
|
89
107
|
});
|
|
90
108
|
}
|
|
91
109
|
form.addEventListener("reset", onReset);
|
|
92
110
|
return () => form.removeEventListener("reset", onReset);
|
|
93
|
-
}, [elementRef, inputRef,
|
|
111
|
+
}, [elementRef, inputRef, latest, initialValue]);
|
|
94
112
|
}
|
|
95
113
|
|
|
96
114
|
// src/core/useRender.ts
|
|
97
|
-
var
|
|
115
|
+
var import_react4 = require("react");
|
|
98
116
|
|
|
99
117
|
// src/core/mergeProps.ts
|
|
100
118
|
function isEventHandler(key) {
|
|
@@ -176,17 +194,17 @@ function useRender({
|
|
|
176
194
|
consumerProps
|
|
177
195
|
}) {
|
|
178
196
|
const merged = mergeProps(props, consumerProps);
|
|
179
|
-
if ((0,
|
|
180
|
-
return (0,
|
|
197
|
+
if ((0, import_react4.isValidElement)(render)) {
|
|
198
|
+
return (0, import_react4.cloneElement)(render, mergeProps(merged, render.props));
|
|
181
199
|
}
|
|
182
|
-
return (0,
|
|
200
|
+
return (0, import_react4.createElement)(defaultTagName, merged);
|
|
183
201
|
}
|
|
184
202
|
|
|
185
203
|
// src/checkbox/CheckboxRootContext.ts
|
|
186
|
-
var
|
|
187
|
-
var CheckboxRootContext = (0,
|
|
204
|
+
var import_react5 = require("react");
|
|
205
|
+
var CheckboxRootContext = (0, import_react5.createContext)(null);
|
|
188
206
|
function useCheckboxRootContext() {
|
|
189
|
-
const context = (0,
|
|
207
|
+
const context = (0, import_react5.useContext)(CheckboxRootContext);
|
|
190
208
|
if (context === null) {
|
|
191
209
|
throw new Error("<Checkbox.Indicator> must be rendered inside <Checkbox.Root>.");
|
|
192
210
|
}
|
|
@@ -223,16 +241,16 @@ function CheckboxRoot({
|
|
|
223
241
|
name: "Checkbox.Root",
|
|
224
242
|
state: "checked"
|
|
225
243
|
});
|
|
226
|
-
const commitChecked = (0,
|
|
244
|
+
const commitChecked = (0, import_react6.useCallback)(
|
|
227
245
|
(next) => {
|
|
228
246
|
setChecked(next);
|
|
229
247
|
onCheckedChange?.(next);
|
|
230
248
|
},
|
|
231
249
|
[setChecked, onCheckedChange]
|
|
232
250
|
);
|
|
233
|
-
const state = (0,
|
|
234
|
-
const elementRef = (0,
|
|
235
|
-
const inputRef = (0,
|
|
251
|
+
const state = (0, import_react6.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
|
|
252
|
+
const elementRef = (0, import_react6.useRef)(null);
|
|
253
|
+
const inputRef = (0, import_react6.useRef)(null);
|
|
236
254
|
const submitted = checked === true;
|
|
237
255
|
useFormReset({
|
|
238
256
|
elementRef,
|
package/dist/checkbox/index.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import {
|
|
2
|
+
afterReset,
|
|
3
|
+
useLatest
|
|
4
|
+
} from "./chunk-JJ5FACZU.js";
|
|
5
|
+
|
|
1
6
|
// src/core/useFormReset.ts
|
|
2
7
|
import { useEffect, useRef } from "react";
|
|
3
8
|
function useFormReset({
|
|
@@ -8,20 +13,21 @@ function useFormReset({
|
|
|
8
13
|
commit
|
|
9
14
|
}) {
|
|
10
15
|
const { current: initialValue } = useRef(value);
|
|
16
|
+
const latest = useLatest({ value, inputChecked, commit });
|
|
11
17
|
useEffect(() => {
|
|
12
18
|
const form = elementRef.current?.form;
|
|
13
19
|
if (!form) return;
|
|
14
20
|
function onReset(event) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
if (inputRef.current) inputRef.current.checked =
|
|
18
|
-
if (
|
|
19
|
-
|
|
21
|
+
afterReset(event, () => {
|
|
22
|
+
const { value: current, inputChecked: checked, commit: set } = latest.current;
|
|
23
|
+
if (inputRef.current) inputRef.current.checked = checked;
|
|
24
|
+
if (current === initialValue) return;
|
|
25
|
+
set(initialValue);
|
|
20
26
|
});
|
|
21
27
|
}
|
|
22
28
|
form.addEventListener("reset", onReset);
|
|
23
29
|
return () => form.removeEventListener("reset", onReset);
|
|
24
|
-
}, [elementRef, inputRef,
|
|
30
|
+
}, [elementRef, inputRef, latest, initialValue]);
|
|
25
31
|
}
|
|
26
32
|
|
|
27
33
|
export {
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// src/core/useLatest.ts
|
|
2
|
+
import { useLayoutEffect, useRef } from "react";
|
|
3
|
+
function useLatest(value) {
|
|
4
|
+
const ref = useRef(value);
|
|
5
|
+
useLayoutEffect(() => {
|
|
6
|
+
ref.current = value;
|
|
7
|
+
});
|
|
8
|
+
return ref;
|
|
9
|
+
}
|
|
10
|
+
function afterReset(event, work) {
|
|
11
|
+
setTimeout(() => {
|
|
12
|
+
if (!event.defaultPrevented) work();
|
|
13
|
+
}, 0);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export {
|
|
17
|
+
useLatest,
|
|
18
|
+
afterReset
|
|
19
|
+
};
|
package/dist/otp-input/index.cjs
CHANGED
|
@@ -33,7 +33,7 @@ __export(index_parts_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
|
|
35
35
|
// src/otp-input/OtpInputRoot.tsx
|
|
36
|
-
var
|
|
36
|
+
var import_react5 = require("react");
|
|
37
37
|
|
|
38
38
|
// src/core/useControlled.ts
|
|
39
39
|
var import_react = require("react");
|
|
@@ -68,8 +68,23 @@ function useControlled({
|
|
|
68
68
|
return [value, setValue];
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
// src/core/
|
|
71
|
+
// src/core/useLatest.ts
|
|
72
72
|
var import_react2 = require("react");
|
|
73
|
+
function useLatest(value) {
|
|
74
|
+
const ref = (0, import_react2.useRef)(value);
|
|
75
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
76
|
+
ref.current = value;
|
|
77
|
+
});
|
|
78
|
+
return ref;
|
|
79
|
+
}
|
|
80
|
+
function afterReset(event, work) {
|
|
81
|
+
setTimeout(() => {
|
|
82
|
+
if (!event.defaultPrevented) work();
|
|
83
|
+
}, 0);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// src/core/useRender.ts
|
|
87
|
+
var import_react3 = require("react");
|
|
73
88
|
|
|
74
89
|
// src/core/mergeProps.ts
|
|
75
90
|
function isEventHandler(key) {
|
|
@@ -151,17 +166,17 @@ function useRender({
|
|
|
151
166
|
consumerProps
|
|
152
167
|
}) {
|
|
153
168
|
const merged = mergeProps(props, consumerProps);
|
|
154
|
-
if ((0,
|
|
155
|
-
return (0,
|
|
169
|
+
if ((0, import_react3.isValidElement)(render)) {
|
|
170
|
+
return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
|
|
156
171
|
}
|
|
157
|
-
return (0,
|
|
172
|
+
return (0, import_react3.createElement)(defaultTagName, merged);
|
|
158
173
|
}
|
|
159
174
|
|
|
160
175
|
// src/otp-input/OtpInputRootContext.ts
|
|
161
|
-
var
|
|
162
|
-
var OtpInputRootContext = (0,
|
|
176
|
+
var import_react4 = require("react");
|
|
177
|
+
var OtpInputRootContext = (0, import_react4.createContext)(null);
|
|
163
178
|
function useOtpInputRootContext(part) {
|
|
164
|
-
const context = (0,
|
|
179
|
+
const context = (0, import_react4.useContext)(OtpInputRootContext);
|
|
165
180
|
if (context === null) {
|
|
166
181
|
throw new Error(`<OtpInput.${part}> must be rendered inside <OtpInput.Root>.`);
|
|
167
182
|
}
|
|
@@ -206,7 +221,7 @@ function OtpInputRoot({
|
|
|
206
221
|
name: "OtpInput.Root",
|
|
207
222
|
state: "value"
|
|
208
223
|
});
|
|
209
|
-
const commit = (0,
|
|
224
|
+
const commit = (0, import_react5.useCallback)(
|
|
210
225
|
(next) => {
|
|
211
226
|
const clean = normalize(next, validationType, length);
|
|
212
227
|
if (clean === value) return;
|
|
@@ -216,14 +231,14 @@ function OtpInputRoot({
|
|
|
216
231
|
},
|
|
217
232
|
[validationType, length, value, setValue, onValueChange, onComplete]
|
|
218
233
|
);
|
|
219
|
-
const [selection, setSelection] = (0,
|
|
220
|
-
const inputRef = (0,
|
|
221
|
-
const slotsRef = (0,
|
|
222
|
-
const registerSlot = (0,
|
|
234
|
+
const [selection, setSelection] = (0, import_react5.useState)(null);
|
|
235
|
+
const inputRef = (0, import_react5.useRef)(null);
|
|
236
|
+
const slotsRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
|
|
237
|
+
const registerSlot = (0, import_react5.useCallback)((index, element2) => {
|
|
223
238
|
if (element2) slotsRef.current.set(index, element2);
|
|
224
239
|
else slotsRef.current.delete(index);
|
|
225
240
|
}, []);
|
|
226
|
-
const slotAt = (0,
|
|
241
|
+
const slotAt = (0, import_react5.useCallback)((clientX) => {
|
|
227
242
|
let nearest = null;
|
|
228
243
|
let distance = Infinity;
|
|
229
244
|
for (const [index, element2] of slotsRef.current) {
|
|
@@ -236,19 +251,18 @@ function OtpInputRoot({
|
|
|
236
251
|
}
|
|
237
252
|
return nearest;
|
|
238
253
|
}, []);
|
|
239
|
-
const { current: initialValue } = (0,
|
|
240
|
-
|
|
254
|
+
const { current: initialValue } = (0, import_react5.useRef)(value);
|
|
255
|
+
const latest = useLatest(commit);
|
|
256
|
+
(0, import_react5.useEffect)(() => {
|
|
241
257
|
const form = inputRef.current?.form;
|
|
242
258
|
if (!form) return;
|
|
243
259
|
function onReset(event) {
|
|
244
|
-
|
|
245
|
-
if (!event.defaultPrevented) commit(initialValue);
|
|
246
|
-
});
|
|
260
|
+
afterReset(event, () => latest.current(initialValue));
|
|
247
261
|
}
|
|
248
262
|
form.addEventListener("reset", onReset);
|
|
249
263
|
return () => form.removeEventListener("reset", onReset);
|
|
250
|
-
}, [
|
|
251
|
-
const context = (0,
|
|
264
|
+
}, [latest, initialValue]);
|
|
265
|
+
const context = (0, import_react5.useMemo)(
|
|
252
266
|
() => ({
|
|
253
267
|
value,
|
|
254
268
|
length,
|
|
@@ -277,7 +291,7 @@ function OtpInputRoot({
|
|
|
277
291
|
}
|
|
278
292
|
|
|
279
293
|
// src/otp-input/OtpInputInput.tsx
|
|
280
|
-
var
|
|
294
|
+
var import_react6 = require("react");
|
|
281
295
|
function OtpInputInput({ render, ...rest }) {
|
|
282
296
|
const { value, length, disabled, validationType, setSelection, commit, inputRef, slotAt } = useOtpInputRootContext("Input");
|
|
283
297
|
function select(input, index) {
|
|
@@ -290,8 +304,8 @@ function OtpInputInput({ render, ...rest }) {
|
|
|
290
304
|
function report(input) {
|
|
291
305
|
setSelection({ start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 });
|
|
292
306
|
}
|
|
293
|
-
const pendingCaret = (0,
|
|
294
|
-
(0,
|
|
307
|
+
const pendingCaret = (0, import_react6.useRef)(null);
|
|
308
|
+
(0, import_react6.useLayoutEffect)(() => {
|
|
295
309
|
const input = inputRef.current;
|
|
296
310
|
const at = pendingCaret.current;
|
|
297
311
|
pendingCaret.current = null;
|
|
@@ -314,7 +328,7 @@ function OtpInputInput({ render, ...rest }) {
|
|
|
314
328
|
edit(cleared(start - 1), start - 1);
|
|
315
329
|
}
|
|
316
330
|
}
|
|
317
|
-
const beforeInput = (0,
|
|
331
|
+
const beforeInput = (0, import_react6.useRef)(() => {
|
|
318
332
|
});
|
|
319
333
|
beforeInput.current = (event) => {
|
|
320
334
|
const input = event.currentTarget;
|
|
@@ -325,7 +339,7 @@ function OtpInputInput({ render, ...rest }) {
|
|
|
325
339
|
if (typed.length > 0 && sanitize(typed, validationType) !== typed) event.preventDefault();
|
|
326
340
|
}
|
|
327
341
|
};
|
|
328
|
-
(0,
|
|
342
|
+
(0, import_react6.useEffect)(() => {
|
|
329
343
|
const input = inputRef.current;
|
|
330
344
|
if (!input) return;
|
|
331
345
|
const listener = (event) => beforeInput.current(event);
|
|
@@ -401,7 +415,7 @@ function OtpInputInput({ render, ...rest }) {
|
|
|
401
415
|
}
|
|
402
416
|
|
|
403
417
|
// src/otp-input/OtpInputSlot.tsx
|
|
404
|
-
var
|
|
418
|
+
var import_react7 = require("react");
|
|
405
419
|
function OtpInputSlot({ index, className, children, render, ...rest }) {
|
|
406
420
|
const { value, length, disabled, selection, registerSlot } = useOtpInputRootContext("Slot");
|
|
407
421
|
const char = value.charAt(index) === GAP ? "" : value.charAt(index);
|
|
@@ -409,7 +423,7 @@ function OtpInputSlot({ index, className, children, render, ...rest }) {
|
|
|
409
423
|
if (selection) {
|
|
410
424
|
active = selection.start === selection.end ? index === Math.min(selection.start, length - 1) : index >= selection.start && index < selection.end;
|
|
411
425
|
}
|
|
412
|
-
const ref = (0,
|
|
426
|
+
const ref = (0, import_react7.useCallback)(
|
|
413
427
|
(element) => registerSlot(index, element),
|
|
414
428
|
[registerSlot, index]
|
|
415
429
|
);
|
package/dist/otp-input/index.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import {
|
|
2
|
+
afterReset,
|
|
3
|
+
useLatest
|
|
4
|
+
} from "../chunk-JJ5FACZU.js";
|
|
1
5
|
import {
|
|
2
6
|
useControlled
|
|
3
7
|
} from "../chunk-UEIB3I3T.js";
|
|
@@ -97,17 +101,16 @@ function OtpInputRoot({
|
|
|
97
101
|
return nearest;
|
|
98
102
|
}, []);
|
|
99
103
|
const { current: initialValue } = useRef(value);
|
|
104
|
+
const latest = useLatest(commit);
|
|
100
105
|
useEffect(() => {
|
|
101
106
|
const form = inputRef.current?.form;
|
|
102
107
|
if (!form) return;
|
|
103
108
|
function onReset(event) {
|
|
104
|
-
|
|
105
|
-
if (!event.defaultPrevented) commit(initialValue);
|
|
106
|
-
});
|
|
109
|
+
afterReset(event, () => latest.current(initialValue));
|
|
107
110
|
}
|
|
108
111
|
form.addEventListener("reset", onReset);
|
|
109
112
|
return () => form.removeEventListener("reset", onReset);
|
|
110
|
-
}, [
|
|
113
|
+
}, [latest, initialValue]);
|
|
111
114
|
const context = useMemo(
|
|
112
115
|
() => ({
|
|
113
116
|
value,
|
|
@@ -32,19 +32,34 @@ __export(index_parts_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
// src/radio-group/RadioGroupRoot.tsx
|
|
35
|
-
var
|
|
35
|
+
var import_react5 = require("react");
|
|
36
36
|
|
|
37
|
-
// src/core/
|
|
37
|
+
// src/core/useLatest.ts
|
|
38
38
|
var import_react = require("react");
|
|
39
|
+
function useLatest(value) {
|
|
40
|
+
const ref = (0, import_react.useRef)(value);
|
|
41
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
42
|
+
ref.current = value;
|
|
43
|
+
});
|
|
44
|
+
return ref;
|
|
45
|
+
}
|
|
46
|
+
function afterReset(event, work) {
|
|
47
|
+
setTimeout(() => {
|
|
48
|
+
if (!event.defaultPrevented) work();
|
|
49
|
+
}, 0);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// src/core/useControlled.ts
|
|
53
|
+
var import_react2 = require("react");
|
|
39
54
|
function useControlled({
|
|
40
55
|
controlled,
|
|
41
56
|
default: defaultValue,
|
|
42
57
|
name = "Component",
|
|
43
58
|
state = "value"
|
|
44
59
|
}) {
|
|
45
|
-
const { current: isControlled } = (0,
|
|
46
|
-
const [uncontrolled, setUncontrolled] = (0,
|
|
47
|
-
const defaultRef = (0,
|
|
60
|
+
const { current: isControlled } = (0, import_react2.useRef)(controlled !== void 0);
|
|
61
|
+
const [uncontrolled, setUncontrolled] = (0, import_react2.useState)(defaultValue);
|
|
62
|
+
const defaultRef = (0, import_react2.useRef)(defaultValue);
|
|
48
63
|
const value = isControlled ? controlled : uncontrolled;
|
|
49
64
|
if (process.env.NODE_ENV !== "production") {
|
|
50
65
|
if (isControlled !== (controlled !== void 0)) {
|
|
@@ -58,7 +73,7 @@ function useControlled({
|
|
|
58
73
|
);
|
|
59
74
|
}
|
|
60
75
|
}
|
|
61
|
-
const setValue = (0,
|
|
76
|
+
const setValue = (0, import_react2.useCallback)(
|
|
62
77
|
(next) => {
|
|
63
78
|
if (!isControlled) setUncontrolled(next);
|
|
64
79
|
},
|
|
@@ -68,7 +83,7 @@ function useControlled({
|
|
|
68
83
|
}
|
|
69
84
|
|
|
70
85
|
// src/core/useRender.ts
|
|
71
|
-
var
|
|
86
|
+
var import_react3 = require("react");
|
|
72
87
|
|
|
73
88
|
// src/core/mergeProps.ts
|
|
74
89
|
function isEventHandler(key) {
|
|
@@ -150,17 +165,17 @@ function useRender({
|
|
|
150
165
|
consumerProps
|
|
151
166
|
}) {
|
|
152
167
|
const merged = mergeProps(props, consumerProps);
|
|
153
|
-
if ((0,
|
|
154
|
-
return (0,
|
|
168
|
+
if ((0, import_react3.isValidElement)(render)) {
|
|
169
|
+
return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
|
|
155
170
|
}
|
|
156
|
-
return (0,
|
|
171
|
+
return (0, import_react3.createElement)(defaultTagName, merged);
|
|
157
172
|
}
|
|
158
173
|
|
|
159
174
|
// src/radio-group/RadioGroupRootContext.ts
|
|
160
|
-
var
|
|
161
|
-
var RadioGroupRootContext = (0,
|
|
175
|
+
var import_react4 = require("react");
|
|
176
|
+
var RadioGroupRootContext = (0, import_react4.createContext)(null);
|
|
162
177
|
function useRadioGroupRootContext() {
|
|
163
|
-
const context = (0,
|
|
178
|
+
const context = (0, import_react4.useContext)(RadioGroupRootContext);
|
|
164
179
|
if (context === null) {
|
|
165
180
|
throw new Error("<RadioGroup.Item> must be rendered inside <RadioGroup.Root>.");
|
|
166
181
|
}
|
|
@@ -208,34 +223,35 @@ function RadioGroupRoot({
|
|
|
208
223
|
name: "RadioGroup.Root",
|
|
209
224
|
state: "value"
|
|
210
225
|
});
|
|
211
|
-
const generatedName = (0,
|
|
226
|
+
const generatedName = (0, import_react5.useId)();
|
|
212
227
|
const name = nameProp ?? generatedName;
|
|
213
|
-
const commitValue = (0,
|
|
228
|
+
const commitValue = (0, import_react5.useCallback)(
|
|
214
229
|
(next) => {
|
|
215
230
|
setValue(next);
|
|
216
231
|
onValueChange?.(next);
|
|
217
232
|
},
|
|
218
233
|
[setValue, onValueChange]
|
|
219
234
|
);
|
|
220
|
-
const elementRef = (0,
|
|
221
|
-
const { current: initialValue } = (0,
|
|
222
|
-
(
|
|
235
|
+
const elementRef = (0, import_react5.useRef)(null);
|
|
236
|
+
const { current: initialValue } = (0, import_react5.useRef)(value);
|
|
237
|
+
const latest = useLatest({ value, commit: commitValue });
|
|
238
|
+
(0, import_react5.useEffect)(() => {
|
|
223
239
|
const owner = radiosIn(elementRef.current, name)[0]?.form;
|
|
224
240
|
if (!owner) return;
|
|
225
241
|
function onReset(event) {
|
|
226
|
-
|
|
227
|
-
|
|
242
|
+
afterReset(event, () => {
|
|
243
|
+
const { value: current, commit } = latest.current;
|
|
228
244
|
for (const input of radiosIn(elementRef.current, name)) {
|
|
229
|
-
input.checked = input.value ===
|
|
245
|
+
input.checked = input.value === current;
|
|
230
246
|
}
|
|
231
|
-
if (
|
|
232
|
-
|
|
247
|
+
if (current === initialValue) return;
|
|
248
|
+
commit(initialValue);
|
|
233
249
|
});
|
|
234
250
|
}
|
|
235
251
|
owner.addEventListener("reset", onReset);
|
|
236
252
|
return () => owner.removeEventListener("reset", onReset);
|
|
237
|
-
}, [name,
|
|
238
|
-
const state = (0,
|
|
253
|
+
}, [name, latest, initialValue]);
|
|
254
|
+
const state = (0, import_react5.useMemo)(
|
|
239
255
|
() => ({ value, disabled, required, name, form, select: commitValue }),
|
|
240
256
|
[value, disabled, required, name, form, commitValue]
|
|
241
257
|
);
|
|
@@ -257,7 +273,7 @@ function RadioGroupRoot({
|
|
|
257
273
|
}
|
|
258
274
|
|
|
259
275
|
// src/radio-group/RadioGroupItem.tsx
|
|
260
|
-
var
|
|
276
|
+
var import_react6 = require("react");
|
|
261
277
|
function RadioGroupItem({
|
|
262
278
|
value,
|
|
263
279
|
disabled: disabledProp = false,
|
|
@@ -268,7 +284,7 @@ function RadioGroupItem({
|
|
|
268
284
|
const group = useRadioGroupRootContext();
|
|
269
285
|
const disabled = group.disabled || disabledProp;
|
|
270
286
|
const checked = group.value === value;
|
|
271
|
-
const state = (0,
|
|
287
|
+
const state = (0, import_react6.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
|
|
272
288
|
return useRender({
|
|
273
289
|
render,
|
|
274
290
|
defaultTagName: "input",
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import {
|
|
2
|
+
afterReset,
|
|
3
|
+
useLatest
|
|
4
|
+
} from "../chunk-JJ5FACZU.js";
|
|
1
5
|
import {
|
|
2
6
|
useControlled
|
|
3
7
|
} from "../chunk-UEIB3I3T.js";
|
|
@@ -79,22 +83,23 @@ function RadioGroupRoot({
|
|
|
79
83
|
);
|
|
80
84
|
const elementRef = useRef(null);
|
|
81
85
|
const { current: initialValue } = useRef(value);
|
|
86
|
+
const latest = useLatest({ value, commit: commitValue });
|
|
82
87
|
useEffect(() => {
|
|
83
88
|
const owner = radiosIn(elementRef.current, name)[0]?.form;
|
|
84
89
|
if (!owner) return;
|
|
85
90
|
function onReset(event) {
|
|
86
|
-
|
|
87
|
-
|
|
91
|
+
afterReset(event, () => {
|
|
92
|
+
const { value: current, commit } = latest.current;
|
|
88
93
|
for (const input of radiosIn(elementRef.current, name)) {
|
|
89
|
-
input.checked = input.value ===
|
|
94
|
+
input.checked = input.value === current;
|
|
90
95
|
}
|
|
91
|
-
if (
|
|
92
|
-
|
|
96
|
+
if (current === initialValue) return;
|
|
97
|
+
commit(initialValue);
|
|
93
98
|
});
|
|
94
99
|
}
|
|
95
100
|
owner.addEventListener("reset", onReset);
|
|
96
101
|
return () => owner.removeEventListener("reset", onReset);
|
|
97
|
-
}, [name,
|
|
102
|
+
}, [name, latest, initialValue]);
|
|
98
103
|
const state = useMemo(
|
|
99
104
|
() => ({ value, disabled, required, name, form, select: commitValue }),
|
|
100
105
|
[value, disabled, required, name, form, commitValue]
|
package/dist/switch/index.cjs
CHANGED
|
@@ -32,7 +32,7 @@ __export(index_parts_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
// src/switch/SwitchRoot.tsx
|
|
35
|
-
var
|
|
35
|
+
var import_react6 = require("react");
|
|
36
36
|
|
|
37
37
|
// src/core/useControlled.ts
|
|
38
38
|
var import_react = require("react");
|
|
@@ -68,7 +68,24 @@ function useControlled({
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
// src/core/useFormReset.ts
|
|
71
|
+
var import_react3 = require("react");
|
|
72
|
+
|
|
73
|
+
// src/core/useLatest.ts
|
|
71
74
|
var import_react2 = require("react");
|
|
75
|
+
function useLatest(value) {
|
|
76
|
+
const ref = (0, import_react2.useRef)(value);
|
|
77
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
78
|
+
ref.current = value;
|
|
79
|
+
});
|
|
80
|
+
return ref;
|
|
81
|
+
}
|
|
82
|
+
function afterReset(event, work) {
|
|
83
|
+
setTimeout(() => {
|
|
84
|
+
if (!event.defaultPrevented) work();
|
|
85
|
+
}, 0);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// src/core/useFormReset.ts
|
|
72
89
|
function useFormReset({
|
|
73
90
|
elementRef,
|
|
74
91
|
inputRef,
|
|
@@ -76,25 +93,26 @@ function useFormReset({
|
|
|
76
93
|
inputChecked,
|
|
77
94
|
commit
|
|
78
95
|
}) {
|
|
79
|
-
const { current: initialValue } = (0,
|
|
80
|
-
(
|
|
96
|
+
const { current: initialValue } = (0, import_react3.useRef)(value);
|
|
97
|
+
const latest = useLatest({ value, inputChecked, commit });
|
|
98
|
+
(0, import_react3.useEffect)(() => {
|
|
81
99
|
const form = elementRef.current?.form;
|
|
82
100
|
if (!form) return;
|
|
83
101
|
function onReset(event) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
if (inputRef.current) inputRef.current.checked =
|
|
87
|
-
if (
|
|
88
|
-
|
|
102
|
+
afterReset(event, () => {
|
|
103
|
+
const { value: current, inputChecked: checked, commit: set } = latest.current;
|
|
104
|
+
if (inputRef.current) inputRef.current.checked = checked;
|
|
105
|
+
if (current === initialValue) return;
|
|
106
|
+
set(initialValue);
|
|
89
107
|
});
|
|
90
108
|
}
|
|
91
109
|
form.addEventListener("reset", onReset);
|
|
92
110
|
return () => form.removeEventListener("reset", onReset);
|
|
93
|
-
}, [elementRef, inputRef,
|
|
111
|
+
}, [elementRef, inputRef, latest, initialValue]);
|
|
94
112
|
}
|
|
95
113
|
|
|
96
114
|
// src/core/useRender.ts
|
|
97
|
-
var
|
|
115
|
+
var import_react4 = require("react");
|
|
98
116
|
|
|
99
117
|
// src/core/mergeProps.ts
|
|
100
118
|
function isEventHandler(key) {
|
|
@@ -176,17 +194,17 @@ function useRender({
|
|
|
176
194
|
consumerProps
|
|
177
195
|
}) {
|
|
178
196
|
const merged = mergeProps(props, consumerProps);
|
|
179
|
-
if ((0,
|
|
180
|
-
return (0,
|
|
197
|
+
if ((0, import_react4.isValidElement)(render)) {
|
|
198
|
+
return (0, import_react4.cloneElement)(render, mergeProps(merged, render.props));
|
|
181
199
|
}
|
|
182
|
-
return (0,
|
|
200
|
+
return (0, import_react4.createElement)(defaultTagName, merged);
|
|
183
201
|
}
|
|
184
202
|
|
|
185
203
|
// src/switch/SwitchRootContext.ts
|
|
186
|
-
var
|
|
187
|
-
var SwitchRootContext = (0,
|
|
204
|
+
var import_react5 = require("react");
|
|
205
|
+
var SwitchRootContext = (0, import_react5.createContext)(null);
|
|
188
206
|
function useSwitchRootContext() {
|
|
189
|
-
const context = (0,
|
|
207
|
+
const context = (0, import_react5.useContext)(SwitchRootContext);
|
|
190
208
|
if (context === null) {
|
|
191
209
|
throw new Error("<Switch.Thumb> must be rendered inside <Switch.Root>.");
|
|
192
210
|
}
|
|
@@ -222,16 +240,16 @@ function SwitchRoot({
|
|
|
222
240
|
name: "Switch.Root",
|
|
223
241
|
state: "checked"
|
|
224
242
|
});
|
|
225
|
-
const commitChecked = (0,
|
|
243
|
+
const commitChecked = (0, import_react6.useCallback)(
|
|
226
244
|
(next) => {
|
|
227
245
|
setChecked(next);
|
|
228
246
|
onCheckedChange?.(next);
|
|
229
247
|
},
|
|
230
248
|
[setChecked, onCheckedChange]
|
|
231
249
|
);
|
|
232
|
-
const state = (0,
|
|
233
|
-
const elementRef = (0,
|
|
234
|
-
const inputRef = (0,
|
|
250
|
+
const state = (0, import_react6.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
|
|
251
|
+
const elementRef = (0, import_react6.useRef)(null);
|
|
252
|
+
const inputRef = (0, import_react6.useRef)(null);
|
|
235
253
|
useFormReset({
|
|
236
254
|
elementRef,
|
|
237
255
|
inputRef,
|
package/dist/switch/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arun-dev/headless",
|
|
3
|
-
"version": "4.19.
|
|
3
|
+
"version": "4.19.1",
|
|
4
4
|
"description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|