mother-mask 3.40.0 → 3.41.0

package/README.md

@@ -90,6 +90,85 @@ Binding does not format the initial value or fire an initial callback. Use the
 Assignments to `input.value` do not dispatch an input event, so format programmatic
 updates yourself as well.
 
+## React
+
+Import the React 19.2 components from the separate `mother-mask/react` entry:
+
+```tsx
+import { useState } from 'react'
+import { InputMask, InputDecimal, formatDecimalValue } from 'mother-mask/react'
+
+// Keep option objects and mask arrays stable across renders.
+const currency = { decimalPlaces: 2, prefix: '$', allowNegative: true }
+
+export function Form() {
+  const [phone, setPhone] = useState('')
+  const [amount, setAmount] = useState('')
+
+  return (
+    <>
+      <label htmlFor="phone">Phone</label>
+      <InputMask
+        id="phone"
+        name="phone"
+        mask="(99) 99999-9999"
+        inputMode="tel"
+        value={phone}
+        onValueChange={setPhone}
+      />
+      <label htmlFor="amount">Amount</label>
+      <InputDecimal
+        id="amount"
+        name="amount"
+        options={currency}
+        value={amount}
+        onValueChange={setAmount}
+      />
+      <button type="button" onClick={() => setAmount(formatDecimalValue(1234.5, currency))}>
+        Set amount
+      </button>
+    </>
+  )
+}
+```
+
+`mother-mask/react` re-exports every core function, class, and type as well as
+`InputMask`, `InputDecimal`, `InputMaskProps`, and `InputDecimalProps`. Its core
+exports are aliases to `mother-mask`, sharing the same implementation and caches.
+The core ESM, CommonJS, and UMD builds remain independent of React. React is an
+optional peer dependency required only when importing `mother-mask/react`;
+the supported version range is `^19.2.0`. React is not bundled.
+
+- Both components accept controlled string `value` or uncontrolled string
+  `defaultValue`. Update controlled state synchronously in `onValueChange`;
+  assigning `''` clears the input. Use `formatDecimalValue` to convert JS numbers
+  to decimal strings using the same options as the field.
+- `InputMask` accepts `mask` and optional `BindOptions` (without `onChange`).
+  `onValueChange(value)` reports the formatted string.
+- `InputDecimal` accepts optional `BindDecimalOptions` (without `onChange`).
+  `onValueChange(value, numericValue)` reports the formatted string and parsed
+  JS number; empty input reports `('', 0)`. Decimal strings use the configured
+  decimal separator. Preserve the string in state so intermediate edits work.
+- Native input props and `ref` are forwarded. Both use `type="text"`;
+  `InputDecimal` defaults to `inputMode="decimal"`. Use `onValueChange` instead
+  of React's `onChange`. Initial formatting and parent updates do not fire it.
+- The components dispose listeners and pending frames on replacement, unmount,
+  and Activity hide. Controlled echoes preserve the mask's caret and editing
+  state. Keep options and mask arrays stable to avoid unnecessary rebinding.
+- IME composition drafts survive unrelated renders. Configuration changes made
+  while an Activity is hidden are applied when it becomes visible again.
+  Native attributes supplied through React are preserved across rebinding.
+- Native form reset keeps a controlled field's current value. An uncontrolled
+  field resets to its original `defaultValue`, formatted with its current
+  options. Canceled resets are respected; reset does not fire `onValueChange`.
+  This also works for inputs associated with a form through the `form` prop.
+  Readonly and disabled fields do not emit change callbacks.
+
+The React entry preserves a `use client` directive for React Server Components;
+server-only code can continue importing pure helpers from `mother-mask`.
+See the [React example](https://github.com/dan2dev/mother-mask/tree/main/examples/react-simple)
+for a runnable app and browser lifecycle/memory tests.
+
 ## Decimal Inputs
 
 Use `bindDecimal` for numbers, currency fields, and values where the integer part should grow freely.
@@ -208,6 +287,34 @@ The user decides how wide a ranged segment is, using the separator:
 Reaching `min` alone never inserts anything: after `"3"` the value is `"3"`,
 because the next keystroke could still be a second digit.
 
+**Any separator ends the segment, and the mask prints its own.** A ranged
+segment is the one place a mask cannot work out its own boundary, so a person
+saying "this field is done" gets to say it with whichever divider is under
+their thumb — a keypad `.`, a `-`, a space — not only the one the pattern
+happens to spell:
+
+```ts
+bind(date, '9{1,2}/9{1,2}/9{4}')
+// type "3.4.1986" → "3/4/1986"
+// type "3-4-1986" → "3/4/1986"
+// type "3 4 1986" → "3/4/1986"
+```
+
+Any Unicode punctuation, symbol, or space works, and each one behaves exactly
+as the mask's own separator does — same value, same caret. Letters, digits,
+and other scripts do not: a mistyped `"a"` in a date field is a typo, not a
+decision, so it stays the noise it always was. Neither does a character this
+mask's own alphabet accepts — a custom token matching `"."` makes `"."` content
+in that mask, never a boundary.
+
+The rule reaches exactly as far as the ambiguity it resolves. A segment only
+reads a separator this way once it is at or past its `min` and still short of
+its `max`; everywhere else the mask owns where its dividers go, and a segment
+that reaches its width reveals the next divider by itself (see
+[Eager Mode](#eager-mode)). So a pattern with no `{min,max}` segment is
+completely unaffected — under `'99/99/9999'`, `"4."` and `"4/"` alike give
+`"4"`, since one digit is short of the day's width either way.
+
 Closing a segment early retires the slots it did not use, so a finished value
 can be shorter than the pattern's maximum: `"3/4/1986"` is complete at eight
 characters even though `getMaxLength` reports `10`. Anything typed past that

package/dist/react.cjs

@@ -0,0 +1,2 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("mother-mask"),t=require("react"),n=require("react/jsx-runtime");function r(e,n){let r=(0,t.useRef)(!1),i=(0,t.useRef)(!1);return(0,t.useLayoutEffect)(()=>{let t=e.current,a=!0,o=()=>{r.current=!0},s=()=>{r.current=!1,n()},c=e=>{e.target===t.form&&queueMicrotask(()=>{a&&!e.defaultPrevented&&(r.current=!1,i.current=!0,n())})};return t.addEventListener(`compositionstart`,o,!0),t.addEventListener(`compositionend`,s,!0),t.ownerDocument.addEventListener(`reset`,c,!0),()=>{a=!1,r.current=!1,i.current=!1,t.removeEventListener(`compositionstart`,o,!0),t.removeEventListener(`compositionend`,s,!0),t.ownerDocument.removeEventListener(`reset`,c,!0)}},[e,n]),{composing:r,resetRequested:i}}function i(e,t,n){let r=[[`autocomplete`,`autoComplete`],[`autocorrect`,`autoCorrect`],[`autocapitalize`,`autoCapitalize`],[`spellcheck`,`spellCheck`],[`maxlength`,`maxLength`]].flatMap(([n,r])=>{let i=e.getAttribute(n);return t[r]!=null&&i!==null?[[n,i]]:[]});n();for(let[t,n]of r)e.setAttribute(t,n)}function a({mask:a,options:o,value:s,defaultValue:c=``,onValueChange:l,ref:u,...d}){let f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useRef)({mask:a,options:o}),[,h]=(0,t.useReducer)(e=>e+1,0),g=r(f,h),[_]=(0,t.useState)(()=>({value:(0,e.process)(s??c,a,o),defaultValue:c}));(0,t.useImperativeHandle)(u,()=>f.current,[]);let v=(0,t.useEffectEvent)(e=>{!d.readOnly&&!d.disabled&&l?.(e),s!==void 0&&h()}),y=(0,t.useEffectEvent)(()=>{let e=p.current;e&&i(e.input,d,e.dispose),p.current=null});return(0,t.useLayoutEffect)(()=>()=>{y()},[]),(0,t.useLayoutEffect)(()=>{let t=f.current;if(!t||g.composing.current)return;let n=p.current,r=m.current.mask!==a||m.current.options!==o,i=s!==void 0&&s!==t.value,c=r||i?(0,e.process)(s??t.value,a,o):t.value;(!n||r||c!==t.value||g.resetRequested.current)&&(y(),c!==t.value&&(t.value=c),p.current={input:t,dispose:(0,e.bind)(t,a,{...o,onChange:e=>v(e)})}),m.current={mask:a,options:o},g.resetRequested.current=!1,t.defaultValue=s===void 0?(0,e.process)(_.defaultValue,a,o):t.value}),(0,n.jsx)(`input`,{...d,ref:f,type:`text`,defaultValue:_.value})}function o({options:a,value:o,defaultValue:s=``,onValueChange:c,ref:l,...u}){let d=(0,t.useRef)(null),f=(0,t.useRef)(null),p=(0,t.useRef)(a),[,m]=(0,t.useReducer)(e=>e+1,0),h=r(d,m),[g]=(0,t.useState)(()=>({value:(0,e.processDecimal)(o??s,a),defaultValue:s}));(0,t.useImperativeHandle)(l,()=>d.current,[]);let _=(0,t.useEffectEvent)((e,t)=>{!u.readOnly&&!u.disabled&&c?.(e,t),o!==void 0&&m()}),v=(0,t.useEffectEvent)(()=>{let e=f.current;e&&i(e.input,u,e.dispose),f.current=null});return(0,t.useLayoutEffect)(()=>()=>{v()},[]),(0,t.useLayoutEffect)(()=>{let t=d.current;if(!t||h.composing.current)return;let n=f.current,r=p.current!==a,i=o!==void 0&&o!==t.value,s=r||i?(0,e.processDecimal)(o??t.value,a):t.value;(!n||r||s!==t.value||h.resetRequested.current)&&(v(),s!==t.value&&(t.value=s),f.current={input:t,dispose:(0,e.bindDecimal)(t,{...a,onChange:(e,t)=>_(e,t)})}),p.current=a,h.resetRequested.current=!1,t.defaultValue=o===void 0?(0,e.processDecimal)(g.defaultValue,a):t.value}),(0,n.jsx)(`input`,{inputMode:`decimal`,...u,ref:d,type:`text`,defaultValue:g.value})}exports.InputDecimal=o,exports.InputMask=a,Object.keys(e).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});
+//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.cjs","names":["useRef","useRef","useReducer","useState","process","useEffectEvent","bind","useRef","useReducer","useState","processDecimal","useEffectEvent","bindDecimal"],"sources":["../src/react/input-lifecycle.ts","../src/react/InputMask.tsx","../src/react/InputDecimal.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport type { ComponentPropsWithRef, RefObject } from 'react'\n\n/** Observe native events before the binder and React's delegated handlers. */\nexport function useInputLifecycle(inputRef: RefObject<HTMLInputElement | null>, reconcile: () => void) {\n  const composing = useRef(false)\n  const resetRequested = useRef(false)\n\n  useLayoutEffect(() => {\n    const input = inputRef.current!\n    let active = true\n    const onCompositionStart = () => { composing.current = true }\n    const onCompositionEnd = () => {\n      composing.current = false\n      reconcile()\n    }\n    const onReset = (event: Event) => {\n      if (event.target !== input.form) return\n      // reset fires before its default action. Wait for it, and honor a\n      // preventDefault from any React/native handler later in propagation.\n      queueMicrotask(() => {\n        if (!active || event.defaultPrevented) return\n        composing.current = false\n        resetRequested.current = true\n        reconcile()\n      })\n    }\n    input.addEventListener('compositionstart', onCompositionStart, true)\n    input.addEventListener('compositionend', onCompositionEnd, true)\n    // Capture also covers form=\"id\" and a stopped bubbling reset event.\n    input.ownerDocument.addEventListener('reset', onReset, true)\n    return () => {\n      active = false\n      composing.current = false\n      resetRequested.current = false\n      input.removeEventListener('compositionstart', onCompositionStart, true)\n      input.removeEventListener('compositionend', onCompositionEnd, true)\n      input.ownerDocument.removeEventListener('reset', onReset, true)\n    }\n  }, [inputRef, reconcile])\n\n  return { composing, resetRequested }\n}\n\n/** A binder may own an attribute that React has since explicitly updated. */\nexport function disposePreservingProps(\n  input: HTMLInputElement,\n  props: ComponentPropsWithRef<'input'>,\n  dispose: () => void,\n) {\n  const names = [\n    ['autocomplete', 'autoComplete'], ['autocorrect', 'autoCorrect'],\n    ['autocapitalize', 'autoCapitalize'], ['spellcheck', 'spellCheck'],\n    ['maxlength', 'maxLength'],\n  ] as const\n  const attributes = names.flatMap(([attribute, prop]) => {\n    const value = input.getAttribute(attribute)\n    return props[prop] != null && value !== null ? [[attribute, value] as const] : []\n  })\n  dispose()\n  for (const [name, value] of attributes) input.setAttribute(name, value)\n}\n","'use client'\n\nimport { useEffectEvent, useImperativeHandle, useLayoutEffect, useReducer, useRef, useState } from 'react'\nimport type { ComponentPropsWithRef } from 'react'\nimport { bind, process } from 'mother-mask'\nimport type { BindOptions, MaskPattern } from 'mother-mask'\nimport { disposePreservingProps, useInputLifecycle } from './input-lifecycle'\n\nexport type InputMaskProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'value' | 'defaultValue' | 'onChange' | 'type'\n> & {\n  mask: MaskPattern\n  options?: Omit<BindOptions, 'onChange'>\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport function InputMask({\n  mask,\n  options,\n  value,\n  defaultValue = '',\n  onValueChange,\n  ref,\n  ...inputProps\n}: InputMaskProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const bindingRef = useRef<{\n    input: HTMLInputElement\n    dispose: () => void\n  } | null>(null)\n  const configurationRef = useRef({ mask, options })\n  const [, reconcile] = useReducer((revision: number) => revision + 1, 0)\n  const lifecycle = useInputLifecycle(inputRef, reconcile)\n  const [initial] = useState(() => ({ value: process(value ?? defaultValue, mask, options), defaultValue }))\n\n  useImperativeHandle(ref, () => inputRef.current!, [])\n\n  // Read the latest committed props without recreating the binding for a new\n  // callback identity. This event is only called by the effect-owned binder.\n  const handleChange = useEffectEvent((maskedValue: string) => {\n    if (!inputProps.readOnly && !inputProps.disabled) onValueChange?.(maskedValue)\n    if (value !== undefined) reconcile()\n  })\n\n  const releaseBinding = useEffectEvent(() => {\n    const binding = bindingRef.current\n    if (binding) disposePreservingProps(binding.input, inputProps, binding.dispose)\n    bindingRef.current = null\n  })\n\n  // Register cleanup before acquiring a binding, including StrictMode replay\n  // and React Activity hide/show. Disposed bindings must release their refs.\n  useLayoutEffect(() => () => {\n    releaseBinding()\n  }, [])\n\n  // Reconcile after every commit, including when a parent rejects an edit.\n  useLayoutEffect(() => {\n    const input = inputRef.current\n    if (!input || lifecycle.composing.current) return\n\n    const binding = bindingRef.current\n    const maskChanged = configurationRef.current.mask !== mask || configurationRef.current.options !== options\n    const valueChanged = value !== undefined && value !== input.value\n    const nextValue = maskChanged || valueChanged\n      ? process(value ?? input.value, mask, options)\n      : input.value\n\n    // Leave echoed edits untouched: reformatting can restore a separator the\n    // user just deleted, and assigning .value can move the caret to the end.\n    if (!binding || maskChanged || nextValue !== input.value || lifecycle.resetRequested.current) {\n      releaseBinding()\n      if (nextValue !== input.value) input.value = nextValue\n\n      // Rebind after external updates so the mask's editing history starts\n      // from the new value, rather than the value before the parent update.\n      bindingRef.current = {\n        input,\n        dispose: bind(input, mask, {\n          ...options,\n          onChange: (maskedValue) => handleChange(maskedValue),\n        }),\n      }\n    }\n    configurationRef.current = { mask, options }\n    lifecycle.resetRequested.current = false\n    // Native reset reads defaultValue synchronously, before its reset event\n    // has finished. Controlled fields reset to their current displayed value.\n    input.defaultValue = value !== undefined ? input.value : process(initial.defaultValue, mask, options)\n  })\n\n  // The wrapper controls the DOM through the mask; React must not overwrite\n  // the mask's intermediate edits through a native input value prop.\n  return <input {...inputProps} ref={inputRef} type=\"text\" defaultValue={initial.value} />\n}\n","'use client'\n\nimport { useEffectEvent, useImperativeHandle, useLayoutEffect, useReducer, useRef, useState } from 'react'\nimport type { ComponentPropsWithRef } from 'react'\nimport { bindDecimal, processDecimal } from 'mother-mask'\nimport type { BindDecimalOptions } from 'mother-mask'\nimport { disposePreservingProps, useInputLifecycle } from './input-lifecycle'\n\nexport type InputDecimalProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'value' | 'defaultValue' | 'onChange' | 'type'\n> & {\n  options?: Omit<BindDecimalOptions, 'onChange'>\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string, numericValue: number) => void\n}\n\nexport function InputDecimal({\n  options,\n  value,\n  defaultValue = '',\n  onValueChange,\n  ref,\n  ...inputProps\n}: InputDecimalProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const bindingRef = useRef<{\n    input: HTMLInputElement\n    dispose: () => void\n  } | null>(null)\n  const configurationRef = useRef(options)\n  const [, reconcile] = useReducer((revision: number) => revision + 1, 0)\n  const lifecycle = useInputLifecycle(inputRef, reconcile)\n  const [initial] = useState(() => ({ value: processDecimal(value ?? defaultValue, options), defaultValue }))\n\n  useImperativeHandle(ref, () => inputRef.current!, [])\n\n  // Read the latest committed props without recreating the binding for a new\n  // callback identity. This event is only called by the effect-owned binder.\n  const handleChange = useEffectEvent((maskedValue: string, numericValue: number) => {\n    if (!inputProps.readOnly && !inputProps.disabled) onValueChange?.(maskedValue, numericValue)\n    if (value !== undefined) reconcile()\n  })\n\n  const releaseBinding = useEffectEvent(() => {\n    const binding = bindingRef.current\n    if (binding) disposePreservingProps(binding.input, inputProps, binding.dispose)\n    bindingRef.current = null\n  })\n\n  // Register cleanup before acquiring a binding, including StrictMode replay\n  // and React Activity hide/show. Disposed bindings must release their refs.\n  useLayoutEffect(() => () => {\n    releaseBinding()\n  }, [])\n\n  // Reconcile after every commit, including when a parent rejects an edit.\n  useLayoutEffect(() => {\n    const input = inputRef.current\n    if (!input || lifecycle.composing.current) return\n\n    const binding = bindingRef.current\n    const optionsChanged = configurationRef.current !== options\n    const valueChanged = value !== undefined && value !== input.value\n    const nextValue = optionsChanged || valueChanged\n      ? processDecimal(value ?? input.value, options)\n      : input.value\n\n    // An echoed edit already has the mask's value and caret. Leave it alone\n    // so typing in the fraction or in the middle of the integer stays natural.\n    if (!binding || optionsChanged || nextValue !== input.value || lifecycle.resetRequested.current) {\n      releaseBinding()\n      if (nextValue !== input.value) input.value = nextValue\n\n      // External updates start a fresh binding and cancel pending edit frames.\n      bindingRef.current = {\n        input,\n        dispose: bindDecimal(input, {\n          ...options,\n          onChange: (maskedValue, numericValue) => handleChange(maskedValue, numericValue),\n        }),\n      }\n    }\n    configurationRef.current = options\n    lifecycle.resetRequested.current = false\n    input.defaultValue = value !== undefined ? input.value : processDecimal(initial.defaultValue, options)\n  })\n\n  // The wrapper synchronizes value through the mask instead of letting React\n  // overwrite the native input's intermediate edits.\n  return <input inputMode=\"decimal\" {...inputProps} ref={inputRef} type=\"text\" defaultValue={initial.value} />\n}\n"],"mappings":"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"}

