use-mask-input 3.10.3 → 3.11.1

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 3.11.1
+
+### Patch Changes
+
+- 20230ee: fix: stop `maxLength` from blocking input on masked fields
+
+  A mask like `999.999.999-99` keeps its literals and placeholder in the input's
+  value, so `maxlength` counted characters nobody typed. The browser refused
+  keystrokes, and inputmask copied the attribute into a validator that rejects any
+  buffer longer than it. Any `maxLength` at or below the masked length rejected
+  every keystroke, and larger values silently truncated.
+
+  The attribute is now removed before the mask is applied, but only for masks that
+  render characters on their own. Open-ended masks such as `numeric`, `integer`
+  and `decimal` render nothing while empty, so their `maxLength` still caps
+  exactly what it says it caps and is left untouched.
+
+  Closes #191
+
+- 46fb75d: fix(react-hook-form): fire `onChange` on the first select-all + delete for predefined values
+
+  When a React Hook Form field had a predefined value, the mask was applied before RHF wrote that value onto the element, leaving Inputmask's internal buffer out of sync with the DOM. The first `Ctrl+A` + `Delete` was swallowed and did not trigger `onChange`. The RHF ref now runs before the mask is applied, so Inputmask is seeded with the current value and stays in sync from the start.
+
+## 3.11.0
+
+### Minor Changes
+
+- 8e20241: Expose `formatWithMask` and `unformatWithMask` utility functions for formatting and sanitizing values outside of a mounted element, useful for preparing data for the backend or displaying already-persisted values in the UI.
+
 ## 3.10.3
 
 ### Patch Changes

package/README.md

@@ -120,6 +120,8 @@ function EmailInput() {
 | `withTanStackFormMask` | Function. Mask for TanStack input props. Requires `React.memo`. |
 | `useMaskInputAntd` | Hook. `useMaskInput` for Ant Design. |
 | `useHookFormMaskAntd` | Hook. `useHookFormMask` for Ant Design. |
+| `formatWithMask` | Function. Formats a raw value using a mask, without a mounted element. |
+| `unformatWithMask` | Function. Removes the mask from a formatted value, without a mounted element. |
 
 ## Built-in Aliases
 

package/dist/antd.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./withMask-B4sSnU9K.cjs");let t=require("react");function n(n){return(0,t.useMemo)(()=>{let t=new Map;return(r,i,a)=>{if(!n)throw Error(`registerFn is required`);let o=n(r,a),{ref:s}=o,c=e.i(r,i);t.has(c)||t.set(c,t=>{let n=t?e.l(t.input):null;n&&e.n(n,i,a),s&&s(n)});let l={...o,ref:t.get(c)};return e.a(l,s),l}},[n])}function r(n){let{mask:r,register:i,options:a}=n,o=(0,t.useRef)(null),s=(0,t.useRef)(r),c=(0,t.useRef)(a),l=(0,t.useRef)(null),u=(0,t.useCallback)(()=>e.r(o.current),[]);s.current=r,c.current=a;let d=(0,t.useCallback)(t=>{if(!t){o.current=null;return}o.current=e.l(t.input),o.current&&o.current!==l.current&&(e.t(s.current,c.current)(o.current),l.current=o.current)},[]);return(0,t.useEffect)(()=>{e.s||!o.current||!i||i(o.current)},[i]),e.s?e.o((()=>{}),()=>``):e.o(d,u)}exports.useHookFormMaskAntd=n,exports.useMaskInputAntd=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./withMask-BQpBm8zG.cjs");let t=require("react");function n(n){return(0,t.useMemo)(()=>{let t=new Map;return(r,i,a)=>{if(!n)throw Error(`registerFn is required`);let o=n(r,a),{ref:s}=o,c=e.o(r,i);t.has(c)||t.set(c,t=>{let n=t?e.u(t.input):null;n&&e.n(n,i,a),s&&s(n)});let l={...o,ref:t.get(c)};return e.s(l,s),l}},[n])}function r(n){let{mask:r,register:i,options:a}=n,o=(0,t.useRef)(null),s=(0,t.useRef)(r),c=(0,t.useRef)(a),l=(0,t.useRef)(null),u=(0,t.useCallback)(()=>e.a(o.current),[]);s.current=r,c.current=a;let d=(0,t.useCallback)(t=>{if(!t){o.current=null;return}o.current=e.u(t.input),o.current&&o.current!==l.current&&(e.t(s.current,c.current)(o.current),l.current=o.current)},[]);return(0,t.useEffect)(()=>{e.l||!o.current||!i||i(o.current)},[i]),e.l?e.c((()=>{}),()=>``):e.c(d,u)}exports.useHookFormMaskAntd=n,exports.useMaskInputAntd=r;
 //# sourceMappingURL=antd.cjs.map

