use-mask-input 3.10.1 → 3.10.3

package/package.json

@@ -1,27 +1,38 @@
 {
   "name": "use-mask-input",
-  "version": "3.10.1",
+  "version": "3.10.3",
   "private": false,
   "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
+  "license": "MIT",
   "author": "Eduardo Borges<euduardoborges@gmail.com>",
   "type": "module",
   "repository": {
     "url": "https://github.com/eduardoborges/use-mask-input"
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "source": "./src/index.tsx",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./antd": {
-      "types": "./dist/antd.d.ts",
-      "import": "./dist/antd.js",
-      "require": "./dist/antd.cjs"
+      "import": {
+        "types": "./dist/antd.d.mts",
+        "default": "./dist/antd.mjs"
+      },
+      "require": {
+        "types": "./dist/antd.d.cts",
+        "default": "./dist/antd.cjs"
+      }
     }
   },
   "engines": {
@@ -31,33 +42,42 @@
   "files": [
     "dist",
     "src",
+    "!src/**/*.spec.*",
+    "!dist/*-stats.json",
     "README.md",
     "CHANGELOG.md"
   ],
   "peerDependencies": {
+    "antd": ">=5",
     "react": ">=17",
     "react-dom": ">=17"
   },
+  "peerDependenciesMeta": {
+    "antd": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@codecov/rollup-plugin": "^2.0.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/inputmask": "5.0.7",
-    "@types/node": "^25.5.0",
-    "@types/react": ">=19",
-    "@types/react-dom": ">=19",
-    "@vitest/coverage-v8": "4.1.1",
-    "antd": "^6.3.4",
-    "oxlint": "1.57.0",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "4.1.7",
+    "antd": "^6.4.4",
     "inputmask": "5.0.10-beta.61",
-    "jsdom": "^28.1.0",
-    "react-hook-form": "7.72.0",
-    "tsup": "8.5.1",
-    "typescript": "5.9",
-    "vitest": "4.1.1"
+    "jsdom": "^29.1.1",
+    "oxlint": "1.66.0",
+    "react-hook-form": "7.75.0",
+    "tsdown": "^0.22.2",
+    "typescript": "~6.0.3",
+    "vitest": "4.1.7"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "lint": "oxlint ./src",
     "test": "vitest --dir ./src --run --coverage",
     "type-check": "tsc --noEmit",

package/src/@types/inputmask.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Inputmask attaches its instance to the masked DOM element under the
+ * `inputmask` property. The upstream `@types/inputmask` package only augments
+ * the global `HTMLElement` from inside a module-scoped `declare global`, so the
+ * augmentation is not picked up unless that module is imported by its bare name
+ * (this project imports `inputmask/lib/inputmask.js` instead).
+ *
+ * Declaring it here, in an ambient script file included by tsconfig, makes the
+ * property visible on the input elements we mask.
+ */
+
+interface InputmaskInstance {
+  unmaskedvalue?: () => string;
+}
+
+interface HTMLInputElement {
+  inputmask?: InputmaskInstance;
+}
+
+interface HTMLTextAreaElement {
+  inputmask?: InputmaskInstance;
+}

package/src/types/index.ts

@@ -1,4 +1,4 @@
-import type { RefCallback } from 'react';
+import type { ChangeEvent, FocusEvent, RefCallback } from 'react';
 import type {
   FieldValues, Path,
   UseFormRegisterReturn,
@@ -45,7 +45,14 @@ export interface UseHookFormMaskReturn<
 
 export interface TanStackFormInputProps {
   name?: string;
+  value?: string | number | readonly string[];
   ref?: RefCallback<HTMLElement | null>;
+  // Method shorthand (not an arrow-typed property) so the parameter is checked
+  // bivariantly: handlers explicitly typed for just HTMLInputElement (e.g. using
+  // `event.target.files`) or just HTMLTextAreaElement (e.g. `event.target.cols`)
+  // both remain assignable, alongside the common inline, unannotated handler.
+  onChange?(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void;
+  onBlur?(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void;
   [key: string]: unknown;
 }
 

package/src/utils/maskHelpers.ts

@@ -2,6 +2,9 @@ import { findInputElement, resolveInputRef } from '../core/elementResolver';
 
 import type { Input, Mask, UnmaskedValueApi } from '../types';
 
+// Kept self-contained (not relying on the ambient src/@types augmentation) so
+// this module type-checks when consumers compile the package source directly,
+// e.g. the example apps that alias `use-mask-input` to `src` and build with `tsc`.
 type MaskedElement = (HTMLInputElement | HTMLTextAreaElement) & {
   inputmask?: { unmaskedvalue?: () => string };
 };

package/dist/antd.js

@@ -1,63 +0,0 @@
-import { makeMaskCacheKey, setPrevRef, getUnmaskedValue, resolveInputRef, withMask, isServer_default, setUnmaskedValue, applyMaskToElement } from './chunk-XSTQDKDU.js';
-import { useMemo, useRef, useCallback, useEffect } from 'react';
-
-function useHookFormMaskAntd(registerFn) {
-  return useMemo(() => {
-    const refCache = /* @__PURE__ */ new Map();
-    return (fieldName, mask, options) => {
-      if (!registerFn) throw new Error("registerFn is required");
-      const registerReturn = registerFn(fieldName, options);
-      const { ref } = registerReturn;
-      const cacheKey = makeMaskCacheKey(fieldName, mask);
-      if (!refCache.has(cacheKey)) {
-        const refWithMask = (inputRef) => {
-          const element = inputRef ? resolveInputRef(inputRef.input) : null;
-          if (element) applyMaskToElement(element, mask, options);
-          if (ref) ref(element);
-        };
-        refCache.set(cacheKey, refWithMask);
-      }
-      const result = {
-        ...registerReturn,
-        ref: refCache.get(cacheKey)
-      };
-      setPrevRef(result, ref);
-      return result;
-    };
-  }, [registerFn]);
-}
-function useMaskInputAntd(props) {
-  const { mask, register, options } = props;
-  const ref = useRef(null);
-  const maskRef = useRef(mask);
-  const optionsRef = useRef(options);
-  const maskedElementRef = useRef(null);
-  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);
-  maskRef.current = mask;
-  optionsRef.current = options;
-  const refCallback = useCallback((input) => {
-    if (!input) {
-      ref.current = null;
-      return;
-    }
-    ref.current = resolveInputRef(input.input);
-    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;
-    register(ref.current);
-  }, [register]);
-  if (isServer_default) {
-    const noop = (() => {
-    });
-    return setUnmaskedValue(noop, () => "");
-  }
-  return setUnmaskedValue(refCallback, unmaskedValue);
-}
-
-export { useHookFormMaskAntd, useMaskInputAntd };
-//# sourceMappingURL=antd.js.map
-//# sourceMappingURL=antd.js.map

package/dist/antd.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":[],"mappings":"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","file":"antd.js","sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { InputRef } from 'antd';\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n  UseHookFormMaskReturn<T>,\n  'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n  //\n  return useMemo(() => {\n    const refCache = new Map<string, RefCallback<InputRef | null>>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskAntdReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      if (!refCache.has(cacheKey)) {\n        const refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n          const element = inputRef ? resolveInputRef(inputRef.input) : null;\n          if (element) applyMaskToElement(element, mask, options as Options);\n          if (ref) ref(element);\n        };\n        refCache.set(cacheKey, refWithMask);\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: refCache.get(cacheKey),\n      } as UseHookFormMaskAntdReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } from '../core';\nimport isServer from '../utils/isServer';\nimport { getUnmaskedValue, setUnmaskedValue } from '../utils';\n\nimport type { InputRef } from 'antd';\n\nimport type { Mask, Options, UnmaskedValueApi } from '../types';\n\ntype UseMaskInputAntdReturn = ((input: InputRef | null) => void) & UnmaskedValueApi;\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): UseMaskInputAntdReturn {\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  const unmaskedValue = useCallback(() => getUnmaskedValue(ref.current), []);\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    const noop = (() => {\n      // server doesn't have dom, so just do nothing\n    }) as unknown as UseMaskInputAntdReturn;\n\n    return setUnmaskedValue(noop, () => '');\n  }\n\n  return setUnmaskedValue(refCallback as UseMaskInputAntdReturn, unmaskedValue);\n}\n"]}