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

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 (8) hide show
  1. package/context.d.ts +1 -0
  2. package/context.js +10 -4
  3. package/context.mjs +10 -4
  4. package/helpers.d.ts +2 -2
  5. package/integrations.d.ts +17 -1
  6. package/integrations.js +16 -6
  7. package/integrations.mjs +16 -6
  8. package/package.json +2 -2
package/context.d.ts CHANGED
@@ -27,6 +27,7 @@ export type Metadata<Schema, Error> = {
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
29
  context: Form<Schema, Error>;
30
+ status?: 'success' | 'error';
30
31
  getFieldset: () => {
31
32
  [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error, Schema>;
32
33
  };
package/context.js CHANGED
@@ -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] : '';
@@ -168,6 +172,8 @@ function getFormMetadata(formId, state, subjectRef, form, noValidate) {
168
172
  switch (key) {
169
173
  case 'context':
170
174
  return form;
175
+ case 'status':
176
+ return state.submissionStatus;
171
177
  case 'onSubmit':
172
178
  return event => {
173
179
  var submitEvent = event.nativeEvent;
package/context.mjs CHANGED
@@ -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] : '';
@@ -164,6 +168,8 @@ function getFormMetadata(formId, state, subjectRef, form, noValidate) {
164
168
  switch (key) {
165
169
  case 'context':
166
170
  return form;
171
+ case 'status':
172
+ return state.submissionStatus;
167
173
  case 'onSubmit':
168
174
  return event => {
169
175
  var submitEvent = event.nativeEvent;
package/helpers.d.ts CHANGED
@@ -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;
@@ -150,7 +150,7 @@ export declare function getFormControlProps<Schema, Error>(metadata: FieldMetada
150
150
  * ```
151
151
  */
152
152
  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 & {
153
+ export declare function getInputProps<Schema extends File | File[] | null | undefined>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
154
154
  type: 'file';
155
155
  }): InputProps;
156
156
  /**
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
@@ -33,22 +33,32 @@ function getEventTarget(formId, name) {
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 => {
@@ -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
@@ -29,22 +29,32 @@ function getEventTarget(formId, name) {
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 => {
@@ -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.2",
7
7
  "main": "index.js",
8
8
  "module": "index.mjs",
9
9
  "types": "index.d.ts",
@@ -30,7 +30,7 @@
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.2"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=18"