use-mask-input 3.6.1 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/antd/index.cjs +67 -0
- package/dist/antd/index.cjs.map +1 -0
- package/dist/antd/index.d.cts +37 -0
- package/dist/antd/index.d.ts +37 -0
- package/dist/antd/index.js +64 -0
- package/dist/antd/index.js.map +1 -0
- package/dist/chunk-4Y2DTPBL.cjs +3841 -0
- package/dist/chunk-4Y2DTPBL.cjs.map +1 -0
- package/dist/chunk-JGOZSJMW.js +3829 -0
- package/dist/chunk-JGOZSJMW.js.map +1 -0
- package/dist/index-F3rlTTTe.d.cts +583 -0
- package/dist/index-F3rlTTTe.d.ts +583 -0
- package/dist/index.cjs +30 -3901
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -582
- package/dist/index.d.ts +4 -582
- package/dist/index.js +22 -3893
- package/dist/index.js.map +1 -1
- package/package.json +7 -1
- package/src/antd/index.ts +9 -0
- package/src/antd/useHookFormMaskAntd.spec.ts +142 -0
- package/src/antd/useHookFormMaskAntd.ts +57 -0
- package/src/antd/useMaskInputAntd-server.spec.tsx +36 -0
- package/src/antd/useMaskInputAntd.spec.tsx +108 -0
- package/src/antd/useMaskInputAntd.ts +77 -0
- package/src/api/useMaskInput.ts +26 -17
- package/src/core/elementResolver.ts +1 -1
- package/src/core/maskConfig.ts +31 -78
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
|
|
2
2
|
|
|
3
|
+
## 3.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 24b7236: integrate Ant Design support into use-mask-input package with new hooks and configuration options
|
|
8
|
+
|
|
3
9
|
## 3.6.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk4Y2DTPBL_cjs = require('../chunk-4Y2DTPBL.cjs');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
// src/antd/useHookFormMaskAntd.ts
|
|
7
|
+
function useHookFormMaskAntd(registerFn) {
|
|
8
|
+
return (fieldName, mask, options) => {
|
|
9
|
+
if (!registerFn) throw new Error("registerFn is required");
|
|
10
|
+
const registerReturn = registerFn(fieldName, options);
|
|
11
|
+
const { ref } = registerReturn;
|
|
12
|
+
const refWithMask = (inputRef) => {
|
|
13
|
+
const element = inputRef ? chunk4Y2DTPBL_cjs.resolveInputRef(inputRef.input) : null;
|
|
14
|
+
if (element) chunk4Y2DTPBL_cjs.applyMaskToElement(element, mask, options);
|
|
15
|
+
if (ref) ref(element);
|
|
16
|
+
};
|
|
17
|
+
const result = {
|
|
18
|
+
...registerReturn,
|
|
19
|
+
ref: refWithMask
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(result, "prevRef", {
|
|
22
|
+
value: ref,
|
|
23
|
+
enumerable: false,
|
|
24
|
+
writable: true,
|
|
25
|
+
configurable: true
|
|
26
|
+
});
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
function useMaskInputAntd(props) {
|
|
31
|
+
const { mask, register, options } = props;
|
|
32
|
+
const ref = react.useRef(null);
|
|
33
|
+
const maskInput = react.useMemo(
|
|
34
|
+
() => chunk4Y2DTPBL_cjs.isServer_default ? null : chunk4Y2DTPBL_cjs.createMaskInstance(mask, options),
|
|
35
|
+
[mask, options]
|
|
36
|
+
);
|
|
37
|
+
const refCallback = react.useCallback((input) => {
|
|
38
|
+
if (!input) {
|
|
39
|
+
ref.current = null;
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
ref.current = chunk4Y2DTPBL_cjs.resolveInputRef(input.input);
|
|
43
|
+
}, []);
|
|
44
|
+
react.useEffect(() => {
|
|
45
|
+
if (chunk4Y2DTPBL_cjs.isServer_default || !ref.current) return;
|
|
46
|
+
if (!chunk4Y2DTPBL_cjs.isHTMLElement(ref.current)) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const inputElement = chunk4Y2DTPBL_cjs.findInputElement(ref.current);
|
|
50
|
+
if (maskInput && inputElement && chunk4Y2DTPBL_cjs.isHTMLElement(inputElement)) {
|
|
51
|
+
maskInput.mask(inputElement);
|
|
52
|
+
}
|
|
53
|
+
if (register && chunk4Y2DTPBL_cjs.isHTMLElement(ref.current)) {
|
|
54
|
+
register(ref.current);
|
|
55
|
+
}
|
|
56
|
+
}, [mask, register, options, maskInput]);
|
|
57
|
+
if (chunk4Y2DTPBL_cjs.isServer_default) {
|
|
58
|
+
return () => {
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
return refCallback;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
exports.useHookFormMaskAntd = useHookFormMaskAntd;
|
|
65
|
+
exports.useMaskInputAntd = useMaskInputAntd;
|
|
66
|
+
//# sourceMappingURL=index.cjs.map
|
|
67
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/antd/useHookFormMaskAntd.ts","../../src/antd/useMaskInputAntd.ts"],"names":["resolveInputRef","applyMaskToElement","useRef","useMemo","isServer_default","createMaskInstance","useCallback","useEffect","isHTMLElement","findInputElement"],"mappings":";;;;;;AA0Be,SAAR,oBAEL,UAAA,EAAgC;AAChC,EAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACuB;AAC7D,IAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,IAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,IAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,IAAA,MAAM,WAAA,GAA4C,CAAC,QAAA,KAAa;AAC9D,MAAA,MAAM,OAAA,GAAU,QAAA,GAAWA,iCAAA,CAAgB,QAAA,CAAS,KAAK,CAAA,GAAI,IAAA;AAC7D,MAAA,IAAI,OAAA,EAASC,oCAAA,CAAmB,OAAA,EAAS,IAAA,EAAM,OAAkB,CAAA;AACjE,MAAA,IAAI,GAAA,MAAS,OAAO,CAAA;AAAA,IACtB,CAAA;AAEA,IAAA,MAAM,MAAA,GAAS;AAAA,MACb,GAAG,cAAA;AAAA,MACH,GAAA,EAAK;AAAA,KACP;AAEA,IAAA,MAAA,CAAO,cAAA,CAAe,QAAQ,SAAA,EAAW;AAAA,MACvC,KAAA,EAAO,GAAA;AAAA,MACP,UAAA,EAAY,KAAA;AAAA,MACZ,QAAA,EAAU,IAAA;AAAA,MACV,YAAA,EAAc;AAAA,KACf,CAAA;AAED,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AACF;ACxBe,SAAR,iBAAkC,KAAA,EAE/B;AACR,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAMC,aAAwB,IAAI,CAAA;AACxC,EAAA,MAAM,SAAA,GAAYC,aAAA;AAAA,IAChB,MAAOC,kCAAA,GAAW,IAAA,GAAOC,oCAAA,CAAmB,MAAM,OAAO,CAAA;AAAA,IACzD,CAAC,MAAM,OAAO;AAAA,GAChB;AAEA,EAAA,MAAM,WAAA,GAAcC,iBAAA,CAAY,CAAC,KAAA,KAA2B;AAC1D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAUN,iCAAA,CAAgB,KAAA,CAAM,KAAK,CAAA;AAAA,EAC3C,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAO,eAAA,CAAU,MAAM;AACd,IAAA,IAAIH,kCAAA,IAAY,CAAC,GAAA,CAAI,OAAA,EAAS;AAE9B,IAAA,IAAI,CAACI,+BAAA,CAAc,GAAA,CAAI,OAAO,CAAA,EAAG;AAC/B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,YAAA,GAAeC,kCAAA,CAAiB,GAAA,CAAI,OAAO,CAAA;AAEjD,IAAA,IAAI,SAAA,IAAa,YAAA,IAAgBD,+BAAA,CAAc,YAAY,CAAA,EAAG;AAC5D,MAAA,SAAA,CAAU,KAAK,YAAY,CAAA;AAAA,IAC7B;AAEA,IAAA,IAAI,QAAA,IAAYA,+BAAA,CAAc,GAAA,CAAI,OAAO,CAAA,EAAG;AAC1C,MAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,IAAA,EAAM,QAAA,EAAU,OAAA,EAAS,SAAS,CAAC,CAAA;AAEvC,EAAA,IAAIJ,kCAAA,EAAU;AACZ,IAAA,OAAO,MAAY;AAAA,IAEnB,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,WAAA;AACT","file":"index.cjs","sourcesContent":["import { applyMaskToElement, resolveInputRef } from '../core';\n\nimport type { InputRef } from 'antd';\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\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n UseHookFormMaskReturn<T>,\n 'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\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 for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>) {\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskAntdReturn<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 refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n const element = inputRef ? resolveInputRef(inputRef.input) : null;\n if (element) applyMaskToElement(element, mask, options as Options);\n if (ref) ref(element);\n };\n\n const result = {\n ...registerReturn,\n ref: refWithMask,\n } as UseHookFormMaskAntdReturn<T>;\n\n Object.defineProperty(result, 'prevRef', {\n value: ref,\n enumerable: false,\n writable: true,\n configurable: true,\n });\n\n return result;\n };\n}\n","import {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\n\nimport {\n createMaskInstance, findInputElement, isHTMLElement, resolveInputRef,\n} from '../core';\nimport isServer from '../utils/isServer';\n\nimport type { InputRef } from 'antd';\n\nimport type { 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 useMaskInputAntd(props: UseMaskInputOptions): (\n input: InputRef | null\n) => void {\n const { mask, register, options } = props;\n const ref = useRef<InputRef | null>(null);\n const maskInput = useMemo(\n () => (isServer ? null : createMaskInstance(mask, options)),\n [mask, options],\n );\n\n const refCallback = useCallback((input: InputRef | null) => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input.input) as unknown as InputRef;\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current) return;\n\n if (!isHTMLElement(ref.current)) {\n return;\n }\n\n const inputElement = findInputElement(ref.current);\n\n if (maskInput && inputElement && isHTMLElement(inputElement)) {\n maskInput.mask(inputElement);\n }\n\n if (register && isHTMLElement(ref.current)) {\n register(ref.current);\n }\n }, [mask, register, options, maskInput]);\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"]}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { InputRef } from 'antd';
|
|
2
|
+
import { RefCallback } from 'react';
|
|
3
|
+
import { FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
|
|
4
|
+
import { U as UseHookFormMaskReturn, M as Mask, O as Options } from '../index-F3rlTTTe.cjs';
|
|
5
|
+
|
|
6
|
+
type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
|
|
7
|
+
ref: RefCallback<InputRef | null>;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Ant Design version of useHookFormMask.
|
|
11
|
+
* Creates a masked register that works with Ant Design Input (ref receives InputRef).
|
|
12
|
+
*
|
|
13
|
+
* @template T - The form data type
|
|
14
|
+
* @template D - The register options type
|
|
15
|
+
* @param registerFn - The register function from useForm hook
|
|
16
|
+
* @returns A function that registers a field with mask support for Ant Design Input
|
|
17
|
+
*/
|
|
18
|
+
declare function useHookFormMaskAntd<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>;
|
|
19
|
+
|
|
20
|
+
interface UseMaskInputOptions {
|
|
21
|
+
mask: Mask;
|
|
22
|
+
register?: (element: HTMLElement) => void;
|
|
23
|
+
options?: Options;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* React hook for applying input masks to form elements.
|
|
27
|
+
* Works with Ant Design and other wrapped components too.
|
|
28
|
+
*
|
|
29
|
+
* @param props - Configuration object
|
|
30
|
+
* @param props.mask - The mask pattern to apply
|
|
31
|
+
* @param props.register - Optional callback that receives the element
|
|
32
|
+
* @param props.options - Optional mask configuration options
|
|
33
|
+
* @returns A ref callback function to attach to the input element
|
|
34
|
+
*/
|
|
35
|
+
declare function useMaskInputAntd(props: UseMaskInputOptions): (input: InputRef | null) => void;
|
|
36
|
+
|
|
37
|
+
export { type UseHookFormMaskAntdReturn, useHookFormMaskAntd, useMaskInputAntd };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { InputRef } from 'antd';
|
|
2
|
+
import { RefCallback } from 'react';
|
|
3
|
+
import { FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
|
|
4
|
+
import { U as UseHookFormMaskReturn, M as Mask, O as Options } from '../index-F3rlTTTe.js';
|
|
5
|
+
|
|
6
|
+
type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
|
|
7
|
+
ref: RefCallback<InputRef | null>;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Ant Design version of useHookFormMask.
|
|
11
|
+
* Creates a masked register that works with Ant Design Input (ref receives InputRef).
|
|
12
|
+
*
|
|
13
|
+
* @template T - The form data type
|
|
14
|
+
* @template D - The register options type
|
|
15
|
+
* @param registerFn - The register function from useForm hook
|
|
16
|
+
* @returns A function that registers a field with mask support for Ant Design Input
|
|
17
|
+
*/
|
|
18
|
+
declare function useHookFormMaskAntd<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>;
|
|
19
|
+
|
|
20
|
+
interface UseMaskInputOptions {
|
|
21
|
+
mask: Mask;
|
|
22
|
+
register?: (element: HTMLElement) => void;
|
|
23
|
+
options?: Options;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* React hook for applying input masks to form elements.
|
|
27
|
+
* Works with Ant Design and other wrapped components too.
|
|
28
|
+
*
|
|
29
|
+
* @param props - Configuration object
|
|
30
|
+
* @param props.mask - The mask pattern to apply
|
|
31
|
+
* @param props.register - Optional callback that receives the element
|
|
32
|
+
* @param props.options - Optional mask configuration options
|
|
33
|
+
* @returns A ref callback function to attach to the input element
|
|
34
|
+
*/
|
|
35
|
+
declare function useMaskInputAntd(props: UseMaskInputOptions): (input: InputRef | null) => void;
|
|
36
|
+
|
|
37
|
+
export { type UseHookFormMaskAntdReturn, useHookFormMaskAntd, useMaskInputAntd };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { isServer_default, createMaskInstance, resolveInputRef, isHTMLElement, findInputElement, applyMaskToElement } from '../chunk-JGOZSJMW.js';
|
|
2
|
+
import { useRef, useMemo, useCallback, useEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
// src/antd/useHookFormMaskAntd.ts
|
|
5
|
+
function useHookFormMaskAntd(registerFn) {
|
|
6
|
+
return (fieldName, mask, options) => {
|
|
7
|
+
if (!registerFn) throw new Error("registerFn is required");
|
|
8
|
+
const registerReturn = registerFn(fieldName, options);
|
|
9
|
+
const { ref } = registerReturn;
|
|
10
|
+
const refWithMask = (inputRef) => {
|
|
11
|
+
const element = inputRef ? resolveInputRef(inputRef.input) : null;
|
|
12
|
+
if (element) applyMaskToElement(element, mask, options);
|
|
13
|
+
if (ref) ref(element);
|
|
14
|
+
};
|
|
15
|
+
const result = {
|
|
16
|
+
...registerReturn,
|
|
17
|
+
ref: refWithMask
|
|
18
|
+
};
|
|
19
|
+
Object.defineProperty(result, "prevRef", {
|
|
20
|
+
value: ref,
|
|
21
|
+
enumerable: false,
|
|
22
|
+
writable: true,
|
|
23
|
+
configurable: true
|
|
24
|
+
});
|
|
25
|
+
return result;
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
function useMaskInputAntd(props) {
|
|
29
|
+
const { mask, register, options } = props;
|
|
30
|
+
const ref = useRef(null);
|
|
31
|
+
const maskInput = useMemo(
|
|
32
|
+
() => isServer_default ? null : createMaskInstance(mask, options),
|
|
33
|
+
[mask, options]
|
|
34
|
+
);
|
|
35
|
+
const refCallback = useCallback((input) => {
|
|
36
|
+
if (!input) {
|
|
37
|
+
ref.current = null;
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
ref.current = resolveInputRef(input.input);
|
|
41
|
+
}, []);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (isServer_default || !ref.current) return;
|
|
44
|
+
if (!isHTMLElement(ref.current)) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
const inputElement = findInputElement(ref.current);
|
|
48
|
+
if (maskInput && inputElement && isHTMLElement(inputElement)) {
|
|
49
|
+
maskInput.mask(inputElement);
|
|
50
|
+
}
|
|
51
|
+
if (register && isHTMLElement(ref.current)) {
|
|
52
|
+
register(ref.current);
|
|
53
|
+
}
|
|
54
|
+
}, [mask, register, options, maskInput]);
|
|
55
|
+
if (isServer_default) {
|
|
56
|
+
return () => {
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
return refCallback;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export { useHookFormMaskAntd, useMaskInputAntd };
|
|
63
|
+
//# sourceMappingURL=index.js.map
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/antd/useHookFormMaskAntd.ts","../../src/antd/useMaskInputAntd.ts"],"names":[],"mappings":";;;;AA0Be,SAAR,oBAEL,UAAA,EAAgC;AAChC,EAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACuB;AAC7D,IAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,IAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,IAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,IAAA,MAAM,WAAA,GAA4C,CAAC,QAAA,KAAa;AAC9D,MAAA,MAAM,OAAA,GAAU,QAAA,GAAW,eAAA,CAAgB,QAAA,CAAS,KAAK,CAAA,GAAI,IAAA;AAC7D,MAAA,IAAI,OAAA,EAAS,kBAAA,CAAmB,OAAA,EAAS,IAAA,EAAM,OAAkB,CAAA;AACjE,MAAA,IAAI,GAAA,MAAS,OAAO,CAAA;AAAA,IACtB,CAAA;AAEA,IAAA,MAAM,MAAA,GAAS;AAAA,MACb,GAAG,cAAA;AAAA,MACH,GAAA,EAAK;AAAA,KACP;AAEA,IAAA,MAAA,CAAO,cAAA,CAAe,QAAQ,SAAA,EAAW;AAAA,MACvC,KAAA,EAAO,GAAA;AAAA,MACP,UAAA,EAAY,KAAA;AAAA,MACZ,QAAA,EAAU,IAAA;AAAA,MACV,YAAA,EAAc;AAAA,KACf,CAAA;AAED,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AACF;ACxBe,SAAR,iBAAkC,KAAA,EAE/B;AACR,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAM,OAAwB,IAAI,CAAA;AACxC,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MAAO,gBAAA,GAAW,IAAA,GAAO,kBAAA,CAAmB,MAAM,OAAO,CAAA;AAAA,IACzD,CAAC,MAAM,OAAO;AAAA,GAChB;AAEA,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,KAAA,KAA2B;AAC1D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAU,eAAA,CAAgB,KAAA,CAAM,KAAK,CAAA;AAAA,EAC3C,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA,IAAY,CAAC,GAAA,CAAI,OAAA,EAAS;AAE9B,IAAA,IAAI,CAAC,aAAA,CAAc,GAAA,CAAI,OAAO,CAAA,EAAG;AAC/B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,GAAA,CAAI,OAAO,CAAA;AAEjD,IAAA,IAAI,SAAA,IAAa,YAAA,IAAgB,aAAA,CAAc,YAAY,CAAA,EAAG;AAC5D,MAAA,SAAA,CAAU,KAAK,YAAY,CAAA;AAAA,IAC7B;AAEA,IAAA,IAAI,QAAA,IAAY,aAAA,CAAc,GAAA,CAAI,OAAO,CAAA,EAAG;AAC1C,MAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,IAAA,EAAM,QAAA,EAAU,OAAA,EAAS,SAAS,CAAC,CAAA;AAEvC,EAAA,IAAI,gBAAA,EAAU;AACZ,IAAA,OAAO,MAAY;AAAA,IAEnB,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,WAAA;AACT","file":"index.js","sourcesContent":["import { applyMaskToElement, resolveInputRef } from '../core';\n\nimport type { InputRef } from 'antd';\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\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n UseHookFormMaskReturn<T>,\n 'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\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 for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>) {\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskAntdReturn<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 refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n const element = inputRef ? resolveInputRef(inputRef.input) : null;\n if (element) applyMaskToElement(element, mask, options as Options);\n if (ref) ref(element);\n };\n\n const result = {\n ...registerReturn,\n ref: refWithMask,\n } as UseHookFormMaskAntdReturn<T>;\n\n Object.defineProperty(result, 'prevRef', {\n value: ref,\n enumerable: false,\n writable: true,\n configurable: true,\n });\n\n return result;\n };\n}\n","import {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\n\nimport {\n createMaskInstance, findInputElement, isHTMLElement, resolveInputRef,\n} from '../core';\nimport isServer from '../utils/isServer';\n\nimport type { InputRef } from 'antd';\n\nimport type { 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 useMaskInputAntd(props: UseMaskInputOptions): (\n input: InputRef | null\n) => void {\n const { mask, register, options } = props;\n const ref = useRef<InputRef | null>(null);\n const maskInput = useMemo(\n () => (isServer ? null : createMaskInstance(mask, options)),\n [mask, options],\n );\n\n const refCallback = useCallback((input: InputRef | null) => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input.input) as unknown as InputRef;\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current) return;\n\n if (!isHTMLElement(ref.current)) {\n return;\n }\n\n const inputElement = findInputElement(ref.current);\n\n if (maskInput && inputElement && isHTMLElement(inputElement)) {\n maskInput.mask(inputElement);\n }\n\n if (register && isHTMLElement(ref.current)) {\n register(ref.current);\n }\n }, [mask, register, options, maskInput]);\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"]}
|