@saas-ui/forms 2.4.1 → 2.5.1

package/dist/index.mjs

@@ -477,6 +477,7 @@ NativeSelect.displayName = "NativeSelect";
 import { Controller } from "react-hook-form";
 import { forwardRef as forwardRef7, useMergeRefs } from "@chakra-ui/react";
 import { callAllHandlers } from "@chakra-ui/utils";
+import { splitProps as splitProps2 } from "@saas-ui/core/utils";
 
 // src/base-field.tsx
 import { get } from "react-hook-form";
@@ -487,18 +488,39 @@ import {
   FormHelperText,
   FormErrorMessage
 } from "@chakra-ui/react";
+import { splitProps } from "@saas-ui/core";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var getError = (name, formState) => {
   return get(formState.errors, name);
 };
-var BaseField = (props) => {
-  const { name, label, help, hideLabel, children, ...controlProps } = props;
+var isTouched = (name, formState) => {
+  return get(formState.touchedFields, name);
+};
+var useBaseField = (props) => {
+  const [fieldProps] = splitProps(props, ["name", "label", "help", "hideLabel"]);
+  const [controlProps] = splitProps(props, [
+    "id",
+    "isDisabled",
+    "isInvalid",
+    "isReadOnly",
+    "isRequired"
+  ]);
   const { formState } = useFormContext();
-  const error = getError(name, formState);
+  const error = getError(fieldProps.name, formState);
+  const touched = isTouched(fieldProps.name, formState);
+  return {
+    ...fieldProps,
+    controlProps,
+    error,
+    touched
+  };
+};
+var BaseField = (props) => {
+  const { controlProps, label, help, hideLabel, error } = useBaseField(props);
   return /* @__PURE__ */ jsxs5(FormControl2, { ...controlProps, isInvalid: !!error, children: [
     label && !hideLabel ? /* @__PURE__ */ jsx9(FormLabel2, { children: label }) : null,
     /* @__PURE__ */ jsxs5(Box, { children: [
-      children,
+      props.children,
       help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx9(FormHelperText, { children: help }) : null,
       (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx9(FormErrorMessage, { children: error == null ? void 0 : error.message })
     ] })
@@ -508,49 +530,41 @@ BaseField.displayName = "BaseField";
 
 // src/create-field.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
+var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field2 = forwardRef7((props, ref) => {
-    const {
-      id,
-      name,
-      label,
-      help,
-      isDisabled,
-      isInvalid,
-      isReadOnly,
-      isRequired,
-      rules,
-      ...inputProps
-    } = props;
+    var _a;
+    const { id, name, label, isRequired, rules } = props;
     const inputRules = {
       required: isRequired,
       ...rules
     };
-    return /* @__PURE__ */ jsx10(
-      BaseField2,
+    const fieldContext = useFieldsContext();
+    const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
+    const { extraProps, BaseField: BaseField2 } = getBaseField();
+    const [, inputProps] = splitProps2(
+      props,
+      [
+        "children",
+        "name",
+        "label",
+        "isRequired",
+        "isDisabled",
+        "isInvalid",
+        "isReadOnly",
+        "help"
+      ].concat(extraProps)
+    );
+    return /* @__PURE__ */ jsx10(BaseField2, { ...props, children: /* @__PURE__ */ jsx10(
+      InputComponent,
       {
+        ref,
         id,
         name,
-        label,
-        help,
-        hideLabel,
-        isDisabled,
-        isInvalid,
-        isReadOnly,
-        isRequired,
-        children: /* @__PURE__ */ jsx10(
-          InputComponent,
-          {
-            ref,
-            id,
-            name,
-            label: hideLabel ? label : void 0,
-            rules: inputRules,
-            ...inputProps
-          }
-        )
+        label: hideLabel ? label : void 0,
+        ...inputProps,
+        rules: inputRules
       }
-    );
+    ) });
   });
   Field2.displayName = displayName;
   return Field2;
@@ -611,7 +625,10 @@ var createField = (component, options) => {
   const Field2 = _createField(InputComponent, {
     displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
     hideLabel: options == null ? void 0 : options.hideLabel,
-    BaseField: (options == null ? void 0 : options.BaseField) || BaseField
+    getBaseField: () => ({
+      extraProps: [],
+      BaseField
+    })
   });
   return Field2;
 };
@@ -709,16 +726,24 @@ var defaultFieldTypes = {
 
 // src/fields-context.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var FieldsContext = React5.createContext(
-  null
-);
+var FieldsContext = React5.createContext(null);
 var FieldsProvider = (props) => {
-  const fields = { ...defaultFieldTypes, ...props.value };
-  return /* @__PURE__ */ jsx12(FieldsContext.Provider, { value: fields, children: props.children });
+  const fields = { ...defaultFieldTypes, ...props.value.fields };
+  return /* @__PURE__ */ jsx12(
+    FieldsContext.Provider,
+    {
+      value: { fields, getBaseField: props.value.getBaseField },
+      children: props.children
+    }
+  );
+};
+var useFieldsContext = () => {
+  return React5.useContext(FieldsContext);
 };
 var useField = (type) => {
+  var _a;
   const context = React5.useContext(FieldsContext);
-  return (context == null ? void 0 : context[type]) || InputField;
+  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[type]) || InputField;
 };
 
 // src/field.tsx
@@ -804,6 +829,7 @@ var useArrayField = ({
     name,
     keyName
   });
+  console.log(context);
   return {
     ...context,
     name,
@@ -1365,6 +1391,9 @@ var WatchField = (props) => {
   return props.children(field, form) || null;
 };
 
+// src/create-form.tsx
+import { forwardRef as forwardRef14 } from "@chakra-ui/react";
+
 // src/form.tsx
 import * as React13 from "react";
 import { chakra as chakra5, forwardRef as forwardRef13 } from "@chakra-ui/react";
@@ -1459,12 +1488,12 @@ var Form = forwardRef13(
 Form.displayName = "Form";
 
 // src/create-form.tsx
-import { forwardRef as forwardRef14 } from "@chakra-ui/react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 function createForm({
   resolver,
   fieldResolver = objectFieldResolver,
-  fields
+  fields,
+  getBaseField
 } = {}) {
   const DefaultForm = forwardRef14(
     (props, ref) => {
@@ -1474,7 +1503,7 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      return /* @__PURE__ */ jsx21(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx21(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ jsx21(
         Form,
         {
           ref,
@@ -1496,7 +1525,12 @@ import { forwardRef as forwardRef15 } from "@chakra-ui/react";
 import { StepperProvider } from "@saas-ui/core";
 import { runIfFn as runIfFn2 } from "@chakra-ui/utils";
 import { jsx as jsx22 } from "react/jsx-runtime";
-function createStepForm({ fields, resolver, fieldResolver } = {}) {
+function createStepForm({
+  fields,
+  resolver,
+  fieldResolver,
+  getBaseField
+} = {}) {
   const StepForm2 = forwardRef15((props, ref) => {
     const { children, steps, ...rest } = props;
     const stepper = useStepForm({
@@ -1506,7 +1540,7 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
     });
     const { getFormProps, ...ctx } = stepper;
     const context = useMemo2(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsx22(StepperProvider, { value: context, children: /* @__PURE__ */ jsx22(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx22(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx22(Form, { ref, ...rest, ...getFormProps(), children: runIfFn2(children, {
+    return /* @__PURE__ */ jsx22(StepperProvider, { value: context, children: /* @__PURE__ */ jsx22(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx22(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ jsx22(Form, { ref, ...rest, ...getFormProps(), children: runIfFn2(children, {
       ...stepper,
       Field,
       FormStep,
@@ -1594,6 +1628,7 @@ export {
   useArrayFieldRemoveButton,
   useArrayFieldRow,
   useArrayFieldRowContext,
+  useBaseField,
   useController,
   useField,
   useFieldArray2 as useFieldArray,