@ark-ui/react 5.29.0 → 5.29.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.
Files changed (3) hide show
  1. package/dist/components/fieldset/use-fieldset.cjs +32 -46
  2. package/dist/components/fieldset/use-fieldset.js +33 -47
  3. package/package.json +63 -63
package/dist/components/fieldset/use-fieldset.cjs CHANGED
@@ -12,8 +12,7 @@ const fieldset_anatomy = require('./fieldset.anatomy.cjs');
12
12
  const useFieldset = (props = {}) => {
13
13
  const { disabled = false, invalid = false } = props;
14
14
  const env = useEnvironmentContext.useEnvironmentContext();
15
- const hasErrorText = react.useRef(false);
16
- const hasHelperText = react.useRef(false);
15
+ const [textElements, setTextElements] = react.useState({ hasErrorText: false, hasHelperText: false });
17
16
  const uid = react.useId();
18
17
  const id = props.id ?? uid;
19
18
  const rootRef = react.useRef(null);
@@ -25,8 +24,9 @@ const useFieldset = (props = {}) => {
25
24
  if (!rootNode) return;
26
25
  const checkTextElements = () => {
27
26
  const docOrShadowRoot = env.getRootNode();
28
- hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
29
- hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
27
+ const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
28
+ const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
29
+ setTextElements({ hasErrorText, hasHelperText });
30
30
  };
31
31
  checkTextElements();
32
32
  const win = env.getWindow();
@@ -34,48 +34,34 @@ const useFieldset = (props = {}) => {
34
34
  observer.observe(rootNode, { childList: true, subtree: true });
35
35
  return () => observer.disconnect();
36
36
  }, [env, errorTextId, helperTextId]);
37
- const labelIds = react.useMemo(() => {
38
- const ids = [];
39
- if (hasErrorText.current && invalid) ids.push(errorTextId);
40
- if (hasHelperText.current) ids.push(helperTextId);
41
- return ids.join(" ") || void 0;
42
- }, [invalid, errorTextId, helperTextId]);
43
- const getRootProps = react.useMemo(
44
- () => () => ({
45
- ...fieldset_anatomy.parts.root.attrs,
46
- ref: rootRef,
47
- disabled,
48
- "data-disabled": domQuery.dataAttr(disabled),
49
- "data-invalid": domQuery.dataAttr(invalid),
50
- "aria-labelledby": legendId,
51
- "aria-describedby": labelIds
52
- }),
53
- [disabled, invalid, legendId, labelIds]
54
- );
55
- const getLegendProps = react.useMemo(
56
- () => () => ({
57
- id: legendId,
58
- ...fieldset_anatomy.parts.legend.attrs,
59
- "data-disabled": domQuery.dataAttr(disabled),
60
- "data-invalid": domQuery.dataAttr(invalid)
61
- }),
62
- [legendId, disabled, invalid]
63
- );
64
- const getHelperTextProps = react.useMemo(
65
- () => () => ({
66
- id: helperTextId,
67
- ...fieldset_anatomy.parts.helperText.attrs
68
- }),
69
- [helperTextId]
70
- );
71
- const getErrorTextProps = react.useMemo(
72
- () => () => ({
73
- id: errorTextId,
74
- ...fieldset_anatomy.parts.errorText.attrs,
75
- "aria-live": "polite"
76
- }),
77
- [errorTextId]
78
- );
37
+ const ids = [];
38
+ if (textElements.hasErrorText && invalid) ids.push(errorTextId);
39
+ if (textElements.hasHelperText) ids.push(helperTextId);
40
+ const labelIds = ids.length > 0 ? ids.join(" ") : void 0;
41
+ const getRootProps = () => ({
42
+ ...fieldset_anatomy.parts.root.attrs,
43
+ ref: rootRef,
44
+ disabled,
45
+ "data-disabled": domQuery.dataAttr(disabled),
46
+ "data-invalid": domQuery.dataAttr(invalid),
47
+ "aria-labelledby": legendId,
48
+ "aria-describedby": labelIds
49
+ });
50
+ const getLegendProps = () => ({
51
+ id: legendId,
52
+ ...fieldset_anatomy.parts.legend.attrs,
53
+ "data-disabled": domQuery.dataAttr(disabled),
54
+ "data-invalid": domQuery.dataAttr(invalid)
55
+ });
56
+ const getHelperTextProps = () => ({
57
+ id: helperTextId,
58
+ ...fieldset_anatomy.parts.helperText.attrs
59
+ });
60
+ const getErrorTextProps = () => ({
61
+ id: errorTextId,
62
+ ...fieldset_anatomy.parts.errorText.attrs,
63
+ "aria-live": "polite"
64
+ });
79
65
  return {
80
66
  refs: {
81
67
  rootRef
package/dist/components/fieldset/use-fieldset.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
  import { dataAttr } from '@zag-js/dom-query';
3
- import { useRef, useId, useMemo } from 'react';
3
+ import { useState, useId, useRef } from 'react';
4
4
  import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
5
5
  import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
6
6
  import { parts } from './fieldset.anatomy.js';
@@ -8,8 +8,7 @@ import { parts } from './fieldset.anatomy.js';
8
8
  const useFieldset = (props = {}) => {
9
9
  const { disabled = false, invalid = false } = props;
10
10
  const env = useEnvironmentContext();
11
- const hasErrorText = useRef(false);
12
- const hasHelperText = useRef(false);
11
+ const [textElements, setTextElements] = useState({ hasErrorText: false, hasHelperText: false });
13
12
  const uid = useId();
14
13
  const id = props.id ?? uid;
15
14
  const rootRef = useRef(null);
@@ -21,8 +20,9 @@ const useFieldset = (props = {}) => {
21
20
  if (!rootNode) return;
22
21
  const checkTextElements = () => {
23
22
  const docOrShadowRoot = env.getRootNode();
24
- hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
25
- hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
23
+ const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
24
+ const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
25
+ setTextElements({ hasErrorText, hasHelperText });
26
26
  };
27
27
  checkTextElements();
28
28
  const win = env.getWindow();
@@ -30,48 +30,34 @@ const useFieldset = (props = {}) => {
30
30
  observer.observe(rootNode, { childList: true, subtree: true });
31
31
  return () => observer.disconnect();
32
32
  }, [env, errorTextId, helperTextId]);
33
- const labelIds = useMemo(() => {
34
- const ids = [];
35
- if (hasErrorText.current && invalid) ids.push(errorTextId);
36
- if (hasHelperText.current) ids.push(helperTextId);
37
- return ids.join(" ") || void 0;
38
- }, [invalid, errorTextId, helperTextId]);
39
- const getRootProps = useMemo(
40
- () => () => ({
41
- ...parts.root.attrs,
42
- ref: rootRef,
43
- disabled,
44
- "data-disabled": dataAttr(disabled),
45
- "data-invalid": dataAttr(invalid),
46
- "aria-labelledby": legendId,
47
- "aria-describedby": labelIds
48
- }),
49
- [disabled, invalid, legendId, labelIds]
50
- );
51
- const getLegendProps = useMemo(
52
- () => () => ({
53
- id: legendId,
54
- ...parts.legend.attrs,
55
- "data-disabled": dataAttr(disabled),
56
- "data-invalid": dataAttr(invalid)
57
- }),
58
- [legendId, disabled, invalid]
59
- );
60
- const getHelperTextProps = useMemo(
61
- () => () => ({
62
- id: helperTextId,
63
- ...parts.helperText.attrs
64
- }),
65
- [helperTextId]
66
- );
67
- const getErrorTextProps = useMemo(
68
- () => () => ({
69
- id: errorTextId,
70
- ...parts.errorText.attrs,
71
- "aria-live": "polite"
72
- }),
73
- [errorTextId]
74
- );
33
+ const ids = [];
34
+ if (textElements.hasErrorText && invalid) ids.push(errorTextId);
35
+ if (textElements.hasHelperText) ids.push(helperTextId);
36
+ const labelIds = ids.length > 0 ? ids.join(" ") : void 0;
37
+ const getRootProps = () => ({
38
+ ...parts.root.attrs,
39
+ ref: rootRef,
40
+ disabled,
41
+ "data-disabled": dataAttr(disabled),
42
+ "data-invalid": dataAttr(invalid),
43
+ "aria-labelledby": legendId,
44
+ "aria-describedby": labelIds
45
+ });
46
+ const getLegendProps = () => ({
47
+ id: legendId,
48
+ ...parts.legend.attrs,
49
+ "data-disabled": dataAttr(disabled),
50
+ "data-invalid": dataAttr(invalid)
51
+ });
52
+ const getHelperTextProps = () => ({
53
+ id: helperTextId,
54
+ ...parts.helperText.attrs
55
+ });
56
+ const getErrorTextProps = () => ({
57
+ id: errorTextId,
58
+ ...parts.errorText.attrs,
59
+ "aria-live": "polite"
60
+ });
75
61
  return {
76
62
  refs: {
77
63
  rootRef
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ark-ui/react",
3
3
  "type": "module",
4
- "version": "5.29.0",
4
+ "version": "5.29.1",
5
5
  "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
6
6
  "keywords": [
7
7
  "accordion",
@@ -150,68 +150,68 @@
150
150
  "sideEffects": false,
151
151
  "dependencies": {
152
152
  "@internationalized/date": "3.10.0",
153
- "@zag-js/accordion": "1.29.0",
154
- "@zag-js/anatomy": "1.29.0",
155
- "@zag-js/angle-slider": "1.29.0",
156
- "@zag-js/async-list": "1.29.0",
157
- "@zag-js/auto-resize": "1.29.0",
158
- "@zag-js/avatar": "1.29.0",
159
- "@zag-js/bottom-sheet": "1.29.0",
160
- "@zag-js/carousel": "1.29.0",
161
- "@zag-js/checkbox": "1.29.0",
162
- "@zag-js/clipboard": "1.29.0",
163
- "@zag-js/collapsible": "1.29.0",
164
- "@zag-js/collection": "1.29.0",
165
- "@zag-js/color-picker": "1.29.0",
166
- "@zag-js/color-utils": "1.29.0",
167
- "@zag-js/combobox": "1.29.0",
168
- "@zag-js/core": "1.29.0",
169
- "@zag-js/date-picker": "1.29.0",
170
- "@zag-js/date-utils": "1.29.0",
171
- "@zag-js/dialog": "1.29.0",
172
- "@zag-js/dom-query": "1.29.0",
173
- "@zag-js/editable": "1.29.0",
174
- "@zag-js/file-upload": "1.29.0",
175
- "@zag-js/file-utils": "1.29.0",
176
- "@zag-js/floating-panel": "1.29.0",
177
- "@zag-js/focus-trap": "1.29.0",
178
- "@zag-js/highlight-word": "1.29.0",
179
- "@zag-js/hover-card": "1.29.0",
180
- "@zag-js/image-cropper": "1.29.0",
181
- "@zag-js/i18n-utils": "1.29.0",
182
- "@zag-js/json-tree-utils": "1.29.0",
183
- "@zag-js/listbox": "1.29.0",
184
- "@zag-js/marquee": "1.29.0",
185
- "@zag-js/menu": "1.29.0",
186
- "@zag-js/number-input": "1.29.0",
187
- "@zag-js/pagination": "1.29.0",
188
- "@zag-js/password-input": "1.29.0",
189
- "@zag-js/pin-input": "1.29.0",
190
- "@zag-js/popover": "1.29.0",
191
- "@zag-js/presence": "1.29.0",
192
- "@zag-js/progress": "1.29.0",
193
- "@zag-js/qr-code": "1.29.0",
194
- "@zag-js/radio-group": "1.29.0",
195
- "@zag-js/rating-group": "1.29.0",
196
- "@zag-js/react": "1.29.0",
197
- "@zag-js/scroll-area": "1.29.0",
198
- "@zag-js/select": "1.29.0",
199
- "@zag-js/signature-pad": "1.29.0",
200
- "@zag-js/slider": "1.29.0",
201
- "@zag-js/splitter": "1.29.0",
202
- "@zag-js/steps": "1.29.0",
203
- "@zag-js/switch": "1.29.0",
204
- "@zag-js/tabs": "1.29.0",
205
- "@zag-js/tags-input": "1.29.0",
206
- "@zag-js/timer": "1.29.0",
207
- "@zag-js/toast": "1.29.0",
208
- "@zag-js/toggle": "1.29.0",
209
- "@zag-js/toggle-group": "1.29.0",
210
- "@zag-js/tooltip": "1.29.0",
211
- "@zag-js/tour": "1.29.0",
212
- "@zag-js/tree-view": "1.29.0",
213
- "@zag-js/types": "1.29.0",
214
- "@zag-js/utils": "1.29.0"
153
+ "@zag-js/accordion": "1.29.1",
154
+ "@zag-js/anatomy": "1.29.1",
155
+ "@zag-js/angle-slider": "1.29.1",
156
+ "@zag-js/async-list": "1.29.1",
157
+ "@zag-js/auto-resize": "1.29.1",
158
+ "@zag-js/avatar": "1.29.1",
159
+ "@zag-js/bottom-sheet": "1.29.1",
160
+ "@zag-js/carousel": "1.29.1",
161
+ "@zag-js/checkbox": "1.29.1",
162
+ "@zag-js/clipboard": "1.29.1",
163
+ "@zag-js/collapsible": "1.29.1",
164
+ "@zag-js/collection": "1.29.1",
165
+ "@zag-js/color-picker": "1.29.1",
166
+ "@zag-js/color-utils": "1.29.1",
167
+ "@zag-js/combobox": "1.29.1",
168
+ "@zag-js/core": "1.29.1",
169
+ "@zag-js/date-picker": "1.29.1",
170
+ "@zag-js/date-utils": "1.29.1",
171
+ "@zag-js/dialog": "1.29.1",
172
+ "@zag-js/dom-query": "1.29.1",
173
+ "@zag-js/editable": "1.29.1",
174
+ "@zag-js/file-upload": "1.29.1",
175
+ "@zag-js/file-utils": "1.29.1",
176
+ "@zag-js/floating-panel": "1.29.1",
177
+ "@zag-js/focus-trap": "1.29.1",
178
+ "@zag-js/highlight-word": "1.29.1",
179
+ "@zag-js/hover-card": "1.29.1",
180
+ "@zag-js/image-cropper": "1.29.1",
181
+ "@zag-js/i18n-utils": "1.29.1",
182
+ "@zag-js/json-tree-utils": "1.29.1",
183
+ "@zag-js/listbox": "1.29.1",
184
+ "@zag-js/marquee": "1.29.1",
185
+ "@zag-js/menu": "1.29.1",
186
+ "@zag-js/number-input": "1.29.1",
187
+ "@zag-js/pagination": "1.29.1",
188
+ "@zag-js/password-input": "1.29.1",
189
+ "@zag-js/pin-input": "1.29.1",
190
+ "@zag-js/popover": "1.29.1",
191
+ "@zag-js/presence": "1.29.1",
192
+ "@zag-js/progress": "1.29.1",
193
+ "@zag-js/qr-code": "1.29.1",
194
+ "@zag-js/radio-group": "1.29.1",
195
+ "@zag-js/rating-group": "1.29.1",
196
+ "@zag-js/react": "1.29.1",
197
+ "@zag-js/scroll-area": "1.29.1",
198
+ "@zag-js/select": "1.29.1",
199
+ "@zag-js/signature-pad": "1.29.1",
200
+ "@zag-js/slider": "1.29.1",
201
+ "@zag-js/splitter": "1.29.1",
202
+ "@zag-js/steps": "1.29.1",
203
+ "@zag-js/switch": "1.29.1",
204
+ "@zag-js/tabs": "1.29.1",
205
+ "@zag-js/tags-input": "1.29.1",
206
+ "@zag-js/timer": "1.29.1",
207
+ "@zag-js/toast": "1.29.1",
208
+ "@zag-js/toggle": "1.29.1",
209
+ "@zag-js/toggle-group": "1.29.1",
210
+ "@zag-js/tooltip": "1.29.1",
211
+ "@zag-js/tour": "1.29.1",
212
+ "@zag-js/tree-view": "1.29.1",
213
+ "@zag-js/types": "1.29.1",
214
+ "@zag-js/utils": "1.29.1"
215
215
  },
216
216
  "devDependencies": {
217
217
  "check-password-strength": "3.0.0",