use-mask-input 3.6.0 → 3.6.1

package/dist/index.d.cts

@@ -1,6 +1,6 @@
-import { UseFormRegisterReturn, FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
+import { RefCallback } from 'react';
+import { FieldValues, UseFormRegisterReturn, Path, RegisterOptions, UseFormRegister } from 'react-hook-form';
 export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
-import { RefObject } from 'react';
 
 type Range = {
     start: string;
@@ -576,18 +576,59 @@ interface CommandObject {
 type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | (string & {}) | (string[] & {}) | null;
 type Options = Options$1;
 type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
+interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterReturn<Path<T>> {
+    ref: RefCallback<HTMLElement | null>;
+    prevRef: RefCallback<HTMLElement | null>;
+}
 
-declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseFormRegisterReturn;
-
-declare function withMask(mask: Mask, options?: Options): (input: Input | null) => void;
-
-declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseFormRegisterReturn<Path<T>>;
-
-interface UseInputMaskOptions {
+interface UseMaskInputOptions {
     mask: Mask;
     register?: (element: HTMLElement) => void;
     options?: Options;
 }
-declare function useInputMask(props: UseInputMaskOptions): RefObject<HTMLInputElement>;
+/**
+ * React hook for applying input masks to form elements.
+ * Works with Ant Design and other wrapped components too.
+ *
+ * @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
+ */
+declare function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void);
+
+/**
+ * Creates a masked version of React Hook Form's register function.
+ * Takes react-hook-form's register and adds automatic masking. Like an upgrade.
+ *
+ * @template T - The form data type
+ * @template D - The register options type
+ * @param registerFn - The register function from useForm hook
+ * @returns A function that registers a field with mask support
+ */
+declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskReturn<T>;
+
+/**
+ * Higher-order function that creates a ref callback for applying input masks.
+ * Simple function to apply mask via ref. No hooks, no drama.
+ *
+ * @param mask - The mask pattern to apply
+ * @param options - Optional mask configuration options
+ * @returns A ref callback function that applies the mask
+ */
+declare function withMask(mask: Mask, options?: Options): (input: Input | null) => void;
+
+/**
+ * Enhances a React Hook Form register return object with mask support.
+ * Takes an already registered field and adds mask to it.
+ * Useful when you registered the field before.
+ *
+ * @param register - The register return object from React Hook Form
+ * @param mask - The mask pattern to apply
+ * @param options - Optional mask configuration options
+ * @returns A new register return object with mask applied
+ */
+declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseHookFormMaskReturn<FieldValues>;
 
-export { type Mask, type Options, useHookFormMask, useInputMask as useMaskInput, withHookFormMask, withMask };
+export { type Input, type Mask, type Options, useHookFormMask, useMaskInput, withHookFormMask, withMask };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { UseFormRegisterReturn, FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
+import { RefCallback } from 'react';
+import { FieldValues, UseFormRegisterReturn, Path, RegisterOptions, UseFormRegister } from 'react-hook-form';
 export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
-import { RefObject } from 'react';
 
 type Range = {
     start: string;
@@ -576,18 +576,59 @@ interface CommandObject {
 type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | (string & {}) | (string[] & {}) | null;
 type Options = Options$1;
 type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
+interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterReturn<Path<T>> {
+    ref: RefCallback<HTMLElement | null>;
+    prevRef: RefCallback<HTMLElement | null>;
+}
 
-declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseFormRegisterReturn;
-
-declare function withMask(mask: Mask, options?: Options): (input: Input | null) => void;
-
-declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseFormRegisterReturn<Path<T>>;
-
-interface UseInputMaskOptions {
+interface UseMaskInputOptions {
     mask: Mask;
     register?: (element: HTMLElement) => void;
     options?: Options;
 }
-declare function useInputMask(props: UseInputMaskOptions): RefObject<HTMLInputElement>;
+/**
+ * React hook for applying input masks to form elements.
+ * Works with Ant Design and other wrapped components too.
+ *
+ * @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
+ */
+declare function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void);
+
+/**
+ * Creates a masked version of React Hook Form's register function.
+ * Takes react-hook-form's register and adds automatic masking. Like an upgrade.
+ *
+ * @template T - The form data type
+ * @template D - The register options type
+ * @param registerFn - The register function from useForm hook
+ * @returns A function that registers a field with mask support
+ */
+declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskReturn<T>;
+
+/**
+ * Higher-order function that creates a ref callback for applying input masks.
+ * Simple function to apply mask via ref. No hooks, no drama.
+ *
+ * @param mask - The mask pattern to apply
+ * @param options - Optional mask configuration options
+ * @returns A ref callback function that applies the mask
+ */
+declare function withMask(mask: Mask, options?: Options): (input: Input | null) => void;
+
+/**
+ * Enhances a React Hook Form register return object with mask support.
+ * Takes an already registered field and adds mask to it.
+ * Useful when you registered the field before.
+ *
+ * @param register - The register return object from React Hook Form
+ * @param mask - The mask pattern to apply
+ * @param options - Optional mask configuration options
+ * @returns A new register return object with mask applied
+ */
+declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseHookFormMaskReturn<FieldValues>;
 
-export { type Mask, type Options, useHookFormMask, useInputMask as useMaskInput, withHookFormMask, withMask };
+export { type Input, type Mask, type Options, useHookFormMask, useMaskInput, withHookFormMask, withMask };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useMemo, useEffect } from 'react';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -26,17 +26,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// node_modules/inputmask/dist/inputmask.js
+// ../../node_modules/.pnpm/inputmask@5.0.10-beta.61/node_modules/inputmask/dist/inputmask.js
 var require_inputmask = __commonJS({
-  "node_modules/inputmask/dist/inputmask.js"(exports, module) {
+  "../../node_modules/.pnpm/inputmask@5.0.10-beta.61/node_modules/inputmask/dist/inputmask.js"(exports$1, module) {
     !(function(e, t) {
-      if ("object" == typeof exports && "object" == typeof module) module.exports = t();
+      if ("object" == typeof exports$1 && "object" == typeof module) module.exports = t();
       else if ("function" == typeof define && define.amd) define([], t);
       else {
         var n = t();
-        for (var i in n) ("object" == typeof exports ? exports : e)[i] = n[i];
+        for (var i in n) ("object" == typeof exports$1 ? exports$1 : e)[i] = n[i];
       }
-    })("undefined" != typeof self ? self : exports, function() {
+    })("undefined" != typeof self ? self : exports$1, function() {
       return (function() {
         var e = {
           340: function(e2, t2) {
@@ -3677,35 +3677,52 @@ var require_inputmask = __commonJS({
   }
 });
 
-// src/withHookFormMask.ts
-var import_inputmask = __toESM(require_inputmask());
-
-// src/utils/flow.ts
-function flow(...funcs) {
-  const { length } = funcs;
-  let index = length;
-  while (index > 0) {
-    index -= 1;
-    if (typeof funcs[index] !== "function") {
-      throw new TypeError("Expected a function");
+// 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") ?? element.querySelector("textarea");
+    if (inputElement && isHTMLElement(inputElement)) {
+      return inputElement;
     }
+  } catch {
+    return null;
   }
-  return (...args) => {
-    let i = 0;
-    let result = length ? funcs[i].apply(this, args) : args[0];
-    while (i + 1 < length) {
-      i += 1;
-      result = funcs[i].call(this, result);
+  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 result;
-  };
+    return null;
+  }
+  if (isHTMLElement(input)) {
+    return input;
+  }
+  return null;
 }
 
-// src/utils/isServer.ts
-var isServer = !(typeof window !== "undefined" && window.document?.createElement);
-var isServer_default = isServer;
+// src/core/maskEngine.ts
+var import_inputmask = __toESM(require_inputmask());
 
-// src/utils/getMaskOptions.ts
+// src/core/maskConfig.ts
 function getMaskOptions(mask, _options) {
   const options = {
     jitMasking: false,
@@ -3767,7 +3784,6 @@ function getMaskOptions(mask, _options) {
       ...options
     },
     // alias for brazilians <3
-    // ty <3
     "brl-currency": {
       alias: "currency",
       prefix: "R$ ",
@@ -3795,6 +3811,31 @@ function getMaskOptions(mask, _options) {
   };
 }
 
+// src/utils/flow.ts
+function flow(...funcs) {
+  const { length } = funcs;
+  let index = length;
+  while (index > 0) {
+    index -= 1;
+    if (typeof funcs[index] !== "function") {
+      throw new TypeError("Expected a function");
+    }
+  }
+  return (...args) => {
+    let i = 0;
+    let result = length ? funcs[i].apply(void 0, args) : args[0];
+    while (i + 1 < length) {
+      i += 1;
+      result = funcs[i].call(void 0, result);
+    }
+    return result;
+  };
+}
+
+// src/utils/isServer.ts
+var isServer = !(typeof window !== "undefined" && window.document?.createElement);
+var isServer_default = isServer;
+
 // src/utils/moduleInterop.ts
 function interopDefaultSync(module) {
   if (typeof module === "object" && module !== null) {
@@ -3806,75 +3847,107 @@ function interopDefaultSync(module) {
   return module;
 }
 
-// src/withHookFormMask.ts
-function withHookFormMask(register, mask, options) {
-  let newRef;
-  if (register) {
-    const { ref } = register;
-    const maskInput = interopDefaultSync(import_inputmask.default)(getMaskOptions(mask, options));
-    newRef = flow((_ref) => {
-      if (_ref) maskInput.mask(_ref);
-      return _ref;
-    }, ref);
+// src/core/maskEngine.ts
+function createMaskInstance(mask, options) {
+  const inputmaskInstance = interopDefaultSync(import_inputmask.default);
+  return inputmaskInstance(getMaskOptions(mask, options));
+}
+function applyMaskToElement(element, mask, options) {
+  if (!element) return;
+  const maskInstance = createMaskInstance(mask, options);
+  const inputElement = element.nodeName === "INPUT" ? element : element.querySelector("input");
+  if (inputElement) {
+    maskInstance.mask(inputElement);
+  } else {
+    maskInstance.mask(element);
   }
-  return {
-    ...register,
-    ref: newRef
-  };
 }
 
-// src/withMask.ts
-var import_inputmask2 = __toESM(require_inputmask());
-function withMask(mask, options) {
+// src/api/useMaskInput.ts
+function useMaskInput(props) {
+  const { mask, register, options } = props;
+  const ref = useRef(null);
+  const maskInput = useMemo(() => createMaskInstance(mask, options), [mask, options]);
+  if (isServer_default) {
+    return () => {
+    };
+  }
+  useEffect(() => {
+    if (isServer_default || !ref.current) return;
+    if (!isHTMLElement(ref.current)) {
+      return;
+    }
+    const inputElement = findInputElement(ref.current);
+    if (inputElement && isHTMLElement(inputElement)) {
+      maskInput.mask(inputElement);
+    }
+    if (register && isHTMLElement(ref.current)) {
+      register(ref.current);
+    }
+  }, [mask, register, options, maskInput, ref]);
   return (input) => {
-    if (isServer_default || mask === null || !input) return;
-    const maskInput = interopDefaultSync(import_inputmask2.default)(getMaskOptions(mask, options));
-    maskInput.mask(input);
+    if (!input) {
+      ref.current = null;
+      return;
+    }
+    ref.current = resolveInputRef(input);
   };
 }
 
-// src/useHookFormMask.ts
-var import_inputmask3 = __toESM(require_inputmask());
+// src/api/useHookFormMask.ts
 function useHookFormMask(registerFn) {
   return (fieldName, mask, options) => {
     if (!registerFn) throw new Error("registerFn is required");
-    const { ref, ...restRegister } = registerFn(fieldName, options);
-    const maskInput = interopDefaultSync(import_inputmask3.default)(getMaskOptions(mask, options));
-    const newRef = flow((_ref) => {
-      if (_ref) {
-        const { nodeName } = _ref;
-        if (nodeName !== "INPUT") {
-          maskInput.mask(_ref.querySelector("input"));
-        } else {
-          maskInput.mask(_ref);
-        }
-      }
+    const registerReturn = registerFn(fieldName, options);
+    const { ref } = registerReturn;
+    const applyMaskToRef = (_ref) => {
+      if (_ref) applyMaskToElement(_ref, mask, options);
       return _ref;
-    }, ref);
-    return {
-      ...restRegister,
-      ref: newRef
     };
+    const refWithMask = ref ? flow(applyMaskToRef, ref) : applyMaskToRef;
+    const result = {
+      ...registerReturn,
+      ref: refWithMask
+    };
+    Object.defineProperty(result, "prevRef", {
+      value: ref,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    });
+    return result;
   };
 }
 
-// src/useMaskInput.ts
-var import_inputmask4 = __toESM(require_inputmask());
-function useInputMask(props) {
-  const { mask, register, options } = props;
-  const ref = useRef(null);
-  if (isServer_default) return ref;
-  useEffect(() => {
-    if (!isServer_default && ref.current) {
-      if (!ref.current) return;
-      const maskInput = interopDefaultSync(import_inputmask4.default)(getMaskOptions(mask, options));
-      maskInput.mask(ref.current);
-      if (register && ref.current) {
-        register(ref.current);
-      }
-    }
-  }, [mask, register, options]);
-  return ref;
+// src/api/withMask.ts
+var import_inputmask2 = __toESM(require_inputmask());
+function withMask(mask, options) {
+  return (input) => {
+    if (isServer_default || mask === null || !input) return;
+    const maskInput = interopDefaultSync(import_inputmask2.default)(getMaskOptions(mask, options));
+    maskInput.mask(input);
+  };
+}
+
+// src/api/withHookFormMask.ts
+function withHookFormMask(register, mask, options) {
+  const { ref } = register;
+  const applyMaskToRef = (_ref) => {
+    if (_ref) applyMaskToElement(_ref, mask, options);
+    return _ref;
+  };
+  const refWithMask = ref === null ? null : ref ? flow(applyMaskToRef, ref) : null;
+  const result = {
+    ...register,
+    ref: refWithMask
+  };
+  Object.defineProperty(result, "prevRef", {
+    value: ref,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  });
+  return result;
 }
 /*! Bundled license information:
 
@@ -3889,6 +3962,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 { useHookFormMask, useInputMask as useMaskInput, withHookFormMask, withMask };
+export { useHookFormMask, useMaskInput, withHookFormMask, withMask };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map