@paragrav/rhf-utils 0.72.0 → 0.74.0
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/README.md +83 -52
- package/dist/tsdown/{FormRelayOptions-k7OaoAqV.d.ts → FormRelayOptions-B5CknIkX.d.ts} +2 -3
- package/dist/tsdown/FormRelayOptions-B5CknIkX.d.ts.map +1 -0
- package/dist/tsdown/{FormRelaySetter-BKO0Wodf.js → FormRelaySetter-CLkDwgfH.js} +9 -4
- package/dist/tsdown/FormRelaySetter-CLkDwgfH.js.map +1 -0
- package/dist/tsdown/{RhfUtilsClientConfigType-BaedoEQY.d.ts → RhfUtilsClientConfigType-CRy_vYef.d.ts} +62 -12
- package/dist/tsdown/RhfUtilsClientConfigType-CRy_vYef.d.ts.map +1 -0
- package/dist/tsdown/{RhfUtilsContextType-DwlvEWjd.d.ts → RhfUtilsContextType-DBOvBnPF.d.ts} +12 -20
- package/dist/tsdown/RhfUtilsContextType-DBOvBnPF.d.ts.map +1 -0
- package/dist/tsdown/index.d.ts +29 -45
- package/dist/tsdown/index.d.ts.map +1 -1
- package/dist/tsdown/index.js +64 -43
- package/dist/tsdown/index.js.map +1 -1
- package/dist/tsdown/relay.d.ts +4 -4
- package/dist/tsdown/relay.d.ts.map +1 -1
- package/dist/tsdown/relay.js +1 -1
- package/dist/tsdown/trpc.d.ts +1 -2
- package/dist/tsdown/trpc.d.ts.map +1 -1
- package/package.json +21 -31
- package/dist/tsdown/FormRelayOptions-k7OaoAqV.d.ts.map +0 -1
- package/dist/tsdown/FormRelaySetter-BKO0Wodf.js.map +0 -1
- package/dist/tsdown/RhfUtilsClientConfigType-BaedoEQY.d.ts.map +0 -1
- package/dist/tsdown/RhfUtilsContextType-DwlvEWjd.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -9,18 +9,23 @@ Integration and utility library for [react-hook-form](https://www.react-hook-for
|
|
|
9
9
|
- TypeScript-first
|
|
10
10
|
- global configuration (🔗 [`RhfUtilsClientConfig`](#config) section)
|
|
11
11
|
- RHF (`UseFormProps`) and utilities (`RhfUtilsFormOptions`) options defaults
|
|
12
|
-
- inject your own hooks and UI (`
|
|
12
|
+
- inject your own hooks and UI (`useFormHooks`, `FormOutlet`) ✨
|
|
13
13
|
- server error transformation (`onSubmitErrorUnknown`) ✨
|
|
14
14
|
- handle cancel prompt (`useCanFormBeCancelled`) ✨
|
|
15
15
|
- RHF `FormState.errors` logging/throwing (`RhfUtilsClientConfig.fieldErrors`) ✨
|
|
16
16
|
- form-level configuration (🔗 [`RhfUtilsZodForm`](#form-with-providers) section)
|
|
17
17
|
- RHF and utilities options overrides
|
|
18
|
-
- extendable utilities options type (`RhfUtilsFormOptions`)
|
|
19
18
|
- throw error (`FormSubmitError`) in submit handler to add errors to RHF context and fail submit
|
|
20
19
|
- handle submit error (`onSubmitError` / `useLastSubmitError`)
|
|
21
20
|
- context injection for children (`RhfUtilsZodForm.Children`), including:
|
|
22
|
-
-
|
|
21
|
+
- `RhfUtilsContext` (see section below)
|
|
23
22
|
- schema-typed Controller component and FormSubmitError class
|
|
23
|
+
- RHF context
|
|
24
|
+
- options (🔗 [`RhfUtilsFormOptions`](#rhfutilsformoptions) section) ✨
|
|
25
|
+
- extend with your own per-form options (e.g., `enableMyPrompter`)
|
|
26
|
+
- context (🔗 [`RhfUtilsContext`](#rhfutilscontext) section) ✨
|
|
27
|
+
- use `useRhfUtilsContext` to access options in your hook/component structure
|
|
28
|
+
- `formId`, `formRef`, `options`
|
|
24
29
|
- form state relay (🔗 [`FormRelayContextProvider`](#form-state-relay) section) ✨
|
|
25
30
|
- access specific form's state from outside that form/provider
|
|
26
31
|
- assign forms into groups and watch collectively
|
|
@@ -41,10 +46,12 @@ yarn add @paragrav/rhf-utils # yarn
|
|
|
41
46
|
|
|
42
47
|
## Quick Start
|
|
43
48
|
|
|
44
|
-
- 🔗 [Config](#config) (`RhfUtilsClientConfig`)
|
|
45
|
-
- 🔗 [Provider](#config-provider) (`RhfUtilsClientConfigProvider`)
|
|
46
|
-
- 🔗 [Form With Providers](#form-with-providers) (`RhfUtilsZodFormWithProviders`)
|
|
47
|
-
- 🔗 [
|
|
49
|
+
- 🔗 [Config](#config) (`RhfUtilsClientConfig`) - define your global config (optional)
|
|
50
|
+
- 🔗 [Provider](#config-provider) (`RhfUtilsClientConfigProvider`) - add to your global stack
|
|
51
|
+
- 🔗 [Form With Providers](#form-with-providers) (`RhfUtilsZodFormWithProviders`) - use as form component
|
|
52
|
+
- 🔗 [Options](#rhfutilsformoptions) (`RhfUtilsFormOptions`) - global, per-form flags
|
|
53
|
+
- 🔗 [Context](#rhfutilscontext) (`RhfUtilsContext`) - utils context
|
|
54
|
+
- 🔗 [Form State Relay](#form-state-relay) (`FormRelayContextProvider`) - relay form state
|
|
48
55
|
|
|
49
56
|
## Config
|
|
50
57
|
|
|
@@ -74,22 +81,17 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
74
81
|
// optional form component to use (defaults to primitive HTML form)
|
|
75
82
|
FormComponent: Form.Root,
|
|
76
83
|
|
|
77
|
-
// inject your
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
// RhfUtilsFormInjectorProps
|
|
84
|
+
// inject your hooks across all RhfUtilsZodForm instances
|
|
85
|
+
useFormHooks: (
|
|
86
|
+
// RhfUtilsClientConfigUseFormHooksProps
|
|
81
87
|
{
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
options, // RhfUtilsFormOptions (with any custom props)
|
|
88
|
-
Controller, // rhf controller (SafeFieldValues-typed; no schema at this level)
|
|
89
|
-
FormSubmitError, // error class (SafeFieldValues-typed; no schema at this level)
|
|
88
|
+
formId, // unique id string
|
|
89
|
+
formRef, // form element ref
|
|
90
|
+
options, // RhfUtilsFormOptions (with any custom props)
|
|
91
|
+
lastSubmit, // last submit state (see "Last Submit" section)
|
|
92
|
+
rhf, // rhf UseFormReturn (without proxy `formState`)
|
|
90
93
|
},
|
|
91
94
|
) => {
|
|
92
|
-
// hook injected across all instances
|
|
93
95
|
useMyGlobalFormHook();
|
|
94
96
|
|
|
95
97
|
// hook injected across all instances with per-instance opt-in flag via custom option props
|
|
@@ -97,17 +99,31 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
97
99
|
useMyOptionalFormHook({
|
|
98
100
|
enabled: !!options.enableMyOptionalFormHook,
|
|
99
101
|
});
|
|
102
|
+
},
|
|
100
103
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
104
|
+
// inject your components across all RhfUtilsZodForm instances
|
|
105
|
+
FormOutlet: (
|
|
106
|
+
// RhfUtilsClientConfigOutletProps
|
|
107
|
+
{
|
|
108
|
+
formId, // unique id string
|
|
109
|
+
formRef, // form element ref
|
|
110
|
+
options, // RhfUtilsFormOptions (with any custom props)
|
|
111
|
+
lastSubmit, // current form submit state
|
|
112
|
+
rhf, // rhf UseFormReturn (without proxy `formState`)
|
|
105
113
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
114
|
+
Outlet, // Form instance (RhfUtilsZodForm.Children) "outlet"
|
|
115
|
+
Controller, // rhf controller (SafeFieldValues-typed; no schema at this level)
|
|
116
|
+
FormSubmitError, // error class (SafeFieldValues-typed; no schema at this level)
|
|
117
|
+
},
|
|
118
|
+
) => (
|
|
119
|
+
<>
|
|
120
|
+
{/* Form instance (RhfUtilsZodForm.Children) "outlet" (see "Component Hierarchy" section). */}
|
|
121
|
+
<Outlet />
|
|
122
|
+
|
|
123
|
+
{/* root errors list */}
|
|
124
|
+
<RootErrorsList />
|
|
125
|
+
</>
|
|
126
|
+
),
|
|
111
127
|
|
|
112
128
|
// hook that returns callback to determine whether form can be cancelled
|
|
113
129
|
// if `true`, `RhfUtilsZodForm.onCancel` at form-level is called (e.g., parent component hides form)
|
|
@@ -115,14 +131,16 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
115
131
|
// NOTE: this library is router-agnostic, so navigation blocking should happen elsewhere
|
|
116
132
|
// (i.e., calling your own hook in `FormComponent`)
|
|
117
133
|
useCanFormBeCancelled: () => {
|
|
118
|
-
const { isDirty } = useFormState();
|
|
119
|
-
|
|
134
|
+
const { isDirty, isSubmitting } = useFormState();
|
|
135
|
+
|
|
136
|
+
const canFormBeCancelled = ({ utils, lastSubmit }) =>
|
|
137
|
+
!utils.options.enableMyPrompter || // my prompter option NOT enabled for this form
|
|
138
|
+
!isDirty || // or rhf form state NOT dirty
|
|
139
|
+
(isSubmitting && lastSubmit.statusRef.current === 'success') || // successful submit before form state updated
|
|
140
|
+
confirm('Are you sure?'); // or user confirms
|
|
120
141
|
|
|
121
142
|
// return callback to be called at event-time
|
|
122
|
-
return
|
|
123
|
-
!options.enableMyPrompter || // my prompter option not enabled
|
|
124
|
-
!isDirty || // or rhf form state not dirty
|
|
125
|
-
confirm('Are you sure you want to cancel?'); // or user confirms
|
|
143
|
+
return canFormBeCancelled;
|
|
126
144
|
},
|
|
127
145
|
|
|
128
146
|
// non-FormSubmitError thrown in onSubmit
|
|
@@ -179,6 +197,7 @@ Currently, only `zod` schemas are supported.
|
|
|
179
197
|
passwordConfirm: z.string().min(1),
|
|
180
198
|
})}
|
|
181
199
|
defaultValues={{ email: '', password: '', passwordConfirm: '' }}
|
|
200
|
+
// optional transformer for api -- supplied to on submit handlers
|
|
182
201
|
getApiData={({ email, password }) => ({ email, password })}
|
|
183
202
|
// cancel handler (passed to `Children` below)
|
|
184
203
|
// execution routed through `RhfUtilsClientConfig.useCanFormBeCancelled`, if provided
|
|
@@ -202,10 +221,10 @@ Currently, only `zod` schemas are supported.
|
|
|
202
221
|
email: { message: 'Email is invalid.' },
|
|
203
222
|
});
|
|
204
223
|
}}
|
|
205
|
-
// submit handler
|
|
224
|
+
// submit handler (return value supplied to onSubmitSuccess)
|
|
206
225
|
onSubmit={({ input, output, api }, context, event) => registerService(api)}
|
|
207
|
-
onSubmitSuccess={(
|
|
208
|
-
navigate('/app/' +
|
|
226
|
+
onSubmitSuccess={(submitResult, { input, output, api }, context, event) =>
|
|
227
|
+
navigate('/app/' + submitResult.id)
|
|
209
228
|
}
|
|
210
229
|
// handle error declaratively (i.e., no throw/catch)
|
|
211
230
|
onSubmitError={({ error, context, event }) => {
|
|
@@ -356,10 +375,6 @@ Any non-`FormSubmitError` error thrown from your submit handler (e.g., fetch/axi
|
|
|
356
375
|
|
|
357
376
|
Most common use case will be transforming backend errors to frontend shape expected by RHF.
|
|
358
377
|
|
|
359
|
-
### Last Submit Error
|
|
360
|
-
|
|
361
|
-
Sometimes, perhaps outside any specific `FormContext`, you need direct access to the actual error object that was thrown, which caused the last submit to fail. The `useLastSubmitError` hook allows you to do just this. (You can probably handle most form-specific cases via `onSubmitErrorUnknown`, which receives error as well.)
|
|
362
|
-
|
|
363
378
|
## `RhfUtilsFormOptions`
|
|
364
379
|
|
|
365
380
|
These built-in options can be set globally and/or per form.
|
|
@@ -370,7 +385,7 @@ type RhfUtilsFormOptions = {
|
|
|
370
385
|
stopSubmitPropagation?: boolean;
|
|
371
386
|
|
|
372
387
|
/** Request submit on change. */
|
|
373
|
-
|
|
388
|
+
submitOnWatch?: { debounce?: number };
|
|
374
389
|
|
|
375
390
|
/**
|
|
376
391
|
* Reset form values and state (e.g., isDirty, etc.) after submit -- on success and/or error.
|
|
@@ -387,15 +402,9 @@ type RhfUtilsFormOptions = {
|
|
|
387
402
|
};
|
|
388
403
|
```
|
|
389
404
|
|
|
390
|
-
|
|
405
|
+
### Extend
|
|
391
406
|
|
|
392
|
-
`
|
|
393
|
-
|
|
394
|
-
Use `useRhfUtilsContextRequestSubmit` hook to get `requestSubmit` function for current form ref in context. This is useful when you need to trigger form submission programatically.
|
|
395
|
-
|
|
396
|
-
## Extend `RhfUtilsFormOptions`
|
|
397
|
-
|
|
398
|
-
Extend `RhfUtilsFormOptions` with custom options, which get passed to `RhfUtilsClientConfig`'s `ChildrenWrapper` and `RhfUtilsZodForm`'s `Children` components via `options` prop. These can take any shape, and allow you to override your own functionality at form-level.
|
|
407
|
+
Extend `RhfUtilsFormOptions` with custom options, which get passed to `RhfUtilsClientConfig`'s `useFormHooks` and `FormOutlet`; and `RhfUtilsZodForm`'s `Children` components via `options` prop. These can take any shape, and allow you to override your own functionality at form-level.
|
|
399
408
|
|
|
400
409
|
```tsx
|
|
401
410
|
import '@paragrav/rhf-utils';
|
|
@@ -412,7 +421,29 @@ declare module '@paragrav/rhf-utils' {
|
|
|
412
421
|
}
|
|
413
422
|
```
|
|
414
423
|
|
|
415
|
-
##
|
|
424
|
+
## `RhfUtilsContext`
|
|
425
|
+
|
|
426
|
+
If you need access to options deeper in your component structure, use `useRhfUtilsContext` to receive `RhfUtilsContext` object, which includes `formId`, `formRef`, `options` (with extended properties), and last submit status and error.
|
|
427
|
+
|
|
428
|
+
## Last Submit Context
|
|
429
|
+
|
|
430
|
+
If you need access to metadata about the last submit outside of form, use `useLastSubmit` to receive the following data.
|
|
431
|
+
|
|
432
|
+
### Status (ref)
|
|
433
|
+
|
|
434
|
+
The property `status` (a ref with possible value of `null | 'submitting' | 'success' | 'error'`) conveys current submit state via ref -- i.e., without needing to wait for next render cycle. If your form navigates away via `onSubmitSuccess`, RHF's `useFormContext` still shows form as `isDirty` and `isSubmitting`, which makes it difficult to distinguish from a user-initiated navigation before form is submitted successfully.
|
|
435
|
+
|
|
436
|
+
### Error (state)
|
|
437
|
+
|
|
438
|
+
Sometimes, such as outside any specific `FormContext`, you need direct access to the actual error object that was thrown, which caused the last submit to fail. The `useLastSubmitError` hook allows you to do just this. (You can probably handle most form-specific cases via `onSubmitErrorUnknown`, which receives error as well.)
|
|
439
|
+
|
|
440
|
+
---
|
|
441
|
+
|
|
442
|
+
### Request Submit
|
|
443
|
+
|
|
444
|
+
Use `useRhfUtilsContextRequestSubmit` hook to get `requestSubmit` function for current form ref in context. This is useful when you need to trigger form submission programatically.
|
|
445
|
+
|
|
446
|
+
## Form State Relay
|
|
416
447
|
|
|
417
448
|
Sometimes you need to access one or more forms' state outside its respective context.
|
|
418
449
|
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as SafeFieldValues, t as RhfUtilsContext } from "./RhfUtilsContextType-DBOvBnPF.js";
|
|
2
2
|
import { FormState } from "react-hook-form";
|
|
3
|
-
|
|
4
3
|
//#region src/form/relay/types.d.ts
|
|
5
4
|
type FormRelay<TFieldValues extends SafeFieldValues = SafeFieldValues> = {
|
|
6
5
|
state: FormRelayStateSelected<TFieldValues>;
|
|
@@ -27,4 +26,4 @@ type FormRelayOptions = {
|
|
|
27
26
|
};
|
|
28
27
|
//#endregion
|
|
29
28
|
export { FormRelay as n, FormRelayStateSelected as r, FormRelayOptions as t };
|
|
30
|
-
//# sourceMappingURL=FormRelayOptions-
|
|
29
|
+
//# sourceMappingURL=FormRelayOptions-B5CknIkX.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormRelayOptions-B5CknIkX.d.ts","names":[],"sources":["../../src/form/relay/types.ts","../../src/form/relay/FormRelayOptions.ts"],"mappings":";;;KAOY,UAAU,qBAAqB,kBAAkB;EAEzD,OAAO,uBAAuB;EAC9B,SAAS;EACT,OAAO;;KAGC,uBACV,qBAAqB,kBAAkB,mBACrC,QACF,UAAU;EACR;;;;KCZQ;;;;;EAKV,SAAS,WAAW,UAAU,qBAAqB;;;;;;EAOnD"}
|
|
@@ -106,7 +106,8 @@ const flattenFieldErrors = (errors) => flatten(errors);
|
|
|
106
106
|
*/
|
|
107
107
|
const getFlatFieldErrors = (errors) => {
|
|
108
108
|
const flattened = flattenFieldErrors(errors);
|
|
109
|
-
|
|
109
|
+
const flattenedKeys = Object.keys(flattened);
|
|
110
|
+
return Object.fromEntries(flattenedKeys.reduce((entriesAccumulator, flattenedKey) => {
|
|
110
111
|
/**
|
|
111
112
|
* Maybe path.
|
|
112
113
|
*
|
|
@@ -135,9 +136,13 @@ const getFlatFieldErrors = (errors) => {
|
|
|
135
136
|
/**
|
|
136
137
|
* Regular expression to maybe match the end of a leaf node path.
|
|
137
138
|
*
|
|
138
|
-
*
|
|
139
|
+
* @example
|
|
140
|
+
* - `name.type`
|
|
141
|
+
* - `address.street.message`
|
|
142
|
+
*
|
|
143
|
+
* @description
|
|
139
144
|
*
|
|
140
|
-
*
|
|
145
|
+
* dot [?: non-capturing]("type" | "message")[\b word boundary][$ end of string]
|
|
141
146
|
*/
|
|
142
147
|
const regexMaybeFieldErrorLeafNodeSuffix = /\.(?:type|message)\b$/;
|
|
143
148
|
const getFlatFieldErrorsSansRef = (errors) => Object.fromEntries(Object.entries(getFlatFieldErrors(errors)).map(([name, error]) => [name, {
|
|
@@ -191,4 +196,4 @@ const FormRelaySetter = ({ options }) => {
|
|
|
191
196
|
//#endregion
|
|
192
197
|
export { _RhfUtilsContextProvider as a, FormRelayContextProvider as c, isEmptyObject as i, useFormRelayContext as l, useFormRelaySet as n, useRhfUtilsContext as o, getFlatFieldErrors as r, useRhfUtilsMaybeContext as s, FormRelaySetter as t, createContext as u };
|
|
193
198
|
|
|
194
|
-
//# sourceMappingURL=FormRelaySetter-
|
|
199
|
+
//# sourceMappingURL=FormRelaySetter-CLkDwgfH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormRelaySetter-CLkDwgfH.js","names":[],"sources":["../../src/utils/createContext.ts","../../src/form/relay/context/useFormRelayContext.ts","../../src/form/relay/context/FormRelayContextProvider.tsx","../../src/form/context/utils/useRhfUtilsContext.tsx","../../src/utils/isEmptyObject.ts","../../src/errors/flat/flattenFieldErrors.ts","../../src/errors/flat/getFlatFieldErrors.ts","../../src/form/relay/set/useFormRelaySet.ts","../../src/form/relay/set/FormRelaySetter.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * Create a strictly-typed context that throws error if no provider is found.\n * @returns A tuple with a function to get the context and the context provider.\n */\nexport function createContext<T = unknown>() {\n const context = React.createContext<T | undefined>(undefined);\n\n const useMaybe = () => React.useContext(context);\n\n const useRequired = () => {\n const c = useMaybe();\n\n // type guard\n if (c === undefined) throw new Error();\n\n return c;\n };\n\n return {\n Provider: context.Provider,\n useMaybe,\n useRequired,\n } as const;\n}\n","import type { RhfUtilsContext } from '@/form/context/utils/RhfUtilsContextType';\n\nimport { createContext } from '@/utils/createContext';\n\nimport type { FormRelayOptions } from '../FormRelayOptions';\nimport type { FormRelay, FormRelayStateSelected } from '../types';\n\nexport type FormsRelayed = Record<\n string, // form id\n FormRelay\n>;\n\nexport type FormRelayContext = {\n // set\n\n add: (\n state: FormRelayStateSelected,\n utils: RhfUtilsContext,\n options: FormRelayOptions,\n ) => void;\n\n update: (id: string, state: FormRelayStateSelected) => void;\n\n remove: (id: string) => void;\n\n // state\n\n state: FormsRelayed;\n};\n\nexport const {\n Provider: _FormRelayContextProvider,\n useRequired: useFormRelayContext,\n} = createContext<FormRelayContext>();\n","import React from 'react';\n\nimport type { RhfUtilsContext } from '@/form/context/utils/RhfUtilsContextType';\n\nimport type { FormRelayOptions } from '../FormRelayOptions';\nimport type { FormRelayStateSelected } from '../types';\n\nimport type { FormsRelayed } from './useFormRelayContext';\nimport { _FormRelayContextProvider } from './useFormRelayContext';\n\ntype Props = React.PropsWithChildren;\n\nexport const FormRelayContextProvider: React.FC<Props> = ({ children }) => {\n // state\n\n const [state, setState] = React.useState<FormsRelayed>({});\n\n // set\n\n const add = React.useCallback(\n (\n formState: FormRelayStateSelected,\n utils: RhfUtilsContext,\n options: FormRelayOptions,\n ) => {\n if (state[utils.formId]) throw new Error('Form id already exists.');\n\n setState((forms) => ({\n ...forms,\n [utils.formId]: { state: formState, utils, options },\n }));\n },\n\n [state],\n );\n\n const update = React.useCallback(\n (id: string, state: FormRelayStateSelected) => {\n setState((forms) => {\n const current = forms[id];\n\n if (!current) throw new Error(\"Form id doesn't exist\");\n\n return {\n ...forms,\n [id]: { ...current, state },\n };\n });\n },\n [],\n );\n\n const remove = React.useCallback((id: string) => {\n setState((forms) =>\n Object.fromEntries(\n Object.entries(forms)\n // keep only other ids\n .filter(([entryId]) => entryId !== id),\n ),\n );\n }, []);\n\n //\n\n return (\n <_FormRelayContextProvider\n value={{\n // set\n\n add,\n update,\n remove,\n\n // get\n\n state,\n }}\n >\n {children}\n </_FormRelayContextProvider>\n );\n};\n","import { createContext } from '@/utils/createContext';\n\nimport type { RhfUtilsContext } from './RhfUtilsContextType';\n\nconst {\n Provider: _RhfUtilsContextProvider,\n useRequired: useRhfUtilsContext,\n useMaybe: useRhfUtilsMaybeContext,\n} = createContext<RhfUtilsContext>();\n\nexport {\n _RhfUtilsContextProvider,\n useRhfUtilsContext,\n useRhfUtilsMaybeContext,\n};\n","export const isEmptyObject = (obj: Record<string, unknown>) =>\n Object.keys(obj).length === 0;\n","import { flatten } from 'flat';\nimport type { FieldErrors } from 'react-hook-form';\n\n/**\n * Flatten a {@link FieldErrors} object.\n *\n * @returns e.g.,\n * ```ts\n * {\n * \"address.street.type\": \"too_short\",\n * \"address.street.ref.value\": \"123\",\n * \"address.street.message\": \"Required.\"\n * }\n * ```\n */\nexport const flattenFieldErrors = (errors: FieldErrors) =>\n flatten<FieldErrors, Record<string, unknown>>(errors);\n","import type { FieldError, FieldErrors } from 'react-hook-form';\nimport { get } from 'react-hook-form';\n\nimport type { SafeFieldValues } from '@/form/rhf/SafeFieldValuesType';\n\nimport { flattenFieldErrors } from './flattenFieldErrors';\nimport type { FlatFieldErrors } from './types';\n\n/**\n * Get {@link FlatFieldErrors} from {@link FieldErrors}.\n * This makes it easy to work with potentially deeply-nested {@link FieldErrors}.\n *\n * @param errors {@link FieldErrors} object.\n *\n * @returns `FlatFieldErrors` object.\n *\n * @example\n * ```\n * {\n * \"address.street\": {\n * type: \"too_short\",\n * ref: { value: \"123\" },\n * message: \"Required.\" }\n * }\n * }\n * ```\n */\nexport const getFlatFieldErrors = (errors: FieldErrors): FlatFieldErrors => {\n // flatten object for simpler processing\n const flattened = flattenFieldErrors(errors);\n\n // get flattened keys (e.g., `name.message`), which we must transform back to actual paths (e.g., `name`)\n const flattenedKeys = Object.keys(flattened);\n\n // rebuild FlatFieldErrors\n return Object.fromEntries(\n flattenedKeys.reduce<[PropertyKey, FieldError][]>(\n (entriesAccumulator, flattenedKey) => {\n /**\n * Maybe path.\n *\n * Derived from flattened key by removing leaf node suffix (if present).\n *\n * @example\n * path: `address.street.message` -> `address.street`\n * @example\n * not path: `address.street.ref` -> `address.street.ref` (no suffix match to replace)\n */\n const maybePath = flattenedKey.replace(\n regexMaybeFieldErrorLeafNodeSuffix,\n '',\n );\n\n // if nothing replaced, then it's not a leaf node; return early\n if (maybePath === flattenedKey) return entriesAccumulator;\n\n // find field error in original FieldErrors object\n // has dual-purpose of confirming that each path is valid\n const fieldError = get(errors, maybePath, undefined) as\n FieldError | undefined;\n\n // if no field error found, then derived path was wrong; return early\n if (!fieldError) return entriesAccumulator;\n\n /**\n * Add entry to accumulator.\n *\n * (If it's a duplicate (e.g., `.type` leaf node matched before `.message`),\n * it doesn't matter because `Object.fromEntries` will just overwrite\n * first entry with second matching key/value.)\n */\n entriesAccumulator.push([maybePath, fieldError]);\n\n return entriesAccumulator;\n },\n\n [], // entries\n ),\n );\n};\n\n//\n\n/**\n * Regular expression to maybe match the end of a leaf node path.\n *\n * @example\n * - `name.type`\n * - `address.street.message`\n *\n * @description\n *\n * dot [?: non-capturing](\"type\" | \"message\")[\\b word boundary][$ end of string]\n */\nexport const regexMaybeFieldErrorLeafNodeSuffix = /\\.(?:type|message)\\b$/;\n\n//\n\nexport type FieldErrorsSansRef<\n TFieldValues extends SafeFieldValues = SafeFieldValues,\n> = Record<\n keyof TFieldValues | 'root',\n Partial<Pick<FieldError, 'message' | 'type'>> & {\n hasRef: boolean;\n }\n>;\n\nexport const getFlatFieldErrorsSansRef = <TFieldValues extends SafeFieldValues>(\n errors: FieldErrors<TFieldValues>,\n) =>\n Object.fromEntries(\n Object.entries(getFlatFieldErrors(errors)).map(([name, error]) => [\n name,\n {\n type: error.type,\n message: error.message,\n hasRef: !!error.ref, // strip out actual ref, etc. (avoid circular JSON error)\n },\n ]),\n ) as FieldErrorsSansRef<TFieldValues>;\n","import React from 'react';\nimport { useFormState } from 'react-hook-form';\n\nimport { getFlatFieldErrorsSansRef } from '@/errors/flat/getFlatFieldErrors';\n\nimport { useRhfUtilsContext } from '@/form/context/utils/useRhfUtilsContext';\n\nimport { useFormRelayContext } from '../context/useFormRelayContext';\nimport type { FormRelayOptions } from '../FormRelayOptions';\nimport type { FormRelayStateSelected } from '../types';\n\nexport const useFormRelaySet = (options?: FormRelayOptions) => {\n if (!options) return;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [memoOptions] = React.useState(options);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useFormRelayOnMount(memoOptions);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useFormRelayOnChange(memoOptions);\n};\n\n// HELPERS\n\n// mount\n\nconst useFormRelayOnMount = (options: FormRelayOptions) => {\n const utils = useRhfUtilsContext();\n const relay = useFormRelayContext();\n const formStateForRelay = useFormStateForRelay(options);\n\n React.useEffect(\n () => {\n relay.add(formStateForRelay, utils, options);\n\n // unmount\n return () => {\n relay.remove(utils.formId);\n };\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n};\n\n// update\n\nconst useFormRelayOnChange = (options: FormRelayOptions) => {\n const utils = useRhfUtilsContext();\n const relay = useFormRelayContext();\n const formStateForRelay = useFormStateForRelay(options);\n\n React.useEffect(\n // when form state changes, publish to relay context\n () => {\n relay.update(utils.formId, formStateForRelay);\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [formStateForRelay],\n );\n};\n\n// relayed form state\n\n/** Transform, memo-ize {@link useFormState}'s return to {@link FormRelayed} */\nconst useFormStateForRelay = (\n options: FormRelayOptions,\n): FormRelayStateSelected => {\n const formState = useFormState();\n\n const formStateSelected = options.select(formState);\n\n const formStateSelectedJson = JSON.stringify({\n ...formStateSelected,\n errors:\n formStateSelected.errors &&\n getFlatFieldErrorsSansRef(formStateSelected.errors),\n });\n\n const memoFormStateSelected = React.useMemo(\n // when watch JSON changes, update memo\n () => formStateSelected,\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [formStateSelectedJson],\n );\n\n return memoFormStateSelected;\n};\n","import type { FormRelayOptions } from '../FormRelayOptions';\n\nimport { useFormRelaySet } from './useFormRelaySet';\n\ntype Props = {\n options?: FormRelayOptions;\n};\n\nexport const FormRelaySetter: React.FC<Props> = ({ options }) => {\n useFormRelaySet(options);\n\n return null;\n};\n"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { i as RhfUtilsFormOptions, r as SafeFieldValues, t as RhfUtilsContext } from "./RhfUtilsContextType-DBOvBnPF.js";
|
|
2
2
|
import React$1 from "react";
|
|
3
3
|
import { ControllerProps, FieldError, FieldPath, UseFormProps, UseFormReturn } from "react-hook-form";
|
|
4
|
-
|
|
5
4
|
//#region src/errors/output/types.d.ts
|
|
6
5
|
/**
|
|
7
6
|
* Config object for error output.
|
|
@@ -96,11 +95,38 @@ type FormSubmitFieldErrors<TFieldValues extends SafeFieldValues = SafeFieldValue
|
|
|
96
95
|
}>;
|
|
97
96
|
//#endregion
|
|
98
97
|
//#region src/submit/error/FormSubmitError.d.ts
|
|
99
|
-
declare class FormSubmitError<TFieldValues extends SafeFieldValues = SafeFieldValues, TApiValues extends undefined | SafeFieldValues = undefined, TAllValues extends SafeFieldValues =
|
|
98
|
+
declare class FormSubmitError<TFieldValues extends SafeFieldValues = SafeFieldValues, TApiValues extends undefined | SafeFieldValues = undefined, TAllValues extends SafeFieldValues = TApiValues extends undefined ? TFieldValues : TFieldValues | TApiValues> extends Error {
|
|
100
99
|
errors: FormSubmitFieldErrors<TAllValues>;
|
|
101
100
|
constructor(errors: FormSubmitFieldErrors<TAllValues>, message?: string);
|
|
102
101
|
}
|
|
103
102
|
//#endregion
|
|
103
|
+
//#region src/submit/last/error/LastSubmitErrorType.d.ts
|
|
104
|
+
type LastSubmitError = {
|
|
105
|
+
error: unknown;
|
|
106
|
+
event: React.BaseSyntheticEvent;
|
|
107
|
+
};
|
|
108
|
+
//#endregion
|
|
109
|
+
//#region src/submit/last/status/LastSubmitStatusType.d.ts
|
|
110
|
+
/** Last submit state. */
|
|
111
|
+
type LastSubmitStatus = null | 'submitting' | 'success' | 'error';
|
|
112
|
+
//#endregion
|
|
113
|
+
//#region src/submit/last/context/LastSubmitContextType.d.ts
|
|
114
|
+
type LastSubmitContext = {
|
|
115
|
+
status: {
|
|
116
|
+
ref: React.RefObject<LastSubmitStatus | null>;
|
|
117
|
+
};
|
|
118
|
+
error: {
|
|
119
|
+
/** Last submit error (with event). */
|
|
120
|
+
state: LastSubmitError | undefined;
|
|
121
|
+
set: (error: unknown, event: React.BaseSyntheticEvent) => void;
|
|
122
|
+
reset: () => void;
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
type LastSubmitContextRead = {
|
|
126
|
+
statusRef: LastSubmitContext['status']['ref'];
|
|
127
|
+
error: LastSubmitContext['error']['state'];
|
|
128
|
+
};
|
|
129
|
+
//#endregion
|
|
104
130
|
//#region src/submit/UseRhfUtilsFormOnSubmitContextType.d.ts
|
|
105
131
|
/**
|
|
106
132
|
* Props for onSubmit other than `data` and `event`.
|
|
@@ -109,6 +135,7 @@ declare class FormSubmitError<TFieldValues extends SafeFieldValues = SafeFieldVa
|
|
|
109
135
|
*/
|
|
110
136
|
type UseRhfUtilsFormOnSubmitContext<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = TFieldValues, TApiValues extends undefined | SafeFieldValues = undefined> = {
|
|
111
137
|
utils: RhfUtilsContext;
|
|
138
|
+
lastSubmit: LastSubmitContextRead;
|
|
112
139
|
rhf: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
|
|
113
140
|
FormSubmitError: typeof FormSubmitError<TFieldValues, TApiValues>;
|
|
114
141
|
};
|
|
@@ -117,6 +144,7 @@ type UseRhfUtilsFormOnSubmitContext<TFieldValues extends SafeFieldValues = SafeF
|
|
|
117
144
|
*/
|
|
118
145
|
type UseRhfUtilsFormOnSubmitErrorContext<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = {
|
|
119
146
|
utils: RhfUtilsContext;
|
|
147
|
+
lastSubmit: LastSubmitContextRead;
|
|
120
148
|
rhf: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
|
|
121
149
|
errors?: FormSubmitFieldErrors;
|
|
122
150
|
};
|
|
@@ -130,15 +158,25 @@ type Merge<A, B, C = unknown, D = unknown> = D & Omit<C, keyof D> & Omit<Omit<B,
|
|
|
130
158
|
type _ControllerProps<TFieldValues extends SafeFieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, 'control'>;
|
|
131
159
|
declare const _Controller: <TFieldValues extends SafeFieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: _ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
|
|
132
160
|
//#endregion
|
|
133
|
-
//#region src/client/config/
|
|
161
|
+
//#region src/client/config/RhfUtilsClientConfigUseFormHooksProps.d.ts
|
|
134
162
|
/**
|
|
135
|
-
* RhfUtilsClientConfig's
|
|
163
|
+
* RhfUtilsClientConfig's `useFormHooks` props.
|
|
136
164
|
*/
|
|
137
|
-
type
|
|
138
|
-
|
|
139
|
-
}, RhfUtilsContext, {
|
|
165
|
+
type RhfUtilsClientConfigUseFormHooksProps<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = TFieldValues> = Merge<RhfUtilsContext, {
|
|
166
|
+
lastSubmit: LastSubmitContextRead;
|
|
140
167
|
rhf: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
|
|
168
|
+
}>;
|
|
169
|
+
//#endregion
|
|
170
|
+
//#region src/client/config/RhfUtilsClientConfigFormOutletProps.d.ts
|
|
171
|
+
/**
|
|
172
|
+
* RhfUtilsClientConfig's FormComponent props.
|
|
173
|
+
*/
|
|
174
|
+
type RhfUtilsClientConfigFormOutletProps<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = TFieldValues> = Merge<RhfUtilsClientConfigUseFormHooksProps<TFieldValues, TTransformedValues>, {
|
|
175
|
+
/** Form instance children (`RhfUtilsZodForm.Children`) to output amid globally-injected code. */
|
|
176
|
+
Outlet: React.FC;
|
|
177
|
+
/** RHF Controller (SafeFieldValues-typed; no schema at this level). */
|
|
141
178
|
Controller: typeof _Controller<TFieldValues>;
|
|
179
|
+
/** Error class (SafeFieldValues-typed; no schema at this level). */
|
|
142
180
|
FormSubmitError: typeof FormSubmitError<TFieldValues>;
|
|
143
181
|
}>;
|
|
144
182
|
//#endregion
|
|
@@ -160,7 +198,19 @@ type RhfUtilsClientConfig = {
|
|
|
160
198
|
*/
|
|
161
199
|
FormComponent?: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>>>;
|
|
162
200
|
/**
|
|
163
|
-
* Inject your own hooks
|
|
201
|
+
* Inject your own hooks across all form instances.
|
|
202
|
+
*
|
|
203
|
+
* @description
|
|
204
|
+
*
|
|
205
|
+
* (NOTE: context params are not schema-typed as not possible at this level.)
|
|
206
|
+
*
|
|
207
|
+
* @example
|
|
208
|
+
*
|
|
209
|
+
* See README.
|
|
210
|
+
*/
|
|
211
|
+
useFormHooks?: (props: RhfUtilsClientConfigUseFormHooksProps) => void;
|
|
212
|
+
/**
|
|
213
|
+
* Inject your components across all form instances.
|
|
164
214
|
*
|
|
165
215
|
* @description
|
|
166
216
|
*
|
|
@@ -170,7 +220,7 @@ type RhfUtilsClientConfig = {
|
|
|
170
220
|
*
|
|
171
221
|
* See README.
|
|
172
222
|
*/
|
|
173
|
-
|
|
223
|
+
FormOutlet?: React.FC<RhfUtilsClientConfigFormOutletProps>;
|
|
174
224
|
/**
|
|
175
225
|
* A hook that returns a callback that determines whether form can be cancelled at event-time.
|
|
176
226
|
*
|
|
@@ -209,5 +259,5 @@ type RhfUtilsClientConfig = {
|
|
|
209
259
|
};
|
|
210
260
|
};
|
|
211
261
|
//#endregion
|
|
212
|
-
export { UseRhfUtilsFormOnSubmitContext as a,
|
|
213
|
-
//# sourceMappingURL=RhfUtilsClientConfigType-
|
|
262
|
+
export { UseRhfUtilsFormOnSubmitContext as a, LastSubmitStatus as c, FormSubmitFieldErrors as d, RhfUseFormInstanceProps as f, MaybePromise as i, LastSubmitError as l, RhfUtilsClientConfigFormOutletProps as n, UseRhfUtilsFormOnSubmitErrorContext as o, useFlatFieldErrorsContext as p, _Controller as r, LastSubmitContextRead as s, RhfUtilsClientConfig as t, FormSubmitError as u };
|
|
263
|
+
//# sourceMappingURL=RhfUtilsClientConfigType-CRy_vYef.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RhfUtilsClientConfigType-CRy_vYef.d.ts","names":[],"sources":["../../src/errors/output/types.ts","../../src/errors/flat/types.ts","../../src/errors/flat/context/useFlatFieldErrorsContext.ts","../../src/errors/flat/context/FlatFieldErrorsOutputConfig.ts","../../src/form/rhf/UseFormPropsType.ts","../../src/form/defaults/UseRhfUtilsFormGlobalDefaults.ts","../../src/submit/error/FormSubmitFieldErrors.ts","../../src/submit/error/FormSubmitError.ts","../../src/submit/last/error/LastSubmitErrorType.ts","../../src/submit/last/status/LastSubmitStatusType.ts","../../src/submit/last/context/LastSubmitContextType.ts","../../src/submit/UseRhfUtilsFormOnSubmitContextType.ts","../../src/utils/types.ts","../../src/form/_Controller.tsx","../../src/client/config/RhfUtilsClientConfigUseFormHooksProps.ts","../../src/client/config/RhfUtilsClientConfigFormOutletProps.ts","../../src/client/config/RhfUtilsClientConfigType.ts"],"mappings":";;;;;;;KAGY;EACV;EACA;;;;;;;;;;;;;;KCOU,kBAAkB,eAAe;;;KCRjC;EACV,KAAK;EACL,QAAQ;EACR,OAAO;EACP,SAAS;EAET;EACA;;cAIU,gDAA8B,SAAA,qCAC3B,iCAAyB;;;KCZ5B;;;;;;;;EAQV,WACE,SAAS,2BACN;;;;;;;EAQL,SACE,SAAS;;;;KCnBD,wBAAwB,KAClC;KAaU,wBACV,qBAAqB,iBACrB,2BAA2B,mBACzB,KACF,aAAa,uBAAuB;;;;;;KCd1B;;;;;;EAMV,MAAM;;;;;;EAON,UAAU;;;;EAKV,OAAO,KACL,QAAM,gBAAgB,QAAM,IAAI;;;;;;;;;;;;KCfxB,sBACV,qBAAqB,kBAAkB,mBACrC,OAEF,UAAU;EAGR;EACA;;;;cChBS,gBACX,qBAAqB,kBAAkB,iBACvC,+BAA+B,6BAC/B,mBAAmB,kBAAkB,+BACjC,eACA,eAAe,oBACX;EAEC,QAAQ,sBAAsB;cAA9B,QAAQ,sBAAsB,aACrC;;;;KCbQ;EACV;EACA,OAAO,MAAM;;;;;KCDH;;;KCEA;EACV;IACE,KAAK,MAAM,UAAU;;EAGvB;;IAEE,OAAO;IAEP,MAAM,gBAAgB,OAAO,MAAM;IAEnC;;;KAIQ;EACV,WAAW;EACX,OAAO;;;;;;;;;KCLG,+BACV,qBAAqB,kBAAkB,iBACvC,2BAA2B,kBAAkB,cAC7C,+BAA+B;EAE/B,OAAO;EACP,YAAY;EACZ,KAAK,cAAc,uBAAuB;EAC1C,wBAAwB,gBAAgB,cAAc;;;;;KAM5C,oCACV,qBAAqB,iBACrB,2BAA2B;EAE3B,OAAO;EACP,YAAY;EACZ,KAAK,cAAc,uBAAuB;EAC1C,SAAS;;;;KCpCC,aAAa,KAAK,IAAI,QAAQ;;KAG9B,MAAM,GAAG,GAAG,aAAa,eAAe,IAClD,KAAK,SAAS,KACd,KAAK,KAAK,SAAS,UAAU,KAC7B,KAAK,KAAK,KAAK,SAAS,UAAU,UAAU;;;KCDlC,iBACV,qBAAqB,iBACrB,cAAc,UAAU,gBAAgB,UAAU,iBAChD,KAAK,gBAAgB,cAAc;cAE1B,cACX,qBAAqB,iBACrB,cAAc,UAAU,gBAAgB,UAAU,eAElD,OAAO,iBAAiB,cAAc,2BAAM,IAAA;;;;;;KCFlC,sCACV,qBAAqB,kBAAkB,iBACvC,2BAA2B,kBAAkB,gBAC3C,MACF;EAEE,YAAY;EACZ,KAAK,cAAc,uBAAuB;;;;;;;KCPlC,oCACV,qBAAqB,kBAAkB,iBACvC,2BAA2B,kBAAkB,gBAC3C,MACF,sCAAsC,cAAc;;EAGlD,QAAQ,MAAM;;EAGd,mBAAmB,YAAY;;EAE/B,wBAAwB,gBAAgB;;;;;;;;;KCPhC;;;;EAIV,WAAW;;;;;;EAOX,gBAAgB,MAAM,GACpB,MAAM,kBAAkB,MAAM,eAAe;;;;;;;;;;;;EAc/C,gBAAgB,OAAO;;;;;;;;;;;;EAavB,aAAa,MAAM,GAAG;;;;;;;;;;;;;;;;EAiBtB,+BACE,OAAO,mCACJ;;;;;;;;;;;EAYL,wBAAwB,mBAAmB;;;;EAK3C;;;;IAIE,SAAS"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { DevtoolUIProps } from "@hookform/devtools/dist/devToolUI";
|
|
3
|
-
|
|
4
3
|
//#region src/Register.d.ts
|
|
5
4
|
/**
|
|
6
5
|
* Use this to extend internal types.
|
|
@@ -42,7 +41,8 @@ type UseResetFormOnSubmittedOptions = undefined | {
|
|
|
42
41
|
//#endregion
|
|
43
42
|
//#region src/submit/useSubmitFormOnWatch.d.ts
|
|
44
43
|
type UseSubmitFormOnWatchOptions = {
|
|
45
|
-
/** Milliseconds to debounce form submission. (Default is none.) */
|
|
44
|
+
/** Milliseconds to debounce form submission. (Default is none.) */
|
|
45
|
+
debounce: number;
|
|
46
46
|
};
|
|
47
47
|
//#endregion
|
|
48
48
|
//#region src/form/options/RhfUtilsFormOptionsType.d.ts
|
|
@@ -52,11 +52,13 @@ type UseSubmitFormOnWatchOptions = {
|
|
|
52
52
|
* Can be extended via {@link Register}.
|
|
53
53
|
*/
|
|
54
54
|
type RhfUtilsFormOptions = {
|
|
55
|
-
/** Stop propagation of submit event. */
|
|
55
|
+
/** Stop propagation of submit event. */
|
|
56
|
+
stopSubmitPropagation?: boolean;
|
|
56
57
|
/**
|
|
57
58
|
* Request submit when user changes form values.
|
|
58
59
|
*/
|
|
59
|
-
submitOnWatch?: UseSubmitFormOnWatchOptions;
|
|
60
|
+
submitOnWatch?: UseSubmitFormOnWatchOptions;
|
|
61
|
+
/** Reset form values and state (e.g., `isDirty`) after submit -- on success and/or error. */
|
|
60
62
|
resetOnSubmitted?: UseResetFormOnSubmittedOptions;
|
|
61
63
|
/**
|
|
62
64
|
* Control dev tool options.
|
|
@@ -74,26 +76,16 @@ type RhfUtilsFormOptions = {
|
|
|
74
76
|
*/
|
|
75
77
|
type SafeFieldValues = Record<string, unknown>;
|
|
76
78
|
//#endregion
|
|
77
|
-
//#region src/form/context/utils/LastSubmitStateType.d.ts
|
|
78
|
-
type LastSubmitState = null | 'submitting' | 'success' | 'error';
|
|
79
|
-
//#endregion
|
|
80
79
|
//#region src/form/context/utils/RhfUtilsContextProvider.d.ts
|
|
81
80
|
type RhfUtilsContextProviderProps = {
|
|
82
81
|
formId: string;
|
|
83
|
-
formRef: React.RefObject<HTMLFormElement | null>;
|
|
82
|
+
formRef: React.RefObject<HTMLFormElement | null>;
|
|
83
|
+
/** Consumer-supplied options and values. */
|
|
84
84
|
options: RhfUtilsFormOptions;
|
|
85
85
|
};
|
|
86
86
|
//#endregion
|
|
87
87
|
//#region src/form/context/utils/RhfUtilsContextType.d.ts
|
|
88
|
-
type RhfUtilsContext = RhfUtilsContextProviderProps
|
|
89
|
-
/**
|
|
90
|
-
* Current form submit state.
|
|
91
|
-
*
|
|
92
|
-
* e.g., can be used to determine whether safe to redirect (navigate) without prompter.
|
|
93
|
-
* Unlike RHF's `isSubmitSuccessful`, is computed/set immediately after `onSubmit` succeeds/fails.
|
|
94
|
-
*/
|
|
95
|
-
lastSubmitStateRef: RefObject<LastSubmitState>;
|
|
96
|
-
};
|
|
88
|
+
type RhfUtilsContext = RhfUtilsContextProviderProps;
|
|
97
89
|
//#endregion
|
|
98
|
-
export {
|
|
99
|
-
//# sourceMappingURL=RhfUtilsContextType-
|
|
90
|
+
export { Register as a, RhfUtilsFormOptions as i, RhfUtilsContextProviderProps as n, SafeFieldValues as r, RhfUtilsContext as t };
|
|
91
|
+
//# sourceMappingURL=RhfUtilsContextType-DBOvBnPF.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RhfUtilsContextType-DBOvBnPF.d.ts","names":[],"sources":["../../src/Register.d.ts","../../src/submit/useResetFormOnSubmitted.ts","../../src/submit/useSubmitFormOnWatch.ts","../../src/form/options/RhfUtilsFormOptionsType.ts","../../src/form/rhf/SafeFieldValuesType.ts","../../src/form/context/utils/RhfUtilsContextProvider.tsx","../../src/form/context/utils/RhfUtilsContextType.ts"],"mappings":";;;;;;;;;;;;;;;;;;UAeiB;;;;;;KCRL;;;;;;EAWN;IAAY;;;;;EAKZ;IAAU;;;;;KChBJ;;EAEV;;;;;;;;;KCGU;;EAIR;;;;EAKA,gBAAgB;;EAGhB,mBAAmB;;;;;;EAOnB,oBAAoB,KAAK;KAGxB;EACC,2BAA2B;IAGzB;;;;;;KCnCI,kBAAkB;;;KCUlB;EACV;EACA,SAAS,MAAM,UAAU;;EAGzB,SAAS;;;;KChBC,kBAAkB"}
|