@mage-ui/components 1.0.196 → 1.0.197
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/dist/components/forms/FormBase.mjs +1 -1
- package/dist/components/forms/FormBase.mjs.map +1 -1
- package/dist/components/forms/multi-step/PendingErrorsContext.d.mts +1 -1
- package/dist/components/forms/multi-step/PendingErrorsContext.d.mts.map +1 -1
- package/dist/components/forms/multi-step/PendingErrorsContext.mjs +1 -1
- package/dist/components/forms/multi-step/PendingErrorsContext.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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=
|
|
1
|
+
"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};
|
|
2
2
|
//# sourceMappingURL=FormBase.mjs.map
|
|
@@ -1 +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 errors = pendingErrors.
|
|
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"}
|
|
@@ -6,7 +6,7 @@ import { ReactNode } from "react";
|
|
|
6
6
|
type FieldErrors = Record<string, string | string[]>;
|
|
7
7
|
type PendingErrorsContextValue = {
|
|
8
8
|
routeServerErrors: (issues: FieldErrors, goTo?: (step: number) => void) => number | null;
|
|
9
|
-
|
|
9
|
+
getErrorsForStep: (step: number) => FieldErrors;
|
|
10
10
|
version: number;
|
|
11
11
|
};
|
|
12
12
|
declare const PendingErrorsContext: react.Context<PendingErrorsContextValue | null>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PendingErrorsContext.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/PendingErrorsContext.tsx"],"mappings":";;;;;KAWK,WAAA,GAAc,MAAA;AAAA,KAEd,yBAAA;EACH,iBAAA,GACE,MAAA,EAAQ,WAAA,EACR,IAAA,IAAQ,IAAA;EAEV,
|
|
1
|
+
{"version":3,"file":"PendingErrorsContext.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/PendingErrorsContext.tsx"],"mappings":";;;;;KAWK,WAAA,GAAc,MAAA;AAAA,KAEd,yBAAA;EACH,iBAAA,GACE,MAAA,EAAQ,WAAA,EACR,IAAA,IAAQ,IAAA;EAEV,gBAAA,GAAmB,IAAA,aAAiB,WAAA;EACpC,OAAA;AAAA;AAAA,cAGW,oBAAA,EAAoB,KAAA,CAAA,OAAA,CAAA,yBAAA;AAAA,cAGpB,gBAAA,QAAuB,yBAAA;AAAA,KAG/B,0BAAA;EACH,cAAA,EAAgB,MAAA;EAChB,QAAA,EAAU,SAAA;AAAA;AAAA,cAGC,qBAAA;EAAyB,cAAA;EAAA;AAAA,GAGnC,0BAAA,KAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import{createContext as t,useCallback as n,useContext as r,useRef as i,useState as a}from"react";const o=t(null),s=()=>r(o),c=({fieldToStepMap:t,children:r})=>{let s=i({}),c=i(t);c.current=t;let[l,u]=a(0),d=n((e,t)=>{s.current={...e},u(e=>e+1);let n=c.current,r=new Set;for(let t of Object.keys(e)){let e=n[t];e!=null&&r.add(e)}if(r.size===0)return null;let i=Math.min(...r);return t?.(i),i},[]),f=n(e=>{let t=c.current,n={}
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import{createContext as t,useCallback as n,useContext as r,useRef as i,useState as a}from"react";const o=t(null),s=()=>r(o),c=({fieldToStepMap:t,children:r})=>{let s=i({}),c=i(t);c.current=t;let[l,u]=a(0),d=n((e,t)=>{s.current={...e},u(e=>e+1);let n=c.current,r=new Set;for(let t of Object.keys(e)){let e=n[t];e!=null&&r.add(e)}if(r.size===0)return null;let i=Math.min(...r);return t?.(i),i},[]),f=n(e=>{let t=c.current,n={};for(let[r,i]of Object.entries(s.current))t[r]===e&&(n[r]=i);return n},[]);return e(o.Provider,{value:{routeServerErrors:d,getErrorsForStep:f,version:l},children:r})};export{o as PendingErrorsContext,c as PendingErrorsProvider,s as usePendingErrors};
|
|
2
2
|
//# sourceMappingURL=PendingErrorsContext.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PendingErrorsContext.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/PendingErrorsContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useRef,\n useState,\n} from 'react';\n\ntype FieldErrors = Record<string, string | string[]>;\n\ntype PendingErrorsContextValue = {\n routeServerErrors: (\n issues: FieldErrors,\n goTo?: (step: number) => void,\n ) => number | null;\n
|
|
1
|
+
{"version":3,"file":"PendingErrorsContext.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/PendingErrorsContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useRef,\n useState,\n} from 'react';\n\ntype FieldErrors = Record<string, string | string[]>;\n\ntype PendingErrorsContextValue = {\n routeServerErrors: (\n issues: FieldErrors,\n goTo?: (step: number) => void,\n ) => number | null;\n getErrorsForStep: (step: number) => FieldErrors;\n version: number;\n};\n\nexport const PendingErrorsContext =\n createContext<PendingErrorsContextValue | null>(null);\n\nexport const usePendingErrors = (): PendingErrorsContextValue | null =>\n useContext(PendingErrorsContext);\n\ntype PendingErrorsProviderProps = {\n fieldToStepMap: Record<string, number>;\n children: ReactNode;\n};\n\nexport const PendingErrorsProvider = ({\n fieldToStepMap,\n children,\n}: PendingErrorsProviderProps) => {\n const errorsRef = useRef<FieldErrors>({});\n const mapRef = useRef(fieldToStepMap);\n mapRef.current = fieldToStepMap;\n const [version, setVersion] = useState(0);\n\n const routeServerErrors = useCallback(\n (issues: FieldErrors, goTo?: (step: number) => void): number | null => {\n errorsRef.current = { ...issues };\n setVersion((v) => v + 1);\n\n const map = mapRef.current;\n const stepsWithErrors = new Set<number>();\n for (const field of Object.keys(issues)) {\n const step = map[field];\n if (step != null) stepsWithErrors.add(step);\n }\n\n if (stepsWithErrors.size === 0) return null;\n\n const firstStep = Math.min(...stepsWithErrors);\n goTo?.(firstStep);\n return firstStep;\n },\n [],\n );\n\n const getErrorsForStep = useCallback((step: number): FieldErrors => {\n const map = mapRef.current;\n const result: FieldErrors = {};\n\n for (const [field, message] of Object.entries(errorsRef.current)) {\n if (map[field] === step) {\n result[field] = message;\n }\n }\n\n return result;\n }, []);\n\n return (\n <PendingErrorsContext.Provider\n value={{ routeServerErrors, getErrorsForStep, version }}\n >\n {children}\n </PendingErrorsContext.Provider>\n );\n};\n"],"mappings":"sJAsBA,MAAa,EACX,EAAgD,KAAK,CAE1C,MACX,EAAW,EAAqB,CAOrB,GAAyB,CACpC,iBACA,cACgC,CAChC,IAAM,EAAY,EAAoB,EAAE,CAAC,CACnC,EAAS,EAAO,EAAe,CACrC,EAAO,QAAU,EACjB,GAAM,CAAC,EAAS,GAAc,EAAS,EAAE,CAEnC,EAAoB,GACvB,EAAqB,IAAiD,CACrE,EAAU,QAAU,CAAE,GAAG,EAAQ,CACjC,EAAY,GAAM,EAAI,EAAE,CAExB,IAAM,EAAM,EAAO,QACb,EAAkB,IAAI,IAC5B,IAAK,IAAM,KAAS,OAAO,KAAK,EAAO,CAAE,CACvC,IAAM,EAAO,EAAI,GACb,GAAQ,MAAM,EAAgB,IAAI,EAAK,CAG7C,GAAI,EAAgB,OAAS,EAAG,OAAO,KAEvC,IAAM,EAAY,KAAK,IAAI,GAAG,EAAgB,CAE9C,OADA,IAAO,EAAU,CACV,GAET,EAAE,CACH,CAEK,EAAmB,EAAa,GAA8B,CAClE,IAAM,EAAM,EAAO,QACb,EAAsB,EAAE,CAE9B,IAAK,GAAM,CAAC,EAAO,KAAY,OAAO,QAAQ,EAAU,QAAQ,CAC1D,EAAI,KAAW,IACjB,EAAO,GAAS,GAIpB,OAAO,GACN,EAAE,CAAC,CAEN,OACE,EAAC,EAAqB,SAAtB,CACE,MAAO,CAAE,oBAAmB,mBAAkB,UAAS,CAEtD,WAC6B,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.197",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/preset": "1.0.
|
|
28
|
+
"@mage-ui/preset": "1.0.197",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|