use-mask-input 3.7.3 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 ## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
 
+## 3.8.0
+
+### Minor Changes
+
+- eacce0f: feat: add Brazilian banking masks (br-bank-account and br-bank-agency)
+
+  Added two new mask aliases for Brazilian banking information:
+
+  - `br-bank-account`: Supports multiple Brazilian bank account formats including Bradesco, Itaú, Banco do Brasil, Caixa Econômica, Nubank, and more
+  - `br-bank-agency`: Handles Brazilian bank agency numbers with optional check digits
+
+  These masks automatically adapt to different account number formats used by major Brazilian banks, making it easier to handle banking data in forms.
+
+  Example usage:
+
+  ```tsx
+  const accountMask = useMaskInput({ mask: "br-bank-account" });
+  const agencyMask = useMaskInput({ mask: "br-bank-agency" });
+  ```
+
+### Patch Changes
+
+- a614d93: fix: sync DOM value after react-hook-form `reset()` in `useHookFormMask`
+
+  `reset()` in react-hook-form clears its internal field registry before re-rendering. On the subsequent render it returns a new ref callback that, when called, syncs the DOM to the reset value. Because `useHookFormMask` caches a stable ref, React never calls that new callback — leaving masked inputs stale after `reset()`.
+
+  Fixed by using a `useLayoutEffect` queue that replays the latest RHF ref callback against the stored element after each render. RHF's own guard makes this a no-op on normal re-renders; it only does real work after `reset()` clears the registry.
+
+## 3.7.4
+
+### Patch Changes
+
+- 7f85587: (antd) prevent unnecessary masking function calls by tracking the current masked element reference
+
 ## 3.7.3
 
 ### Patch Changes

package/README.md

@@ -1,62 +1,90 @@
 <div align="center">
