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.
Files changed (36) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/README.md +105 -29
  3. package/dist/antd.cjs +9 -9
  4. package/dist/antd.d.cts +1 -1
  5. package/dist/antd.d.ts +1 -1
  6. package/dist/antd.js +1 -1
  7. package/dist/{chunk-QCWLMMDI.js → chunk-ICLWBMH4.js} +21 -2
  8. package/dist/{chunk-QCWLMMDI.js.map → chunk-ICLWBMH4.js.map} +1 -1
  9. package/dist/{chunk-VK6LQ75W.cjs → chunk-X5SEJVSB.cjs} +21 -2
  10. package/dist/{chunk-VK6LQ75W.cjs.map → chunk-X5SEJVSB.cjs.map} +1 -1
  11. package/dist/{index-F3rlTTTe.d.cts → index-BoaVtWUr.d.cts} +13 -4
  12. package/dist/{index-F3rlTTTe.d.ts → index-BoaVtWUr.d.ts} +13 -4
  13. package/dist/index.cjs +92 -25
  14. package/dist/index.cjs.map +1 -1
  15. package/dist/index.d.cts +14 -2
  16. package/dist/index.d.ts +14 -2
  17. package/dist/index.js +80 -15
  18. package/dist/index.js.map +1 -1
  19. package/package.json +15 -25
  20. package/src/antd/useHookFormMaskAntd.spec.ts +2 -0
  21. package/src/antd/useMaskInputAntd.spec.tsx +3 -3
  22. package/src/api/index.ts +2 -0
  23. package/src/api/useHookFormMask.spec.ts +52 -5
  24. package/src/api/useHookFormMask.ts +49 -9
  25. package/src/api/useMaskInput.spec.tsx +11 -11
  26. package/src/api/useTanStackFormMask.ts +24 -0
  27. package/src/api/withHookFormMask.spec.ts +7 -7
  28. package/src/api/withMask.spec.ts +6 -6
  29. package/src/api/withTanStackFormMask.spec.ts +76 -0
  30. package/src/api/withTanStackFormMask.ts +64 -0
  31. package/src/core/maskConfig.spec.ts +24 -0
  32. package/src/core/maskConfig.ts +14 -0
  33. package/src/core/maskEngine.spec.ts +12 -6
  34. package/src/index.tsx +4 -0
  35. package/src/types/index.ts +14 -0
  36. 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: any, strict: boolean, fromCheckval: boolean) => boolean | CommandObject) | undefined;
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: any, caretPos: {
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: any, strict: boolean, fromCheckval: boolean) => boolean | CommandObject) | undefined;
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: any, caretPos: {
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 chunkVK6LQ75W_cjs = require('./chunk-VK6LQ75W.cjs');
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 = chunkVK6LQ75W_cjs.resolveInputRef(input);
17
- chunkVK6LQ75W_cjs.withMask(maskRef.current, optionsRef.current)(ref.current);
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 (chunkVK6LQ75W_cjs.isServer_default || !ref.current || !register) return;
20
+ if (chunkX5SEJVSB_cjs.isServer_default || !ref.current || !register) return;
21
21
  register(ref.current);
22
22
  }, [register]);
23
- if (chunkVK6LQ75W_cjs.isServer_default) {
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
- const refCache2 = /* @__PURE__ */ new Map();
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 = chunkVK6LQ75W_cjs.makeMaskCacheKey(fieldName, mask);
37
- if (!refCache2.has(cacheKey)) {
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
- if (_ref) chunkVK6LQ75W_cjs.applyMaskToElement(_ref, mask, options);
57
+ nextEntry.element = _ref;
58
+ if (_ref) chunkX5SEJVSB_cjs.applyMaskToElement(_ref, mask, options);
40
59
  return _ref;
41
60
  };
42
- refCache2.set(
43
- cacheKey,
44
- ref ? chunkVK6LQ75W_cjs.flow(applyMaskToRef, ref) : applyMaskToRef
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: refCache2.get(cacheKey)
69
+ ref: entry.stableRef
50
70
  };
51
- chunkVK6LQ75W_cjs.setPrevRef(result, ref);
71
+ chunkX5SEJVSB_cjs.setPrevRef(result, ref);
52
72
  return result;
53
73
  };
