@saas-ui/forms 2.4.0 → 2.5.0

package/dist/index.js

@@ -93,6 +93,7 @@ __export(src_exports, {
   useArrayFieldRemoveButton: () => useArrayFieldRemoveButton,
   useArrayFieldRow: () => useArrayFieldRow,
   useArrayFieldRowContext: () => useArrayFieldRowContext,
+  useBaseField: () => useBaseField,
   useController: () => import_react_hook_form9.useController,
   useField: () => useField,
   useFieldArray: () => import_react_hook_form9.useFieldArray,
@@ -530,22 +531,44 @@ NativeSelect.displayName = "NativeSelect";
 var import_react_hook_form3 = require("react-hook-form");
 var import_react12 = require("@chakra-ui/react");
 var import_utils4 = require("@chakra-ui/utils");
+var import_utils5 = require("@saas-ui/core/utils");
 
 // src/base-field.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_react11 = require("@chakra-ui/react");
+var import_core3 = require("@saas-ui/core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var getError = (name, formState) => {
   return (0, import_react_hook_form2.get)(formState.errors, name);
 };
-var BaseField = (props) => {
-  const { name, label, help, hideLabel, children, ...controlProps } = props;
+var isTouched = (name, formState) => {
+  return (0, import_react_hook_form2.get)(formState.touchedFields, name);
+};
+var useBaseField = (props) => {
+  const [fieldProps] = (0, import_core3.splitProps)(props, ["name", "label", "help", "hideLabel"]);
+  const [controlProps] = (0, import_core3.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__ */ (0, import_jsx_runtime9.jsxs)(import_react11.FormControl, { ...controlProps, isInvalid: !!error, children: [
     label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormLabel, { children: label }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react11.Box, { children: [
-      children,
+      props.children,
       help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormHelperText, { children: help }) : null,
       (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormErrorMessage, { children: error == null ? void 0 : error.message })
     ] })
@@ -555,49 +578,41 @@ BaseField.displayName = "BaseField";
 
 // src/create-field.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
+var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field2 = (0, import_react12.forwardRef)((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__ */ (0, import_jsx_runtime10.jsx)(
-      BaseField2,
+    const fieldContext = useFieldsContext();
+    const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
+    const { extraProps, BaseField: BaseField2 } = getBaseField();
+    const [, inputProps] = (0, import_utils5.splitProps)(
+      props,
+      [
+        "children",
+        "name",
+        "label",
+        "isRequired",
+        "isDisabled",
+        "isInvalid",
+        "isReadOnly",
+        "help"
+      ].concat(extraProps)
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BaseField2, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      InputComponent,
       {
+        ref,
         id,
         name,
-        label,
-        help,
-        hideLabel,
-        isDisabled,
-        isInvalid,
-        isReadOnly,
-        isRequired,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          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;
@@ -658,7 +673,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;
 };
@@ -756,16 +774,24 @@ var defaultFieldTypes = {
 
 // src/fields-context.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var FieldsContext = import_react14.default.createContext(
-  null
-);
+var FieldsContext = import_react14.default.createContext(null);
 var FieldsProvider = (props) => {
-  const fields = { ...defaultFieldTypes, ...props.value };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldsContext.Provider, { value: fields, children: props.children });
+  const fields = { ...defaultFieldTypes, ...props.value.fields };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    FieldsContext.Provider,
+    {
+      value: { fields, getBaseField: props.value.getBaseField },
+      children: props.children
+    }
+  );
+};
+var useFieldsContext = () => {
+  return import_react14.default.useContext(FieldsContext);
 };
 var useField = (type) => {
+  var _a;
   const context = import_react14.default.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
@@ -785,7 +811,7 @@ var React9 = __toESM(require("react"));
 
 // src/layout.tsx
 var import_react15 = require("@chakra-ui/react");
-var import_utils5 = require("@chakra-ui/utils");
+var import_utils6 = require("@chakra-ui/utils");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormLayoutItem = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.chakra.div, { children });
@@ -805,7 +831,7 @@ var FormLayout = ({ children, ...props }) => {
     import_react15.SimpleGrid,
     {
       ...gridProps,
-      className: (0, import_utils5.cx)("sui-form__layout", props.className),
+      className: (0, import_utils6.cx)("sui-form__layout", props.className),
       children
     }
   );
@@ -840,6 +866,7 @@ var useArrayField = ({
     name,
     keyName
   });
+  console.log(context);
   return {
     ...context,
     name,
@@ -886,7 +913,7 @@ var useArrayFieldAddButton = () => {
 };
 
 // src/array-field.tsx
-var import_utils7 = require("@chakra-ui/utils");
+var import_utils8 = require("@chakra-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var ArrayFieldRow = ({
   children,
@@ -943,7 +970,7 @@ ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
 var ArrayField = (0, import_react16.forwardRef)(
   (props, ref) => {
     const { children, ...containerProps } = props;
-    const rowFn = (0, import_utils7.isFunction)(children) ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRow, { index, children }, id)) || null });
+    const rowFn = (0, import_utils8.isFunction)(children) ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRow, { index, children }, id)) || null });
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ArrayFieldContainer, { ref, ...containerProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRows, { children: rowFn }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldAddButton, {})
@@ -1161,13 +1188,13 @@ DisplayIf.displayName = "DisplayIf";
 // src/step-form.tsx
 var React12 = __toESM(require("react"));
 var import_react19 = require("@chakra-ui/react");
-var import_utils9 = require("@chakra-ui/utils");
-var import_core4 = require("@saas-ui/core");
+var import_utils10 = require("@chakra-ui/utils");
+var import_core5 = require("@saas-ui/core");
 
 // src/use-step-form.tsx
 var React11 = __toESM(require("react"));
 var import_react_utils3 = require("@chakra-ui/react-utils");
-var import_core3 = require("@saas-ui/core");
+var import_core4 = require("@saas-ui/core");
 var [StepFormProvider, useStepFormContext] = (0, import_react_utils3.createContext)({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
@@ -1180,7 +1207,7 @@ function useStepForm(props) {
     fieldResolver,
     ...rest
   } = props;
-  const stepper = (0, import_core3.useStepper)(rest);
+  const stepper = (0, import_core4.useStepper)(rest);
   const [options, setOptions] = React11.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
   const [steps, updateSteps] = React11.useState({});
@@ -1246,7 +1273,7 @@ function useStepForm(props) {
 }
 function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
-  const step = (0, import_core3.useStep)({ name });
+  const step = (0, import_core4.useStep)({ name });
   const { steps, updateStep } = useStepFormContext();
   React11.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
@@ -1260,7 +1287,7 @@ function useFormStep(props) {
 // src/step-form.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var FormStepper = (props) => {
-  const { activeIndex, setIndex } = (0, import_core4.useStepperContext)();
+  const { activeIndex, setIndex } = (0, import_core5.useStepperContext)();
   const {
     children,
     orientation,
@@ -1275,7 +1302,7 @@ var FormStepper = (props) => {
     if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_core4.StepsItem,
+        import_core5.StepsItem,
         {
           render,
           name: child.props.name,
@@ -1293,7 +1320,7 @@ var FormStepper = (props) => {
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_core4.Steps,
+    import_core5.Steps,
     {
       orientation,
       step: activeIndex,
@@ -1309,32 +1336,32 @@ var FormStep = (props) => {
   const { name, children, className, onSubmit, ...rest } = props;
   const step = useFormStep({ name, onSubmit });
   const { isActive } = step;
-  return isActive ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.chakra.div, { ...rest, className: (0, import_utils9.cx)("sui-form__step", className), children }) : null;
+  return isActive ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.chakra.div, { ...rest, className: (0, import_utils10.cx)("sui-form__step", className), children }) : null;
 };
 FormStep.displayName = "FormStep";
 var PrevButton = (props) => {
-  const { isFirstStep, isCompleted, prevStep } = (0, import_core4.useStepperContext)();
+  const { isFirstStep, isCompleted, prevStep } = (0, import_core5.useStepperContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_react19.Button,
     {
       isDisabled: isFirstStep || isCompleted,
       children: "Back",
       ...props,
-      className: (0, import_utils9.cx)("sui-form__prev-button", props.className),
-      onClick: (0, import_utils9.callAllHandlers)(props.onClick, prevStep)
+      className: (0, import_utils10.cx)("sui-form__prev-button", props.className),
+      onClick: (0, import_utils10.callAllHandlers)(props.onClick, prevStep)
     }
   );
 };
 PrevButton.displayName = "PrevButton";
 var NextButton = (props) => {
   const { label = "Next", submitLabel = "Complete", ...rest } = props;
-  const { isLastStep, isCompleted } = (0, import_core4.useStepperContext)();
+  const { isLastStep, isCompleted } = (0, import_core5.useStepperContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SubmitButton,
     {
       ...rest,
       isDisabled: isCompleted,
-      className: (0, import_utils9.cx)("sui-form__next-button", props.className),
+      className: (0, import_utils10.cx)("sui-form__next-button", props.className),
       children: isLastStep || isCompleted ? submitLabel : label
     }
   );
@@ -1342,7 +1369,7 @@ var NextButton = (props) => {
 NextButton.displayName = "NextButton";
 
 // src/field-resolver.ts
-var import_utils10 = require("@chakra-ui/utils");
+var import_utils11 = require("@chakra-ui/utils");
 var mapFields = (schema) => schema && Object.entries(schema).map(([name, props]) => {
   const { items, label, title, ...field } = props;
   return {
@@ -1358,7 +1385,7 @@ var objectFieldResolver = (schema) => {
   };
   const getNestedFields = (name) => {
     var _a;
-    const field = (0, import_utils10.get)(schema, name);
+    const field = (0, import_utils11.get)(schema, name);
     if (!field)
       return [];
     if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
@@ -1385,10 +1412,13 @@ var WatchField = (props) => {
   return props.children(field, form) || null;
 };
 
+// src/create-form.tsx
+var import_react21 = require("@chakra-ui/react");
+
 // src/form.tsx
 var React13 = __toESM(require("react"));
 var import_react20 = require("@chakra-ui/react");
-var import_utils11 = require("@chakra-ui/utils");
+var import_utils12 = require("@chakra-ui/utils");
 var import_react_hook_form8 = require("react-hook-form");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Form = (0, import_react20.forwardRef)(
@@ -1460,8 +1490,8 @@ var Form = (0, import_react20.forwardRef)(
             ref,
             onSubmit: handleSubmit(onSubmit, onError),
             ...rest,
-            className: (0, import_utils11.cx)("sui-form", props.className),
-            children: (0, import_utils11.runIfFn)(_children, {
+            className: (0, import_utils12.cx)("sui-form", props.className),
+            children: (0, import_utils12.runIfFn)(_children, {
               Field,
               DisplayIf,
               ArrayField,
@@ -1477,12 +1507,12 @@ var Form = (0, import_react20.forwardRef)(
 Form.displayName = "Form";
 
 // src/create-form.tsx
-var import_react21 = require("@chakra-ui/react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function createForm({
   resolver,
   fieldResolver = objectFieldResolver,
-  fields
+  fields,
+  getBaseField
 } = {}) {
   const DefaultForm = (0, import_react21.forwardRef)(
     (props, ref) => {
@@ -1492,7 +1522,7 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Form,
         {
           ref,
@@ -1511,10 +1541,15 @@ function createForm({
 // src/create-step-form.tsx
 var import_react22 = require("react");
 var import_react23 = require("@chakra-ui/react");
-var import_core5 = require("@saas-ui/core");
-var import_utils12 = require("@chakra-ui/utils");
+var import_core6 = require("@saas-ui/core");
+var import_utils13 = require("@chakra-ui/utils");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function createStepForm({ fields, resolver, fieldResolver } = {}) {
+function createStepForm({
+  fields,
+  resolver,
+  fieldResolver,
+  getBaseField
+} = {}) {
   const StepForm2 = (0, import_react23.forwardRef)((props, ref) => {
     const { children, steps, ...rest } = props;
     const stepper = useStepForm({
@@ -1524,7 +1559,7 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
     });
     const { getFormProps, ...ctx } = stepper;
     const context = (0, import_react22.useMemo)(() => ctx, [ctx]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core5.StepperProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepFormProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Form, { ref, ...rest, ...getFormProps(), children: (0, import_utils12.runIfFn)(children, {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core6.StepperProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepFormProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Form, { ref, ...rest, ...getFormProps(), children: (0, import_utils13.runIfFn)(children, {
       ...stepper,
       Field,
       FormStep,
@@ -1605,6 +1640,7 @@ var StepForm = createStepForm();
   useArrayFieldRemoveButton,
   useArrayFieldRow,
   useArrayFieldRowContext,
+  useBaseField,
   useController,
   useField,
   useFieldArray,