@zag-js/radio-group 0.50.0 → 0.51.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/index.js +1 -458
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -425
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -8
package/dist/index.js
CHANGED
|
@@ -1,459 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
anatomy: () => anatomy,
|
|
24
|
-
connect: () => connect,
|
|
25
|
-
itemProps: () => itemProps,
|
|
26
|
-
machine: () => machine,
|
|
27
|
-
props: () => props,
|
|
28
|
-
splitItemProps: () => splitItemProps,
|
|
29
|
-
splitProps: () => splitProps
|
|
30
|
-
});
|
|
31
|
-
module.exports = __toCommonJS(src_exports);
|
|
32
|
-
|
|
33
|
-
// src/radio-group.anatomy.ts
|
|
34
|
-
var import_anatomy = require("@zag-js/anatomy");
|
|
35
|
-
var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
|
|
36
|
-
"root",
|
|
37
|
-
"label",
|
|
38
|
-
"item",
|
|
39
|
-
"itemText",
|
|
40
|
-
"itemControl",
|
|
41
|
-
"indicator"
|
|
42
|
-
);
|
|
43
|
-
var parts = anatomy.build();
|
|
44
|
-
|
|
45
|
-
// src/radio-group.connect.ts
|
|
46
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
47
|
-
|
|
48
|
-
// src/radio-group.dom.ts
|
|
49
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
50
|
-
var dom = (0, import_dom_query.createScope)({
|
|
51
|
-
getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
|
|
52
|
-
getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
|
|
53
|
-
getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
|
|
54
|
-
getItemHiddenInputId: (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
|
|
55
|
-
getItemControlId: (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
|
|
56
|
-
getItemLabelId: (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
|
|
57
|
-
getIndicatorId: (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
|
|
58
|
-
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
59
|
-
getItemHiddenInputEl: (ctx, value) => dom.getById(ctx, dom.getItemHiddenInputId(ctx, value)),
|
|
60
|
-
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
61
|
-
getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
|
|
62
|
-
getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
|
|
63
|
-
getInputEls: (ctx) => {
|
|
64
|
-
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
65
|
-
const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
|
|
66
|
-
return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
|
|
67
|
-
},
|
|
68
|
-
getActiveRadioEl: (ctx) => {
|
|
69
|
-
if (!ctx.value)
|
|
70
|
-
return;
|
|
71
|
-
return dom.getById(ctx, dom.getItemId(ctx, ctx.value));
|
|
72
|
-
},
|
|
73
|
-
getOffsetRect: (el) => ({
|
|
74
|
-
left: el?.offsetLeft ?? 0,
|
|
75
|
-
top: el?.offsetTop ?? 0,
|
|
76
|
-
width: el?.offsetWidth ?? 0,
|
|
77
|
-
height: el?.offsetHeight ?? 0
|
|
78
|
-
}),
|
|
79
|
-
getRectById: (ctx, id) => {
|
|
80
|
-
const radioEl = dom.getById(ctx, dom.getItemId(ctx, id));
|
|
81
|
-
if (!radioEl)
|
|
82
|
-
return;
|
|
83
|
-
return dom.resolveRect(dom.getOffsetRect(radioEl));
|
|
84
|
-
},
|
|
85
|
-
resolveRect: (rect) => ({
|
|
86
|
-
width: `${rect.width}px`,
|
|
87
|
-
height: `${rect.height}px`,
|
|
88
|
-
left: `${rect.left}px`,
|
|
89
|
-
top: `${rect.top}px`
|
|
90
|
-
})
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
// src/radio-group.connect.ts
|
|
94
|
-
function connect(state, send, normalize) {
|
|
95
|
-
const groupDisabled = state.context.isDisabled;
|
|
96
|
-
const readOnly = state.context.readOnly;
|
|
97
|
-
function getItemState(props2) {
|
|
98
|
-
return {
|
|
99
|
-
invalid: !!props2.invalid,
|
|
100
|
-
disabled: !!props2.disabled || groupDisabled,
|
|
101
|
-
checked: state.context.value === props2.value,
|
|
102
|
-
focused: state.context.focusedValue === props2.value,
|
|
103
|
-
hovered: state.context.hoveredValue === props2.value,
|
|
104
|
-
active: state.context.activeValue === props2.value
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
function getItemDataAttrs(props2) {
|
|
108
|
-
const radioState = getItemState(props2);
|
|
109
|
-
return {
|
|
110
|
-
"data-focus": (0, import_dom_query2.dataAttr)(radioState.focused),
|
|
111
|
-
"data-disabled": (0, import_dom_query2.dataAttr)(radioState.disabled),
|
|
112
|
-
"dats-readonly": (0, import_dom_query2.dataAttr)(readOnly),
|
|
113
|
-
"data-state": radioState.checked ? "checked" : "unchecked",
|
|
114
|
-
"data-hover": (0, import_dom_query2.dataAttr)(radioState.hovered),
|
|
115
|
-
"data-invalid": (0, import_dom_query2.dataAttr)(radioState.invalid),
|
|
116
|
-
"data-orientation": state.context.orientation
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
const focus = () => {
|
|
120
|
-
const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
|
|
121
|
-
if (firstEnabledAndCheckedInput) {
|
|
122
|
-
firstEnabledAndCheckedInput.focus();
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
|
|
126
|
-
firstEnabledInput?.focus();
|
|
127
|
-
};
|
|
128
|
-
return {
|
|
129
|
-
focus,
|
|
130
|
-
value: state.context.value,
|
|
131
|
-
setValue(value) {
|
|
132
|
-
send({ type: "SET_VALUE", value, isTrusted: false });
|
|
133
|
-
},
|
|
134
|
-
clearValue() {
|
|
135
|
-
send({ type: "SET_VALUE", value: null, isTrusted: false });
|
|
136
|
-
},
|
|
137
|
-
getItemState,
|
|
138
|
-
rootProps: normalize.element({
|
|
139
|
-
...parts.root.attrs,
|
|
140
|
-
role: "radiogroup",
|
|
141
|
-
id: dom.getRootId(state.context),
|
|
142
|
-
"aria-labelledby": dom.getLabelId(state.context),
|
|
143
|
-
"data-orientation": state.context.orientation,
|
|
144
|
-
"data-disabled": (0, import_dom_query2.dataAttr)(groupDisabled),
|
|
145
|
-
"aria-orientation": state.context.orientation,
|
|
146
|
-
dir: state.context.dir,
|
|
147
|
-
style: {
|
|
148
|
-
position: "relative"
|
|
149
|
-
}
|
|
150
|
-
}),
|
|
151
|
-
labelProps: normalize.element({
|
|
152
|
-
...parts.label.attrs,
|
|
153
|
-
dir: state.context.dir,
|
|
154
|
-
"data-orientation": state.context.orientation,
|
|
155
|
-
"data-disabled": (0, import_dom_query2.dataAttr)(groupDisabled),
|
|
156
|
-
id: dom.getLabelId(state.context),
|
|
157
|
-
onClick: focus
|
|
158
|
-
}),
|
|
159
|
-
getItemProps(props2) {
|
|
160
|
-
const itemState = getItemState(props2);
|
|
161
|
-
return normalize.label({
|
|
162
|
-
...parts.item.attrs,
|
|
163
|
-
dir: state.context.dir,
|
|
164
|
-
id: dom.getItemId(state.context, props2.value),
|
|
165
|
-
htmlFor: dom.getItemHiddenInputId(state.context, props2.value),
|
|
166
|
-
...getItemDataAttrs(props2),
|
|
167
|
-
onPointerMove() {
|
|
168
|
-
if (itemState.disabled)
|
|
169
|
-
return;
|
|
170
|
-
if (itemState.hovered)
|
|
171
|
-
return;
|
|
172
|
-
send({ type: "SET_HOVERED", value: props2.value, hovered: true });
|
|
173
|
-
},
|
|
174
|
-
onPointerLeave() {
|
|
175
|
-
if (itemState.disabled)
|
|
176
|
-
return;
|
|
177
|
-
send({ type: "SET_HOVERED", value: null });
|
|
178
|
-
},
|
|
179
|
-
onPointerDown(event) {
|
|
180
|
-
if (itemState.disabled)
|
|
181
|
-
return;
|
|
182
|
-
if (itemState.focused && event.pointerType === "mouse") {
|
|
183
|
-
event.preventDefault();
|
|
184
|
-
}
|
|
185
|
-
send({ type: "SET_ACTIVE", value: props2.value, active: true });
|
|
186
|
-
},
|
|
187
|
-
onPointerUp() {
|
|
188
|
-
if (itemState.disabled)
|
|
189
|
-
return;
|
|
190
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
191
|
-
}
|
|
192
|
-
});
|
|
193
|
-
},
|
|
194
|
-
getItemTextProps(props2) {
|
|
195
|
-
return normalize.element({
|
|
196
|
-
...parts.itemText.attrs,
|
|
197
|
-
dir: state.context.dir,
|
|
198
|
-
id: dom.getItemLabelId(state.context, props2.value),
|
|
199
|
-
...getItemDataAttrs(props2)
|
|
200
|
-
});
|
|
201
|
-
},
|
|
202
|
-
getItemControlProps(props2) {
|
|
203
|
-
const controlState = getItemState(props2);
|
|
204
|
-
return normalize.element({
|
|
205
|
-
...parts.itemControl.attrs,
|
|
206
|
-
dir: state.context.dir,
|
|
207
|
-
id: dom.getItemControlId(state.context, props2.value),
|
|
208
|
-
"data-active": (0, import_dom_query2.dataAttr)(controlState.active),
|
|
209
|
-
"aria-hidden": true,
|
|
210
|
-
...getItemDataAttrs(props2)
|
|
211
|
-
});
|
|
212
|
-
},
|
|
213
|
-
getItemHiddenInputProps(props2) {
|
|
214
|
-
const inputState = getItemState(props2);
|
|
215
|
-
return normalize.input({
|
|
216
|
-
"data-ownedby": dom.getRootId(state.context),
|
|
217
|
-
id: dom.getItemHiddenInputId(state.context, props2.value),
|
|
218
|
-
type: "radio",
|
|
219
|
-
name: state.context.name || state.context.id,
|
|
220
|
-
form: state.context.form,
|
|
221
|
-
value: props2.value,
|
|
222
|
-
onChange(event) {
|
|
223
|
-
if (readOnly) {
|
|
224
|
-
event.preventDefault();
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
if (event.target.checked) {
|
|
228
|
-
send({ type: "SET_VALUE", value: props2.value, isTrusted: true });
|
|
229
|
-
}
|
|
230
|
-
},
|
|
231
|
-
onBlur() {
|
|
232
|
-
send({ type: "SET_FOCUSED", value: null });
|
|
233
|
-
},
|
|
234
|
-
onFocus() {
|
|
235
|
-
send({ type: "SET_FOCUSED", value: props2.value, focused: true });
|
|
236
|
-
},
|
|
237
|
-
onKeyDown(event) {
|
|
238
|
-
if (event.defaultPrevented)
|
|
239
|
-
return;
|
|
240
|
-
if (event.key === " ") {
|
|
241
|
-
send({ type: "SET_ACTIVE", value: props2.value, active: true });
|
|
242
|
-
}
|
|
243
|
-
},
|
|
244
|
-
onKeyUp(event) {
|
|
245
|
-
if (event.defaultPrevented)
|
|
246
|
-
return;
|
|
247
|
-
if (event.key === " ") {
|
|
248
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
249
|
-
}
|
|
250
|
-
},
|
|
251
|
-
disabled: inputState.disabled,
|
|
252
|
-
defaultChecked: inputState.checked,
|
|
253
|
-
style: import_dom_query2.visuallyHiddenStyle
|
|
254
|
-
});
|
|
255
|
-
},
|
|
256
|
-
indicatorProps: normalize.element({
|
|
257
|
-
id: dom.getIndicatorId(state.context),
|
|
258
|
-
...parts.indicator.attrs,
|
|
259
|
-
dir: state.context.dir,
|
|
260
|
-
hidden: state.context.value == null,
|
|
261
|
-
"data-disabled": (0, import_dom_query2.dataAttr)(groupDisabled),
|
|
262
|
-
"data-orientation": state.context.orientation,
|
|
263
|
-
style: {
|
|
264
|
-
"--transition-property": "left, top, width, height",
|
|
265
|
-
"--left": state.context.indicatorRect?.left,
|
|
266
|
-
"--top": state.context.indicatorRect?.top,
|
|
267
|
-
"--width": state.context.indicatorRect?.width,
|
|
268
|
-
"--height": state.context.indicatorRect?.height,
|
|
269
|
-
position: "absolute",
|
|
270
|
-
willChange: "var(--transition-property)",
|
|
271
|
-
transitionProperty: "var(--transition-property)",
|
|
272
|
-
transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
|
|
273
|
-
transitionTimingFunction: "var(--transition-timing-function)",
|
|
274
|
-
[state.context.orientation === "horizontal" ? "left" : "top"]: state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)"
|
|
275
|
-
}
|
|
276
|
-
})
|
|
277
|
-
};
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
// src/radio-group.machine.ts
|
|
281
|
-
var import_core = require("@zag-js/core");
|
|
282
|
-
var import_dom_query3 = require("@zag-js/dom-query");
|
|
283
|
-
var import_element_rect = require("@zag-js/element-rect");
|
|
284
|
-
var import_form_utils = require("@zag-js/form-utils");
|
|
285
|
-
var import_utils = require("@zag-js/utils");
|
|
286
|
-
var { not } = import_core.guards;
|
|
287
|
-
function machine(userContext) {
|
|
288
|
-
const ctx = (0, import_utils.compact)(userContext);
|
|
289
|
-
return (0, import_core.createMachine)(
|
|
290
|
-
{
|
|
291
|
-
id: "radio",
|
|
292
|
-
initial: "idle",
|
|
293
|
-
context: {
|
|
294
|
-
value: null,
|
|
295
|
-
activeValue: null,
|
|
296
|
-
focusedValue: null,
|
|
297
|
-
hoveredValue: null,
|
|
298
|
-
disabled: false,
|
|
299
|
-
orientation: "vertical",
|
|
300
|
-
...ctx,
|
|
301
|
-
indicatorRect: {},
|
|
302
|
-
canIndicatorTransition: false,
|
|
303
|
-
fieldsetDisabled: false
|
|
304
|
-
},
|
|
305
|
-
computed: {
|
|
306
|
-
isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
|
|
307
|
-
},
|
|
308
|
-
entry: ["syncIndicatorRect"],
|
|
309
|
-
exit: ["cleanupObserver"],
|
|
310
|
-
activities: ["trackFormControlState"],
|
|
311
|
-
watch: {
|
|
312
|
-
value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]
|
|
313
|
-
},
|
|
314
|
-
on: {
|
|
315
|
-
SET_VALUE: [
|
|
316
|
-
{
|
|
317
|
-
guard: not("isTrusted"),
|
|
318
|
-
actions: ["setValue", "dispatchChangeEvent"]
|
|
319
|
-
},
|
|
320
|
-
{
|
|
321
|
-
actions: ["setValue"]
|
|
322
|
-
}
|
|
323
|
-
],
|
|
324
|
-
SET_HOVERED: {
|
|
325
|
-
actions: "setHovered"
|
|
326
|
-
},
|
|
327
|
-
SET_ACTIVE: {
|
|
328
|
-
actions: "setActive"
|
|
329
|
-
},
|
|
330
|
-
SET_FOCUSED: {
|
|
331
|
-
actions: "setFocused"
|
|
332
|
-
}
|
|
333
|
-
},
|
|
334
|
-
states: {
|
|
335
|
-
idle: {}
|
|
336
|
-
}
|
|
337
|
-
},
|
|
338
|
-
{
|
|
339
|
-
guards: {
|
|
340
|
-
isTrusted: (_ctx, evt) => !!evt.isTrusted
|
|
341
|
-
},
|
|
342
|
-
activities: {
|
|
343
|
-
trackFormControlState(ctx2, _evt, { send, initialContext }) {
|
|
344
|
-
return (0, import_form_utils.trackFormControl)(dom.getRootEl(ctx2), {
|
|
345
|
-
onFieldsetDisabledChange(disabled) {
|
|
346
|
-
ctx2.fieldsetDisabled = disabled;
|
|
347
|
-
},
|
|
348
|
-
onFormReset() {
|
|
349
|
-
send({ type: "SET_VALUE", value: initialContext.value });
|
|
350
|
-
}
|
|
351
|
-
});
|
|
352
|
-
}
|
|
353
|
-
},
|
|
354
|
-
actions: {
|
|
355
|
-
setValue(ctx2, evt) {
|
|
356
|
-
set.value(ctx2, evt.value);
|
|
357
|
-
},
|
|
358
|
-
setHovered(ctx2, evt) {
|
|
359
|
-
ctx2.hoveredValue = evt.value;
|
|
360
|
-
},
|
|
361
|
-
setActive(ctx2, evt) {
|
|
362
|
-
ctx2.activeValue = evt.value;
|
|
363
|
-
},
|
|
364
|
-
setFocused(ctx2, evt) {
|
|
365
|
-
ctx2.focusedValue = evt.value;
|
|
366
|
-
},
|
|
367
|
-
syncInputElements(ctx2) {
|
|
368
|
-
const inputs = dom.getInputEls(ctx2);
|
|
369
|
-
inputs.forEach((input) => {
|
|
370
|
-
input.checked = input.value === ctx2.value;
|
|
371
|
-
});
|
|
372
|
-
},
|
|
373
|
-
setIndicatorTransition(ctx2) {
|
|
374
|
-
ctx2.canIndicatorTransition = (0, import_utils.isString)(ctx2.value);
|
|
375
|
-
},
|
|
376
|
-
cleanupObserver(ctx2) {
|
|
377
|
-
ctx2.indicatorCleanup?.();
|
|
378
|
-
},
|
|
379
|
-
syncIndicatorRect(ctx2) {
|
|
380
|
-
ctx2.indicatorCleanup?.();
|
|
381
|
-
if (!dom.getIndicatorEl(ctx2))
|
|
382
|
-
return;
|
|
383
|
-
const value = ctx2.value;
|
|
384
|
-
const radioEl = dom.getActiveRadioEl(ctx2);
|
|
385
|
-
if (value == null || !radioEl) {
|
|
386
|
-
ctx2.indicatorRect = {};
|
|
387
|
-
return;
|
|
388
|
-
}
|
|
389
|
-
ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(radioEl, {
|
|
390
|
-
getRect(el) {
|
|
391
|
-
return dom.getOffsetRect(el);
|
|
392
|
-
},
|
|
393
|
-
onChange(rect) {
|
|
394
|
-
ctx2.indicatorRect = dom.resolveRect(rect);
|
|
395
|
-
(0, import_dom_query3.nextTick)(() => {
|
|
396
|
-
ctx2.canIndicatorTransition = false;
|
|
397
|
-
});
|
|
398
|
-
}
|
|
399
|
-
});
|
|
400
|
-
},
|
|
401
|
-
dispatchChangeEvent(ctx2) {
|
|
402
|
-
const inputEls = dom.getInputEls(ctx2);
|
|
403
|
-
inputEls.forEach((inputEl) => {
|
|
404
|
-
const checked = inputEl.value === ctx2.value;
|
|
405
|
-
if (checked === inputEl.checked)
|
|
406
|
-
return;
|
|
407
|
-
(0, import_form_utils.dispatchInputCheckedEvent)(inputEl, { checked });
|
|
408
|
-
});
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
);
|
|
413
|
-
}
|
|
414
|
-
var invoke = {
|
|
415
|
-
change: (ctx) => {
|
|
416
|
-
if (ctx.value == null)
|
|
417
|
-
return;
|
|
418
|
-
ctx.onValueChange?.({ value: ctx.value });
|
|
419
|
-
}
|
|
420
|
-
};
|
|
421
|
-
var set = {
|
|
422
|
-
value: (ctx, value) => {
|
|
423
|
-
if ((0, import_utils.isEqual)(ctx.value, value))
|
|
424
|
-
return;
|
|
425
|
-
ctx.value = value;
|
|
426
|
-
invoke.change(ctx);
|
|
427
|
-
}
|
|
428
|
-
};
|
|
429
|
-
|
|
430
|
-
// src/radio-group.props.ts
|
|
431
|
-
var import_types = require("@zag-js/types");
|
|
432
|
-
var import_utils2 = require("@zag-js/utils");
|
|
433
|
-
var props = (0, import_types.createProps)()([
|
|
434
|
-
"dir",
|
|
435
|
-
"disabled",
|
|
436
|
-
"form",
|
|
437
|
-
"getRootNode",
|
|
438
|
-
"id",
|
|
439
|
-
"ids",
|
|
440
|
-
"name",
|
|
441
|
-
"onValueChange",
|
|
442
|
-
"orientation",
|
|
443
|
-
"readOnly",
|
|
444
|
-
"value"
|
|
445
|
-
]);
|
|
446
|
-
var splitProps = (0, import_utils2.createSplitProps)(props);
|
|
447
|
-
var itemProps = (0, import_types.createProps)()(["value", "disabled", "invalid"]);
|
|
448
|
-
var splitItemProps = (0, import_utils2.createSplitProps)(itemProps);
|
|
449
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
450
|
-
0 && (module.exports = {
|
|
451
|
-
anatomy,
|
|
452
|
-
connect,
|
|
453
|
-
itemProps,
|
|
454
|
-
machine,
|
|
455
|
-
props,
|
|
456
|
-
splitItemProps,
|
|
457
|
-
splitProps
|
|
458
|
-
});
|
|
1
|
+
"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,itemProps:()=>itemProps,machine:()=>machine,props:()=>props,splitItemProps:()=>splitItemProps,splitProps:()=>splitProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("radio-group").parts("root","label","item","itemText","itemControl","indicator");var parts=anatomy.build();var import_dom_query2=require("@zag-js/dom-query");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`radio-group:${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`radio-group:${ctx.id}:label`,getItemId:(ctx,value)=>ctx.ids?.item?.(value)??`radio-group:${ctx.id}:radio:${value}`,getItemHiddenInputId:(ctx,value)=>ctx.ids?.itemHiddenInput?.(value)??`radio-group:${ctx.id}:radio:input:${value}`,getItemControlId:(ctx,value)=>ctx.ids?.itemControl?.(value)??`radio-group:${ctx.id}:radio:control:${value}`,getItemLabelId:(ctx,value)=>ctx.ids?.itemLabel?.(value)??`radio-group:${ctx.id}:radio:label:${value}`,getIndicatorId:ctx=>ctx.ids?.indicator??`radio-group:${ctx.id}:indicator`,getRootEl:ctx=>dom.getById(ctx,dom.getRootId(ctx)),getItemHiddenInputEl:(ctx,value)=>dom.getById(ctx,dom.getItemHiddenInputId(ctx,value)),getIndicatorEl:ctx=>dom.getById(ctx,dom.getIndicatorId(ctx)),getFirstEnabledInputEl:ctx=>dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),getFirstEnabledAndCheckedInputEl:ctx=>dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),getInputEls:ctx=>{const ownerId=CSS.escape(dom.getRootId(ctx));const selector=`input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;return(0,import_dom_query.queryAll)(dom.getRootEl(ctx),selector)},getActiveRadioEl:ctx=>{if(!ctx.value)return;return dom.getById(ctx,dom.getItemId(ctx,ctx.value))},getOffsetRect:el=>({left:el?.offsetLeft??0,top:el?.offsetTop??0,width:el?.offsetWidth??0,height:el?.offsetHeight??0}),getRectById:(ctx,id)=>{const radioEl=dom.getById(ctx,dom.getItemId(ctx,id));if(!radioEl)return;return dom.resolveRect(dom.getOffsetRect(radioEl))},resolveRect:rect=>({width:`${rect.width}px`,height:`${rect.height}px`,left:`${rect.left}px`,top:`${rect.top}px`})});function connect(state,send,normalize){const groupDisabled=state.context.isDisabled;const readOnly=state.context.readOnly;function getItemState(props2){return{invalid:!!props2.invalid,disabled:!!props2.disabled||groupDisabled,checked:state.context.value===props2.value,focused:state.context.focusedValue===props2.value,hovered:state.context.hoveredValue===props2.value,active:state.context.activeValue===props2.value}}function getItemDataAttrs(props2){const radioState=getItemState(props2);return{"data-focus":(0,import_dom_query2.dataAttr)(radioState.focused),"data-disabled":(0,import_dom_query2.dataAttr)(radioState.disabled),"dats-readonly":(0,import_dom_query2.dataAttr)(readOnly),"data-state":radioState.checked?"checked":"unchecked","data-hover":(0,import_dom_query2.dataAttr)(radioState.hovered),"data-invalid":(0,import_dom_query2.dataAttr)(radioState.invalid),"data-orientation":state.context.orientation}}const focus=()=>{const firstEnabledAndCheckedInput=dom.getFirstEnabledAndCheckedInputEl(state.context);if(firstEnabledAndCheckedInput){firstEnabledAndCheckedInput.focus();return}const firstEnabledInput=dom.getFirstEnabledInputEl(state.context);firstEnabledInput?.focus()};return{focus,value:state.context.value,setValue(value){send({type:"SET_VALUE",value,isTrusted:false})},clearValue(){send({type:"SET_VALUE",value:null,isTrusted:false})},getItemState,rootProps:normalize.element({...parts.root.attrs,role:"radiogroup",id:dom.getRootId(state.context),"aria-labelledby":dom.getLabelId(state.context),"data-orientation":state.context.orientation,"data-disabled":(0,import_dom_query2.dataAttr)(groupDisabled),"aria-orientation":state.context.orientation,dir:state.context.dir,style:{position:"relative"}}),labelProps:normalize.element({...parts.label.attrs,dir:state.context.dir,"data-orientation":state.context.orientation,"data-disabled":(0,import_dom_query2.dataAttr)(groupDisabled),id:dom.getLabelId(state.context),onClick:focus}),getItemProps(props2){const itemState=getItemState(props2);return normalize.label({...parts.item.attrs,dir:state.context.dir,id:dom.getItemId(state.context,props2.value),htmlFor:dom.getItemHiddenInputId(state.context,props2.value),...getItemDataAttrs(props2),onPointerMove(){if(itemState.disabled)return;if(itemState.hovered)return;send({type:"SET_HOVERED",value:props2.value,hovered:true})},onPointerLeave(){if(itemState.disabled)return;send({type:"SET_HOVERED",value:null})},onPointerDown(event){if(itemState.disabled)return;if(itemState.focused&&event.pointerType==="mouse"){event.preventDefault()}send({type:"SET_ACTIVE",value:props2.value,active:true})},onPointerUp(){if(itemState.disabled)return;send({type:"SET_ACTIVE",value:null})}})},getItemTextProps(props2){return normalize.element({...parts.itemText.attrs,dir:state.context.dir,id:dom.getItemLabelId(state.context,props2.value),...getItemDataAttrs(props2)})},getItemControlProps(props2){const controlState=getItemState(props2);return normalize.element({...parts.itemControl.attrs,dir:state.context.dir,id:dom.getItemControlId(state.context,props2.value),"data-active":(0,import_dom_query2.dataAttr)(controlState.active),"aria-hidden":true,...getItemDataAttrs(props2)})},getItemHiddenInputProps(props2){const inputState=getItemState(props2);return normalize.input({"data-ownedby":dom.getRootId(state.context),id:dom.getItemHiddenInputId(state.context,props2.value),type:"radio",name:state.context.name||state.context.id,form:state.context.form,value:props2.value,onChange(event){if(readOnly){event.preventDefault();return}if(event.target.checked){send({type:"SET_VALUE",value:props2.value,isTrusted:true})}},onBlur(){send({type:"SET_FOCUSED",value:null})},onFocus(){send({type:"SET_FOCUSED",value:props2.value,focused:true})},onKeyDown(event){if(event.defaultPrevented)return;if(event.key===" "){send({type:"SET_ACTIVE",value:props2.value,active:true})}},onKeyUp(event){if(event.defaultPrevented)return;if(event.key===" "){send({type:"SET_ACTIVE",value:null})}},disabled:inputState.disabled,defaultChecked:inputState.checked,style:import_dom_query2.visuallyHiddenStyle})},indicatorProps:normalize.element({id:dom.getIndicatorId(state.context),...parts.indicator.attrs,dir:state.context.dir,hidden:state.context.value==null,"data-disabled":(0,import_dom_query2.dataAttr)(groupDisabled),"data-orientation":state.context.orientation,style:{"--transition-property":"left, top, width, height","--left":state.context.indicatorRect?.left,"--top":state.context.indicatorRect?.top,"--width":state.context.indicatorRect?.width,"--height":state.context.indicatorRect?.height,position:"absolute",willChange:"var(--transition-property)",transitionProperty:"var(--transition-property)",transitionDuration:state.context.canIndicatorTransition?"var(--transition-duration, 150ms)":"0ms",transitionTimingFunction:"var(--transition-timing-function)",[state.context.orientation==="horizontal"?"left":"top"]:state.context.orientation==="horizontal"?"var(--left)":"var(--top)"}})}}var import_core=require("@zag-js/core");var import_dom_query3=require("@zag-js/dom-query");var import_element_rect=require("@zag-js/element-rect");var import_form_utils=require("@zag-js/form-utils");var import_utils=require("@zag-js/utils");var{not}=import_core.guards;function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core.createMachine)({id:"radio",initial:"idle",context:{value:null,activeValue:null,focusedValue:null,hoveredValue:null,disabled:false,orientation:"vertical",...ctx,indicatorRect:{},canIndicatorTransition:false,fieldsetDisabled:false},computed:{isDisabled:ctx2=>!!ctx2.disabled||ctx2.fieldsetDisabled},entry:["syncIndicatorRect"],exit:["cleanupObserver"],activities:["trackFormControlState"],watch:{value:["setIndicatorTransition","syncIndicatorRect","syncInputElements"]},on:{SET_VALUE:[{guard:not("isTrusted"),actions:["setValue","dispatchChangeEvent"]},{actions:["setValue"]}],SET_HOVERED:{actions:"setHovered"},SET_ACTIVE:{actions:"setActive"},SET_FOCUSED:{actions:"setFocused"}},states:{idle:{}}},{guards:{isTrusted:(_ctx,evt)=>!!evt.isTrusted},activities:{trackFormControlState(ctx2,_evt,{send,initialContext}){return(0,import_form_utils.trackFormControl)(dom.getRootEl(ctx2),{onFieldsetDisabledChange(disabled){ctx2.fieldsetDisabled=disabled},onFormReset(){send({type:"SET_VALUE",value:initialContext.value})}})}},actions:{setValue(ctx2,evt){set.value(ctx2,evt.value)},setHovered(ctx2,evt){ctx2.hoveredValue=evt.value},setActive(ctx2,evt){ctx2.activeValue=evt.value},setFocused(ctx2,evt){ctx2.focusedValue=evt.value},syncInputElements(ctx2){const inputs=dom.getInputEls(ctx2);inputs.forEach(input=>{input.checked=input.value===ctx2.value})},setIndicatorTransition(ctx2){ctx2.canIndicatorTransition=(0,import_utils.isString)(ctx2.value)},cleanupObserver(ctx2){ctx2.indicatorCleanup?.()},syncIndicatorRect(ctx2){ctx2.indicatorCleanup?.();if(!dom.getIndicatorEl(ctx2))return;const value=ctx2.value;const radioEl=dom.getActiveRadioEl(ctx2);if(value==null||!radioEl){ctx2.indicatorRect={};return}ctx2.indicatorCleanup=(0,import_element_rect.trackElementRect)(radioEl,{getRect(el){return dom.getOffsetRect(el)},onChange(rect){ctx2.indicatorRect=dom.resolveRect(rect);(0,import_dom_query3.nextTick)(()=>{ctx2.canIndicatorTransition=false})}})},dispatchChangeEvent(ctx2){const inputEls=dom.getInputEls(ctx2);inputEls.forEach(inputEl=>{const checked=inputEl.value===ctx2.value;if(checked===inputEl.checked)return;(0,import_form_utils.dispatchInputCheckedEvent)(inputEl,{checked})})}}})}var invoke={change:ctx=>{if(ctx.value==null)return;ctx.onValueChange?.({value:ctx.value})}};var set={value:(ctx,value)=>{if((0,import_utils.isEqual)(ctx.value,value))return;ctx.value=value;invoke.change(ctx)}};var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["dir","disabled","form","getRootNode","id","ids","name","onValueChange","orientation","readOnly","value"]);var splitProps=(0,import_utils2.createSplitProps)(props);var itemProps=(0,import_types.createProps)()(["value","disabled","invalid"]);var splitItemProps=(0,import_utils2.createSplitProps)(itemProps);0&&(module.exports={anatomy,connect,itemProps,machine,props,splitItemProps,splitProps});
|
|
459
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts","../src/radio-group.props.ts"],"sourcesContent":["export { anatomy } from \"./radio-group.anatomy\"\nexport { connect } from \"./radio-group.connect\"\nexport { machine } from \"./radio-group.machine\"\nexport * from \"./radio-group.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n ItemProps,\n ItemState,\n ValueChangeDetails,\n} from \"./radio-group.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"item\",\n \"itemText\",\n \"itemControl\",\n \"indicator\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const groupDisabled = state.context.isDisabled\n const readOnly = state.context.readOnly\n\n function getItemState(props: ItemProps): ItemState {\n return {\n invalid: !!props.invalid,\n disabled: !!props.disabled || groupDisabled,\n checked: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n hovered: state.context.hoveredValue === props.value,\n active: state.context.activeValue === props.value,\n }\n }\n\n function getItemDataAttrs<T extends ItemProps>(props: T) {\n const radioState = getItemState(props)\n return {\n \"data-focus\": dataAttr(radioState.focused),\n \"data-disabled\": dataAttr(radioState.disabled),\n \"dats-readonly\": dataAttr(readOnly),\n \"data-state\": radioState.checked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.hovered),\n \"data-invalid\": dataAttr(radioState.invalid),\n \"data-orientation\": state.context.orientation,\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n setValue(value) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n getItemState,\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n style: {\n position: \"relative\",\n },\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getItemProps(props: ItemProps) {\n const itemState = getItemState(props)\n\n return normalize.label({\n ...parts.item.attrs,\n dir: state.context.dir,\n id: dom.getItemId(state.context, props.value),\n htmlFor: dom.getItemHiddenInputId(state.context, props.value),\n ...getItemDataAttrs(props),\n onPointerMove() {\n if (itemState.disabled) return\n if (itemState.hovered) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (itemState.disabled) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (itemState.disabled) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (itemState.focused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (itemState.disabled) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getItemTextProps(props: ItemProps) {\n return normalize.element({\n ...parts.itemText.attrs,\n dir: state.context.dir,\n id: dom.getItemLabelId(state.context, props.value),\n ...getItemDataAttrs(props),\n })\n },\n\n getItemControlProps(props: ItemProps) {\n const controlState = getItemState(props)\n\n return normalize.element({\n ...parts.itemControl.attrs,\n dir: state.context.dir,\n id: dom.getItemControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.active),\n \"aria-hidden\": true,\n ...getItemDataAttrs(props),\n })\n },\n\n getItemHiddenInputProps(props: ItemProps) {\n const inputState = getItemState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getItemHiddenInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onChange(event) {\n if (readOnly) {\n event.preventDefault()\n return\n }\n\n if (event.target.checked) {\n send({ type: \"SET_VALUE\", value: props.value, isTrusted: true })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null })\n },\n onFocus() {\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.disabled,\n defaultChecked: inputState.checked,\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n hidden: state.context.value == null,\n \"data-disabled\": dataAttr(groupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, top, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\n },\n }),\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getItemHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getItemControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getItemLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getItemHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getItemId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => ({\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }),\n\n getRectById: (ctx: Ctx, id: string) => {\n const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))\n if (!radioEl) return\n return dom.resolveRect(dom.getOffsetRect(radioEl))\n },\n\n resolveRect: (rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { dispatchInputCheckedEvent, trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isEqual, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeValue: null,\n focusedValue: null,\n hoveredValue: null,\n disabled: false,\n orientation: \"vertical\",\n ...ctx,\n indicatorRect: {},\n canIndicatorTransition: false,\n fieldsetDisabled: false,\n },\n\n computed: {\n isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n },\n\n entry: [\"syncIndicatorRect\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\"],\n\n watch: {\n value: [\"setIndicatorTransition\", \"syncIndicatorRect\", \"syncInputElements\"],\n },\n\n on: {\n SET_VALUE: [\n {\n guard: not(\"isTrusted\"),\n actions: [\"setValue\", \"dispatchChangeEvent\"],\n },\n {\n actions: [\"setValue\"],\n },\n ],\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n guards: {\n isTrusted: (_ctx, evt) => !!evt.isTrusted,\n },\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabledChange(disabled) {\n ctx.fieldsetDisabled = disabled\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setHovered(ctx, evt) {\n ctx.hoveredValue = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeValue = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedValue = evt.value\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n const radioEl = dom.getActiveRadioEl(ctx)\n\n if (value == null || !radioEl) {\n ctx.indicatorRect = {}\n return\n }\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n dispatchChangeEvent(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl) => {\n const checked = inputEl.value === ctx.value\n if (checked === inputEl.checked) return\n dispatchInputCheckedEvent(inputEl, { checked })\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n if (isEqual(ctx.value, value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ItemProps, UserDefinedContext } from \"./radio-group.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"dir\",\n \"disabled\",\n \"form\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"name\",\n \"onValueChange\",\n \"orientation\",\n \"readOnly\",\n \"value\",\n])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const itemProps = createProps<ItemProps>()([\"value\", \"disabled\", \"invalid\"])\nexport const splitItemProps = createSplitProps<ItemProps>(itemProps)\n"],"mappings":"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","names":["import_dom_query","props","import_dom_query","ctx","import_utils"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts","../src/radio-group.props.ts"],"sourcesContent":["export { anatomy } from \"./radio-group.anatomy\"\nexport { connect } from \"./radio-group.connect\"\nexport { machine } from \"./radio-group.machine\"\nexport * from \"./radio-group.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n ItemProps,\n ItemState,\n ValueChangeDetails,\n} from \"./radio-group.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"item\",\n \"itemText\",\n \"itemControl\",\n \"indicator\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const groupDisabled = state.context.isDisabled\n const readOnly = state.context.readOnly\n\n function getItemState(props: ItemProps): ItemState {\n return {\n invalid: !!props.invalid,\n disabled: !!props.disabled || groupDisabled,\n checked: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n hovered: state.context.hoveredValue === props.value,\n active: state.context.activeValue === props.value,\n }\n }\n\n function getItemDataAttrs<T extends ItemProps>(props: T) {\n const radioState = getItemState(props)\n return {\n \"data-focus\": dataAttr(radioState.focused),\n \"data-disabled\": dataAttr(radioState.disabled),\n \"dats-readonly\": dataAttr(readOnly),\n \"data-state\": radioState.checked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.hovered),\n \"data-invalid\": dataAttr(radioState.invalid),\n \"data-orientation\": state.context.orientation,\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n setValue(value) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n getItemState,\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n style: {\n position: \"relative\",\n },\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getItemProps(props: ItemProps) {\n const itemState = getItemState(props)\n\n return normalize.label({\n ...parts.item.attrs,\n dir: state.context.dir,\n id: dom.getItemId(state.context, props.value),\n htmlFor: dom.getItemHiddenInputId(state.context, props.value),\n ...getItemDataAttrs(props),\n onPointerMove() {\n if (itemState.disabled) return\n if (itemState.hovered) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (itemState.disabled) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (itemState.disabled) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (itemState.focused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (itemState.disabled) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getItemTextProps(props: ItemProps) {\n return normalize.element({\n ...parts.itemText.attrs,\n dir: state.context.dir,\n id: dom.getItemLabelId(state.context, props.value),\n ...getItemDataAttrs(props),\n })\n },\n\n getItemControlProps(props: ItemProps) {\n const controlState = getItemState(props)\n\n return normalize.element({\n ...parts.itemControl.attrs,\n dir: state.context.dir,\n id: dom.getItemControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.active),\n \"aria-hidden\": true,\n ...getItemDataAttrs(props),\n })\n },\n\n getItemHiddenInputProps(props: ItemProps) {\n const inputState = getItemState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getItemHiddenInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onChange(event) {\n if (readOnly) {\n event.preventDefault()\n return\n }\n\n if (event.target.checked) {\n send({ type: \"SET_VALUE\", value: props.value, isTrusted: true })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null })\n },\n onFocus() {\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.disabled,\n defaultChecked: inputState.checked,\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n hidden: state.context.value == null,\n \"data-disabled\": dataAttr(groupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, top, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\n },\n }),\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getItemHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getItemControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getItemLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getItemHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getItemId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => ({\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }),\n\n getRectById: (ctx: Ctx, id: string) => {\n const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))\n if (!radioEl) return\n return dom.resolveRect(dom.getOffsetRect(radioEl))\n },\n\n resolveRect: (rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { dispatchInputCheckedEvent, trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isEqual, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeValue: null,\n focusedValue: null,\n hoveredValue: null,\n disabled: false,\n orientation: \"vertical\",\n ...ctx,\n indicatorRect: {},\n canIndicatorTransition: false,\n fieldsetDisabled: false,\n },\n\n computed: {\n isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n },\n\n entry: [\"syncIndicatorRect\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\"],\n\n watch: {\n value: [\"setIndicatorTransition\", \"syncIndicatorRect\", \"syncInputElements\"],\n },\n\n on: {\n SET_VALUE: [\n {\n guard: not(\"isTrusted\"),\n actions: [\"setValue\", \"dispatchChangeEvent\"],\n },\n {\n actions: [\"setValue\"],\n },\n ],\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n guards: {\n isTrusted: (_ctx, evt) => !!evt.isTrusted,\n },\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabledChange(disabled) {\n ctx.fieldsetDisabled = disabled\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setHovered(ctx, evt) {\n ctx.hoveredValue = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeValue = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedValue = evt.value\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n const radioEl = dom.getActiveRadioEl(ctx)\n\n if (value == null || !radioEl) {\n ctx.indicatorRect = {}\n return\n }\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n dispatchChangeEvent(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl) => {\n const checked = inputEl.value === ctx.value\n if (checked === inputEl.checked) return\n dispatchInputCheckedEvent(inputEl, { checked })\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n if (isEqual(ctx.value, value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ItemProps, UserDefinedContext } from \"./radio-group.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"dir\",\n \"disabled\",\n \"form\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"name\",\n \"onValueChange\",\n \"orientation\",\n \"readOnly\",\n \"value\",\n])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const itemProps = createProps<ItemProps>()([\"value\", \"disabled\", \"invalid\"])\nexport const splitItemProps = createSplitProps<ItemProps>(itemProps)\n"],"mappings":"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","names":["import_dom_query","props","import_dom_query","ctx","import_utils"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,426 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
|
-
var anatomy = createAnatomy("radio-group").parts(
|
|
4
|
-
"root",
|
|
5
|
-
"label",
|
|
6
|
-
"item",
|
|
7
|
-
"itemText",
|
|
8
|
-
"itemControl",
|
|
9
|
-
"indicator"
|
|
10
|
-
);
|
|
11
|
-
var parts = anatomy.build();
|
|
12
|
-
|
|
13
|
-
// src/radio-group.connect.ts
|
|
14
|
-
import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query";
|
|
15
|
-
|
|
16
|
-
// src/radio-group.dom.ts
|
|
17
|
-
import { createScope, queryAll } from "@zag-js/dom-query";
|
|
18
|
-
var dom = createScope({
|
|
19
|
-
getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
|
|
20
|
-
getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
|
|
21
|
-
getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
|
|
22
|
-
getItemHiddenInputId: (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
|
|
23
|
-
getItemControlId: (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
|
|
24
|
-
getItemLabelId: (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
|
|
25
|
-
getIndicatorId: (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
|
|
26
|
-
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
27
|
-
getItemHiddenInputEl: (ctx, value) => dom.getById(ctx, dom.getItemHiddenInputId(ctx, value)),
|
|
28
|
-
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
29
|
-
getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
|
|
30
|
-
getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
|
|
31
|
-
getInputEls: (ctx) => {
|
|
32
|
-
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
33
|
-
const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
|
|
34
|
-
return queryAll(dom.getRootEl(ctx), selector);
|
|
35
|
-
},
|
|
36
|
-
getActiveRadioEl: (ctx) => {
|
|
37
|
-
if (!ctx.value)
|
|
38
|
-
return;
|
|
39
|
-
return dom.getById(ctx, dom.getItemId(ctx, ctx.value));
|
|
40
|
-
},
|
|
41
|
-
getOffsetRect: (el) => ({
|
|
42
|
-
left: el?.offsetLeft ?? 0,
|
|
43
|
-
top: el?.offsetTop ?? 0,
|
|
44
|
-
width: el?.offsetWidth ?? 0,
|
|
45
|
-
height: el?.offsetHeight ?? 0
|
|
46
|
-
}),
|
|
47
|
-
getRectById: (ctx, id) => {
|
|
48
|
-
const radioEl = dom.getById(ctx, dom.getItemId(ctx, id));
|
|
49
|
-
if (!radioEl)
|
|
50
|
-
return;
|
|
51
|
-
return dom.resolveRect(dom.getOffsetRect(radioEl));
|
|
52
|
-
},
|
|
53
|
-
resolveRect: (rect) => ({
|
|
54
|
-
width: `${rect.width}px`,
|
|
55
|
-
height: `${rect.height}px`,
|
|
56
|
-
left: `${rect.left}px`,
|
|
57
|
-
top: `${rect.top}px`
|
|
58
|
-
})
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
// src/radio-group.connect.ts
|
|
62
|
-
function connect(state, send, normalize) {
|
|
63
|
-
const groupDisabled = state.context.isDisabled;
|
|
64
|
-
const readOnly = state.context.readOnly;
|
|
65
|
-
function getItemState(props2) {
|
|
66
|
-
return {
|
|
67
|
-
invalid: !!props2.invalid,
|
|
68
|
-
disabled: !!props2.disabled || groupDisabled,
|
|
69
|
-
checked: state.context.value === props2.value,
|
|
70
|
-
focused: state.context.focusedValue === props2.value,
|
|
71
|
-
hovered: state.context.hoveredValue === props2.value,
|
|
72
|
-
active: state.context.activeValue === props2.value
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
function getItemDataAttrs(props2) {
|
|
76
|
-
const radioState = getItemState(props2);
|
|
77
|
-
return {
|
|
78
|
-
"data-focus": dataAttr(radioState.focused),
|
|
79
|
-
"data-disabled": dataAttr(radioState.disabled),
|
|
80
|
-
"dats-readonly": dataAttr(readOnly),
|
|
81
|
-
"data-state": radioState.checked ? "checked" : "unchecked",
|
|
82
|
-
"data-hover": dataAttr(radioState.hovered),
|
|
83
|
-
"data-invalid": dataAttr(radioState.invalid),
|
|
84
|
-
"data-orientation": state.context.orientation
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
const focus = () => {
|
|
88
|
-
const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
|
|
89
|
-
if (firstEnabledAndCheckedInput) {
|
|
90
|
-
firstEnabledAndCheckedInput.focus();
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
|
|
94
|
-
firstEnabledInput?.focus();
|
|
95
|
-
};
|
|
96
|
-
return {
|
|
97
|
-
focus,
|
|
98
|
-
value: state.context.value,
|
|
99
|
-
setValue(value) {
|
|
100
|
-
send({ type: "SET_VALUE", value, isTrusted: false });
|
|
101
|
-
},
|
|
102
|
-
clearValue() {
|
|
103
|
-
send({ type: "SET_VALUE", value: null, isTrusted: false });
|
|
104
|
-
},
|
|
105
|
-
getItemState,
|
|
106
|
-
rootProps: normalize.element({
|
|
107
|
-
...parts.root.attrs,
|
|
108
|
-
role: "radiogroup",
|
|
109
|
-
id: dom.getRootId(state.context),
|
|
110
|
-
"aria-labelledby": dom.getLabelId(state.context),
|
|
111
|
-
"data-orientation": state.context.orientation,
|
|
112
|
-
"data-disabled": dataAttr(groupDisabled),
|
|
113
|
-
"aria-orientation": state.context.orientation,
|
|
114
|
-
dir: state.context.dir,
|
|
115
|
-
style: {
|
|
116
|
-
position: "relative"
|
|
117
|
-
}
|
|
118
|
-
}),
|
|
119
|
-
labelProps: normalize.element({
|
|
120
|
-
...parts.label.attrs,
|
|
121
|
-
dir: state.context.dir,
|
|
122
|
-
"data-orientation": state.context.orientation,
|
|
123
|
-
"data-disabled": dataAttr(groupDisabled),
|
|
124
|
-
id: dom.getLabelId(state.context),
|
|
125
|
-
onClick: focus
|
|
126
|
-
}),
|
|
127
|
-
getItemProps(props2) {
|
|
128
|
-
const itemState = getItemState(props2);
|
|
129
|
-
return normalize.label({
|
|
130
|
-
...parts.item.attrs,
|
|
131
|
-
dir: state.context.dir,
|
|
132
|
-
id: dom.getItemId(state.context, props2.value),
|
|
133
|
-
htmlFor: dom.getItemHiddenInputId(state.context, props2.value),
|
|
134
|
-
...getItemDataAttrs(props2),
|
|
135
|
-
onPointerMove() {
|
|
136
|
-
if (itemState.disabled)
|
|
137
|
-
return;
|
|
138
|
-
if (itemState.hovered)
|
|
139
|
-
return;
|
|
140
|
-
send({ type: "SET_HOVERED", value: props2.value, hovered: true });
|
|
141
|
-
},
|
|
142
|
-
onPointerLeave() {
|
|
143
|
-
if (itemState.disabled)
|
|
144
|
-
return;
|
|
145
|
-
send({ type: "SET_HOVERED", value: null });
|
|
146
|
-
},
|
|
147
|
-
onPointerDown(event) {
|
|
148
|
-
if (itemState.disabled)
|
|
149
|
-
return;
|
|
150
|
-
if (itemState.focused && event.pointerType === "mouse") {
|
|
151
|
-
event.preventDefault();
|
|
152
|
-
}
|
|
153
|
-
send({ type: "SET_ACTIVE", value: props2.value, active: true });
|
|
154
|
-
},
|
|
155
|
-
onPointerUp() {
|
|
156
|
-
if (itemState.disabled)
|
|
157
|
-
return;
|
|
158
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
},
|
|
162
|
-
getItemTextProps(props2) {
|
|
163
|
-
return normalize.element({
|
|
164
|
-
...parts.itemText.attrs,
|
|
165
|
-
dir: state.context.dir,
|
|
166
|
-
id: dom.getItemLabelId(state.context, props2.value),
|
|
167
|
-
...getItemDataAttrs(props2)
|
|
168
|
-
});
|
|
169
|
-
},
|
|
170
|
-
getItemControlProps(props2) {
|
|
171
|
-
const controlState = getItemState(props2);
|
|
172
|
-
return normalize.element({
|
|
173
|
-
...parts.itemControl.attrs,
|
|
174
|
-
dir: state.context.dir,
|
|
175
|
-
id: dom.getItemControlId(state.context, props2.value),
|
|
176
|
-
"data-active": dataAttr(controlState.active),
|
|
177
|
-
"aria-hidden": true,
|
|
178
|
-
...getItemDataAttrs(props2)
|
|
179
|
-
});
|
|
180
|
-
},
|
|
181
|
-
getItemHiddenInputProps(props2) {
|
|
182
|
-
const inputState = getItemState(props2);
|
|
183
|
-
return normalize.input({
|
|
184
|
-
"data-ownedby": dom.getRootId(state.context),
|
|
185
|
-
id: dom.getItemHiddenInputId(state.context, props2.value),
|
|
186
|
-
type: "radio",
|
|
187
|
-
name: state.context.name || state.context.id,
|
|
188
|
-
form: state.context.form,
|
|
189
|
-
value: props2.value,
|
|
190
|
-
onChange(event) {
|
|
191
|
-
if (readOnly) {
|
|
192
|
-
event.preventDefault();
|
|
193
|
-
return;
|
|
194
|
-
}
|
|
195
|
-
if (event.target.checked) {
|
|
196
|
-
send({ type: "SET_VALUE", value: props2.value, isTrusted: true });
|
|
197
|
-
}
|
|
198
|
-
},
|
|
199
|
-
onBlur() {
|
|
200
|
-
send({ type: "SET_FOCUSED", value: null });
|
|
201
|
-
},
|
|
202
|
-
onFocus() {
|
|
203
|
-
send({ type: "SET_FOCUSED", value: props2.value, focused: true });
|
|
204
|
-
},
|
|
205
|
-
onKeyDown(event) {
|
|
206
|
-
if (event.defaultPrevented)
|
|
207
|
-
return;
|
|
208
|
-
if (event.key === " ") {
|
|
209
|
-
send({ type: "SET_ACTIVE", value: props2.value, active: true });
|
|
210
|
-
}
|
|
211
|
-
},
|
|
212
|
-
onKeyUp(event) {
|
|
213
|
-
if (event.defaultPrevented)
|
|
214
|
-
return;
|
|
215
|
-
if (event.key === " ") {
|
|
216
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
217
|
-
}
|
|
218
|
-
},
|
|
219
|
-
disabled: inputState.disabled,
|
|
220
|
-
defaultChecked: inputState.checked,
|
|
221
|
-
style: visuallyHiddenStyle
|
|
222
|
-
});
|
|
223
|
-
},
|
|
224
|
-
indicatorProps: normalize.element({
|
|
225
|
-
id: dom.getIndicatorId(state.context),
|
|
226
|
-
...parts.indicator.attrs,
|
|
227
|
-
dir: state.context.dir,
|
|
228
|
-
hidden: state.context.value == null,
|
|
229
|
-
"data-disabled": dataAttr(groupDisabled),
|
|
230
|
-
"data-orientation": state.context.orientation,
|
|
231
|
-
style: {
|
|
232
|
-
"--transition-property": "left, top, width, height",
|
|
233
|
-
"--left": state.context.indicatorRect?.left,
|
|
234
|
-
"--top": state.context.indicatorRect?.top,
|
|
235
|
-
"--width": state.context.indicatorRect?.width,
|
|
236
|
-
"--height": state.context.indicatorRect?.height,
|
|
237
|
-
position: "absolute",
|
|
238
|
-
willChange: "var(--transition-property)",
|
|
239
|
-
transitionProperty: "var(--transition-property)",
|
|
240
|
-
transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
|
|
241
|
-
transitionTimingFunction: "var(--transition-timing-function)",
|
|
242
|
-
[state.context.orientation === "horizontal" ? "left" : "top"]: state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)"
|
|
243
|
-
}
|
|
244
|
-
})
|
|
245
|
-
};
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
// src/radio-group.machine.ts
|
|
249
|
-
import { createMachine, guards } from "@zag-js/core";
|
|
250
|
-
import { nextTick } from "@zag-js/dom-query";
|
|
251
|
-
import { trackElementRect } from "@zag-js/element-rect";
|
|
252
|
-
import { dispatchInputCheckedEvent, trackFormControl } from "@zag-js/form-utils";
|
|
253
|
-
import { compact, isEqual, isString } from "@zag-js/utils";
|
|
254
|
-
var { not } = guards;
|
|
255
|
-
function machine(userContext) {
|
|
256
|
-
const ctx = compact(userContext);
|
|
257
|
-
return createMachine(
|
|
258
|
-
{
|
|
259
|
-
id: "radio",
|
|
260
|
-
initial: "idle",
|
|
261
|
-
context: {
|
|
262
|
-
value: null,
|
|
263
|
-
activeValue: null,
|
|
264
|
-
focusedValue: null,
|
|
265
|
-
hoveredValue: null,
|
|
266
|
-
disabled: false,
|
|
267
|
-
orientation: "vertical",
|
|
268
|
-
...ctx,
|
|
269
|
-
indicatorRect: {},
|
|
270
|
-
canIndicatorTransition: false,
|
|
271
|
-
fieldsetDisabled: false
|
|
272
|
-
},
|
|
273
|
-
computed: {
|
|
274
|
-
isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
|
|
275
|
-
},
|
|
276
|
-
entry: ["syncIndicatorRect"],
|
|
277
|
-
exit: ["cleanupObserver"],
|
|
278
|
-
activities: ["trackFormControlState"],
|
|
279
|
-
watch: {
|
|
280
|
-
value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]
|
|
281
|
-
},
|
|
282
|
-
on: {
|
|
283
|
-
SET_VALUE: [
|
|
284
|
-
{
|
|
285
|
-
guard: not("isTrusted"),
|
|
286
|
-
actions: ["setValue", "dispatchChangeEvent"]
|
|
287
|
-
},
|
|
288
|
-
{
|
|
289
|
-
actions: ["setValue"]
|
|
290
|
-
}
|
|
291
|
-
],
|
|
292
|
-
SET_HOVERED: {
|
|
293
|
-
actions: "setHovered"
|
|
294
|
-
},
|
|
295
|
-
SET_ACTIVE: {
|
|
296
|
-
actions: "setActive"
|
|
297
|
-
},
|
|
298
|
-
SET_FOCUSED: {
|
|
299
|
-
actions: "setFocused"
|
|
300
|
-
}
|
|
301
|
-
},
|
|
302
|
-
states: {
|
|
303
|
-
idle: {}
|
|
304
|
-
}
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
guards: {
|
|
308
|
-
isTrusted: (_ctx, evt) => !!evt.isTrusted
|
|
309
|
-
},
|
|
310
|
-
activities: {
|
|
311
|
-
trackFormControlState(ctx2, _evt, { send, initialContext }) {
|
|
312
|
-
return trackFormControl(dom.getRootEl(ctx2), {
|
|
313
|
-
onFieldsetDisabledChange(disabled) {
|
|
314
|
-
ctx2.fieldsetDisabled = disabled;
|
|
315
|
-
},
|
|
316
|
-
onFormReset() {
|
|
317
|
-
send({ type: "SET_VALUE", value: initialContext.value });
|
|
318
|
-
}
|
|
319
|
-
});
|
|
320
|
-
}
|
|
321
|
-
},
|
|
322
|
-
actions: {
|
|
323
|
-
setValue(ctx2, evt) {
|
|
324
|
-
set.value(ctx2, evt.value);
|
|
325
|
-
},
|
|
326
|
-
setHovered(ctx2, evt) {
|
|
327
|
-
ctx2.hoveredValue = evt.value;
|
|
328
|
-
},
|
|
329
|
-
setActive(ctx2, evt) {
|
|
330
|
-
ctx2.activeValue = evt.value;
|
|
331
|
-
},
|
|
332
|
-
setFocused(ctx2, evt) {
|
|
333
|
-
ctx2.focusedValue = evt.value;
|
|
334
|
-
},
|
|
335
|
-
syncInputElements(ctx2) {
|
|
336
|
-
const inputs = dom.getInputEls(ctx2);
|
|
337
|
-
inputs.forEach((input) => {
|
|
338
|
-
input.checked = input.value === ctx2.value;
|
|
339
|
-
});
|
|
340
|
-
},
|
|
341
|
-
setIndicatorTransition(ctx2) {
|
|
342
|
-
ctx2.canIndicatorTransition = isString(ctx2.value);
|
|
343
|
-
},
|
|
344
|
-
cleanupObserver(ctx2) {
|
|
345
|
-
ctx2.indicatorCleanup?.();
|
|
346
|
-
},
|
|
347
|
-
syncIndicatorRect(ctx2) {
|
|
348
|
-
ctx2.indicatorCleanup?.();
|
|
349
|
-
if (!dom.getIndicatorEl(ctx2))
|
|
350
|
-
return;
|
|
351
|
-
const value = ctx2.value;
|
|
352
|
-
const radioEl = dom.getActiveRadioEl(ctx2);
|
|
353
|
-
if (value == null || !radioEl) {
|
|
354
|
-
ctx2.indicatorRect = {};
|
|
355
|
-
return;
|
|
356
|
-
}
|
|
357
|
-
ctx2.indicatorCleanup = trackElementRect(radioEl, {
|
|
358
|
-
getRect(el) {
|
|
359
|
-
return dom.getOffsetRect(el);
|
|
360
|
-
},
|
|
361
|
-
onChange(rect) {
|
|
362
|
-
ctx2.indicatorRect = dom.resolveRect(rect);
|
|
363
|
-
nextTick(() => {
|
|
364
|
-
ctx2.canIndicatorTransition = false;
|
|
365
|
-
});
|
|
366
|
-
}
|
|
367
|
-
});
|
|
368
|
-
},
|
|
369
|
-
dispatchChangeEvent(ctx2) {
|
|
370
|
-
const inputEls = dom.getInputEls(ctx2);
|
|
371
|
-
inputEls.forEach((inputEl) => {
|
|
372
|
-
const checked = inputEl.value === ctx2.value;
|
|
373
|
-
if (checked === inputEl.checked)
|
|
374
|
-
return;
|
|
375
|
-
dispatchInputCheckedEvent(inputEl, { checked });
|
|
376
|
-
});
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
);
|
|
381
|
-
}
|
|
382
|
-
var invoke = {
|
|
383
|
-
change: (ctx) => {
|
|
384
|
-
if (ctx.value == null)
|
|
385
|
-
return;
|
|
386
|
-
ctx.onValueChange?.({ value: ctx.value });
|
|
387
|
-
}
|
|
388
|
-
};
|
|
389
|
-
var set = {
|
|
390
|
-
value: (ctx, value) => {
|
|
391
|
-
if (isEqual(ctx.value, value))
|
|
392
|
-
return;
|
|
393
|
-
ctx.value = value;
|
|
394
|
-
invoke.change(ctx);
|
|
395
|
-
}
|
|
396
|
-
};
|
|
397
|
-
|
|
398
|
-
// src/radio-group.props.ts
|
|
399
|
-
import { createProps } from "@zag-js/types";
|
|
400
|
-
import { createSplitProps } from "@zag-js/utils";
|
|
401
|
-
var props = createProps()([
|
|
402
|
-
"dir",
|
|
403
|
-
"disabled",
|
|
404
|
-
"form",
|
|
405
|
-
"getRootNode",
|
|
406
|
-
"id",
|
|
407
|
-
"ids",
|
|
408
|
-
"name",
|
|
409
|
-
"onValueChange",
|
|
410
|
-
"orientation",
|
|
411
|
-
"readOnly",
|
|
412
|
-
"value"
|
|
413
|
-
]);
|
|
414
|
-
var splitProps = createSplitProps(props);
|
|
415
|
-
var itemProps = createProps()(["value", "disabled", "invalid"]);
|
|
416
|
-
var splitItemProps = createSplitProps(itemProps);
|
|
417
|
-
export {
|
|
418
|
-
anatomy,
|
|
419
|
-
connect,
|
|
420
|
-
itemProps,
|
|
421
|
-
machine,
|
|
422
|
-
props,
|
|
423
|
-
splitItemProps,
|
|
424
|
-
splitProps
|
|
425
|
-
};
|
|
1
|
+
import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("radio-group").parts("root","label","item","itemText","itemControl","indicator");var parts=anatomy.build();import{dataAttr,visuallyHiddenStyle}from"@zag-js/dom-query";import{createScope,queryAll}from"@zag-js/dom-query";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`radio-group:${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`radio-group:${ctx.id}:label`,getItemId:(ctx,value)=>ctx.ids?.item?.(value)??`radio-group:${ctx.id}:radio:${value}`,getItemHiddenInputId:(ctx,value)=>ctx.ids?.itemHiddenInput?.(value)??`radio-group:${ctx.id}:radio:input:${value}`,getItemControlId:(ctx,value)=>ctx.ids?.itemControl?.(value)??`radio-group:${ctx.id}:radio:control:${value}`,getItemLabelId:(ctx,value)=>ctx.ids?.itemLabel?.(value)??`radio-group:${ctx.id}:radio:label:${value}`,getIndicatorId:ctx=>ctx.ids?.indicator??`radio-group:${ctx.id}:indicator`,getRootEl:ctx=>dom.getById(ctx,dom.getRootId(ctx)),getItemHiddenInputEl:(ctx,value)=>dom.getById(ctx,dom.getItemHiddenInputId(ctx,value)),getIndicatorEl:ctx=>dom.getById(ctx,dom.getIndicatorId(ctx)),getFirstEnabledInputEl:ctx=>dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),getFirstEnabledAndCheckedInputEl:ctx=>dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),getInputEls:ctx=>{const ownerId=CSS.escape(dom.getRootId(ctx));const selector=`input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;return queryAll(dom.getRootEl(ctx),selector)},getActiveRadioEl:ctx=>{if(!ctx.value)return;return dom.getById(ctx,dom.getItemId(ctx,ctx.value))},getOffsetRect:el=>({left:el?.offsetLeft??0,top:el?.offsetTop??0,width:el?.offsetWidth??0,height:el?.offsetHeight??0}),getRectById:(ctx,id)=>{const radioEl=dom.getById(ctx,dom.getItemId(ctx,id));if(!radioEl)return;return dom.resolveRect(dom.getOffsetRect(radioEl))},resolveRect:rect=>({width:`${rect.width}px`,height:`${rect.height}px`,left:`${rect.left}px`,top:`${rect.top}px`})});function connect(state,send,normalize){const groupDisabled=state.context.isDisabled;const readOnly=state.context.readOnly;function getItemState(props2){return{invalid:!!props2.invalid,disabled:!!props2.disabled||groupDisabled,checked:state.context.value===props2.value,focused:state.context.focusedValue===props2.value,hovered:state.context.hoveredValue===props2.value,active:state.context.activeValue===props2.value}}function getItemDataAttrs(props2){const radioState=getItemState(props2);return{"data-focus":dataAttr(radioState.focused),"data-disabled":dataAttr(radioState.disabled),"dats-readonly":dataAttr(readOnly),"data-state":radioState.checked?"checked":"unchecked","data-hover":dataAttr(radioState.hovered),"data-invalid":dataAttr(radioState.invalid),"data-orientation":state.context.orientation}}const focus=()=>{const firstEnabledAndCheckedInput=dom.getFirstEnabledAndCheckedInputEl(state.context);if(firstEnabledAndCheckedInput){firstEnabledAndCheckedInput.focus();return}const firstEnabledInput=dom.getFirstEnabledInputEl(state.context);firstEnabledInput?.focus()};return{focus,value:state.context.value,setValue(value){send({type:"SET_VALUE",value,isTrusted:false})},clearValue(){send({type:"SET_VALUE",value:null,isTrusted:false})},getItemState,rootProps:normalize.element({...parts.root.attrs,role:"radiogroup",id:dom.getRootId(state.context),"aria-labelledby":dom.getLabelId(state.context),"data-orientation":state.context.orientation,"data-disabled":dataAttr(groupDisabled),"aria-orientation":state.context.orientation,dir:state.context.dir,style:{position:"relative"}}),labelProps:normalize.element({...parts.label.attrs,dir:state.context.dir,"data-orientation":state.context.orientation,"data-disabled":dataAttr(groupDisabled),id:dom.getLabelId(state.context),onClick:focus}),getItemProps(props2){const itemState=getItemState(props2);return normalize.label({...parts.item.attrs,dir:state.context.dir,id:dom.getItemId(state.context,props2.value),htmlFor:dom.getItemHiddenInputId(state.context,props2.value),...getItemDataAttrs(props2),onPointerMove(){if(itemState.disabled)return;if(itemState.hovered)return;send({type:"SET_HOVERED",value:props2.value,hovered:true})},onPointerLeave(){if(itemState.disabled)return;send({type:"SET_HOVERED",value:null})},onPointerDown(event){if(itemState.disabled)return;if(itemState.focused&&event.pointerType==="mouse"){event.preventDefault()}send({type:"SET_ACTIVE",value:props2.value,active:true})},onPointerUp(){if(itemState.disabled)return;send({type:"SET_ACTIVE",value:null})}})},getItemTextProps(props2){return normalize.element({...parts.itemText.attrs,dir:state.context.dir,id:dom.getItemLabelId(state.context,props2.value),...getItemDataAttrs(props2)})},getItemControlProps(props2){const controlState=getItemState(props2);return normalize.element({...parts.itemControl.attrs,dir:state.context.dir,id:dom.getItemControlId(state.context,props2.value),"data-active":dataAttr(controlState.active),"aria-hidden":true,...getItemDataAttrs(props2)})},getItemHiddenInputProps(props2){const inputState=getItemState(props2);return normalize.input({"data-ownedby":dom.getRootId(state.context),id:dom.getItemHiddenInputId(state.context,props2.value),type:"radio",name:state.context.name||state.context.id,form:state.context.form,value:props2.value,onChange(event){if(readOnly){event.preventDefault();return}if(event.target.checked){send({type:"SET_VALUE",value:props2.value,isTrusted:true})}},onBlur(){send({type:"SET_FOCUSED",value:null})},onFocus(){send({type:"SET_FOCUSED",value:props2.value,focused:true})},onKeyDown(event){if(event.defaultPrevented)return;if(event.key===" "){send({type:"SET_ACTIVE",value:props2.value,active:true})}},onKeyUp(event){if(event.defaultPrevented)return;if(event.key===" "){send({type:"SET_ACTIVE",value:null})}},disabled:inputState.disabled,defaultChecked:inputState.checked,style:visuallyHiddenStyle})},indicatorProps:normalize.element({id:dom.getIndicatorId(state.context),...parts.indicator.attrs,dir:state.context.dir,hidden:state.context.value==null,"data-disabled":dataAttr(groupDisabled),"data-orientation":state.context.orientation,style:{"--transition-property":"left, top, width, height","--left":state.context.indicatorRect?.left,"--top":state.context.indicatorRect?.top,"--width":state.context.indicatorRect?.width,"--height":state.context.indicatorRect?.height,position:"absolute",willChange:"var(--transition-property)",transitionProperty:"var(--transition-property)",transitionDuration:state.context.canIndicatorTransition?"var(--transition-duration, 150ms)":"0ms",transitionTimingFunction:"var(--transition-timing-function)",[state.context.orientation==="horizontal"?"left":"top"]:state.context.orientation==="horizontal"?"var(--left)":"var(--top)"}})}}import{createMachine,guards}from"@zag-js/core";import{nextTick}from"@zag-js/dom-query";import{trackElementRect}from"@zag-js/element-rect";import{dispatchInputCheckedEvent,trackFormControl}from"@zag-js/form-utils";import{compact,isEqual,isString}from"@zag-js/utils";var{not}=guards;function machine(userContext){const ctx=compact(userContext);return createMachine({id:"radio",initial:"idle",context:{value:null,activeValue:null,focusedValue:null,hoveredValue:null,disabled:false,orientation:"vertical",...ctx,indicatorRect:{},canIndicatorTransition:false,fieldsetDisabled:false},computed:{isDisabled:ctx2=>!!ctx2.disabled||ctx2.fieldsetDisabled},entry:["syncIndicatorRect"],exit:["cleanupObserver"],activities:["trackFormControlState"],watch:{value:["setIndicatorTransition","syncIndicatorRect","syncInputElements"]},on:{SET_VALUE:[{guard:not("isTrusted"),actions:["setValue","dispatchChangeEvent"]},{actions:["setValue"]}],SET_HOVERED:{actions:"setHovered"},SET_ACTIVE:{actions:"setActive"},SET_FOCUSED:{actions:"setFocused"}},states:{idle:{}}},{guards:{isTrusted:(_ctx,evt)=>!!evt.isTrusted},activities:{trackFormControlState(ctx2,_evt,{send,initialContext}){return trackFormControl(dom.getRootEl(ctx2),{onFieldsetDisabledChange(disabled){ctx2.fieldsetDisabled=disabled},onFormReset(){send({type:"SET_VALUE",value:initialContext.value})}})}},actions:{setValue(ctx2,evt){set.value(ctx2,evt.value)},setHovered(ctx2,evt){ctx2.hoveredValue=evt.value},setActive(ctx2,evt){ctx2.activeValue=evt.value},setFocused(ctx2,evt){ctx2.focusedValue=evt.value},syncInputElements(ctx2){const inputs=dom.getInputEls(ctx2);inputs.forEach(input=>{input.checked=input.value===ctx2.value})},setIndicatorTransition(ctx2){ctx2.canIndicatorTransition=isString(ctx2.value)},cleanupObserver(ctx2){ctx2.indicatorCleanup?.()},syncIndicatorRect(ctx2){ctx2.indicatorCleanup?.();if(!dom.getIndicatorEl(ctx2))return;const value=ctx2.value;const radioEl=dom.getActiveRadioEl(ctx2);if(value==null||!radioEl){ctx2.indicatorRect={};return}ctx2.indicatorCleanup=trackElementRect(radioEl,{getRect(el){return dom.getOffsetRect(el)},onChange(rect){ctx2.indicatorRect=dom.resolveRect(rect);nextTick(()=>{ctx2.canIndicatorTransition=false})}})},dispatchChangeEvent(ctx2){const inputEls=dom.getInputEls(ctx2);inputEls.forEach(inputEl=>{const checked=inputEl.value===ctx2.value;if(checked===inputEl.checked)return;dispatchInputCheckedEvent(inputEl,{checked})})}}})}var invoke={change:ctx=>{if(ctx.value==null)return;ctx.onValueChange?.({value:ctx.value})}};var set={value:(ctx,value)=>{if(isEqual(ctx.value,value))return;ctx.value=value;invoke.change(ctx)}};import{createProps}from"@zag-js/types";import{createSplitProps}from"@zag-js/utils";var props=createProps()(["dir","disabled","form","getRootNode","id","ids","name","onValueChange","orientation","readOnly","value"]);var splitProps=createSplitProps(props);var itemProps=createProps()(["value","disabled","invalid"]);var splitItemProps=createSplitProps(itemProps);export{anatomy,connect,itemProps,machine,props,splitItemProps,splitProps};
|
|
426
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts","../src/radio-group.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"item\",\n \"itemText\",\n \"itemControl\",\n \"indicator\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const groupDisabled = state.context.isDisabled\n const readOnly = state.context.readOnly\n\n function getItemState(props: ItemProps): ItemState {\n return {\n invalid: !!props.invalid,\n disabled: !!props.disabled || groupDisabled,\n checked: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n hovered: state.context.hoveredValue === props.value,\n active: state.context.activeValue === props.value,\n }\n }\n\n function getItemDataAttrs<T extends ItemProps>(props: T) {\n const radioState = getItemState(props)\n return {\n \"data-focus\": dataAttr(radioState.focused),\n \"data-disabled\": dataAttr(radioState.disabled),\n \"dats-readonly\": dataAttr(readOnly),\n \"data-state\": radioState.checked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.hovered),\n \"data-invalid\": dataAttr(radioState.invalid),\n \"data-orientation\": state.context.orientation,\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n setValue(value) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n getItemState,\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n style: {\n position: \"relative\",\n },\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getItemProps(props: ItemProps) {\n const itemState = getItemState(props)\n\n return normalize.label({\n ...parts.item.attrs,\n dir: state.context.dir,\n id: dom.getItemId(state.context, props.value),\n htmlFor: dom.getItemHiddenInputId(state.context, props.value),\n ...getItemDataAttrs(props),\n onPointerMove() {\n if (itemState.disabled) return\n if (itemState.hovered) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (itemState.disabled) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (itemState.disabled) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (itemState.focused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (itemState.disabled) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getItemTextProps(props: ItemProps) {\n return normalize.element({\n ...parts.itemText.attrs,\n dir: state.context.dir,\n id: dom.getItemLabelId(state.context, props.value),\n ...getItemDataAttrs(props),\n })\n },\n\n getItemControlProps(props: ItemProps) {\n const controlState = getItemState(props)\n\n return normalize.element({\n ...parts.itemControl.attrs,\n dir: state.context.dir,\n id: dom.getItemControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.active),\n \"aria-hidden\": true,\n ...getItemDataAttrs(props),\n })\n },\n\n getItemHiddenInputProps(props: ItemProps) {\n const inputState = getItemState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getItemHiddenInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onChange(event) {\n if (readOnly) {\n event.preventDefault()\n return\n }\n\n if (event.target.checked) {\n send({ type: \"SET_VALUE\", value: props.value, isTrusted: true })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null })\n },\n onFocus() {\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.disabled,\n defaultChecked: inputState.checked,\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n hidden: state.context.value == null,\n \"data-disabled\": dataAttr(groupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, top, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\n },\n }),\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getItemHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getItemControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getItemLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getItemHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getItemId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => ({\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }),\n\n getRectById: (ctx: Ctx, id: string) => {\n const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))\n if (!radioEl) return\n return dom.resolveRect(dom.getOffsetRect(radioEl))\n },\n\n resolveRect: (rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { dispatchInputCheckedEvent, trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isEqual, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeValue: null,\n focusedValue: null,\n hoveredValue: null,\n disabled: false,\n orientation: \"vertical\",\n ...ctx,\n indicatorRect: {},\n canIndicatorTransition: false,\n fieldsetDisabled: false,\n },\n\n computed: {\n isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n },\n\n entry: [\"syncIndicatorRect\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\"],\n\n watch: {\n value: [\"setIndicatorTransition\", \"syncIndicatorRect\", \"syncInputElements\"],\n },\n\n on: {\n SET_VALUE: [\n {\n guard: not(\"isTrusted\"),\n actions: [\"setValue\", \"dispatchChangeEvent\"],\n },\n {\n actions: [\"setValue\"],\n },\n ],\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n guards: {\n isTrusted: (_ctx, evt) => !!evt.isTrusted,\n },\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabledChange(disabled) {\n ctx.fieldsetDisabled = disabled\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setHovered(ctx, evt) {\n ctx.hoveredValue = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeValue = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedValue = evt.value\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n const radioEl = dom.getActiveRadioEl(ctx)\n\n if (value == null || !radioEl) {\n ctx.indicatorRect = {}\n return\n }\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n dispatchChangeEvent(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl) => {\n const checked = inputEl.value === ctx.value\n if (checked === inputEl.checked) return\n dispatchInputCheckedEvent(inputEl, { checked })\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n if (isEqual(ctx.value, value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ItemProps, UserDefinedContext } from \"./radio-group.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"dir\",\n \"disabled\",\n \"form\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"name\",\n \"onValueChange\",\n \"orientation\",\n \"readOnly\",\n \"value\",\n])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const itemProps = createProps<ItemProps>()([\"value\", \"disabled\", \"invalid\"])\nexport const splitItemProps = createSplitProps<ItemProps>(itemProps)\n"],"mappings":"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","names":["props","ctx"]}
|
|
1
|
+
{"version":3,"sources":["../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts","../src/radio-group.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"item\",\n \"itemText\",\n \"itemControl\",\n \"indicator\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const groupDisabled = state.context.isDisabled\n const readOnly = state.context.readOnly\n\n function getItemState(props: ItemProps): ItemState {\n return {\n invalid: !!props.invalid,\n disabled: !!props.disabled || groupDisabled,\n checked: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n hovered: state.context.hoveredValue === props.value,\n active: state.context.activeValue === props.value,\n }\n }\n\n function getItemDataAttrs<T extends ItemProps>(props: T) {\n const radioState = getItemState(props)\n return {\n \"data-focus\": dataAttr(radioState.focused),\n \"data-disabled\": dataAttr(radioState.disabled),\n \"dats-readonly\": dataAttr(readOnly),\n \"data-state\": radioState.checked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.hovered),\n \"data-invalid\": dataAttr(radioState.invalid),\n \"data-orientation\": state.context.orientation,\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n setValue(value) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n getItemState,\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n style: {\n position: \"relative\",\n },\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getItemProps(props: ItemProps) {\n const itemState = getItemState(props)\n\n return normalize.label({\n ...parts.item.attrs,\n dir: state.context.dir,\n id: dom.getItemId(state.context, props.value),\n htmlFor: dom.getItemHiddenInputId(state.context, props.value),\n ...getItemDataAttrs(props),\n onPointerMove() {\n if (itemState.disabled) return\n if (itemState.hovered) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (itemState.disabled) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (itemState.disabled) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (itemState.focused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (itemState.disabled) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getItemTextProps(props: ItemProps) {\n return normalize.element({\n ...parts.itemText.attrs,\n dir: state.context.dir,\n id: dom.getItemLabelId(state.context, props.value),\n ...getItemDataAttrs(props),\n })\n },\n\n getItemControlProps(props: ItemProps) {\n const controlState = getItemState(props)\n\n return normalize.element({\n ...parts.itemControl.attrs,\n dir: state.context.dir,\n id: dom.getItemControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.active),\n \"aria-hidden\": true,\n ...getItemDataAttrs(props),\n })\n },\n\n getItemHiddenInputProps(props: ItemProps) {\n const inputState = getItemState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getItemHiddenInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onChange(event) {\n if (readOnly) {\n event.preventDefault()\n return\n }\n\n if (event.target.checked) {\n send({ type: \"SET_VALUE\", value: props.value, isTrusted: true })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null })\n },\n onFocus() {\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.disabled,\n defaultChecked: inputState.checked,\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n hidden: state.context.value == null,\n \"data-disabled\": dataAttr(groupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, top, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\n },\n }),\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getItemHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getItemControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getItemLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getItemHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getItemId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => ({\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }),\n\n getRectById: (ctx: Ctx, id: string) => {\n const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))\n if (!radioEl) return\n return dom.resolveRect(dom.getOffsetRect(radioEl))\n },\n\n resolveRect: (rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { dispatchInputCheckedEvent, trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isEqual, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeValue: null,\n focusedValue: null,\n hoveredValue: null,\n disabled: false,\n orientation: \"vertical\",\n ...ctx,\n indicatorRect: {},\n canIndicatorTransition: false,\n fieldsetDisabled: false,\n },\n\n computed: {\n isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n },\n\n entry: [\"syncIndicatorRect\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\"],\n\n watch: {\n value: [\"setIndicatorTransition\", \"syncIndicatorRect\", \"syncInputElements\"],\n },\n\n on: {\n SET_VALUE: [\n {\n guard: not(\"isTrusted\"),\n actions: [\"setValue\", \"dispatchChangeEvent\"],\n },\n {\n actions: [\"setValue\"],\n },\n ],\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n guards: {\n isTrusted: (_ctx, evt) => !!evt.isTrusted,\n },\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabledChange(disabled) {\n ctx.fieldsetDisabled = disabled\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setHovered(ctx, evt) {\n ctx.hoveredValue = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeValue = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedValue = evt.value\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n const radioEl = dom.getActiveRadioEl(ctx)\n\n if (value == null || !radioEl) {\n ctx.indicatorRect = {}\n return\n }\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n dispatchChangeEvent(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl) => {\n const checked = inputEl.value === ctx.value\n if (checked === inputEl.checked) return\n dispatchInputCheckedEvent(inputEl, { checked })\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n if (isEqual(ctx.value, value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ItemProps, UserDefinedContext } from \"./radio-group.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"dir\",\n \"disabled\",\n \"form\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"name\",\n \"onValueChange\",\n \"orientation\",\n \"readOnly\",\n \"value\",\n])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const itemProps = createProps<ItemProps>()([\"value\", \"disabled\", \"invalid\"])\nexport const splitItemProps = createSplitProps<ItemProps>(itemProps)\n"],"mappings":"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","names":["props","ctx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/radio-group",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.1",
|
|
4
4
|
"description": "Core logic for the radio group widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@zag-js/anatomy": "0.
|
|
32
|
-
"@zag-js/dom-query": "0.
|
|
33
|
-
"@zag-js/element-rect": "0.
|
|
34
|
-
"@zag-js/form-utils": "0.
|
|
35
|
-
"@zag-js/utils": "0.
|
|
36
|
-
"@zag-js/core": "0.
|
|
37
|
-
"@zag-js/types": "0.
|
|
31
|
+
"@zag-js/anatomy": "0.51.1",
|
|
32
|
+
"@zag-js/dom-query": "0.51.1",
|
|
33
|
+
"@zag-js/element-rect": "0.51.1",
|
|
34
|
+
"@zag-js/form-utils": "0.51.1",
|
|
35
|
+
"@zag-js/utils": "0.51.1",
|
|
36
|
+
"@zag-js/core": "0.51.1",
|
|
37
|
+
"@zag-js/types": "0.51.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"clean-package": "2.2.0"
|