use-mask-input 3.7.4 → 3.9.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 +34 -0
- package/README.md +105 -29
- package/dist/antd.cjs +9 -9
- package/dist/antd.d.cts +1 -1
- package/dist/antd.d.ts +1 -1
- package/dist/antd.js +1 -1
- package/dist/{chunk-QCWLMMDI.js → chunk-ICLWBMH4.js} +21 -2
- package/dist/{chunk-QCWLMMDI.js.map → chunk-ICLWBMH4.js.map} +1 -1
- package/dist/{chunk-VK6LQ75W.cjs → chunk-X5SEJVSB.cjs} +21 -2
- package/dist/{chunk-VK6LQ75W.cjs.map → chunk-X5SEJVSB.cjs.map} +1 -1
- package/dist/{index-F3rlTTTe.d.cts → index-BoaVtWUr.d.cts} +13 -4
- package/dist/{index-F3rlTTTe.d.ts → index-BoaVtWUr.d.ts} +13 -4
- package/dist/index.cjs +92 -25
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +14 -2
- package/dist/index.d.ts +14 -2
- package/dist/index.js +80 -15
- package/dist/index.js.map +1 -1
- package/package.json +15 -25
- package/src/antd/useHookFormMaskAntd.spec.ts +2 -0
- package/src/antd/useMaskInputAntd.spec.tsx +3 -3
- package/src/api/index.ts +2 -0
- package/src/api/useHookFormMask.spec.ts +52 -5
- package/src/api/useHookFormMask.ts +49 -9
- package/src/api/useMaskInput.spec.tsx +11 -11
- package/src/api/useTanStackFormMask.ts +24 -0
- package/src/api/withHookFormMask.spec.ts +7 -7
- package/src/api/withMask.spec.ts +6 -6
- package/src/api/withTanStackFormMask.spec.ts +76 -0
- package/src/api/withTanStackFormMask.ts +64 -0
- package/src/core/maskConfig.spec.ts +24 -0
- package/src/core/maskConfig.ts +14 -0
- package/src/core/maskEngine.spec.ts +12 -6
- package/src/index.tsx +4 -0
- package/src/types/index.ts +14 -0
- package/src/types/inputmask.types.ts +2 -2
|
@@ -252,7 +252,7 @@ interface Options$1 {
|
|
|
252
252
|
/**
|
|
253
253
|
* Hook to postValidate the result from `isValid`. Useful for validating the entry as a whole.
|
|
254
254
|
*/
|
|
255
|
-
postValidation?: ((buffer: string[], pos: number, char: string, currentResult: boolean, opts: Options$1, maskset:
|
|
255
|
+
postValidation?: ((buffer: string[], pos: number, char: string, currentResult: boolean, opts: Options$1, maskset: unknown, strict: boolean, fromCheckval: boolean) => boolean | CommandObject) | undefined;
|
|
256
256
|
/**
|
|
257
257
|
* Hook to preValidate the input. Useful for validating regardless of the definition.
|
|
258
258
|
*
|
|
@@ -261,7 +261,7 @@ interface Options$1 {
|
|
|
261
261
|
* When returning a command object the actions are executed and further validation is stopped. If you want to
|
|
262
262
|
* continue further validation, you need to add the `rewritePosition` action.
|
|
263
263
|
*/
|
|
264
|
-
preValidation?: ((buffer: string[], pos: number, char: string, isSelection: boolean, opts: Options$1, maskset:
|
|
264
|
+
preValidation?: ((buffer: string[], pos: number, char: string, isSelection: boolean, opts: Options$1, maskset: unknown, caretPos: {
|
|
265
265
|
begin: number;
|
|
266
266
|
end: number;
|
|
267
267
|
}, strict: boolean) => boolean | CommandObject) | undefined;
|
|
@@ -572,12 +572,21 @@ interface CommandObject {
|
|
|
572
572
|
rewritePosition?: number | undefined;
|
|
573
573
|
}
|
|
574
574
|
|
|
575
|
-
type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | (string & {}) | (string[] & {}) | null;
|
|
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
578
|
interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterReturn<Path<T>> {
|
|
579
579
|
ref: RefCallback<HTMLElement | null>;
|
|
580
580
|
prevRef: RefCallback<HTMLElement | null>;
|
|
581
581
|
}
|
|
582
|
+
interface TanStackFormInputProps {
|
|
583
|
+
name?: string;
|
|
584
|
+
ref?: RefCallback<HTMLElement | null>;
|
|
585
|
+
[key: string]: unknown;
|
|
586
|
+
}
|
|
587
|
+
type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> = Omit<T, 'ref'> & {
|
|
588
|
+
ref: RefCallback<HTMLElement | null>;
|
|
589
|
+
prevRef: RefCallback<HTMLElement | null> | undefined;
|
|
590
|
+
};
|
|
582
591
|
|
|
583
|
-
export type { Input as I, Mask as M, Options as O, UseHookFormMaskReturn as U };
|
|
592
|
+
export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T, UseHookFormMaskReturn as U, UseTanStackFormMaskReturn as a };
|
|
@@ -252,7 +252,7 @@ interface Options$1 {
|
|
|
252
252
|
/**
|
|
253
253
|
* Hook to postValidate the result from `isValid`. Useful for validating the entry as a whole.
|
|
254
254
|
*/
|
|
255
|
-
postValidation?: ((buffer: string[], pos: number, char: string, currentResult: boolean, opts: Options$1, maskset:
|
|
255
|
+
postValidation?: ((buffer: string[], pos: number, char: string, currentResult: boolean, opts: Options$1, maskset: unknown, strict: boolean, fromCheckval: boolean) => boolean | CommandObject) | undefined;
|
|
256
256
|
/**
|
|
257
257
|
* Hook to preValidate the input. Useful for validating regardless of the definition.
|
|
258
258
|
*
|
|
@@ -261,7 +261,7 @@ interface Options$1 {
|
|
|
261
261
|
* When returning a command object the actions are executed and further validation is stopped. If you want to
|
|
262
262
|
* continue further validation, you need to add the `rewritePosition` action.
|
|
263
263
|
*/
|
|
264
|
-
preValidation?: ((buffer: string[], pos: number, char: string, isSelection: boolean, opts: Options$1, maskset:
|
|
264
|
+
preValidation?: ((buffer: string[], pos: number, char: string, isSelection: boolean, opts: Options$1, maskset: unknown, caretPos: {
|
|
265
265
|
begin: number;
|
|
266
266
|
end: number;
|
|
267
267
|
}, strict: boolean) => boolean | CommandObject) | undefined;
|
|
@@ -572,12 +572,21 @@ interface CommandObject {
|
|
|
572
572
|
rewritePosition?: number | undefined;
|
|
573
573
|
}
|
|
574
574
|
|
|
575
|
-
type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | (string & {}) | (string[] & {}) | null;
|
|
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
578
|
interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterReturn<Path<T>> {
|
|
579
579
|
ref: RefCallback<HTMLElement | null>;
|
|
580
580
|
prevRef: RefCallback<HTMLElement | null>;
|
|
581
581
|
}
|
|
582
|
+
interface TanStackFormInputProps {
|
|
583
|
+
name?: string;
|
|
584
|
+
ref?: RefCallback<HTMLElement | null>;
|
|
585
|
+
[key: string]: unknown;
|
|
586
|
+
}
|
|
587
|
+
type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> = Omit<T, 'ref'> & {
|
|
588
|
+
ref: RefCallback<HTMLElement | null>;
|
|
589
|
+
prevRef: RefCallback<HTMLElement | null> | undefined;
|
|
590
|
+
};
|
|
582
591
|
|
|
583
|
-
export type { Input as I, Mask as M, Options as O, UseHookFormMaskReturn as U };
|
|
592
|
+
export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T, UseHookFormMaskReturn as U, UseTanStackFormMaskReturn as a };
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkX5SEJVSB_cjs = require('./chunk-X5SEJVSB.cjs');
|
|
4
4
|
var react = require('react');
|
|
5
5
|
|
|
6
6
|
function useMaskInput(props) {
|
|
@@ -13,49 +13,114 @@ function useMaskInput(props) {
|
|
|
13
13
|
ref.current = null;
|
|
14
14
|
return;
|
|
15
15
|
}
|
|
16
|
-
ref.current =
|
|
17
|
-
|
|
16
|
+
ref.current = chunkX5SEJVSB_cjs.resolveInputRef(input);
|
|
17
|
+
chunkX5SEJVSB_cjs.withMask(maskRef.current, optionsRef.current)(ref.current);
|
|
18
18
|
}, []);
|
|
19
19
|
react.useEffect(() => {
|
|
20
|
-
if (
|
|
20
|
+
if (chunkX5SEJVSB_cjs.isServer_default || !ref.current || !register) return;
|
|
21
21
|
register(ref.current);
|
|
22
22
|
}, [register]);
|
|
23
|
-
if (
|
|
23
|
+
if (chunkX5SEJVSB_cjs.isServer_default) {
|
|
24
24
|
return () => {
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
return refCallback;
|
|
28
28
|
}
|
|
29
29
|
function useHookFormMask(registerFn) {
|
|
30
|
+
const entryCacheRef = react.useRef(/* @__PURE__ */ new Map());
|
|
31
|
+
react.useLayoutEffect(() => {
|
|
32
|
+
entryCacheRef.current.forEach((entry) => {
|
|
33
|
+
const currentEntry = entry;
|
|
34
|
+
if (!currentEntry.element || !currentEntry.latestRHFRef) return;
|
|
35
|
+
if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {
|
|
36
|
+
currentEntry.latestRHFRef(currentEntry.element);
|
|
37
|
+
currentEntry.syncedRHFRef = currentEntry.latestRHFRef;
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
});
|
|
30
41
|
return react.useMemo(() => {
|
|
31
|
-
|
|
42
|
+
entryCacheRef.current = /* @__PURE__ */ new Map();
|
|
32
43
|
return (fieldName, mask, options) => {
|
|
33
44
|
if (!registerFn) throw new Error("registerFn is required");
|
|
34
45
|
const registerReturn = registerFn(fieldName, options);
|
|
35
46
|
const { ref } = registerReturn;
|
|
36
|
-
const cacheKey =
|
|
37
|
-
|
|
47
|
+
const cacheKey = chunkX5SEJVSB_cjs.makeMaskCacheKey(fieldName, mask);
|
|
48
|
+
let entry = entryCacheRef.current.get(cacheKey);
|
|
49
|
+
if (!entry) {
|
|
50
|
+
const nextEntry = {
|
|
51
|
+
element: null,
|
|
52
|
+
latestRHFRef: ref,
|
|
53
|
+
syncedRHFRef: void 0,
|
|
54
|
+
stableRef: null
|
|
55
|
+
};
|
|
38
56
|
const applyMaskToRef = (_ref) => {
|
|
39
|
-
|
|
57
|
+
nextEntry.element = _ref;
|
|
58
|
+
if (_ref) chunkX5SEJVSB_cjs.applyMaskToElement(_ref, mask, options);
|
|
40
59
|
return _ref;
|
|
41
60
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
61
|
+
nextEntry.stableRef = nextEntry.latestRHFRef ? chunkX5SEJVSB_cjs.flow(applyMaskToRef, (_ref) => nextEntry.latestRHFRef?.(_ref)) : applyMaskToRef;
|
|
62
|
+
entry = nextEntry;
|
|
63
|
+
entryCacheRef.current.set(cacheKey, nextEntry);
|
|
64
|
+
} else {
|
|
65
|
+
entry.latestRHFRef = ref;
|
|
46
66
|
}
|
|
47
67
|
const result = {
|
|
48
68
|
...registerReturn,
|
|
49
|
-
ref:
|
|
69
|
+
ref: entry.stableRef
|
|
50
70
|
};
|
|
51
|
-
|
|
71
|
+
chunkX5SEJVSB_cjs.setPrevRef(result, ref);
|
|
52
72
|
return result;
|
|
53
73
|
};
|
|
54
74
|
}, [registerFn]);
|
|
55
75
|
}
|
|
56
76
|
|
|
57
|
-
// src/api/
|
|
77
|
+
// src/api/withTanStackFormMask.ts
|
|
58
78
|
var refCache = /* @__PURE__ */ new WeakMap();
|
|
79
|
+
function withTanStackFormMask(inputProps, mask, options) {
|
|
80
|
+
const { ref } = inputProps;
|
|
81
|
+
if (!ref) {
|
|
82
|
+
const result2 = {
|
|
83
|
+
...inputProps,
|
|
84
|
+
ref: ((input) => {
|
|
85
|
+
if (input) chunkX5SEJVSB_cjs.applyMaskToElement(input, mask, options);
|
|
86
|
+
})
|
|
87
|
+
};
|
|
88
|
+
chunkX5SEJVSB_cjs.setPrevRef(result2, ref);
|
|
89
|
+
return result2;
|
|
90
|
+
}
|
|
91
|
+
if (!refCache.has(ref)) {
|
|
92
|
+
refCache.set(ref, /* @__PURE__ */ new Map());
|
|
93
|
+
}
|
|
94
|
+
const maskCache = refCache.get(ref);
|
|
95
|
+
const cacheKey = chunkX5SEJVSB_cjs.makeMaskCacheKey(inputProps.name ?? "", mask);
|
|
96
|
+
if (!maskCache?.has(cacheKey)) {
|
|
97
|
+
const applyMaskToRef = (_ref) => {
|
|
98
|
+
if (_ref) chunkX5SEJVSB_cjs.applyMaskToElement(_ref, mask, options);
|
|
99
|
+
return _ref;
|
|
100
|
+
};
|
|
101
|
+
maskCache?.set(
|
|
102
|
+
cacheKey,
|
|
103
|
+
chunkX5SEJVSB_cjs.flow(applyMaskToRef, ref)
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
const result = {
|
|
107
|
+
...inputProps,
|
|
108
|
+
ref: maskCache?.get(cacheKey)
|
|
109
|
+
};
|
|
110
|
+
chunkX5SEJVSB_cjs.setPrevRef(result, ref);
|
|
111
|
+
return result;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// src/api/useTanStackFormMask.ts
|
|
115
|
+
function useTanStackFormMask() {
|
|
116
|
+
return react.useMemo(
|
|
117
|
+
() => (mask, inputProps, options) => withTanStackFormMask(inputProps, mask, options),
|
|
118
|
+
[]
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// src/api/withHookFormMask.ts
|
|
123
|
+
var refCache2 = /* @__PURE__ */ new WeakMap();
|
|
59
124
|
function withHookFormMask(register, mask, options) {
|
|
60
125
|
const { ref } = register;
|
|
61
126
|
if (!ref) {
|
|
@@ -63,38 +128,40 @@ function withHookFormMask(register, mask, options) {
|
|
|
63
128
|
...register,
|
|
64
129
|
ref: null
|
|
65
130
|
};
|
|
66
|
-
|
|
131
|
+
chunkX5SEJVSB_cjs.setPrevRef(result2, ref);
|
|
67
132
|
return result2;
|
|
68
133
|
}
|
|
69
|
-
if (!
|
|
70
|
-
|
|
134
|
+
if (!refCache2.has(ref)) {
|
|
135
|
+
refCache2.set(ref, /* @__PURE__ */ new Map());
|
|
71
136
|
}
|
|
72
|
-
const maskCache =
|
|
73
|
-
const cacheKey =
|
|
137
|
+
const maskCache = refCache2.get(ref);
|
|
138
|
+
const cacheKey = chunkX5SEJVSB_cjs.makeMaskCacheKey(register.name, mask);
|
|
74
139
|
if (!maskCache?.has(cacheKey)) {
|
|
75
140
|
const applyMaskToRef = (_ref) => {
|
|
76
|
-
if (_ref)
|
|
141
|
+
if (_ref) chunkX5SEJVSB_cjs.applyMaskToElement(_ref, mask, options);
|
|
77
142
|
return _ref;
|
|
78
143
|
};
|
|
79
144
|
maskCache?.set(
|
|
80
145
|
cacheKey,
|
|
81
|
-
|
|
146
|
+
chunkX5SEJVSB_cjs.flow(applyMaskToRef, ref)
|
|
82
147
|
);
|
|
83
148
|
}
|
|
84
149
|
const result = {
|
|
85
150
|
...register,
|
|
86
151
|
ref: maskCache?.get(cacheKey)
|
|
87
152
|
};
|
|
88
|
-
|
|
153
|
+
chunkX5SEJVSB_cjs.setPrevRef(result, ref);
|
|
89
154
|
return result;
|
|
90
155
|
}
|
|
91
156
|
|
|
92
157
|
Object.defineProperty(exports, "withMask", {
|
|
93
158
|
enumerable: true,
|
|
94
|
-
get: function () { return
|
|
159
|
+
get: function () { return chunkX5SEJVSB_cjs.withMask; }
|
|
95
160
|
});
|
|
96
161
|
exports.useHookFormMask = useHookFormMask;
|
|
97
162
|
exports.useMaskInput = useMaskInput;
|
|
163
|
+
exports.useTanStackFormMask = useTanStackFormMask;
|
|
98
164
|
exports.withHookFormMask = withHookFormMask;
|
|
165
|
+
exports.withTanStackFormMask = withTanStackFormMask;
|
|
99
166
|
//# sourceMappingURL=index.cjs.map
|
|
100
167
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","useCallback","resolveInputRef","withMask","useEffect","isServer_default","useMemo","refCache","makeMaskCacheKey","applyMaskToElement","flow","setPrevRef","result"],"mappings":"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","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 { useMemo } 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\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 //\n return useMemo(() => {\n const refCache = new Map<string, RefCallback<HTMLElement | null>>();\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 if (!refCache.has(cacheKey)) {\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n if (_ref) applyMaskToElement(_ref, mask, options as Options);\n return _ref;\n };\n refCache.set(\n cacheKey,\n (ref ? flow(applyMaskToRef, ref) : applyMaskToRef) as RefCallback<HTMLElement | null>,\n );\n }\n\n const result = {\n ...registerReturn,\n ref: refCache.get(cacheKey),\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';\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","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"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn } from './index-
|
|
1
|
+
import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn, T as TanStackFormInputProps, a as UseTanStackFormMaskReturn } from './index-BoaVtWUr.cjs';
|
|
2
2
|
import { FieldValues, RegisterOptions, UseFormRegister, Path, UseFormRegisterReturn } from 'react-hook-form';
|
|
3
3
|
export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
|
|
4
4
|
import 'react';
|
|
@@ -31,6 +31,12 @@ declare function useMaskInput(props: UseMaskInputOptions): ((input: Input | null
|
|
|
31
31
|
*/
|
|
32
32
|
declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskReturn<T>);
|
|
33
33
|
|
|
34
|
+
/**
|
|
35
|
+
* Creates a helper to mask TanStack Form-compatible input props.
|
|
36
|
+
* Designed for objects returned by field.getInputProps().
|
|
37
|
+
*/
|
|
38
|
+
declare function useTanStackFormMask(): <T extends TanStackFormInputProps>(mask: Mask, inputProps: T, options?: Options) => UseTanStackFormMaskReturn<T>;
|
|
39
|
+
|
|
34
40
|
/**
|
|
35
41
|
* Higher-order function that creates a ref callback for applying input masks.
|
|
36
42
|
* Simple function to apply mask via ref. No hooks, no drama.
|
|
@@ -53,4 +59,10 @@ declare function withMask(mask: Mask, options?: Options): ((input: Input | null)
|
|
|
53
59
|
*/
|
|
54
60
|
declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseHookFormMaskReturn<FieldValues>;
|
|
55
61
|
|
|
56
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Enhances TanStack Form-compatible input props with mask support.
|
|
64
|
+
* Works with objects returned by field.getInputProps().
|
|
65
|
+
*/
|
|
66
|
+
declare function withTanStackFormMask<T extends TanStackFormInputProps>(inputProps: T, mask: Mask, options?: Options): UseTanStackFormMaskReturn<T>;
|
|
67
|
+
|
|
68
|
+
export { Input, Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn, useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn } from './index-
|
|
1
|
+
import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn, T as TanStackFormInputProps, a as UseTanStackFormMaskReturn } from './index-BoaVtWUr.js';
|
|
2
2
|
import { FieldValues, RegisterOptions, UseFormRegister, Path, UseFormRegisterReturn } from 'react-hook-form';
|
|
3
3
|
export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
|
|
4
4
|
import 'react';
|
|
@@ -31,6 +31,12 @@ declare function useMaskInput(props: UseMaskInputOptions): ((input: Input | null
|
|
|
31
31
|
*/
|
|
32
32
|
declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskReturn<T>);
|
|
33
33
|
|
|
34
|
+
/**
|
|
35
|
+
* Creates a helper to mask TanStack Form-compatible input props.
|
|
36
|
+
* Designed for objects returned by field.getInputProps().
|
|
37
|
+
*/
|
|
38
|
+
declare function useTanStackFormMask(): <T extends TanStackFormInputProps>(mask: Mask, inputProps: T, options?: Options) => UseTanStackFormMaskReturn<T>;
|
|
39
|
+
|
|
34
40
|
/**
|
|
35
41
|
* Higher-order function that creates a ref callback for applying input masks.
|
|
36
42
|
* Simple function to apply mask via ref. No hooks, no drama.
|
|
@@ -53,4 +59,10 @@ declare function withMask(mask: Mask, options?: Options): ((input: Input | null)
|
|
|
53
59
|
*/
|
|
54
60
|
declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseHookFormMaskReturn<FieldValues>;
|
|
55
61
|
|
|
56
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Enhances TanStack Form-compatible input props with mask support.
|
|
64
|
+
* Works with objects returned by field.getInputProps().
|
|
65
|
+
*/
|
|
66
|
+
declare function withTanStackFormMask<T extends TanStackFormInputProps>(inputProps: T, mask: Mask, options?: Options): UseTanStackFormMaskReturn<T>;
|
|
67
|
+
|
|
68
|
+
export { Input, Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn, useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { resolveInputRef, withMask, isServer_default, makeMaskCacheKey, flow, setPrevRef, applyMaskToElement } from './chunk-
|
|
2
|
-
export { withMask } from './chunk-
|
|
3
|
-
import { useRef, useCallback, useEffect, useMemo } from 'react';
|
|
1
|
+
import { resolveInputRef, withMask, isServer_default, makeMaskCacheKey, flow, setPrevRef, applyMaskToElement } from './chunk-ICLWBMH4.js';
|
|
2
|
+
export { withMask } from './chunk-ICLWBMH4.js';
|
|
3
|
+
import { useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
|
|
4
4
|
|
|
5
5
|
function useMaskInput(props) {
|
|
6
6
|
const { mask, register, options } = props;
|
|
@@ -26,26 +26,46 @@ function useMaskInput(props) {
|
|
|
26
26
|
return refCallback;
|
|
27
27
|
}
|
|
28
28
|
function useHookFormMask(registerFn) {
|
|
29
|
+
const entryCacheRef = useRef(/* @__PURE__ */ new Map());
|
|
30
|
+
useLayoutEffect(() => {
|
|
31
|
+
entryCacheRef.current.forEach((entry) => {
|
|
32
|
+
const currentEntry = entry;
|
|
33
|
+
if (!currentEntry.element || !currentEntry.latestRHFRef) return;
|
|
34
|
+
if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {
|
|
35
|
+
currentEntry.latestRHFRef(currentEntry.element);
|
|
36
|
+
currentEntry.syncedRHFRef = currentEntry.latestRHFRef;
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
});
|
|
29
40
|
return useMemo(() => {
|
|
30
|
-
|
|
41
|
+
entryCacheRef.current = /* @__PURE__ */ new Map();
|
|
31
42
|
return (fieldName, mask, options) => {
|
|
32
43
|
if (!registerFn) throw new Error("registerFn is required");
|
|
33
44
|
const registerReturn = registerFn(fieldName, options);
|
|
34
45
|
const { ref } = registerReturn;
|
|
35
46
|
const cacheKey = makeMaskCacheKey(fieldName, mask);
|
|
36
|
-
|
|
47
|
+
let entry = entryCacheRef.current.get(cacheKey);
|
|
48
|
+
if (!entry) {
|
|
49
|
+
const nextEntry = {
|
|
50
|
+
element: null,
|
|
51
|
+
latestRHFRef: ref,
|
|
52
|
+
syncedRHFRef: void 0,
|
|
53
|
+
stableRef: null
|
|
54
|
+
};
|
|
37
55
|
const applyMaskToRef = (_ref) => {
|
|
56
|
+
nextEntry.element = _ref;
|
|
38
57
|
if (_ref) applyMaskToElement(_ref, mask, options);
|
|
39
58
|
return _ref;
|
|
40
59
|
};
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
60
|
+
nextEntry.stableRef = nextEntry.latestRHFRef ? flow(applyMaskToRef, (_ref) => nextEntry.latestRHFRef?.(_ref)) : applyMaskToRef;
|
|
61
|
+
entry = nextEntry;
|
|
62
|
+
entryCacheRef.current.set(cacheKey, nextEntry);
|
|
63
|
+
} else {
|
|
64
|
+
entry.latestRHFRef = ref;
|
|
45
65
|
}
|
|
46
66
|
const result = {
|
|
47
67
|
...registerReturn,
|
|
48
|
-
ref:
|
|
68
|
+
ref: entry.stableRef
|
|
49
69
|
};
|
|
50
70
|
setPrevRef(result, ref);
|
|
51
71
|
return result;
|
|
@@ -53,8 +73,53 @@ function useHookFormMask(registerFn) {
|
|
|
53
73
|
}, [registerFn]);
|
|
54
74
|
}
|
|
55
75
|
|
|
56
|
-
// src/api/
|
|
76
|
+
// src/api/withTanStackFormMask.ts
|
|
57
77
|
var refCache = /* @__PURE__ */ new WeakMap();
|
|
78
|
+
function withTanStackFormMask(inputProps, mask, options) {
|
|
79
|
+
const { ref } = inputProps;
|
|
80
|
+
if (!ref) {
|
|
81
|
+
const result2 = {
|
|
82
|
+
...inputProps,
|
|
83
|
+
ref: ((input) => {
|
|
84
|
+
if (input) applyMaskToElement(input, mask, options);
|
|
85
|
+
})
|
|
86
|
+
};
|
|
87
|
+
setPrevRef(result2, ref);
|
|
88
|
+
return result2;
|
|
89
|
+
}
|
|
90
|
+
if (!refCache.has(ref)) {
|
|
91
|
+
refCache.set(ref, /* @__PURE__ */ new Map());
|
|
92
|
+
}
|
|
93
|
+
const maskCache = refCache.get(ref);
|
|
94
|
+
const cacheKey = makeMaskCacheKey(inputProps.name ?? "", mask);
|
|
95
|
+
if (!maskCache?.has(cacheKey)) {
|
|
96
|
+
const applyMaskToRef = (_ref) => {
|
|
97
|
+
if (_ref) applyMaskToElement(_ref, mask, options);
|
|
98
|
+
return _ref;
|
|
99
|
+
};
|
|
100
|
+
maskCache?.set(
|
|
101
|
+
cacheKey,
|
|
102
|
+
flow(applyMaskToRef, ref)
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
const result = {
|
|
106
|
+
...inputProps,
|
|
107
|
+
ref: maskCache?.get(cacheKey)
|
|
108
|
+
};
|
|
109
|
+
setPrevRef(result, ref);
|
|
110
|
+
return result;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// src/api/useTanStackFormMask.ts
|
|
114
|
+
function useTanStackFormMask() {
|
|
115
|
+
return useMemo(
|
|
116
|
+
() => (mask, inputProps, options) => withTanStackFormMask(inputProps, mask, options),
|
|
117
|
+
[]
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// src/api/withHookFormMask.ts
|
|
122
|
+
var refCache2 = /* @__PURE__ */ new WeakMap();
|
|
58
123
|
function withHookFormMask(register, mask, options) {
|
|
59
124
|
const { ref } = register;
|
|
60
125
|
if (!ref) {
|
|
@@ -65,10 +130,10 @@ function withHookFormMask(register, mask, options) {
|
|
|
65
130
|
setPrevRef(result2, ref);
|
|
66
131
|
return result2;
|
|
67
132
|
}
|
|
68
|
-
if (!
|
|
69
|
-
|
|
133
|
+
if (!refCache2.has(ref)) {
|
|
134
|
+
refCache2.set(ref, /* @__PURE__ */ new Map());
|
|
70
135
|
}
|
|
71
|
-
const maskCache =
|
|
136
|
+
const maskCache = refCache2.get(ref);
|
|
72
137
|
const cacheKey = makeMaskCacheKey(register.name, mask);
|
|
73
138
|
if (!maskCache?.has(cacheKey)) {
|
|
74
139
|
const applyMaskToRef = (_ref) => {
|
|
@@ -88,6 +153,6 @@ function withHookFormMask(register, mask, options) {
|
|
|
88
153
|
return result;
|
|
89
154
|
}
|
|
90
155
|
|
|
91
|
-
export { useHookFormMask, useMaskInput, withHookFormMask };
|
|
156
|
+
export { useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withTanStackFormMask };
|
|
92
157
|
//# sourceMappingURL=index.js.map
|
|
93
158
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withHookFormMask.ts"],"names":["refCache","result"],"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 { useMemo } 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\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 //\n return useMemo(() => {\n const refCache = new Map<string, RefCallback<HTMLElement | null>>();\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 if (!refCache.has(cacheKey)) {\n const applyMaskToRef = (_ref: HTMLElement | null) => {\n if (_ref) applyMaskToElement(_ref, mask, options as Options);\n return _ref;\n };\n refCache.set(\n cacheKey,\n (ref ? flow(applyMaskToRef, ref) : applyMaskToRef) as RefCallback<HTMLElement | null>,\n );\n }\n\n const result = {\n ...registerReturn,\n ref: refCache.get(cacheKey),\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';\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","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"]}
|