@conform-to/react 0.5.1 → 0.6.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 (16) hide show
  1. package/README.md +182 -214
  2. package/_virtual/_rollupPluginBabelHelpers.js +17 -0
  3. package/helpers.d.ts +11 -11
  4. package/helpers.js +57 -63
  5. package/hooks.d.ts +24 -58
  6. package/hooks.js +126 -204
  7. package/index.d.ts +2 -2
  8. package/index.js +8 -17
  9. package/module/_virtual/_rollupPluginBabelHelpers.js +16 -1
  10. package/module/helpers.js +45 -63
  11. package/module/hooks.js +128 -205
  12. package/module/index.js +2 -2
  13. package/package.json +2 -2
  14. package/base.d.ts +0 -17
  15. package/base.js +0 -112
  16. package/module/base.js +0 -107
package/base.js DELETED
@@ -1,112 +0,0 @@
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/module/base.js DELETED
@@ -1,107 +0,0 @@
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 };