@conform-to/react 1.0.0-pre.1 → 1.0.0-pre.3

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.
Files changed (14) hide show
  1. package/_virtual/_rollupPluginBabelHelpers.js +15 -15
  2. package/_virtual/_rollupPluginBabelHelpers.mjs +15 -15
  3. package/context.d.ts +12 -11
  4. package/context.js +23 -17
  5. package/context.mjs +23 -17
  6. package/helpers.d.ts +5 -14
  7. package/helpers.js +2 -2
  8. package/helpers.mjs +3 -3
  9. package/hooks.js +21 -21
  10. package/hooks.mjs +23 -23
  11. package/integrations.d.ts +17 -1
  12. package/integrations.js +18 -8
  13. package/integrations.mjs +18 -8
  14. package/package.json +6 -2
package/_virtual/_rollupPluginBabelHelpers.js CHANGED
@@ -2,26 +2,26 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- function ownKeys(object, enumerableOnly) {
6
- var keys = Object.keys(object);
5
+ function ownKeys(e, r) {
6
+ var t = Object.keys(e);
7
7
  if (Object.getOwnPropertySymbols) {
8
- var symbols = Object.getOwnPropertySymbols(object);
9
- enumerableOnly && (symbols = symbols.filter(function (sym) {
10
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
11
- })), keys.push.apply(keys, symbols);
8
+ var o = Object.getOwnPropertySymbols(e);
9
+ r && (o = o.filter(function (r) {
10
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
11
+ })), t.push.apply(t, o);
12
12
  }
13
- return keys;
13
+ return t;
14
14
  }
15
- function _objectSpread2(target) {
16
- for (var i = 1; i < arguments.length; i++) {
17
- var source = null != arguments[i] ? arguments[i] : {};
18
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
19
- _defineProperty(target, key, source[key]);
20
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
21
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
15
+ function _objectSpread2(e) {
16
+ for (var r = 1; r < arguments.length; r++) {
17
+ var t = null != arguments[r] ? arguments[r] : {};
18
+ r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
19
+ _defineProperty(e, r, t[r]);
20
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
21
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
22
22
  });
23
23
  }
24
- return target;
24
+ return e;
25
25
  }
26
26
  function _defineProperty(obj, key, value) {
27
27
  key = _toPropertyKey(key);
package/_virtual/_rollupPluginBabelHelpers.mjs CHANGED
@@ -1,23 +1,23 @@
1
- function ownKeys(object, enumerableOnly) {
2
- var keys = Object.keys(object);
1
+ function ownKeys(e, r) {
2
+ var t = Object.keys(e);
3
3
  if (Object.getOwnPropertySymbols) {
4
- var symbols = Object.getOwnPropertySymbols(object);
5
- enumerableOnly && (symbols = symbols.filter(function (sym) {
6
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
7
- })), keys.push.apply(keys, symbols);
4
+ var o = Object.getOwnPropertySymbols(e);
5
+ r && (o = o.filter(function (r) {
6
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
7
+ })), t.push.apply(t, o);
8
8
  }
9
- return keys;
9
+ return t;
10
10
  }
11
- function _objectSpread2(target) {
12
- for (var i = 1; i < arguments.length; i++) {
13
- var source = null != arguments[i] ? arguments[i] : {};
14
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
15
- _defineProperty(target, key, source[key]);
16
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
17
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
11
+ function _objectSpread2(e) {
12
+ for (var r = 1; r < arguments.length; r++) {
13
+ var t = null != arguments[r] ? arguments[r] : {};
14
+ r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
15
+ _defineProperty(e, r, t[r]);
16
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
17
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
18
18
  });
19
19
  }
20
- return target;
20
+ return e;
21
21
  }
22
22
  function _defineProperty(obj, key, value) {
23
23
  key = _toPropertyKey(key);
package/context.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type Constraint, type FormId, type FieldName, type Form, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
1
+ import { type Constraint, type FormId, type FieldName, type FormContext, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
2
2
  import { type ReactElement, type ReactNode, type MutableRefObject } from 'react';
3
3
  export type Pretty<T> = {
4
4
  [K in keyof T]: T[K];
@@ -18,19 +18,20 @@ export type Metadata<Schema, Error> = {
18
18
  descriptionId: string;
19
19
  initialValue: FormValue<Schema>;
20
20
  value: FormValue<Schema>;
21
- error: Error | undefined;
22
- allError: Record<string, Error>;
21
+ errors: Error | undefined;
22
+ allErrors: Record<string, Error>;
23
23
  allValid: boolean;
24
24
  valid: boolean;
25
25
  dirty: boolean;
26
26
  };
27
27
  export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, Error = unknown> = Omit<Metadata<Schema, Error>, 'id'> & {
28
28
  id: FormId<Schema, Error>;
29
- context: Form<Schema, Error>;
29
+ context: FormContext<Schema, Error>;
30
+ status?: 'success' | 'error';
30
31
  getFieldset: () => {
31
32
  [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error, Schema>;
32
33
  };
33
- onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<Form<Schema>['submit']>;
34
+ onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<FormContext<Schema>['submit']>;
34
35
  onReset: (event: React.FormEvent<HTMLFormElement>) => void;
35
36
  noValidate: boolean;
36
37
  };
@@ -43,11 +44,11 @@ export type FieldMetadata<Schema = unknown, Error = unknown, FormSchema extends
43
44
  };
44
45
  getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, Error>> : never;
45
46
  };
46
- export declare const Registry: import("react").Context<Record<string, Form>>;
47
- export declare function useRegistry<Schema extends Record<string, any>, Error, Value = Schema>(formId: FormId<Schema, Error>, context?: Form<Schema, Error, Value>): Form<Schema, Error, Value>;
48
- export declare function useFormState<Error>(form: Form<any, Error>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<Error>;
47
+ export declare const Registry: import("react").Context<Record<string, FormContext>>;
48
+ export declare function useFormContext<Schema extends Record<string, any>, Error, Value = Schema>(formId: FormId<Schema, Error>, context?: FormContext<Schema, Error, Value>): FormContext<Schema, Error, Value>;
49
+ export declare function useFormState<Error>(form: FormContext<any, Error>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<Error>;
49
50
  export declare function FormProvider(props: {
50
- context: Form<any, any, any>;
51
+ context: FormContext<any, any, any>;
51
52
  children: ReactNode;
52
53
  }): ReactElement;
53
54
  export declare function FormStateInput(props: {
@@ -55,10 +56,10 @@ export declare function FormStateInput(props: {
55
56
  context?: undefined;
56
57
  } | {
57
58
  formId?: undefined;
58
- context: Form;
59
+ context: FormContext;
59
60
  }): React.ReactElement;
60
61
  export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
61
62
  export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
62
63
  export declare function getMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema>): Metadata<Schema, Error>;
63
64
  export declare function getFieldMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, Error, FormSchema>;
64
- export declare function getFormMetadata<Schema extends Record<string, any>, Error>(formId: FormId<Schema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, form: Form<Schema, Error, any>, noValidate: boolean): FormMetadata<Schema, Error>;
65
+ export declare function getFormMetadata<Schema extends Record<string, any>, Error>(formId: FormId<Schema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, Error, any>, noValidate: boolean): FormMetadata<Schema, Error>;
package/context.js CHANGED
@@ -8,7 +8,7 @@ var react = require('react');
8
8
  var jsxRuntime = require('react/jsx-runtime');
9
9
 
10
10
  var Registry = /*#__PURE__*/react.createContext({});
11
- function useRegistry(formId, context) {
11
+ function useFormContext(formId, context) {
12
12
  var registry = react.useContext(Registry);
13
13
  var form = context !== null && context !== void 0 ? context : registry[formId];
14
14
  if (!form) {
@@ -23,7 +23,7 @@ function useFormState(form, subjectRef) {
23
23
  function FormProvider(props) {
24
24
  var registry = react.useContext(Registry);
25
25
  var value = react.useMemo(() => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, registry), {}, {
26
- [props.context.id]: props.context
26
+ [props.context.formId]: props.context
27
27
  }), [registry, props.context]);
28
28
  return /*#__PURE__*/jsxRuntime.jsx(Registry.Provider, {
29
29
  value: value,
@@ -32,11 +32,11 @@ function FormProvider(props) {
32
32
  }
33
33
  function FormStateInput(props) {
34
34
  var _props$formId;
35
- var form = useRegistry((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
35
+ var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
36
36
  return /*#__PURE__*/jsxRuntime.jsx("input", {
37
37
  type: "hidden",
38
38
  name: dom.STATE,
39
- value: form.getSerializedState(),
39
+ value: context.getSerializedState(),
40
40
  form: props.formId
41
41
  });
42
42
  }
@@ -50,10 +50,14 @@ function useSubjectRef() {
50
50
  return subjectRef;
51
51
  }
52
52
  function updateSubjectRef(ref, name, subject, scope) {
53
- var _ref$current$subject$, _ref$current$subject;
54
- ref.current[subject] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, ref.current[subject]), {}, {
55
- [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
56
- });
53
+ if (subject === 'status') {
54
+ ref.current[subject] = true;
55
+ } else {
56
+ var _ref$current$subject$, _ref$current$subject;
57
+ ref.current[subject] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, ref.current[subject]), {}, {
58
+ [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
59
+ });
60
+ }
57
61
  }
58
62
  function getMetadata(formId, state, subjectRef) {
59
63
  var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -64,7 +68,7 @@ function getMetadata(formId, state, subjectRef) {
64
68
  descriptionId: "".concat(id, "-description"),
65
69
  initialValue: state.initialValue[name],
66
70
  value: state.value[name],
67
- error: state.error[name],
71
+ errors: state.error[name],
68
72
  get key() {
69
73
  return state.key[name];
70
74
  },
@@ -86,7 +90,7 @@ function getMetadata(formId, state, subjectRef) {
86
90
  }
87
91
  return true;
88
92
  },
89
- get allError() {
93
+ get allErrors() {
90
94
  if (name === '') {
91
95
  return state.error;
92
96
  }
@@ -112,14 +116,14 @@ function getMetadata(formId, state, subjectRef) {
112
116
  get(target, key, receiver) {
113
117
  switch (key) {
114
118
  case 'key':
115
- case 'error':
119
+ case 'errors':
116
120
  case 'initialValue':
117
121
  case 'value':
118
122
  case 'valid':
119
123
  case 'dirty':
120
- updateSubjectRef(subjectRef, name, key, 'name');
124
+ updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
121
125
  break;
122
- case 'allError':
126
+ case 'allErrors':
123
127
  updateSubjectRef(subjectRef, name, 'error', 'prefix');
124
128
  break;
125
129
  case 'allValid':
@@ -161,17 +165,19 @@ function getFieldMetadata(formId, state, subjectRef) {
161
165
  }
162
166
  });
163
167
  }
164
- function getFormMetadata(formId, state, subjectRef, form, noValidate) {
168
+ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
165
169
  var metadata = getMetadata(formId, state, subjectRef);
166
170
  return new Proxy(metadata, {
167
171
  get(target, key, receiver) {
168
172
  switch (key) {
169
173
  case 'context':
170
- return form;
174
+ return context;
175
+ case 'status':
176
+ return state.submissionStatus;
171
177
  case 'onSubmit':
172
178
  return event => {
173
179
  var submitEvent = event.nativeEvent;
174
- form.submit(submitEvent);
180
+ context.submit(submitEvent);
175
181
  if (submitEvent.defaultPrevented) {
176
182
  event.preventDefault();
177
183
  }
@@ -191,6 +197,6 @@ exports.getFieldMetadata = getFieldMetadata;
191
197
  exports.getFormMetadata = getFormMetadata;
192
198
  exports.getMetadata = getMetadata;
193
199
  exports.updateSubjectRef = updateSubjectRef;
200
+ exports.useFormContext = useFormContext;
194
201
  exports.useFormState = useFormState;
195
- exports.useRegistry = useRegistry;
196
202
  exports.useSubjectRef = useSubjectRef;
package/context.mjs CHANGED
@@ -4,7 +4,7 @@ import { useContext, useMemo, createContext, useCallback, useSyncExternalStore,
4
4
  import { jsx } from 'react/jsx-runtime';
5
5
 
6
6
  var Registry = /*#__PURE__*/createContext({});
7
- function useRegistry(formId, context) {
7
+ function useFormContext(formId, context) {
8
8
  var registry = useContext(Registry);
9
9
  var form = context !== null && context !== void 0 ? context : registry[formId];
10
10
  if (!form) {
@@ -19,7 +19,7 @@ function useFormState(form, subjectRef) {
19
19
  function FormProvider(props) {
20
20
  var registry = useContext(Registry);
21
21
  var value = useMemo(() => _objectSpread2(_objectSpread2({}, registry), {}, {
22
- [props.context.id]: props.context
22
+ [props.context.formId]: props.context
23
23
  }), [registry, props.context]);
24
24
  return /*#__PURE__*/jsx(Registry.Provider, {
25
25
  value: value,
@@ -28,11 +28,11 @@ function FormProvider(props) {
28
28
  }
29
29
  function FormStateInput(props) {
30
30
  var _props$formId;
31
- var form = useRegistry((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
31
+ var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
32
32
  return /*#__PURE__*/jsx("input", {
33
33
  type: "hidden",
34
34
  name: STATE,
35
- value: form.getSerializedState(),
35
+ value: context.getSerializedState(),
36
36
  form: props.formId
37
37
  });
38
38
  }
@@ -46,10 +46,14 @@ function useSubjectRef() {
46
46
  return subjectRef;
47
47
  }
48
48
  function updateSubjectRef(ref, name, subject, scope) {
49
- var _ref$current$subject$, _ref$current$subject;
50
- ref.current[subject] = _objectSpread2(_objectSpread2({}, ref.current[subject]), {}, {
51
- [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
52
- });
49
+ if (subject === 'status') {
50
+ ref.current[subject] = true;
51
+ } else {
52
+ var _ref$current$subject$, _ref$current$subject;
53
+ ref.current[subject] = _objectSpread2(_objectSpread2({}, ref.current[subject]), {}, {
54
+ [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
55
+ });
56
+ }
53
57
  }
54
58
  function getMetadata(formId, state, subjectRef) {
55
59
  var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -60,7 +64,7 @@ function getMetadata(formId, state, subjectRef) {
60
64
  descriptionId: "".concat(id, "-description"),
61
65
  initialValue: state.initialValue[name],
62
66
  value: state.value[name],
63
- error: state.error[name],
67
+ errors: state.error[name],
64
68
  get key() {
65
69
  return state.key[name];
66
70
  },
@@ -82,7 +86,7 @@ function getMetadata(formId, state, subjectRef) {
82
86
  }
83
87
  return true;
84
88
  },
85
- get allError() {
89
+ get allErrors() {
86
90
  if (name === '') {
87
91
  return state.error;
88
92
  }
@@ -108,14 +112,14 @@ function getMetadata(formId, state, subjectRef) {
108
112
  get(target, key, receiver) {
109
113
  switch (key) {
110
114
  case 'key':
111
- case 'error':
115
+ case 'errors':
112
116
  case 'initialValue':
113
117
  case 'value':
114
118
  case 'valid':
115
119
  case 'dirty':
116
- updateSubjectRef(subjectRef, name, key, 'name');
120
+ updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
117
121
  break;
118
- case 'allError':
122
+ case 'allErrors':
119
123
  updateSubjectRef(subjectRef, name, 'error', 'prefix');
120
124
  break;
121
125
  case 'allValid':
@@ -157,17 +161,19 @@ function getFieldMetadata(formId, state, subjectRef) {
157
161
  }
158
162
  });
159
163
  }
160
- function getFormMetadata(formId, state, subjectRef, form, noValidate) {
164
+ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
161
165
  var metadata = getMetadata(formId, state, subjectRef);
162
166
  return new Proxy(metadata, {
163
167
  get(target, key, receiver) {
164
168
  switch (key) {
165
169
  case 'context':
166
- return form;
170
+ return context;
171
+ case 'status':
172
+ return state.submissionStatus;
167
173
  case 'onSubmit':
168
174
  return event => {
169
175
  var submitEvent = event.nativeEvent;
170
- form.submit(submitEvent);
176
+ context.submit(submitEvent);
171
177
  if (submitEvent.defaultPrevented) {
172
178
  event.preventDefault();
173
179
  }
@@ -180,4 +186,4 @@ function getFormMetadata(formId, state, subjectRef, form, noValidate) {
180
186
  });
181
187
  }
182
188
 
183
- export { FormProvider, FormStateInput, Registry, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormState, useRegistry, useSubjectRef };
189
+ export { FormProvider, FormStateInput, Registry, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormContext, useFormState, useSubjectRef };
package/helpers.d.ts CHANGED
@@ -2,12 +2,12 @@
2
2
  import { type Intent } from '@conform-to/dom';
3
3
  import type { FormMetadata, FieldMetadata, Metadata, Pretty, Primitive } from './context';
4
4
  type FormControlProps = {
5
+ key: string | undefined;
5
6
  id: string;
6
7
  name: string;
7
8
  form: string;
8
9
  required?: boolean;
9
10
  autoFocus?: boolean;
10
- tabIndex?: number;
11
11
  'aria-describedby'?: string;
12
12
  'aria-invalid'?: boolean;
13
13
  };
@@ -29,7 +29,7 @@ type FormControlOptions = {
29
29
  ariaAttributes: false;
30
30
  };
31
31
  type InputProps = Pretty<FormControlProps & {
32
- type?: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
32
+ type?: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
33
33
  minLength?: number;
34
34
  maxLength?: number;
35
35
  min?: string | number;
@@ -119,16 +119,7 @@ export declare function getFieldsetProps<Schema extends Record<string, any> | un
119
119
  * Derives common properties of a form control based on the field metadata,
120
120
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
121
121
  */
122
- export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): {
123
- 'aria-invalid'?: boolean | undefined;
124
- 'aria-describedby'?: string | undefined;
125
- id: string;
126
- name: import("@conform-to/dom").FieldName<Schema>;
127
- form: import("@conform-to/dom").FormId<any, Error>;
128
- key: string | undefined;
129
- required: true | undefined;
130
- autoFocus: true | undefined;
131
- };
122
+ export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): FormControlProps;
132
123
  /**
133
124
  * Derives the properties of an input element based on the field metadata,
134
125
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
@@ -150,7 +141,7 @@ export declare function getFormControlProps<Schema, Error>(metadata: FieldMetada
150
141
  * ```
151
142
  */
152
143
  export declare function getInputProps<Schema extends Exclude<Primitive, File>>(metadata: FieldMetadata<Schema, any, any>, options?: InputOptions): InputProps;
153
- export declare function getInputProps<Schema extends File | File[]>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
144
+ export declare function getInputProps<Schema extends File | File[] | null | undefined>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
154
145
  type: 'file';
155
146
  }): InputProps;
156
147
  /**
@@ -219,7 +210,7 @@ export declare function getCollectionProps<Schema extends Array<string | boolean
219
210
  */
220
211
  value?: boolean;
221
212
  }>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
222
- export declare function getControlButtonProps(formId: string, intents: Array<Intent>): {
213
+ export declare function getControlButtonProps(formId: string, intent: Intent): {
223
214
  name: string;
224
215
  value: string;
225
216
  form: string;
package/helpers.js CHANGED
@@ -217,10 +217,10 @@ function getCollectionProps(metadata, options) {
217
217
  }));
218
218
  });
219
219
  }
220
- function getControlButtonProps(formId, intents) {
220
+ function getControlButtonProps(formId, intent) {
221
221
  return {
222
222
  name: dom.INTENT,
223
- value: dom.serializeIntents(intents),
223
+ value: dom.serializeIntent(intent),
224
224
  form: formId,
225
225
  formNoValidate: true
226
226
  };
package/helpers.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
2
- import { INTENT, serializeIntents } from '@conform-to/dom';
2
+ import { INTENT, serializeIntent } from '@conform-to/dom';
3
3
 
4
4
  /**
5
5
  * Cleanup `undefined` from the result.
@@ -213,10 +213,10 @@ function getCollectionProps(metadata, options) {
213
213
  }));
214
214
  });
215
215
  }
216
- function getControlButtonProps(formId, intents) {
216
+ function getControlButtonProps(formId, intent) {
217
217
  return {
218
218
  name: INTENT,
219
- value: serializeIntents(intents),
219
+ value: serializeIntent(intent),
220
220
  form: formId,
221
221
  formNoValidate: true
222
222
  };
package/hooks.js CHANGED
@@ -30,44 +30,44 @@ function useNoValidate() {
30
30
  }
31
31
  function useForm(options) {
32
32
  var formId = useFormId(options.id);
33
- var initializeContext = () => dom.createForm(formId, options);
34
- var [form, setForm] = react.useState(initializeContext);
33
+ var initializeContext = () => dom.createFormContext(formId, options);
34
+ var [context$1, setFormContext] = react.useState(initializeContext);
35
35
 
36
36
  // If id changes, reinitialize the form immediately
37
- if (formId !== form.id) {
38
- setForm(initializeContext);
37
+ if (formId !== context$1.formId) {
38
+ setFormContext(initializeContext);
39
39
  }
40
40
  var optionsRef = react.useRef(options);
41
41
  useSafeLayoutEffect(() => {
42
- document.addEventListener('input', form.input);
43
- document.addEventListener('focusout', form.blur);
44
- document.addEventListener('reset', form.reset);
42
+ document.addEventListener('input', context$1.input);
43
+ document.addEventListener('focusout', context$1.blur);
44
+ document.addEventListener('reset', context$1.reset);
45
45
  return () => {
46
- document.removeEventListener('input', form.input);
47
- document.removeEventListener('focusout', form.blur);
48
- document.removeEventListener('reset', form.reset);
46
+ document.removeEventListener('input', context$1.input);
47
+ document.removeEventListener('focusout', context$1.blur);
48
+ document.removeEventListener('reset', context$1.reset);
49
49
  };
50
- }, [form]);
50
+ }, [context$1]);
51
51
  useSafeLayoutEffect(() => {
52
52
  if (options.lastResult === optionsRef.current.lastResult) {
53
53
  // If there is no change, do nothing
54
54
  return;
55
55
  }
56
56
  if (options.lastResult) {
57
- form.report(options.lastResult);
57
+ context$1.report(options.lastResult);
58
58
  } else {
59
59
  var _document$forms$named;
60
- (_document$forms$named = document.forms.namedItem(form.id)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.reset();
60
+ (_document$forms$named = document.forms.namedItem(context$1.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
61
61
  }
62
- }, [form, options.lastResult]);
62
+ }, [context$1, options.lastResult]);
63
63
  useSafeLayoutEffect(() => {
64
64
  optionsRef.current = options;
65
- form.update(options);
65
+ context$1.update(options);
66
66
  });
67
67
  var subjectRef = context.useSubjectRef();
68
- var state = context.useFormState(form, subjectRef);
68
+ var state = context.useFormState(context$1, subjectRef);
69
69
  var noValidate = useNoValidate(options.defaultNoValidate);
70
- var meta = context.getFormMetadata(formId, state, subjectRef, form, noValidate);
70
+ var meta = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
71
71
  return {
72
72
  meta,
73
73
  fields: meta.getFieldset()
@@ -75,14 +75,14 @@ function useForm(options) {
75
75
  }
76
76
  function useFormMetadata(options) {
77
77
  var subjectRef = context.useSubjectRef();
78
- var form = context.useRegistry(options.formId);
79
- var state = context.useFormState(form, subjectRef);
78
+ var context$1 = context.useFormContext(options.formId);
79
+ var state = context.useFormState(context$1, subjectRef);
80
80
  var noValidate = useNoValidate(options.defaultNoValidate);
81
- return context.getFormMetadata(options.formId, state, subjectRef, form, noValidate);
81
+ return context.getFormMetadata(options.formId, state, subjectRef, context$1, noValidate);
82
82
  }
83
83
  function useField(options) {
84
84
  var subjectRef = context.useSubjectRef();
85
- var context$1 = context.useRegistry(options.formId);
85
+ var context$1 = context.useFormContext(options.formId);
86
86
  var state = context.useFormState(context$1, subjectRef);
87
87
  var meta = context.getFieldMetadata(options.formId, state, subjectRef, options.name);
88
88
  var form = context.getFormMetadata(options.formId, state, subjectRef, context$1, false);
package/hooks.mjs CHANGED
@@ -1,6 +1,6 @@
1
- import { createForm } from '@conform-to/dom';
1
+ import { createFormContext } from '@conform-to/dom';
2
2
  import { useState, useRef, useEffect, useLayoutEffect, useId } from 'react';
3
- import { useSubjectRef, useFormState, getFormMetadata, useRegistry, getFieldMetadata } from './context.mjs';
3
+ import { useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
4
4
 
5
5
  /**
6
6
  * useLayoutEffect is client-only.
@@ -26,44 +26,44 @@ function useNoValidate() {
26
26
  }
27
27
  function useForm(options) {
28
28
  var formId = useFormId(options.id);
29
- var initializeContext = () => createForm(formId, options);
30
- var [form, setForm] = useState(initializeContext);
29
+ var initializeContext = () => createFormContext(formId, options);
30
+ var [context, setFormContext] = useState(initializeContext);
31
31
 
32
32
  // If id changes, reinitialize the form immediately
33
- if (formId !== form.id) {
34
- setForm(initializeContext);
33
+ if (formId !== context.formId) {
34
+ setFormContext(initializeContext);
35
35
  }
36
36
  var optionsRef = useRef(options);
37
37
  useSafeLayoutEffect(() => {
38
- document.addEventListener('input', form.input);
39
- document.addEventListener('focusout', form.blur);
40
- document.addEventListener('reset', form.reset);
38
+ document.addEventListener('input', context.input);
39
+ document.addEventListener('focusout', context.blur);
40
+ document.addEventListener('reset', context.reset);
41
41
  return () => {
42
- document.removeEventListener('input', form.input);
43
- document.removeEventListener('focusout', form.blur);
44
- document.removeEventListener('reset', form.reset);
42
+ document.removeEventListener('input', context.input);
43
+ document.removeEventListener('focusout', context.blur);
44
+ document.removeEventListener('reset', context.reset);
45
45
  };
46
- }, [form]);
46
+ }, [context]);
47
47
  useSafeLayoutEffect(() => {
48
48
  if (options.lastResult === optionsRef.current.lastResult) {
49
49
  // If there is no change, do nothing
50
50
  return;
51
51
  }
52
52
  if (options.lastResult) {
53
- form.report(options.lastResult);
53
+ context.report(options.lastResult);
54
54
  } else {
55
55
  var _document$forms$named;
56
- (_document$forms$named = document.forms.namedItem(form.id)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.reset();
56
+ (_document$forms$named = document.forms.namedItem(context.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
57
57
  }
58
- }, [form, options.lastResult]);
58
+ }, [context, options.lastResult]);
59
59
  useSafeLayoutEffect(() => {
60
60
  optionsRef.current = options;
61
- form.update(options);
61
+ context.update(options);
62
62
  });
63
63
  var subjectRef = useSubjectRef();
64
- var state = useFormState(form, subjectRef);
64
+ var state = useFormState(context, subjectRef);
65
65
  var noValidate = useNoValidate(options.defaultNoValidate);
66
- var meta = getFormMetadata(formId, state, subjectRef, form, noValidate);
66
+ var meta = getFormMetadata(formId, state, subjectRef, context, noValidate);
67
67
  return {
68
68
  meta,
69
69
  fields: meta.getFieldset()
@@ -71,14 +71,14 @@ function useForm(options) {
71
71
  }
72
72
  function useFormMetadata(options) {
73
73
  var subjectRef = useSubjectRef();
74
- var form = useRegistry(options.formId);
75
- var state = useFormState(form, subjectRef);
74
+ var context = useFormContext(options.formId);
75
+ var state = useFormState(context, subjectRef);
76
76
  var noValidate = useNoValidate(options.defaultNoValidate);
77
- return getFormMetadata(options.formId, state, subjectRef, form, noValidate);
77
+ return getFormMetadata(options.formId, state, subjectRef, context, noValidate);
78
78
  }
79
79
  function useField(options) {
80
80
  var subjectRef = useSubjectRef();
81
- var context = useRegistry(options.formId);
81
+ var context = useFormContext(options.formId);
82
82
  var state = useFormState(context, subjectRef);
83
83
  var meta = getFieldMetadata(options.formId, state, subjectRef, options.name);
84
84
  var form = getFormMetadata(options.formId, state, subjectRef, context, false);
package/integrations.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type FieldElement, type FormValue } from '@conform-to/dom';
1
+ import { type FieldElement, type FormValue, FieldName, FormId } from '@conform-to/dom';
2
2
  import { type FieldMetadata } from './context';
3
3
  export type InputControl<Value> = {
4
4
  value: Value;
@@ -11,8 +11,24 @@ export declare function getEventTarget(formId: string, name: string): FieldEleme
11
11
  export declare function useInputControl<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: {
12
12
  onFocus?: (event: Event) => void;
13
13
  }): InputControl<string | undefined>;
14
+ export declare function useInputControl<Schema>(options: {
15
+ key?: string;
16
+ name: FieldName<Schema>;
17
+ formId: FormId<any, any>;
18
+ initialValue: FormValue<Schema>;
19
+ onFocus?: (event: Event) => void;
20
+ }): InputControl<string | undefined>;
14
21
  export declare function useInputControl<Schema, Value>(metadata: FieldMetadata<Schema, any, any>, options: {
15
22
  initialize: (value: FormValue<Schema> | undefined) => Value;
16
23
  serialize?: (value: Value) => string;
17
24
  onFocus?: (event: Event) => void;
18
25
  }): InputControl<Value>;
26
+ export declare function useInputControl<Schema, Value>(options: {
27
+ key?: string;
28
+ name: FieldName<Schema>;
29
+ formId: FormId<any, any>;
30
+ initialValue: FormValue<Schema>;
31
+ initialize: (value: FormValue<Schema> | undefined) => Value;
32
+ serialize?: (value: Value) => string;
33
+ onFocus?: (event: Event) => void;
34
+ }): InputControl<Value>;
package/integrations.js CHANGED
@@ -29,26 +29,36 @@ function getEventTarget(formId, name) {
29
29
  var input = document.createElement('input');
30
30
  input.type = 'hidden';
31
31
  input.name = name;
32
- form === null || form === void 0 ? void 0 : form.appendChild(input);
32
+ form === null || form === void 0 || form.appendChild(input);
33
33
  return input;
34
34
  }
35
35
  function useInputControl(metadata, options) {
36
- var _options$initialize;
36
+ var _options$initialize, _options$serialize, _options$onFocus;
37
37
  var eventDispatched = react.useRef({
38
38
  change: false,
39
39
  focus: false,
40
40
  blur: false
41
41
  });
42
42
  var [key, setKey] = react.useState(metadata.key);
43
- var optionsRef = react.useRef(options);
44
- var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : value => value === null || value === void 0 ? void 0 : value.toString();
43
+ var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : 'initialize' in metadata && metadata.initialize ? metadata.initialize : value => value === null || value === void 0 ? void 0 : value.toString();
44
+ var serialize = (_options$serialize = options === null || options === void 0 ? void 0 : options.serialize) !== null && _options$serialize !== void 0 ? _options$serialize : 'serialize' in metadata && metadata.serialize ? metadata.serialize : undefined;
45
+ var onFocus = (_options$onFocus = options === null || options === void 0 ? void 0 : options.onFocus) !== null && _options$onFocus !== void 0 ? _options$onFocus : 'onFocus' in metadata ? metadata.onFocus : undefined;
46
+ var optionsRef = react.useRef({
47
+ initialize,
48
+ serialize,
49
+ onFocus
50
+ });
45
51
  var [value, setValue] = react.useState(() => initialize(metadata.initialValue));
46
52
  if (key !== metadata.key) {
47
53
  setValue(initialize(metadata.initialValue));
48
54
  setKey(metadata.key);
49
55
  }
50
56
  react.useEffect(() => {
51
- optionsRef.current = options;
57
+ optionsRef.current = {
58
+ initialize,
59
+ serialize,
60
+ onFocus
61
+ };
52
62
  });
53
63
  react.useEffect(() => {
54
64
  var createEventListener = listener => {
@@ -57,7 +67,7 @@ function useInputControl(metadata, options) {
57
67
  if (element) {
58
68
  if (listener === 'focus') {
59
69
  var _optionsRef$current, _optionsRef$current$o;
60
- (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 ? void 0 : _optionsRef$current$o.call(_optionsRef$current, event);
70
+ (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, event);
61
71
  }
62
72
  eventDispatched.current[listener] = true;
63
73
  }
@@ -79,9 +89,9 @@ function useInputControl(metadata, options) {
79
89
  return {
80
90
  change(value) {
81
91
  if (!eventDispatched.current.change) {
82
- var _ref, _optionsRef$current$s, _optionsRef$current2, _optionsRef$current2$;
92
+ var _ref, _optionsRef$current$s, _optionsRef$current$s2, _optionsRef$current2;
83
93
  var _element = getEventTarget(metadata.formId, metadata.name);
84
- var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 || (_optionsRef$current2$ = _optionsRef$current2.serialize) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
94
+ var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current$s2 = (_optionsRef$current2 = optionsRef.current).serialize) === null || _optionsRef$current$s2 === void 0 ? void 0 : _optionsRef$current$s2.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
85
95
  eventDispatched.current.change = true;
86
96
  if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
87
97
  if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
package/integrations.mjs CHANGED
@@ -25,26 +25,36 @@ function getEventTarget(formId, name) {
25
25
  var input = document.createElement('input');
26
26
  input.type = 'hidden';
27
27
  input.name = name;
28
- form === null || form === void 0 ? void 0 : form.appendChild(input);
28
+ form === null || form === void 0 || form.appendChild(input);
29
29
  return input;
30
30
  }
31
31
  function useInputControl(metadata, options) {
32
- var _options$initialize;
32
+ var _options$initialize, _options$serialize, _options$onFocus;
33
33
  var eventDispatched = useRef({
34
34
  change: false,
35
35
  focus: false,
36
36
  blur: false
37
37
  });
38
38
  var [key, setKey] = useState(metadata.key);
39
- var optionsRef = useRef(options);
40
- var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : value => value === null || value === void 0 ? void 0 : value.toString();
39
+ var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : 'initialize' in metadata && metadata.initialize ? metadata.initialize : value => value === null || value === void 0 ? void 0 : value.toString();
40
+ var serialize = (_options$serialize = options === null || options === void 0 ? void 0 : options.serialize) !== null && _options$serialize !== void 0 ? _options$serialize : 'serialize' in metadata && metadata.serialize ? metadata.serialize : undefined;
41
+ var onFocus = (_options$onFocus = options === null || options === void 0 ? void 0 : options.onFocus) !== null && _options$onFocus !== void 0 ? _options$onFocus : 'onFocus' in metadata ? metadata.onFocus : undefined;
42
+ var optionsRef = useRef({
43
+ initialize,
44
+ serialize,
45
+ onFocus
46
+ });
41
47
  var [value, setValue] = useState(() => initialize(metadata.initialValue));
42
48
  if (key !== metadata.key) {
43
49
  setValue(initialize(metadata.initialValue));
44
50
  setKey(metadata.key);
45
51
  }
46
52
  useEffect(() => {
47
- optionsRef.current = options;
53
+ optionsRef.current = {
54
+ initialize,
55
+ serialize,
56
+ onFocus
57
+ };
48
58
  });
49
59
  useEffect(() => {
50
60
  var createEventListener = listener => {
@@ -53,7 +63,7 @@ function useInputControl(metadata, options) {
53
63
  if (element) {
54
64
  if (listener === 'focus') {
55
65
  var _optionsRef$current, _optionsRef$current$o;
56
- (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 ? void 0 : _optionsRef$current$o.call(_optionsRef$current, event);
66
+ (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, event);
57
67
  }
58
68
  eventDispatched.current[listener] = true;
59
69
  }
@@ -75,9 +85,9 @@ function useInputControl(metadata, options) {
75
85
  return {
76
86
  change(value) {
77
87
  if (!eventDispatched.current.change) {
78
- var _ref, _optionsRef$current$s, _optionsRef$current2, _optionsRef$current2$;
88
+ var _ref, _optionsRef$current$s, _optionsRef$current$s2, _optionsRef$current2;
79
89
  var _element = getEventTarget(metadata.formId, metadata.name);
80
- var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 || (_optionsRef$current2$ = _optionsRef$current2.serialize) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
90
+ var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current$s2 = (_optionsRef$current2 = optionsRef.current).serialize) === null || _optionsRef$current$s2 === void 0 ? void 0 : _optionsRef$current$s2.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
81
91
  eventDispatched.current.change = true;
82
92
  if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
83
93
  if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Conform view adapter for react",
4
4
  "homepage": "https://conform.guide",
5
5
  "license": "MIT",
6
- "version": "1.0.0-pre.1",
6
+ "version": "1.0.0-pre.3",
7
7
  "main": "index.js",
8
8
  "module": "index.mjs",
9
9
  "types": "index.d.ts",
@@ -30,7 +30,11 @@
30
30
  "url": "https://github.com/edmundhung/conform/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@conform-to/dom": "1.0.0-pre.1"
33
+ "@conform-to/dom": "1.0.0-pre.3"
34
+ },
35
+ "devDependencies": {
36
+ "@types/react": "^18.2.43",
37
+ "react": "^18.2.0"
34
38
  },
35
39
  "peerDependencies": {
36
40
  "react": ">=18"