package/dist/antd.d.cts

@@ -1,7 +1,6 @@
-import { a as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as Mask, o as UseHookFormMaskReturn, p as Path, r as Options, u as FieldValues } from "./index-Do9euvWK.cjs";
+import { a as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as Mask, o as UseHookFormMaskReturn, p as Path, r as Options, u as FieldValues } from "./index-HfKPnOg0.cjs";
 import { InputRef } from "antd";
 import { RefCallback } from "react";
-
 //#region src/antd/useHookFormMaskAntd.d.ts
 type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
   ref: RefCallback<InputRef | null>;

package/dist/antd.d.mts

@@ -1,7 +1,6 @@
-import { a as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as Mask, o as UseHookFormMaskReturn, p as Path, r as Options, u as FieldValues } from "./index-Do9euvWK.mjs";
+import { a as UnmaskedValueApi, d as UseFormRegister, l as RegisterOptions, n as Mask, o as UseHookFormMaskReturn, p as Path, r as Options, u as FieldValues } from "./index-HfKPnOg0.mjs";
 import { RefCallback } from "react";
 import { InputRef } from "antd";
-
 //#region src/antd/useHookFormMaskAntd.d.ts
 type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
   ref: RefCallback<InputRef | null>;

package/dist/antd.mjs

@@ -1,2 +1,2 @@
-import{a as e,i as t,l as n,n as r,o as i,r as a,s as o,t as s}from"./withMask-CKM8Ug6z.mjs";import{useCallback as c,useEffect as l,useMemo as u,useRef as d}from"react";function f(i){return u(()=>{let a=new Map;return(o,s,c)=>{if(!i)throw Error(`registerFn is required`);let l=i(o,c),{ref:u}=l,d=t(o,s);a.has(d)||a.set(d,e=>{let t=e?n(e.input):null;t&&r(t,s,c),u&&u(t)});let f={...l,ref:a.get(d)};return e(f,u),f}},[i])}function p(e){let{mask:t,register:r,options:u}=e,f=d(null),p=d(t),m=d(u),h=d(null),g=c(()=>a(f.current),[]);p.current=t,m.current=u;let _=c(e=>{if(!e){f.current=null;return}f.current=n(e.input),f.current&&f.current!==h.current&&(s(p.current,m.current)(f.current),h.current=f.current)},[]);return l(()=>{o||!f.current||!r||r(f.current)},[r]),o?i((()=>{}),()=>``):i(_,g)}export{f as useHookFormMaskAntd,p as useMaskInputAntd};
+import{a as e,c as t,l as n,n as r,o as i,s as a,t as o,u as s}from"./withMask-DlC13MV7.mjs";import{useCallback as c,useEffect as l,useMemo as u,useRef as d}from"react";function f(e){return u(()=>{let t=new Map;return(n,o,c)=>{if(!e)throw Error(`registerFn is required`);let l=e(n,c),{ref:u}=l,d=i(n,o);t.has(d)||t.set(d,e=>{let t=e?s(e.input):null;t&&r(t,o,c),u&&u(t)});let f={...l,ref:t.get(d)};return a(f,u),f}},[e])}function p(r){let{mask:i,register:a,options:u}=r,f=d(null),p=d(i),m=d(u),h=d(null),g=c(()=>e(f.current),[]);p.current=i,m.current=u;let _=c(e=>{if(!e){f.current=null;return}f.current=s(e.input),f.current&&f.current!==h.current&&(o(p.current,m.current)(f.current),h.current=f.current)},[]);return l(()=>{n||!f.current||!a||a(f.current)},[a]),n?t((()=>{}),()=>``):t(_,g)}export{f as useHookFormMaskAntd,p as useMaskInputAntd};
 //# sourceMappingURL=antd.mjs.map