@mage-ui/components 1.0.197 → 1.0.198

package/dist/components/forms/FormBase.mjs

@@ -1,2 +1,2 @@
-"use client";import{controls as e}from"./controls/index.mjs";import{RegisteredFormChildren as t}from"./controls/register-components.mjs";import{MultiFormContext as n}from"./multi-step/MultiFormContext.mjs";import{PendingErrorsContext as r}from"./multi-step/PendingErrorsContext.mjs";import{extractFormRules as i}from"./rules/extract-form-rules.mjs";import{cx as a}from"@mage-ui/styled-system/css";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useContext as c,useEffect as l}from"react";import{FormProvider as u,useForm as d,useFormContext as f}from"react-hook-form";import*as p from"zod";import{zodResolver as m}from"@hookform/resolvers/zod";function h(){let e=c(r),t=c(n),{setError:i}=f();return l(()=>{if(!e||!t)return;let n=t.step.current,r=e.getErrorsForStep(n);if(Object.keys(r).length!==0)for(let[e,t]of Object.entries(r))i(e,{type:`server`,message:Array.isArray(t)?t.join(`, `):t})},[e,t,i,e?.version]),null}const g=({errorBox:n,onWatch:r,onSubmit:c,children:f,schema:g=p.object({}),t:_,mode:v=`onSubmit`,reValidateMode:y=`onChange`,noValidate:b,classNames:x})=>{let S=d({shouldFocusError:!0,resolver:m(g?g.and(i(f,e)):i(f,e)),mode:v,reValidateMode:y}),{register:C,handleSubmit:w,setError:T,formState:{errors:E},watch:D}=S;return l(()=>{let{unsubscribe:e}=D(e=>{r?.(e)});return()=>e()},[D,r]),s(u,{...S,t:_,children:[o(h,{}),o(n,{errors:E}),o(`form`,{noValidate:b,onSubmit:w(e=>c({data:e,setError:T})),className:a(x?.form,x?.root),children:o(t,{register:C,componentTypes:e,errors:E,t:_,children:f})})]})};export{g as FormBase};
+"use client";import{controls as e}from"./controls/index.mjs";import{RegisteredFormChildren as t}from"./controls/register-components.mjs";import{MultiFormContext as n}from"./multi-step/MultiFormContext.mjs";import{PendingErrorsContext as r}from"./multi-step/PendingErrorsContext.mjs";import{extractFormRules as i}from"./rules/extract-form-rules.mjs";import{cx as a}from"@mage-ui/styled-system/css";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useContext as c,useEffect as l}from"react";import{FormProvider as u,useForm as d,useFormContext as f}from"react-hook-form";import*as p from"zod";import{zodResolver as m}from"@hookform/resolvers/zod";function h(){let e=c(r),t=c(n),{setError:i,clearErrors:a,watch:o}=f();return l(()=>{if(!e||!t)return;let n=t.step.current,r=e.getErrorsForStep(n),s=Object.keys(r);if(s.length===0)return;for(let[e,t]of Object.entries(r))i(e,{type:`server`,message:Array.isArray(t)?t.join(`, `):t});let{unsubscribe:c}=o((e,{name:t})=>{t&&s.includes(t)&&a(t)});return()=>c()},[e,t,i,a,o,e?.version]),null}const g=({errorBox:n,onWatch:r,onSubmit:c,children:f,schema:g=p.object({}),t:_,mode:v=`onSubmit`,reValidateMode:y=`onChange`,noValidate:b,classNames:x})=>{let S=d({shouldFocusError:!0,resolver:m(g?g.and(i(f,e)):i(f,e)),mode:v,reValidateMode:y}),{register:C,handleSubmit:w,setError:T,formState:{errors:E},watch:D}=S;return l(()=>{let{unsubscribe:e}=D(e=>{r?.(e)});return()=>e()},[D,r]),s(u,{...S,t:_,children:[o(h,{}),o(n,{errors:E}),o(`form`,{noValidate:b,onSubmit:w(e=>c({data:e,setError:T})),className:a(x?.form,x?.root),children:o(t,{register:C,componentTypes:e,errors:E,t:_,children:f})})]})};export{g as FormBase};
 //# sourceMappingURL=FormBase.mjs.map

