@conform-to/react 1.0.0-pre.7 → 1.0.0-rc.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.
Files changed (6) hide show
  1. package/README +1 -1
  2. package/index.d.ts +1 -1
  3. package/integrations.d.ts +5 -3
  4. package/integrations.js +12 -12
  5. package/integrations.mjs +12 -12
  6. package/package.json +2 -2
package/README CHANGED
@@ -8,7 +8,7 @@
8
8
  ╚══════╝ ╚═════╝ ╚═╝ ╚══╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝
9
9
 
10
10
 
11
- Version 1.0.0-pre.7 / License MIT / Copyright (c) 2024 Edmund Hung
11
+ Version 1.0.0-rc.0 / License MIT / Copyright (c) 2024 Edmund Hung
12
12
 
13
13
  A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix route action and Next.js server actions.
14
14
 
package/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { type Submission, type SubmissionResult, type DefaultValue, type Intent, type FormId, type FieldName, parse, } from '@conform-to/dom';
2
2
  export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
3
3
  export { useForm, useFormMetadata, useField } from './hooks';
4
- export { useInputControl } from './integrations';
4
+ export { type InputControlOptions, useInputControl } from './integrations';
5
5
  export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';
package/integrations.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { type FieldElement } from '@conform-to/dom';
2
+ import { type Key } from 'react';
2
3
  export type InputControl = {
3
4
  value: string | undefined;
4
5
  change: (value: string) => void;
@@ -7,9 +8,10 @@ export type InputControl = {
7
8
  };
8
9
  export declare function getFieldElement(formId: string, name: string, match?: (element: FieldElement) => boolean): FieldElement | null;
9
10
  export declare function getEventTarget(formId: string, name: string): FieldElement;
10
- export declare function useInputControl(meta: {
11
- key?: string | null | undefined;
11
+ export type InputControlOptions = {
12
+ key?: Key | null | undefined;
12
13
  name: string;
13
14
  formId: string;
14
15
  initialValue?: string | undefined;
15
- }): InputControl;
16
+ };
17
+ export declare function useInputControl(metaOrOptions: InputControlOptions): InputControl;
package/integrations.js CHANGED
@@ -32,22 +32,22 @@ function getEventTarget(formId, name) {
32
32
  form === null || form === void 0 || form.appendChild(input);
33
33
  return input;
34
34
  }
35
- function useInputControl(meta) {
35
+ function useInputControl(metaOrOptions) {
36
36
  var eventDispatched = react.useRef({
37
37
  change: false,
38
38
  focus: false,
39
39
  blur: false
40
40
  });
41
- var [key, setKey] = react.useState(meta.key);
42
- var [value, setValue] = react.useState(() => meta.initialValue);
43
- if (key !== meta.key) {
44
- setValue(meta.initialValue);
45
- setKey(meta.key);
41
+ var [key, setKey] = react.useState(metaOrOptions.key);
42
+ var [value, setValue] = react.useState(() => metaOrOptions.initialValue);
43
+ if (key !== metaOrOptions.key) {
44
+ setValue(metaOrOptions.initialValue);
45
+ setKey(metaOrOptions.key);
46
46
  }
47
47
  react.useEffect(() => {
48
48
  var createEventListener = listener => {
49
49
  return event => {
50
- var element = getFieldElement(meta.formId, meta.name, element => element === event.target);
50
+ var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
51
51
  if (element) {
52
52
  eventDispatched.current[listener] = true;
53
53
  }
@@ -64,12 +64,12 @@ function useInputControl(meta) {
64
64
  document.removeEventListener('focusin', focusHandler, true);
65
65
  document.removeEventListener('focusout', blurHandler, true);
66
66
  };
67
- }, [meta.formId, meta.name]);
67
+ }, [metaOrOptions.formId, metaOrOptions.name]);
68
68
  var handlers = react.useMemo(() => {
69
69
  return {
70
70
  change(value) {
71
71
  if (!eventDispatched.current.change) {
72
- var _element = getEventTarget(meta.formId, meta.name);
72
+ var _element = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
73
73
  eventDispatched.current.change = true;
74
74
  if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
75
75
  _element.checked = _element.value === value;
@@ -114,7 +114,7 @@ function useInputControl(meta) {
114
114
  },
115
115
  focus() {
116
116
  if (!eventDispatched.current.focus) {
117
- var _element2 = getEventTarget(meta.formId, meta.name);
117
+ var _element2 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
118
118
  eventDispatched.current.focus = true;
119
119
  _element2.dispatchEvent(new FocusEvent('focusin', {
120
120
  bubbles: true
@@ -125,7 +125,7 @@ function useInputControl(meta) {
125
125
  },
126
126
  blur() {
127
127
  if (!eventDispatched.current.blur) {
128
- var _element3 = getEventTarget(meta.formId, meta.name);
128
+ var _element3 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
129
129
  eventDispatched.current.blur = true;
130
130
  _element3.dispatchEvent(new FocusEvent('focusout', {
131
131
  bubbles: true
@@ -135,7 +135,7 @@ function useInputControl(meta) {
135
135
  eventDispatched.current.blur = false;
136
136
  }
137
137
  };
138
- }, [meta.formId, meta.name]);
138
+ }, [metaOrOptions.formId, metaOrOptions.name]);
139
139
  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
140
140
  value
141
141
  });
package/integrations.mjs CHANGED
@@ -28,22 +28,22 @@ function getEventTarget(formId, name) {
28
28
  form === null || form === void 0 || form.appendChild(input);
29
29
  return input;
30
30
  }
31
- function useInputControl(meta) {
31
+ function useInputControl(metaOrOptions) {
32
32
  var eventDispatched = useRef({
33
33
  change: false,
34
34
  focus: false,
35
35
  blur: false
36
36
  });
37
- var [key, setKey] = useState(meta.key);
38
- var [value, setValue] = useState(() => meta.initialValue);
39
- if (key !== meta.key) {
40
- setValue(meta.initialValue);
41
- setKey(meta.key);
37
+ var [key, setKey] = useState(metaOrOptions.key);
38
+ var [value, setValue] = useState(() => metaOrOptions.initialValue);
39
+ if (key !== metaOrOptions.key) {
40
+ setValue(metaOrOptions.initialValue);
41
+ setKey(metaOrOptions.key);
42
42
  }
43
43
  useEffect(() => {
44
44
  var createEventListener = listener => {
45
45
  return event => {
46
- var element = getFieldElement(meta.formId, meta.name, element => element === event.target);
46
+ var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
47
47
  if (element) {
48
48
  eventDispatched.current[listener] = true;
49
49
  }
@@ -60,12 +60,12 @@ function useInputControl(meta) {
60
60
  document.removeEventListener('focusin', focusHandler, true);
61
61
  document.removeEventListener('focusout', blurHandler, true);
62
62
  };
63
- }, [meta.formId, meta.name]);
63
+ }, [metaOrOptions.formId, metaOrOptions.name]);
64
64
  var handlers = useMemo(() => {
65
65
  return {
66
66
  change(value) {
67
67
  if (!eventDispatched.current.change) {
68
- var _element = getEventTarget(meta.formId, meta.name);
68
+ var _element = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
69
69
  eventDispatched.current.change = true;
70
70
  if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
71
71
  _element.checked = _element.value === value;
@@ -110,7 +110,7 @@ function useInputControl(meta) {
110
110
  },
111
111
  focus() {
112
112
  if (!eventDispatched.current.focus) {
113
- var _element2 = getEventTarget(meta.formId, meta.name);
113
+ var _element2 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
114
114
  eventDispatched.current.focus = true;
115
115
  _element2.dispatchEvent(new FocusEvent('focusin', {
116
116
  bubbles: true
@@ -121,7 +121,7 @@ function useInputControl(meta) {
121
121
  },
122
122
  blur() {
123
123
  if (!eventDispatched.current.blur) {
124
- var _element3 = getEventTarget(meta.formId, meta.name);
124
+ var _element3 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
125
125
  eventDispatched.current.blur = true;
126
126
  _element3.dispatchEvent(new FocusEvent('focusout', {
127
127
  bubbles: true
@@ -131,7 +131,7 @@ function useInputControl(meta) {
131
131
  eventDispatched.current.blur = false;
132
132
  }
133
133
  };
134
- }, [meta.formId, meta.name]);
134
+ }, [metaOrOptions.formId, metaOrOptions.name]);
135
135
  return _objectSpread2(_objectSpread2({}, handlers), {}, {
136
136
  value
137
137
  });
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.7",
6
+ "version": "1.0.0-rc.0",
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.7"
33
+ "@conform-to/dom": "1.0.0-rc.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@types/react": "^18.2.43",