@saas-ui/forms 3.0.0-next.2 → 3.0.0-next.4
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 +15 -0
- package/dist/index.js +34 -37
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +34 -37
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.js +4 -6
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +4 -6
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.js +7 -9
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +7 -9
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +5 -4
package/dist/index.mjs
CHANGED
@@ -52,10 +52,9 @@ var useFormContext = () => {
|
|
52
52
|
};
|
53
53
|
};
|
54
54
|
var useFieldProps = (name) => {
|
55
|
-
|
56
|
-
const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
|
55
|
+
const parsedName = name?.replace(/\.[0-9]/g, ".$");
|
57
56
|
const context = useFormContext();
|
58
|
-
return
|
57
|
+
return context?.fields?.[parsedName] || {};
|
59
58
|
};
|
60
59
|
var FormProvider = (props) => {
|
61
60
|
const { children, fieldResolver, schema, fields, ...rest } = props;
|
@@ -101,8 +100,8 @@ var BaseField = (props) => {
|
|
101
100
|
/* @__PURE__ */ jsx2(Field.RequiredIndicator, {})
|
102
101
|
] }) : null,
|
103
102
|
props.children,
|
104
|
-
help && !
|
105
|
-
|
103
|
+
help && !error?.message ? /* @__PURE__ */ jsx2(Field.HelperText, { children: help }) : null,
|
104
|
+
error?.message && /* @__PURE__ */ jsx2(Field.ErrorText, { children: error?.message })
|
106
105
|
] });
|
107
106
|
};
|
108
107
|
BaseField.displayName = "BaseField";
|
@@ -118,23 +117,21 @@ var useFieldsContext = () => {
|
|
118
117
|
return React2.useContext(FieldsContext);
|
119
118
|
};
|
120
119
|
var useField = (type, fallback) => {
|
121
|
-
var _a;
|
122
120
|
const context = React2.useContext(FieldsContext);
|
123
|
-
return
|
121
|
+
return context?.fields?.[type] || fallback;
|
124
122
|
};
|
125
123
|
|
126
124
|
// src/create-field.tsx
|
127
125
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
128
126
|
var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
|
129
127
|
const Field3 = forwardRef((props, ref) => {
|
130
|
-
var _a;
|
131
128
|
const { id, label, required, rules } = props;
|
132
129
|
const inputRules = {
|
133
130
|
required,
|
134
131
|
...rules
|
135
132
|
};
|
136
133
|
const fieldContext = useFieldsContext();
|
137
|
-
const getBaseField =
|
134
|
+
const getBaseField = fieldContext?.getBaseField ?? getBaseFieldProp;
|
138
135
|
const { props: extraProps, Component } = React3.useMemo(
|
139
136
|
() => getBaseField(),
|
140
137
|
[getBaseField]
|
@@ -210,16 +207,15 @@ var withUncontrolledInput = (InputComponent) => {
|
|
210
207
|
);
|
211
208
|
};
|
212
209
|
var createField = (component, options) => {
|
213
|
-
var _a;
|
214
210
|
let InputComponent;
|
215
|
-
if (options
|
211
|
+
if (options?.isControlled) {
|
216
212
|
InputComponent = withControlledInput(forwardRef(component));
|
217
213
|
} else {
|
218
214
|
InputComponent = withUncontrolledInput(forwardRef(component));
|
219
215
|
}
|
220
216
|
const Field3 = _createField(InputComponent, {
|
221
|
-
displayName: `${
|
222
|
-
hideLabel: options
|
217
|
+
displayName: `${component.displayName ?? "Custom"}Field`,
|
218
|
+
hideLabel: options?.hideLabel,
|
223
219
|
getBaseField: () => ({
|
224
220
|
props: [],
|
225
221
|
Component: BaseField
|
@@ -275,7 +271,7 @@ var SelectField = createField(
|
|
275
271
|
}),
|
276
272
|
[options]
|
277
273
|
);
|
278
|
-
const value = multiple ? [...valueProp
|
274
|
+
const value = multiple ? [...valueProp ?? []] : valueProp ? [valueProp] : [];
|
279
275
|
return /* @__PURE__ */ jsxs2(
|
280
276
|
Select.Root,
|
281
277
|
{
|
@@ -314,7 +310,7 @@ var RadioField = createField(
|
|
314
310
|
{
|
315
311
|
ref,
|
316
312
|
onValueChange: ({ value }) => {
|
317
|
-
onChange
|
313
|
+
onChange?.(value);
|
318
314
|
},
|
319
315
|
...rest,
|
320
316
|
children: /* @__PURE__ */ jsx5(Stack, { flexDirection, gap, children: options.map((option) => /* @__PURE__ */ jsx5(Radio, { value: option.value, children: option.label || option.value }, option.value)) })
|
@@ -328,7 +324,7 @@ var RadioField = createField(
|
|
328
324
|
var PinField = createField(
|
329
325
|
(props, ref) => {
|
330
326
|
const { pinType, value: valueProp, onChange, ...inputProps } = props;
|
331
|
-
const value =
|
327
|
+
const value = valueProp?.split("") || [];
|
332
328
|
return /* @__PURE__ */ jsx5(
|
333
329
|
PinInput,
|
334
330
|
{
|
@@ -378,10 +374,9 @@ var objectFieldResolver = (schema) => {
|
|
378
374
|
return mapFields(schema);
|
379
375
|
};
|
380
376
|
const getNestedFields = (name) => {
|
381
|
-
var _a;
|
382
377
|
const field = get2(schema, name);
|
383
378
|
if (!field) return [];
|
384
|
-
if (
|
379
|
+
if (field.items?.type === "object") {
|
385
380
|
return mapFields(field.items.properties);
|
386
381
|
} else if (field.type === "object") {
|
387
382
|
return mapFields(field.properties);
|
@@ -513,15 +508,19 @@ var useArrayFieldAddButton = () => {
|
|
513
508
|
import * as React6 from "react";
|
514
509
|
var mapNestedFields = (name, children) => {
|
515
510
|
return React6.Children.map(children, (child) => {
|
516
|
-
if (React6.isValidElement(child)
|
517
|
-
|
511
|
+
if (React6.isValidElement(child)) {
|
512
|
+
const props = child.props;
|
513
|
+
if (!props.name) {
|
514
|
+
return child;
|
515
|
+
}
|
516
|
+
let childName = props.name;
|
518
517
|
if (childName.includes(".")) {
|
519
518
|
childName = childName.replace(/^.*\.(.*)/, "$1");
|
520
519
|
} else if (childName.includes(".$")) {
|
521
520
|
childName = childName.replace(/^.*\.\$(.*)/, "$1");
|
522
521
|
}
|
523
522
|
return React6.cloneElement(child, {
|
524
|
-
...
|
523
|
+
...props,
|
525
524
|
name: `${name}.${childName}`
|
526
525
|
});
|
527
526
|
}
|
@@ -616,8 +615,8 @@ var ArrayFieldContainer = React7.forwardRef(
|
|
616
615
|
name,
|
617
616
|
defaultValue,
|
618
617
|
keyName,
|
619
|
-
min: min ||
|
620
|
-
max: max ||
|
618
|
+
min: min || overrides?.min,
|
619
|
+
max: max || overrides?.max
|
621
620
|
});
|
622
621
|
React7.useImperativeHandle(ref, () => context, [ref, context]);
|
623
622
|
return /* @__PURE__ */ jsx7(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx7(BaseField, { name, ...fieldProps, ...overrides, children }) });
|
@@ -656,7 +655,7 @@ var DisplayIf = ({
|
|
656
655
|
}
|
657
656
|
if (matchesRef.current === matches) return;
|
658
657
|
matchesRef.current = matches;
|
659
|
-
onToggle
|
658
|
+
onToggle?.(matches, context);
|
660
659
|
}, [value]);
|
661
660
|
return matches ? children : null;
|
662
661
|
};
|
@@ -670,7 +669,7 @@ var Field2 = React9.forwardRef(
|
|
670
669
|
(props, ref) => {
|
671
670
|
const { type = defaultInputType, name } = props;
|
672
671
|
const overrides = useFieldProps(name);
|
673
|
-
const InputComponent = useField(
|
672
|
+
const InputComponent = useField(overrides?.type || type, InputField);
|
674
673
|
return /* @__PURE__ */ jsx8(InputComponent, { ref, ...props, ...overrides });
|
675
674
|
}
|
676
675
|
);
|
@@ -707,8 +706,7 @@ ObjectField.displayName = "ObjectField";
|
|
707
706
|
// src/fields.tsx
|
708
707
|
import { jsx as jsx10 } from "react/jsx-runtime";
|
709
708
|
var mapNestedFields2 = (resolver, name) => {
|
710
|
-
|
711
|
-
return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
|
709
|
+
return resolver.getNestedFields(name)?.map(
|
712
710
|
({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsx10(
|
713
711
|
Field2,
|
714
712
|
{
|
@@ -730,18 +728,17 @@ var AutoFields = ({
|
|
730
728
|
const schema = schemaProp || context.schema;
|
731
729
|
const fieldResolver = fieldResolverProp || context.fieldResolver;
|
732
730
|
const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
|
733
|
-
const fields = React10.useMemo(() => resolver
|
731
|
+
const fields = React10.useMemo(() => resolver?.getFields(), [resolver]);
|
734
732
|
const form = useFormContext();
|
735
733
|
React10.useEffect(() => {
|
736
|
-
|
737
|
-
if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
|
734
|
+
if (focusFirstField && fields?.[0]?.name) {
|
738
735
|
form.setFocus(fields[0].name);
|
739
736
|
}
|
740
737
|
}, [schema, fieldResolver, focusFirstField]);
|
741
738
|
if (!resolver) {
|
742
739
|
return null;
|
743
740
|
}
|
744
|
-
return /* @__PURE__ */ jsx10(FormLayout, { ...props, children: fields
|
741
|
+
return /* @__PURE__ */ jsx10(FormLayout, { ...props, children: fields?.map(
|
745
742
|
({ name, type, ...fieldProps }) => {
|
746
743
|
if (type === "array") {
|
747
744
|
return /* @__PURE__ */ jsx10(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
|
@@ -786,8 +783,8 @@ var SubmitButton = forwardRef5(
|
|
786
783
|
disableIfInvalid: disableIfInvalidOverride,
|
787
784
|
...fieldProps
|
788
785
|
} = field;
|
789
|
-
const disableIfUntouched = disableIfUntouchedOverride
|
790
|
-
const disableIfInvalid = disableIfInvalidOverride
|
786
|
+
const disableIfUntouched = disableIfUntouchedOverride ?? disableIfUntouchedProp;
|
787
|
+
const disableIfInvalid = disableIfInvalidOverride ?? disableIfInvalidProp;
|
791
788
|
const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || disabledProp;
|
792
789
|
return /* @__PURE__ */ jsx11(
|
793
790
|
Button2,
|
@@ -856,13 +853,13 @@ var Form = forwardRef6(
|
|
856
853
|
if (onChange) {
|
857
854
|
subscription = methods.watch(onChange);
|
858
855
|
}
|
859
|
-
return () => subscription
|
856
|
+
return () => subscription?.unsubscribe();
|
860
857
|
}, [methods, onChange]);
|
861
858
|
let _children = children;
|
862
859
|
if (!_children && fieldResolver) {
|
863
860
|
_children = /* @__PURE__ */ jsxs5(FormLayout, { children: [
|
864
861
|
/* @__PURE__ */ jsx12(AutoFields, {}),
|
865
|
-
/* @__PURE__ */ jsx12(SubmitButton, { ...fields
|
862
|
+
/* @__PURE__ */ jsx12(SubmitButton, { ...fields?.submit })
|
866
863
|
] });
|
867
864
|
}
|
868
865
|
return /* @__PURE__ */ jsx12(
|
@@ -921,8 +918,8 @@ function createForm({
|
|
921
918
|
Form,
|
922
919
|
{
|
923
920
|
ref,
|
924
|
-
resolver: resolverProp
|
925
|
-
fieldResolver: fieldResolverProp
|
921
|
+
resolver: resolverProp ?? resolver?.(props.schema),
|
922
|
+
fieldResolver: fieldResolverProp ?? fieldResolver?.(schema),
|
926
923
|
...rest
|
927
924
|
}
|
928
925
|
) });
|