package/dist/components/forms/FormBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormBase.mjs","names":["z"],"sources":["../../../src/components/forms/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport { useContext, useEffect } from 'react';\nimport type {\n  DeepPartialSkipArrayKey,\n  FieldErrors,\n  FieldValues,\n  UseFormSetError,\n} from 'react-hook-form';\nimport { FormProvider, useForm, useFormContext } from 'react-hook-form';\nimport * as z from 'zod';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { cx } from '@mage-ui/styled-system/css';\n\nimport { controls } from './controls';\nimport { RegisteredFormChildren } from './controls/register-components';\nimport { MultiFormContext } from './multi-step/MultiFormContext';\nimport { PendingErrorsContext } from './multi-step/PendingErrorsContext';\nimport { extractFormRules } from './rules/extract-form-rules';\n\nfunction ServerErrorApplier() {\n  const pendingErrors = useContext(PendingErrorsContext);\n  const multiForm = useContext(MultiFormContext);\n  const { setError } = useFormContext();\n\n  useEffect(() => {\n    if (!pendingErrors || !multiForm) return;\n    const step = multiForm.step.current;\n    const errors = pendingErrors.getErrorsForStep(step);\n    if (Object.keys(errors).length === 0) return;\n\n    for (const [field, message] of Object.entries(errors)) {\n      const msg = Array.isArray(message) ? message.join(', ') : message;\n      setError(field, { type: 'server', message: msg });\n    }\n  }, [pendingErrors, multiForm, setError, pendingErrors?.version]);\n\n  return null;\n}\n\ntype FormProps = {\n  children: React.ReactNode;\n  schema?: z.ZodObject<Record<string, z.ZodTypeAny>>;\n  errorBox: React.ComponentType<{ errors: FieldErrors }>;\n  onWatch?: (values: DeepPartialSkipArrayKey<FieldValues>) => void;\n  onSubmit: (args: {\n    data: FieldValues;\n    setError: UseFormSetError<FieldValues>;\n  }) => void | Promise<void>;\n  t?: (\n    key: string,\n    bindings?: Record<string, string>,\n    fallback?: string,\n  ) => string | React.ReactNode;\n  mode?: 'onBlur' | 'onChange' | 'onSubmit' | 'onTouched' | 'all';\n  reValidateMode?: 'onBlur' | 'onChange' | 'onSubmit';\n  noValidate?: boolean;\n  classNames?: {\n    form?: string;\n    root?: string;\n  };\n};\n\nexport const FormBase = ({\n  errorBox: ErrorBox,\n  onWatch,\n  onSubmit,\n  children,\n  schema = z.object({}),\n  t,\n  mode = 'onSubmit',\n  reValidateMode = 'onChange',\n  noValidate,\n  classNames,\n}: FormProps) => {\n  const rules = (\n    schema\n      ? schema.and(extractFormRules(children, controls) as z.ZodTypeAny)\n      : (extractFormRules(children, controls) as z.ZodTypeAny)\n  ) as z.ZodType<FieldValues, FieldValues>;\n\n  const form = useForm({\n    shouldFocusError: true,\n    resolver: zodResolver(rules),\n    mode,\n    reValidateMode,\n  });\n\n  const {\n    register,\n    handleSubmit,\n    setError,\n    formState: { errors },\n    watch,\n  } = form;\n\n  useEffect(() => {\n    const { unsubscribe } = watch((values) => {\n      onWatch?.(values);\n    });\n    return () => unsubscribe();\n  }, [watch, onWatch]);\n\n  return (\n    <FormProvider {...form} {...({ t } as Record<string, unknown>)}>\n      <ServerErrorApplier />\n      <ErrorBox errors={errors} />\n      <form\n        noValidate={noValidate}\n        onSubmit={handleSubmit((data) => onSubmit({ data, setError }))}\n        className={cx(classNames?.form, classNames?.root)}\n      >\n        <RegisteredFormChildren\n          register={register}\n          componentTypes={controls}\n          errors={errors}\n          t={t}\n        >\n          {children}\n        </RegisteredFormChildren>\n      </form>\n    </FormProvider>\n  );\n};\n"],"mappings":"6oBAsBA,SAAS,GAAqB,CAC5B,IAAM,EAAgB,EAAW,EAAqB,CAChD,EAAY,EAAW,EAAiB,CACxC,CAAE,YAAa,GAAgB,CAcrC,OAZA,MAAgB,CACd,GAAI,CAAC,GAAiB,CAAC,EAAW,OAClC,IAAM,EAAO,EAAU,KAAK,QACtB,EAAS,EAAc,iBAAiB,EAAK,CAC/C,UAAO,KAAK,EAAO,CAAC,SAAW,EAEnC,IAAK,GAAM,CAAC,EAAO,KAAY,OAAO,QAAQ,EAAO,CAEnD,EAAS,EAAO,CAAE,KAAM,SAAU,QADtB,MAAM,QAAQ,EAAQ,CAAG,EAAQ,KAAK,KAAK,CAAG,EACV,CAAC,EAElD,CAAC,EAAe,EAAW,EAAU,GAAe,QAAQ,CAAC,CAEzD,KA0BT,MAAa,GAAY,CACvB,SAAU,EACV,UACA,WACA,WACA,SAASA,EAAE,OAAO,EAAE,CAAC,CACrB,IACA,OAAO,WACP,iBAAiB,WACjB,aACA,gBACe,CAOf,IAAM,EAAO,EAAQ,CACnB,iBAAkB,GAClB,SAAU,EAPV,EACI,EAAO,IAAI,EAAiB,EAAU,EAAS,CAAiB,CAC/D,EAAiB,EAAU,EAAS,CAKb,CAC5B,OACA,iBACD,CAAC,CAEI,CACJ,WACA,eACA,WACA,UAAW,CAAE,UACb,SACE,EASJ,OAPA,MAAgB,CACd,GAAM,CAAE,eAAgB,EAAO,GAAW,CACxC,IAAU,EAAO,EACjB,CACF,UAAa,GAAa,EACzB,CAAC,EAAO,EAAQ,CAAC,CAGlB,EAAC,EAAD,CAAc,GAAI,EAAa,aAA/B,CACE,EAAC,EAAD,EAAsB,CAAA,CACtB,EAAC,EAAD,CAAkB,SAAU,CAAA,CAC5B,EAAC,OAAD,CACc,aACZ,SAAU,EAAc,GAAS,EAAS,CAAE,OAAM,WAAU,CAAC,CAAC,CAC9D,UAAW,EAAG,GAAY,KAAM,GAAY,KAAK,UAEjD,EAAC,EAAD,CACY,WACV,eAAgB,EACR,SACL,IAEF,WACsB,CAAA,CACpB,CAAA,CACM"}
+{"version":3,"file":"FormBase.mjs","names":["z"],"sources":["../../../src/components/forms/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport { useContext, useEffect } from 'react';\nimport type {\n  DeepPartialSkipArrayKey,\n  FieldErrors,\n  FieldValues,\n  UseFormSetError,\n} from 'react-hook-form';\nimport { FormProvider, useForm, useFormContext } from 'react-hook-form';\nimport * as z from 'zod';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { cx } from '@mage-ui/styled-system/css';\n\nimport { controls } from './controls';\nimport { RegisteredFormChildren } from './controls/register-components';\nimport { MultiFormContext } from './multi-step/MultiFormContext';\nimport { PendingErrorsContext } from './multi-step/PendingErrorsContext';\nimport { extractFormRules } from './rules/extract-form-rules';\n\nfunction ServerErrorApplier() {\n  const pendingErrors = useContext(PendingErrorsContext);\n  const multiForm = useContext(MultiFormContext);\n  const { setError, clearErrors, watch } = useFormContext();\n\n  useEffect(() => {\n    if (!pendingErrors || !multiForm) return;\n    const step = multiForm.step.current;\n    const errors = pendingErrors.getErrorsForStep(step);\n    const fieldNames = Object.keys(errors);\n    if (fieldNames.length === 0) return;\n\n    for (const [field, message] of Object.entries(errors)) {\n      const msg = Array.isArray(message) ? message.join(', ') : message;\n      setError(field, { type: 'server', message: msg });\n    }\n\n    const { unsubscribe } = watch((_, { name }) => {\n      if (name && fieldNames.includes(name)) {\n        clearErrors(name);\n      }\n    });\n\n    return () => unsubscribe();\n  }, [\n    pendingErrors,\n    multiForm,\n    setError,\n    clearErrors,\n    watch,\n    pendingErrors?.version,\n  ]);\n\n  return null;\n}\n\ntype FormProps = {\n  children: React.ReactNode;\n  schema?: z.ZodObject<Record<string, z.ZodTypeAny>>;\n  errorBox: React.ComponentType<{ errors: FieldErrors }>;\n  onWatch?: (values: DeepPartialSkipArrayKey<FieldValues>) => void;\n  onSubmit: (args: {\n    data: FieldValues;\n    setError: UseFormSetError<FieldValues>;\n  }) => void | Promise<void>;\n  t?: (\n    key: string,\n    bindings?: Record<string, string>,\n    fallback?: string,\n  ) => string | React.ReactNode;\n  mode?: 'onBlur' | 'onChange' | 'onSubmit' | 'onTouched' | 'all';\n  reValidateMode?: 'onBlur' | 'onChange' | 'onSubmit';\n  noValidate?: boolean;\n  classNames?: {\n    form?: string;\n    root?: string;\n  };\n};\n\nexport const FormBase = ({\n  errorBox: ErrorBox,\n  onWatch,\n  onSubmit,\n  children,\n  schema = z.object({}),\n  t,\n  mode = 'onSubmit',\n  reValidateMode = 'onChange',\n  noValidate,\n  classNames,\n}: FormProps) => {\n  const rules = (\n    schema\n      ? schema.and(extractFormRules(children, controls) as z.ZodTypeAny)\n      : (extractFormRules(children, controls) as z.ZodTypeAny)\n  ) as z.ZodType<FieldValues, FieldValues>;\n\n  const form = useForm({\n    shouldFocusError: true,\n    resolver: zodResolver(rules),\n    mode,\n    reValidateMode,\n  });\n\n  const {\n    register,\n    handleSubmit,\n    setError,\n    formState: { errors },\n    watch,\n  } = form;\n\n  useEffect(() => {\n    const { unsubscribe } = watch((values) => {\n      onWatch?.(values);\n    });\n    return () => unsubscribe();\n  }, [watch, onWatch]);\n\n  return (\n    <FormProvider {...form} {...({ t } as Record<string, unknown>)}>\n      <ServerErrorApplier />\n      <ErrorBox errors={errors} />\n      <form\n        noValidate={noValidate}\n        onSubmit={handleSubmit((data) => onSubmit({ data, setError }))}\n        className={cx(classNames?.form, classNames?.root)}\n      >\n        <RegisteredFormChildren\n          register={register}\n          componentTypes={controls}\n          errors={errors}\n          t={t}\n        >\n          {children}\n        </RegisteredFormChildren>\n      </form>\n    </FormProvider>\n  );\n};\n"],"mappings":"6oBAsBA,SAAS,GAAqB,CAC5B,IAAM,EAAgB,EAAW,EAAqB,CAChD,EAAY,EAAW,EAAiB,CACxC,CAAE,WAAU,cAAa,SAAU,GAAgB,CA8BzD,OA5BA,MAAgB,CACd,GAAI,CAAC,GAAiB,CAAC,EAAW,OAClC,IAAM,EAAO,EAAU,KAAK,QACtB,EAAS,EAAc,iBAAiB,EAAK,CAC7C,EAAa,OAAO,KAAK,EAAO,CACtC,GAAI,EAAW,SAAW,EAAG,OAE7B,IAAK,GAAM,CAAC,EAAO,KAAY,OAAO,QAAQ,EAAO,CAEnD,EAAS,EAAO,CAAE,KAAM,SAAU,QADtB,MAAM,QAAQ,EAAQ,CAAG,EAAQ,KAAK,KAAK,CAAG,EACV,CAAC,CAGnD,GAAM,CAAE,eAAgB,GAAO,EAAG,CAAE,UAAW,CACzC,GAAQ,EAAW,SAAS,EAAK,EACnC,EAAY,EAAK,EAEnB,CAEF,UAAa,GAAa,EACzB,CACD,EACA,EACA,EACA,EACA,EACA,GAAe,QAChB,CAAC,CAEK,KA0BT,MAAa,GAAY,CACvB,SAAU,EACV,UACA,WACA,WACA,SAASA,EAAE,OAAO,EAAE,CAAC,CACrB,IACA,OAAO,WACP,iBAAiB,WACjB,aACA,gBACe,CAOf,IAAM,EAAO,EAAQ,CACnB,iBAAkB,GAClB,SAAU,EAPV,EACI,EAAO,IAAI,EAAiB,EAAU,EAAS,CAAiB,CAC/D,EAAiB,EAAU,EAAS,CAKb,CAC5B,OACA,iBACD,CAAC,CAEI,CACJ,WACA,eACA,WACA,UAAW,CAAE,UACb,SACE,EASJ,OAPA,MAAgB,CACd,GAAM,CAAE,eAAgB,EAAO,GAAW,CACxC,IAAU,EAAO,EACjB,CACF,UAAa,GAAa,EACzB,CAAC,EAAO,EAAQ,CAAC,CAGlB,EAAC,EAAD,CAAc,GAAI,EAAa,aAA/B,CACE,EAAC,EAAD,EAAsB,CAAA,CACtB,EAAC,EAAD,CAAkB,SAAU,CAAA,CAC5B,EAAC,OAAD,CACc,aACZ,SAAU,EAAc,GAAS,EAAS,CAAE,OAAM,WAAU,CAAC,CAAC,CAC9D,UAAW,EAAG,GAAY,KAAM,GAAY,KAAK,UAEjD,EAAC,EAAD,CACY,WACV,eAAgB,EACR,SACL,IAEF,WACsB,CAAA,CACpB,CAAA,CACM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.197",
+  "version": "1.0.198",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.21.4",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "1.0.197",
+    "@mage-ui/preset": "1.0.198",
     "@mage-ui/styled-system": "1.0.8"
   },
   "peerDependencies": {