@saas-ui/forms 3.0.0-next.2 → 3.0.0-next.3
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 +8 -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/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
@@ -122,10 +122,9 @@ var useFormContext = () => {
|
|
122
122
|
};
|
123
123
|
};
|
124
124
|
var useFieldProps = (name) => {
|
125
|
-
|
126
|
-
const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
|
125
|
+
const parsedName = name?.replace(/\.[0-9]/g, ".$");
|
127
126
|
const context = useFormContext();
|
128
|
-
return
|
127
|
+
return context?.fields?.[parsedName] || {};
|
129
128
|
};
|
130
129
|
var FormProvider = (props) => {
|
131
130
|
const { children, fieldResolver, schema, fields, ...rest } = props;
|
@@ -171,8 +170,8 @@ var BaseField = (props) => {
|
|
171
170
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.RequiredIndicator, {})
|
172
171
|
] }) : null,
|
173
172
|
props.children,
|
174
|
-
help && !
|
175
|
-
|
173
|
+
help && !error?.message ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.HelperText, { children: help }) : null,
|
174
|
+
error?.message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.ErrorText, { children: error?.message })
|
176
175
|
] });
|
177
176
|
};
|
178
177
|
BaseField.displayName = "BaseField";
|
@@ -188,23 +187,21 @@ var useFieldsContext = () => {
|
|
188
187
|
return import_react2.default.useContext(FieldsContext);
|
189
188
|
};
|
190
189
|
var useField = (type, fallback) => {
|
191
|
-
var _a;
|
192
190
|
const context = import_react2.default.useContext(FieldsContext);
|
193
|
-
return
|
191
|
+
return context?.fields?.[type] || fallback;
|
194
192
|
};
|
195
193
|
|
196
194
|
// src/create-field.tsx
|
197
195
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
198
196
|
var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
|
199
197
|
const Field3 = (0, import_react3.forwardRef)((props, ref) => {
|
200
|
-
var _a;
|
201
198
|
const { id, label, required, rules } = props;
|
202
199
|
const inputRules = {
|
203
200
|
required,
|
204
201
|
...rules
|
205
202
|
};
|
206
203
|
const fieldContext = useFieldsContext();
|
207
|
-
const getBaseField =
|
204
|
+
const getBaseField = fieldContext?.getBaseField ?? getBaseFieldProp;
|
208
205
|
const { props: extraProps, Component } = import_react3.default.useMemo(
|
209
206
|
() => getBaseField(),
|
210
207
|
[getBaseField]
|
@@ -280,16 +277,15 @@ var withUncontrolledInput = (InputComponent) => {
|
|
280
277
|
);
|
281
278
|
};
|
282
279
|
var createField = (component, options) => {
|
283
|
-
var _a;
|
284
280
|
let InputComponent;
|
285
|
-
if (options
|
281
|
+
if (options?.isControlled) {
|
286
282
|
InputComponent = withControlledInput((0, import_react3.forwardRef)(component));
|
287
283
|
} else {
|
288
284
|
InputComponent = withUncontrolledInput((0, import_react3.forwardRef)(component));
|
289
285
|
}
|
290
286
|
const Field3 = _createField(InputComponent, {
|
291
|
-
displayName: `${
|
292
|
-
hideLabel: options
|
287
|
+
displayName: `${component.displayName ?? "Custom"}Field`,
|
288
|
+
hideLabel: options?.hideLabel,
|
293
289
|
getBaseField: () => ({
|
294
290
|
props: [],
|
295
291
|
Component: BaseField
|
@@ -345,7 +341,7 @@ var SelectField = createField(
|
|
345
341
|
}),
|
346
342
|
[options]
|
347
343
|
);
|
348
|
-
const value = multiple ? [...valueProp
|
344
|
+
const value = multiple ? [...valueProp ?? []] : valueProp ? [valueProp] : [];
|
349
345
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
350
346
|
import_select.Select.Root,
|
351
347
|
{
|
@@ -384,7 +380,7 @@ var RadioField = createField(
|
|
384
380
|
{
|
385
381
|
ref,
|
386
382
|
onValueChange: ({ value }) => {
|
387
|
-
onChange
|
383
|
+
onChange?.(value);
|
388
384
|
},
|
389
385
|
...rest,
|
390
386
|
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Stack, { flexDirection, gap, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radio.Radio, { value: option.value, children: option.label || option.value }, option.value)) })
|
@@ -398,7 +394,7 @@ var RadioField = createField(
|
|
398
394
|
var PinField = createField(
|
399
395
|
(props, ref) => {
|
400
396
|
const { pinType, value: valueProp, onChange, ...inputProps } = props;
|
401
|
-
const value =
|
397
|
+
const value = valueProp?.split("") || [];
|
402
398
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
403
399
|
import_pin_input.PinInput,
|
404
400
|
{
|
@@ -448,10 +444,9 @@ var objectFieldResolver = (schema) => {
|
|
448
444
|
return mapFields(schema);
|
449
445
|
};
|
450
446
|
const getNestedFields = (name) => {
|
451
|
-
var _a;
|
452
447
|
const field = (0, import_utils3.get)(schema, name);
|
453
448
|
if (!field) return [];
|
454
|
-
if (
|
449
|
+
if (field.items?.type === "object") {
|
455
450
|
return mapFields(field.items.properties);
|
456
451
|
} else if (field.type === "object") {
|
457
452
|
return mapFields(field.properties);
|
@@ -576,15 +571,19 @@ var useArrayFieldAddButton = () => {
|
|
576
571
|
var React6 = __toESM(require("react"));
|
577
572
|
var mapNestedFields = (name, children) => {
|
578
573
|
return React6.Children.map(children, (child) => {
|
579
|
-
if (React6.isValidElement(child)
|
580
|
-
|
574
|
+
if (React6.isValidElement(child)) {
|
575
|
+
const props = child.props;
|
576
|
+
if (!props.name) {
|
577
|
+
return child;
|
578
|
+
}
|
579
|
+
let childName = props.name;
|
581
580
|
if (childName.includes(".")) {
|
582
581
|
childName = childName.replace(/^.*\.(.*)/, "$1");
|
583
582
|
} else if (childName.includes(".$")) {
|
584
583
|
childName = childName.replace(/^.*\.\$(.*)/, "$1");
|
585
584
|
}
|
586
585
|
return React6.cloneElement(child, {
|
587
|
-
...
|
586
|
+
...props,
|
588
587
|
name: `${name}.${childName}`
|
589
588
|
});
|
590
589
|
}
|
@@ -679,8 +678,8 @@ var ArrayFieldContainer = import_react8.default.forwardRef(
|
|
679
678
|
name,
|
680
679
|
defaultValue,
|
681
680
|
keyName,
|
682
|
-
min: min ||
|
683
|
-
max: max ||
|
681
|
+
min: min || overrides?.min,
|
682
|
+
max: max || overrides?.max
|
684
683
|
});
|
685
684
|
import_react8.default.useImperativeHandle(ref, () => context, [ref, context]);
|
686
685
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BaseField, { name, ...fieldProps, ...overrides, children }) });
|
@@ -717,7 +716,7 @@ var DisplayIf = ({
|
|
717
716
|
}
|
718
717
|
if (matchesRef.current === matches) return;
|
719
718
|
matchesRef.current = matches;
|
720
|
-
onToggle
|
719
|
+
onToggle?.(matches, context);
|
721
720
|
}, [value]);
|
722
721
|
return matches ? children : null;
|
723
722
|
};
|
@@ -731,7 +730,7 @@ var Field2 = React9.forwardRef(
|
|
731
730
|
(props, ref) => {
|
732
731
|
const { type = defaultInputType, name } = props;
|
733
732
|
const overrides = useFieldProps(name);
|
734
|
-
const InputComponent = useField(
|
733
|
+
const InputComponent = useField(overrides?.type || type, InputField);
|
735
734
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InputComponent, { ref, ...props, ...overrides });
|
736
735
|
}
|
737
736
|
);
|
@@ -768,8 +767,7 @@ ObjectField.displayName = "ObjectField";
|
|
768
767
|
// src/fields.tsx
|
769
768
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
770
769
|
var mapNestedFields2 = (resolver, name) => {
|
771
|
-
|
772
|
-
return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
|
770
|
+
return resolver.getNestedFields(name)?.map(
|
773
771
|
({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
774
772
|
Field2,
|
775
773
|
{
|
@@ -791,18 +789,17 @@ var AutoFields = ({
|
|
791
789
|
const schema = schemaProp || context.schema;
|
792
790
|
const fieldResolver = fieldResolverProp || context.fieldResolver;
|
793
791
|
const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
|
794
|
-
const fields = React10.useMemo(() => resolver
|
792
|
+
const fields = React10.useMemo(() => resolver?.getFields(), [resolver]);
|
795
793
|
const form = useFormContext();
|
796
794
|
React10.useEffect(() => {
|
797
|
-
|
798
|
-
if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
|
795
|
+
if (focusFirstField && fields?.[0]?.name) {
|
799
796
|
form.setFocus(fields[0].name);
|
800
797
|
}
|
801
798
|
}, [schema, fieldResolver, focusFirstField]);
|
802
799
|
if (!resolver) {
|
803
800
|
return null;
|
804
801
|
}
|
805
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormLayout, { ...props, children: fields
|
802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormLayout, { ...props, children: fields?.map(
|
806
803
|
({ name, type, ...fieldProps }) => {
|
807
804
|
if (type === "array") {
|
808
805
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
|
@@ -847,8 +844,8 @@ var SubmitButton = (0, import_react11.forwardRef)(
|
|
847
844
|
disableIfInvalid: disableIfInvalidOverride,
|
848
845
|
...fieldProps
|
849
846
|
} = field;
|
850
|
-
const disableIfUntouched = disableIfUntouchedOverride
|
851
|
-
const disableIfInvalid = disableIfInvalidOverride
|
847
|
+
const disableIfUntouched = disableIfUntouchedOverride ?? disableIfUntouchedProp;
|
848
|
+
const disableIfInvalid = disableIfInvalidOverride ?? disableIfInvalidProp;
|
852
849
|
const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || disabledProp;
|
853
850
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
854
851
|
import_button.Button,
|
@@ -917,13 +914,13 @@ var Form = (0, import_react12.forwardRef)(
|
|
917
914
|
if (onChange) {
|
918
915
|
subscription = methods.watch(onChange);
|
919
916
|
}
|
920
|
-
return () => subscription
|
917
|
+
return () => subscription?.unsubscribe();
|
921
918
|
}, [methods, onChange]);
|
922
919
|
let _children = children;
|
923
920
|
if (!_children && fieldResolver) {
|
924
921
|
_children = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(FormLayout, { children: [
|
925
922
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AutoFields, {}),
|
926
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SubmitButton, { ...fields
|
923
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SubmitButton, { ...fields?.submit })
|
927
924
|
] });
|
928
925
|
}
|
929
926
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
@@ -982,8 +979,8 @@ function createForm({
|
|
982
979
|
Form,
|
983
980
|
{
|
984
981
|
ref,
|
985
|
-
resolver: resolverProp
|
986
|
-
fieldResolver: fieldResolverProp
|
982
|
+
resolver: resolverProp ?? resolver?.(props.schema),
|
983
|
+
fieldResolver: fieldResolverProp ?? fieldResolver?.(schema),
|
987
984
|
...rest
|
988
985
|
}
|
989
986
|
) });
|