@zag-js/radio-group 0.10.2 → 0.10.3
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.ts +4 -7
- package/dist/index.js +8 -422
- package/dist/index.mjs +3 -15
- package/dist/radio-group.anatomy.d.ts +3 -6
- package/dist/radio-group.anatomy.js +10 -33
- package/dist/radio-group.anatomy.mjs +14 -8
- package/dist/radio-group.connect.d.ts +3 -7
- package/dist/radio-group.connect.js +43 -125
- package/dist/radio-group.connect.mjs +209 -8
- package/dist/radio-group.dom.d.ts +24 -29
- package/dist/radio-group.dom.js +9 -31
- package/dist/radio-group.dom.mjs +48 -6
- package/dist/radio-group.machine.d.ts +3 -7
- package/dist/radio-group.machine.js +21 -91
- package/dist/radio-group.machine.mjs +128 -7
- package/dist/radio-group.types.d.ts +10 -12
- package/package.json +10 -15
- package/dist/chunk-DM5GVJFW.mjs +0 -216
- package/dist/chunk-DVMAGSYZ.mjs +0 -50
- package/dist/chunk-R5YJZPCP.mjs +0 -17
- package/dist/chunk-UMCKI3BN.mjs +0 -133
- package/dist/radio-group.types.js +0 -18
- package/dist/radio-group.types.mjs +0 -0
|
@@ -1,85 +1,17 @@
|
|
|
1
|
-
|
|
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);
|
|
1
|
+
'use strict';
|
|
19
2
|
|
|
20
|
-
|
|
21
|
-
var radio_group_machine_exports = {};
|
|
22
|
-
__export(radio_group_machine_exports, {
|
|
23
|
-
machine: () => machine
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(radio_group_machine_exports);
|
|
26
|
-
var import_core = require("@zag-js/core");
|
|
27
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
28
|
-
var import_element_rect = require("@zag-js/element-rect");
|
|
29
|
-
var import_form_utils = require("@zag-js/form-utils");
|
|
30
|
-
var import_utils = require("@zag-js/utils");
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
31
4
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
|
|
39
|
-
getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
|
|
40
|
-
getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
|
|
41
|
-
getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
|
|
42
|
-
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
43
|
-
getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
|
|
44
|
-
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
45
|
-
getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
|
|
46
|
-
getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
|
|
47
|
-
getInputEls: (ctx) => {
|
|
48
|
-
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
49
|
-
const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
|
|
50
|
-
return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
|
|
51
|
-
},
|
|
52
|
-
getActiveRadioEl: (ctx) => {
|
|
53
|
-
if (!ctx.value)
|
|
54
|
-
return;
|
|
55
|
-
return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
|
|
56
|
-
},
|
|
57
|
-
getOffsetRect: (el) => {
|
|
58
|
-
return {
|
|
59
|
-
left: el?.offsetLeft ?? 0,
|
|
60
|
-
top: el?.offsetTop ?? 0,
|
|
61
|
-
width: el?.offsetWidth ?? 0,
|
|
62
|
-
height: el?.offsetHeight ?? 0
|
|
63
|
-
};
|
|
64
|
-
},
|
|
65
|
-
getRectById: (ctx, id) => {
|
|
66
|
-
const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
|
|
67
|
-
return dom.resolveRect(dom.getOffsetRect(tab));
|
|
68
|
-
},
|
|
69
|
-
resolveRect(rect) {
|
|
70
|
-
return {
|
|
71
|
-
width: `${rect.width}px`,
|
|
72
|
-
height: `${rect.height}px`,
|
|
73
|
-
left: `${rect.left}px`,
|
|
74
|
-
top: `${rect.top}px`
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
});
|
|
5
|
+
const core = require('@zag-js/core');
|
|
6
|
+
const domQuery = require('@zag-js/dom-query');
|
|
7
|
+
const elementRect = require('@zag-js/element-rect');
|
|
8
|
+
const formUtils = require('@zag-js/form-utils');
|
|
9
|
+
const utils = require('@zag-js/utils');
|
|
10
|
+
const radioGroup_dom = require('./radio-group.dom.js');
|
|
78
11
|
|
|
79
|
-
// src/radio-group.machine.ts
|
|
80
12
|
function machine(userContext) {
|
|
81
|
-
const ctx =
|
|
82
|
-
return
|
|
13
|
+
const ctx = utils.compact(userContext);
|
|
14
|
+
return core.createMachine(
|
|
83
15
|
{
|
|
84
16
|
id: "radio",
|
|
85
17
|
initial: "idle",
|
|
@@ -127,7 +59,7 @@ function machine(userContext) {
|
|
|
127
59
|
{
|
|
128
60
|
activities: {
|
|
129
61
|
trackFormControlState(ctx2, _evt, { send, initialContext }) {
|
|
130
|
-
return
|
|
62
|
+
return formUtils.trackFormControl(radioGroup_dom.dom.getRootEl(ctx2), {
|
|
131
63
|
onFieldsetDisabled() {
|
|
132
64
|
ctx2.disabled = true;
|
|
133
65
|
},
|
|
@@ -154,7 +86,7 @@ function machine(userContext) {
|
|
|
154
86
|
ctx2.onChange?.({ value: evt.value });
|
|
155
87
|
},
|
|
156
88
|
syncInputElements(ctx2) {
|
|
157
|
-
const inputs = dom.getInputEls(ctx2);
|
|
89
|
+
const inputs = radioGroup_dom.dom.getInputEls(ctx2);
|
|
158
90
|
inputs.forEach((input) => {
|
|
159
91
|
input.checked = input.value === ctx2.value;
|
|
160
92
|
});
|
|
@@ -163,30 +95,30 @@ function machine(userContext) {
|
|
|
163
95
|
ctx2.previousValue = ctx2.value;
|
|
164
96
|
},
|
|
165
97
|
setIndicatorTransition(ctx2) {
|
|
166
|
-
ctx2.canIndicatorTransition =
|
|
98
|
+
ctx2.canIndicatorTransition = utils.isString(ctx2.previousValue) && utils.isString(ctx2.value);
|
|
167
99
|
},
|
|
168
100
|
cleanupObserver(ctx2) {
|
|
169
101
|
ctx2.indicatorCleanup?.();
|
|
170
102
|
},
|
|
171
103
|
syncIndicatorRect(ctx2) {
|
|
172
104
|
ctx2.indicatorCleanup?.();
|
|
173
|
-
if (!dom.getIndicatorEl(ctx2))
|
|
105
|
+
if (!radioGroup_dom.dom.getIndicatorEl(ctx2))
|
|
174
106
|
return;
|
|
175
107
|
const value = ctx2.value;
|
|
176
108
|
if (value == null) {
|
|
177
109
|
ctx2.indicatorRect = {};
|
|
178
110
|
return;
|
|
179
111
|
}
|
|
180
|
-
const radioEl = dom.getActiveRadioEl(ctx2);
|
|
112
|
+
const radioEl = radioGroup_dom.dom.getActiveRadioEl(ctx2);
|
|
181
113
|
if (!radioEl)
|
|
182
114
|
return;
|
|
183
|
-
ctx2.indicatorCleanup =
|
|
115
|
+
ctx2.indicatorCleanup = elementRect.trackElementRect(radioEl, {
|
|
184
116
|
getRect(el) {
|
|
185
|
-
return dom.getOffsetRect(el);
|
|
117
|
+
return radioGroup_dom.dom.getOffsetRect(el);
|
|
186
118
|
},
|
|
187
119
|
onChange(rect) {
|
|
188
|
-
ctx2.indicatorRect = dom.resolveRect(rect);
|
|
189
|
-
|
|
120
|
+
ctx2.indicatorRect = radioGroup_dom.dom.resolveRect(rect);
|
|
121
|
+
domQuery.nextTick(() => {
|
|
190
122
|
ctx2.canIndicatorTransition = false;
|
|
191
123
|
});
|
|
192
124
|
}
|
|
@@ -196,7 +128,5 @@ function machine(userContext) {
|
|
|
196
128
|
}
|
|
197
129
|
);
|
|
198
130
|
}
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
machine
|
|
202
|
-
});
|
|
131
|
+
|
|
132
|
+
exports.machine = machine;
|
|
@@ -1,7 +1,128 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { createMachine } from '@zag-js/core';
|
|
2
|
+
import { nextTick } from '@zag-js/dom-query';
|
|
3
|
+
import { trackElementRect } from '@zag-js/element-rect';
|
|
4
|
+
import { trackFormControl } from '@zag-js/form-utils';
|
|
5
|
+
import { compact, isString } from '@zag-js/utils';
|
|
6
|
+
import { dom } from './radio-group.dom.mjs';
|
|
7
|
+
|
|
8
|
+
function machine(userContext) {
|
|
9
|
+
const ctx = compact(userContext);
|
|
10
|
+
return createMachine(
|
|
11
|
+
{
|
|
12
|
+
id: "radio",
|
|
13
|
+
initial: "idle",
|
|
14
|
+
context: {
|
|
15
|
+
previousValue: null,
|
|
16
|
+
value: null,
|
|
17
|
+
activeId: null,
|
|
18
|
+
focusedId: null,
|
|
19
|
+
hoveredId: null,
|
|
20
|
+
indicatorRect: {},
|
|
21
|
+
canIndicatorTransition: false,
|
|
22
|
+
...ctx
|
|
23
|
+
},
|
|
24
|
+
entry: ["syncIndicatorRect"],
|
|
25
|
+
exit: ["cleanupObserver"],
|
|
26
|
+
activities: ["trackFormControlState"],
|
|
27
|
+
watch: {
|
|
28
|
+
value: [
|
|
29
|
+
"setIndicatorTransition",
|
|
30
|
+
// important to set this after `setIndicatorTransition`
|
|
31
|
+
"setPreviousValue",
|
|
32
|
+
"invokeOnChange",
|
|
33
|
+
"syncIndicatorRect",
|
|
34
|
+
"syncInputElements"
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
on: {
|
|
38
|
+
SET_VALUE: {
|
|
39
|
+
actions: ["setValue"]
|
|
40
|
+
},
|
|
41
|
+
SET_HOVERED: {
|
|
42
|
+
actions: "setHovered"
|
|
43
|
+
},
|
|
44
|
+
SET_ACTIVE: {
|
|
45
|
+
actions: "setActive"
|
|
46
|
+
},
|
|
47
|
+
SET_FOCUSED: {
|
|
48
|
+
actions: "setFocused"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
states: {
|
|
52
|
+
idle: {}
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
activities: {
|
|
57
|
+
trackFormControlState(ctx2, _evt, { send, initialContext }) {
|
|
58
|
+
return trackFormControl(dom.getRootEl(ctx2), {
|
|
59
|
+
onFieldsetDisabled() {
|
|
60
|
+
ctx2.disabled = true;
|
|
61
|
+
},
|
|
62
|
+
onFormReset() {
|
|
63
|
+
send({ type: "SET_VALUE", value: initialContext.value });
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
actions: {
|
|
69
|
+
setValue(ctx2, evt) {
|
|
70
|
+
ctx2.value = evt.value;
|
|
71
|
+
},
|
|
72
|
+
setHovered(ctx2, evt) {
|
|
73
|
+
ctx2.hoveredId = evt.value;
|
|
74
|
+
},
|
|
75
|
+
setActive(ctx2, evt) {
|
|
76
|
+
ctx2.activeId = evt.value;
|
|
77
|
+
},
|
|
78
|
+
setFocused(ctx2, evt) {
|
|
79
|
+
ctx2.focusedId = evt.value;
|
|
80
|
+
},
|
|
81
|
+
invokeOnChange(ctx2, evt) {
|
|
82
|
+
ctx2.onChange?.({ value: evt.value });
|
|
83
|
+
},
|
|
84
|
+
syncInputElements(ctx2) {
|
|
85
|
+
const inputs = dom.getInputEls(ctx2);
|
|
86
|
+
inputs.forEach((input) => {
|
|
87
|
+
input.checked = input.value === ctx2.value;
|
|
88
|
+
});
|
|
89
|
+
},
|
|
90
|
+
setPreviousValue(ctx2) {
|
|
91
|
+
ctx2.previousValue = ctx2.value;
|
|
92
|
+
},
|
|
93
|
+
setIndicatorTransition(ctx2) {
|
|
94
|
+
ctx2.canIndicatorTransition = isString(ctx2.previousValue) && isString(ctx2.value);
|
|
95
|
+
},
|
|
96
|
+
cleanupObserver(ctx2) {
|
|
97
|
+
ctx2.indicatorCleanup?.();
|
|
98
|
+
},
|
|
99
|
+
syncIndicatorRect(ctx2) {
|
|
100
|
+
ctx2.indicatorCleanup?.();
|
|
101
|
+
if (!dom.getIndicatorEl(ctx2))
|
|
102
|
+
return;
|
|
103
|
+
const value = ctx2.value;
|
|
104
|
+
if (value == null) {
|
|
105
|
+
ctx2.indicatorRect = {};
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const radioEl = dom.getActiveRadioEl(ctx2);
|
|
109
|
+
if (!radioEl)
|
|
110
|
+
return;
|
|
111
|
+
ctx2.indicatorCleanup = trackElementRect(radioEl, {
|
|
112
|
+
getRect(el) {
|
|
113
|
+
return dom.getOffsetRect(el);
|
|
114
|
+
},
|
|
115
|
+
onChange(rect) {
|
|
116
|
+
ctx2.indicatorRect = dom.resolveRect(rect);
|
|
117
|
+
nextTick(() => {
|
|
118
|
+
ctx2.canIndicatorTransition = false;
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
export { machine };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { StateMachine } from
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
+
import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
|
|
4
3
|
type ElementIds = Partial<{
|
|
5
4
|
root: string;
|
|
6
5
|
label: string;
|
|
@@ -49,15 +48,15 @@ type PublicContext = DirectionProperty & CommonProperties & {
|
|
|
49
48
|
orientation?: "horizontal" | "vertical";
|
|
50
49
|
};
|
|
51
50
|
type PrivateContext = Context<{}>;
|
|
52
|
-
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
51
|
+
export type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
53
52
|
type ComputedContext = Readonly<{}>;
|
|
54
|
-
type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
55
|
-
type MachineState = {
|
|
53
|
+
export type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
54
|
+
export type MachineState = {
|
|
56
55
|
value: "idle";
|
|
57
56
|
};
|
|
58
|
-
type State =
|
|
59
|
-
type Send =
|
|
60
|
-
type RadioProps = {
|
|
57
|
+
export type State = S.State<MachineContext, MachineState>;
|
|
58
|
+
export type Send = S.Send<S.AnyEventObject>;
|
|
59
|
+
export type RadioProps = {
|
|
61
60
|
value: string;
|
|
62
61
|
/**
|
|
63
62
|
* If `true`, the radio will be disabled
|
|
@@ -72,7 +71,7 @@ type RadioProps = {
|
|
|
72
71
|
*/
|
|
73
72
|
invalid?: boolean;
|
|
74
73
|
};
|
|
75
|
-
type InputProps = RadioProps & {
|
|
74
|
+
export type InputProps = RadioProps & {
|
|
76
75
|
/**
|
|
77
76
|
* If `true` and `disabled` is passed, the radio will
|
|
78
77
|
* remain tabbable but not interactive
|
|
@@ -83,5 +82,4 @@ type InputProps = RadioProps & {
|
|
|
83
82
|
*/
|
|
84
83
|
required?: boolean;
|
|
85
84
|
};
|
|
86
|
-
|
|
87
|
-
export { InputProps, MachineContext, MachineState, RadioProps, Send, State, UserDefinedContext };
|
|
85
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/radio-group",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.3",
|
|
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.10.
|
|
32
|
-
"@zag-js/dom-query": "0.10.
|
|
33
|
-
"@zag-js/element-rect": "0.10.
|
|
34
|
-
"@zag-js/form-utils": "0.10.
|
|
35
|
-
"@zag-js/visually-hidden": "0.10.
|
|
36
|
-
"@zag-js/utils": "0.10.
|
|
37
|
-
"@zag-js/core": "0.10.
|
|
38
|
-
"@zag-js/types": "0.10.
|
|
31
|
+
"@zag-js/anatomy": "0.10.3",
|
|
32
|
+
"@zag-js/dom-query": "0.10.3",
|
|
33
|
+
"@zag-js/element-rect": "0.10.3",
|
|
34
|
+
"@zag-js/form-utils": "0.10.3",
|
|
35
|
+
"@zag-js/visually-hidden": "0.10.3",
|
|
36
|
+
"@zag-js/utils": "0.10.3",
|
|
37
|
+
"@zag-js/core": "0.10.3",
|
|
38
|
+
"@zag-js/types": "0.10.3"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"clean-package": "2.2.0"
|
|
@@ -53,13 +53,8 @@
|
|
|
53
53
|
"./package.json": "./package.json"
|
|
54
54
|
},
|
|
55
55
|
"scripts": {
|
|
56
|
-
"build
|
|
57
|
-
"start": "pnpm build --watch",
|
|
58
|
-
"build": "tsup src --dts",
|
|
59
|
-
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
56
|
+
"build": "vite build -c ../../../vite.config.ts",
|
|
60
57
|
"lint": "eslint src --ext .ts,.tsx",
|
|
61
|
-
"test-ci": "pnpm test --ci --runInBand",
|
|
62
|
-
"test-watch": "pnpm test --watch -u",
|
|
63
58
|
"typecheck": "tsc --noEmit"
|
|
64
59
|
}
|
|
65
60
|
}
|
package/dist/chunk-DM5GVJFW.mjs
DELETED
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
parts
|
|
3
|
-
} from "./chunk-R5YJZPCP.mjs";
|
|
4
|
-
import {
|
|
5
|
-
dom
|
|
6
|
-
} from "./chunk-DVMAGSYZ.mjs";
|
|
7
|
-
|
|
8
|
-
// src/radio-group.connect.ts
|
|
9
|
-
import { ariaAttr, dataAttr } from "@zag-js/dom-query";
|
|
10
|
-
import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
|
|
11
|
-
function connect(state, send, normalize) {
|
|
12
|
-
const isGroupDisabled = state.context.disabled;
|
|
13
|
-
const isGroupReadOnly = state.context.readOnly;
|
|
14
|
-
function getRadioState(props) {
|
|
15
|
-
const radioState = {
|
|
16
|
-
isReadOnly: props.readOnly || isGroupReadOnly,
|
|
17
|
-
isInvalid: props.invalid,
|
|
18
|
-
isDisabled: props.disabled || isGroupDisabled,
|
|
19
|
-
isChecked: state.context.value === props.value,
|
|
20
|
-
isFocused: state.context.focusedId === props.value,
|
|
21
|
-
isHovered: state.context.hoveredId === props.value,
|
|
22
|
-
isActive: state.context.activeId === props.value
|
|
23
|
-
};
|
|
24
|
-
return {
|
|
25
|
-
...radioState,
|
|
26
|
-
isInteractive: !(radioState.isReadOnly || radioState.isDisabled)
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
function getRadioDataAttrs(props) {
|
|
30
|
-
const radioState = getRadioState(props);
|
|
31
|
-
return {
|
|
32
|
-
"data-focus": dataAttr(radioState.isFocused),
|
|
33
|
-
"data-disabled": dataAttr(radioState.isDisabled),
|
|
34
|
-
"data-checked": dataAttr(radioState.isChecked),
|
|
35
|
-
"data-hover": dataAttr(radioState.isHovered),
|
|
36
|
-
"data-invalid": dataAttr(radioState.isInvalid),
|
|
37
|
-
"data-readonly": dataAttr(radioState.isReadOnly)
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
const focus = () => {
|
|
41
|
-
const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
|
|
42
|
-
if (firstEnabledAndCheckedInput) {
|
|
43
|
-
firstEnabledAndCheckedInput.focus();
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
|
|
47
|
-
firstEnabledInput?.focus();
|
|
48
|
-
};
|
|
49
|
-
return {
|
|
50
|
-
/**
|
|
51
|
-
* The current value of the radio group
|
|
52
|
-
*/
|
|
53
|
-
value: state.context.value,
|
|
54
|
-
/**
|
|
55
|
-
* Function to set the value of the radio group
|
|
56
|
-
*/
|
|
57
|
-
setValue(value) {
|
|
58
|
-
send({ type: "SET_VALUE", value, manual: true });
|
|
59
|
-
},
|
|
60
|
-
/**
|
|
61
|
-
* Function to clear the value of the radio group
|
|
62
|
-
*/
|
|
63
|
-
clearValue() {
|
|
64
|
-
send({ type: "SET_VALUE", value: null, manual: true });
|
|
65
|
-
},
|
|
66
|
-
/**
|
|
67
|
-
* Function to focus the radio group
|
|
68
|
-
*/
|
|
69
|
-
focus,
|
|
70
|
-
/**
|
|
71
|
-
* Function to blur the currently focused radio input in the radio group
|
|
72
|
-
*/
|
|
73
|
-
blur() {
|
|
74
|
-
const focusedElement = dom.getActiveElement(state.context);
|
|
75
|
-
const inputEls = dom.getInputEls(state.context);
|
|
76
|
-
const radioInputIsFocused = inputEls.some((el) => el === focusedElement);
|
|
77
|
-
if (radioInputIsFocused)
|
|
78
|
-
focusedElement?.blur();
|
|
79
|
-
},
|
|
80
|
-
/**
|
|
81
|
-
* Returns the state details of a radio input
|
|
82
|
-
*/
|
|
83
|
-
getRadioState,
|
|
84
|
-
rootProps: normalize.element({
|
|
85
|
-
...parts.root.attrs,
|
|
86
|
-
role: "radiogroup",
|
|
87
|
-
id: dom.getRootId(state.context),
|
|
88
|
-
"aria-labelledby": dom.getLabelId(state.context),
|
|
89
|
-
"data-orientation": state.context.orientation,
|
|
90
|
-
"aria-orientation": state.context.orientation,
|
|
91
|
-
dir: state.context.dir
|
|
92
|
-
}),
|
|
93
|
-
labelProps: normalize.element({
|
|
94
|
-
...parts.label.attrs,
|
|
95
|
-
id: dom.getLabelId(state.context),
|
|
96
|
-
onClick: focus
|
|
97
|
-
}),
|
|
98
|
-
getRadioProps(props) {
|
|
99
|
-
const rootState = getRadioState(props);
|
|
100
|
-
return normalize.label({
|
|
101
|
-
...parts.radio.attrs,
|
|
102
|
-
id: dom.getRadioId(state.context, props.value),
|
|
103
|
-
htmlFor: dom.getRadioInputId(state.context, props.value),
|
|
104
|
-
...getRadioDataAttrs(props),
|
|
105
|
-
onPointerMove() {
|
|
106
|
-
if (!rootState.isInteractive)
|
|
107
|
-
return;
|
|
108
|
-
send({ type: "SET_HOVERED", value: props.value, hovered: true });
|
|
109
|
-
},
|
|
110
|
-
onPointerLeave() {
|
|
111
|
-
if (!rootState.isInteractive)
|
|
112
|
-
return;
|
|
113
|
-
send({ type: "SET_HOVERED", value: null });
|
|
114
|
-
},
|
|
115
|
-
onPointerDown(event) {
|
|
116
|
-
if (!rootState.isInteractive)
|
|
117
|
-
return;
|
|
118
|
-
if (rootState.isFocused && event.pointerType === "mouse") {
|
|
119
|
-
event.preventDefault();
|
|
120
|
-
}
|
|
121
|
-
send({ type: "SET_ACTIVE", value: props.value, active: true });
|
|
122
|
-
},
|
|
123
|
-
onPointerUp() {
|
|
124
|
-
if (!rootState.isInteractive)
|
|
125
|
-
return;
|
|
126
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
},
|
|
130
|
-
getRadioLabelProps(props) {
|
|
131
|
-
return normalize.element({
|
|
132
|
-
...parts.radioLabel.attrs,
|
|
133
|
-
id: dom.getRadioLabelId(state.context, props.value),
|
|
134
|
-
...getRadioDataAttrs(props)
|
|
135
|
-
});
|
|
136
|
-
},
|
|
137
|
-
getRadioControlProps(props) {
|
|
138
|
-
const controlState = getRadioState(props);
|
|
139
|
-
return normalize.element({
|
|
140
|
-
...parts.radioControl.attrs,
|
|
141
|
-
id: dom.getRadioControlId(state.context, props.value),
|
|
142
|
-
"data-active": dataAttr(controlState.isActive),
|
|
143
|
-
"aria-hidden": true,
|
|
144
|
-
...getRadioDataAttrs(props)
|
|
145
|
-
});
|
|
146
|
-
},
|
|
147
|
-
getRadioInputProps(props) {
|
|
148
|
-
const inputState = getRadioState(props);
|
|
149
|
-
const isRequired = props.required;
|
|
150
|
-
const trulyDisabled = inputState.isDisabled && !props.focusable;
|
|
151
|
-
return normalize.input({
|
|
152
|
-
...parts.radioInput.attrs,
|
|
153
|
-
"data-ownedby": dom.getRootId(state.context),
|
|
154
|
-
id: dom.getRadioInputId(state.context, props.value),
|
|
155
|
-
type: "radio",
|
|
156
|
-
name: state.context.name || state.context.id,
|
|
157
|
-
form: state.context.form,
|
|
158
|
-
value: props.value,
|
|
159
|
-
onChange(event) {
|
|
160
|
-
if (inputState.isReadOnly || inputState.isDisabled) {
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
if (event.target.checked) {
|
|
164
|
-
send({ type: "SET_VALUE", value: props.value });
|
|
165
|
-
}
|
|
166
|
-
},
|
|
167
|
-
onBlur() {
|
|
168
|
-
send({ type: "SET_FOCUSED", value: null });
|
|
169
|
-
},
|
|
170
|
-
onFocus() {
|
|
171
|
-
send({ type: "SET_FOCUSED", value: props.value, focused: true });
|
|
172
|
-
},
|
|
173
|
-
onKeyDown(event) {
|
|
174
|
-
if (event.key === " ") {
|
|
175
|
-
send({ type: "SET_ACTIVE", value: props.value, active: true });
|
|
176
|
-
}
|
|
177
|
-
},
|
|
178
|
-
onKeyUp(event) {
|
|
179
|
-
if (event.key === " ") {
|
|
180
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
disabled: trulyDisabled,
|
|
184
|
-
required: isRequired,
|
|
185
|
-
defaultChecked: inputState.isChecked,
|
|
186
|
-
"data-disabled": dataAttr(inputState.isDisabled),
|
|
187
|
-
"aria-required": ariaAttr(isRequired),
|
|
188
|
-
"aria-invalid": ariaAttr(inputState.isInvalid),
|
|
189
|
-
readOnly: inputState.isReadOnly,
|
|
190
|
-
"data-readonly": dataAttr(inputState.isReadOnly),
|
|
191
|
-
"aria-disabled": ariaAttr(trulyDisabled),
|
|
192
|
-
"aria-checked": ariaAttr(inputState.isChecked),
|
|
193
|
-
style: visuallyHiddenStyle
|
|
194
|
-
});
|
|
195
|
-
},
|
|
196
|
-
indicatorProps: normalize.element({
|
|
197
|
-
id: dom.getIndicatorId(state.context),
|
|
198
|
-
...parts.indicator.attrs,
|
|
199
|
-
"data-orientation": state.context.orientation,
|
|
200
|
-
style: {
|
|
201
|
-
"--transition-duration": "150ms",
|
|
202
|
-
"--transition-property": "left, top, width, height",
|
|
203
|
-
position: "absolute",
|
|
204
|
-
willChange: "var(--transition-property)",
|
|
205
|
-
transitionProperty: "var(--transition-property)",
|
|
206
|
-
transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
|
|
207
|
-
transitionTimingFunction: "var(--transition-timing-function)",
|
|
208
|
-
...state.context.indicatorRect
|
|
209
|
-
}
|
|
210
|
-
})
|
|
211
|
-
};
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
export {
|
|
215
|
-
connect
|
|
216
|
-
};
|
package/dist/chunk-DVMAGSYZ.mjs
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
// src/radio-group.dom.ts
|
|
2
|
-
import { createScope, queryAll } from "@zag-js/dom-query";
|
|
3
|
-
var dom = createScope({
|
|
4
|
-
getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
|
|
5
|
-
getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
|
|
6
|
-
getRadioId: (ctx, value) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
|
|
7
|
-
getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
|
|
8
|
-
getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
|
|
9
|
-
getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
|
|
10
|
-
getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
|
|
11
|
-
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
12
|
-
getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
|
|
13
|
-
getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
|
|
14
|
-
getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
|
|
15
|
-
getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
|
|
16
|
-
getInputEls: (ctx) => {
|
|
17
|
-
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
18
|
-
const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
|
|
19
|
-
return queryAll(dom.getRootEl(ctx), selector);
|
|
20
|
-
},
|
|
21
|
-
getActiveRadioEl: (ctx) => {
|
|
22
|
-
if (!ctx.value)
|
|
23
|
-
return;
|
|
24
|
-
return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
|
|
25
|
-
},
|
|
26
|
-
getOffsetRect: (el) => {
|
|
27
|
-
return {
|
|
28
|
-
left: el?.offsetLeft ?? 0,
|
|
29
|
-
top: el?.offsetTop ?? 0,
|
|
30
|
-
width: el?.offsetWidth ?? 0,
|
|
31
|
-
height: el?.offsetHeight ?? 0
|
|
32
|
-
};
|
|
33
|
-
},
|
|
34
|
-
getRectById: (ctx, id) => {
|
|
35
|
-
const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
|
|
36
|
-
return dom.resolveRect(dom.getOffsetRect(tab));
|
|
37
|
-
},
|
|
38
|
-
resolveRect(rect) {
|
|
39
|
-
return {
|
|
40
|
-
width: `${rect.width}px`,
|
|
41
|
-
height: `${rect.height}px`,
|
|
42
|
-
left: `${rect.left}px`,
|
|
43
|
-
top: `${rect.top}px`
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
export {
|
|
49
|
-
dom
|
|
50
|
-
};
|
package/dist/chunk-R5YJZPCP.mjs
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
// src/radio-group.anatomy.ts
|
|
2
|
-
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
|
-
var anatomy = createAnatomy("radio-group").parts(
|
|
4
|
-
"root",
|
|
5
|
-
"label",
|
|
6
|
-
"radio",
|
|
7
|
-
"radioLabel",
|
|
8
|
-
"radioControl",
|
|
9
|
-
"radioInput",
|
|
10
|
-
"indicator"
|
|
11
|
-
);
|
|
12
|
-
var parts = anatomy.build();
|
|
13
|
-
|
|
14
|
-
export {
|
|
15
|
-
anatomy,
|
|
16
|
-
parts
|
|
17
|
-
};
|