@grapu-design/react-fieldset 0.1.0 → 0.1.2
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/lib/Fieldset-12s-BTkhkKrN.cjs +121 -0
- package/lib/Fieldset-12s-DF0G-Xnv.js +115 -0
- package/lib/index.cjs +1 -1
- package/lib/index.d.ts +13 -13
- package/lib/index.js +2 -2
- package/package.json +4 -4
- package/src/Fieldset.tsx +2 -2
- package/src/useFieldset.ts +1 -1
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
3
|
+
var reactComposeRefs = require('@radix-ui/react-compose-refs');
|
|
4
|
+
var domUtils = require('@grape-design/dom-utils');
|
|
5
|
+
var reactPrimitive = require('@grape-design/react-primitive');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
|
|
8
|
+
const getLabelId = (id)=>`fieldset:${id}:label`;
|
|
9
|
+
const getDescriptionId = (id)=>`fieldset:${id}:description`;
|
|
10
|
+
const getErrorMessageId = (id)=>`fieldset:${id}:error-message`;
|
|
11
|
+
|
|
12
|
+
function useFieldset() {
|
|
13
|
+
const id = react.useId();
|
|
14
|
+
const [isLabelRendered, setIsLabelRendered] = react.useState(false);
|
|
15
|
+
const labelRef = react.useCallback((node)=>{
|
|
16
|
+
setIsLabelRendered(!!node);
|
|
17
|
+
}, []);
|
|
18
|
+
const [isDescriptionRendered, setIsDescriptionRendered] = react.useState(false);
|
|
19
|
+
const descriptionRef = react.useCallback((node)=>{
|
|
20
|
+
setIsDescriptionRendered(!!node);
|
|
21
|
+
}, []);
|
|
22
|
+
const [isErrorMessageRendered, setIsErrorMessageRendered] = react.useState(false);
|
|
23
|
+
const errorMessageRef = react.useCallback((node)=>{
|
|
24
|
+
setIsErrorMessageRendered(!!node);
|
|
25
|
+
}, []);
|
|
26
|
+
const ariaDescribedBy = [
|
|
27
|
+
isDescriptionRendered ? getDescriptionId(id) : false,
|
|
28
|
+
isErrorMessageRendered ? getErrorMessageId(id) : false
|
|
29
|
+
].filter(Boolean).join(" ") || undefined;
|
|
30
|
+
return {
|
|
31
|
+
id,
|
|
32
|
+
refs: {
|
|
33
|
+
label: labelRef,
|
|
34
|
+
description: descriptionRef,
|
|
35
|
+
errorMessage: errorMessageRef
|
|
36
|
+
},
|
|
37
|
+
renderedElements: {
|
|
38
|
+
label: isLabelRendered,
|
|
39
|
+
description: isDescriptionRendered,
|
|
40
|
+
errorMessage: isErrorMessageRendered
|
|
41
|
+
},
|
|
42
|
+
rootProps: domUtils.elementProps({
|
|
43
|
+
// see: https://w3c.github.io/aria/#group
|
|
44
|
+
role: "group",
|
|
45
|
+
// note: aria-disabled is supported but useFieldset doesn't know about the disabled state of its children
|
|
46
|
+
// note: aria-required and aria-invalid should not be set here
|
|
47
|
+
...isLabelRendered && {
|
|
48
|
+
"aria-labelledby": getLabelId(id)
|
|
49
|
+
},
|
|
50
|
+
"aria-describedby": ariaDescribedBy
|
|
51
|
+
}),
|
|
52
|
+
labelProps: domUtils.elementProps({
|
|
53
|
+
id: getLabelId(id)
|
|
54
|
+
}),
|
|
55
|
+
descriptionProps: domUtils.elementProps({
|
|
56
|
+
id: getDescriptionId(id)
|
|
57
|
+
}),
|
|
58
|
+
errorMessageProps: domUtils.elementProps({
|
|
59
|
+
id: getErrorMessageId(id),
|
|
60
|
+
"aria-live": "polite"
|
|
61
|
+
})
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const FieldsetContext = /*#__PURE__*/ react.createContext(null);
|
|
66
|
+
const FieldsetProvider = FieldsetContext.Provider;
|
|
67
|
+
function useFieldsetContext({ strict = true } = {}) {
|
|
68
|
+
const context = react.useContext(FieldsetContext);
|
|
69
|
+
if (!context && strict) {
|
|
70
|
+
throw new Error("useFieldsetContext must be used within a Fieldset");
|
|
71
|
+
}
|
|
72
|
+
return context;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const FieldsetRoot = /*#__PURE__*/ react.forwardRef((props, ref)=>{
|
|
76
|
+
const api = useFieldset();
|
|
77
|
+
const mergedProps = domUtils.mergeProps(api.rootProps, props);
|
|
78
|
+
return /*#__PURE__*/ jsxRuntime.jsx(FieldsetProvider, {
|
|
79
|
+
value: api,
|
|
80
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
|
|
81
|
+
ref: ref,
|
|
82
|
+
...mergedProps
|
|
83
|
+
})
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
FieldsetRoot.displayName = "FieldsetRoot";
|
|
87
|
+
const FieldsetLabel = /*#__PURE__*/ react.forwardRef((props, ref)=>{
|
|
88
|
+
const { refs, labelProps } = useFieldsetContext();
|
|
89
|
+
const mergedProps = domUtils.mergeProps(labelProps, props);
|
|
90
|
+
return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
|
|
91
|
+
ref: reactComposeRefs.composeRefs(refs.label, ref),
|
|
92
|
+
...mergedProps
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
FieldsetLabel.displayName = "FieldsetLabel";
|
|
96
|
+
const FieldsetDescription = /*#__PURE__*/ react.forwardRef((props, ref)=>{
|
|
97
|
+
const { refs, descriptionProps } = useFieldsetContext();
|
|
98
|
+
const mergedProps = domUtils.mergeProps(descriptionProps, props);
|
|
99
|
+
return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.span, {
|
|
100
|
+
ref: reactComposeRefs.composeRefs(refs.description, ref),
|
|
101
|
+
...mergedProps
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
FieldsetDescription.displayName = "FieldsetDescription";
|
|
105
|
+
const FieldsetErrorMessage = /*#__PURE__*/ react.forwardRef((props, ref)=>{
|
|
106
|
+
const { refs, errorMessageProps } = useFieldsetContext();
|
|
107
|
+
const mergedProps = domUtils.mergeProps(errorMessageProps, props);
|
|
108
|
+
return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
|
|
109
|
+
ref: reactComposeRefs.composeRefs(refs.errorMessage, ref),
|
|
110
|
+
...mergedProps
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
FieldsetErrorMessage.displayName = "FieldsetErrorMessage";
|
|
114
|
+
|
|
115
|
+
exports.FieldsetDescription = FieldsetDescription;
|
|
116
|
+
exports.FieldsetErrorMessage = FieldsetErrorMessage;
|
|
117
|
+
exports.FieldsetLabel = FieldsetLabel;
|
|
118
|
+
exports.FieldsetProvider = FieldsetProvider;
|
|
119
|
+
exports.FieldsetRoot = FieldsetRoot;
|
|
120
|
+
exports.useFieldset = useFieldset;
|
|
121
|
+
exports.useFieldsetContext = useFieldsetContext;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { composeRefs } from '@radix-ui/react-compose-refs';
|
|
4
|
+
import { elementProps, mergeProps } from '@grape-design/dom-utils';
|
|
5
|
+
import { Primitive } from '@grape-design/react-primitive';
|
|
6
|
+
import { useId, useState, useCallback, createContext, useContext, forwardRef } from 'react';
|
|
7
|
+
|
|
8
|
+
const getLabelId = (id)=>`fieldset:${id}:label`;
|
|
9
|
+
const getDescriptionId = (id)=>`fieldset:${id}:description`;
|
|
10
|
+
const getErrorMessageId = (id)=>`fieldset:${id}:error-message`;
|
|
11
|
+
|
|
12
|
+
function useFieldset() {
|
|
13
|
+
const id = useId();
|
|
14
|
+
const [isLabelRendered, setIsLabelRendered] = useState(false);
|
|
15
|
+
const labelRef = useCallback((node)=>{
|
|
16
|
+
setIsLabelRendered(!!node);
|
|
17
|
+
}, []);
|
|
18
|
+
const [isDescriptionRendered, setIsDescriptionRendered] = useState(false);
|
|
19
|
+
const descriptionRef = useCallback((node)=>{
|
|
20
|
+
setIsDescriptionRendered(!!node);
|
|
21
|
+
}, []);
|
|
22
|
+
const [isErrorMessageRendered, setIsErrorMessageRendered] = useState(false);
|
|
23
|
+
const errorMessageRef = useCallback((node)=>{
|
|
24
|
+
setIsErrorMessageRendered(!!node);
|
|
25
|
+
}, []);
|
|
26
|
+
const ariaDescribedBy = [
|
|
27
|
+
isDescriptionRendered ? getDescriptionId(id) : false,
|
|
28
|
+
isErrorMessageRendered ? getErrorMessageId(id) : false
|
|
29
|
+
].filter(Boolean).join(" ") || undefined;
|
|
30
|
+
return {
|
|
31
|
+
id,
|
|
32
|
+
refs: {
|
|
33
|
+
label: labelRef,
|
|
34
|
+
description: descriptionRef,
|
|
35
|
+
errorMessage: errorMessageRef
|
|
36
|
+
},
|
|
37
|
+
renderedElements: {
|
|
38
|
+
label: isLabelRendered,
|
|
39
|
+
description: isDescriptionRendered,
|
|
40
|
+
errorMessage: isErrorMessageRendered
|
|
41
|
+
},
|
|
42
|
+
rootProps: elementProps({
|
|
43
|
+
// see: https://w3c.github.io/aria/#group
|
|
44
|
+
role: "group",
|
|
45
|
+
// note: aria-disabled is supported but useFieldset doesn't know about the disabled state of its children
|
|
46
|
+
// note: aria-required and aria-invalid should not be set here
|
|
47
|
+
...isLabelRendered && {
|
|
48
|
+
"aria-labelledby": getLabelId(id)
|
|
49
|
+
},
|
|
50
|
+
"aria-describedby": ariaDescribedBy
|
|
51
|
+
}),
|
|
52
|
+
labelProps: elementProps({
|
|
53
|
+
id: getLabelId(id)
|
|
54
|
+
}),
|
|
55
|
+
descriptionProps: elementProps({
|
|
56
|
+
id: getDescriptionId(id)
|
|
57
|
+
}),
|
|
58
|
+
errorMessageProps: elementProps({
|
|
59
|
+
id: getErrorMessageId(id),
|
|
60
|
+
"aria-live": "polite"
|
|
61
|
+
})
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const FieldsetContext = /*#__PURE__*/ createContext(null);
|
|
66
|
+
const FieldsetProvider = FieldsetContext.Provider;
|
|
67
|
+
function useFieldsetContext({ strict = true } = {}) {
|
|
68
|
+
const context = useContext(FieldsetContext);
|
|
69
|
+
if (!context && strict) {
|
|
70
|
+
throw new Error("useFieldsetContext must be used within a Fieldset");
|
|
71
|
+
}
|
|
72
|
+
return context;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const FieldsetRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
76
|
+
const api = useFieldset();
|
|
77
|
+
const mergedProps = mergeProps(api.rootProps, props);
|
|
78
|
+
return /*#__PURE__*/ jsx(FieldsetProvider, {
|
|
79
|
+
value: api,
|
|
80
|
+
children: /*#__PURE__*/ jsx(Primitive.div, {
|
|
81
|
+
ref: ref,
|
|
82
|
+
...mergedProps
|
|
83
|
+
})
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
FieldsetRoot.displayName = "FieldsetRoot";
|
|
87
|
+
const FieldsetLabel = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
88
|
+
const { refs, labelProps } = useFieldsetContext();
|
|
89
|
+
const mergedProps = mergeProps(labelProps, props);
|
|
90
|
+
return /*#__PURE__*/ jsx(Primitive.div, {
|
|
91
|
+
ref: composeRefs(refs.label, ref),
|
|
92
|
+
...mergedProps
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
FieldsetLabel.displayName = "FieldsetLabel";
|
|
96
|
+
const FieldsetDescription = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
97
|
+
const { refs, descriptionProps } = useFieldsetContext();
|
|
98
|
+
const mergedProps = mergeProps(descriptionProps, props);
|
|
99
|
+
return /*#__PURE__*/ jsx(Primitive.span, {
|
|
100
|
+
ref: composeRefs(refs.description, ref),
|
|
101
|
+
...mergedProps
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
FieldsetDescription.displayName = "FieldsetDescription";
|
|
105
|
+
const FieldsetErrorMessage = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
106
|
+
const { refs, errorMessageProps } = useFieldsetContext();
|
|
107
|
+
const mergedProps = mergeProps(errorMessageProps, props);
|
|
108
|
+
return /*#__PURE__*/ jsx(Primitive.div, {
|
|
109
|
+
ref: composeRefs(refs.errorMessage, ref),
|
|
110
|
+
...mergedProps
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
FieldsetErrorMessage.displayName = "FieldsetErrorMessage";
|
|
114
|
+
|
|
115
|
+
export { FieldsetDescription as F, FieldsetErrorMessage as a, FieldsetLabel as b, FieldsetRoot as c, FieldsetProvider as d, useFieldsetContext as e, useFieldset as u };
|
package/lib/index.cjs
CHANGED
package/lib/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { PrimitiveProps } from '@
|
|
2
|
+
import { PrimitiveProps } from '@grape-design/react-primitive';
|
|
3
3
|
|
|
4
4
|
type UseFieldsetReturn = ReturnType<typeof useFieldset>;
|
|
5
5
|
declare function useFieldset(): {
|
|
@@ -15,6 +15,9 @@ declare function useFieldset(): {
|
|
|
15
15
|
errorMessage: boolean;
|
|
16
16
|
};
|
|
17
17
|
rootProps: {
|
|
18
|
+
"aria-describedby"?: string | undefined;
|
|
19
|
+
"aria-labelledby"?: string | undefined;
|
|
20
|
+
role?: react.AriaRole | undefined;
|
|
18
21
|
defaultChecked?: boolean | undefined;
|
|
19
22
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
20
23
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -39,7 +42,6 @@ declare function useFieldset(): {
|
|
|
39
42
|
title?: string | undefined;
|
|
40
43
|
translate?: "yes" | "no" | undefined;
|
|
41
44
|
radioGroup?: string | undefined;
|
|
42
|
-
role?: react.AriaRole | undefined;
|
|
43
45
|
about?: string | undefined;
|
|
44
46
|
content?: string | undefined;
|
|
45
47
|
datatype?: string | undefined;
|
|
@@ -79,7 +81,6 @@ declare function useFieldset(): {
|
|
|
79
81
|
"aria-colspan"?: number | undefined;
|
|
80
82
|
"aria-controls"?: string | undefined;
|
|
81
83
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
|
|
82
|
-
"aria-describedby"?: string | undefined;
|
|
83
84
|
"aria-description"?: string | undefined;
|
|
84
85
|
"aria-details"?: string | undefined;
|
|
85
86
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -93,7 +94,6 @@ declare function useFieldset(): {
|
|
|
93
94
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
94
95
|
"aria-keyshortcuts"?: string | undefined;
|
|
95
96
|
"aria-label"?: string | undefined;
|
|
96
|
-
"aria-labelledby"?: string | undefined;
|
|
97
97
|
"aria-level"?: number | undefined;
|
|
98
98
|
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
99
99
|
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
@@ -283,6 +283,9 @@ declare function useFieldset(): {
|
|
|
283
283
|
onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement>;
|
|
284
284
|
};
|
|
285
285
|
labelProps: {
|
|
286
|
+
"aria-describedby"?: string | undefined;
|
|
287
|
+
"aria-labelledby"?: string | undefined;
|
|
288
|
+
role?: react.AriaRole | undefined;
|
|
286
289
|
defaultChecked?: boolean | undefined;
|
|
287
290
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
288
291
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -307,7 +310,6 @@ declare function useFieldset(): {
|
|
|
307
310
|
title?: string | undefined;
|
|
308
311
|
translate?: "yes" | "no" | undefined;
|
|
309
312
|
radioGroup?: string | undefined;
|
|
310
|
-
role?: react.AriaRole | undefined;
|
|
311
313
|
about?: string | undefined;
|
|
312
314
|
content?: string | undefined;
|
|
313
315
|
datatype?: string | undefined;
|
|
@@ -347,7 +349,6 @@ declare function useFieldset(): {
|
|
|
347
349
|
"aria-colspan"?: number | undefined;
|
|
348
350
|
"aria-controls"?: string | undefined;
|
|
349
351
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
|
|
350
|
-
"aria-describedby"?: string | undefined;
|
|
351
352
|
"aria-description"?: string | undefined;
|
|
352
353
|
"aria-details"?: string | undefined;
|
|
353
354
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -361,7 +362,6 @@ declare function useFieldset(): {
|
|
|
361
362
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
362
363
|
"aria-keyshortcuts"?: string | undefined;
|
|
363
364
|
"aria-label"?: string | undefined;
|
|
364
|
-
"aria-labelledby"?: string | undefined;
|
|
365
365
|
"aria-level"?: number | undefined;
|
|
366
366
|
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
367
367
|
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
@@ -551,6 +551,9 @@ declare function useFieldset(): {
|
|
|
551
551
|
onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement>;
|
|
552
552
|
};
|
|
553
553
|
descriptionProps: {
|
|
554
|
+
"aria-describedby"?: string | undefined;
|
|
555
|
+
"aria-labelledby"?: string | undefined;
|
|
556
|
+
role?: react.AriaRole | undefined;
|
|
554
557
|
defaultChecked?: boolean | undefined;
|
|
555
558
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
556
559
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -575,7 +578,6 @@ declare function useFieldset(): {
|
|
|
575
578
|
title?: string | undefined;
|
|
576
579
|
translate?: "yes" | "no" | undefined;
|
|
577
580
|
radioGroup?: string | undefined;
|
|
578
|
-
role?: react.AriaRole | undefined;
|
|
579
581
|
about?: string | undefined;
|
|
580
582
|
content?: string | undefined;
|
|
581
583
|
datatype?: string | undefined;
|
|
@@ -615,7 +617,6 @@ declare function useFieldset(): {
|
|
|
615
617
|
"aria-colspan"?: number | undefined;
|
|
616
618
|
"aria-controls"?: string | undefined;
|
|
617
619
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
|
|
618
|
-
"aria-describedby"?: string | undefined;
|
|
619
620
|
"aria-description"?: string | undefined;
|
|
620
621
|
"aria-details"?: string | undefined;
|
|
621
622
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -629,7 +630,6 @@ declare function useFieldset(): {
|
|
|
629
630
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
630
631
|
"aria-keyshortcuts"?: string | undefined;
|
|
631
632
|
"aria-label"?: string | undefined;
|
|
632
|
-
"aria-labelledby"?: string | undefined;
|
|
633
633
|
"aria-level"?: number | undefined;
|
|
634
634
|
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
635
635
|
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
@@ -819,6 +819,9 @@ declare function useFieldset(): {
|
|
|
819
819
|
onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement>;
|
|
820
820
|
};
|
|
821
821
|
errorMessageProps: {
|
|
822
|
+
"aria-describedby"?: string | undefined;
|
|
823
|
+
"aria-labelledby"?: string | undefined;
|
|
824
|
+
role?: react.AriaRole | undefined;
|
|
822
825
|
defaultChecked?: boolean | undefined;
|
|
823
826
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
824
827
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -843,7 +846,6 @@ declare function useFieldset(): {
|
|
|
843
846
|
title?: string | undefined;
|
|
844
847
|
translate?: "yes" | "no" | undefined;
|
|
845
848
|
radioGroup?: string | undefined;
|
|
846
|
-
role?: react.AriaRole | undefined;
|
|
847
849
|
about?: string | undefined;
|
|
848
850
|
content?: string | undefined;
|
|
849
851
|
datatype?: string | undefined;
|
|
@@ -883,7 +885,6 @@ declare function useFieldset(): {
|
|
|
883
885
|
"aria-colspan"?: number | undefined;
|
|
884
886
|
"aria-controls"?: string | undefined;
|
|
885
887
|
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
|
|
886
|
-
"aria-describedby"?: string | undefined;
|
|
887
888
|
"aria-description"?: string | undefined;
|
|
888
889
|
"aria-details"?: string | undefined;
|
|
889
890
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -897,7 +898,6 @@ declare function useFieldset(): {
|
|
|
897
898
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
898
899
|
"aria-keyshortcuts"?: string | undefined;
|
|
899
900
|
"aria-label"?: string | undefined;
|
|
900
|
-
"aria-labelledby"?: string | undefined;
|
|
901
901
|
"aria-level"?: number | undefined;
|
|
902
902
|
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
903
903
|
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { F as FieldsetDescription, a as FieldsetErrorMessage, b as FieldsetLabel, c as FieldsetRoot } from './Fieldset-12s-
|
|
2
|
-
export { d as FieldsetProvider, u as useFieldset, e as useFieldsetContext } from './Fieldset-12s-
|
|
1
|
+
import { F as FieldsetDescription, a as FieldsetErrorMessage, b as FieldsetLabel, c as FieldsetRoot } from './Fieldset-12s-DF0G-Xnv.js';
|
|
2
|
+
export { d as FieldsetProvider, u as useFieldset, e as useFieldsetContext } from './Fieldset-12s-DF0G-Xnv.js';
|
|
3
3
|
|
|
4
4
|
var Fieldset_namespace = {
|
|
5
5
|
__proto__: null,
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grapu-design/react-fieldset",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
|
-
"url": "git+https://github.com/
|
|
6
|
+
"url": "git+https://github.com/grape-design/designsystem.git",
|
|
7
7
|
"directory": "packages/react-headless/fieldset"
|
|
8
8
|
},
|
|
9
9
|
"sideEffects": false,
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@radix-ui/react-compose-refs": "^1.1.2",
|
|
31
|
-
"@grapu-design/dom-utils": "^0.1.
|
|
32
|
-
"@grapu-design/react-primitive": "^0.1.
|
|
31
|
+
"@grapu-design/dom-utils": "^0.1.2",
|
|
32
|
+
"@grapu-design/react-primitive": "^0.1.2"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/react": "^19.1.6",
|
package/src/Fieldset.tsx
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { composeRefs } from "@radix-ui/react-compose-refs";
|
|
4
|
-
import { mergeProps } from "@
|
|
5
|
-
import { Primitive, type PrimitiveProps } from "@
|
|
4
|
+
import { mergeProps } from "@grape-design/dom-utils";
|
|
5
|
+
import { Primitive, type PrimitiveProps } from "@grape-design/react-primitive";
|
|
6
6
|
import type * as React from "react";
|
|
7
7
|
import { forwardRef } from "react";
|
|
8
8
|
import { useFieldset } from "./useFieldset";
|
package/src/useFieldset.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useId, useState } from "react";
|
|
2
2
|
|
|
3
|
-
import { elementProps } from "@
|
|
3
|
+
import { elementProps } from "@grape-design/dom-utils";
|
|
4
4
|
import { getDescriptionId, getErrorMessageId, getLabelId } from "./dom";
|
|
5
5
|
|
|
6
6
|
export type UseFieldsetReturn = ReturnType<typeof useFieldset>;
|