use-mask-input 3.7.2 → 3.7.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 ## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
 
+## 3.7.3
+
+### Patch Changes
+
+- e606d69: removing unnecessary memoization and improving input handling
+
 ## 3.7.2
 
 ### Patch Changes

package/README.md

@@ -2,7 +2,10 @@
   <h1>🥸 use-mask-input</h1>
   <h4>A React Hook for building elegant and simple input masks.</h4>
 
-  ![npm](https://img.shields.io/npm/v/use-mask-input) ![npm package minimized gzipped size (select exports)](https://img.shields.io/bundlejs/size/use-mask-input?color=green-light) ![npm](https://img.shields.io/npm/dw/use-mask-input) [![codecov](https://codecov.io/gh/eduardoborges/use-mask-input/branch/main/graph/badge.svg?token=8ORAOAUZTP)](https://codecov.io/gh/eduardoborges/use-mask-input)
+  [![npm](https://img.shields.io/npm/v/use-mask-input)](https://www.npmjs.com/package/use-mask-input)
+  [![npm downloads](https://img.shields.io/npm/dw/use-mask-input)](https://www.npmjs.com/package/use-mask-input)
+  [![npm package minimized gzipped size (select exports)](https://img.shields.io/bundlejs/size/use-mask-input?color=green-light)](https://bundlejs.com/?q=use-mask-input)
+  [![codecov](https://codecov.io/gh/eduardoborges/use-mask-input/branch/main/graph/badge.svg?token=8ORAOAUZTP)](https://codecov.io/gh/eduardoborges/use-mask-input)
 </div>
 
 ## [Full Documentation](http://use-mask-input.eduardoborges.dev) | [Sponsor this project](https://github.com/eduardoborges?tab=sponsors)

package/dist/antd.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkNIHSNNRR_cjs = require('./chunk-NIHSNNRR.cjs');
+var chunkVK6LQ75W_cjs = require('./chunk-VK6LQ75W.cjs');
 var react = require('react');
 
 function useHookFormMaskAntd(registerFn) {
@@ -10,11 +10,11 @@ function useHookFormMaskAntd(registerFn) {
       if (!registerFn) throw new Error("registerFn is required");
       const registerReturn = registerFn(fieldName, options);
       const { ref } = registerReturn;
-      const cacheKey = chunkNIHSNNRR_cjs.makeMaskCacheKey(fieldName, mask);
+      const cacheKey = chunkVK6LQ75W_cjs.makeMaskCacheKey(fieldName, mask);
       if (!refCache.has(cacheKey)) {
         const refWithMask = (inputRef) => {
-          const element = inputRef ? chunkNIHSNNRR_cjs.resolveInputRef(inputRef.input) : null;
-          if (element) chunkNIHSNNRR_cjs.applyMaskToElement(element, mask, options);
+          const element = inputRef ? chunkVK6LQ75W_cjs.resolveInputRef(inputRef.input) : null;
+          if (element) chunkVK6LQ75W_cjs.applyMaskToElement(element, mask, options);
           if (ref) ref(element);
         };
         refCache.set(cacheKey, refWithMask);
@@ -23,7 +23,7 @@ function useHookFormMaskAntd(registerFn) {
         ...registerReturn,
         ref: refCache.get(cacheKey)
       };
-      chunkNIHSNNRR_cjs.setPrevRef(result, ref);
+      chunkVK6LQ75W_cjs.setPrevRef(result, ref);
       return result;
     };
   }, [registerFn]);
@@ -31,31 +31,21 @@ function useHookFormMaskAntd(registerFn) {
 function useMaskInputAntd(props) {
   const { mask, register, options } = props;
   const ref = react.useRef(null);
-  const maskInput = react.useMemo(
-    () => chunkNIHSNNRR_cjs.isServer_default ? null : chunkNIHSNNRR_cjs.createMaskInstance(mask, options),
-    [mask, options]
-  );
+  const maskRef = react.useRef(mask);
+  const optionsRef = react.useRef(options);
   const refCallback = react.useCallback((input) => {
     if (!input) {
       ref.current = null;
       return;
     }
-    ref.current = chunkNIHSNNRR_cjs.resolveInputRef(input.input);
+    ref.current = chunkVK6LQ75W_cjs.resolveInputRef(input.input);
+    chunkVK6LQ75W_cjs.withMask(maskRef.current, optionsRef.current)(ref.current);
   }, []);
   react.useEffect(() => {
-    if (chunkNIHSNNRR_cjs.isServer_default || !ref.current) return;
-    if (!chunkNIHSNNRR_cjs.isHTMLElement(ref.current)) {
-      return;
-    }
-    const inputElement = chunkNIHSNNRR_cjs.findInputElement(ref.current);
-    if (maskInput && inputElement && chunkNIHSNNRR_cjs.isHTMLElement(inputElement)) {
-      maskInput.mask(inputElement);
-    }
-    if (register && chunkNIHSNNRR_cjs.isHTMLElement(ref.current)) {
-      register(ref.current);
-    }
-  }, [mask, register, options, maskInput]);
-  if (chunkNIHSNNRR_cjs.isServer_default) {
+    if (chunkVK6LQ75W_cjs.isServer_default || !ref.current || !register) return;
+    register(ref.current);
+  }, [register]);
+  if (chunkVK6LQ75W_cjs.isServer_default) {
     return () => {
     };
   }

package/dist/antd.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":["useMemo","makeMaskCacheKey","resolveInputRef","applyMaskToElement","setPrevRef","useRef","isServer_default","createMaskInstance","useCallback","useEffect","isHTMLElement","findInputElement"],"mappings":"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","file":"antd.cjs","sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\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>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\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 cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\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        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\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"]}
+{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":["useMemo","makeMaskCacheKey","resolveInputRef","applyMaskToElement","setPrevRef","useRef","useCallback","withMask","useEffect","isServer_default"],"mappings":";;;;;AA6Be,SAAR,oBAEL,UAAA,EAC6D;AAE7D,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,MAAM,QAAA,uBAAe,GAAA,EAA0C;AAE/D,IAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACuB;AAC7D,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,CAAC,QAAA,CAAS,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC3B,QAAA,MAAM,WAAA,GAA4C,CAAC,QAAA,KAAa;AAC9D,UAAA,MAAM,OAAA,GAAU,QAAA,GAAWC,iCAAA,CAAgB,QAAA,CAAS,KAAK,CAAA,GAAI,IAAA;AAC7D,UAAA,IAAI,OAAA,EAASC,oCAAA,CAAmB,OAAA,EAAS,IAAA,EAAM,OAAkB,CAAA;AACjE,UAAA,IAAI,GAAA,MAAS,OAAO,CAAA;AAAA,QACtB,CAAA;AACA,QAAA,QAAA,CAAS,GAAA,CAAI,UAAU,WAAW,CAAA;AAAA,MACpC;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,GAAA,EAAK,QAAA,CAAS,GAAA,CAAI,QAAQ;AAAA,OAC5B;AAEA,MAAAC,4BAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;ACxCe,SAAR,iBAAkC,KAAA,EAE/B;AACR,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAMC,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,KAA2B;AAC1D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAUJ,iCAAA,CAAgB,KAAA,CAAM,KAAK,CAAA;AACzC,IAAAK,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","file":"antd.cjs","sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\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>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\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 cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\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        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } 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 Ant Design form elements.\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 Ant Design 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<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\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);\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"]}

package/dist/antd.d.cts

@@ -23,14 +23,13 @@ interface UseMaskInputOptions {
     options?: Options;
 }
 /**
- * React hook for applying input masks to form elements.
- * Works with Ant Design and other wrapped components too.
+ * React hook for applying input masks to Ant Design form elements.
  *
  * @param props - Configuration object
  * @param props.mask - The mask pattern to apply
  * @param props.register - Optional callback that receives the element
  * @param props.options - Optional mask configuration options
- * @returns A ref callback function to attach to the input element
+ * @returns A ref callback function to attach to the Ant Design Input element
  */
 declare function useMaskInputAntd(props: UseMaskInputOptions): (input: InputRef | null) => void;
 

package/dist/antd.d.ts

@@ -23,14 +23,13 @@ interface UseMaskInputOptions {
     options?: Options;
 }
 /**
- * React hook for applying input masks to form elements.
- * Works with Ant Design and other wrapped components too.
+ * React hook for applying input masks to Ant Design form elements.
  *
  * @param props - Configuration object
  * @param props.mask - The mask pattern to apply
  * @param props.register - Optional callback that receives the element
  * @param props.options - Optional mask configuration options
- * @returns A ref callback function to attach to the input element
+ * @returns A ref callback function to attach to the Ant Design Input element
  */
 declare function useMaskInputAntd(props: UseMaskInputOptions): (input: InputRef | null) => void;
 

package/dist/antd.js

@@ -1,4 +1,4 @@
-import { makeMaskCacheKey, setPrevRef, isServer_default, createMaskInstance, resolveInputRef, isHTMLElement, findInputElement, applyMaskToElement } from './chunk-FDD3PKBM.js';
+import { makeMaskCacheKey, setPrevRef, resolveInputRef, withMask, isServer_default, applyMaskToElement } from './chunk-QCWLMMDI.js';
 import { useMemo, useRef, useCallback, useEffect } from 'react';
 
 function useHookFormMaskAntd(registerFn) {
@@ -29,30 +29,20 @@ function useHookFormMaskAntd(registerFn) {
 function useMaskInputAntd(props) {
   const { mask, register, options } = props;
   const ref = useRef(null);
-  const maskInput = useMemo(
-    () => isServer_default ? null : createMaskInstance(mask, options),
-    [mask, options]
-  );
+  const maskRef = useRef(mask);
+  const optionsRef = useRef(options);
   const refCallback = useCallback((input) => {
     if (!input) {
       ref.current = null;
       return;
     }
     ref.current = resolveInputRef(input.input);
+    withMask(maskRef.current, optionsRef.current)(ref.current);
   }, []);
   useEffect(() => {
-    if (isServer_default || !ref.current) return;
-    if (!isHTMLElement(ref.current)) {
-      return;
-    }
-    const inputElement = findInputElement(ref.current);
-    if (maskInput && inputElement && isHTMLElement(inputElement)) {
-      maskInput.mask(inputElement);
-    }
-    if (register && isHTMLElement(ref.current)) {
-      register(ref.current);
-    }
-  }, [mask, register, options, maskInput]);
+    if (isServer_default || !ref.current || !register) return;
+    register(ref.current);
+  }, [register]);
   if (isServer_default) {
     return () => {
     };

package/dist/antd.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":["useMemo"],"mappings":"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","file":"antd.js","sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\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>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\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 cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\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        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\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"]}
+{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":[],"mappings":";;;AA6Be,SAAR,oBAEL,UAAA,EAC6D;AAE7D,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,QAAA,uBAAe,GAAA,EAA0C;AAE/D,IAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACuB;AAC7D,MAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,MAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,MAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,MAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,SAAA,EAAW,IAAI,CAAA;AAEjD,MAAA,IAAI,CAAC,QAAA,CAAS,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC3B,QAAA,MAAM,WAAA,GAA4C,CAAC,QAAA,KAAa;AAC9D,UAAA,MAAM,OAAA,GAAU,QAAA,GAAW,eAAA,CAAgB,QAAA,CAAS,KAAK,CAAA,GAAI,IAAA;AAC7D,UAAA,IAAI,OAAA,EAAS,kBAAA,CAAmB,OAAA,EAAS,IAAA,EAAM,OAAkB,CAAA;AACjE,UAAA,IAAI,GAAA,MAAS,OAAO,CAAA;AAAA,QACtB,CAAA;AACA,QAAA,QAAA,CAAS,GAAA,CAAI,UAAU,WAAW,CAAA;AAAA,MACpC;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,GAAA,EAAK,QAAA,CAAS,GAAA,CAAI,QAAQ;AAAA,OAC5B;AAEA,MAAA,UAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;ACxCe,SAAR,iBAAkC,KAAA,EAE/B;AACR,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAM,OAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,OAAA,GAAU,OAAO,IAAI,CAAA;AAC3B,EAAA,MAAM,UAAA,GAAa,OAAO,OAAO,CAAA;AAEjC,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;AACzC,IAAA,QAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AAAA,EAC3D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA,IAAY,CAAC,GAAA,CAAI,OAAA,IAAW,CAAC,QAAA,EAAU;AAC3C,IAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,gBAAA,EAAU;AACZ,IAAA,OAAO,MAAY;AAAA,IAEnB,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,WAAA;AACT","file":"antd.js","sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\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>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\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 cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\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        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } 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 Ant Design form elements.\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 Ant Design 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<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\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);\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"]}

package/dist/{chunk-FDD3PKBM.js → chunk-QCWLMMDI.js}

@@ -20,7 +20,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  __defProp(target, "default", { value: mod, enumerable: true }) ,
   mod
 ));
 
@@ -3675,47 +3675,8 @@ var require_inputmask = __commonJS({
   }
 });
 
-// src/core/elementResolver.ts
-function isHTMLElement(element) {
-  return element !== null && typeof element === "object" && "nodeType" in element && "querySelector" in element && typeof element.querySelector === "function";
-}
-function findInputElement(element) {
-  if (!element) return null;
-  if (!isHTMLElement(element)) {
-    return null;
-  }
-  if (element.nodeName === "INPUT" || element.nodeName === "TEXTAREA") {
-    return element;
-  }
-  if (!("querySelector" in element) || typeof element.querySelector !== "function") {
-    return null;
-  }
-  try {
-    const inputElement = element.querySelector("input, textarea");
-    if (inputElement && isHTMLElement(inputElement)) {
-      return inputElement;
-    }
-  } catch {
-    return null;
-  }
-  return null;
-}
-function resolveInputRef(input) {
-  if (!input) {
-    return null;
-  }
-  if (typeof input === "object" && "current" in input) {
-    const refValue = input.current;
-    if (isHTMLElement(refValue)) {
-      return refValue;
-    }
-    return null;
-  }
-  if (isHTMLElement(input)) {
-    return input;
-  }
-  return null;
-}
+// src/api/withMask.ts
+var import_inputmask = __toESM(require_inputmask());
 
 // src/core/maskConfig.ts
 var ALIAS_MASKS = {
@@ -3809,10 +3770,52 @@ function setPrevRef(result, ref) {
   });
 }
 
+// src/api/withMask.ts
+var callbackCache = /* @__PURE__ */ new Map();
+function withMask(mask, options) {
+  if (!options) {
+    const cacheKey = makeMaskCacheKey("", mask);
+    if (callbackCache.has(cacheKey)) {
+      return callbackCache.get(cacheKey);
+    }
+  }
+  const callback = (input) => {
+    if (isServer_default || mask === null || !input) return;
+    const maskInput = interopDefaultSync(import_inputmask.default)(getMaskOptions(mask, options));
+    maskInput.mask(input);
+  };
+  if (!options) {
+    const cacheKey = makeMaskCacheKey("", mask);
+    callbackCache.set(cacheKey, callback);
+  }
+  return callback;
+}
+
+// src/core/elementResolver.ts
+function isHTMLElement(element) {
+  return element !== null && typeof element === "object" && "nodeType" in element && "querySelector" in element && typeof element.querySelector === "function";
+}
+function resolveInputRef(input) {
+  if (!input) {
+    return null;
+  }
+  if (typeof input === "object" && "current" in input) {
+    const refValue = input.current;
+    if (isHTMLElement(refValue)) {
+      return refValue;
+    }
+    return null;
+  }
+  if (isHTMLElement(input)) {
+    return input;
+  }
+  return null;
+}
+
 // src/core/maskEngine.ts
-var import_inputmask = __toESM(require_inputmask(), 1);
+var import_inputmask2 = __toESM(require_inputmask());
 function createMaskInstance(mask, options) {
-  const inputmaskInstance = interopDefaultSync(import_inputmask.default);
+  const inputmaskInstance = interopDefaultSync(import_inputmask2.default);
   return inputmaskInstance(getMaskOptions(mask, options));
 }
 function applyMaskToElement(element, mask, options) {
@@ -3838,6 +3841,6 @@ inputmask/dist/inputmask.js:
   (*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE *)
 */
 
-export { __toESM, applyMaskToElement, createMaskInstance, findInputElement, flow, getMaskOptions, interopDefaultSync, isHTMLElement, isServer_default, makeMaskCacheKey, require_inputmask, resolveInputRef, setPrevRef };
-//# sourceMappingURL=chunk-FDD3PKBM.js.map
-//# sourceMappingURL=chunk-FDD3PKBM.js.map
+export { applyMaskToElement, flow, isServer_default, makeMaskCacheKey, resolveInputRef, setPrevRef, withMask };
+//# sourceMappingURL=chunk-QCWLMMDI.js.map
+//# sourceMappingURL=chunk-QCWLMMDI.js.map