use-mask-input 3.4.2 → 3.5.1

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "use-mask-input",
-  "version": "3.4.2",
+  "version": "3.5.1",
   "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
   "author": "Eduardo Borges<euduardoborges@gmail.com>",
   "type": "module",
   "repository": "https://github.com/eduardoborges/use-mask-input",
-  "source": "./src/index.tsx",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/index.cjs",
-    "types": "./dist/index.d.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
   },
   "engines": {
     "node": ">=16",
@@ -32,44 +30,40 @@
     "CHANGELOG.md"
   ],
   "peerDependencies": {
-    "react": ">=16.4 || 17 || 18 || 20",
-    "react-dom": ">=16.4 || 17 || 18 || 20"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "devDependencies": {
-    "inputmask": "5.0.10-beta.11",
-    "@rollup/plugin-commonjs": "28.0.1",
-    "@rollup/plugin-node-resolve": "15.3.0",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.35.0",
     "@semantic-release/changelog": "6.0.3",
-    "@semantic-release/commit-analyzer": "13.0.0",
+    "@semantic-release/commit-analyzer": "13.0.1",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "11.0.1",
-    "@semantic-release/npm": "12.0.1",
-    "@semantic-release/release-notes-generator": "14.0.1",
+    "@semantic-release/github": "11.0.5",
+    "@semantic-release/npm": "12.0.2",
+    "@semantic-release/release-notes-generator": "14.0.3",
+    "@stylistic/eslint-plugin": "3.1.0",
     "@types/inputmask": "5.0.7",
     "@types/node": "22",
-    "@types/react": ">=16.4 || 17 || 18",
-    "@types/react-dom": ">=16.4 || 17 || 18",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
-    "@vitest/coverage-v8": "2.1.5",
-    "esbuild": "0.24.0",
-    "eslint": "8.51.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "17.1.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "patch-package": "^8.0.0",
-    "react-hook-form": "7.53.2",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
+    "@vitest/coverage-v8": "3.2.4",
+    "eslint": "^9.35.0",
+    "eslint-config-airbnb-extended": "^2.2.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "inputmask": "5.0.10-beta.52",
+    "react-hook-form": "7.62.0",
     "read-pkg": "9.0.1",
-    "rollup": "4.27.3",
-    "rollup-plugin-dts": "6.1.1",
-    "rollup-plugin-esbuild": "6.1.1",
-    "semantic-release": "24.2.0",
-    "simple-git-hooks": "2.11.1",
+    "semantic-release": "24.2.7",
+    "simple-git-hooks": "2.13.1",
+    "tsup": "8.5.0",
     "typescript": "5.1",
-    "vitest": "2.1.5"
+    "typescript-eslint": "^8.42.0",
+    "vitest": "3.2.4"
   },
   "simple-git-hooks": {
     "pre-commit": "npm run lint && npm run test && npm run build"

package/src/index.tsx

@@ -1,4 +1,7 @@
-export * from './withHookFormMask';
-export * from './withMask';
-export * from './useHookFormMask';
-export * from './useMaskInput';
+export { default as withHookFormMask } from './withHookFormMask';
+export { default as withMask } from './withMask';
+export { default as useHookFormMask } from './useHookFormMask';
+export { default as useMaskInput } from './useMaskInput';
+export type {
+  Mask, Options, UseFormRegister, UseFormRegisterReturn,
+} from './types';

package/src/inputmask.types.ts

@@ -1,10 +1,18 @@
-/* eslint-disable max-len */
-
+/* eslint-disable @stylistic/max-len */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 type Range = { start: string; end: string } | [string, string];
 
 type PositionCaretOnClick = 'none' | 'lvp' | 'radixFocus' | 'select' | 'ignore';
 
-type InputMode = 'verbatim' | 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+type InputMode = 'verbatim'
+  | 'none'
+  | 'text'
+  | 'decimal'
+  | 'numeric'
+  | 'tel'
+  | 'search'
+  | 'email'
+  | 'url';
 
 type Casing = 'upper' | 'lower' | 'title';
 
@@ -19,8 +27,9 @@ type DefinitionValidator = (
 
 export interface Options {
   /**
-       * Change the mask placeholder. Instead of "_", you can change the unfilled characters mask as you like, simply
-       * by adding the placeholder option. For example, placeholder: " " will change the default autofill with empty
+       * Change the mask placeholder. Instead of "_", you can change the unfilled
+       * characters mask as you like, simply by adding the placeholder option.
+       * For example, placeholder: " " will change the default autofill with empty
        * values.
        *
        * @default "_"
@@ -479,7 +488,7 @@ export interface Options {
        *
        * @default {k: "000", m: "000000"}
        */
-  shortcuts?: { [shortcut: string]: string } | null | undefined;
+  shortcuts?: Record<string, string> | null | undefined;
   /**
        * Format used to input a date. This option is only effective for the datetime alias.
        *
@@ -533,9 +542,7 @@ export interface Options {
        * Add new definitions to this inputmask.
        */
   definitions?:
-  | {
-    [key: string]: Definition;
-  }
+  | Record<string, Definition>
   | undefined;
   /**
        * Enable/disable prefilling of the year.

package/src/types.ts

@@ -1,7 +1,23 @@
-import { Options as MaskOptions } from './inputmask.types';
+import type { Options as MaskOptions } from './inputmask.types';
 
 export type { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
 
-export type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | (string & {}) | (string[] & {}) | null;
+export type Mask = 'datetime'
+| 'email'
+| 'numeric'
+| 'currency'
+| 'decimal'
+| 'integer'
+| 'percentage'
+| 'url'
+| 'ip'
+| 'mac'
+| 'ssn'
+| 'brl-currency'
+| 'cpf'
+| 'cnpj'
+| (string & {})
+| (string[] & {})
+| null;
 export type Options = MaskOptions;
-export type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement | HTMLInputElement | null;
+export type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement | null;

package/src/useHookFormMask.ts

@@ -1,22 +1,30 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable import-x/no-extraneous-dependencies */
 import inputmask from 'inputmask';
-import { RefCallback } from 'react';
-import {
+
+import { flow, getMaskOptions } from './utils';
+import interopDefaultSync from './utils/moduleInterop';
+
+import type { RefCallback } from 'react';
+import type {
   FieldValues, Path,
   RegisterOptions,
   UseFormRegister,
+  UseFormRegisterReturn,
 } from 'react-hook-form';
-import { Mask, Options } from './types';
-import { flow, getMaskOptions } from './utils';
 
-export function useHookFormMask<
+import type { Mask, Options } from './types';
+
+export default function useHookFormMask<
   T extends FieldValues, D extends RegisterOptions,
 >(registerFn: UseFormRegister<T>) {
-  return (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => {
+  return (fieldName: Path<T>, mask: Mask, options?: (
+    D & Options) | Options | D): UseFormRegisterReturn<Path<T>> => {
     if (!registerFn) throw new Error('registerFn is required');
 
     const { ref, ...restRegister } = registerFn(fieldName, options as any);
 
-    const maskInput = inputmask(getMaskOptions(mask, options as any));
+    const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options as any));
 
     const newRef = flow((_ref: HTMLElement) => {
       if (_ref) {
@@ -33,7 +41,7 @@ export function useHookFormMask<
 
     return {
       ...restRegister,
-      ref: newRef as RefCallback<HTMLElement>,
+      ref: newRef,
     };
   };
 }

package/src/useMaskInput.ts

@@ -1,24 +1,33 @@
+/* eslint-disable import-x/no-extraneous-dependencies */
 import { useEffect, useRef } from 'react';
+
 import inputmask from 'inputmask';
-import { getMaskOptions, isServer } from './utils';
-import { Mask, Options } from './types';
+
+import { getMaskOptions } from './utils';
+import isServer from './utils/isServer';
+import interopDefaultSync from './utils/moduleInterop';
+
+import type { RefObject } from 'react';
+
+import type { Mask, Options } from './types';
 
 interface UseInputMaskOptions {
-  mask: Mask,
-  register?(element: HTMLElement): void
-  options?: Options
+  mask: Mask;
+  register?: (element: HTMLElement) => void;
+  options?: Options;
 }
 
-export const useInputMask = (props: UseInputMaskOptions) => {
+export default function useInputMask(props: UseInputMaskOptions): RefObject<HTMLInputElement> {
   const { mask, register, options } = props;
   const ref = useRef<HTMLInputElement>(null);
   if (isServer) return ref;
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
-    if (!isServer) {
+    if (!isServer && ref.current) {
       if (!ref.current) return;
 
-      const maskInput = inputmask(getMaskOptions(mask, options));
+      const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options));
 
       maskInput.mask(ref.current);
 
@@ -29,4 +38,4 @@ export const useInputMask = (props: UseInputMaskOptions) => {
   }, [mask, register, options]);
 
   return ref;
-};
+}

package/src/utils/flow.spec.ts

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 import {
-  describe, it, expect, MockedFunction,
+  describe, expect, it,
 } from 'vitest';
 
-import { flow } from './flow';
+import flow from './flow';
 
 describe('flow', () => {
   it('returns a function', () => {
@@ -16,9 +17,9 @@ describe('flow', () => {
   });
 
   it('throws an error if any argument is not a function', () => {
-    // @ts-ignore
+    // @ts-expect-error - null is not a function
     expect(() => flow(null)).toThrow(TypeError);
-    // @ts-ignore
+    // @ts-expect-error - null is not a function
     expect(() => flow(() => {}, null)).toThrow(TypeError);
   });
 
@@ -29,10 +30,10 @@ describe('flow', () => {
 
   it.todo('binds the functions to the correct context', () => {
     const context = { value: 42 };
-    const fn1 = function (this: any) {
+    const fn1 = function (this: { value: number }) {
       return this.value;
     };
-    const fn2 = function (this: any, n: number) {
+    const fn2 = function (this: { value: number }, n: number) {
       return this.value + n;
     };
     const fn = flow(fn1, fn2).bind(context);
@@ -47,7 +48,7 @@ describe('flow', () => {
 
   it('should throw an error if any argument is not a function', () => {
     expect(() => {
-      flow(1 as any, () => {});
+      flow(1 as unknown as Function, () => {});
     }).toThrow(TypeError);
   });
 

package/src/utils/flow.ts

@@ -1,15 +1,19 @@
-export function flow(...funcs: Array<Function>) : Function {
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+export default function flow(...funcs: Function[]): Function {
   const { length } = funcs;
   let index = length;
-  while (index--) {
+  while (index > 0) {
+    index -= 1;
     if (typeof funcs[index] !== 'function') {
       throw new TypeError('Expected a function');
     }
   }
-  return (...args: Array<Function>) => {
+  return (...args: Function[]) => {
     let i = 0;
     let result = length ? funcs[i].apply(this, args) : args[0];
-    while (++i < length) {
+    while (i + 1 < length) {
+      i += 1;
       result = funcs[i].call(this, result);
     }
     return result;

package/src/utils/getMaskOptions.spec.ts

@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest';
-import { getMaskOptions } from './getMaskOptions';
+import { describe, expect, it } from 'vitest';
+
+import getMaskOptions from './getMaskOptions';
 
 describe('getMaskOptions', () => {
   it('returns default options when no mask is provided', () => {

package/src/utils/getMaskOptions.ts

@@ -1,6 +1,6 @@
-import { Mask, Options } from '../types';
+import type { Mask, Options } from '../types';
 
-export const getMaskOptions = (mask?: Mask, _options?: Options): Options => {
+export default function getMaskOptions(mask?: Mask, _options?: Options): Options {
   const options: Options = {
     jitMasking: false,
     ..._options,
@@ -91,4 +91,4 @@ export const getMaskOptions = (mask?: Mask, _options?: Options): Options => {
     mask,
     ...options,
   };
-};
+}

package/src/utils/index.ts

@@ -1,3 +1,3 @@
-export * from './flow';
-export * from './isServer';
-export * from './getMaskOptions';
+export { default as flow } from './flow';
+export { default as isServer } from './isServer';
+export { default as getMaskOptions } from './getMaskOptions';

package/src/utils/isServer.ts

@@ -1,5 +1,6 @@
-export const isServer = !(
+const isServer = !(
   typeof window !== 'undefined'
-  && window.document
-  && window.document.createElement
+  && window.document?.createElement
 );
+
+export default isServer;

package/src/utils/moduleInterop.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Synchronously resolve the default value of a module.
+ */
+export default function interopDefaultSync<T = any>(module: T): T {
+  if (typeof module === 'object' && module !== null) {
+    if ('default' in module) {
+      return module.default as T;
+    }
+    return module;
+  }
+  return module;
+}

package/src/withHookFormMask.ts

@@ -1,20 +1,25 @@
+/* eslint-disable import-x/no-extraneous-dependencies */
 import inputmask from 'inputmask';
-import { RefCallback } from 'react';
+
 import { flow, getMaskOptions } from './utils';
-import { Mask, Options, UseFormRegisterReturn } from './types';
+import interopDefaultSync from './utils/moduleInterop';
+
+import type { RefCallback } from 'react';
+
+import type { Mask, Options, UseFormRegisterReturn } from './types';
 
-export const withHookFormMask = (
+export default function withHookFormMask(
   register: UseFormRegisterReturn,
   mask: Mask,
   options?: Options,
-): UseFormRegisterReturn => {
+): UseFormRegisterReturn {
   //
   let newRef;
 
   if (register) {
     const { ref } = register;
 
-    const maskInput = inputmask(getMaskOptions(mask, options));
+    const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options));
 
     newRef = flow((_ref: HTMLElement) => {
       if (_ref) maskInput.mask(_ref);
@@ -26,4 +31,4 @@ export const withHookFormMask = (
     ...register,
     ref: newRef as RefCallback<HTMLElement>,
   };
-};
+}

package/src/withMask.ts

@@ -1,15 +1,24 @@
-import Inputmask from 'inputmask';
-import { getMaskOptions, isServer } from './utils';
-import { Input, Mask, Options } from './types';
+/* eslint-disable import-x/no-extraneous-dependencies */
+import inputmask from 'inputmask';
 
-export const withMask = (mask: Mask, options?: Options) => (input: Input) => {
+import { getMaskOptions } from './utils';
+import isServer from './utils/isServer';
+import interopDefaultSync from './utils/moduleInterop';
+
+import type { Input, Mask, Options } from './types';
+
+export default function withMask(mask: Mask, options?: Options) {
+  return (input: Input): Input => {
   //
-  if (isServer) return;
-  if (mask === null) return;
+    if (isServer) return input;
+    if (mask === null) return input;
+
+    const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options));
 
-  const maskInput = Inputmask(getMaskOptions(mask, options));
+    if (input) {
+      maskInput.mask(input);
+    }
 
-  if (input) {
-    maskInput.mask(input);
-  }
-};
+    return input;
+  };
+}