@zag-js/radio-group 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.d.mts +27 -44
  2. package/dist/index.d.ts +27 -44
  3. package/dist/index.js +6 -19
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +8 -21
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +9 -9
  8. package/src/index.ts +1 -1
  9. package/src/radio-group.connect.ts +6 -22
  10. package/src/radio-group.machine.ts +3 -2
  11. package/src/radio-group.types.ts +64 -70
package/dist/index.d.mts CHANGED
@@ -5,6 +5,9 @@ import { StateMachine } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "indicator">;
7
7
 
8
+ interface ValueChangeDetails {
9
+ value: string;
10
+ }
8
11
  type ElementIds = Partial<{
9
12
  root: string;
10
13
  label: string;
@@ -14,7 +17,7 @@ type ElementIds = Partial<{
14
17
  radioControl(value: string): string;
15
18
  radioHiddenInput(value: string): string;
16
19
  }>;
17
- type PublicContext = DirectionProperty & CommonProperties & {
20
+ interface PublicContext extends DirectionProperty, CommonProperties {
18
21
  /**
19
22
  * The ids of the elements in the radio. Useful for composition.
20
23
  */
@@ -40,51 +43,43 @@ type PublicContext = DirectionProperty & CommonProperties & {
40
43
  * Function called once a radio is checked
41
44
  * @param value the value of the checked radio
42
45
  */
43
- onChange?(details: {
44
- value: string;
45
- }): void;
46
+ onValueChange?(details: ValueChangeDetails): void;
46
47
  /**
47
48
  * Orientation of the radio group
48
49
  */
49
50
  orientation?: "horizontal" | "vertical";
50
- };
51
+ }
51
52
  type PrivateContext = Context<{}>;
52
53
  type UserDefinedContext = RequiredBy<PublicContext, "id">;
53
54
  type ComputedContext = Readonly<{
54
55
  /**
56
+ * @computed
55
57
  * Whether the radio group is disabled
56
58
  */
57
59
  isDisabled: boolean;
58
60
  }>;
59
- type MachineContext = PublicContext & PrivateContext & ComputedContext;
60
- type MachineState = {
61
+ interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
62
+ }
63
+ interface MachineState {
61
64
  value: "idle";
62
- };
65
+ }
63
66
  type State = StateMachine.State<MachineContext, MachineState>;
64
67
  type Send = StateMachine.Send<StateMachine.AnyEventObject>;
65
- type RadioProps = {
68
+ interface RadioProps {
66
69
  value: string;
67
- /**
68
- * If `true`, the radio will be disabled
69
- */
70
70
  disabled?: boolean;
71
- /**
72
- * If `true`, the radio is marked as invalid.
73
- */
74
71
  invalid?: boolean;
75
- };
76
- type InputProps = RadioProps & {
77
- /**
78
- * If `true` and `disabled` is passed, the radio will
79
- * remain tabbable but not interactive
80
- */
81
- focusable?: boolean;
82
- /**
83
- * If `true`, the radio input is marked as required,
84
- */
85
- required?: boolean;
86
- };
87
- type MachineApi<T extends PropTypes = PropTypes> = {
72
+ }
73
+ interface RadioState {
74
+ isInteractive: boolean;
75
+ isInvalid: boolean;
76
+ isDisabled: boolean;
77
+ isChecked: boolean;
78
+ isFocused: boolean;
79
+ isHovered: boolean;
80
+ isActive: boolean;
81
+ }
82
+ interface MachineApi<T extends PropTypes = PropTypes> {
88
83
  /**
89
84
  * The current value of the radio group
90
85
  */
@@ -101,33 +96,21 @@ type MachineApi<T extends PropTypes = PropTypes> = {
101
96
  * Function to focus the radio group
102
97
  */
103
98
  focus: () => void;
104
- /**
105
- * Function to blur the currently focused radio input in the radio group
106
- */
107
- blur(): void;
108
99
  /**
109
100
  * Returns the state details of a radio input
110
101
  */
111
- getRadioState: <T_1 extends RadioProps>(props: T_1) => {
112
- isInteractive: boolean;
113
- isInvalid: boolean | undefined;
114
- isDisabled: boolean | undefined;
115
- isChecked: boolean;
116
- isFocused: boolean;
117
- isHovered: boolean;
118
- isActive: boolean;
119
- };
102
+ getRadioState(props: RadioProps): RadioState;
120
103
  rootProps: T["element"];
121
104
  labelProps: T["element"];
122
105
  getRadioProps(props: RadioProps): T["label"];
123
106
  getRadioLabelProps(props: RadioProps): T["element"];
124
107
  getRadioControlProps(props: RadioProps): T["element"];
125
- getRadioHiddenInputProps(props: InputProps): T["input"];
108
+ getRadioHiddenInputProps(props: RadioProps): T["input"];
126
109
  indicatorProps: T["element"];
127
- };
110
+ }
128
111
 
129
112
  declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
130
113
 
131
114
  declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
132
115
 
133
- export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine };
116
+ export { MachineApi as Api, UserDefinedContext as Context, RadioProps, RadioState, anatomy, connect, machine };
package/dist/index.d.ts CHANGED
@@ -5,6 +5,9 @@ import { StateMachine } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "indicator">;
7
7
 
8
+ interface ValueChangeDetails {
9
+ value: string;
10
+ }
8
11
  type ElementIds = Partial<{
9
12
  root: string;
10
13
  label: string;
@@ -14,7 +17,7 @@ type ElementIds = Partial<{
14
17
  radioControl(value: string): string;
15
18
  radioHiddenInput(value: string): string;
16
19
  }>;
17
- type PublicContext = DirectionProperty & CommonProperties & {
20
+ interface PublicContext extends DirectionProperty, CommonProperties {
18
21
  /**
19
22
  * The ids of the elements in the radio. Useful for composition.
20
23
  */
@@ -40,51 +43,43 @@ type PublicContext = DirectionProperty & CommonProperties & {
40
43
  * Function called once a radio is checked
41
44
  * @param value the value of the checked radio
42
45
  */
43
- onChange?(details: {
44
- value: string;
45
- }): void;
46
+ onValueChange?(details: ValueChangeDetails): void;
46
47
  /**
47
48
  * Orientation of the radio group
48
49
  */
49
50
  orientation?: "horizontal" | "vertical";
50
- };
51
+ }
51
52
  type PrivateContext = Context<{}>;
52
53
  type UserDefinedContext = RequiredBy<PublicContext, "id">;
53
54
  type ComputedContext = Readonly<{
54
55
  /**
56
+ * @computed
55
57
  * Whether the radio group is disabled
56
58
  */
57
59
  isDisabled: boolean;
58
60
  }>;
59
- type MachineContext = PublicContext & PrivateContext & ComputedContext;
60
- type MachineState = {
61
+ interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
62
+ }
63
+ interface MachineState {
61
64
  value: "idle";
62
- };
65
+ }
63
66
  type State = StateMachine.State<MachineContext, MachineState>;
64
67
  type Send = StateMachine.Send<StateMachine.AnyEventObject>;
65
- type RadioProps = {
68
+ interface RadioProps {
66
69
  value: string;
67
- /**
68
- * If `true`, the radio will be disabled
69
- */
70
70
  disabled?: boolean;
71
- /**
72
- * If `true`, the radio is marked as invalid.
73
- */
74
71
  invalid?: boolean;
75
- };
76
- type InputProps = RadioProps & {
77
- /**
78
- * If `true` and `disabled` is passed, the radio will
79
- * remain tabbable but not interactive
80
- */
81
- focusable?: boolean;
82
- /**
83
- * If `true`, the radio input is marked as required,
84
- */
85
- required?: boolean;
86
- };
87
- type MachineApi<T extends PropTypes = PropTypes> = {
72
+ }
73
+ interface RadioState {
74
+ isInteractive: boolean;
75
+ isInvalid: boolean;
76
+ isDisabled: boolean;
77
+ isChecked: boolean;
78
+ isFocused: boolean;
79
+ isHovered: boolean;
80
+ isActive: boolean;
81
+ }
82
+ interface MachineApi<T extends PropTypes = PropTypes> {
88
83
  /**
89
84
  * The current value of the radio group
90
85
  */
@@ -101,33 +96,21 @@ type MachineApi<T extends PropTypes = PropTypes> = {
101
96
  * Function to focus the radio group
102
97
  */
103
98
  focus: () => void;
104
- /**
105
- * Function to blur the currently focused radio input in the radio group
106
- */
107
- blur(): void;
108
99
  /**
109
100
  * Returns the state details of a radio input
110
101
  */
111
- getRadioState: <T_1 extends RadioProps>(props: T_1) => {
112
- isInteractive: boolean;
113
- isInvalid: boolean | undefined;
114
- isDisabled: boolean | undefined;
115
- isChecked: boolean;
116
- isFocused: boolean;
117
- isHovered: boolean;
118
- isActive: boolean;
119
- };
102
+ getRadioState(props: RadioProps): RadioState;
120
103
  rootProps: T["element"];
121
104
  labelProps: T["element"];
122
105
  getRadioProps(props: RadioProps): T["label"];
123
106
  getRadioLabelProps(props: RadioProps): T["element"];
124
107
  getRadioControlProps(props: RadioProps): T["element"];
125
- getRadioHiddenInputProps(props: InputProps): T["input"];
108
+ getRadioHiddenInputProps(props: RadioProps): T["input"];
126
109
  indicatorProps: T["element"];
127
- };
110
+ }
128
111
 
129
112
  declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
130
113
 
131
114
  declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
132
115
 
133
- export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine };
116
+ export { MachineApi as Api, UserDefinedContext as Context, RadioProps, RadioState, anatomy, connect, machine };
package/dist/index.js CHANGED
@@ -92,8 +92,8 @@ function connect(state, send, normalize) {
92
92
  const isGroupDisabled = state.context.isDisabled;
93
93
  function getRadioState(props) {
94
94
  const radioState = {
95
- isInvalid: props.invalid,
96
- isDisabled: props.disabled || isGroupDisabled,
95
+ isInvalid: !!props.invalid,
96
+ isDisabled: !!props.disabled || isGroupDisabled,
97
97
  isChecked: state.context.value === props.value,
98
98
  isFocused: state.context.focusedId === props.value,
99
99
  isHovered: state.context.hoveredId === props.value,
@@ -133,13 +133,6 @@ function connect(state, send, normalize) {
133
133
  send({ type: "SET_VALUE", value: null, isTrusted: false });
134
134
  },
135
135
  focus,
136
- blur() {
137
- const focusedElement = dom.getActiveElement(state.context);
138
- const inputEls = dom.getInputEls(state.context);
139
- const radioHiddenInputIsFocused = inputEls.some((el) => el === focusedElement);
140
- if (radioHiddenInputIsFocused)
141
- focusedElement?.blur();
142
- },
143
136
  getRadioState,
144
137
  rootProps: normalize.element({
145
138
  ...parts.root.attrs,
@@ -209,8 +202,6 @@ function connect(state, send, normalize) {
209
202
  },
210
203
  getRadioHiddenInputProps(props) {
211
204
  const inputState = getRadioState(props);
212
- const isRequired = props.required;
213
- const trulyDisabled = inputState.isDisabled && !props.focusable;
214
205
  return normalize.input({
215
206
  "data-ownedby": dom.getRootId(state.context),
216
207
  id: dom.getRadioHiddenInputId(state.context, props.value),
@@ -241,14 +232,8 @@ function connect(state, send, normalize) {
241
232
  send({ type: "SET_ACTIVE", value: null });
242
233
  }
243
234
  },
244
- disabled: trulyDisabled,
245
- required: isRequired,
235
+ disabled: inputState.isDisabled,
246
236
  defaultChecked: inputState.isChecked,
247
- "data-disabled": (0, import_dom_query2.dataAttr)(inputState.isDisabled),
248
- "aria-required": (0, import_dom_query2.ariaAttr)(isRequired),
249
- "aria-invalid": (0, import_dom_query2.ariaAttr)(inputState.isInvalid),
250
- "aria-disabled": (0, import_dom_query2.ariaAttr)(trulyDisabled),
251
- "aria-checked": (0, import_dom_query2.ariaAttr)(inputState.isChecked),
252
237
  style: import_visually_hidden.visuallyHiddenStyle
253
238
  });
254
239
  },
@@ -410,11 +395,13 @@ var invoke = {
410
395
  change: (ctx) => {
411
396
  if (ctx.value == null)
412
397
  return;
413
- ctx.onChange?.({ value: ctx.value });
398
+ ctx.onValueChange?.({ value: ctx.value });
414
399
  }
415
400
  };
416
401
  var set = {
417
402
  value: (ctx, value) => {
403
+ if ((0, import_utils.isEqual)(ctx.value, value))
404
+ return;
418
405
  ctx.value = value;
419
406
  invoke.change(ctx);
420
407
  }
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"],"sourcesContent":["export { anatomy } from \"./radio-group.anatomy\"\nexport { connect } from \"./radio-group.connect\"\nexport { machine } from \"./radio-group.machine\"\nexport type { UserDefinedContext as Context, MachineApi as Api } from \"./radio-group.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"radio\",\n \"radioLabel\",\n \"radioControl\",\n \"indicator\",\n)\nexport const parts = anatomy.build()\n","import { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { InputProps, MachineApi, RadioProps, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isGroupDisabled = state.context.isDisabled\n\n function getRadioState<T extends RadioProps>(props: T) {\n const radioState = {\n isInvalid: props.invalid,\n isDisabled: props.disabled || isGroupDisabled,\n isChecked: state.context.value === props.value,\n isFocused: state.context.focusedId === props.value,\n isHovered: state.context.hoveredId === props.value,\n isActive: state.context.activeId === props.value,\n }\n return {\n ...radioState,\n isInteractive: !radioState.isDisabled,\n }\n }\n\n function getRadioDataAttrs<T extends RadioProps>(props: T) {\n const radioState = getRadioState(props)\n return {\n \"data-focus\": dataAttr(radioState.isFocused),\n \"data-disabled\": dataAttr(radioState.isDisabled),\n \"data-state\": radioState.isChecked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.isHovered),\n \"data-invalid\": dataAttr(radioState.isInvalid),\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 value: state.context.value,\n\n setValue(value: string) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n\n focus,\n\n blur() {\n const focusedElement = dom.getActiveElement(state.context)\n const inputEls = dom.getInputEls(state.context)\n const radioHiddenInputIsFocused = inputEls.some((el) => el === focusedElement)\n if (radioHiddenInputIsFocused) focusedElement?.blur()\n },\n\n getRadioState,\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(isGroupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(isGroupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getRadioProps(props: RadioProps) {\n const rootState = getRadioState(props)\n\n return normalize.label({\n ...parts.radio.attrs,\n id: dom.getRadioId(state.context, props.value),\n htmlFor: dom.getRadioHiddenInputId(state.context, props.value),\n ...getRadioDataAttrs(props),\n\n onPointerMove() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (!rootState.isInteractive) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (rootState.isFocused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getRadioLabelProps(props: RadioProps) {\n return normalize.element({\n ...parts.radioLabel.attrs,\n id: dom.getRadioLabelId(state.context, props.value),\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioControlProps(props: RadioProps) {\n const controlState = getRadioState(props)\n\n return normalize.element({\n ...parts.radioControl.attrs,\n id: dom.getRadioControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.isActive),\n \"aria-hidden\": true,\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioHiddenInputProps(props: InputProps) {\n const inputState = getRadioState(props)\n\n const isRequired = props.required\n const trulyDisabled = inputState.isDisabled && !props.focusable\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getRadioHiddenInputId(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 (inputState.isDisabled) return\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.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: trulyDisabled,\n required: isRequired,\n defaultChecked: inputState.isChecked,\n \"data-disabled\": dataAttr(inputState.isDisabled),\n \"aria-required\": ariaAttr(isRequired),\n \"aria-invalid\": ariaAttr(inputState.isInvalid),\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"aria-checked\": ariaAttr(inputState.isChecked),\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n \"data-disabled\": dataAttr(isGroupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-duration\": \"150ms\",\n \"--transition-property\": \"left, top, width, height\",\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n ...state.context.indicatorRect,\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 getRadioId: (ctx: Ctx, value: string) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getRadioHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getRadioControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getRadioLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioLabel?.(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 getRadioHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getRadioHiddenInputId(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.getRadioId(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.getRadioId(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, 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 activeId: null,\n focusedId: null,\n hoveredId: null,\n disabled: false,\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.hoveredId = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeId = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedId = 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 if (value == null) {\n ctx.indicatorRect = {}\n return\n }\n\n const radioEl = dom.getActiveRadioEl(ctx)\n if (!radioEl) return\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.onChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n ctx.value = value\n invoke.change(ctx)\n },\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","ctx"]}
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"],"sourcesContent":["export { anatomy } from \"./radio-group.anatomy\"\nexport { connect } from \"./radio-group.connect\"\nexport { machine } from \"./radio-group.machine\"\nexport type { UserDefinedContext as Context, MachineApi as Api, RadioProps, RadioState } from \"./radio-group.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"radio\",\n \"radioLabel\",\n \"radioControl\",\n \"indicator\",\n)\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineApi, RadioProps, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isGroupDisabled = state.context.isDisabled\n\n function getRadioState<T extends RadioProps>(props: T) {\n const radioState = {\n isInvalid: !!props.invalid,\n isDisabled: !!props.disabled || isGroupDisabled,\n isChecked: state.context.value === props.value,\n isFocused: state.context.focusedId === props.value,\n isHovered: state.context.hoveredId === props.value,\n isActive: state.context.activeId === props.value,\n }\n return {\n ...radioState,\n isInteractive: !radioState.isDisabled,\n }\n }\n\n function getRadioDataAttrs<T extends RadioProps>(props: T) {\n const radioState = getRadioState(props)\n return {\n \"data-focus\": dataAttr(radioState.isFocused),\n \"data-disabled\": dataAttr(radioState.isDisabled),\n \"data-state\": radioState.isChecked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.isHovered),\n \"data-invalid\": dataAttr(radioState.isInvalid),\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 value: state.context.value,\n\n setValue(value: string) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n\n focus,\n\n getRadioState,\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(isGroupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(isGroupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getRadioProps(props: RadioProps) {\n const rootState = getRadioState(props)\n\n return normalize.label({\n ...parts.radio.attrs,\n id: dom.getRadioId(state.context, props.value),\n htmlFor: dom.getRadioHiddenInputId(state.context, props.value),\n ...getRadioDataAttrs(props),\n\n onPointerMove() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (!rootState.isInteractive) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (rootState.isFocused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getRadioLabelProps(props: RadioProps) {\n return normalize.element({\n ...parts.radioLabel.attrs,\n id: dom.getRadioLabelId(state.context, props.value),\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioControlProps(props: RadioProps) {\n const controlState = getRadioState(props)\n\n return normalize.element({\n ...parts.radioControl.attrs,\n id: dom.getRadioControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.isActive),\n \"aria-hidden\": true,\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioHiddenInputProps(props: RadioProps) {\n const inputState = getRadioState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getRadioHiddenInputId(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 (inputState.isDisabled) return\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.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.isDisabled,\n defaultChecked: inputState.isChecked,\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n \"data-disabled\": dataAttr(isGroupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-duration\": \"150ms\",\n \"--transition-property\": \"left, top, width, height\",\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n ...state.context.indicatorRect,\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 getRadioId: (ctx: Ctx, value: string) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getRadioHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getRadioControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getRadioLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioLabel?.(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 getRadioHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getRadioHiddenInputId(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.getRadioId(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.getRadioId(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 activeId: null,\n focusedId: null,\n hoveredId: null,\n disabled: false,\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.hoveredId = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeId = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedId = 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 if (value == null) {\n ctx.indicatorRect = {}\n return\n }\n\n const radioEl = dom.getActiveRadioEl(ctx)\n if (!radioEl) return\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"],"mappings":"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","names":["import_dom_query","import_dom_query","ctx"]}
package/dist/index.mjs CHANGED
@@ -11,7 +11,7 @@ var anatomy = createAnatomy("radio-group").parts(
11
11
  var parts = anatomy.build();
12
12
 
13
13
  // src/radio-group.connect.ts
14
- import { ariaAttr, dataAttr } from "@zag-js/dom-query";
14
+ import { dataAttr } from "@zag-js/dom-query";
15
15
  import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
16
16
 
17
17
  // src/radio-group.dom.ts
@@ -64,8 +64,8 @@ function connect(state, send, normalize) {
64
64
  const isGroupDisabled = state.context.isDisabled;
65
65
  function getRadioState(props) {
66
66
  const radioState = {
67
- isInvalid: props.invalid,
68
- isDisabled: props.disabled || isGroupDisabled,
67
+ isInvalid: !!props.invalid,
68
+ isDisabled: !!props.disabled || isGroupDisabled,
69
69
  isChecked: state.context.value === props.value,
70
70
  isFocused: state.context.focusedId === props.value,
71
71
  isHovered: state.context.hoveredId === props.value,
@@ -105,13 +105,6 @@ function connect(state, send, normalize) {
105
105
  send({ type: "SET_VALUE", value: null, isTrusted: false });
106
106
  },
107
107
  focus,
108
- blur() {
109
- const focusedElement = dom.getActiveElement(state.context);
110
- const inputEls = dom.getInputEls(state.context);
111
- const radioHiddenInputIsFocused = inputEls.some((el) => el === focusedElement);
112
- if (radioHiddenInputIsFocused)
113
- focusedElement?.blur();
114
- },
115
108
  getRadioState,
116
109
  rootProps: normalize.element({
117
110
  ...parts.root.attrs,
@@ -181,8 +174,6 @@ function connect(state, send, normalize) {
181
174
  },
182
175
  getRadioHiddenInputProps(props) {
183
176
  const inputState = getRadioState(props);
184
- const isRequired = props.required;
185
- const trulyDisabled = inputState.isDisabled && !props.focusable;
186
177
  return normalize.input({
187
178
  "data-ownedby": dom.getRootId(state.context),
188
179
  id: dom.getRadioHiddenInputId(state.context, props.value),
@@ -213,14 +204,8 @@ function connect(state, send, normalize) {
213
204
  send({ type: "SET_ACTIVE", value: null });
214
205
  }
215
206
  },
216
- disabled: trulyDisabled,
217
- required: isRequired,
207
+ disabled: inputState.isDisabled,
218
208
  defaultChecked: inputState.isChecked,
219
- "data-disabled": dataAttr(inputState.isDisabled),
220
- "aria-required": ariaAttr(isRequired),
221
- "aria-invalid": ariaAttr(inputState.isInvalid),
222
- "aria-disabled": ariaAttr(trulyDisabled),
223
- "aria-checked": ariaAttr(inputState.isChecked),
224
209
  style: visuallyHiddenStyle
225
210
  });
226
211
  },
@@ -248,7 +233,7 @@ import { createMachine, guards } from "@zag-js/core";
248
233
  import { nextTick } from "@zag-js/dom-query";
249
234
  import { trackElementRect } from "@zag-js/element-rect";
250
235
  import { dispatchInputCheckedEvent, trackFormControl } from "@zag-js/form-utils";
251
- import { compact, isString } from "@zag-js/utils";
236
+ import { compact, isEqual, isString } from "@zag-js/utils";
252
237
  var { not } = guards;
253
238
  function machine(userContext) {
254
239
  const ctx = compact(userContext);
@@ -382,11 +367,13 @@ var invoke = {
382
367
  change: (ctx) => {
383
368
  if (ctx.value == null)
384
369
  return;
385
- ctx.onChange?.({ value: ctx.value });
370
+ ctx.onValueChange?.({ value: ctx.value });
386
371
  }
387
372
  };
388
373
  var set = {
389
374
  value: (ctx, value) => {
375
+ if (isEqual(ctx.value, value))
376
+ return;
390
377
  ctx.value = value;
391
378
  invoke.change(ctx);
392
379
  }
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"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"radio\",\n \"radioLabel\",\n \"radioControl\",\n \"indicator\",\n)\nexport const parts = anatomy.build()\n","import { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { InputProps, MachineApi, RadioProps, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isGroupDisabled = state.context.isDisabled\n\n function getRadioState<T extends RadioProps>(props: T) {\n const radioState = {\n isInvalid: props.invalid,\n isDisabled: props.disabled || isGroupDisabled,\n isChecked: state.context.value === props.value,\n isFocused: state.context.focusedId === props.value,\n isHovered: state.context.hoveredId === props.value,\n isActive: state.context.activeId === props.value,\n }\n return {\n ...radioState,\n isInteractive: !radioState.isDisabled,\n }\n }\n\n function getRadioDataAttrs<T extends RadioProps>(props: T) {\n const radioState = getRadioState(props)\n return {\n \"data-focus\": dataAttr(radioState.isFocused),\n \"data-disabled\": dataAttr(radioState.isDisabled),\n \"data-state\": radioState.isChecked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.isHovered),\n \"data-invalid\": dataAttr(radioState.isInvalid),\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 value: state.context.value,\n\n setValue(value: string) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n\n focus,\n\n blur() {\n const focusedElement = dom.getActiveElement(state.context)\n const inputEls = dom.getInputEls(state.context)\n const radioHiddenInputIsFocused = inputEls.some((el) => el === focusedElement)\n if (radioHiddenInputIsFocused) focusedElement?.blur()\n },\n\n getRadioState,\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(isGroupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(isGroupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getRadioProps(props: RadioProps) {\n const rootState = getRadioState(props)\n\n return normalize.label({\n ...parts.radio.attrs,\n id: dom.getRadioId(state.context, props.value),\n htmlFor: dom.getRadioHiddenInputId(state.context, props.value),\n ...getRadioDataAttrs(props),\n\n onPointerMove() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (!rootState.isInteractive) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (rootState.isFocused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getRadioLabelProps(props: RadioProps) {\n return normalize.element({\n ...parts.radioLabel.attrs,\n id: dom.getRadioLabelId(state.context, props.value),\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioControlProps(props: RadioProps) {\n const controlState = getRadioState(props)\n\n return normalize.element({\n ...parts.radioControl.attrs,\n id: dom.getRadioControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.isActive),\n \"aria-hidden\": true,\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioHiddenInputProps(props: InputProps) {\n const inputState = getRadioState(props)\n\n const isRequired = props.required\n const trulyDisabled = inputState.isDisabled && !props.focusable\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getRadioHiddenInputId(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 (inputState.isDisabled) return\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.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: trulyDisabled,\n required: isRequired,\n defaultChecked: inputState.isChecked,\n \"data-disabled\": dataAttr(inputState.isDisabled),\n \"aria-required\": ariaAttr(isRequired),\n \"aria-invalid\": ariaAttr(inputState.isInvalid),\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"aria-checked\": ariaAttr(inputState.isChecked),\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n \"data-disabled\": dataAttr(isGroupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-duration\": \"150ms\",\n \"--transition-property\": \"left, top, width, height\",\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n ...state.context.indicatorRect,\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 getRadioId: (ctx: Ctx, value: string) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getRadioHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getRadioControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getRadioLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioLabel?.(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 getRadioHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getRadioHiddenInputId(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.getRadioId(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.getRadioId(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, 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 activeId: null,\n focusedId: null,\n hoveredId: null,\n disabled: false,\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.hoveredId = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeId = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedId = 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 if (value == null) {\n ctx.indicatorRect = {}\n return\n }\n\n const radioEl = dom.getActiveRadioEl(ctx)\n if (!radioEl) return\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.onChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n ctx.value = value\n invoke.change(ctx)\n },\n}\n"],"mappings":"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","names":["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"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"radio\",\n \"radioLabel\",\n \"radioControl\",\n \"indicator\",\n)\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineApi, RadioProps, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isGroupDisabled = state.context.isDisabled\n\n function getRadioState<T extends RadioProps>(props: T) {\n const radioState = {\n isInvalid: !!props.invalid,\n isDisabled: !!props.disabled || isGroupDisabled,\n isChecked: state.context.value === props.value,\n isFocused: state.context.focusedId === props.value,\n isHovered: state.context.hoveredId === props.value,\n isActive: state.context.activeId === props.value,\n }\n return {\n ...radioState,\n isInteractive: !radioState.isDisabled,\n }\n }\n\n function getRadioDataAttrs<T extends RadioProps>(props: T) {\n const radioState = getRadioState(props)\n return {\n \"data-focus\": dataAttr(radioState.isFocused),\n \"data-disabled\": dataAttr(radioState.isDisabled),\n \"data-state\": radioState.isChecked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.isHovered),\n \"data-invalid\": dataAttr(radioState.isInvalid),\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 value: state.context.value,\n\n setValue(value: string) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n\n focus,\n\n getRadioState,\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(isGroupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(isGroupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getRadioProps(props: RadioProps) {\n const rootState = getRadioState(props)\n\n return normalize.label({\n ...parts.radio.attrs,\n id: dom.getRadioId(state.context, props.value),\n htmlFor: dom.getRadioHiddenInputId(state.context, props.value),\n ...getRadioDataAttrs(props),\n\n onPointerMove() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (!rootState.isInteractive) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (rootState.isFocused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getRadioLabelProps(props: RadioProps) {\n return normalize.element({\n ...parts.radioLabel.attrs,\n id: dom.getRadioLabelId(state.context, props.value),\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioControlProps(props: RadioProps) {\n const controlState = getRadioState(props)\n\n return normalize.element({\n ...parts.radioControl.attrs,\n id: dom.getRadioControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.isActive),\n \"aria-hidden\": true,\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioHiddenInputProps(props: RadioProps) {\n const inputState = getRadioState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getRadioHiddenInputId(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 (inputState.isDisabled) return\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.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.isDisabled,\n defaultChecked: inputState.isChecked,\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n \"data-disabled\": dataAttr(isGroupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-duration\": \"150ms\",\n \"--transition-property\": \"left, top, width, height\",\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n ...state.context.indicatorRect,\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 getRadioId: (ctx: Ctx, value: string) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getRadioHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getRadioControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getRadioLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioLabel?.(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 getRadioHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getRadioHiddenInputId(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.getRadioId(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.getRadioId(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 activeId: null,\n focusedId: null,\n hoveredId: null,\n disabled: false,\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.hoveredId = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeId = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedId = 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 if (value == null) {\n ctx.indicatorRect = {}\n return\n }\n\n const radioEl = dom.getActiveRadioEl(ctx)\n if (!radioEl) return\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"],"mappings":"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","names":["ctx"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/radio-group",
3
- "version": "0.19.0",
3
+ "version": "0.20.0",
4
4
  "description": "Core logic for the radio group widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -28,14 +28,14 @@
28
28
  "url": "https://github.com/chakra-ui/zag/issues"
29
29
  },
30
30
  "dependencies": {
31
- "@zag-js/anatomy": "0.19.0",
32
- "@zag-js/dom-query": "0.19.0",
33
- "@zag-js/element-rect": "0.19.0",
34
- "@zag-js/form-utils": "0.19.0",
35
- "@zag-js/visually-hidden": "0.19.0",
36
- "@zag-js/utils": "0.19.0",
37
- "@zag-js/core": "0.19.0",
38
- "@zag-js/types": "0.19.0"
31
+ "@zag-js/anatomy": "0.20.0",
32
+ "@zag-js/dom-query": "0.20.0",
33
+ "@zag-js/element-rect": "0.20.0",
34
+ "@zag-js/form-utils": "0.20.0",
35
+ "@zag-js/visually-hidden": "0.20.0",
36
+ "@zag-js/utils": "0.20.0",
37
+ "@zag-js/core": "0.20.0",
38
+ "@zag-js/types": "0.20.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "clean-package": "2.2.0"
package/src/index.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { anatomy } from "./radio-group.anatomy"
2
2
  export { connect } from "./radio-group.connect"
3
3
  export { machine } from "./radio-group.machine"
4
- export type { UserDefinedContext as Context, MachineApi as Api } from "./radio-group.types"
4
+ export type { UserDefinedContext as Context, MachineApi as Api, RadioProps, RadioState } from "./radio-group.types"
package/src/radio-group.connect.ts CHANGED
@@ -1,17 +1,17 @@
1
- import { ariaAttr, dataAttr } from "@zag-js/dom-query"
1
+ import { dataAttr } from "@zag-js/dom-query"
2
2
  import type { NormalizeProps, PropTypes } from "@zag-js/types"
3
3
  import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
4
4
  import { parts } from "./radio-group.anatomy"
5
5
  import { dom } from "./radio-group.dom"
6
- import type { InputProps, MachineApi, RadioProps, Send, State } from "./radio-group.types"
6
+ import type { MachineApi, RadioProps, Send, State } from "./radio-group.types"
7
7
 
8
8
  export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
9
9
  const isGroupDisabled = state.context.isDisabled
10
10
 
11
11
  function getRadioState<T extends RadioProps>(props: T) {
12
12
  const radioState = {
13
- isInvalid: props.invalid,
14
- isDisabled: props.disabled || isGroupDisabled,
13
+ isInvalid: !!props.invalid,
14
+ isDisabled: !!props.disabled || isGroupDisabled,
15
15
  isChecked: state.context.value === props.value,
16
16
  isFocused: state.context.focusedId === props.value,
17
17
  isHovered: state.context.hoveredId === props.value,
@@ -60,13 +60,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
60
60
 
61
61
  focus,
62
62
 
63
- blur() {
64
- const focusedElement = dom.getActiveElement(state.context)
65
- const inputEls = dom.getInputEls(state.context)
66
- const radioHiddenInputIsFocused = inputEls.some((el) => el === focusedElement)
67
- if (radioHiddenInputIsFocused) focusedElement?.blur()
68
- },
69
-
70
63
  getRadioState,
71
64
 
72
65
  rootProps: normalize.element({
@@ -141,12 +134,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
141
134
  })
142
135
  },
143
136
 
144
- getRadioHiddenInputProps(props: InputProps) {
137
+ getRadioHiddenInputProps(props: RadioProps) {
145
138
  const inputState = getRadioState(props)
146
139
 
147
- const isRequired = props.required
148
- const trulyDisabled = inputState.isDisabled && !props.focusable
149
-
150
140
  return normalize.input({
151
141
  "data-ownedby": dom.getRootId(state.context),
152
142
  id: dom.getRadioHiddenInputId(state.context, props.value),
@@ -177,14 +167,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
177
167
  send({ type: "SET_ACTIVE", value: null })
178
168
  }
179
169
  },
180
- disabled: trulyDisabled,
181
- required: isRequired,
170
+ disabled: inputState.isDisabled,
182
171
  defaultChecked: inputState.isChecked,
183
- "data-disabled": dataAttr(inputState.isDisabled),
184
- "aria-required": ariaAttr(isRequired),
185
- "aria-invalid": ariaAttr(inputState.isInvalid),
186
- "aria-disabled": ariaAttr(trulyDisabled),
187
- "aria-checked": ariaAttr(inputState.isChecked),
188
172
  style: visuallyHiddenStyle,
189
173
  })
190
174
  },
package/src/radio-group.machine.ts CHANGED
@@ -2,7 +2,7 @@ import { createMachine, guards } from "@zag-js/core"
2
2
  import { nextTick } from "@zag-js/dom-query"
3
3
  import { trackElementRect } from "@zag-js/element-rect"
4
4
  import { dispatchInputCheckedEvent, trackFormControl } from "@zag-js/form-utils"
5
- import { compact, isString } from "@zag-js/utils"
5
+ import { compact, isEqual, isString } from "@zag-js/utils"
6
6
  import { dom } from "./radio-group.dom"
7
7
  import type { MachineContext, MachineState, UserDefinedContext } from "./radio-group.types"
8
8
 
@@ -151,12 +151,13 @@ export function machine(userContext: UserDefinedContext) {
151
151
  const invoke = {
152
152
  change: (ctx: MachineContext) => {
153
153
  if (ctx.value == null) return
154
- ctx.onChange?.({ value: ctx.value })
154
+ ctx.onValueChange?.({ value: ctx.value })
155
155
  },
156
156
  }
157
157
 
158
158
  const set = {
159
159
  value: (ctx: MachineContext, value: string) => {
160
+ if (isEqual(ctx.value, value)) return
160
161
  ctx.value = value
161
162
  invoke.change(ctx)
162
163
  },
package/src/radio-group.types.ts CHANGED
@@ -1,6 +1,14 @@
1
1
  import type { StateMachine as S } from "@zag-js/core"
2
2
  import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
3
3
 
4
+ export interface ValueChangeDetails {
5
+ value: string
6
+ }
7
+
8
+ /* -----------------------------------------------------------------------------
9
+ * Machine context
10
+ * -----------------------------------------------------------------------------*/
11
+
4
12
  type ElementIds = Partial<{
5
13
  root: string
6
14
  label: string
@@ -11,40 +19,39 @@ type ElementIds = Partial<{
11
19
  radioHiddenInput(value: string): string
12
20
  }>
13
21
 
14
- type PublicContext = DirectionProperty &
15
- CommonProperties & {
16
- /**
17
- * The ids of the elements in the radio. Useful for composition.
18
- */
19
- ids?: ElementIds
20
- /**
21
- * The value of the checked radio
22
- */
23
- value: string | null
24
-
25
- /**
26
- * The name of the input fields in the radio
27
- * (Useful for form submission).
28
- */
29
- name?: string
30
- /**
31
- * The associate form of the underlying input.
32
- */
33
- form?: string
34
- /**
35
- * If `true`, the radio group will be disabled
36
- */
37
- disabled?: boolean
38
- /**
39
- * Function called once a radio is checked
40
- * @param value the value of the checked radio
41
- */
42
- onChange?(details: { value: string }): void
43
- /**
44
- * Orientation of the radio group
45
- */
46
- orientation?: "horizontal" | "vertical"
47
- }
22
+ interface PublicContext extends DirectionProperty, CommonProperties {
23
+ /**
24
+ * The ids of the elements in the radio. Useful for composition.
25
+ */
26
+ ids?: ElementIds
27
+ /**
28
+ * The value of the checked radio
29
+ */
30
+ value: string | null
31
+
32
+ /**
33
+ * The name of the input fields in the radio
34
+ * (Useful for form submission).
35
+ */
36
+ name?: string
37
+ /**
38
+ * The associate form of the underlying input.
39
+ */
40
+ form?: string
41
+ /**
42
+ * If `true`, the radio group will be disabled
43
+ */
44
+ disabled?: boolean
45
+ /**
46
+ * Function called once a radio is checked
47
+ * @param value the value of the checked radio
48
+ */
49
+ onValueChange?(details: ValueChangeDetails): void
50
+ /**
51
+ * Orientation of the radio group
52
+ */
53
+ orientation?: "horizontal" | "vertical"
54
+ }
48
55
 
49
56
  type PrivateContext = Context<{
50
57
  /**
@@ -88,14 +95,15 @@ export type UserDefinedContext = RequiredBy<PublicContext, "id">
88
95
 
89
96
  type ComputedContext = Readonly<{
90
97
  /**
98
+ * @computed
91
99
  * Whether the radio group is disabled
92
100
  */
93
101
  isDisabled: boolean
94
102
  }>
95
103
 
96
- export type MachineContext = PublicContext & PrivateContext & ComputedContext
104
+ export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
97
105
 
98
- export type MachineState = {
106
+ export interface MachineState {
99
107
  value: "idle"
100
108
  }
101
109
 
@@ -103,31 +111,31 @@ export type State = S.State<MachineContext, MachineState>
103
111
 
104
112
  export type Send = S.Send<S.AnyEventObject>
105
113
 
106
- export type RadioProps = {
114
+ /* -----------------------------------------------------------------------------
115
+ * Component API
116
+ * -----------------------------------------------------------------------------*/
117
+
118
+ export interface RadioProps {
107
119
  value: string
108
- /**
109
- * If `true`, the radio will be disabled
110
- */
111
120
  disabled?: boolean
112
- /**
113
- * If `true`, the radio is marked as invalid.
114
- */
115
121
  invalid?: boolean
116
122
  }
117
123
 
118
- export type InputProps = RadioProps & {
119
- /**
120
- * If `true` and `disabled` is passed, the radio will
121
- * remain tabbable but not interactive
122
- */
123
- focusable?: boolean
124
- /**
125
- * If `true`, the radio input is marked as required,
126
- */
127
- required?: boolean
124
+ export interface RadioState {
125
+ isInteractive: boolean
126
+ isInvalid: boolean
127
+ isDisabled: boolean
128
+ isChecked: boolean
129
+ isFocused: boolean
130
+ isHovered: boolean
131
+ isActive: boolean
128
132
  }
129
133
 
130
- export type MachineApi<T extends PropTypes = PropTypes> = {
134
+ /* -----------------------------------------------------------------------------
135
+ * Component API
136
+ * -----------------------------------------------------------------------------*/
137
+
138
+ export interface MachineApi<T extends PropTypes = PropTypes> {
131
139
  /**
132
140
  * The current value of the radio group
133
141
  */
@@ -144,29 +152,15 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
144
152
  * Function to focus the radio group
145
153
  */
146
154
  focus: () => void
147
- /**
148
- * Function to blur the currently focused radio input in the radio group
149
- */
150
- blur(): void
151
155
  /**
152
156
  * Returns the state details of a radio input
153
157
  */
154
- getRadioState: <T_1 extends RadioProps>(
155
- props: T_1,
156
- ) => {
157
- isInteractive: boolean
158
- isInvalid: boolean | undefined
159
- isDisabled: boolean | undefined
160
- isChecked: boolean
161
- isFocused: boolean
162
- isHovered: boolean
163
- isActive: boolean
164
- }
158
+ getRadioState(props: RadioProps): RadioState
165
159
  rootProps: T["element"]
166
160
  labelProps: T["element"]
167
161
  getRadioProps(props: RadioProps): T["label"]
168
162
  getRadioLabelProps(props: RadioProps): T["element"]
169
163
  getRadioControlProps(props: RadioProps): T["element"]
170
- getRadioHiddenInputProps(props: InputProps): T["input"]
164
+ getRadioHiddenInputProps(props: RadioProps): T["input"]
171
165
  indicatorProps: T["element"]
172
166
  }