-  <h1>🥸 use-mask-input</h1>
-  <h4>A React Hook for building elegant and simple input masks.</h4>
+  <h1>use-mask-input</h1>
+  <p>Input masks for React. Simple, lightweight, and framework-friendly.</p>
 
   [![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)
+  [![bundle size](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)
+
+  [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E71VQENQ)
 </div>
 
-## [Full Documentation](http://use-mask-input.eduardoborges.dev) | [Sponsor this project](https://github.com/eduardoborges?tab=sponsors)
+---
+
+**[Documentation](http://use-mask-input.eduardoborges.dev)** · **[API Reference](http://use-mask-input.eduardoborges.dev/api-reference)** · **[Sponsor](https://ko-fi.com/E1E71VQENQ)**
 
-## Features
-- 🎯  Simple API
-- 💎  Works like a charm with *Next.js*
-- ✨  Compatible with [React Hook Form](https://github.com/react-hook-form/react-hook-form)
-- 🏁  Compatible with [React Final Form](https://github.com/final-form/react-final-form)
 ## Install
 
 ```sh
-npm i use-mask-input
+npm install use-mask-input
 ```
 
-## Quickstart
+## Usage
 
-```jsx
-import React from 'react'
+```tsx
 import { useMaskInput } from 'use-mask-input';
 
-const App = () => {
-  return (
-    <input type="text" ref={withMask('9999-9999')} />
-  )
+function PhoneInput() {
+  const ref = useMaskInput({ mask: '(99) 99999-9999' });
+  return <input ref={ref} />;
 }
 ```
 
-### Usage with React Hook Forms
+### With React Hook Form
 
-```jsx
-import React from 'react';
+```tsx
 import { useForm } from 'react-hook-form';
 import { useHookFormMask } from 'use-mask-input';
 
-function App() {
+function MyForm() {
   const { register, handleSubmit } = useForm();
   const registerWithMask = useHookFormMask(register);
 
-  ...
-
   return (
-    <form onSubmit={onSubmit}>
-      <input
-        {...registerWithMask("phone", ['99 9999-9999', '99999-9999'], {
-          required: true
-        })}
-        type="text"
-      />
+    <form onSubmit={handleSubmit(console.log)}>
+      <input {...registerWithMask('phone', '(99) 99999-9999')} />
+      <input {...registerWithMask('cpf', 'cpf')} />
       <button type="submit">Submit</button>
     </form>
   );
 }
 ```
+
+### With Ant Design
+
+```tsx
+import { Input } from 'antd';
+import { useMaskInputAntd } from 'use-mask-input/antd';
+
+function CPFInput() {
+  const ref = useMaskInputAntd({ mask: 'cpf' });
+  return <Input ref={ref} />;
+}
+```
+
+## APIs
+
+| API | Description |
+|-----|-------------|
+| `useMaskInput` | Hook. Returns a ref callback. Default choice. |
+| `useHookFormMask` | Hook. Wraps React Hook Form's `register`. |
+| `withMask` | Function. Ref callback. Requires `React.memo`. |
+| `withHookFormMask` | Function. Mask for registered fields. Requires `React.memo`. |
+| `useMaskInputAntd` | Hook. `useMaskInput` for Ant Design. |
+| `useHookFormMaskAntd` | Hook. `useHookFormMask` for Ant Design. |
+
+## Built-in Aliases
+
+`cpf` · `cnpj` · `br-bank-account` · `br-bank-agency` · `currency` · `brl-currency` · `datetime` · `email` · `numeric` · `decimal` · `integer` · `percentage` · `url` · `ip` · `mac` · `ssn`
+
+## Works With
+
+- React Hook Form
+- Ant Design
+- React Final Form
+- Next.js / SSR
+
+## License
+
+MIT

package/dist/antd.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkVK6LQ75W_cjs = require('./chunk-VK6LQ75W.cjs');
+var chunkX5SEJVSB_cjs = require('./chunk-X5SEJVSB.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 = chunkVK6LQ75W_cjs.makeMaskCacheKey(fieldName, mask);
+      const cacheKey = chunkX5SEJVSB_cjs.makeMaskCacheKey(fieldName, mask);
       if (!refCache.has(cacheKey)) {
         const refWithMask = (inputRef) => {
-          const element = inputRef ? chunkVK6LQ75W_cjs.resolveInputRef(inputRef.input) : null;
-          if (element) chunkVK6LQ75W_cjs.applyMaskToElement(element, mask, options);
+          const element = inputRef ? chunkX5SEJVSB_cjs.resolveInputRef(inputRef.input) : null;
+          if (element) chunkX5SEJVSB_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)
       };
-      chunkVK6LQ75W_cjs.setPrevRef(result, ref);
+      chunkX5SEJVSB_cjs.setPrevRef(result, ref);
       return result;
     };
   }, [registerFn]);
@@ -33,19 +33,25 @@ function useMaskInputAntd(props) {
   const ref = react.useRef(null);
   const maskRef = react.useRef(mask);
   const optionsRef = react.useRef(options);
+  const maskedElementRef = react.useRef(null);
+  maskRef.current = mask;
+  optionsRef.current = options;
   const refCallback = react.useCallback((input) => {
     if (!input) {
       ref.current = null;
       return;
     }
-    ref.current = chunkVK6LQ75W_cjs.resolveInputRef(input.input);
-    chunkVK6LQ75W_cjs.withMask(maskRef.current, optionsRef.current)(ref.current);
+    ref.current = chunkX5SEJVSB_cjs.resolveInputRef(input.input);
+    if (ref.current && ref.current !== maskedElementRef.current) {
+      chunkX5SEJVSB_cjs.withMask(maskRef.current, optionsRef.current)(ref.current);
+      maskedElementRef.current = ref.current;
+    }
   }, []);
   react.useEffect(() => {
-    if (chunkVK6LQ75W_cjs.isServer_default || !ref.current || !register) return;
+    if (chunkX5SEJVSB_cjs.isServer_default || !ref.current || !register) return;
     register(ref.current);
   }, [register]);
-  if (chunkVK6LQ75W_cjs.isServer_default) {
+  if (chunkX5SEJVSB_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","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"]}
+{"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;AACjC,EAAA,MAAM,gBAAA,GAAmBA,aAAgC,IAAI,CAAA;AAE7D,EAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,EAAA,UAAA,CAAW,OAAA,GAAU,OAAA;AAErB,EAAA,MAAM,WAAA,GAAcC,iBAAA,CAAY,CAAC,KAAA,KAAiC;AAChE,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;AAEzC,IAAA,IAAI,GAAA,CAAI,OAAA,IAAW,GAAA,CAAI,OAAA,KAAY,iBAAiB,OAAA,EAAS;AAC3D,MAAAK,0BAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AACzD,MAAA,gBAAA,CAAiB,UAAU,GAAA,CAAI,OAAA;AAAA,IACjC;AAAA,EACF,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  const maskedElementRef = useRef<HTMLInputElement | null>(null);\n\n  maskRef.current = mask;\n  optionsRef.current = options;\n\n  const refCallback = useCallback((input: InputRef | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input.input);\n\n    if (ref.current && ref.current !== maskedElementRef.current) {\n      withMask(maskRef.current, optionsRef.current)(ref.current);\n      maskedElementRef.current = ref.current;\n    }\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

@@ -1,7 +1,7 @@
 import { InputRef } from 'antd';
 import { RefCallback } from 'react';
 import { FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
-import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-F3rlTTTe.cjs';
+import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-S8txl6uK.cjs';
 
 type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
     ref: RefCallback<InputRef | null>;

package/dist/antd.d.ts

@@ -1,7 +1,7 @@
 import { InputRef } from 'antd';
 import { RefCallback } from 'react';
 import { FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
-import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-F3rlTTTe.js';
+import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-S8txl6uK.js';
 
 type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
     ref: RefCallback<InputRef | null>;

package/dist/antd.js

@@ -1,4 +1,4 @@
-import { makeMaskCacheKey, setPrevRef, resolveInputRef, withMask, isServer_default, applyMaskToElement } from './chunk-QCWLMMDI.js';
+import { makeMaskCacheKey, setPrevRef, resolveInputRef, withMask, isServer_default, applyMaskToElement } from './chunk-ICLWBMH4.js';
 import { useMemo, useRef, useCallback, useEffect } from 'react';
 
 function useHookFormMaskAntd(registerFn) {
@@ -31,13 +31,19 @@ function useMaskInputAntd(props) {
   const ref = useRef(null);
   const maskRef = useRef(mask);
   const optionsRef = useRef(options);
+  const maskedElementRef = useRef(null);
+  maskRef.current = mask;
+  optionsRef.current = options;
   const refCallback = useCallback((input) => {
     if (!input) {
       ref.current = null;
       return;
     }
     ref.current = resolveInputRef(input.input);
-    withMask(maskRef.current, optionsRef.current)(ref.current);
+    if (ref.current && ref.current !== maskedElementRef.current) {
+      withMask(maskRef.current, optionsRef.current)(ref.current);
+      maskedElementRef.current = ref.current;
+    }
   }, []);
   useEffect(() => {
     if (isServer_default || !ref.current || !register) return;

package/dist/antd.js.map

@@ -1 +1 @@
-{"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"]}
+{"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;AACjC,EAAA,MAAM,gBAAA,GAAmB,OAAgC,IAAI,CAAA;AAE7D,EAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,EAAA,UAAA,CAAW,OAAA,GAAU,OAAA;AAErB,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,KAAA,KAAiC;AAChE,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;AAEzC,IAAA,IAAI,GAAA,CAAI,OAAA,IAAW,GAAA,CAAI,OAAA,KAAY,iBAAiB,OAAA,EAAS;AAC3D,MAAA,QAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AACzD,MAAA,gBAAA,CAAiB,UAAU,GAAA,CAAI,OAAA;AAAA,IACjC;AAAA,EACF,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  const maskedElementRef = useRef<HTMLInputElement | null>(null);\n\n  maskRef.current = mask;\n  optionsRef.current = options;\n\n  const refCallback = useCallback((input: InputRef | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input.input);\n\n    if (ref.current && ref.current !== maskedElementRef.current) {\n      withMask(maskRef.current, optionsRef.current)(ref.current);\n      maskedElementRef.current = ref.current;\n    }\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-QCWLMMDI.js → chunk-ICLWBMH4.js}

@@ -3704,6 +3704,25 @@ var ALIAS_MASKS = {
   cnpj: {
     mask: ["A|9{2}.A|9{3}.A|9{3}/A|9{4}-9{2}"],
     placeholder: "__.___.___/____-__"
+  },
+  "br-bank-account": {
+    mask: [
+      "9{4,10}[-]9",
+      // Most common formats: 1234567-9, 12345678-9, 123456789-9, 1234567890-1
+      "999999[-][9]",
+      // Optional separator: 123456-7 or 1234567
+      "[999]9{7,8}[-]9",
+      // Caixa and Nu Pagamentos: (001)12345678-9 or (001)1234567-9
+      "[9999]9{8}[-]9"
+      // Caixa longer: (0001)12345678-9
+    ],
+    placeholder: "",
+    greedy: false
+  },
+  "br-bank-agency": {
+    mask: "9{1,5}[-][9]",
+    // Agency numbers: 1234, 12345, 1234-5
+    placeholder: ""
   }
 };
 function getMaskOptions(mask, _options) {
@@ -3842,5 +3861,5 @@ inputmask/dist/inputmask.js:
 */
 
 export { applyMaskToElement, flow, isServer_default, makeMaskCacheKey, resolveInputRef, setPrevRef, withMask };
-//# sourceMappingURL=chunk-QCWLMMDI.js.map
-//# sourceMappingURL=chunk-QCWLMMDI.js.map
+//# sourceMappingURL=chunk-ICLWBMH4.js.map
+//# sourceMappingURL=chunk-ICLWBMH4.js.map