@conform-to/react 0.4.0 → 0.4.1
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/base.d.ts +17 -0
- package/base.js +112 -0
- package/helpers.d.ts +34 -5
- package/hooks.d.ts +4 -4
- package/hooks.js +7 -7
- package/index.d.ts +1 -1
- package/module/base.js +107 -0
- package/module/hooks.js +7 -7
- package/package.json +2 -2
package/base.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type InputHTMLAttributes, type RefObject } from 'react';
|
|
2
|
+
declare type EventLikeOrString = {
|
|
3
|
+
target: {
|
|
4
|
+
value: string;
|
|
5
|
+
};
|
|
6
|
+
} | string;
|
|
7
|
+
declare type InputControl = {
|
|
8
|
+
onChange: (eventLikeOrString: EventLikeOrString) => void;
|
|
9
|
+
onInput: (eventLikeOrString: EventLikeOrString) => void;
|
|
10
|
+
onFocus: () => void;
|
|
11
|
+
onBlur: () => void;
|
|
12
|
+
};
|
|
13
|
+
export declare function useInputControl(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>): InputControl;
|
|
14
|
+
export declare const BaseInput: import("react").ForwardRefExoticComponent<{
|
|
15
|
+
name: string;
|
|
16
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value" | "defaultValue"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
17
|
+
export {};
|
package/base.js
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
|
|
8
|
+
var _excluded = ["hidden", "className", "style"];
|
|
9
|
+
/**
|
|
10
|
+
* Triggering react custom change event
|
|
11
|
+
* Solution based on dom-testing-library
|
|
12
|
+
* @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
|
|
13
|
+
* @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
|
|
14
|
+
*/
|
|
15
|
+
function setNativeValue(element, value) {
|
|
16
|
+
var {
|
|
17
|
+
set: valueSetter
|
|
18
|
+
} = Object.getOwnPropertyDescriptor(element, 'value') || {};
|
|
19
|
+
var prototype = Object.getPrototypeOf(element);
|
|
20
|
+
var {
|
|
21
|
+
set: prototypeValueSetter
|
|
22
|
+
} = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
|
|
23
|
+
if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
|
|
24
|
+
prototypeValueSetter.call(element, value);
|
|
25
|
+
} else {
|
|
26
|
+
if (valueSetter) {
|
|
27
|
+
valueSetter.call(element, value);
|
|
28
|
+
} else {
|
|
29
|
+
throw new Error('The given element does not have a value setter');
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
function useInputControl(ref) {
|
|
34
|
+
function getInputElement() {
|
|
35
|
+
var $input = ref.current;
|
|
36
|
+
if (!$input) {
|
|
37
|
+
console.warn('input ref is not available; Maybe you forget to setup the ref?');
|
|
38
|
+
}
|
|
39
|
+
return $input;
|
|
40
|
+
}
|
|
41
|
+
return {
|
|
42
|
+
onChange(eventLikeOrString) {
|
|
43
|
+
var $input = getInputElement();
|
|
44
|
+
var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
|
|
45
|
+
if ($input && $input.value !== value) {
|
|
46
|
+
$input.dispatchEvent(new InputEvent('beforeinput', {
|
|
47
|
+
bubbles: true,
|
|
48
|
+
cancelable: true
|
|
49
|
+
}));
|
|
50
|
+
setNativeValue($input, value);
|
|
51
|
+
$input.dispatchEvent(new InputEvent('input', {
|
|
52
|
+
bubbles: true,
|
|
53
|
+
cancelable: true
|
|
54
|
+
}));
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
onInput(eventLikeOrString) {
|
|
58
|
+
this.onChange(eventLikeOrString);
|
|
59
|
+
},
|
|
60
|
+
onFocus() {
|
|
61
|
+
var $input = getInputElement();
|
|
62
|
+
if ($input) {
|
|
63
|
+
$input.dispatchEvent(new FocusEvent('focusin', {
|
|
64
|
+
bubbles: true,
|
|
65
|
+
cancelable: true
|
|
66
|
+
}));
|
|
67
|
+
$input.dispatchEvent(new FocusEvent('focus', {
|
|
68
|
+
cancelable: true
|
|
69
|
+
}));
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
onBlur() {
|
|
73
|
+
var $input = getInputElement();
|
|
74
|
+
if ($input) {
|
|
75
|
+
$input.dispatchEvent(new FocusEvent('focusout', {
|
|
76
|
+
bubbles: true,
|
|
77
|
+
cancelable: true
|
|
78
|
+
}));
|
|
79
|
+
$input.dispatchEvent(new FocusEvent('blur', {
|
|
80
|
+
cancelable: true
|
|
81
|
+
}));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
function BaseInputImpl(_ref, ref) {
|
|
87
|
+
var {
|
|
88
|
+
hidden = true,
|
|
89
|
+
className,
|
|
90
|
+
style
|
|
91
|
+
} = _ref,
|
|
92
|
+
props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
93
|
+
return /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.objectSpread2({
|
|
94
|
+
ref,
|
|
95
|
+
className: hidden ? '' : className,
|
|
96
|
+
style: hidden ? {
|
|
97
|
+
position: 'absolute',
|
|
98
|
+
width: '1px',
|
|
99
|
+
height: '1px',
|
|
100
|
+
padding: 0,
|
|
101
|
+
margin: '-1px',
|
|
102
|
+
overflow: 'hidden',
|
|
103
|
+
clip: 'rect(0,0,0,0)',
|
|
104
|
+
whiteSpace: 'nowrap',
|
|
105
|
+
borderWidth: 0
|
|
106
|
+
} : style
|
|
107
|
+
}, props));
|
|
108
|
+
}
|
|
109
|
+
var BaseInput = /*#__PURE__*/react.forwardRef(BaseInputImpl);
|
|
110
|
+
|
|
111
|
+
exports.BaseInput = BaseInput;
|
|
112
|
+
exports.useInputControl = useInputControl;
|
package/helpers.d.ts
CHANGED
|
@@ -1,8 +1,37 @@
|
|
|
1
1
|
import { type FieldConfig, type Primitive } from '@conform-to/dom';
|
|
2
|
-
import { type
|
|
2
|
+
import { type HTMLInputTypeAttribute } from 'react';
|
|
3
|
+
interface FieldProps {
|
|
4
|
+
name: string;
|
|
5
|
+
form?: string;
|
|
6
|
+
required?: boolean;
|
|
7
|
+
autoFocus?: boolean;
|
|
8
|
+
}
|
|
9
|
+
interface InputProps<Schema> extends FieldProps {
|
|
10
|
+
type?: HTMLInputTypeAttribute;
|
|
11
|
+
minLength?: number;
|
|
12
|
+
maxLength?: number;
|
|
13
|
+
min?: Schema extends number ? number : string | number;
|
|
14
|
+
max?: Schema extends number ? number : string | number;
|
|
15
|
+
step?: Schema extends number ? number : string | number;
|
|
16
|
+
pattern?: string;
|
|
17
|
+
multiple?: boolean;
|
|
18
|
+
value?: string;
|
|
19
|
+
defaultChecked?: boolean;
|
|
20
|
+
defaultValue?: string;
|
|
21
|
+
}
|
|
22
|
+
interface SelectProps extends FieldProps {
|
|
23
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
24
|
+
multiple?: boolean;
|
|
25
|
+
}
|
|
26
|
+
interface TextareaProps extends FieldProps {
|
|
27
|
+
minLength?: number;
|
|
28
|
+
maxLength?: number;
|
|
29
|
+
defaultValue?: string;
|
|
30
|
+
}
|
|
3
31
|
export declare function input<Schema extends Primitive>(config: FieldConfig<Schema>, { type, value }?: {
|
|
4
|
-
type?:
|
|
32
|
+
type?: HTMLInputTypeAttribute;
|
|
5
33
|
value?: string;
|
|
6
|
-
}):
|
|
7
|
-
export declare function select<Schema extends Primitive | Array<Primitive>>(config: FieldConfig<Schema>):
|
|
8
|
-
export declare function textarea<Schema extends Primitive>(config: FieldConfig<Schema>):
|
|
34
|
+
}): InputProps<Schema>;
|
|
35
|
+
export declare function select<Schema extends Primitive | Array<Primitive>>(config: FieldConfig<Schema>): SelectProps;
|
|
36
|
+
export declare function textarea<Schema extends Primitive>(config: FieldConfig<Schema>): TextareaProps;
|
|
37
|
+
export {};
|
package/hooks.d.ts
CHANGED
|
@@ -66,7 +66,7 @@ interface Form<Schema extends Record<string, any>> {
|
|
|
66
66
|
* Returns properties required to hook into form events.
|
|
67
67
|
* Applied custom validation and define when error should be reported.
|
|
68
68
|
*
|
|
69
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
69
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
|
|
70
70
|
*/
|
|
71
71
|
export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
|
|
72
72
|
/**
|
|
@@ -107,7 +107,7 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
|
|
|
107
107
|
/**
|
|
108
108
|
* Returns all the information about the fieldset.
|
|
109
109
|
*
|
|
110
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
110
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldset
|
|
111
111
|
*/
|
|
112
112
|
export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldsetConfig<Schema>): Fieldset<Schema>;
|
|
113
113
|
export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Fieldset<Schema>;
|
|
@@ -124,7 +124,7 @@ declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Sche
|
|
|
124
124
|
* Returns a list of key and config, with a group of helpers
|
|
125
125
|
* configuring buttons for list manipulation
|
|
126
126
|
*
|
|
127
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
127
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
|
|
128
128
|
*/
|
|
129
129
|
export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
|
|
130
130
|
Array<{
|
|
@@ -160,7 +160,7 @@ interface InputControl<Element extends {
|
|
|
160
160
|
* This is particular useful when integrating dropdown and datepicker whichs
|
|
161
161
|
* introduces custom input mode.
|
|
162
162
|
*
|
|
163
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
163
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
|
|
164
164
|
*/
|
|
165
165
|
export declare function useControlledInput<Element extends {
|
|
166
166
|
focus: () => void;
|
package/hooks.js
CHANGED
|
@@ -11,7 +11,7 @@ var helpers = require('./helpers.js');
|
|
|
11
11
|
* Returns properties required to hook into form events.
|
|
12
12
|
* Applied custom validation and define when error should be reported.
|
|
13
13
|
*
|
|
14
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
14
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
|
|
15
15
|
*/
|
|
16
16
|
function useForm() {
|
|
17
17
|
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -142,7 +142,7 @@ function useForm() {
|
|
|
142
142
|
var nativeEvent = event.nativeEvent;
|
|
143
143
|
var submitter = nativeEvent.submitter;
|
|
144
144
|
for (var element of form.elements) {
|
|
145
|
-
if (dom.isFieldElement(element) && element.name === '') {
|
|
145
|
+
if (dom.isFieldElement(element) && element.name === '' && element.willValidate) {
|
|
146
146
|
setError(element.validationMessage);
|
|
147
147
|
break;
|
|
148
148
|
}
|
|
@@ -382,7 +382,7 @@ function useFieldset(ref, config) {
|
|
|
382
382
|
* Returns a list of key and config, with a group of helpers
|
|
383
383
|
* configuring buttons for list manipulation
|
|
384
384
|
*
|
|
385
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
385
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
|
|
386
386
|
*/
|
|
387
387
|
function useFieldList(ref, config) {
|
|
388
388
|
var configRef = react.useRef(config);
|
|
@@ -507,7 +507,7 @@ function useFieldList(ref, config) {
|
|
|
507
507
|
* This is particular useful when integrating dropdown and datepicker whichs
|
|
508
508
|
* introduces custom input mode.
|
|
509
509
|
*
|
|
510
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
510
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
|
|
511
511
|
*/
|
|
512
512
|
function useControlledInput(config) {
|
|
513
513
|
var _config$defaultValue4;
|
|
@@ -573,13 +573,13 @@ function useControlledInput(config) {
|
|
|
573
573
|
whiteSpace: 'nowrap',
|
|
574
574
|
borderWidth: 0
|
|
575
575
|
},
|
|
576
|
+
tabIndex: -1,
|
|
577
|
+
'aria-hidden': true,
|
|
576
578
|
onFocus() {
|
|
577
579
|
var _inputRef$current;
|
|
578
580
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
|
579
581
|
}
|
|
580
|
-
}, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
|
|
581
|
-
type: 'text'
|
|
582
|
-
})), {
|
|
582
|
+
}, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState))), {
|
|
583
583
|
ref: inputRef,
|
|
584
584
|
value,
|
|
585
585
|
onChange: handleChange,
|
package/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { type FieldsetConstraint, type Submission, getFormElements, hasError, parse, shouldValidate, } from '@conform-to/dom';
|
|
1
|
+
export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, hasError, parse, shouldValidate, } from '@conform-to/dom';
|
|
2
2
|
export * from './hooks';
|
|
3
3
|
export * as conform from './helpers';
|
package/module/base.js
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import { forwardRef, createElement } from 'react';
|
|
3
|
+
|
|
4
|
+
var _excluded = ["hidden", "className", "style"];
|
|
5
|
+
/**
|
|
6
|
+
* Triggering react custom change event
|
|
7
|
+
* Solution based on dom-testing-library
|
|
8
|
+
* @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
|
|
9
|
+
* @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
|
|
10
|
+
*/
|
|
11
|
+
function setNativeValue(element, value) {
|
|
12
|
+
var {
|
|
13
|
+
set: valueSetter
|
|
14
|
+
} = Object.getOwnPropertyDescriptor(element, 'value') || {};
|
|
15
|
+
var prototype = Object.getPrototypeOf(element);
|
|
16
|
+
var {
|
|
17
|
+
set: prototypeValueSetter
|
|
18
|
+
} = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
|
|
19
|
+
if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
|
|
20
|
+
prototypeValueSetter.call(element, value);
|
|
21
|
+
} else {
|
|
22
|
+
if (valueSetter) {
|
|
23
|
+
valueSetter.call(element, value);
|
|
24
|
+
} else {
|
|
25
|
+
throw new Error('The given element does not have a value setter');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function useInputControl(ref) {
|
|
30
|
+
function getInputElement() {
|
|
31
|
+
var $input = ref.current;
|
|
32
|
+
if (!$input) {
|
|
33
|
+
console.warn('input ref is not available; Maybe you forget to setup the ref?');
|
|
34
|
+
}
|
|
35
|
+
return $input;
|
|
36
|
+
}
|
|
37
|
+
return {
|
|
38
|
+
onChange(eventLikeOrString) {
|
|
39
|
+
var $input = getInputElement();
|
|
40
|
+
var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
|
|
41
|
+
if ($input && $input.value !== value) {
|
|
42
|
+
$input.dispatchEvent(new InputEvent('beforeinput', {
|
|
43
|
+
bubbles: true,
|
|
44
|
+
cancelable: true
|
|
45
|
+
}));
|
|
46
|
+
setNativeValue($input, value);
|
|
47
|
+
$input.dispatchEvent(new InputEvent('input', {
|
|
48
|
+
bubbles: true,
|
|
49
|
+
cancelable: true
|
|
50
|
+
}));
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
onInput(eventLikeOrString) {
|
|
54
|
+
this.onChange(eventLikeOrString);
|
|
55
|
+
},
|
|
56
|
+
onFocus() {
|
|
57
|
+
var $input = getInputElement();
|
|
58
|
+
if ($input) {
|
|
59
|
+
$input.dispatchEvent(new FocusEvent('focusin', {
|
|
60
|
+
bubbles: true,
|
|
61
|
+
cancelable: true
|
|
62
|
+
}));
|
|
63
|
+
$input.dispatchEvent(new FocusEvent('focus', {
|
|
64
|
+
cancelable: true
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
onBlur() {
|
|
69
|
+
var $input = getInputElement();
|
|
70
|
+
if ($input) {
|
|
71
|
+
$input.dispatchEvent(new FocusEvent('focusout', {
|
|
72
|
+
bubbles: true,
|
|
73
|
+
cancelable: true
|
|
74
|
+
}));
|
|
75
|
+
$input.dispatchEvent(new FocusEvent('blur', {
|
|
76
|
+
cancelable: true
|
|
77
|
+
}));
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
function BaseInputImpl(_ref, ref) {
|
|
83
|
+
var {
|
|
84
|
+
hidden = true,
|
|
85
|
+
className,
|
|
86
|
+
style
|
|
87
|
+
} = _ref,
|
|
88
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
89
|
+
return /*#__PURE__*/createElement('input', _objectSpread2({
|
|
90
|
+
ref,
|
|
91
|
+
className: hidden ? '' : className,
|
|
92
|
+
style: hidden ? {
|
|
93
|
+
position: 'absolute',
|
|
94
|
+
width: '1px',
|
|
95
|
+
height: '1px',
|
|
96
|
+
padding: 0,
|
|
97
|
+
margin: '-1px',
|
|
98
|
+
overflow: 'hidden',
|
|
99
|
+
clip: 'rect(0,0,0,0)',
|
|
100
|
+
whiteSpace: 'nowrap',
|
|
101
|
+
borderWidth: 0
|
|
102
|
+
} : style
|
|
103
|
+
}, props));
|
|
104
|
+
}
|
|
105
|
+
var BaseInput = /*#__PURE__*/forwardRef(BaseInputImpl);
|
|
106
|
+
|
|
107
|
+
export { BaseInput, useInputControl };
|
package/module/hooks.js
CHANGED
|
@@ -7,7 +7,7 @@ import { input } from './helpers.js';
|
|
|
7
7
|
* Returns properties required to hook into form events.
|
|
8
8
|
* Applied custom validation and define when error should be reported.
|
|
9
9
|
*
|
|
10
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
10
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
|
|
11
11
|
*/
|
|
12
12
|
function useForm() {
|
|
13
13
|
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -138,7 +138,7 @@ function useForm() {
|
|
|
138
138
|
var nativeEvent = event.nativeEvent;
|
|
139
139
|
var submitter = nativeEvent.submitter;
|
|
140
140
|
for (var element of form.elements) {
|
|
141
|
-
if (isFieldElement(element) && element.name === '') {
|
|
141
|
+
if (isFieldElement(element) && element.name === '' && element.willValidate) {
|
|
142
142
|
setError(element.validationMessage);
|
|
143
143
|
break;
|
|
144
144
|
}
|
|
@@ -378,7 +378,7 @@ function useFieldset(ref, config) {
|
|
|
378
378
|
* Returns a list of key and config, with a group of helpers
|
|
379
379
|
* configuring buttons for list manipulation
|
|
380
380
|
*
|
|
381
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
381
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
|
|
382
382
|
*/
|
|
383
383
|
function useFieldList(ref, config) {
|
|
384
384
|
var configRef = useRef(config);
|
|
@@ -503,7 +503,7 @@ function useFieldList(ref, config) {
|
|
|
503
503
|
* This is particular useful when integrating dropdown and datepicker whichs
|
|
504
504
|
* introduces custom input mode.
|
|
505
505
|
*
|
|
506
|
-
* @see https://github.com/edmundhung/conform/tree/v0.4.
|
|
506
|
+
* @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
|
|
507
507
|
*/
|
|
508
508
|
function useControlledInput(config) {
|
|
509
509
|
var _config$defaultValue4;
|
|
@@ -569,13 +569,13 @@ function useControlledInput(config) {
|
|
|
569
569
|
whiteSpace: 'nowrap',
|
|
570
570
|
borderWidth: 0
|
|
571
571
|
},
|
|
572
|
+
tabIndex: -1,
|
|
573
|
+
'aria-hidden': true,
|
|
572
574
|
onFocus() {
|
|
573
575
|
var _inputRef$current;
|
|
574
576
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
|
575
577
|
}
|
|
576
|
-
}, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState), {
|
|
577
|
-
type: 'text'
|
|
578
|
-
})), {
|
|
578
|
+
}, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState))), {
|
|
579
579
|
ref: inputRef,
|
|
580
580
|
value,
|
|
581
581
|
onChange: handleChange,
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@conform-to/react",
|
|
3
3
|
"description": "Conform view adapter for react",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "0.4.
|
|
5
|
+
"version": "0.4.1",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"module": "module/index.js",
|
|
8
8
|
"repository": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"url": "https://github.com/edmundhung/conform/issues"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@conform-to/dom": "0.4.
|
|
22
|
+
"@conform-to/dom": "0.4.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": ">=16.8"
|