54
74
  }, [registerFn]);
55
75
  }
56
76
 
57
- // src/api/withHookFormMask.ts
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
- chunkVK6LQ75W_cjs.setPrevRef(result2, ref);
131
+ chunkX5SEJVSB_cjs.setPrevRef(result2, ref);
67
132
  return result2;
68
133
  }
69
- if (!refCache.has(ref)) {
70
- refCache.set(ref, /* @__PURE__ */ new Map());
134
+ if (!refCache2.has(ref)) {
135
+ refCache2.set(ref, /* @__PURE__ */ new Map());
71
136
  }
72
- const maskCache = refCache.get(ref);
73
- const cacheKey = chunkVK6LQ75W_cjs.makeMaskCacheKey(register.name, mask);
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) chunkVK6LQ75W_cjs.applyMaskToElement(_ref, mask, options);
141
+ if (_ref) chunkX5SEJVSB_cjs.applyMaskToElement(_ref, mask, options);
77
142
  return _ref;
78
143
  };
79
144
  maskCache?.set(
80
145
  cacheKey,
81
- chunkVK6LQ75W_cjs.flow(applyMaskToRef, ref)
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
- chunkVK6LQ75W_cjs.setPrevRef(result, ref);
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 chunkVK6LQ75W_cjs.withMask; }
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
@@ -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":";;;;;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;AC/Be,SAAR,gBAEL,UAAA,EACyD;AAEzD,EAAA,OAAOC,cAAQ,MAAM;AACnB,IAAA,MAAMC,SAAAA,uBAAe,GAAA,EAA6C;AAElE,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,CAACD,SAAAA,CAAS,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC3B,QAAA,MAAM,cAAA,GAAiB,CAAC,IAAA,KAA6B;AACnD,UAAA,IAAI,IAAA,EAAME,oCAAA,CAAmB,IAAA,EAAM,IAAA,EAAM,OAAkB,CAAA;AAC3D,UAAA,OAAO,IAAA;AAAA,QACT,CAAA;AACA,QAAAF,SAAAA,CAAS,GAAA;AAAA,UACP,QAAA;AAAA,UACC,GAAA,GAAMG,sBAAA,CAAK,cAAA,EAAgB,GAAG,CAAA,GAAI;AAAA,SACrC;AAAA,MACF;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,GAAA,EAAKH,SAAAA,CAAS,GAAA,CAAI,QAAQ;AAAA,OAC5B;AAEA,MAAAI,4BAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;;;ACnDA,IAAM,QAAA,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,MAAMC,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,CAAC,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA,EAAG;AACtB,IAAA,QAAA,CAAS,GAAA,CAAI,GAAA,kBAAK,IAAI,GAAA,EAAK,CAAA;AAAA,EAC7B;AACA,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAClC,EAAA,MAAM,QAAA,GAAWJ,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 { 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":"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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 { 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-F3rlTTTe.cjs';
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
- export { Input, Mask, Options, useHookFormMask, useMaskInput, withHookFormMask, withMask };
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-F3rlTTTe.js';
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
- export { Input, Mask, Options, useHookFormMask, useMaskInput, withHookFormMask, withMask };
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-QCWLMMDI.js';
2
- export { withMask } from './chunk-QCWLMMDI.js';
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
- const refCache2 = /* @__PURE__ */ new Map();
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
- if (!refCache2.has(cacheKey)) {
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
- refCache2.set(
42
- cacheKey,
43
- ref ? flow(applyMaskToRef, ref) : applyMaskToRef
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: refCache2.get(cacheKey)
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/withHookFormMask.ts
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 (!refCache.has(ref)) {
69
- refCache.set(ref, /* @__PURE__ */ new Map());
133
+ if (!refCache2.has(ref)) {
134
+ refCache2.set(ref, /* @__PURE__ */ new Map());
70
135
  }
71
- const maskCache = refCache.get(ref);
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"]}