@saas-ui/forms 3.0.0-alpha.12 → 3.0.0-alpha.14
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/CHANGELOG.md +21 -0
- package/dist/index.d.mts +22 -9
- package/dist/index.d.ts +22 -9
- package/dist/index.js +99 -90
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +72 -63
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.mts +4 -4
- package/dist/yup/index.d.ts +4 -4
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
@@ -1,9 +1,10 @@
|
|
1
1
|
'use client'
|
2
2
|
|
3
3
|
// src/create-form.tsx
|
4
|
-
import { forwardRef as forwardRef7, useMemo as
|
4
|
+
import { forwardRef as forwardRef7, useMemo as useMemo3 } from "react";
|
5
5
|
|
6
6
|
// src/default-fields.tsx
|
7
|
+
import { useMemo } from "react";
|
7
8
|
import {
|
8
9
|
Input,
|
9
10
|
Stack,
|
@@ -69,30 +70,35 @@ var isTouched = (name, formState) => {
|
|
69
70
|
return get(formState.touchedFields, name);
|
70
71
|
};
|
71
72
|
var useBaseField = (props) => {
|
72
|
-
const [fieldProps] = splitProps(props, [
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
73
|
+
const [fieldProps, rootProps] = splitProps(props, [
|
74
|
+
"name",
|
75
|
+
"label",
|
76
|
+
"help",
|
77
|
+
"hideLabel",
|
78
|
+
"placeholder",
|
79
|
+
"rules",
|
80
|
+
"type",
|
81
|
+
"children"
|
80
82
|
]);
|
81
83
|
const { formState } = useFormContext();
|
82
84
|
const error = getError(fieldProps.name, formState);
|
83
85
|
const touched = isTouched(fieldProps.name, formState);
|
84
86
|
return {
|
85
87
|
...fieldProps,
|
86
|
-
|
88
|
+
rootProps,
|
87
89
|
error,
|
88
90
|
touched
|
89
91
|
};
|
90
92
|
};
|
91
93
|
var BaseField = (props) => {
|
92
|
-
const {
|
94
|
+
const { rootProps, label, hideLabel, help, error } = useBaseField(props);
|
93
95
|
const isInvalid = !!error;
|
94
|
-
return /* @__PURE__ */ jsxs(Field.Root, { invalid: isInvalid, ...
|
95
|
-
label && !hideLabel ? /* @__PURE__ */
|
96
|
+
return /* @__PURE__ */ jsxs(Field.Root, { invalid: isInvalid, ...rootProps, children: [
|
97
|
+
label && !hideLabel ? /* @__PURE__ */ jsxs(Field.Label, { children: [
|
98
|
+
label,
|
99
|
+
" ",
|
100
|
+
/* @__PURE__ */ jsx2(Field.RequiredIndicator, {})
|
101
|
+
] }) : null,
|
96
102
|
/* @__PURE__ */ jsxs(Box, { width: "full", children: [
|
97
103
|
props.children,
|
98
104
|
help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx2(Field.HelperText, { children: help }) : null,
|
@@ -123,37 +129,34 @@ import { jsx as jsx4 } from "react/jsx-runtime";
|
|
123
129
|
var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
|
124
130
|
const Field3 = forwardRef((props, ref) => {
|
125
131
|
var _a;
|
126
|
-
const { id,
|
132
|
+
const { id, label, required, rules } = props;
|
127
133
|
const inputRules = {
|
128
|
-
required
|
134
|
+
required,
|
129
135
|
...rules
|
130
136
|
};
|
131
137
|
const fieldContext = useFieldsContext();
|
132
138
|
const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
|
133
|
-
const { extraProps,
|
139
|
+
const { props: extraProps, Component } = React3.useMemo(
|
134
140
|
() => getBaseField(),
|
135
141
|
[getBaseField]
|
136
142
|
);
|
137
|
-
const
|
143
|
+
const rootProps = {
|
144
|
+
name: props.name,
|
145
|
+
label: props.label,
|
146
|
+
disabled: props.disabled,
|
147
|
+
invalid: props.invalid,
|
148
|
+
readOnly: props.readOnly,
|
149
|
+
required: props.required
|
150
|
+
};
|
151
|
+
const [baseFieldProps, inputProps] = splitProps2(
|
138
152
|
props,
|
139
|
-
[
|
140
|
-
"children",
|
141
|
-
"name",
|
142
|
-
"label",
|
143
|
-
"required",
|
144
|
-
"disabled",
|
145
|
-
"invalid",
|
146
|
-
"readOnly",
|
147
|
-
"help",
|
148
|
-
"hideLabel"
|
149
|
-
].concat(extraProps)
|
153
|
+
["orientation", "help", "hideLabel"].concat(extraProps)
|
150
154
|
);
|
151
|
-
return /* @__PURE__ */ jsx4(
|
155
|
+
return /* @__PURE__ */ jsx4(Component, { ...rootProps, ...baseFieldProps, children: /* @__PURE__ */ jsx4(
|
152
156
|
InputComponent,
|
153
157
|
{
|
154
158
|
ref,
|
155
159
|
id,
|
156
|
-
name,
|
157
160
|
label: hideLabel ? label : void 0,
|
158
161
|
...inputProps,
|
159
162
|
rules: inputRules
|
@@ -219,8 +222,8 @@ var createField = (component, options) => {
|
|
219
222
|
displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
|
220
223
|
hideLabel: options == null ? void 0 : options.hideLabel,
|
221
224
|
getBaseField: () => ({
|
222
|
-
|
223
|
-
BaseField
|
225
|
+
props: [],
|
226
|
+
Component: BaseField
|
224
227
|
})
|
225
228
|
});
|
226
229
|
return Field3;
|
@@ -254,22 +257,28 @@ var SelectField = createField(
|
|
254
257
|
options,
|
255
258
|
placeholder,
|
256
259
|
onChange,
|
257
|
-
onValueChange,
|
258
260
|
onBlur,
|
261
|
+
multiple = false,
|
262
|
+
value: valueProp,
|
259
263
|
...rest
|
260
264
|
} = props;
|
261
|
-
const collection =
|
262
|
-
|
263
|
-
|
265
|
+
const collection = useMemo(
|
266
|
+
() => createListCollection({
|
267
|
+
items: options
|
268
|
+
}),
|
269
|
+
[options]
|
270
|
+
);
|
271
|
+
const value = multiple ? [...valueProp != null ? valueProp : []] : valueProp ? [valueProp] : [];
|
264
272
|
return /* @__PURE__ */ jsxs2(
|
265
273
|
Select.Root,
|
266
274
|
{
|
267
275
|
ref,
|
268
276
|
collection,
|
269
277
|
onValueChange: (details) => {
|
270
|
-
onChange(details.value);
|
278
|
+
onChange(multiple ? details.value : details.value[0]);
|
271
279
|
},
|
272
280
|
onInteractOutside: () => onBlur(),
|
281
|
+
value,
|
273
282
|
...rest,
|
274
283
|
children: [
|
275
284
|
/* @__PURE__ */ jsx5(Select.Trigger, { ...triggerProps, children: /* @__PURE__ */ jsx5(Select.ValueText, { placeholder }) }),
|
@@ -376,7 +385,7 @@ var objectFieldResolver = (schema) => {
|
|
376
385
|
};
|
377
386
|
|
378
387
|
// src/form.tsx
|
379
|
-
import
|
388
|
+
import React11, { forwardRef as forwardRef6 } from "react";
|
380
389
|
import { chakra as chakra2 } from "@chakra-ui/react";
|
381
390
|
import { cx as cx2, runIfFn } from "@saas-ui/core/utils";
|
382
391
|
import {
|
@@ -384,7 +393,7 @@ import {
|
|
384
393
|
} from "react-hook-form";
|
385
394
|
|
386
395
|
// src/array-field.tsx
|
387
|
-
import
|
396
|
+
import React7, { forwardRef as forwardRef3 } from "react";
|
388
397
|
import { Button, chakra } from "@chakra-ui/react";
|
389
398
|
import { MinusIcon, PlusIcon } from "@saas-ui/react/icons";
|
390
399
|
|
@@ -397,7 +406,7 @@ import {
|
|
397
406
|
import { cx } from "@saas-ui/core/utils";
|
398
407
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
399
408
|
var FormLayout = forwardRef2(
|
400
|
-
({ children,
|
409
|
+
({ children, gap = 4, ...props }, ref) => {
|
401
410
|
const recipe = useRecipe({
|
402
411
|
key: "formLayout"
|
403
412
|
});
|
@@ -411,7 +420,7 @@ var FormLayout = forwardRef2(
|
|
411
420
|
className: cx("sui-form-layout", props.className),
|
412
421
|
css: [
|
413
422
|
{
|
414
|
-
|
423
|
+
gap
|
415
424
|
},
|
416
425
|
styles,
|
417
426
|
props.css
|
@@ -424,7 +433,7 @@ var FormLayout = forwardRef2(
|
|
424
433
|
FormLayout.displayName = "FormLayout";
|
425
434
|
|
426
435
|
// src/use-array-field.tsx
|
427
|
-
import * as
|
436
|
+
import * as React5 from "react";
|
428
437
|
import { createContext as createContext2 } from "@saas-ui/core/utils";
|
429
438
|
import {
|
430
439
|
useFieldArray
|
@@ -459,7 +468,7 @@ var useArrayField = ({
|
|
459
468
|
var useArrayFieldRow = ({ index }) => {
|
460
469
|
const { clearErrors } = useFormContext();
|
461
470
|
const { name, remove, fields } = useArrayFieldContext();
|
462
|
-
|
471
|
+
React5.useEffect(() => {
|
463
472
|
clearErrors(name);
|
464
473
|
}, []);
|
465
474
|
return {
|
@@ -467,7 +476,7 @@ var useArrayFieldRow = ({ index }) => {
|
|
467
476
|
isFirst: index === 0,
|
468
477
|
isLast: index === fields.length - 1,
|
469
478
|
name: `${name}.${index}`,
|
470
|
-
remove:
|
479
|
+
remove: React5.useCallback(() => {
|
471
480
|
clearErrors(name);
|
472
481
|
remove(index);
|
473
482
|
}, [index])
|
@@ -494,17 +503,17 @@ var useArrayFieldAddButton = () => {
|
|
494
503
|
};
|
495
504
|
|
496
505
|
// src/utils.ts
|
497
|
-
import * as
|
506
|
+
import * as React6 from "react";
|
498
507
|
var mapNestedFields = (name, children) => {
|
499
|
-
return
|
500
|
-
if (
|
508
|
+
return React6.Children.map(children, (child) => {
|
509
|
+
if (React6.isValidElement(child) && child.props.name) {
|
501
510
|
let childName = child.props.name;
|
502
511
|
if (childName.includes(".")) {
|
503
512
|
childName = childName.replace(/^.*\.(.*)/, "$1");
|
504
513
|
} else if (childName.includes(".$")) {
|
505
514
|
childName = childName.replace(/^.*\.\$(.*)/, "$1");
|
506
515
|
}
|
507
|
-
return
|
516
|
+
return React6.cloneElement(child, {
|
508
517
|
...child.props,
|
509
518
|
name: `${name}.${childName}`
|
510
519
|
});
|
@@ -585,7 +594,7 @@ var ArrayFieldRows = ({
|
|
585
594
|
return children(fields);
|
586
595
|
};
|
587
596
|
ArrayFieldRows.displayName = "ArrayFieldRows";
|
588
|
-
var ArrayFieldContainer =
|
597
|
+
var ArrayFieldContainer = React7.forwardRef(
|
589
598
|
({
|
590
599
|
name,
|
591
600
|
defaultValue,
|
@@ -603,14 +612,14 @@ var ArrayFieldContainer = React6.forwardRef(
|
|
603
612
|
min: min || (overrides == null ? void 0 : overrides.min),
|
604
613
|
max: max || (overrides == null ? void 0 : overrides.max)
|
605
614
|
});
|
606
|
-
|
615
|
+
React7.useImperativeHandle(ref, () => context, [ref, context]);
|
607
616
|
return /* @__PURE__ */ jsx7(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx7(BaseField, { name, ...fieldProps, ...overrides, children }) });
|
608
617
|
}
|
609
618
|
);
|
610
619
|
ArrayFieldContainer.displayName = "ArrayFieldContainer";
|
611
620
|
|
612
621
|
// src/display-if.tsx
|
613
|
-
import * as
|
622
|
+
import * as React8 from "react";
|
614
623
|
import {
|
615
624
|
useWatch
|
616
625
|
} from "react-hook-form";
|
@@ -623,8 +632,8 @@ var DisplayIf = ({
|
|
623
632
|
condition = (value) => !!value,
|
624
633
|
onToggle
|
625
634
|
}) => {
|
626
|
-
const initializedRef =
|
627
|
-
const matchesRef =
|
635
|
+
const initializedRef = React8.useRef(false);
|
636
|
+
const matchesRef = React8.useRef(false);
|
628
637
|
const value = useWatch({
|
629
638
|
name,
|
630
639
|
defaultValue,
|
@@ -633,7 +642,7 @@ var DisplayIf = ({
|
|
633
642
|
});
|
634
643
|
const context = useFormContext();
|
635
644
|
const matches = condition(value, context);
|
636
|
-
|
645
|
+
React8.useEffect(() => {
|
637
646
|
if (!initializedRef.current) {
|
638
647
|
initializedRef.current = true;
|
639
648
|
return;
|
@@ -647,10 +656,10 @@ var DisplayIf = ({
|
|
647
656
|
DisplayIf.displayName = "DisplayIf";
|
648
657
|
|
649
658
|
// src/field.tsx
|
650
|
-
import * as
|
659
|
+
import * as React9 from "react";
|
651
660
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
652
661
|
var defaultInputType = "text";
|
653
|
-
var Field2 =
|
662
|
+
var Field2 = React9.forwardRef(
|
654
663
|
(props, ref) => {
|
655
664
|
const { type = defaultInputType, name } = props;
|
656
665
|
const overrides = useFieldProps(name);
|
@@ -660,7 +669,7 @@ var Field2 = React8.forwardRef(
|
|
660
669
|
);
|
661
670
|
|
662
671
|
// src/fields.tsx
|
663
|
-
import * as
|
672
|
+
import * as React10 from "react";
|
664
673
|
|
665
674
|
// src/object-field.tsx
|
666
675
|
import { Field as FieldPrimivite } from "@chakra-ui/react";
|
@@ -713,10 +722,10 @@ var AutoFields = ({
|
|
713
722
|
const context = useFormContext();
|
714
723
|
const schema = schemaProp || context.schema;
|
715
724
|
const fieldResolver = fieldResolverProp || context.fieldResolver;
|
716
|
-
const resolver =
|
717
|
-
const fields =
|
725
|
+
const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
|
726
|
+
const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
|
718
727
|
const form = useFormContext();
|
719
|
-
|
728
|
+
React10.useEffect(() => {
|
720
729
|
var _a;
|
721
730
|
if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
|
722
731
|
form.setFocus(fields[0].name);
|
@@ -834,8 +843,8 @@ var Form = forwardRef6(
|
|
834
843
|
};
|
835
844
|
const methods = useForm(form);
|
836
845
|
const { handleSubmit } = methods;
|
837
|
-
|
838
|
-
|
846
|
+
React11.useImperativeHandle(formRef, () => methods, [formRef, methods]);
|
847
|
+
React11.useEffect(() => {
|
839
848
|
let subscription;
|
840
849
|
if (onChange) {
|
841
850
|
subscription = methods.watch(onChange);
|
@@ -894,7 +903,7 @@ function createForm({
|
|
894
903
|
fieldResolver: fieldResolverProp,
|
895
904
|
...rest
|
896
905
|
} = props;
|
897
|
-
const fieldsContext =
|
906
|
+
const fieldsContext = useMemo3(
|
898
907
|
() => ({
|
899
908
|
fields: { ...defaultFieldTypes, ...fields },
|
900
909
|
getBaseField
|