@zag-js/steps 1.41.1 → 2.0.0-next.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.
- package/dist/steps.connect.js +10 -12
- package/dist/steps.connect.mjs +10 -12
- package/dist/steps.dom.js +4 -4
- package/dist/steps.dom.mjs +4 -4
- package/package.json +6 -6
package/dist/steps.connect.js
CHANGED
|
@@ -90,8 +90,7 @@ function connect(service, normalize) {
|
|
|
90
90
|
setStep,
|
|
91
91
|
getRootProps() {
|
|
92
92
|
return normalize.element({
|
|
93
|
-
...import_steps.parts.root.attrs,
|
|
94
|
-
id: dom.getRootId(scope),
|
|
93
|
+
...import_steps.parts.root.attrs(scope.id),
|
|
95
94
|
dir: prop("dir"),
|
|
96
95
|
"data-orientation": prop("orientation"),
|
|
97
96
|
style: {
|
|
@@ -103,9 +102,8 @@ function connect(service, normalize) {
|
|
|
103
102
|
const arr = (0, import_utils.fromLength)(count);
|
|
104
103
|
const triggerIds = arr.map((_, index) => dom.getTriggerId(scope, index));
|
|
105
104
|
return normalize.element({
|
|
106
|
-
...import_steps.parts.list.attrs,
|
|
105
|
+
...import_steps.parts.list.attrs(scope.id),
|
|
107
106
|
dir: prop("dir"),
|
|
108
|
-
id: dom.getListId(scope),
|
|
109
107
|
role: "tablist",
|
|
110
108
|
"aria-owns": triggerIds.join(" "),
|
|
111
109
|
"aria-orientation": prop("orientation"),
|
|
@@ -115,7 +113,7 @@ function connect(service, normalize) {
|
|
|
115
113
|
getItemProps(props) {
|
|
116
114
|
const itemState = getItemState(props);
|
|
117
115
|
return normalize.element({
|
|
118
|
-
...import_steps.parts.item.attrs,
|
|
116
|
+
...import_steps.parts.item.attrs(scope.id),
|
|
119
117
|
dir: prop("dir"),
|
|
120
118
|
"aria-current": itemState.current ? "step" : void 0,
|
|
121
119
|
"data-orientation": prop("orientation"),
|
|
@@ -125,7 +123,7 @@ function connect(service, normalize) {
|
|
|
125
123
|
getTriggerProps(props) {
|
|
126
124
|
const itemState = getItemState(props);
|
|
127
125
|
return normalize.button({
|
|
128
|
-
...import_steps.parts.trigger.attrs,
|
|
126
|
+
...import_steps.parts.trigger.attrs(scope.id),
|
|
129
127
|
id: itemState.triggerId,
|
|
130
128
|
role: "tab",
|
|
131
129
|
dir: prop("dir"),
|
|
@@ -147,7 +145,7 @@ function connect(service, normalize) {
|
|
|
147
145
|
getContentProps(props) {
|
|
148
146
|
const itemState = getItemState(props);
|
|
149
147
|
return normalize.element({
|
|
150
|
-
...import_steps.parts.content.attrs,
|
|
148
|
+
...import_steps.parts.content.attrs(scope.id),
|
|
151
149
|
dir: prop("dir"),
|
|
152
150
|
id: itemState.contentId,
|
|
153
151
|
role: "tabpanel",
|
|
@@ -161,7 +159,7 @@ function connect(service, normalize) {
|
|
|
161
159
|
getIndicatorProps(props) {
|
|
162
160
|
const itemState = getItemState(props);
|
|
163
161
|
return normalize.element({
|
|
164
|
-
...import_steps.parts.indicator.attrs,
|
|
162
|
+
...import_steps.parts.indicator.attrs(scope.id),
|
|
165
163
|
dir: prop("dir"),
|
|
166
164
|
"aria-hidden": true,
|
|
167
165
|
"data-complete": (0, import_dom_query.dataAttr)(itemState.completed),
|
|
@@ -172,7 +170,7 @@ function connect(service, normalize) {
|
|
|
172
170
|
getSeparatorProps(props) {
|
|
173
171
|
const itemState = getItemState(props);
|
|
174
172
|
return normalize.element({
|
|
175
|
-
...import_steps.parts.separator.attrs,
|
|
173
|
+
...import_steps.parts.separator.attrs(scope.id),
|
|
176
174
|
dir: prop("dir"),
|
|
177
175
|
"data-orientation": prop("orientation"),
|
|
178
176
|
"data-complete": (0, import_dom_query.dataAttr)(itemState.completed),
|
|
@@ -182,7 +180,7 @@ function connect(service, normalize) {
|
|
|
182
180
|
},
|
|
183
181
|
getNextTriggerProps() {
|
|
184
182
|
return normalize.button({
|
|
185
|
-
...import_steps.parts.nextTrigger.attrs,
|
|
183
|
+
...import_steps.parts.nextTrigger.attrs(scope.id),
|
|
186
184
|
dir: prop("dir"),
|
|
187
185
|
type: "button",
|
|
188
186
|
disabled: !hasNextStep,
|
|
@@ -195,7 +193,7 @@ function connect(service, normalize) {
|
|
|
195
193
|
getPrevTriggerProps() {
|
|
196
194
|
return normalize.button({
|
|
197
195
|
dir: prop("dir"),
|
|
198
|
-
...import_steps.parts.prevTrigger.attrs,
|
|
196
|
+
...import_steps.parts.prevTrigger.attrs(scope.id),
|
|
199
197
|
type: "button",
|
|
200
198
|
disabled: !hasPrevStep,
|
|
201
199
|
onClick(event) {
|
|
@@ -207,7 +205,7 @@ function connect(service, normalize) {
|
|
|
207
205
|
getProgressProps() {
|
|
208
206
|
return normalize.element({
|
|
209
207
|
dir: prop("dir"),
|
|
210
|
-
...import_steps.parts.progress.attrs,
|
|
208
|
+
...import_steps.parts.progress.attrs(scope.id),
|
|
211
209
|
role: "progressbar",
|
|
212
210
|
"aria-valuenow": percent,
|
|
213
211
|
"aria-valuemin": 0,
|
package/dist/steps.connect.mjs
CHANGED
|
@@ -56,8 +56,7 @@ function connect(service, normalize) {
|
|
|
56
56
|
setStep,
|
|
57
57
|
getRootProps() {
|
|
58
58
|
return normalize.element({
|
|
59
|
-
...parts.root.attrs,
|
|
60
|
-
id: dom.getRootId(scope),
|
|
59
|
+
...parts.root.attrs(scope.id),
|
|
61
60
|
dir: prop("dir"),
|
|
62
61
|
"data-orientation": prop("orientation"),
|
|
63
62
|
style: {
|
|
@@ -69,9 +68,8 @@ function connect(service, normalize) {
|
|
|
69
68
|
const arr = fromLength(count);
|
|
70
69
|
const triggerIds = arr.map((_, index) => dom.getTriggerId(scope, index));
|
|
71
70
|
return normalize.element({
|
|
72
|
-
...parts.list.attrs,
|
|
71
|
+
...parts.list.attrs(scope.id),
|
|
73
72
|
dir: prop("dir"),
|
|
74
|
-
id: dom.getListId(scope),
|
|
75
73
|
role: "tablist",
|
|
76
74
|
"aria-owns": triggerIds.join(" "),
|
|
77
75
|
"aria-orientation": prop("orientation"),
|
|
@@ -81,7 +79,7 @@ function connect(service, normalize) {
|
|
|
81
79
|
getItemProps(props) {
|
|
82
80
|
const itemState = getItemState(props);
|
|
83
81
|
return normalize.element({
|
|
84
|
-
...parts.item.attrs,
|
|
82
|
+
...parts.item.attrs(scope.id),
|
|
85
83
|
dir: prop("dir"),
|
|
86
84
|
"aria-current": itemState.current ? "step" : void 0,
|
|
87
85
|
"data-orientation": prop("orientation"),
|
|
@@ -91,7 +89,7 @@ function connect(service, normalize) {
|
|
|
91
89
|
getTriggerProps(props) {
|
|
92
90
|
const itemState = getItemState(props);
|
|
93
91
|
return normalize.button({
|
|
94
|
-
...parts.trigger.attrs,
|
|
92
|
+
...parts.trigger.attrs(scope.id),
|
|
95
93
|
id: itemState.triggerId,
|
|
96
94
|
role: "tab",
|
|
97
95
|
dir: prop("dir"),
|
|
@@ -113,7 +111,7 @@ function connect(service, normalize) {
|
|
|
113
111
|
getContentProps(props) {
|
|
114
112
|
const itemState = getItemState(props);
|
|
115
113
|
return normalize.element({
|
|
116
|
-
...parts.content.attrs,
|
|
114
|
+
...parts.content.attrs(scope.id),
|
|
117
115
|
dir: prop("dir"),
|
|
118
116
|
id: itemState.contentId,
|
|
119
117
|
role: "tabpanel",
|
|
@@ -127,7 +125,7 @@ function connect(service, normalize) {
|
|
|
127
125
|
getIndicatorProps(props) {
|
|
128
126
|
const itemState = getItemState(props);
|
|
129
127
|
return normalize.element({
|
|
130
|
-
...parts.indicator.attrs,
|
|
128
|
+
...parts.indicator.attrs(scope.id),
|
|
131
129
|
dir: prop("dir"),
|
|
132
130
|
"aria-hidden": true,
|
|
133
131
|
"data-complete": dataAttr(itemState.completed),
|
|
@@ -138,7 +136,7 @@ function connect(service, normalize) {
|
|
|
138
136
|
getSeparatorProps(props) {
|
|
139
137
|
const itemState = getItemState(props);
|
|
140
138
|
return normalize.element({
|
|
141
|
-
...parts.separator.attrs,
|
|
139
|
+
...parts.separator.attrs(scope.id),
|
|
142
140
|
dir: prop("dir"),
|
|
143
141
|
"data-orientation": prop("orientation"),
|
|
144
142
|
"data-complete": dataAttr(itemState.completed),
|
|
@@ -148,7 +146,7 @@ function connect(service, normalize) {
|
|
|
148
146
|
},
|
|
149
147
|
getNextTriggerProps() {
|
|
150
148
|
return normalize.button({
|
|
151
|
-
...parts.nextTrigger.attrs,
|
|
149
|
+
...parts.nextTrigger.attrs(scope.id),
|
|
152
150
|
dir: prop("dir"),
|
|
153
151
|
type: "button",
|
|
154
152
|
disabled: !hasNextStep,
|
|
@@ -161,7 +159,7 @@ function connect(service, normalize) {
|
|
|
161
159
|
getPrevTriggerProps() {
|
|
162
160
|
return normalize.button({
|
|
163
161
|
dir: prop("dir"),
|
|
164
|
-
...parts.prevTrigger.attrs,
|
|
162
|
+
...parts.prevTrigger.attrs(scope.id),
|
|
165
163
|
type: "button",
|
|
166
164
|
disabled: !hasPrevStep,
|
|
167
165
|
onClick(event) {
|
|
@@ -173,7 +171,7 @@ function connect(service, normalize) {
|
|
|
173
171
|
getProgressProps() {
|
|
174
172
|
return normalize.element({
|
|
175
173
|
dir: prop("dir"),
|
|
176
|
-
...parts.progress.attrs,
|
|
174
|
+
...parts.progress.attrs(scope.id),
|
|
177
175
|
role: "progressbar",
|
|
178
176
|
"aria-valuenow": percent,
|
|
179
177
|
"aria-valuemin": 0,
|
package/dist/steps.dom.js
CHANGED
|
@@ -26,10 +26,10 @@ __export(steps_dom_exports, {
|
|
|
26
26
|
getTriggerId: () => getTriggerId
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(steps_dom_exports);
|
|
29
|
-
var getRootId = (ctx) => ctx.ids?.root ??
|
|
30
|
-
var getListId = (ctx) => ctx.ids?.list ??
|
|
31
|
-
var getTriggerId = (ctx, index) => ctx.ids?.triggerId?.(index) ??
|
|
32
|
-
var getContentId = (ctx, index) => ctx.ids?.contentId?.(index) ??
|
|
29
|
+
var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
|
|
30
|
+
var getListId = (ctx) => ctx.ids?.list ?? `${ctx.id}:list`;
|
|
31
|
+
var getTriggerId = (ctx, index) => ctx.ids?.triggerId?.(index) ?? `${ctx.id}:trigger:${index}`;
|
|
32
|
+
var getContentId = (ctx, index) => ctx.ids?.contentId?.(index) ?? `${ctx.id}:content:${index}`;
|
|
33
33
|
// Annotate the CommonJS export names for ESM import in node:
|
|
34
34
|
0 && (module.exports = {
|
|
35
35
|
getContentId,
|
package/dist/steps.dom.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// src/steps.dom.ts
|
|
2
|
-
var getRootId = (ctx) => ctx.ids?.root ??
|
|
3
|
-
var getListId = (ctx) => ctx.ids?.list ??
|
|
4
|
-
var getTriggerId = (ctx, index) => ctx.ids?.triggerId?.(index) ??
|
|
5
|
-
var getContentId = (ctx, index) => ctx.ids?.contentId?.(index) ??
|
|
2
|
+
var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
|
|
3
|
+
var getListId = (ctx) => ctx.ids?.list ?? `${ctx.id}:list`;
|
|
4
|
+
var getTriggerId = (ctx, index) => ctx.ids?.triggerId?.(index) ?? `${ctx.id}:trigger:${index}`;
|
|
5
|
+
var getContentId = (ctx, index) => ctx.ids?.contentId?.(index) ?? `${ctx.id}:content:${index}`;
|
|
6
6
|
export {
|
|
7
7
|
getContentId,
|
|
8
8
|
getListId,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/steps",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next.0",
|
|
4
4
|
"description": "Core logic for the steps widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@zag-js/anatomy": "
|
|
31
|
-
"@zag-js/core": "
|
|
32
|
-
"@zag-js/dom-query": "
|
|
33
|
-
"@zag-js/utils": "
|
|
34
|
-
"@zag-js/types": "
|
|
30
|
+
"@zag-js/anatomy": "2.0.0-next.0",
|
|
31
|
+
"@zag-js/core": "2.0.0-next.0",
|
|
32
|
+
"@zag-js/dom-query": "2.0.0-next.0",
|
|
33
|
+
"@zag-js/utils": "2.0.0-next.0",
|
|
34
|
+
"@zag-js/types": "2.0.0-next.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"clean-package": "2.2.0"
|