use-mask-input 3.6.0 → 3.7.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.
- package/CHANGELOG.md +53 -76
- package/README.md +2 -251
- package/dist/antd/index.cjs +67 -0
- package/dist/antd/index.cjs.map +1 -0
- package/dist/antd/index.d.cts +37 -0
- package/dist/antd/index.d.ts +37 -0
- package/dist/antd/index.js +64 -0
- package/dist/antd/index.js.map +1 -0
- package/dist/chunk-4Y2DTPBL.cjs +3841 -0
- package/dist/chunk-4Y2DTPBL.cjs.map +1 -0
- package/dist/chunk-JGOZSJMW.js +3829 -0
- package/dist/chunk-JGOZSJMW.js.map +1 -0
- package/dist/index-F3rlTTTe.d.cts +583 -0
- package/dist/index-F3rlTTTe.d.ts +583 -0
- package/dist/index.cjs +72 -3870
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +48 -585
- package/dist/index.d.ts +48 -585
- package/dist/index.js +72 -3870
- package/dist/index.js.map +1 -1
- package/package.json +27 -21
- package/src/antd/index.ts +9 -0
- package/src/antd/useHookFormMaskAntd.spec.ts +142 -0
- package/src/antd/useHookFormMaskAntd.ts +57 -0
- package/src/antd/useMaskInputAntd-server.spec.tsx +36 -0
- package/src/antd/useMaskInputAntd.spec.tsx +108 -0
- package/src/antd/useMaskInputAntd.ts +77 -0
- package/src/api/index.ts +4 -0
- package/src/api/useHookFormMask.spec.ts +146 -0
- package/src/api/useHookFormMask.ts +56 -0
- package/src/api/useMaskInput-server.spec.tsx +30 -0
- package/src/api/useMaskInput.spec.tsx +220 -0
- package/src/api/useMaskInput.ts +73 -0
- package/src/api/withHookFormMask.spec.ts +155 -0
- package/src/api/withHookFormMask.ts +54 -0
- package/src/api/withMask.spec.ts +93 -0
- package/src/api/withMask.ts +25 -0
- package/src/core/elementResolver.spec.ts +175 -0
- package/src/core/elementResolver.ts +84 -0
- package/src/core/index.ts +3 -0
- package/src/core/maskConfig.spec.ts +183 -0
- package/src/core/maskConfig.ts +56 -0
- package/src/core/maskEngine.spec.ts +108 -0
- package/src/core/maskEngine.ts +47 -0
- package/src/index.tsx +12 -5
- package/src/{types.ts → types/index.ts} +13 -0
- package/src/utils/flow.spec.ts +27 -30
- package/src/utils/flow.ts +2 -2
- package/src/utils/index.ts +1 -1
- package/src/utils/isServer.spec.ts +15 -0
- package/src/utils/moduleInterop.spec.ts +37 -0
- package/src/useHookFormMask.ts +0 -47
- package/src/useMaskInput.ts +0 -41
- package/src/utils/getMaskOptions.spec.ts +0 -126
- package/src/utils/getMaskOptions.ts +0 -94
- package/src/withHookFormMask.ts +0 -34
- package/src/withMask.ts +0 -18
- /package/src/{inputmask.types.ts → types/inputmask.types.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,244 +1,221 @@
|
|
|
1
|
-
|
|
1
|
+
## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
|
|
2
2
|
|
|
3
|
+
## 3.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 24b7236: integrate Ant Design support into use-mask-input package with new hooks and configuration options
|
|
8
|
+
|
|
9
|
+
## 3.6.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 98e52be: enhance form handling with react-hook-form integration, add new dependencies, and update TypeScript configuration
|
|
3
14
|
|
|
4
15
|
### Features
|
|
5
16
|
|
|
6
|
-
|
|
17
|
+
- add support to alphanumerial brazilian & update inputmask cnpj ([#145](https://github.com/eduardoborges/use-mask-input/issues/145)) ([64dbc92](https://github.com/eduardoborges/use-mask-input/commit/64dbc9256af8b16461acbacf1c574e43f6cf195a))
|
|
7
18
|
|
|
8
19
|
## [3.5.2](https://github.com/eduardoborges/use-mask-input/compare/3.5.1...3.5.2) (2025-09-24)
|
|
9
20
|
|
|
10
|
-
|
|
11
21
|
### Bug Fixes
|
|
12
22
|
|
|
13
|
-
|
|
23
|
+
- add .node-version file and refactor types and withMask function for improved type handling ([9f34a7b](https://github.com/eduardoborges/use-mask-input/commit/9f34a7bb6a1ed721efb04ffe53ea12bbd8102227))
|
|
14
24
|
|
|
15
25
|
## [3.5.1](https://github.com/eduardoborges/use-mask-input/compare/3.5.0...3.5.1) (2025-09-05)
|
|
16
26
|
|
|
17
|
-
|
|
18
27
|
### Bug Fixes
|
|
19
28
|
|
|
20
|
-
|
|
29
|
+
- update ESLint configuration and dependencies, migrate from Rollup to TSUP for builds ([#130](https://github.com/eduardoborges/use-mask-input/issues/130)) ([396ef79](https://github.com/eduardoborges/use-mask-input/commit/396ef798055cac34df45649a16ee010af6229d5c))
|
|
21
30
|
|
|
22
31
|
# [3.5.0](https://github.com/eduardoborges/use-mask-input/compare/3.4.2...3.5.0) (2025-07-14)
|
|
23
32
|
|
|
24
|
-
|
|
25
33
|
### Features
|
|
26
34
|
|
|
27
|
-
|
|
35
|
+
- Export types module for better TypeScript support ([#123](https://github.com/eduardoborges/use-mask-input/issues/123)) ([a4ee805](https://github.com/eduardoborges/use-mask-input/commit/a4ee805fa54490a11cd5f686fbf0fdf89f5761f4))
|
|
28
36
|
|
|
29
37
|
## [3.4.2](https://github.com/eduardoborges/use-mask-input/compare/3.4.1...3.4.2) (2024-11-22)
|
|
30
38
|
|
|
31
|
-
|
|
32
39
|
### Bug Fixes
|
|
33
40
|
|
|
34
|
-
|
|
41
|
+
- mui textfield disappearing ([#95](https://github.com/eduardoborges/use-mask-input/issues/95)) ([fa0caf6](https://github.com/eduardoborges/use-mask-input/commit/fa0caf66fe05f33e5a5aeaf3e92b38352ca46abb))
|
|
35
42
|
|
|
36
43
|
## [3.4.1](https://github.com/eduardoborges/use-mask-input/compare/3.4.0...3.4.1) (2024-11-22)
|
|
37
44
|
|
|
38
|
-
|
|
39
45
|
### Bug Fixes
|
|
40
46
|
|
|
41
|
-
|
|
42
|
-
|
|
47
|
+
- update inputmask to version 5.0.10-beta.11 ([#98](https://github.com/eduardoborges/use-mask-input/issues/98)) ([08a16a5](https://github.com/eduardoborges/use-mask-input/commit/08a16a5c947485729d1a88f15b1d812e68f95cee))
|
|
48
|
+
- update packages ([6a4fc39](https://github.com/eduardoborges/use-mask-input/commit/6a4fc3944fb6804a705454ecd513277fe359c621))
|
|
43
49
|
|
|
44
50
|
# [3.4.0](https://github.com/eduardoborges/use-mask-input/compare/3.3.8...3.4.0) (2024-07-23)
|
|
45
51
|
|
|
46
|
-
|
|
47
52
|
### Features
|
|
48
53
|
|
|
49
|
-
|
|
54
|
+
- update mask type to match the avaliable types. ([#88](https://github.com/eduardoborges/use-mask-input/issues/88)) ([2e17b79](https://github.com/eduardoborges/use-mask-input/commit/2e17b794ec2290dde1a911e632ee0090663602a7))
|
|
50
55
|
|
|
51
56
|
## [3.3.8](https://github.com/eduardoborges/use-mask-input/compare/3.3.7...3.3.8) (2024-06-18)
|
|
52
57
|
|
|
53
|
-
|
|
54
58
|
### Bug Fixes
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
- prepare withMask function to React 19 ref breaking changes ([#83](https://github.com/eduardoborges/use-mask-input/issues/83)) ([4756fe8](https://github.com/eduardoborges/use-mask-input/commit/4756fe807e29e6b2dfb54b5dc75c1667769de13f))
|
|
57
61
|
|
|
58
62
|
## [3.3.7](https://github.com/eduardoborges/use-mask-input/compare/3.3.6...3.3.7) (2023-11-09)
|
|
59
63
|
|
|
60
|
-
|
|
61
64
|
### Bug Fixes
|
|
62
65
|
|
|
63
|
-
|
|
66
|
+
- fix options spread in getMaskOptions function ([e857424](https://github.com/eduardoborges/use-mask-input/commit/e85742442a375f85edfd819475071b29b4bc0af8))
|
|
64
67
|
|
|
65
68
|
## [3.3.6](https://github.com/eduardoborges/use-mask-input/compare/3.3.5...3.3.6) (2023-10-02)
|
|
66
69
|
|
|
67
|
-
|
|
68
70
|
### Bug Fixes
|
|
69
71
|
|
|
70
|
-
|
|
72
|
+
- update dependencies ([a9b6deb](https://github.com/eduardoborges/use-mask-input/commit/a9b6deb977c0273390c6015f15249b9b2e82d738))
|
|
71
73
|
|
|
72
74
|
## [3.3.5](https://github.com/eduardoborges/use-mask-input/compare/3.3.4...3.3.5) (2023-08-30)
|
|
73
75
|
|
|
74
|
-
|
|
75
76
|
### Bug Fixes
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
- **types:** fix mask options with any type ([7b643b1](https://github.com/eduardoborges/use-mask-input/commit/7b643b1e6afc27ad4e49d5b528e31d1ff6427a8b))
|
|
78
79
|
|
|
79
80
|
## [3.3.4](https://github.com/eduardoborges/use-mask-input/compare/3.3.3...3.3.4) (2023-08-29)
|
|
80
81
|
|
|
81
|
-
|
|
82
82
|
### Bug Fixes
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
- types and options ([#50](https://github.com/eduardoborges/use-mask-input/issues/50)) ([3bc502e](https://github.com/eduardoborges/use-mask-input/commit/3bc502e770c3aa12c9b248904da57c016c35f6a2))
|
|
85
85
|
|
|
86
86
|
## [3.3.3](https://github.com/eduardoborges/use-mask-input/compare/3.3.2...3.3.3) (2023-08-14)
|
|
87
87
|
|
|
88
|
-
|
|
89
88
|
### Bug Fixes
|
|
90
89
|
|
|
91
|
-
|
|
90
|
+
- **scripts:** remove unused postinstall script ([4a62989](https://github.com/eduardoborges/use-mask-input/commit/4a6298991d02c16af3dcda3edcb8dae4b8874f8a))
|
|
92
91
|
|
|
93
92
|
## [3.3.2](https://github.com/eduardoborges/use-mask-input/compare/3.3.1...3.3.2) (2023-08-10)
|
|
94
93
|
|
|
95
|
-
|
|
96
94
|
### Bug Fixes
|
|
97
95
|
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
- **ci:** adjust ci to run on beta ([1aa0978](https://github.com/eduardoborges/use-mask-input/commit/1aa09789bf1fbe0b5a86703c6da186fd3854150f))
|
|
97
|
+
- fix Missing type=module in package.json [#44](https://github.com/eduardoborges/use-mask-input/issues/44) ([f193a20](https://github.com/eduardoborges/use-mask-input/commit/f193a2032572a43e3bde4220feffb9976d05bb2c))
|
|
100
98
|
|
|
101
99
|
## [3.3.2-beta.1](https://github.com/eduardoborges/use-mask-input/compare/3.3.1...3.3.2-beta.1) (2023-08-10)
|
|
102
100
|
|
|
103
|
-
|
|
104
101
|
### Bug Fixes
|
|
105
102
|
|
|
106
|
-
|
|
103
|
+
- fix Missing type=module in package.json [#44](https://github.com/eduardoborges/use-mask-input/issues/44) ([f193a20](https://github.com/eduardoborges/use-mask-input/commit/f193a2032572a43e3bde4220feffb9976d05bb2c))
|
|
107
104
|
|
|
108
105
|
## [3.3.1](https://github.com/eduardoborges/use-mask-input/compare/3.3.0...3.3.1) (2023-08-03)
|
|
109
106
|
|
|
110
|
-
|
|
111
107
|
### Bug Fixes
|
|
112
108
|
|
|
113
|
-
|
|
109
|
+
- **package.json:** add type module ([34faa1e](https://github.com/eduardoborges/use-mask-input/commit/34faa1e41ab27a5a18530988c4df51da6bacc3f5))
|
|
114
110
|
|
|
115
111
|
# [3.3.0](https://github.com/eduardoborges/use-mask-input/compare/3.2.0...3.3.0) (2023-06-30)
|
|
116
112
|
|
|
117
|
-
|
|
118
113
|
### Features
|
|
119
114
|
|
|
120
|
-
|
|
115
|
+
- new useHookFormMask API ([#35](https://github.com/eduardoborges/use-mask-input/issues/35)) ([52609eb](https://github.com/eduardoborges/use-mask-input/commit/52609eb57d77f4cd95a8ccbe868f9e4cbcdc2e47))
|
|
121
116
|
|
|
122
117
|
# [3.2.0](https://github.com/eduardoborges/use-mask-input/compare/3.1.2...3.2.0) (2023-06-14)
|
|
123
118
|
|
|
124
|
-
|
|
125
119
|
### Features
|
|
126
120
|
|
|
127
|
-
|
|
121
|
+
- now works with Next! ([7730de2](https://github.com/eduardoborges/use-mask-input/commit/7730de24237f8df0eede8cf464620b6d1c87c558))
|
|
128
122
|
|
|
129
123
|
## [3.1.2](https://github.com/eduardoborges/use-mask-input/compare/3.1.1...3.1.2) (2023-05-10)
|
|
130
124
|
|
|
131
|
-
|
|
132
125
|
### Bug Fixes
|
|
133
126
|
|
|
134
|
-
|
|
127
|
+
- add inputmask extension support ([eecc00a](https://github.com/eduardoborges/use-mask-input/commit/eecc00a0601ff5bc340c50886a6ab35174006096))
|
|
135
128
|
|
|
136
129
|
## [3.1.1](https://github.com/eduardoborges/use-mask-input/compare/3.1.0...3.1.1) (2023-05-10)
|
|
137
130
|
|
|
138
|
-
|
|
139
131
|
### Bug Fixes
|
|
140
132
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
133
|
+
- change dependency type ([#13](https://github.com/eduardoborges/use-mask-input/issues/13)) ([1c87dc7](https://github.com/eduardoborges/use-mask-input/commit/1c87dc723540cd51e1dc40f1a162611aa53e9c11))
|
|
134
|
+
- downgrade required node to 16 ([#11](https://github.com/eduardoborges/use-mask-input/issues/11)) ([d829d2f](https://github.com/eduardoborges/use-mask-input/commit/d829d2f5c34aa0b30ab6f68d42fbc5a068b53b70))
|
|
135
|
+
- regression issue with react hook form and ci ([#31](https://github.com/eduardoborges/use-mask-input/issues/31)) ([bf104b2](https://github.com/eduardoborges/use-mask-input/commit/bf104b2a1ca7ccb0b7a1d573ba07bdfe95dd8949)), closes [#11](https://github.com/eduardoborges/use-mask-input/issues/11) [#13](https://github.com/eduardoborges/use-mask-input/issues/13)
|
|
144
136
|
|
|
145
137
|
# [3.1.0](https://github.com/eduardoborges/use-mask-input/compare/3.0.6...3.1.0) (2023-05-04)
|
|
146
138
|
|
|
147
|
-
|
|
148
139
|
### Bug Fixes
|
|
149
140
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
141
|
+
- refactor code and add compose function to `utils.ts` ([49a7459](https://github.com/eduardoborges/use-mask-input/commit/49a7459c0976443f04426c2cc14d29172fe413ad))
|
|
142
|
+
- refactor withHookFormMask to use compose instead of flow. ([85b8bc5](https://github.com/eduardoborges/use-mask-input/commit/85b8bc59b112341ad76b09d7acc167c98d8bd352))
|
|
143
|
+
- small refactors, remove lodash dep and add exports suggar ([95286a8](https://github.com/eduardoborges/use-mask-input/commit/95286a87c4ea3c2bf0f25a418413078da9d17c7b))
|
|
154
144
|
|
|
155
145
|
### Features
|
|
156
146
|
|
|
157
|
-
|
|
147
|
+
- Add React Hook Form to dependencies and install git hooks ([f7496c2](https://github.com/eduardoborges/use-mask-input/commit/f7496c23a429363bc47e03f18c9ce8eb3be41ab0))
|
|
158
148
|
|
|
159
149
|
## [3.0.6](https://github.com/eduardoborges/use-mask-input/compare/3.0.5...3.0.6) (2023-02-10)
|
|
160
150
|
|
|
161
|
-
|
|
162
151
|
### Bug Fixes
|
|
163
152
|
|
|
164
|
-
|
|
153
|
+
- fix regression for cra exports ([b149d78](https://github.com/eduardoborges/use-mask-input/commit/b149d7822dac99db3f308671a13b8fbbe148010c))
|
|
165
154
|
|
|
166
155
|
## [3.0.5](https://github.com/eduardoborges/use-mask-input/compare/3.0.4...3.0.5) (2023-02-09)
|
|
167
156
|
|
|
168
|
-
|
|
169
157
|
### Bug Fixes
|
|
170
158
|
|
|
171
|
-
|
|
159
|
+
- fix module resolution ([ab8a464](https://github.com/eduardoborges/use-mask-input/commit/ab8a464a4cb6fe529d1ff3decc56de925efa68fc))
|
|
172
160
|
|
|
173
161
|
## [3.0.4](https://github.com/eduardoborges/use-mask-input/compare/3.0.3...3.0.4) (2023-02-09)
|
|
174
162
|
|
|
175
|
-
|
|
176
163
|
### Bug Fixes
|
|
177
164
|
|
|
178
|
-
|
|
165
|
+
- fix invalid resolve entry for package fix [#8](https://github.com/eduardoborges/use-mask-input/issues/8) ([91e3fc2](https://github.com/eduardoborges/use-mask-input/commit/91e3fc28b7180bbc6c608dd33eefd92d1c21da78))
|
|
179
166
|
|
|
180
167
|
## [3.0.3](https://github.com/eduardoborges/use-mask-input/compare/3.0.2...3.0.3) (2023-02-09)
|
|
181
168
|
|
|
182
|
-
|
|
183
169
|
### Bug Fixes
|
|
184
170
|
|
|
185
|
-
|
|
171
|
+
- can access nodeName on component unmount fix [#7](https://github.com/eduardoborges/use-mask-input/issues/7) ([a881272](https://github.com/eduardoborges/use-mask-input/commit/a881272be60b77287d68208472280c52331d82e7))
|
|
186
172
|
|
|
187
173
|
## [3.0.2](https://github.com/eduardoborges/use-mask-input/compare/3.0.1...3.0.2) (2023-02-06)
|
|
188
174
|
|
|
189
|
-
|
|
190
175
|
### Bug Fixes
|
|
191
176
|
|
|
192
|
-
|
|
177
|
+
- remove unused deps and fix vulnerabilities ([a49c5d5](https://github.com/eduardoborges/use-mask-input/commit/a49c5d55b485553fe9a79c38af900fc4def24774))
|
|
193
178
|
|
|
194
179
|
## [3.0.1](https://github.com/eduardoborges/use-mask-input/compare/3.0.0...3.0.1) (2023-01-23)
|
|
195
180
|
|
|
196
|
-
|
|
197
181
|
### Bug Fixes
|
|
198
182
|
|
|
199
|
-
|
|
183
|
+
- security fixes ([aad0816](https://github.com/eduardoborges/use-mask-input/commit/aad08168b9349a6199a3bfa0d1340a5f20cae732))
|
|
200
184
|
|
|
201
185
|
# [3.0.0](https://github.com/eduardoborges/use-mask-input/compare/2.1.0...3.0.0) (2022-10-11)
|
|
202
186
|
|
|
203
|
-
|
|
204
187
|
### Features
|
|
205
188
|
|
|
206
|
-
|
|
207
|
-
|
|
189
|
+
- simplify API & add react-final-form support. ([981588d](https://github.com/eduardoborges/use-mask-input/commit/981588d54121e66d550eb5df9fe64b5de01d70c6))
|
|
208
190
|
|
|
209
191
|
### BREAKING CHANGES
|
|
210
192
|
|
|
211
|
-
|
|
193
|
+
- update api
|
|
212
194
|
|
|
213
195
|
# [2.1.0](https://github.com/eduardoborges/use-mask-input/compare/2.0.1...2.1.0) (2022-09-27)
|
|
214
196
|
|
|
215
|
-
|
|
216
197
|
### Features
|
|
217
198
|
|
|
218
|
-
|
|
199
|
+
- add react-hook-form 7 integration ([0fd5bfc](https://github.com/eduardoborges/use-mask-input/commit/0fd5bfca4f8a686b9d89eba1f319c055073f51ed))
|
|
219
200
|
|
|
220
201
|
## [2.0.1](https://github.com/eduardoborges/use-mask-input/compare/2.0.0...2.0.1) (2022-09-27)
|
|
221
202
|
|
|
222
|
-
|
|
223
203
|
### Bug Fixes
|
|
224
204
|
|
|
225
|
-
|
|
205
|
+
- enhance actions time ([6ea226c](https://github.com/eduardoborges/use-mask-input/commit/6ea226cf1e49f46ff476ad7c1619c136a54a1954))
|
|
226
206
|
|
|
227
207
|
# [2.0.0](https://github.com/eduardoborges/use-mask-input/compare/1.1.0...2.0.0) (2022-09-27)
|
|
228
208
|
|
|
229
|
-
|
|
230
209
|
### Bug Fixes
|
|
231
210
|
|
|
232
|
-
|
|
233
|
-
|
|
211
|
+
- Bump version ([4485125](https://github.com/eduardoborges/use-mask-input/commit/44851258e0b9f767be53d77e279b3604578b8aaa))
|
|
234
212
|
|
|
235
213
|
### BREAKING CHANGES
|
|
236
214
|
|
|
237
|
-
|
|
215
|
+
- update libs to suport new react-hook-form
|
|
238
216
|
|
|
239
217
|
# [1.1.0](https://github.com/eduardoborges/use-mask-input/compare/1.0.2...1.1.0) (2022-09-27)
|
|
240
218
|
|
|
241
|
-
|
|
242
219
|
### Features
|
|
243
220
|
|
|
244
|
-
|
|
221
|
+
- force release ([61d23d3](https://github.com/eduardoborges/use-mask-input/commit/61d23d3f588abe095ec0a81de8249801c39a31bd))
|
package/README.md
CHANGED
|
@@ -3,22 +3,9 @@
|
|
|
3
3
|
<h4>A React Hook for building elegant and simple input masks.</h4>
|
|
4
4
|
|
|
5
5
|
  
|
|
6
|
-
|
|
7
6
|
</div>
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
## Table of Contents
|
|
11
|
-
|
|
12
|
-
- [Installation](#install)
|
|
13
|
-
- [Usage](#quickstart)
|
|
14
|
-
- [Masking Types](#masking-types)
|
|
15
|
-
- [Static Masking Type](#static-masking-type)
|
|
16
|
-
- [Optional Masking Type](#optional-masking-type)
|
|
17
|
-
- [Dynamic Masking Type](#dynamic-masking-type)
|
|
18
|
-
- [Alias Masking Type](#alias-masking-type)
|
|
19
|
-
- [Alternator Masking Type](#alias-masking-type)
|
|
20
|
-
- [Preprocessing Masking Type](#preprocessing-masking-type)
|
|
21
|
-
|
|
8
|
+
## [Full Documentation](http://use-mask-input.eduardoborges.dev) | [Sponsor this project](https://github.com/eduardoborges?tab=sponsors)
|
|
22
9
|
|
|
23
10
|
## Features
|
|
24
11
|
- 🎯 Simple API
|
|
@@ -35,7 +22,7 @@ npm i use-mask-input
|
|
|
35
22
|
|
|
36
23
|
```jsx
|
|
37
24
|
import React from 'react'
|
|
38
|
-
import {
|
|
25
|
+
import { useMaskInput } from 'use-mask-input';
|
|
39
26
|
|
|
40
27
|
const App = () => {
|
|
41
28
|
return (
|
|
@@ -70,239 +57,3 @@ function App() {
|
|
|
70
57
|
);
|
|
71
58
|
}
|
|
72
59
|
```
|
|
73
|
-
|
|
74
|
-
### Usage with React Final Form
|
|
75
|
-
|
|
76
|
-
Just use `withMask` normaly.
|
|
77
|
-
|
|
78
|
-
```jsx
|
|
79
|
-
import React from 'react';
|
|
80
|
-
import { Form, Field } from 'react-final-form';
|
|
81
|
-
import { withMask } from 'use-mask-input';
|
|
82
|
-
|
|
83
|
-
function App() {
|
|
84
|
-
...
|
|
85
|
-
return (
|
|
86
|
-
<Form
|
|
87
|
-
onSubmit={onSubmit}
|
|
88
|
-
render={({ handleSubmit }) => (
|
|
89
|
-
<form onSubmit={handleSubmit}>
|
|
90
|
-
<Field
|
|
91
|
-
name="phone"
|
|
92
|
-
render={({ input, meta }) => (
|
|
93
|
-
<input ref={withMask('9999-9999')} {...input} />
|
|
94
|
-
)}
|
|
95
|
-
/>
|
|
96
|
-
<button type="submit">Submit</button>
|
|
97
|
-
</form>
|
|
98
|
-
)}
|
|
99
|
-
/>
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
## Masking types
|
|
105
|
-
|
|
106
|
-
The `mask` params can be
|
|
107
|
-
|
|
108
|
-
### Static Masking Type
|
|
109
|
-
|
|
110
|
-
These are the very basics of masking. The mask is defined and will not change during the input.
|
|
111
|
-
|
|
112
|
-
```tsx
|
|
113
|
-
<input
|
|
114
|
-
{...registerWithMask("phone", '99 9999-9999')}
|
|
115
|
-
type="text"
|
|
116
|
-
/>
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### Optional Masking Type
|
|
120
|
-
|
|
121
|
-
It is possible to define some parts in the mask as optional. This is done by using `[ ]`. By example:
|
|
122
|
-
|
|
123
|
-
```tsx
|
|
124
|
-
<input
|
|
125
|
-
{...registerWithMask("phone", '99 [9]9999-9999')}
|
|
126
|
-
type="text"
|
|
127
|
-
/>
|
|
128
|
-
```
|
|
129
|
-
This mask will allow input like (99) 99999-9999 or (99) 9999-9999.
|
|
130
|
-
|
|
131
|
-
### Dynamic Masking Type
|
|
132
|
-
|
|
133
|
-
Dynamic masks can change during input. To define a dynamic part use { }.
|
|
134
|
-
|
|
135
|
-
{n} => n repeats {n|j} => n repeats, with j jitmasking {n,m} => from n to m repeats {n,m|j} => from n to m repeats, with j jitmasking
|
|
136
|
-
|
|
137
|
-
Also {+} and {} is allowed. + start from 1 and start from 0.
|
|
138
|
-
|
|
139
|
-
By example:
|
|
140
|
-
|
|
141
|
-
```tsx
|
|
142
|
-
//static mask with dynamic syntax
|
|
143
|
-
<input
|
|
144
|
-
{...registerWithMask("phone", "aa-9{4}")}
|
|
145
|
-
type="text"
|
|
146
|
-
/>
|
|
147
|
-
|
|
148
|
-
// dynamic mask ~ the 9 def can be occur 1 to 4 times
|
|
149
|
-
<input
|
|
150
|
-
{...registerWithMask("phone", "aa-9{4}")}
|
|
151
|
-
type="text"
|
|
152
|
-
/>
|
|
153
|
-
|
|
154
|
-
// dynamic mask ~ email
|
|
155
|
-
<input
|
|
156
|
-
{...registerWithMask("phone", "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]")}
|
|
157
|
-
type="text"
|
|
158
|
-
/>
|
|
159
|
-
|
|
160
|
-
```
|
|
161
|
-
### Alias Masking Type
|
|
162
|
-
|
|
163
|
-
A Lot of common default "aliases" presets, you can use like that:
|
|
164
|
-
```tsx
|
|
165
|
-
<input // the alias
|
|
166
|
-
{...registerWithMask("date", "datetime", {
|
|
167
|
-
inputFormat: "yyyy-mm-dd",
|
|
168
|
-
})}
|
|
169
|
-
type="text"
|
|
170
|
-
/>
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
You can use together with options like `inputFormat`, `prefix`, `suffix`, etc. Checkout [API docs](#api)
|
|
174
|
-
|
|
175
|
-
The avaliable ones is:
|
|
176
|
-
|
|
177
|
-
- `datetime`
|
|
178
|
-
- `email`
|
|
179
|
-
- `ip`
|
|
180
|
-
- `datetime`
|
|
181
|
-
- `cpf`
|
|
182
|
-
- `email`
|
|
183
|
-
- `numeric`
|
|
184
|
-
- `currency`
|
|
185
|
-
- `decimal`
|
|
186
|
-
- `integer`
|
|
187
|
-
- `percentage`
|
|
188
|
-
- `url`
|
|
189
|
-
- `ip`
|
|
190
|
-
- `mac`
|
|
191
|
-
- `ssn`
|
|
192
|
-
|
|
193
|
-
### Alternator Masking Type
|
|
194
|
-
|
|
195
|
-
The alternator syntax is like an OR statement. The mask can be one of the 3 choices specified in the alternator.
|
|
196
|
-
|
|
197
|
-
To define an alternator use the |. ex: "a|9" => a or 9 "(aaa)|(999)" => aaa or 999 "(aaa|999|9AA)" => aaa or 999 or 9AA
|
|
198
|
-
"aaaa|9999" => aaa a or 9 999
|
|
199
|
-
|
|
200
|
-
```tsx
|
|
201
|
-
<input
|
|
202
|
-
{...registerWithMask("phone", "9999-9999|99999-9999")}
|
|
203
|
-
type="text"
|
|
204
|
-
/>
|
|
205
|
-
|
|
206
|
-
// or just passing an array
|
|
207
|
-
<input
|
|
208
|
-
{...registerWithMask("phone", ["9999-9999", "99999-9999"])}
|
|
209
|
-
type="text"
|
|
210
|
-
/>
|
|
211
|
-
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
### Preprocessing Masking Type
|
|
216
|
-
|
|
217
|
-
You can define the mask as a function that can allow you to preprocess the resulting mask. Example sorting for multiple masks or retrieving mask definitions dynamically through ajax. The preprocessing fn should return a valid mask definition.
|
|
218
|
-
|
|
219
|
-
```tsx
|
|
220
|
-
<input
|
|
221
|
-
{...registerWithMask("phone", function () {
|
|
222
|
-
/* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"];
|
|
223
|
-
})}
|
|
224
|
-
type="text"
|
|
225
|
-
/>
|
|
226
|
-
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
## API
|
|
231
|
-
|
|
232
|
-
### `withMask(mask, options?)`
|
|
233
|
-
Attach a mask to an input via a `ref`:
|
|
234
|
-
```ts
|
|
235
|
-
const attach = withMask('999-9999', { clearIncomplete: true });
|
|
236
|
-
<input ref={attach} />;
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
- **mask**: `string` \| `string[]` \| `(opts: Options) => string \| string[]`
|
|
240
|
-
- **options**: `Options` (see below)
|
|
241
|
-
|
|
242
|
-
---
|
|
243
|
-
|
|
244
|
-
### `useHookFormMask(registerFn)`
|
|
245
|
-
Integrate masking with React-Hook-Form’s `register`:
|
|
246
|
-
```ts
|
|
247
|
-
const maskedRegister = useHookFormMask(register);
|
|
248
|
-
<input {...maskedRegister('phone', '999-9999', { showMaskOnFocus: true })} />;
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
---
|
|
252
|
-
|
|
253
|
-
### `Options`
|
|
254
|
-
|
|
255
|
-
| Option | Description | Type | Default |
|
|
256
|
-
|----------------------------|------------------------------------------------------------------------------------------------------|------------------------------|----------------------------------------------------|
|
|
257
|
-
| `mask` | Static mask, array of masks, or function returning mask(s) | `string \| string[] \| fn` | — |
|
|
258
|
-
| `regex` | Treat the mask as a regular expression | `string` | — |
|
|
259
|
-
| `placeholder` | Character shown for empty slots | `string` | `"_"` |
|
|
260
|
-
| `optionalmarker` | Delimiters for optional sections | `{ start: string; end: string }` | `{ start: "[", end: "]" }` |
|
|
261
|
-
| `quantifiermarker` | Delimiters for repetition ranges | `{ start: string; end: string }` | `{ start: "{", end: "}" }` |
|
|
262
|
-
| `groupmarker` | Delimiters for grouping | `{ start: string; end: string }` | `{ start: "(", end: ")" }` |
|
|
263
|
-
| `alternatormarker` | Character separating alternator options | `string` | `"|"` |
|
|
264
|
-
| `escapeChar` | Character to escape mask meta-symbols | `string` | `"\\"` |
|
|
265
|
-
| `definitions` | Custom symbol→validator mappings | `Record<string,Definition>` | — |
|
|
266
|
-
| `alias` | Built-in preset (“datetime”, “currency”, etc.) | `string` | — |
|
|
267
|
-
| `inputFormat` | Format string for datetime alias | `string` | — |
|
|
268
|
-
| `outputFormat` | Format of unmasked datetime value | `string` | — |
|
|
269
|
-
| `displayFormat` | Visual format when losing focus (datetime alias) | `string` | — |
|
|
270
|
-
| `clearMaskOnLostFocus` | Trim placeholders on blur | `boolean` | `true` |
|
|
271
|
-
| `showMaskOnFocus` | Show full mask when focused | `boolean` | `true` |
|
|
272
|
-
| `showMaskOnHover` | Show mask when hovering | `boolean` | `true` |
|
|
273
|
-
| `clearIncomplete` | Clear input if not fully filled on blur | `boolean` | `false` |
|
|
274
|
-
| `removeMaskOnSubmit` | Strip mask chars on form submit | `boolean` | `false` |
|
|
275
|
-
| `autoUnmask` | Always return unmasked value | `boolean` | `false` |
|
|
276
|
-
| `jitMasking` | Just-in-time masking (only show entered chars) | `boolean` | `false` |
|
|
277
|
-
| `nullable` | Return `""` if no input | `boolean` | `true` |
|
|
278
|
-
| `noValuePatching` | Disable `.value` patching hacks | `boolean` | `false` |
|
|
279
|
-
| `insertMode` | Insert vs overwrite | `boolean` | `true` |
|
|
280
|
-
| `insertModeVisual` | Highlight caret in overwrite mode | `boolean` | `true` |
|
|
281
|
-
| `positionCaretOnClick` | Caret placement on click: `"none"`, `"lvp"`, `"radixFocus"`, `"select"`, `"ignore"` | `string` | `"lvp"` |
|
|
282
|
-
| `positionCaretOnTab` | Move caret to last valid position on Tab | `boolean` | `true` |
|
|
283
|
-
| `tabThrough` | Tab between mask sections | `boolean` | `false` |
|
|
284
|
-
| `skipOptionalPartCharacter`| Character to skip optional blocks | `string` | `" "` |
|
|
285
|
-
| `numericInput` | Keep caret at end for numeric | `boolean` | `false` |
|
|
286
|
-
| `rightAlign` | Right-align numeric | `boolean` | `true` |
|
|
287
|
-
| `radixPoint` | Decimal separator | `string` | `""` |
|
|
288
|
-
| `groupSeparator` | Thousands separator | `string` | `""` |
|
|
289
|
-
| `digits` | Fractional digits count or range | `number \| string` | `"*"` |
|
|
290
|
-
| `digitsOptional` | Allow skipping fractional digits | `boolean` | `true` |
|
|
291
|
-
| `enforceDigitsOnBlur` | Force show fractional digits on blur | `boolean` | `false` |
|
|
292
|
-
| `allowMinus` | Permit minus sign | `boolean` | `true` |
|
|
293
|
-
| `negationSymbol` | Symbols for negative (e.g. `{ front: "-", back: "" }`) | `object` | `{ front: "-", back: "" }` |
|
|
294
|
-
| `prefix` | Static text prepended | `string` | `""` |
|
|
295
|
-
| `suffix` | Static text appended | `string` | `""` |
|
|
296
|
-
| `SetMaxOnOverflow` | Clamp value at `max` if exceeded | `boolean` | `false` |
|
|
297
|
-
| `min` | Minimum allowed (numeric/datetime) | `string \| number` | — |
|
|
298
|
-
| `max` | Maximum allowed (numeric/datetime) | `string \| number` | — |
|
|
299
|
-
| `step` | `Ctrl+↑/↓` increment step (numeric) | `number` | `1` |
|
|
300
|
-
| `repeat` | Repeat mask N times or `"*"` for infinite | `number \| string` | `0` |
|
|
301
|
-
| `greedy` | Greedy vs non-greedy repeat | `boolean` | `false` |
|
|
302
|
-
| `keepStatic` | Delay switching in alternator/multi-mask scenarios | `boolean \| null` | (multi-mask: `true`) |
|
|
303
|
-
| `importDataAttributes` | Read HTML `data-inputmask-*` attrs | `boolean` | `true` |
|
|
304
|
-
| `supportsInputType` | Allow masking on specified `inputmode` types | `string[]` | `["text","tel","url",`<br>`"password","search"]` |
|
|
305
|
-
| `ignorables` | Key codes to ignore | `number[]` | — |
|
|
306
|
-
| `prefillYear` | Pre-fill century in datetime alias | `boolean` | `true` |
|
|
307
|
-
| `casing` | Force letter casing: `"upper"`, `"lower"`, `"title"` | `string` | — |
|
|
308
|
-
| `inputmode` | Hint for on-screen keyboards (HTML `inputmode`) | `string` | `"verbatim"` |
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk4Y2DTPBL_cjs = require('../chunk-4Y2DTPBL.cjs');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
// src/antd/useHookFormMaskAntd.ts
|
|
7
|
+
function useHookFormMaskAntd(registerFn) {
|
|
8
|
+
return (fieldName, mask, options) => {
|
|
9
|
+
if (!registerFn) throw new Error("registerFn is required");
|
|
10
|
+
const registerReturn = registerFn(fieldName, options);
|
|
11
|
+
const { ref } = registerReturn;
|
|
12
|
+
const refWithMask = (inputRef) => {
|
|
13
|
+
const element = inputRef ? chunk4Y2DTPBL_cjs.resolveInputRef(inputRef.input) : null;
|
|
14
|
+
if (element) chunk4Y2DTPBL_cjs.applyMaskToElement(element, mask, options);
|
|
15
|
+
if (ref) ref(element);
|
|
16
|
+
};
|
|
17
|
+
const result = {
|
|
18
|
+
...registerReturn,
|
|
19
|
+
ref: refWithMask
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(result, "prevRef", {
|
|
22
|
+
value: ref,
|
|
23
|
+
enumerable: false,
|
|
24
|
+
writable: true,
|
|
25
|
+
configurable: true
|
|
26
|
+
});
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
function useMaskInputAntd(props) {
|
|
31
|
+
const { mask, register, options } = props;
|
|
32
|
+
const ref = react.useRef(null);
|
|
33
|
+
const maskInput = react.useMemo(
|
|
34
|
+
() => chunk4Y2DTPBL_cjs.isServer_default ? null : chunk4Y2DTPBL_cjs.createMaskInstance(mask, options),
|
|
35
|
+
[mask, options]
|
|
36
|
+
);
|
|
37
|
+
const refCallback = react.useCallback((input) => {
|
|
38
|
+
if (!input) {
|
|
39
|
+
ref.current = null;
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
ref.current = chunk4Y2DTPBL_cjs.resolveInputRef(input.input);
|
|
43
|
+
}, []);
|
|
44
|
+
react.useEffect(() => {
|
|
45
|
+
if (chunk4Y2DTPBL_cjs.isServer_default || !ref.current) return;
|
|
46
|
+
if (!chunk4Y2DTPBL_cjs.isHTMLElement(ref.current)) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const inputElement = chunk4Y2DTPBL_cjs.findInputElement(ref.current);
|
|
50
|
+
if (maskInput && inputElement && chunk4Y2DTPBL_cjs.isHTMLElement(inputElement)) {
|
|
51
|
+
maskInput.mask(inputElement);
|
|
52
|
+
}
|
|
53
|
+
if (register && chunk4Y2DTPBL_cjs.isHTMLElement(ref.current)) {
|
|
54
|
+
register(ref.current);
|
|
55
|
+
}
|
|
56
|
+
}, [mask, register, options, maskInput]);
|
|
57
|
+
if (chunk4Y2DTPBL_cjs.isServer_default) {
|
|
58
|
+
return () => {
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
return refCallback;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
exports.useHookFormMaskAntd = useHookFormMaskAntd;
|
|
65
|
+
exports.useMaskInputAntd = useMaskInputAntd;
|
|
66
|
+
//# sourceMappingURL=index.cjs.map
|
|
67
|
+
//# sourceMappingURL=index.cjs.map
|