package/dist/react.d.cts

@@ -0,0 +1,24 @@
+import { BindDecimalOptions, BindOptions, MaskPattern } from "mother-mask";
+import { ComponentPropsWithRef } from "react";
+export * from "mother-mask";
+//#region src/react/InputMask.d.ts
+type InputMaskProps = Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type'> & {
+  mask: MaskPattern;
+  options?: Omit<BindOptions, 'onChange'>;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+declare function InputMask({ mask, options, value, defaultValue, onValueChange, ref, ...inputProps }: InputMaskProps): import("react").JSX.Element;
+//#endregion
+//#region src/react/InputDecimal.d.ts
+type InputDecimalProps = Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type'> & {
+  options?: Omit<BindDecimalOptions, 'onChange'>;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, numericValue: number) => void;
+};
+declare function InputDecimal({ options, value, defaultValue, onValueChange, ref, ...inputProps }: InputDecimalProps): import("react").JSX.Element;
+//#endregion
+export { InputDecimal, type InputDecimalProps, InputMask, type InputMaskProps };
+//# sourceMappingURL=react.d.cts.map

package/dist/react.d.mts

@@ -0,0 +1,24 @@
+import { BindDecimalOptions, BindOptions, MaskPattern } from "mother-mask";
+import { ComponentPropsWithRef } from "react";
+export * from "mother-mask";
+//#region src/react/InputMask.d.ts
+type InputMaskProps = Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type'> & {
+  mask: MaskPattern;
+  options?: Omit<BindOptions, 'onChange'>;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+declare function InputMask({ mask, options, value, defaultValue, onValueChange, ref, ...inputProps }: InputMaskProps): import("react").JSX.Element;
+//#endregion
+//#region src/react/InputDecimal.d.ts
+type InputDecimalProps = Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type'> & {
+  options?: Omit<BindDecimalOptions, 'onChange'>;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, numericValue: number) => void;
+};
+declare function InputDecimal({ options, value, defaultValue, onValueChange, ref, ...inputProps }: InputDecimalProps): import("react").JSX.Element;
+//#endregion
+export { InputDecimal, type InputDecimalProps, InputMask, type InputMaskProps };
+//# sourceMappingURL=react.d.mts.map

