@zag-js/radio-group 2.0.0-next.0 → 2.0.0-next.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.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/radio-group.connect.js +21 -10
- package/dist/radio-group.connect.mjs +21 -10
- package/dist/radio-group.types.d.mts +27 -1
- package/dist/radio-group.types.d.ts +27 -1
- package/package.json +11 -8
package/dist/index.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ export { anatomy } from './radio-group.anatomy.mjs';
|
|
|
2
2
|
export { connect } from './radio-group.connect.mjs';
|
|
3
3
|
export { machine } from './radio-group.machine.mjs';
|
|
4
4
|
export { itemProps, props, splitItemProps, splitProps } from './radio-group.props.mjs';
|
|
5
|
-
export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.mjs';
|
|
5
|
+
export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RootState, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.mjs';
|
|
6
6
|
import '@zag-js/anatomy';
|
|
7
7
|
import '@zag-js/types';
|
|
8
8
|
import '@zag-js/core';
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { anatomy } from './radio-group.anatomy.js';
|
|
|
2
2
|
export { connect } from './radio-group.connect.js';
|
|
3
3
|
export { machine } from './radio-group.machine.js';
|
|
4
4
|
export { itemProps, props, splitItemProps, splitProps } from './radio-group.props.js';
|
|
5
|
-
export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.js';
|
|
5
|
+
export { RadioGroupApi as Api, ElementIds, ItemProps, ItemState, RadioGroupMachine as Machine, RadioGroupProps as Props, RootState, RadioGroupService as Service, ValueChangeDetails } from './radio-group.types.js';
|
|
6
6
|
import '@zag-js/anatomy';
|
|
7
7
|
import '@zag-js/types';
|
|
8
8
|
import '@zag-js/core';
|
|
@@ -41,8 +41,17 @@ var dom = __toESM(require("./radio-group.dom.js"));
|
|
|
41
41
|
function connect(service, normalize) {
|
|
42
42
|
const { context, send, computed, prop, scope } = service;
|
|
43
43
|
const groupDisabled = computed("isDisabled");
|
|
44
|
-
const groupInvalid = prop("invalid");
|
|
45
|
-
const readOnly = prop("readOnly");
|
|
44
|
+
const groupInvalid = !!prop("invalid");
|
|
45
|
+
const readOnly = !!prop("readOnly");
|
|
46
|
+
function getRootState() {
|
|
47
|
+
return {
|
|
48
|
+
disabled: groupDisabled,
|
|
49
|
+
invalid: groupInvalid,
|
|
50
|
+
required: !!prop("required"),
|
|
51
|
+
readOnly,
|
|
52
|
+
orientation: prop("orientation")
|
|
53
|
+
};
|
|
54
|
+
}
|
|
46
55
|
function getItemState(props) {
|
|
47
56
|
return {
|
|
48
57
|
value: props.value,
|
|
@@ -82,19 +91,21 @@ function connect(service, normalize) {
|
|
|
82
91
|
clearValue() {
|
|
83
92
|
send({ type: "SET_VALUE", value: null, isTrusted: false });
|
|
84
93
|
},
|
|
94
|
+
getRootState,
|
|
85
95
|
getRootProps() {
|
|
96
|
+
const rootState = getRootState();
|
|
86
97
|
return normalize.element({
|
|
87
98
|
...import_radio_group.parts.root.attrs(scope.id),
|
|
88
99
|
role: "radiogroup",
|
|
89
100
|
"aria-labelledby": dom.getLabelId(scope),
|
|
90
|
-
"aria-required":
|
|
91
|
-
"aria-disabled":
|
|
92
|
-
"aria-readonly": readOnly || void 0,
|
|
93
|
-
"data-orientation":
|
|
94
|
-
"data-disabled": (0, import_dom_query.dataAttr)(
|
|
95
|
-
"data-invalid": (0, import_dom_query.dataAttr)(
|
|
96
|
-
"data-required": (0, import_dom_query.dataAttr)(
|
|
97
|
-
"aria-orientation":
|
|
101
|
+
"aria-required": rootState.required || void 0,
|
|
102
|
+
"aria-disabled": rootState.disabled || void 0,
|
|
103
|
+
"aria-readonly": rootState.readOnly || void 0,
|
|
104
|
+
"data-orientation": rootState.orientation,
|
|
105
|
+
"data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
|
|
106
|
+
"data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
|
|
107
|
+
"data-required": (0, import_dom_query.dataAttr)(rootState.required),
|
|
108
|
+
"aria-orientation": rootState.orientation,
|
|
98
109
|
dir: prop("dir"),
|
|
99
110
|
style: {
|
|
100
111
|
position: "relative"
|
|
@@ -7,8 +7,17 @@ import * as dom from "./radio-group.dom.mjs";
|
|
|
7
7
|
function connect(service, normalize) {
|
|
8
8
|
const { context, send, computed, prop, scope } = service;
|
|
9
9
|
const groupDisabled = computed("isDisabled");
|
|
10
|
-
const groupInvalid = prop("invalid");
|
|
11
|
-
const readOnly = prop("readOnly");
|
|
10
|
+
const groupInvalid = !!prop("invalid");
|
|
11
|
+
const readOnly = !!prop("readOnly");
|
|
12
|
+
function getRootState() {
|
|
13
|
+
return {
|
|
14
|
+
disabled: groupDisabled,
|
|
15
|
+
invalid: groupInvalid,
|
|
16
|
+
required: !!prop("required"),
|
|
17
|
+
readOnly,
|
|
18
|
+
orientation: prop("orientation")
|
|
19
|
+
};
|
|
20
|
+
}
|
|
12
21
|
function getItemState(props) {
|
|
13
22
|
return {
|
|
14
23
|
value: props.value,
|
|
@@ -48,19 +57,21 @@ function connect(service, normalize) {
|
|
|
48
57
|
clearValue() {
|
|
49
58
|
send({ type: "SET_VALUE", value: null, isTrusted: false });
|
|
50
59
|
},
|
|
60
|
+
getRootState,
|
|
51
61
|
getRootProps() {
|
|
62
|
+
const rootState = getRootState();
|
|
52
63
|
return normalize.element({
|
|
53
64
|
...parts.root.attrs(scope.id),
|
|
54
65
|
role: "radiogroup",
|
|
55
66
|
"aria-labelledby": dom.getLabelId(scope),
|
|
56
|
-
"aria-required":
|
|
57
|
-
"aria-disabled":
|
|
58
|
-
"aria-readonly": readOnly || void 0,
|
|
59
|
-
"data-orientation":
|
|
60
|
-
"data-disabled": dataAttr(
|
|
61
|
-
"data-invalid": dataAttr(
|
|
62
|
-
"data-required": dataAttr(
|
|
63
|
-
"aria-orientation":
|
|
67
|
+
"aria-required": rootState.required || void 0,
|
|
68
|
+
"aria-disabled": rootState.disabled || void 0,
|
|
69
|
+
"aria-readonly": rootState.readOnly || void 0,
|
|
70
|
+
"data-orientation": rootState.orientation,
|
|
71
|
+
"data-disabled": dataAttr(rootState.disabled),
|
|
72
|
+
"data-invalid": dataAttr(rootState.invalid),
|
|
73
|
+
"data-required": dataAttr(rootState.required),
|
|
74
|
+
"aria-orientation": rootState.orientation,
|
|
64
75
|
dir: prop("dir"),
|
|
65
76
|
style: {
|
|
66
77
|
position: "relative"
|
|
@@ -168,6 +168,28 @@ interface ItemState {
|
|
|
168
168
|
*/
|
|
169
169
|
active: boolean;
|
|
170
170
|
}
|
|
171
|
+
interface RootState {
|
|
172
|
+
/**
|
|
173
|
+
* Whether the radio group is disabled
|
|
174
|
+
*/
|
|
175
|
+
disabled: boolean;
|
|
176
|
+
/**
|
|
177
|
+
* Whether the radio group is invalid
|
|
178
|
+
*/
|
|
179
|
+
invalid: boolean;
|
|
180
|
+
/**
|
|
181
|
+
* Whether the radio group is required
|
|
182
|
+
*/
|
|
183
|
+
required: boolean;
|
|
184
|
+
/**
|
|
185
|
+
* Whether the radio group is read-only
|
|
186
|
+
*/
|
|
187
|
+
readOnly: boolean;
|
|
188
|
+
/**
|
|
189
|
+
* The orientation of the radio group
|
|
190
|
+
*/
|
|
191
|
+
orientation: "horizontal" | "vertical" | undefined;
|
|
192
|
+
}
|
|
171
193
|
interface RadioGroupApi<T extends PropTypes = PropTypes> {
|
|
172
194
|
/**
|
|
173
195
|
* The current value of the radio group
|
|
@@ -189,6 +211,10 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
|
|
|
189
211
|
* Returns the state details of a radio input
|
|
190
212
|
*/
|
|
191
213
|
getItemState: (props: ItemProps) => ItemState;
|
|
214
|
+
/**
|
|
215
|
+
* Returns the state of the radio group
|
|
216
|
+
*/
|
|
217
|
+
getRootState: () => RootState;
|
|
192
218
|
getRootProps: () => T["element"];
|
|
193
219
|
getLabelProps: () => T["element"];
|
|
194
220
|
getItemProps: (props: ItemProps) => T["label"];
|
|
@@ -198,4 +224,4 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
|
|
|
198
224
|
getIndicatorProps: () => T["element"];
|
|
199
225
|
}
|
|
200
226
|
|
|
201
|
-
export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, ValueChangeDetails };
|
|
227
|
+
export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, RootState, ValueChangeDetails };
|
|
@@ -168,6 +168,28 @@ interface ItemState {
|
|
|
168
168
|
*/
|
|
169
169
|
active: boolean;
|
|
170
170
|
}
|
|
171
|
+
interface RootState {
|
|
172
|
+
/**
|
|
173
|
+
* Whether the radio group is disabled
|
|
174
|
+
*/
|
|
175
|
+
disabled: boolean;
|
|
176
|
+
/**
|
|
177
|
+
* Whether the radio group is invalid
|
|
178
|
+
*/
|
|
179
|
+
invalid: boolean;
|
|
180
|
+
/**
|
|
181
|
+
* Whether the radio group is required
|
|
182
|
+
*/
|
|
183
|
+
required: boolean;
|
|
184
|
+
/**
|
|
185
|
+
* Whether the radio group is read-only
|
|
186
|
+
*/
|
|
187
|
+
readOnly: boolean;
|
|
188
|
+
/**
|
|
189
|
+
* The orientation of the radio group
|
|
190
|
+
*/
|
|
191
|
+
orientation: "horizontal" | "vertical" | undefined;
|
|
192
|
+
}
|
|
171
193
|
interface RadioGroupApi<T extends PropTypes = PropTypes> {
|
|
172
194
|
/**
|
|
173
195
|
* The current value of the radio group
|
|
@@ -189,6 +211,10 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
|
|
|
189
211
|
* Returns the state details of a radio input
|
|
190
212
|
*/
|
|
191
213
|
getItemState: (props: ItemProps) => ItemState;
|
|
214
|
+
/**
|
|
215
|
+
* Returns the state of the radio group
|
|
216
|
+
*/
|
|
217
|
+
getRootState: () => RootState;
|
|
192
218
|
getRootProps: () => T["element"];
|
|
193
219
|
getLabelProps: () => T["element"];
|
|
194
220
|
getItemProps: (props: ItemProps) => T["label"];
|
|
@@ -198,4 +224,4 @@ interface RadioGroupApi<T extends PropTypes = PropTypes> {
|
|
|
198
224
|
getIndicatorProps: () => T["element"];
|
|
199
225
|
}
|
|
200
226
|
|
|
201
|
-
export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, ValueChangeDetails };
|
|
227
|
+
export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, RootState, ValueChangeDetails };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/radio-group",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.1",
|
|
4
4
|
"description": "Core logic for the radio group widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -15,7 +15,10 @@
|
|
|
15
15
|
"author": "Abraham Aremu <anubra266@gmail.com>",
|
|
16
16
|
"homepage": "https://github.com/chakra-ui/zag#readme",
|
|
17
17
|
"license": "MIT",
|
|
18
|
-
"repository":
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "https://github.com/chakra-ui/zag/tree/main/packages/radio-group"
|
|
21
|
+
},
|
|
19
22
|
"sideEffects": false,
|
|
20
23
|
"files": [
|
|
21
24
|
"dist"
|
|
@@ -27,12 +30,12 @@
|
|
|
27
30
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
28
31
|
},
|
|
29
32
|
"dependencies": {
|
|
30
|
-
"@zag-js/anatomy": "2.0.0-next.
|
|
31
|
-
"@zag-js/dom-query": "2.0.0-next.
|
|
32
|
-
"@zag-js/focus-visible": "2.0.0-next.
|
|
33
|
-
"@zag-js/utils": "2.0.0-next.
|
|
34
|
-
"@zag-js/core": "2.0.0-next.
|
|
35
|
-
"@zag-js/types": "2.0.0-next.
|
|
33
|
+
"@zag-js/anatomy": "2.0.0-next.1",
|
|
34
|
+
"@zag-js/dom-query": "2.0.0-next.1",
|
|
35
|
+
"@zag-js/focus-visible": "2.0.0-next.1",
|
|
36
|
+
"@zag-js/utils": "2.0.0-next.1",
|
|
37
|
+
"@zag-js/core": "2.0.0-next.1",
|
|
38
|
+
"@zag-js/types": "2.0.0-next.1"
|
|
36
39
|
},
|
|
37
40
|
"devDependencies": {
|
|
38
41
|
"clean-package": "2.2.0"
|