use-mask-input 3.9.0 → 3.10.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 +6 -0
- package/dist/antd.cjs +14 -12
- package/dist/antd.cjs.map +1 -1
- package/dist/antd.d.cts +3 -2
- package/dist/antd.d.ts +3 -2
- package/dist/antd.js +6 -4
- package/dist/antd.js.map +1 -1
- package/dist/{chunk-X5SEJVSB.cjs → chunk-DTC7JTZP.cjs} +78 -26
- package/dist/{chunk-X5SEJVSB.cjs.map → chunk-DTC7JTZP.cjs.map} +1 -1
- package/dist/{chunk-ICLWBMH4.js → chunk-TVCNC3TP.js} +77 -27
- package/dist/{chunk-ICLWBMH4.js.map → chunk-TVCNC3TP.js.map} +1 -1
- package/dist/{index-BoaVtWUr.d.cts → index-D8KkaDbQ.d.cts} +7 -3
- package/dist/{index-BoaVtWUr.d.ts → index-D8KkaDbQ.d.ts} +7 -3
- package/dist/index.cjs +45 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -4
- package/dist/index.d.ts +5 -4
- package/dist/index.js +30 -23
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/antd/useMaskInputAntd.spec.tsx +22 -0
- package/src/antd/useMaskInputAntd.ts +11 -7
- package/src/api/useHookFormMask.ts +4 -1
- package/src/api/useMaskInput.spec.tsx +18 -0
- package/src/api/useMaskInput.ts +11 -5
- package/src/api/withHookFormMask.spec.ts +43 -74
- package/src/api/withHookFormMask.ts +18 -10
- package/src/api/withMask.spec.ts +16 -0
- package/src/api/withMask.ts +11 -8
- package/src/api/withTanStackFormMask.ts +19 -10
- package/src/index.tsx +2 -0
- package/src/types/index.ts +8 -2
- package/src/utils/index.ts +6 -1
- package/src/utils/maskHelpers.ts +44 -1
|
@@ -575,7 +575,11 @@ interface CommandObject {
|
|
|
575
575
|
type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | 'br-bank-account' | 'br-bank-agency' | (string & {}) | (string[] & {}) | null;
|
|
576
576
|
type Options = Options$1;
|
|
577
577
|
type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
|
|
578
|
-
interface
|
|
578
|
+
interface UnmaskedValueApi {
|
|
579
|
+
unmaskedValue: () => string;
|
|
580
|
+
}
|
|
581
|
+
type UseMaskInputReturn = RefCallback<HTMLElement | null> & UnmaskedValueApi;
|
|
582
|
+
interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterReturn<Path<T>>, UnmaskedValueApi {
|
|
579
583
|
ref: RefCallback<HTMLElement | null>;
|
|
580
584
|
prevRef: RefCallback<HTMLElement | null>;
|
|
581
585
|
}
|
|
@@ -587,6 +591,6 @@ interface TanStackFormInputProps {
|
|
|
587
591
|
type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> = Omit<T, 'ref'> & {
|
|
588
592
|
ref: RefCallback<HTMLElement | null>;
|
|
589
593
|
prevRef: RefCallback<HTMLElement | null> | undefined;
|
|
590
|
-
};
|
|
594
|
+
} & UnmaskedValueApi;
|
|
591
595
|
|
|
592
|
-
export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T,
|
|
596
|
+
export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T, UseMaskInputReturn as U, UseHookFormMaskReturn as a, UseTanStackFormMaskReturn as b, UnmaskedValueApi as c };
|
|
@@ -575,7 +575,11 @@ interface CommandObject {
|
|
|
575
575
|
type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | 'br-bank-account' | 'br-bank-agency' | (string & {}) | (string[] & {}) | null;
|
|
576
576
|
type Options = Options$1;
|
|
577
577
|
type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
|
|
578
|
-
interface
|
|
578
|
+
interface UnmaskedValueApi {
|
|
579
|
+
unmaskedValue: () => string;
|
|
580
|
+
}
|
|
581
|
+
type UseMaskInputReturn = RefCallback<HTMLElement | null> & UnmaskedValueApi;
|
|
582
|
+
interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterReturn<Path<T>>, UnmaskedValueApi {
|
|
579
583
|
ref: RefCallback<HTMLElement | null>;
|
|
580
584
|
prevRef: RefCallback<HTMLElement | null>;
|
|
581
585
|
}
|
|
@@ -587,6 +591,6 @@ interface TanStackFormInputProps {
|
|
|
587
591
|
type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> = Omit<T, 'ref'> & {
|
|
588
592
|
ref: RefCallback<HTMLElement | null>;
|
|
589
593
|
prevRef: RefCallback<HTMLElement | null> | undefined;
|
|
590
|
-
};
|
|
594
|
+
} & UnmaskedValueApi;
|
|
591
595
|
|
|
592
|
-
export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T,
|
|
596
|
+
export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T, UseMaskInputReturn as U, UseHookFormMaskReturn as a, UseTanStackFormMaskReturn as b, UnmaskedValueApi as c };
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkDTC7JTZP_cjs = require('./chunk-DTC7JTZP.cjs');
|
|
4
4
|
var react = require('react');
|
|
5
5
|
|
|
6
6
|
function useMaskInput(props) {
|
|
@@ -8,23 +8,25 @@ function useMaskInput(props) {
|
|
|
8
8
|
const ref = react.useRef(null);
|
|
9
9
|
const maskRef = react.useRef(mask);
|
|
10
10
|
const optionsRef = react.useRef(options);
|
|
11
|
+
const unmaskedValue = react.useCallback(() => chunkDTC7JTZP_cjs.getUnmaskedValue(ref.current), []);
|
|
11
12
|
const refCallback = react.useCallback((input) => {
|
|
12
13
|
if (!input) {
|
|
13
14
|
ref.current = null;
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
|
-
ref.current =
|
|
17
|
-
|
|
17
|
+
ref.current = chunkDTC7JTZP_cjs.resolveInputRef(input);
|
|
18
|
+
chunkDTC7JTZP_cjs.withMask(maskRef.current, optionsRef.current)(ref.current);
|
|
18
19
|
}, []);
|
|
19
20
|
react.useEffect(() => {
|
|
20
|
-
if (
|
|
21
|
+
if (chunkDTC7JTZP_cjs.isServer_default || !ref.current || !register) return;
|
|
21
22
|
register(ref.current);
|
|
22
23
|
}, [register]);
|
|
23
|
-
if (
|
|
24
|
-
|
|
25
|
-
};
|
|
24
|
+
if (chunkDTC7JTZP_cjs.isServer_default) {
|
|
25
|
+
const noop = (() => {
|
|
26
|
+
});
|
|
27
|
+
return chunkDTC7JTZP_cjs.setUnmaskedValue(noop, () => "");
|
|
26
28
|
}
|
|
27
|
-
return refCallback;
|
|
29
|
+
return chunkDTC7JTZP_cjs.setUnmaskedValue(refCallback, unmaskedValue);
|
|
28
30
|
}
|
|
29
31
|
function useHookFormMask(registerFn) {
|
|
30
32
|
const entryCacheRef = react.useRef(/* @__PURE__ */ new Map());
|
|
@@ -44,7 +46,7 @@ function useHookFormMask(registerFn) {
|
|
|
44
46
|
if (!registerFn) throw new Error("registerFn is required");
|
|
45
47
|
const registerReturn = registerFn(fieldName, options);
|
|
46
48
|
const { ref } = registerReturn;
|
|
47
|
-
const cacheKey =
|
|
49
|
+
const cacheKey = chunkDTC7JTZP_cjs.makeMaskCacheKey(fieldName, mask);
|
|
48
50
|
let entry = entryCacheRef.current.get(cacheKey);
|
|
49
51
|
if (!entry) {
|
|
50
52
|
const nextEntry = {
|
|
@@ -55,10 +57,10 @@ function useHookFormMask(registerFn) {
|
|
|
55
57
|
};
|
|
56
58
|
const applyMaskToRef = (_ref) => {
|
|
57
59
|
nextEntry.element = _ref;
|
|
58
|
-
if (_ref)
|
|
60
|
+
if (_ref) chunkDTC7JTZP_cjs.applyMaskToElement(_ref, mask, options);
|
|
59
61
|
return _ref;
|
|
60
62
|
};
|
|
61
|
-
nextEntry.stableRef = nextEntry.latestRHFRef ?
|
|
63
|
+
nextEntry.stableRef = nextEntry.latestRHFRef ? chunkDTC7JTZP_cjs.flow(applyMaskToRef, (_ref) => nextEntry.latestRHFRef?.(_ref)) : applyMaskToRef;
|
|
62
64
|
entry = nextEntry;
|
|
63
65
|
entryCacheRef.current.set(cacheKey, nextEntry);
|
|
64
66
|
} else {
|
|
@@ -68,7 +70,8 @@ function useHookFormMask(registerFn) {
|
|
|
68
70
|
...registerReturn,
|
|
69
71
|
ref: entry.stableRef
|
|
70
72
|
};
|
|
71
|
-
|
|
73
|
+
chunkDTC7JTZP_cjs.setUnmaskedValue(result, () => chunkDTC7JTZP_cjs.getUnmaskedValue(entry?.element ?? null));
|
|
74
|
+
chunkDTC7JTZP_cjs.setPrevRef(result, ref);
|
|
72
75
|
return result;
|
|
73
76
|
};
|
|
74
77
|
}, [registerFn]);
|
|
@@ -79,35 +82,38 @@ var refCache = /* @__PURE__ */ new WeakMap();
|
|
|
79
82
|
function withTanStackFormMask(inputProps, mask, options) {
|
|
80
83
|
const { ref } = inputProps;
|
|
81
84
|
if (!ref) {
|
|
85
|
+
let currentElement = null;
|
|
82
86
|
const result2 = {
|
|
83
87
|
...inputProps,
|
|
84
88
|
ref: ((input) => {
|
|
85
|
-
|
|
89
|
+
currentElement = input;
|
|
90
|
+
if (input) chunkDTC7JTZP_cjs.applyMaskToElement(input, mask, options);
|
|
86
91
|
})
|
|
87
92
|
};
|
|
88
|
-
|
|
93
|
+
chunkDTC7JTZP_cjs.setUnmaskedValue(result2, () => chunkDTC7JTZP_cjs.getUnmaskedValue(currentElement));
|
|
94
|
+
chunkDTC7JTZP_cjs.setPrevRef(result2, ref);
|
|
89
95
|
return result2;
|
|
90
96
|
}
|
|
91
97
|
if (!refCache.has(ref)) {
|
|
92
98
|
refCache.set(ref, /* @__PURE__ */ new Map());
|
|
93
99
|
}
|
|
94
100
|
const maskCache = refCache.get(ref);
|
|
95
|
-
const cacheKey =
|
|
101
|
+
const cacheKey = chunkDTC7JTZP_cjs.makeMaskCacheKey(inputProps.name ?? "", mask);
|
|
96
102
|
if (!maskCache?.has(cacheKey)) {
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
chunkX5SEJVSB_cjs.flow(applyMaskToRef, ref)
|
|
104
|
-
);
|
|
103
|
+
const maskedRef2 = ((input) => {
|
|
104
|
+
maskedRef2.currentElement = input;
|
|
105
|
+
if (input) chunkDTC7JTZP_cjs.applyMaskToElement(input, mask, options);
|
|
106
|
+
ref(input);
|
|
107
|
+
});
|
|
108
|
+
maskCache?.set(cacheKey, maskedRef2);
|
|
105
109
|
}
|
|
110
|
+
const maskedRef = maskCache?.get(cacheKey);
|
|
106
111
|
const result = {
|
|
107
112
|
...inputProps,
|
|
108
|
-
ref:
|
|
113
|
+
ref: maskedRef
|
|
109
114
|
};
|
|
110
|
-
|
|
115
|
+
chunkDTC7JTZP_cjs.setUnmaskedValue(result, () => chunkDTC7JTZP_cjs.getUnmaskedValue(maskedRef?.currentElement ?? null));
|
|
116
|
+
chunkDTC7JTZP_cjs.setPrevRef(result, ref);
|
|
111
117
|
return result;
|
|
112
118
|
}
|
|
113
119
|
|
|
@@ -128,35 +134,36 @@ function withHookFormMask(register, mask, options) {
|
|
|
128
134
|
...register,
|
|
129
135
|
ref: null
|
|
130
136
|
};
|
|
131
|
-
|
|
137
|
+
chunkDTC7JTZP_cjs.setUnmaskedValue(result2, () => "");
|
|
138
|
+
chunkDTC7JTZP_cjs.setPrevRef(result2, ref);
|
|
132
139
|
return result2;
|
|
133
140
|
}
|
|
134
141
|
if (!refCache2.has(ref)) {
|
|
135
142
|
refCache2.set(ref, /* @__PURE__ */ new Map());
|
|
136
143
|
}
|
|
137
144
|
const maskCache = refCache2.get(ref);
|
|
138
|
-
const cacheKey =
|
|
145
|
+
const cacheKey = chunkDTC7JTZP_cjs.makeMaskCacheKey(register.name, mask);
|
|
139
146
|
if (!maskCache?.has(cacheKey)) {
|
|
140
|
-
const
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
chunkX5SEJVSB_cjs.flow(applyMaskToRef, ref)
|
|
147
|
-
);
|
|
147
|
+
const maskedRef2 = ((input) => {
|
|
148
|
+
maskedRef2.currentElement = input;
|
|
149
|
+
if (input) chunkDTC7JTZP_cjs.applyMaskToElement(input, mask, options);
|
|
150
|
+
return ref(input);
|
|
151
|
+
});
|
|
152
|
+
maskCache?.set(cacheKey, maskedRef2);
|
|
148
153
|
}
|
|
154
|
+
const maskedRef = maskCache?.get(cacheKey);
|
|
149
155
|
const result = {
|
|
150
156
|
...register,
|
|
151
|
-
ref:
|
|
157
|
+
ref: maskedRef
|
|
152
158
|
};
|
|
153
|
-
|
|
159
|
+
chunkDTC7JTZP_cjs.setUnmaskedValue(result, () => chunkDTC7JTZP_cjs.getUnmaskedValue(maskedRef?.currentElement ?? null));
|
|
160
|
+
chunkDTC7JTZP_cjs.setPrevRef(result, ref);
|
|
154
161
|
return result;
|
|
155
162
|
}
|
|
156
163
|
|
|
157
164
|
Object.defineProperty(exports, "withMask", {
|
|
158
165
|
enumerable: true,
|
|
159
|
-
get: function () { return
|
|
166
|
+
get: function () { return chunkDTC7JTZP_cjs.withMask; }
|
|
160
167
|
});
|
|
161
168
|
exports.useHookFormMask = useHookFormMask;
|
|
162
169
|
exports.useMaskInput = useMaskInput;
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withTanStackFormMask.ts","../src/api/useTanStackFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","useCallback","resolveInputRef","withMask","useEffect","isServer_default","useLayoutEffect","useMemo","makeMaskCacheKey","applyMaskToElement","flow","setPrevRef","result","refCache"],"mappings":";;;;;AA0Be,SAAR,aAA8B,KAAA,EAA6D;AAChG,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAMA,aAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,OAAA,GAAUA,aAAO,IAAI,CAAA;AAC3B,EAAA,MAAM,UAAA,GAAaA,aAAO,OAAO,CAAA;AAEjC,EAAA,MAAM,WAAA,GAAcC,iBAAA,CAAY,CAAC,KAAA,KAA8B;AAC7D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAUC,kCAAgB,KAAK,CAAA;AACnC,IAAAC,0BAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AAAA,EAC3D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAIC,kCAAA,IAAY,CAAC,GAAA,CAAI,OAAA,IAAW,CAAC,QAAA,EAAU;AAC3C,IAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAIA,kCAAA,EAAU;AACZ,IAAA,OAAO,MAAY;AAAA,IAEnB,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,WAAA;AACT;ACxBe,SAAR,gBAEL,UAAA,EACyD;AACzD,EAAA,MAAM,aAAA,GAAgBL,YAAAA,iBAAO,IAAI,GAAA,EAAyB,CAAA;AAE1D,EAAAM,qBAAA,CAAgB,MAAM;AACpB,IAAA,aAAA,CAAc,OAAA,CAAQ,OAAA,CAAQ,CAAC,KAAA,KAAU;AACvC,MAAA,MAAM,YAAA,GAAe,KAAA;AACrB,MAAA,IAAI,CAAC,YAAA,CAAa,OAAA,IAAW,CAAC,aAAa,YAAA,EAAc;AAIzD,MAAA,IAAI,YAAA,CAAa,YAAA,KAAiB,YAAA,CAAa,YAAA,EAAc;AAC3D,QAAA,YAAA,CAAa,YAAA,CAAa,aAAa,OAAO,CAAA;AAC9C,QAAA,YAAA,CAAa,eAAe,YAAA,CAAa,YAAA;AAAA,MAC3C;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAC,CAAA;AAED,EAAA,OAAOC,cAAQ,MAAM;AAGnB,IAAA,aAAA,CAAc,OAAA,uBAAc,GAAA,EAAwB;AAEpD,IAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACmB;AACzD,MAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,MAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,MAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,MAAA,MAAM,QAAA,GAAWC,kCAAA,CAAiB,SAAA,EAAW,IAAI,CAAA;AAEjD,MAAA,IAAI,KAAA,GAAQ,aAAA,CAAc,OAAA,CAAQ,GAAA,CAAI,QAAQ,CAAA;AAC9C,MAAA,IAAI,CAAC,KAAA,EAAO;AACV,QAAA,MAAM,SAAA,GAAwB;AAAA,UAC5B,OAAA,EAAS,IAAA;AAAA,UACT,YAAA,EAAc,GAAA;AAAA,UACd,YAAA,EAAc,MAAA;AAAA,UACd,SAAA,EAAW;AAAA,SACb;AAEA,QAAA,MAAM,cAAA,GAAiB,CAAC,IAAA,KAA6B;AACnD,UAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AACpB,UAAA,IAAI,IAAA,EAAMC,oCAAA,CAAmB,IAAA,EAAM,IAAA,EAAM,OAAkB,CAAA;AAC3D,UAAA,OAAO,IAAA;AAAA,QACT,CAAA;AAEA,QAAA,SAAA,CAAU,SAAA,GACR,SAAA,CAAU,YAAA,GACNC,sBAAA,CAAK,cAAA,EAAgB,CAAC,IAAA,KAA6B,SAAA,CAAU,YAAA,GAAe,IAAI,CAAC,CAAA,GACjF,cAAA;AAGN,QAAA,KAAA,GAAQ,SAAA;AACR,QAAA,aAAA,CAAc,OAAA,CAAQ,GAAA,CAAI,QAAA,EAAU,SAAS,CAAA;AAAA,MAC/C,CAAA,MAAO;AACL,QAAA,KAAA,CAAM,YAAA,GAAe,GAAA;AAAA,MACvB;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,KAAK,KAAA,CAAM;AAAA,OACb;AAEA,MAAAC,4BAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;;;AC5FA,IAAM,QAAA,uBAAe,OAAA,EAGnB;AAMa,SAAR,oBAAA,CACL,UAAA,EACA,IAAA,EACA,OAAA,EAC8B;AAC9B,EAAA,MAAM,EAAE,KAAI,GAAI,UAAA;AAEhB,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAMC,OAAAA,GAAS;AAAA,MACb,GAAG,UAAA;AAAA,MACH,GAAA,GAAM,CAAC,KAAA,KAA8B;AACnC,QAAA,IAAI,KAAA,EAAOH,oCAAA,CAAmB,KAAA,EAAO,IAAA,EAAM,OAAO,CAAA;AAAA,MACpD,CAAA;AAAA,KACF;AAEA,IAAAE,4BAAA,CAAWC,SAAQ,GAAG,CAAA;AACtB,IAAA,OAAOA,OAAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAAC,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA,EAAG;AACtB,IAAA,QAAA,CAAS,GAAA,CAAI,GAAA,kBAAK,IAAI,GAAA,EAAK,CAAA;AAAA,EAC7B;AAEA,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAClC,EAAA,MAAM,QAAA,GAAWJ,kCAAA,CAAiB,UAAA,CAAW,IAAA,IAAQ,IAAI,IAAI,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC7B,IAAA,MAAM,cAAA,GAAiB,CAAC,IAAA,KAA6B;AACnD,MAAA,IAAI,IAAA,EAAMC,oCAAA,CAAmB,IAAA,EAAM,IAAA,EAAM,OAAO,CAAA;AAChD,MAAA,OAAO,IAAA;AAAA,IACT,CAAA;AAEA,IAAA,SAAA,EAAW,GAAA;AAAA,MACT,QAAA;AAAA,MACAC,sBAAA,CAAK,gBAAgB,GAAG;AAAA,KAC1B;AAAA,EACF;AAEA,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,UAAA;AAAA,IACH,GAAA,EAAK,SAAA,EAAW,GAAA,CAAI,QAAQ;AAAA,GAC9B;AAEA,EAAAC,4BAAA,CAAW,QAAQ,GAAG,CAAA;AACtB,EAAA,OAAO,MAAA;AACT;;;ACrDe,SAAR,mBAAA,GAI2B;AAChC,EAAA,OAAOJ,aAAAA;AAAA,IACL,MAAM,CACJ,IAAA,EACA,UAAA,EACA,YACiC,oBAAA,CAAqB,UAAA,EAAY,MAAM,OAAO,CAAA;AAAA,IACjF;AAAC,GACH;AACF;;;ACbA,IAAMM,SAAAA,uBAAe,OAAA,EAGnB;AAYa,SAAR,gBAAA,CACL,QAAA,EACA,IAAA,EACA,OAAA,EACoC;AACpC,EAAA,MAAM,EAAE,KAAI,GAAI,QAAA;AAGhB,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAMD,OAAAA,GAAS;AAAA,MACb,GAAG,QAAA;AAAA,MACH,GAAA,EAAK;AAAA,KACP;AACA,IAAAD,4BAAA,CAAWC,SAAQ,GAAG,CAAA;AACtB,IAAA,OAAOA,OAAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAACC,SAAAA,CAAS,GAAA,CAAI,GAAG,CAAA,EAAG;AACtB,IAAAA,SAAAA,CAAS,GAAA,CAAI,GAAA,kBAAK,IAAI,KAAK,CAAA;AAAA,EAC7B;AACA,EAAA,MAAM,SAAA,GAAYA,SAAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAClC,EAAA,MAAM,QAAA,GAAWL,kCAAA,CAAiB,QAAA,CAAS,IAAA,EAAM,IAAI,CAAA;AAErD,EAAA,IAAI,CAAC,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC7B,IAAA,MAAM,cAAA,GAAiB,CAAC,IAAA,KAA6B;AACnD,MAAA,IAAI,IAAA,EAAMC,oCAAA,CAAmB,IAAA,EAAM,IAAA,EAAM,OAAO,CAAA;AAChD,MAAA,OAAO,IAAA;AAAA,IACT,CAAA;AACA,IAAA,SAAA,EAAW,GAAA;AAAA,MACT,QAAA;AAAA,MACAC,sBAAA,CAAK,gBAAgB,GAAG;AAAA,KAC1B;AAAA,EACF;AAEA,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,QAAA;AAAA,IACH,GAAA,EAAK,SAAA,EAAW,GAAA,CAAI,QAAQ;AAAA,GAC9B;AAEA,EAAAC,4BAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,EAAA,OAAO,MAAA;AACT","file":"index.cjs","sourcesContent":["import {\n useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\n\nimport type { Input, Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n mask: Mask;\n register?: (element: HTMLElement) => void;\n options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void) {\n const { mask, register, options } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const maskRef = useRef(mask);\n const optionsRef = useRef(options);\n\n const refCallback = useCallback((input: Input | null): void => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input);\n withMask(maskRef.current, optionsRef.current)(ref.current);\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current || !register) return;\n register(ref.current);\n }, [register]);\n\n if (isServer) {\n return (): void => {\n // server doesn't have dom, so just do nothing\n };\n }\n\n return refCallback;\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n FieldValues, Path,\n RegisterOptions,\n UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n stableRef: RefCallback<HTMLElement | null>;\n element: HTMLElement | null;\n latestRHFRef?: RefCallback<HTMLElement | null>;\n syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n useLayoutEffect(() => {\n entryCacheRef.current.forEach((entry) => {\n const currentEntry = entry;\n if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n // After reset(), RHF gives us a new ref callback. React won't call it\n // because our outward ref identity stays stable, so we replay it here.\n if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n currentEntry.latestRHFRef(currentEntry.element);\n currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n }\n });\n });\n\n return useMemo(() => {\n // registerFn identity changed, so drop cached refs bound to the previous\n // register lifecycle.\n entryCacheRef.current = new Map<string, CacheEntry>();\n\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n if (!registerFn) throw new Error('registerFn is required');\n\n const registerReturn = registerFn(fieldName, options as Options);\n const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n let entry = entryCacheRef.current.get(cacheKey);\n if (!entry) {\n const nextEntry: CacheEntry = {\n element: null,\n latestRHFRef: ref,\n syncedRHFRef: undefined,\n stableRef: null as unknown as RefCallback<HTMLElement | null>,\n };\n\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n nextEntry.element = _ref;\n if (_ref) applyMaskToElement(_ref, mask, options as Options);\n return _ref;\n };\n\n nextEntry.stableRef = (\n nextEntry.latestRHFRef\n ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n : applyMaskToRef\n ) as RefCallback<HTMLElement | null>;\n\n entry = nextEntry;\n entryCacheRef.current.set(cacheKey, nextEntry);\n } else {\n entry.latestRHFRef = ref;\n }\n\n const result = {\n ...registerReturn,\n ref: entry.stableRef,\n } as UseHookFormMaskReturn<T>;\n\n setPrevRef(result, ref);\n\n return result;\n };\n }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\n\nimport type {\n Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances TanStack Form-compatible input props with mask support.\n * Works with objects returned by field.getInputProps().\n */\nexport default function withTanStackFormMask<T extends TanStackFormInputProps>(\n inputProps: T,\n mask: Mask,\n options?: Options,\n): UseTanStackFormMaskReturn<T> {\n const { ref } = inputProps;\n\n if (!ref) {\n const result = {\n ...inputProps,\n ref: ((input: HTMLElement | null) => {\n if (input) applyMaskToElement(input, mask, options);\n }) as RefCallback<HTMLElement | null>,\n } as unknown as UseTanStackFormMaskReturn<T>;\n\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);\n\n if (!maskCache?.has(cacheKey)) {\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n if (_ref) applyMaskToElement(_ref, mask, options);\n return _ref;\n };\n\n maskCache?.set(\n cacheKey,\n flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n );\n }\n\n const result = {\n ...inputProps,\n ref: maskCache?.get(cacheKey),\n } as unknown as UseTanStackFormMaskReturn<T>;\n\n setPrevRef(result, ref);\n return result;\n}\n","import { useMemo } from 'react';\n\nimport withTanStackFormMask from './withTanStackFormMask';\n\nimport type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';\n\n/**\n * Creates a helper to mask TanStack Form-compatible input props.\n * Designed for objects returned by field.getInputProps().\n */\nexport default function useTanStackFormMask(): <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n) => UseTanStackFormMaskReturn<T> {\n return useMemo(\n () => <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),\n [],\n );\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n register: UseFormRegisterReturn,\n mask: Mask,\n options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n // null ref — nothing to cache, return as-is.\n if (!ref) {\n const result = {\n ...register,\n ref: null as unknown as RefCallback<HTMLElement | null>,\n } as UseHookFormMaskReturn<FieldValues>;\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(register.name, mask);\n\n if (!maskCache?.has(cacheKey)) {\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n if (_ref) applyMaskToElement(_ref, mask, options);\n return _ref;\n };\n maskCache?.set(\n cacheKey,\n flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n );\n }\n\n const result = {\n ...register,\n ref: maskCache?.get(cacheKey),\n } as UseHookFormMaskReturn<FieldValues>;\n\n setPrevRef(result, ref);\n\n return result;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withTanStackFormMask.ts","../src/api/useTanStackFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","useCallback","getUnmaskedValue","resolveInputRef","withMask","useEffect","isServer_default","setUnmaskedValue","useLayoutEffect","useMemo","makeMaskCacheKey","applyMaskToElement","flow","setPrevRef","result","maskedRef","refCache"],"mappings":";;;;;AA6Be,SAAR,aAA8B,KAAA,EAAgD;AACnF,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAMA,aAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,OAAA,GAAUA,aAAO,IAAI,CAAA;AAC3B,EAAA,MAAM,UAAA,GAAaA,aAAO,OAAO,CAAA;AACjC,EAAA,MAAM,aAAA,GAAgBC,kBAAY,MAAMC,kCAAA,CAAiB,IAAI,OAAO,CAAA,EAAG,EAAE,CAAA;AAEzE,EAAA,MAAM,WAAA,GAAcD,iBAAA,CAAY,CAAC,KAAA,KAA8B;AAC7D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAUE,kCAAgB,KAAK,CAAA;AACnC,IAAAC,0BAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AAAA,EAC3D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAIC,kCAAA,IAAY,CAAC,GAAA,CAAI,OAAA,IAAW,CAAC,QAAA,EAAU;AAC3C,IAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAIA,kCAAA,EAAU;AACZ,IAAA,MAAM,QAAQ,MAAM;AAAA,IAEpB,CAAA,CAAA;AAEA,IAAA,OAAOC,kCAAA,CAAiB,IAAA,EAAM,MAAM,EAAE,CAAA;AAAA,EACxC;AAEA,EAAA,OAAOA,kCAAA,CAAiB,aAAa,aAAa,CAAA;AACpD;AC5Be,SAAR,gBAEL,UAAA,EACyD;AACzD,EAAA,MAAM,aAAA,GAAgBP,YAAAA,iBAAO,IAAI,GAAA,EAAyB,CAAA;AAE1D,EAAAQ,qBAAA,CAAgB,MAAM;AACpB,IAAA,aAAA,CAAc,OAAA,CAAQ,OAAA,CAAQ,CAAC,KAAA,KAAU;AACvC,MAAA,MAAM,YAAA,GAAe,KAAA;AACrB,MAAA,IAAI,CAAC,YAAA,CAAa,OAAA,IAAW,CAAC,aAAa,YAAA,EAAc;AAIzD,MAAA,IAAI,YAAA,CAAa,YAAA,KAAiB,YAAA,CAAa,YAAA,EAAc;AAC3D,QAAA,YAAA,CAAa,YAAA,CAAa,aAAa,OAAO,CAAA;AAC9C,QAAA,YAAA,CAAa,eAAe,YAAA,CAAa,YAAA;AAAA,MAC3C;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAC,CAAA;AAED,EAAA,OAAOC,cAAQ,MAAM;AAGnB,IAAA,aAAA,CAAc,OAAA,uBAAc,GAAA,EAAwB;AAEpD,IAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACmB;AACzD,MAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,MAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,MAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,MAAA,MAAM,QAAA,GAAWC,kCAAA,CAAiB,SAAA,EAAW,IAAI,CAAA;AAEjD,MAAA,IAAI,KAAA,GAAQ,aAAA,CAAc,OAAA,CAAQ,GAAA,CAAI,QAAQ,CAAA;AAC9C,MAAA,IAAI,CAAC,KAAA,EAAO;AACV,QAAA,MAAM,SAAA,GAAwB;AAAA,UAC5B,OAAA,EAAS,IAAA;AAAA,UACT,YAAA,EAAc,GAAA;AAAA,UACd,YAAA,EAAc,MAAA;AAAA,UACd,SAAA,EAAW;AAAA,SACb;AAEA,QAAA,MAAM,cAAA,GAAiB,CAAC,IAAA,KAA6B;AACnD,UAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AACpB,UAAA,IAAI,IAAA,EAAMC,oCAAA,CAAmB,IAAA,EAAM,IAAA,EAAM,OAAkB,CAAA;AAC3D,UAAA,OAAO,IAAA;AAAA,QACT,CAAA;AAEA,QAAA,SAAA,CAAU,SAAA,GACR,SAAA,CAAU,YAAA,GACNC,sBAAA,CAAK,cAAA,EAAgB,CAAC,IAAA,KAA6B,SAAA,CAAU,YAAA,GAAe,IAAI,CAAC,CAAA,GACjF,cAAA;AAGN,QAAA,KAAA,GAAQ,SAAA;AACR,QAAA,aAAA,CAAc,OAAA,CAAQ,GAAA,CAAI,QAAA,EAAU,SAAS,CAAA;AAAA,MAC/C,CAAA,MAAO;AACL,QAAA,KAAA,CAAM,YAAA,GAAe,GAAA;AAAA,MACvB;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,KAAK,KAAA,CAAM;AAAA,OACb;AACA,MAAAL,kCAAA,CAAiB,QAAQ,MAAML,kCAAA,CAAiB,KAAA,EAAO,OAAA,IAAW,IAAI,CAAC,CAAA;AAEvE,MAAAW,4BAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;;;ACzFA,IAAM,QAAA,uBAAe,OAAA,EAGnB;AAMa,SAAR,oBAAA,CACL,UAAA,EACA,IAAA,EACA,OAAA,EAC8B;AAC9B,EAAA,MAAM,EAAE,KAAI,GAAI,UAAA;AAEhB,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,IAAI,cAAA,GAAqC,IAAA;AACzC,IAAA,MAAMC,OAAAA,GAAS;AAAA,MACb,GAAG,UAAA;AAAA,MACH,GAAA,GAAM,CAAC,KAAA,KAA8B;AACnC,QAAA,cAAA,GAAiB,KAAA;AACjB,QAAA,IAAI,KAAA,EAAOH,oCAAA,CAAmB,KAAA,EAAO,IAAA,EAAM,OAAO,CAAA;AAAA,MACpD,CAAA;AAAA,KACF;AACA,IAAAJ,kCAAA,CAAiBO,OAAAA,EAAQ,MAAMZ,kCAAA,CAAiB,cAAc,CAAC,CAAA;AAE/D,IAAAW,4BAAA,CAAWC,SAAQ,GAAG,CAAA;AACtB,IAAA,OAAOA,OAAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAAC,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA,EAAG;AACtB,IAAA,QAAA,CAAS,GAAA,CAAI,GAAA,kBAAK,IAAI,GAAA,EAAK,CAAA;AAAA,EAC7B;AAEA,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAClC,EAAA,MAAM,QAAA,GAAWJ,kCAAA,CAAiB,UAAA,CAAW,IAAA,IAAQ,IAAI,IAAI,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC7B,IAAA,MAAMK,UAAAA,IAAa,CAAC,KAAA,KAA8B;AAChD,MAAAA,WAAU,cAAA,GAAiB,KAAA;AAC3B,MAAA,IAAI,KAAA,EAAOJ,oCAAA,CAAmB,KAAA,EAAO,IAAA,EAAM,OAAO,CAAA;AAClD,MAAA,GAAA,CAAI,KAAK,CAAA;AAAA,IACX,CAAA,CAAA;AAEA,IAAA,SAAA,EAAW,GAAA,CAAI,UAAUI,UAAS,CAAA;AAAA,EACpC;AAEA,EAAA,MAAM,SAAA,GAAY,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,UAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACP;AACA,EAAAR,kCAAA,CAAiB,QAAQ,MAAML,kCAAA,CAAiB,SAAA,EAAW,cAAA,IAAkB,IAAI,CAAC,CAAA;AAElF,EAAAW,4BAAA,CAAW,QAAQ,GAAG,CAAA;AACtB,EAAA,OAAO,MAAA;AACT;;;AC9De,SAAR,mBAAA,GAI2B;AAChC,EAAA,OAAOJ,aAAAA;AAAA,IACL,MAAM,CACJ,IAAA,EACA,UAAA,EACA,YACiC,oBAAA,CAAqB,UAAA,EAAY,MAAM,OAAO,CAAA;AAAA,IACjF;AAAC,GACH;AACF;;;ACPA,IAAMO,SAAAA,uBAAe,OAAA,EAGnB;AAYa,SAAR,gBAAA,CACL,QAAA,EACA,IAAA,EACA,OAAA,EACoC;AACpC,EAAA,MAAM,EAAE,KAAI,GAAI,QAAA;AAGhB,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAMF,OAAAA,GAAS;AAAA,MACb,GAAG,QAAA;AAAA,MACH,GAAA,EAAK;AAAA,KACP;AACA,IAAAP,kCAAA,CAAiBO,OAAAA,EAAQ,MAAM,EAAE,CAAA;AACjC,IAAAD,4BAAA,CAAWC,SAAQ,GAAG,CAAA;AACtB,IAAA,OAAOA,OAAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAACE,SAAAA,CAAS,GAAA,CAAI,GAAG,CAAA,EAAG;AACtB,IAAAA,SAAAA,CAAS,GAAA,CAAI,GAAA,kBAAK,IAAI,KAAK,CAAA;AAAA,EAC7B;AACA,EAAA,MAAM,SAAA,GAAYA,SAAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAClC,EAAA,MAAM,QAAA,GAAWN,kCAAA,CAAiB,QAAA,CAAS,IAAA,EAAM,IAAI,CAAA;AAErD,EAAA,IAAI,CAAC,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC7B,IAAA,MAAMK,UAAAA,IAAa,CAAC,KAAA,KAA8B;AAChD,MAAAA,WAAU,cAAA,GAAiB,KAAA;AAC3B,MAAA,IAAI,KAAA,EAAOJ,oCAAA,CAAmB,KAAA,EAAO,IAAA,EAAM,OAAO,CAAA;AAClD,MAAA,OAAO,IAAI,KAAK,CAAA;AAAA,IAClB,CAAA,CAAA;AAEA,IAAA,SAAA,EAAW,GAAA,CAAI,UAAUI,UAAS,CAAA;AAAA,EACpC;AAEA,EAAA,MAAM,SAAA,GAAY,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,QAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACP;AACA,EAAAR,kCAAA,CAAiB,QAAQ,MAAML,kCAAA,CAAiB,SAAA,EAAW,cAAA,IAAkB,IAAI,CAAC,CAAA;AAElF,EAAAW,4BAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,EAAA,OAAO,MAAA;AACT","file":"index.cjs","sourcesContent":["import {\n useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\nimport { getUnmaskedValue, setUnmaskedValue } from '../utils';\n\nimport type {\n Input, Mask, Options, UseMaskInputReturn,\n} from '../types';\n\ninterface UseMaskInputOptions {\n mask: Mask;\n register?: (element: HTMLElement) => void;\n options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): UseMaskInputReturn {\n const { mask, register, options } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const maskRef = useRef(mask);\n const optionsRef = useRef(options);\n const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);\n\n const refCallback = useCallback((input: Input | null): void => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input);\n withMask(maskRef.current, optionsRef.current)(ref.current);\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current || !register) return;\n register(ref.current);\n }, [register]);\n\n if (isServer) {\n const noop = (() => {\n // server doesn't have dom, so just do nothing\n }) as unknown as UseMaskInputReturn;\n\n return setUnmaskedValue(noop, () => '');\n }\n\n return setUnmaskedValue(refCallback, unmaskedValue);\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport {\n flow, getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,\n} from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n FieldValues, Path,\n RegisterOptions,\n UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n stableRef: RefCallback<HTMLElement | null>;\n element: HTMLElement | null;\n latestRHFRef?: RefCallback<HTMLElement | null>;\n syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n useLayoutEffect(() => {\n entryCacheRef.current.forEach((entry) => {\n const currentEntry = entry;\n if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n // After reset(), RHF gives us a new ref callback. React won't call it\n // because our outward ref identity stays stable, so we replay it here.\n if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n currentEntry.latestRHFRef(currentEntry.element);\n currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n }\n });\n });\n\n return useMemo(() => {\n // registerFn identity changed, so drop cached refs bound to the previous\n // register lifecycle.\n entryCacheRef.current = new Map<string, CacheEntry>();\n\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n if (!registerFn) throw new Error('registerFn is required');\n\n const registerReturn = registerFn(fieldName, options as Options);\n const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n let entry = entryCacheRef.current.get(cacheKey);\n if (!entry) {\n const nextEntry: CacheEntry = {\n element: null,\n latestRHFRef: ref,\n syncedRHFRef: undefined,\n stableRef: null as unknown as RefCallback<HTMLElement | null>,\n };\n\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n nextEntry.element = _ref;\n if (_ref) applyMaskToElement(_ref, mask, options as Options);\n return _ref;\n };\n\n nextEntry.stableRef = (\n nextEntry.latestRHFRef\n ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n : applyMaskToRef\n ) as RefCallback<HTMLElement | null>;\n\n entry = nextEntry;\n entryCacheRef.current.set(cacheKey, nextEntry);\n } else {\n entry.latestRHFRef = ref;\n }\n\n const result = {\n ...registerReturn,\n ref: entry.stableRef,\n } as UseHookFormMaskReturn<T>;\n setUnmaskedValue(result, () => getUnmaskedValue(entry?.element ?? null));\n\n setPrevRef(result, ref);\n\n return result;\n };\n }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport {\n getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,\n} from '../utils';\n\nimport type { RefCallback } from 'react';\n\nimport type {\n Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,\n} from '../types';\n\ntype MaskedRefCallback = RefCallback<HTMLElement | null> & {\n currentElement?: HTMLElement | null;\n};\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances TanStack Form-compatible input props with mask support.\n * Works with objects returned by field.getInputProps().\n */\nexport default function withTanStackFormMask<T extends TanStackFormInputProps>(\n inputProps: T,\n mask: Mask,\n options?: Options,\n): UseTanStackFormMaskReturn<T> {\n const { ref } = inputProps;\n\n if (!ref) {\n let currentElement: HTMLElement | null = null;\n const result = {\n ...inputProps,\n ref: ((input: HTMLElement | null) => {\n currentElement = input;\n if (input) applyMaskToElement(input, mask, options);\n }) as RefCallback<HTMLElement | null>,\n } as unknown as UseTanStackFormMaskReturn<T>;\n setUnmaskedValue(result, () => getUnmaskedValue(currentElement));\n\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);\n\n if (!maskCache?.has(cacheKey)) {\n const maskedRef = ((input: HTMLElement | null) => {\n maskedRef.currentElement = input;\n if (input) applyMaskToElement(input, mask, options);\n ref(input);\n }) as MaskedRefCallback;\n\n maskCache?.set(cacheKey, maskedRef);\n }\n\n const maskedRef = maskCache?.get(cacheKey) as MaskedRefCallback | undefined;\n const result = {\n ...inputProps,\n ref: maskedRef,\n } as unknown as UseTanStackFormMaskReturn<T>;\n setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));\n\n setPrevRef(result, ref);\n return result;\n}\n","import { useMemo } from 'react';\n\nimport withTanStackFormMask from './withTanStackFormMask';\n\nimport type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';\n\n/**\n * Creates a helper to mask TanStack Form-compatible input props.\n * Designed for objects returned by field.getInputProps().\n */\nexport default function useTanStackFormMask(): <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n) => UseTanStackFormMaskReturn<T> {\n return useMemo(\n () => <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),\n [],\n );\n}\n","import { applyMaskToElement } from '../core';\nimport {\n getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,\n} from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\ntype MaskedRefCallback = RefCallback<HTMLElement | null> & {\n currentElement?: HTMLElement | null;\n};\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n register: UseFormRegisterReturn,\n mask: Mask,\n options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n // null ref — nothing to cache, return as-is.\n if (!ref) {\n const result = {\n ...register,\n ref: null as unknown as RefCallback<HTMLElement | null>,\n } as UseHookFormMaskReturn<FieldValues>;\n setUnmaskedValue(result, () => '');\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(register.name, mask);\n\n if (!maskCache?.has(cacheKey)) {\n const maskedRef = ((input: HTMLElement | null) => {\n maskedRef.currentElement = input;\n if (input) applyMaskToElement(input, mask, options);\n return ref(input);\n }) as MaskedRefCallback;\n\n maskCache?.set(cacheKey, maskedRef);\n }\n\n const maskedRef = maskCache?.get(cacheKey) as MaskedRefCallback | undefined;\n const result = {\n ...register,\n ref: maskedRef,\n } as UseHookFormMaskReturn<FieldValues>;\n setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));\n\n setPrevRef(result, ref);\n\n return result;\n}\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { M as Mask, O as Options,
|
|
1
|
+
import { M as Mask, O as Options, U as UseMaskInputReturn, a as UseHookFormMaskReturn, T as TanStackFormInputProps, b as UseTanStackFormMaskReturn } from './index-D8KkaDbQ.cjs';
|
|
2
|
+
export { I as Input, c as UnmaskedValueApi } from './index-D8KkaDbQ.cjs';
|
|
2
3
|
import { FieldValues, RegisterOptions, UseFormRegister, Path, UseFormRegisterReturn } from 'react-hook-form';
|
|
3
4
|
export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
|
|
4
5
|
import 'react';
|
|
@@ -18,7 +19,7 @@ interface UseMaskInputOptions {
|
|
|
18
19
|
* @param props.options - Optional mask configuration options
|
|
19
20
|
* @returns A ref callback function to attach to the input element
|
|
20
21
|
*/
|
|
21
|
-
declare function useMaskInput(props: UseMaskInputOptions):
|
|
22
|
+
declare function useMaskInput(props: UseMaskInputOptions): UseMaskInputReturn;
|
|
22
23
|
|
|
23
24
|
/**
|
|
24
25
|
* Creates a masked version of React Hook Form's register function.
|
|
@@ -45,7 +46,7 @@ declare function useTanStackFormMask(): <T extends TanStackFormInputProps>(mask:
|
|
|
45
46
|
* @param options - Optional mask configuration options
|
|
46
47
|
* @returns A ref callback function that applies the mask
|
|
47
48
|
*/
|
|
48
|
-
declare function withMask(mask: Mask, options?: Options):
|
|
49
|
+
declare function withMask(mask: Mask, options?: Options): UseMaskInputReturn;
|
|
49
50
|
|
|
50
51
|
/**
|
|
51
52
|
* Enhances a React Hook Form register return object with mask support.
|
|
@@ -65,4 +66,4 @@ declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, o
|
|
|
65
66
|
*/
|
|
66
67
|
declare function withTanStackFormMask<T extends TanStackFormInputProps>(inputProps: T, mask: Mask, options?: Options): UseTanStackFormMaskReturn<T>;
|
|
67
68
|
|
|
68
|
-
export {
|
|
69
|
+
export { Mask, Options, TanStackFormInputProps, UseMaskInputReturn, UseTanStackFormMaskReturn, useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { M as Mask, O as Options,
|
|
1
|
+
import { M as Mask, O as Options, U as UseMaskInputReturn, a as UseHookFormMaskReturn, T as TanStackFormInputProps, b as UseTanStackFormMaskReturn } from './index-D8KkaDbQ.js';
|
|
2
|
+
export { I as Input, c as UnmaskedValueApi } from './index-D8KkaDbQ.js';
|
|
2
3
|
import { FieldValues, RegisterOptions, UseFormRegister, Path, UseFormRegisterReturn } from 'react-hook-form';
|
|
3
4
|
export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
|
|
4
5
|
import 'react';
|
|
@@ -18,7 +19,7 @@ interface UseMaskInputOptions {
|
|
|
18
19
|
* @param props.options - Optional mask configuration options
|
|
19
20
|
* @returns A ref callback function to attach to the input element
|
|
20
21
|
*/
|
|
21
|
-
declare function useMaskInput(props: UseMaskInputOptions):
|
|
22
|
+
declare function useMaskInput(props: UseMaskInputOptions): UseMaskInputReturn;
|
|
22
23
|
|
|
23
24
|
/**
|
|
24
25
|
* Creates a masked version of React Hook Form's register function.
|
|
@@ -45,7 +46,7 @@ declare function useTanStackFormMask(): <T extends TanStackFormInputProps>(mask:
|
|
|
45
46
|
* @param options - Optional mask configuration options
|
|
46
47
|
* @returns A ref callback function that applies the mask
|
|
47
48
|
*/
|
|
48
|
-
declare function withMask(mask: Mask, options?: Options):
|
|
49
|
+
declare function withMask(mask: Mask, options?: Options): UseMaskInputReturn;
|
|
49
50
|
|
|
50
51
|
/**
|
|
51
52
|
* Enhances a React Hook Form register return object with mask support.
|
|
@@ -65,4 +66,4 @@ declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, o
|
|
|
65
66
|
*/
|
|
66
67
|
declare function withTanStackFormMask<T extends TanStackFormInputProps>(inputProps: T, mask: Mask, options?: Options): UseTanStackFormMaskReturn<T>;
|
|
67
68
|
|
|
68
|
-
export {
|
|
69
|
+
export { Mask, Options, TanStackFormInputProps, UseMaskInputReturn, UseTanStackFormMaskReturn, useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { resolveInputRef, withMask, isServer_default, makeMaskCacheKey, flow, setPrevRef, applyMaskToElement } from './chunk-
|
|
2
|
-
export { withMask } from './chunk-
|
|
1
|
+
import { getUnmaskedValue, resolveInputRef, withMask, isServer_default, setUnmaskedValue, makeMaskCacheKey, flow, setPrevRef, applyMaskToElement } from './chunk-TVCNC3TP.js';
|
|
2
|
+
export { withMask } from './chunk-TVCNC3TP.js';
|
|
3
3
|
import { useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
|
|
4
4
|
|
|
5
5
|
function useMaskInput(props) {
|
|
@@ -7,6 +7,7 @@ function useMaskInput(props) {
|
|
|
7
7
|
const ref = useRef(null);
|
|
8
8
|
const maskRef = useRef(mask);
|
|
9
9
|
const optionsRef = useRef(options);
|
|
10
|
+
const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);
|
|
10
11
|
const refCallback = useCallback((input) => {
|
|
11
12
|
if (!input) {
|
|
12
13
|
ref.current = null;
|
|
@@ -20,10 +21,11 @@ function useMaskInput(props) {
|
|
|
20
21
|
register(ref.current);
|
|
21
22
|
}, [register]);
|
|
22
23
|
if (isServer_default) {
|
|
23
|
-
|
|
24
|
-
};
|
|
24
|
+
const noop = (() => {
|
|
25
|
+
});
|
|
26
|
+
return setUnmaskedValue(noop, () => "");
|
|
25
27
|
}
|
|
26
|
-
return refCallback;
|
|
28
|
+
return setUnmaskedValue(refCallback, unmaskedValue);
|
|
27
29
|
}
|
|
28
30
|
function useHookFormMask(registerFn) {
|
|
29
31
|
const entryCacheRef = useRef(/* @__PURE__ */ new Map());
|
|
@@ -67,6 +69,7 @@ function useHookFormMask(registerFn) {
|
|
|
67
69
|
...registerReturn,
|
|
68
70
|
ref: entry.stableRef
|
|
69
71
|
};
|
|
72
|
+
setUnmaskedValue(result, () => getUnmaskedValue(entry?.element ?? null));
|
|
70
73
|
setPrevRef(result, ref);
|
|
71
74
|
return result;
|
|
72
75
|
};
|
|
@@ -78,12 +81,15 @@ var refCache = /* @__PURE__ */ new WeakMap();
|
|
|
78
81
|
function withTanStackFormMask(inputProps, mask, options) {
|
|
79
82
|
const { ref } = inputProps;
|
|
80
83
|
if (!ref) {
|
|
84
|
+
let currentElement = null;
|
|
81
85
|
const result2 = {
|
|
82
86
|
...inputProps,
|
|
83
87
|
ref: ((input) => {
|
|
88
|
+
currentElement = input;
|
|
84
89
|
if (input) applyMaskToElement(input, mask, options);
|
|
85
90
|
})
|
|
86
91
|
};
|
|
92
|
+
setUnmaskedValue(result2, () => getUnmaskedValue(currentElement));
|
|
87
93
|
setPrevRef(result2, ref);
|
|
88
94
|
return result2;
|
|
89
95
|
}
|
|
@@ -93,19 +99,19 @@ function withTanStackFormMask(inputProps, mask, options) {
|
|
|
93
99
|
const maskCache = refCache.get(ref);
|
|
94
100
|
const cacheKey = makeMaskCacheKey(inputProps.name ?? "", mask);
|
|
95
101
|
if (!maskCache?.has(cacheKey)) {
|
|
96
|
-
const
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
flow(applyMaskToRef, ref)
|
|
103
|
-
);
|
|
102
|
+
const maskedRef2 = ((input) => {
|
|
103
|
+
maskedRef2.currentElement = input;
|
|
104
|
+
if (input) applyMaskToElement(input, mask, options);
|
|
105
|
+
ref(input);
|
|
106
|
+
});
|
|
107
|
+
maskCache?.set(cacheKey, maskedRef2);
|
|
104
108
|
}
|
|
109
|
+
const maskedRef = maskCache?.get(cacheKey);
|
|
105
110
|
const result = {
|
|
106
111
|
...inputProps,
|
|
107
|
-
ref:
|
|
112
|
+
ref: maskedRef
|
|
108
113
|
};
|
|
114
|
+
setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));
|
|
109
115
|
setPrevRef(result, ref);
|
|
110
116
|
return result;
|
|
111
117
|
}
|
|
@@ -127,6 +133,7 @@ function withHookFormMask(register, mask, options) {
|
|
|
127
133
|
...register,
|
|
128
134
|
ref: null
|
|
129
135
|
};
|
|
136
|
+
setUnmaskedValue(result2, () => "");
|
|
130
137
|
setPrevRef(result2, ref);
|
|
131
138
|
return result2;
|
|
132
139
|
}
|
|
@@ -136,19 +143,19 @@ function withHookFormMask(register, mask, options) {
|
|
|
136
143
|
const maskCache = refCache2.get(ref);
|
|
137
144
|
const cacheKey = makeMaskCacheKey(register.name, mask);
|
|
138
145
|
if (!maskCache?.has(cacheKey)) {
|
|
139
|
-
const
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
flow(applyMaskToRef, ref)
|
|
146
|
-
);
|
|
146
|
+
const maskedRef2 = ((input) => {
|
|
147
|
+
maskedRef2.currentElement = input;
|
|
148
|
+
if (input) applyMaskToElement(input, mask, options);
|
|
149
|
+
return ref(input);
|
|
150
|
+
});
|
|
151
|
+
maskCache?.set(cacheKey, maskedRef2);
|
|
147
152
|
}
|
|
153
|
+
const maskedRef = maskCache?.get(cacheKey);
|
|
148
154
|
const result = {
|
|
149
155
|
...register,
|
|
150
|
-
ref:
|
|
156
|
+
ref: maskedRef
|
|
151
157
|
};
|
|
158
|
+
setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));
|
|
152
159
|
setPrevRef(result, ref);
|
|
153
160
|
return result;
|
|
154
161
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withTanStackFormMask.ts","../src/api/useTanStackFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","result","useMemo","refCache"],"mappings":"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","file":"index.js","sourcesContent":["import {\n useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\n\nimport type { Input, Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n mask: Mask;\n register?: (element: HTMLElement) => void;\n options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void) {\n const { mask, register, options } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const maskRef = useRef(mask);\n const optionsRef = useRef(options);\n\n const refCallback = useCallback((input: Input | null): void => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input);\n withMask(maskRef.current, optionsRef.current)(ref.current);\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current || !register) return;\n register(ref.current);\n }, [register]);\n\n if (isServer) {\n return (): void => {\n // server doesn't have dom, so just do nothing\n };\n }\n\n return refCallback;\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n FieldValues, Path,\n RegisterOptions,\n UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n stableRef: RefCallback<HTMLElement | null>;\n element: HTMLElement | null;\n latestRHFRef?: RefCallback<HTMLElement | null>;\n syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n useLayoutEffect(() => {\n entryCacheRef.current.forEach((entry) => {\n const currentEntry = entry;\n if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n // After reset(), RHF gives us a new ref callback. React won't call it\n // because our outward ref identity stays stable, so we replay it here.\n if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n currentEntry.latestRHFRef(currentEntry.element);\n currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n }\n });\n });\n\n return useMemo(() => {\n // registerFn identity changed, so drop cached refs bound to the previous\n // register lifecycle.\n entryCacheRef.current = new Map<string, CacheEntry>();\n\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n if (!registerFn) throw new Error('registerFn is required');\n\n const registerReturn = registerFn(fieldName, options as Options);\n const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n let entry = entryCacheRef.current.get(cacheKey);\n if (!entry) {\n const nextEntry: CacheEntry = {\n element: null,\n latestRHFRef: ref,\n syncedRHFRef: undefined,\n stableRef: null as unknown as RefCallback<HTMLElement | null>,\n };\n\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n nextEntry.element = _ref;\n if (_ref) applyMaskToElement(_ref, mask, options as Options);\n return _ref;\n };\n\n nextEntry.stableRef = (\n nextEntry.latestRHFRef\n ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n : applyMaskToRef\n ) as RefCallback<HTMLElement | null>;\n\n entry = nextEntry;\n entryCacheRef.current.set(cacheKey, nextEntry);\n } else {\n entry.latestRHFRef = ref;\n }\n\n const result = {\n ...registerReturn,\n ref: entry.stableRef,\n } as UseHookFormMaskReturn<T>;\n\n setPrevRef(result, ref);\n\n return result;\n };\n }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\n\nimport type {\n Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances TanStack Form-compatible input props with mask support.\n * Works with objects returned by field.getInputProps().\n */\nexport default function withTanStackFormMask<T extends TanStackFormInputProps>(\n inputProps: T,\n mask: Mask,\n options?: Options,\n): UseTanStackFormMaskReturn<T> {\n const { ref } = inputProps;\n\n if (!ref) {\n const result = {\n ...inputProps,\n ref: ((input: HTMLElement | null) => {\n if (input) applyMaskToElement(input, mask, options);\n }) as RefCallback<HTMLElement | null>,\n } as unknown as UseTanStackFormMaskReturn<T>;\n\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);\n\n if (!maskCache?.has(cacheKey)) {\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n if (_ref) applyMaskToElement(_ref, mask, options);\n return _ref;\n };\n\n maskCache?.set(\n cacheKey,\n flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n );\n }\n\n const result = {\n ...inputProps,\n ref: maskCache?.get(cacheKey),\n } as unknown as UseTanStackFormMaskReturn<T>;\n\n setPrevRef(result, ref);\n return result;\n}\n","import { useMemo } from 'react';\n\nimport withTanStackFormMask from './withTanStackFormMask';\n\nimport type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';\n\n/**\n * Creates a helper to mask TanStack Form-compatible input props.\n * Designed for objects returned by field.getInputProps().\n */\nexport default function useTanStackFormMask(): <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n) => UseTanStackFormMaskReturn<T> {\n return useMemo(\n () => <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),\n [],\n );\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n register: UseFormRegisterReturn,\n mask: Mask,\n options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n // null ref — nothing to cache, return as-is.\n if (!ref) {\n const result = {\n ...register,\n ref: null as unknown as RefCallback<HTMLElement | null>,\n } as UseHookFormMaskReturn<FieldValues>;\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(register.name, mask);\n\n if (!maskCache?.has(cacheKey)) {\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n if (_ref) applyMaskToElement(_ref, mask, options);\n return _ref;\n };\n maskCache?.set(\n cacheKey,\n flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n );\n }\n\n const result = {\n ...register,\n ref: maskCache?.get(cacheKey),\n } as UseHookFormMaskReturn<FieldValues>;\n\n setPrevRef(result, ref);\n\n return result;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withTanStackFormMask.ts","../src/api/useTanStackFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","result","maskedRef","useMemo","refCache"],"mappings":";;;;AA6Be,SAAR,aAA8B,KAAA,EAAgD;AACnF,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAM,OAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,OAAA,GAAU,OAAO,IAAI,CAAA;AAC3B,EAAA,MAAM,UAAA,GAAa,OAAO,OAAO,CAAA;AACjC,EAAA,MAAM,aAAA,GAAgB,YAAY,MAAM,gBAAA,CAAiB,IAAI,OAAO,CAAA,EAAG,EAAE,CAAA;AAEzE,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,KAAA,KAA8B;AAC7D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAU,gBAAgB,KAAK,CAAA;AACnC,IAAA,QAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AAAA,EAC3D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA,IAAY,CAAC,GAAA,CAAI,OAAA,IAAW,CAAC,QAAA,EAAU;AAC3C,IAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,gBAAA,EAAU;AACZ,IAAA,MAAM,QAAQ,MAAM;AAAA,IAEpB,CAAA,CAAA;AAEA,IAAA,OAAO,gBAAA,CAAiB,IAAA,EAAM,MAAM,EAAE,CAAA;AAAA,EACxC;AAEA,EAAA,OAAO,gBAAA,CAAiB,aAAa,aAAa,CAAA;AACpD;AC5Be,SAAR,gBAEL,UAAA,EACyD;AACzD,EAAA,MAAM,aAAA,GAAgBA,MAAAA,iBAAO,IAAI,GAAA,EAAyB,CAAA;AAE1D,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,aAAA,CAAc,OAAA,CAAQ,OAAA,CAAQ,CAAC,KAAA,KAAU;AACvC,MAAA,MAAM,YAAA,GAAe,KAAA;AACrB,MAAA,IAAI,CAAC,YAAA,CAAa,OAAA,IAAW,CAAC,aAAa,YAAA,EAAc;AAIzD,MAAA,IAAI,YAAA,CAAa,YAAA,KAAiB,YAAA,CAAa,YAAA,EAAc;AAC3D,QAAA,YAAA,CAAa,YAAA,CAAa,aAAa,OAAO,CAAA;AAC9C,QAAA,YAAA,CAAa,eAAe,YAAA,CAAa,YAAA;AAAA,MAC3C;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAC,CAAA;AAED,EAAA,OAAO,QAAQ,MAAM;AAGnB,IAAA,aAAA,CAAc,OAAA,uBAAc,GAAA,EAAwB;AAEpD,IAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACmB;AACzD,MAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,MAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,MAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,MAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,SAAA,EAAW,IAAI,CAAA;AAEjD,MAAA,IAAI,KAAA,GAAQ,aAAA,CAAc,OAAA,CAAQ,GAAA,CAAI,QAAQ,CAAA;AAC9C,MAAA,IAAI,CAAC,KAAA,EAAO;AACV,QAAA,MAAM,SAAA,GAAwB;AAAA,UAC5B,OAAA,EAAS,IAAA;AAAA,UACT,YAAA,EAAc,GAAA;AAAA,UACd,YAAA,EAAc,MAAA;AAAA,UACd,SAAA,EAAW;AAAA,SACb;AAEA,QAAA,MAAM,cAAA,GAAiB,CAAC,IAAA,KAA6B;AACnD,UAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AACpB,UAAA,IAAI,IAAA,EAAM,kBAAA,CAAmB,IAAA,EAAM,IAAA,EAAM,OAAkB,CAAA;AAC3D,UAAA,OAAO,IAAA;AAAA,QACT,CAAA;AAEA,QAAA,SAAA,CAAU,SAAA,GACR,SAAA,CAAU,YAAA,GACN,IAAA,CAAK,cAAA,EAAgB,CAAC,IAAA,KAA6B,SAAA,CAAU,YAAA,GAAe,IAAI,CAAC,CAAA,GACjF,cAAA;AAGN,QAAA,KAAA,GAAQ,SAAA;AACR,QAAA,aAAA,CAAc,OAAA,CAAQ,GAAA,CAAI,QAAA,EAAU,SAAS,CAAA;AAAA,MAC/C,CAAA,MAAO;AACL,QAAA,KAAA,CAAM,YAAA,GAAe,GAAA;AAAA,MACvB;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,KAAK,KAAA,CAAM;AAAA,OACb;AACA,MAAA,gBAAA,CAAiB,QAAQ,MAAM,gBAAA,CAAiB,KAAA,EAAO,OAAA,IAAW,IAAI,CAAC,CAAA;AAEvE,MAAA,UAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;;;ACzFA,IAAM,QAAA,uBAAe,OAAA,EAGnB;AAMa,SAAR,oBAAA,CACL,UAAA,EACA,IAAA,EACA,OAAA,EAC8B;AAC9B,EAAA,MAAM,EAAE,KAAI,GAAI,UAAA;AAEhB,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,IAAI,cAAA,GAAqC,IAAA;AACzC,IAAA,MAAMC,OAAAA,GAAS;AAAA,MACb,GAAG,UAAA;AAAA,MACH,GAAA,GAAM,CAAC,KAAA,KAA8B;AACnC,QAAA,cAAA,GAAiB,KAAA;AACjB,QAAA,IAAI,KAAA,EAAO,kBAAA,CAAmB,KAAA,EAAO,IAAA,EAAM,OAAO,CAAA;AAAA,MACpD,CAAA;AAAA,KACF;AACA,IAAA,gBAAA,CAAiBA,OAAAA,EAAQ,MAAM,gBAAA,CAAiB,cAAc,CAAC,CAAA;AAE/D,IAAA,UAAA,CAAWA,SAAQ,GAAG,CAAA;AACtB,IAAA,OAAOA,OAAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAAC,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA,EAAG;AACtB,IAAA,QAAA,CAAS,GAAA,CAAI,GAAA,kBAAK,IAAI,GAAA,EAAK,CAAA;AAAA,EAC7B;AAEA,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAClC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,UAAA,CAAW,IAAA,IAAQ,IAAI,IAAI,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC7B,IAAA,MAAMC,UAAAA,IAAa,CAAC,KAAA,KAA8B;AAChD,MAAAA,WAAU,cAAA,GAAiB,KAAA;AAC3B,MAAA,IAAI,KAAA,EAAO,kBAAA,CAAmB,KAAA,EAAO,IAAA,EAAM,OAAO,CAAA;AAClD,MAAA,GAAA,CAAI,KAAK,CAAA;AAAA,IACX,CAAA,CAAA;AAEA,IAAA,SAAA,EAAW,GAAA,CAAI,UAAUA,UAAS,CAAA;AAAA,EACpC;AAEA,EAAA,MAAM,SAAA,GAAY,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,UAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACP;AACA,EAAA,gBAAA,CAAiB,QAAQ,MAAM,gBAAA,CAAiB,SAAA,EAAW,cAAA,IAAkB,IAAI,CAAC,CAAA;AAElF,EAAA,UAAA,CAAW,QAAQ,GAAG,CAAA;AACtB,EAAA,OAAO,MAAA;AACT;;;AC9De,SAAR,mBAAA,GAI2B;AAChC,EAAA,OAAOC,OAAAA;AAAA,IACL,MAAM,CACJ,IAAA,EACA,UAAA,EACA,YACiC,oBAAA,CAAqB,UAAA,EAAY,MAAM,OAAO,CAAA;AAAA,IACjF;AAAC,GACH;AACF;;;ACPA,IAAMC,SAAAA,uBAAe,OAAA,EAGnB;AAYa,SAAR,gBAAA,CACL,QAAA,EACA,IAAA,EACA,OAAA,EACoC;AACpC,EAAA,MAAM,EAAE,KAAI,GAAI,QAAA;AAGhB,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAMH,OAAAA,GAAS;AAAA,MACb,GAAG,QAAA;AAAA,MACH,GAAA,EAAK;AAAA,KACP;AACA,IAAA,gBAAA,CAAiBA,OAAAA,EAAQ,MAAM,EAAE,CAAA;AACjC,IAAA,UAAA,CAAWA,SAAQ,GAAG,CAAA;AACtB,IAAA,OAAOA,OAAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAACG,SAAAA,CAAS,GAAA,CAAI,GAAG,CAAA,EAAG;AACtB,IAAAA,SAAAA,CAAS,GAAA,CAAI,GAAA,kBAAK,IAAI,KAAK,CAAA;AAAA,EAC7B;AACA,EAAA,MAAM,SAAA,GAAYA,SAAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAClC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,QAAA,CAAS,IAAA,EAAM,IAAI,CAAA;AAErD,EAAA,IAAI,CAAC,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC7B,IAAA,MAAMF,UAAAA,IAAa,CAAC,KAAA,KAA8B;AAChD,MAAAA,WAAU,cAAA,GAAiB,KAAA;AAC3B,MAAA,IAAI,KAAA,EAAO,kBAAA,CAAmB,KAAA,EAAO,IAAA,EAAM,OAAO,CAAA;AAClD,MAAA,OAAO,IAAI,KAAK,CAAA;AAAA,IAClB,CAAA,CAAA;AAEA,IAAA,SAAA,EAAW,GAAA,CAAI,UAAUA,UAAS,CAAA;AAAA,EACpC;AAEA,EAAA,MAAM,SAAA,GAAY,SAAA,EAAW,GAAA,CAAI,QAAQ,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,QAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACP;AACA,EAAA,gBAAA,CAAiB,QAAQ,MAAM,gBAAA,CAAiB,SAAA,EAAW,cAAA,IAAkB,IAAI,CAAC,CAAA;AAElF,EAAA,UAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,EAAA,OAAO,MAAA;AACT","file":"index.js","sourcesContent":["import {\n useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\nimport { getUnmaskedValue, setUnmaskedValue } from '../utils';\n\nimport type {\n Input, Mask, Options, UseMaskInputReturn,\n} from '../types';\n\ninterface UseMaskInputOptions {\n mask: Mask;\n register?: (element: HTMLElement) => void;\n options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): UseMaskInputReturn {\n const { mask, register, options } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const maskRef = useRef(mask);\n const optionsRef = useRef(options);\n const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);\n\n const refCallback = useCallback((input: Input | null): void => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input);\n withMask(maskRef.current, optionsRef.current)(ref.current);\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current || !register) return;\n register(ref.current);\n }, [register]);\n\n if (isServer) {\n const noop = (() => {\n // server doesn't have dom, so just do nothing\n }) as unknown as UseMaskInputReturn;\n\n return setUnmaskedValue(noop, () => '');\n }\n\n return setUnmaskedValue(refCallback, unmaskedValue);\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport {\n flow, getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,\n} from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n FieldValues, Path,\n RegisterOptions,\n UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n stableRef: RefCallback<HTMLElement | null>;\n element: HTMLElement | null;\n latestRHFRef?: RefCallback<HTMLElement | null>;\n syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n useLayoutEffect(() => {\n entryCacheRef.current.forEach((entry) => {\n const currentEntry = entry;\n if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n // After reset(), RHF gives us a new ref callback. React won't call it\n // because our outward ref identity stays stable, so we replay it here.\n if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n currentEntry.latestRHFRef(currentEntry.element);\n currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n }\n });\n });\n\n return useMemo(() => {\n // registerFn identity changed, so drop cached refs bound to the previous\n // register lifecycle.\n entryCacheRef.current = new Map<string, CacheEntry>();\n\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n if (!registerFn) throw new Error('registerFn is required');\n\n const registerReturn = registerFn(fieldName, options as Options);\n const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n let entry = entryCacheRef.current.get(cacheKey);\n if (!entry) {\n const nextEntry: CacheEntry = {\n element: null,\n latestRHFRef: ref,\n syncedRHFRef: undefined,\n stableRef: null as unknown as RefCallback<HTMLElement | null>,\n };\n\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n nextEntry.element = _ref;\n if (_ref) applyMaskToElement(_ref, mask, options as Options);\n return _ref;\n };\n\n nextEntry.stableRef = (\n nextEntry.latestRHFRef\n ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n : applyMaskToRef\n ) as RefCallback<HTMLElement | null>;\n\n entry = nextEntry;\n entryCacheRef.current.set(cacheKey, nextEntry);\n } else {\n entry.latestRHFRef = ref;\n }\n\n const result = {\n ...registerReturn,\n ref: entry.stableRef,\n } as UseHookFormMaskReturn<T>;\n setUnmaskedValue(result, () => getUnmaskedValue(entry?.element ?? null));\n\n setPrevRef(result, ref);\n\n return result;\n };\n }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport {\n getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,\n} from '../utils';\n\nimport type { RefCallback } from 'react';\n\nimport type {\n Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,\n} from '../types';\n\ntype MaskedRefCallback = RefCallback<HTMLElement | null> & {\n currentElement?: HTMLElement | null;\n};\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances TanStack Form-compatible input props with mask support.\n * Works with objects returned by field.getInputProps().\n */\nexport default function withTanStackFormMask<T extends TanStackFormInputProps>(\n inputProps: T,\n mask: Mask,\n options?: Options,\n): UseTanStackFormMaskReturn<T> {\n const { ref } = inputProps;\n\n if (!ref) {\n let currentElement: HTMLElement | null = null;\n const result = {\n ...inputProps,\n ref: ((input: HTMLElement | null) => {\n currentElement = input;\n if (input) applyMaskToElement(input, mask, options);\n }) as RefCallback<HTMLElement | null>,\n } as unknown as UseTanStackFormMaskReturn<T>;\n setUnmaskedValue(result, () => getUnmaskedValue(currentElement));\n\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);\n\n if (!maskCache?.has(cacheKey)) {\n const maskedRef = ((input: HTMLElement | null) => {\n maskedRef.currentElement = input;\n if (input) applyMaskToElement(input, mask, options);\n ref(input);\n }) as MaskedRefCallback;\n\n maskCache?.set(cacheKey, maskedRef);\n }\n\n const maskedRef = maskCache?.get(cacheKey) as MaskedRefCallback | undefined;\n const result = {\n ...inputProps,\n ref: maskedRef,\n } as unknown as UseTanStackFormMaskReturn<T>;\n setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));\n\n setPrevRef(result, ref);\n return result;\n}\n","import { useMemo } from 'react';\n\nimport withTanStackFormMask from './withTanStackFormMask';\n\nimport type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';\n\n/**\n * Creates a helper to mask TanStack Form-compatible input props.\n * Designed for objects returned by field.getInputProps().\n */\nexport default function useTanStackFormMask(): <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n) => UseTanStackFormMaskReturn<T> {\n return useMemo(\n () => <T extends TanStackFormInputProps>(\n mask: Mask,\n inputProps: T,\n options?: Options,\n ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),\n [],\n );\n}\n","import { applyMaskToElement } from '../core';\nimport {\n getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,\n} from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\ntype MaskedRefCallback = RefCallback<HTMLElement | null> & {\n currentElement?: HTMLElement | null;\n};\n\nconst refCache = new WeakMap<\n RefCallback<HTMLElement | null>,\n Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n register: UseFormRegisterReturn,\n mask: Mask,\n options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n // null ref — nothing to cache, return as-is.\n if (!ref) {\n const result = {\n ...register,\n ref: null as unknown as RefCallback<HTMLElement | null>,\n } as UseHookFormMaskReturn<FieldValues>;\n setUnmaskedValue(result, () => '');\n setPrevRef(result, ref);\n return result;\n }\n\n if (!refCache.has(ref)) {\n refCache.set(ref, new Map());\n }\n const maskCache = refCache.get(ref);\n const cacheKey = makeMaskCacheKey(register.name, mask);\n\n if (!maskCache?.has(cacheKey)) {\n const maskedRef = ((input: HTMLElement | null) => {\n maskedRef.currentElement = input;\n if (input) applyMaskToElement(input, mask, options);\n return ref(input);\n }) as MaskedRefCallback;\n\n maskCache?.set(cacheKey, maskedRef);\n }\n\n const maskedRef = maskCache?.get(cacheKey) as MaskedRefCallback | undefined;\n const result = {\n ...register,\n ref: maskedRef,\n } as UseHookFormMaskReturn<FieldValues>;\n setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));\n\n setPrevRef(result, ref);\n\n return result;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -31,6 +31,7 @@ describe('useMaskInputAntd', () => {
|
|
|
31
31
|
it('returns a ref callback function', () => {
|
|
32
32
|
const { result } = renderHook(() => useMaskInputAntd({ mask: '999-999' }));
|
|
33
33
|
expect(typeof result.current).toBe('function');
|
|
34
|
+
expect(typeof result.current.unmaskedValue).toBe('function');
|
|
34
35
|
});
|
|
35
36
|
|
|
36
37
|
it('handles null input ref', () => {
|
|
@@ -62,6 +63,27 @@ describe('useMaskInputAntd', () => {
|
|
|
62
63
|
expect(inputmask).toHaveBeenCalled();
|
|
63
64
|
});
|
|
64
65
|
|
|
66
|
+
it('exposes the unmasked value from the masked Ant Design input', () => {
|
|
67
|
+
const inputElement = document.createElement('input');
|
|
68
|
+
vi.mocked(inputmask).mockReturnValue({
|
|
69
|
+
mask: vi.fn(),
|
|
70
|
+
} as any);
|
|
71
|
+
|
|
72
|
+
const { result } = renderHook(
|
|
73
|
+
() => useMaskInputAntd({ mask: '999-999' }),
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
act(() => {
|
|
77
|
+
result.current({ input: inputElement } as unknown as InputRef);
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
inputElement.inputmask = {
|
|
81
|
+
unmaskedvalue: vi.fn(() => '2026-04-01'),
|
|
82
|
+
} as any;
|
|
83
|
+
|
|
84
|
+
expect(result.current.unmaskedValue()).toBe('2026-04-01');
|
|
85
|
+
});
|
|
86
|
+
|
|
65
87
|
it('works with custom options', () => {
|
|
66
88
|
const inputElement = document.createElement('input');
|
|
67
89
|
vi.mocked(inputmask).mockReturnValue({
|