package/dist/react.mjs

@@ -0,0 +1,2 @@
+"use client";import{bind as e,bindDecimal as t,process as n,processDecimal as r}from"mother-mask";import{useEffectEvent as i,useImperativeHandle as a,useLayoutEffect as o,useReducer as s,useRef as c,useState as l}from"react";import{jsx as u}from"react/jsx-runtime";export*from"mother-mask";function d(e,t){let n=c(!1),r=c(!1);return o(()=>{let i=e.current,a=!0,o=()=>{n.current=!0},s=()=>{n.current=!1,t()},c=e=>{e.target===i.form&&queueMicrotask(()=>{a&&!e.defaultPrevented&&(n.current=!1,r.current=!0,t())})};return i.addEventListener(`compositionstart`,o,!0),i.addEventListener(`compositionend`,s,!0),i.ownerDocument.addEventListener(`reset`,c,!0),()=>{a=!1,n.current=!1,r.current=!1,i.removeEventListener(`compositionstart`,o,!0),i.removeEventListener(`compositionend`,s,!0),i.ownerDocument.removeEventListener(`reset`,c,!0)}},[e,t]),{composing:n,resetRequested:r}}function f(e,t,n){let r=[[`autocomplete`,`autoComplete`],[`autocorrect`,`autoCorrect`],[`autocapitalize`,`autoCapitalize`],[`spellcheck`,`spellCheck`],[`maxlength`,`maxLength`]].flatMap(([n,r])=>{let i=e.getAttribute(n);return t[r]!=null&&i!==null?[[n,i]]:[]});n();for(let[t,n]of r)e.setAttribute(t,n)}function p({mask:t,options:r,value:p,defaultValue:m=``,onValueChange:h,ref:g,..._}){let v=c(null),y=c(null),b=c({mask:t,options:r}),[,x]=s(e=>e+1,0),S=d(v,x),[C]=l(()=>({value:n(p??m,t,r),defaultValue:m}));a(g,()=>v.current,[]);let w=i(e=>{!_.readOnly&&!_.disabled&&h?.(e),p!==void 0&&x()}),T=i(()=>{let e=y.current;e&&f(e.input,_,e.dispose),y.current=null});return o(()=>()=>{T()},[]),o(()=>{let i=v.current;if(!i||S.composing.current)return;let a=y.current,o=b.current.mask!==t||b.current.options!==r,s=p!==void 0&&p!==i.value,c=o||s?n(p??i.value,t,r):i.value;(!a||o||c!==i.value||S.resetRequested.current)&&(T(),c!==i.value&&(i.value=c),y.current={input:i,dispose:e(i,t,{...r,onChange:e=>w(e)})}),b.current={mask:t,options:r},S.resetRequested.current=!1,i.defaultValue=p===void 0?n(C.defaultValue,t,r):i.value}),u(`input`,{..._,ref:v,type:`text`,defaultValue:C.value})}function m({options:e,value:n,defaultValue:p=``,onValueChange:m,ref:h,...g}){let _=c(null),v=c(null),y=c(e),[,b]=s(e=>e+1,0),x=d(_,b),[S]=l(()=>({value:r(n??p,e),defaultValue:p}));a(h,()=>_.current,[]);let C=i((e,t)=>{!g.readOnly&&!g.disabled&&m?.(e,t),n!==void 0&&b()}),w=i(()=>{let e=v.current;e&&f(e.input,g,e.dispose),v.current=null});return o(()=>()=>{w()},[]),o(()=>{let i=_.current;if(!i||x.composing.current)return;let a=v.current,o=y.current!==e,s=n!==void 0&&n!==i.value,c=o||s?r(n??i.value,e):i.value;(!a||o||c!==i.value||x.resetRequested.current)&&(w(),c!==i.value&&(i.value=c),v.current={input:i,dispose:t(i,{...e,onChange:(e,t)=>C(e,t)})}),y.current=e,x.resetRequested.current=!1,i.defaultValue=n===void 0?r(S.defaultValue,e):i.value}),u(`input`,{inputMode:`decimal`,...g,ref:_,type:`text`,defaultValue:S.value})}export{m as InputDecimal,p as InputMask};
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","names":[],"sources":["../src/react/input-lifecycle.ts","../src/react/InputMask.tsx","../src/react/InputDecimal.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport type { ComponentPropsWithRef, RefObject } from 'react'\n\n/** Observe native events before the binder and React's delegated handlers. */\nexport function useInputLifecycle(inputRef: RefObject<HTMLInputElement | null>, reconcile: () => void) {\n  const composing = useRef(false)\n  const resetRequested = useRef(false)\n\n  useLayoutEffect(() => {\n    const input = inputRef.current!\n    let active = true\n    const onCompositionStart = () => { composing.current = true }\n    const onCompositionEnd = () => {\n      composing.current = false\n      reconcile()\n    }\n    const onReset = (event: Event) => {\n      if (event.target !== input.form) return\n      // reset fires before its default action. Wait for it, and honor a\n      // preventDefault from any React/native handler later in propagation.\n      queueMicrotask(() => {\n        if (!active || event.defaultPrevented) return\n        composing.current = false\n        resetRequested.current = true\n        reconcile()\n      })\n    }\n    input.addEventListener('compositionstart', onCompositionStart, true)\n    input.addEventListener('compositionend', onCompositionEnd, true)\n    // Capture also covers form=\"id\" and a stopped bubbling reset event.\n    input.ownerDocument.addEventListener('reset', onReset, true)\n    return () => {\n      active = false\n      composing.current = false\n      resetRequested.current = false\n      input.removeEventListener('compositionstart', onCompositionStart, true)\n      input.removeEventListener('compositionend', onCompositionEnd, true)\n      input.ownerDocument.removeEventListener('reset', onReset, true)\n    }\n  }, [inputRef, reconcile])\n\n  return { composing, resetRequested }\n}\n\n/** A binder may own an attribute that React has since explicitly updated. */\nexport function disposePreservingProps(\n  input: HTMLInputElement,\n  props: ComponentPropsWithRef<'input'>,\n  dispose: () => void,\n) {\n  const names = [\n    ['autocomplete', 'autoComplete'], ['autocorrect', 'autoCorrect'],\n    ['autocapitalize', 'autoCapitalize'], ['spellcheck', 'spellCheck'],\n    ['maxlength', 'maxLength'],\n  ] as const\n  const attributes = names.flatMap(([attribute, prop]) => {\n    const value = input.getAttribute(attribute)\n    return props[prop] != null && value !== null ? [[attribute, value] as const] : []\n  })\n  dispose()\n  for (const [name, value] of attributes) input.setAttribute(name, value)\n}\n","'use client'\n\nimport { useEffectEvent, useImperativeHandle, useLayoutEffect, useReducer, useRef, useState } from 'react'\nimport type { ComponentPropsWithRef } from 'react'\nimport { bind, process } from 'mother-mask'\nimport type { BindOptions, MaskPattern } from 'mother-mask'\nimport { disposePreservingProps, useInputLifecycle } from './input-lifecycle'\n\nexport type InputMaskProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'value' | 'defaultValue' | 'onChange' | 'type'\n> & {\n  mask: MaskPattern\n  options?: Omit<BindOptions, 'onChange'>\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport function InputMask({\n  mask,\n  options,\n  value,\n  defaultValue = '',\n  onValueChange,\n  ref,\n  ...inputProps\n}: InputMaskProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const bindingRef = useRef<{\n    input: HTMLInputElement\n    dispose: () => void\n  } | null>(null)\n  const configurationRef = useRef({ mask, options })\n  const [, reconcile] = useReducer((revision: number) => revision + 1, 0)\n  const lifecycle = useInputLifecycle(inputRef, reconcile)\n  const [initial] = useState(() => ({ value: process(value ?? defaultValue, mask, options), defaultValue }))\n\n  useImperativeHandle(ref, () => inputRef.current!, [])\n\n  // Read the latest committed props without recreating the binding for a new\n  // callback identity. This event is only called by the effect-owned binder.\n  const handleChange = useEffectEvent((maskedValue: string) => {\n    if (!inputProps.readOnly && !inputProps.disabled) onValueChange?.(maskedValue)\n    if (value !== undefined) reconcile()\n  })\n\n  const releaseBinding = useEffectEvent(() => {\n    const binding = bindingRef.current\n    if (binding) disposePreservingProps(binding.input, inputProps, binding.dispose)\n    bindingRef.current = null\n  })\n\n  // Register cleanup before acquiring a binding, including StrictMode replay\n  // and React Activity hide/show. Disposed bindings must release their refs.\n  useLayoutEffect(() => () => {\n    releaseBinding()\n  }, [])\n\n  // Reconcile after every commit, including when a parent rejects an edit.\n  useLayoutEffect(() => {\n    const input = inputRef.current\n    if (!input || lifecycle.composing.current) return\n\n    const binding = bindingRef.current\n    const maskChanged = configurationRef.current.mask !== mask || configurationRef.current.options !== options\n    const valueChanged = value !== undefined && value !== input.value\n    const nextValue = maskChanged || valueChanged\n      ? process(value ?? input.value, mask, options)\n      : input.value\n\n    // Leave echoed edits untouched: reformatting can restore a separator the\n    // user just deleted, and assigning .value can move the caret to the end.\n    if (!binding || maskChanged || nextValue !== input.value || lifecycle.resetRequested.current) {\n      releaseBinding()\n      if (nextValue !== input.value) input.value = nextValue\n\n      // Rebind after external updates so the mask's editing history starts\n      // from the new value, rather than the value before the parent update.\n      bindingRef.current = {\n        input,\n        dispose: bind(input, mask, {\n          ...options,\n          onChange: (maskedValue) => handleChange(maskedValue),\n        }),\n      }\n    }\n    configurationRef.current = { mask, options }\n    lifecycle.resetRequested.current = false\n    // Native reset reads defaultValue synchronously, before its reset event\n    // has finished. Controlled fields reset to their current displayed value.\n    input.defaultValue = value !== undefined ? input.value : process(initial.defaultValue, mask, options)\n  })\n\n  // The wrapper controls the DOM through the mask; React must not overwrite\n  // the mask's intermediate edits through a native input value prop.\n  return <input {...inputProps} ref={inputRef} type=\"text\" defaultValue={initial.value} />\n}\n","'use client'\n\nimport { useEffectEvent, useImperativeHandle, useLayoutEffect, useReducer, useRef, useState } from 'react'\nimport type { ComponentPropsWithRef } from 'react'\nimport { bindDecimal, processDecimal } from 'mother-mask'\nimport type { BindDecimalOptions } from 'mother-mask'\nimport { disposePreservingProps, useInputLifecycle } from './input-lifecycle'\n\nexport type InputDecimalProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'value' | 'defaultValue' | 'onChange' | 'type'\n> & {\n  options?: Omit<BindDecimalOptions, 'onChange'>\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string, numericValue: number) => void\n}\n\nexport function InputDecimal({\n  options,\n  value,\n  defaultValue = '',\n  onValueChange,\n  ref,\n  ...inputProps\n}: InputDecimalProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const bindingRef = useRef<{\n    input: HTMLInputElement\n    dispose: () => void\n  } | null>(null)\n  const configurationRef = useRef(options)\n  const [, reconcile] = useReducer((revision: number) => revision + 1, 0)\n  const lifecycle = useInputLifecycle(inputRef, reconcile)\n  const [initial] = useState(() => ({ value: processDecimal(value ?? defaultValue, options), defaultValue }))\n\n  useImperativeHandle(ref, () => inputRef.current!, [])\n\n  // Read the latest committed props without recreating the binding for a new\n  // callback identity. This event is only called by the effect-owned binder.\n  const handleChange = useEffectEvent((maskedValue: string, numericValue: number) => {\n    if (!inputProps.readOnly && !inputProps.disabled) onValueChange?.(maskedValue, numericValue)\n    if (value !== undefined) reconcile()\n  })\n\n  const releaseBinding = useEffectEvent(() => {\n    const binding = bindingRef.current\n    if (binding) disposePreservingProps(binding.input, inputProps, binding.dispose)\n    bindingRef.current = null\n  })\n\n  // Register cleanup before acquiring a binding, including StrictMode replay\n  // and React Activity hide/show. Disposed bindings must release their refs.\n  useLayoutEffect(() => () => {\n    releaseBinding()\n  }, [])\n\n  // Reconcile after every commit, including when a parent rejects an edit.\n  useLayoutEffect(() => {\n    const input = inputRef.current\n    if (!input || lifecycle.composing.current) return\n\n    const binding = bindingRef.current\n    const optionsChanged = configurationRef.current !== options\n    const valueChanged = value !== undefined && value !== input.value\n    const nextValue = optionsChanged || valueChanged\n      ? processDecimal(value ?? input.value, options)\n      : input.value\n\n    // An echoed edit already has the mask's value and caret. Leave it alone\n    // so typing in the fraction or in the middle of the integer stays natural.\n    if (!binding || optionsChanged || nextValue !== input.value || lifecycle.resetRequested.current) {\n      releaseBinding()\n      if (nextValue !== input.value) input.value = nextValue\n\n      // External updates start a fresh binding and cancel pending edit frames.\n      bindingRef.current = {\n        input,\n        dispose: bindDecimal(input, {\n          ...options,\n          onChange: (maskedValue, numericValue) => handleChange(maskedValue, numericValue),\n        }),\n      }\n    }\n    configurationRef.current = options\n    lifecycle.resetRequested.current = false\n    input.defaultValue = value !== undefined ? input.value : processDecimal(initial.defaultValue, options)\n  })\n\n  // The wrapper synchronizes value through the mask instead of letting React\n  // overwrite the native input's intermediate edits.\n  return <input inputMode=\"decimal\" {...inputProps} ref={inputRef} type=\"text\" defaultValue={initial.value} />\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mother-mask",
   "private": false,
-  "version": "3.40.0",
+  "version": "3.41.0",
   "type": "module",
   "description": "Lightweight input mask library for browsers",
   "author": "Danilo Celestino de Castro <dan2dev>",
@@ -26,11 +26,29 @@
         "default": "./dist/mother-mask.cjs"
       }
     },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.mts",
+        "default": "./dist/react.mjs"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "dist"
   ],
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "tsdown",
     "build:watch": "tsdown --watch",
@@ -38,15 +56,20 @@
     "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch --coverage",
+    "test:package": "bun run build && node --test tests/package.test.mjs",
     "typecheck": "tsc --noEmit",
     "release": "bumpp",
     "prepublishOnly": "bun run build"
   },
   "devDependencies": {
     "@types/node": "^26.4.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@vitest/coverage-v8": "^4.1.11",
     "bumpp": "^12.3.0",
     "jsdom": "^29.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "tsdown": "^0.22.14",
     "typescript": "^7.0.2",
     "vitest": "^4.1.11"