use-mask-input 3.6.0 → 3.6.1

package/src/core/maskConfig.spec.ts

@@ -0,0 +1,183 @@
+import { describe, expect, it } from 'vitest';
+
+import { getMaskOptions } from './maskConfig';
+
+describe('maskConfig', () => {
+  describe('getMaskOptions', () => {
+    it('returns default options when no mask is provided', () => {
+      const options = getMaskOptions();
+      expect(options).toEqual({
+        jitMasking: false,
+      });
+    });
+
+    it('merges custom options with defaults', () => {
+      const options = getMaskOptions(undefined, { placeholder: '_' });
+      expect(options).toEqual({
+        jitMasking: false,
+        placeholder: '_',
+      });
+    });
+
+    it('returns options for datetime mask', () => {
+      const options = getMaskOptions('datetime');
+      expect(options).toEqual({
+        alias: 'datetime',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for email mask', () => {
+      const options = getMaskOptions('email');
+      expect(options).toEqual({
+        alias: 'email',
+        placeholder: '',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for numeric mask', () => {
+      const options = getMaskOptions('numeric');
+      expect(options).toEqual({
+        alias: 'numeric',
+        placeholder: '',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for currency mask', () => {
+      const options = getMaskOptions('currency');
+      expect(options).toEqual({
+        alias: 'currency',
+        prefix: '$ ',
+        placeholder: '',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for decimal mask', () => {
+      const options = getMaskOptions('decimal');
+      expect(options).toEqual({
+        alias: 'decimal',
+        placeholder: '',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for integer mask', () => {
+      const options = getMaskOptions('integer');
+      expect(options).toEqual({
+        alias: 'integer',
+        placeholder: '',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for percentage mask', () => {
+      const options = getMaskOptions('percentage');
+      expect(options).toEqual({
+        alias: 'percentage',
+        placeholder: ' %',
+        suffix: ' %',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for url mask', () => {
+      const options = getMaskOptions('url');
+      expect(options).toEqual({
+        alias: 'url',
+        placeholder: 'https://',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for ip mask', () => {
+      const options = getMaskOptions('ip');
+      expect(options).toEqual({
+        alias: 'ip',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for mac mask', () => {
+      const options = getMaskOptions('mac');
+      expect(options).toEqual({
+        alias: 'mac',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for ssn mask', () => {
+      const options = getMaskOptions('ssn');
+      expect(options).toEqual({
+        alias: 'ssn',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for brl-currency mask', () => {
+      const options = getMaskOptions('brl-currency');
+      expect(options).toEqual({
+        alias: 'currency',
+        prefix: 'R$ ',
+        placeholder: '0,00',
+        displayFormat: 'currency',
+        radixPoint: ',',
+        autoUnmask: true,
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for cpf mask', () => {
+      const options = getMaskOptions('cpf');
+      expect(options).toEqual({
+        mask: '999.999.999-99',
+        placeholder: '___.___.___-__',
+        jitMasking: false,
+      });
+    });
+
+    it('returns options for cnpj mask', () => {
+      const options = getMaskOptions('cnpj');
+      expect(options).toEqual({
+        mask: ['A|9{2}.A|9{3}.A|9{3}/A|9{4}-9{2}'],
+        placeholder: '__.___.___/____-__',
+        jitMasking: false,
+      });
+    });
+
+    it('returns custom mask string', () => {
+      const options = getMaskOptions('999-999');
+      expect(options).toEqual({
+        mask: '999-999',
+        jitMasking: false,
+      });
+    });
+
+    it('returns custom mask array', () => {
+      const mask = ['999-999', '9999-9999'];
+      const options = getMaskOptions(mask);
+      expect(options).toEqual({
+        mask,
+        jitMasking: false,
+      });
+    });
+
+    it('merges custom options with alias options', () => {
+      const options = getMaskOptions('cpf', { placeholder: '___' });
+      expect(options).toEqual({
+        mask: '999.999.999-99',
+        placeholder: '___',
+        jitMasking: false,
+      });
+    });
+
+    it('handles null mask', () => {
+      const options = getMaskOptions(null);
+      expect(options).toEqual({
+        jitMasking: false,
+      });
+    });
+  });
+});

package/src/{utils/getMaskOptions.ts → core/maskConfig.ts}

@@ -1,13 +1,23 @@
+/* eslint-disable import-x/prefer-default-export */
 import type { Mask, Options } from '../types';
+import type { Options as InputmaskOptions } from '../types/inputmask.types';
 
-export default function getMaskOptions(mask?: Mask, _options?: Options): Options {
+/**
+ * Converts mask and options into Inputmask configuration.
+ * Has some ready aliases to make life easier.
+ *
+ * @param mask - The mask pattern or alias
+ * @param _options - Optional configuration options
+ * @returns Inputmask configuration object
+ */
+export function getMaskOptions(mask?: Mask, _options?: Options): Options {
   const options: Options = {
     jitMasking: false,
     ..._options,
   };
   if (!mask) return options;
 
-  const masks: Record<string, Inputmask.Options> = {
+  const masks: Record<string, InputmaskOptions> = {
     datetime: {
       alias: 'datetime',
       ...options,
@@ -63,7 +73,6 @@ export default function getMaskOptions(mask?: Mask, _options?: Options): Options
     },
 
     // alias for brazilians <3
-    // ty <3
     'brl-currency': {
       alias: 'currency',
       prefix: 'R$ ',

package/src/core/maskEngine.spec.ts

@@ -0,0 +1,108 @@
+import inputmask from 'inputmask';
+import {
+  beforeEach, describe, expect, it, vi,
+} from 'vitest';
+
+import { applyMaskToElement, createMaskInstance } from './maskEngine';
+
+vi.mock('inputmask', () => ({
+  default: vi.fn((options) => ({
+    mask: vi.fn(),
+    options,
+  })),
+}));
+
+describe('maskEngine', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('createMaskInstance', () => {
+    it('creates mask instance with string mask', () => {
+      const instance = createMaskInstance('999-999');
+      expect(inputmask).toHaveBeenCalled();
+      expect(instance).toBeDefined();
+    });
+
+    it('creates mask instance with alias', () => {
+      const instance = createMaskInstance('cpf');
+      expect(inputmask).toHaveBeenCalled();
+      expect(instance).toBeDefined();
+    });
+
+    it('creates mask instance with options', () => {
+      const instance = createMaskInstance('999-999', { placeholder: '_' });
+      expect(inputmask).toHaveBeenCalled();
+      expect(instance).toBeDefined();
+    });
+
+    it('creates mask instance with array mask', () => {
+      const instance = createMaskInstance(['999-999', '9999-9999']);
+      expect(inputmask).toHaveBeenCalled();
+      expect(instance).toBeDefined();
+    });
+  });
+
+  describe('applyMaskToElement', () => {
+    it('applies mask to input element', () => {
+      const input = document.createElement('input');
+      const maskFn = vi.fn();
+      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+
+      applyMaskToElement(input, '999-999');
+
+      expect(maskFn).toHaveBeenCalledWith(input);
+    });
+
+    it('applies mask to textarea element', () => {
+      const textarea = document.createElement('textarea');
+      const maskFn = vi.fn();
+      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+
+      applyMaskToElement(textarea, '999-999');
+
+      expect(maskFn).toHaveBeenCalledWith(textarea);
+    });
+
+    it('finds and applies mask to input inside wrapper', () => {
+      const wrapper = document.createElement('div');
+      const input = document.createElement('input');
+      wrapper.appendChild(input);
+      const maskFn = vi.fn();
+      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+
+      applyMaskToElement(wrapper, '999-999');
+
+      expect(maskFn).toHaveBeenCalledWith(input);
+    });
+
+    it('applies mask to wrapper if no input found inside', () => {
+      const wrapper = document.createElement('div');
+      const maskFn = vi.fn();
+      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+
+      applyMaskToElement(wrapper, '999-999');
+
+      expect(maskFn).toHaveBeenCalledWith(wrapper);
+    });
+
+    it('does nothing if element is null', () => {
+      const maskFn = vi.fn();
+      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+
+      applyMaskToElement(null as unknown as HTMLElement, '999-999');
+
+      expect(maskFn).not.toHaveBeenCalled();
+    });
+
+    it('applies mask with custom options', () => {
+      const input = document.createElement('input');
+      const maskFn = vi.fn();
+      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+
+      applyMaskToElement(input, '999-999', { placeholder: '_' });
+
+      expect(maskFn).toHaveBeenCalledWith(input);
+    });
+  });
+});

package/src/core/maskEngine.ts

@@ -0,0 +1,47 @@
+/* eslint-disable import-x/no-extraneous-dependencies */
+import inputmask from 'inputmask';
+
+import { getMaskOptions } from './maskConfig';
+import { moduleInterop } from '../utils';
+
+import type { Mask, Options } from '../types';
+
+/**
+ * Creates a mask instance with the given mask and options.
+ * Like a factory, but simpler.
+ *
+ * @param mask - The mask pattern
+ * @param options - Optional configuration options
+ * @returns A mask instance
+ */
+export function createMaskInstance(mask: Mask, options?: Options): Inputmask.Instance {
+  const inputmaskInstance = moduleInterop(inputmask);
+  return inputmaskInstance(getMaskOptions(mask, options));
+}
+
+/**
+ * Applies a mask to an input element.
+ * If it's not a direct input, searches inside.
+ *
+ * @param element - The element to apply mask to
+ * @param mask - The mask pattern
+ * @param options - Optional configuration options
+ */
+export function applyMaskToElement(
+  element: HTMLElement | null,
+  mask: Mask,
+  options?: Options,
+): void {
+  if (!element) return;
+
+  const maskInstance = createMaskInstance(mask, options);
+  const inputElement = element.nodeName === 'INPUT'
+    ? element
+    : (element.querySelector('input') as HTMLElement);
+
+  if (inputElement) {
+    maskInstance.mask(inputElement);
+  } else {
+    maskInstance.mask(element);
+  }
+}

package/src/index.tsx

@@ -1,7 +1,14 @@
-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 {
+  useHookFormMask,
+  useMaskInput,
+  withHookFormMask,
+  withMask,
+} from './api';
+
 export type {
-  Mask, Options, UseFormRegister, UseFormRegisterReturn,
+  Input,
+  Mask,
+  Options,
+  UseFormRegister,
+  UseFormRegisterReturn,
 } from './types';

package/src/{types.ts → types/index.ts}

@@ -1,3 +1,9 @@
+import type { RefCallback } from 'react';
+import type {
+  FieldValues, Path,
+  UseFormRegisterReturn,
+} from 'react-hook-form';
+
 import type { Options as MaskOptions } from './inputmask.types';
 
 export type { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
@@ -21,3 +27,10 @@ export type Mask = 'datetime'
   | null;
 export type Options = MaskOptions;
 export type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
+
+export interface UseHookFormMaskReturn<
+  T extends FieldValues,
+> extends UseFormRegisterReturn<Path<T>> {
+  ref: RefCallback<HTMLElement | null>;
+  prevRef: RefCallback<HTMLElement | null>;
+}

package/src/utils/flow.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 import {
   describe, expect, it,
 } from 'vitest';
@@ -11,50 +10,48 @@ describe('flow', () => {
     expect(typeof result).toBe('function');
   });
 
-  it('returns undefined value if no return funcion provided', () => {
-    const result = flow(() => {})(42);
-    expect(result).toBe(undefined);
+  it('returns undefined value if no return function provided', () => {
+    const result = flow(() => { });
+    expect(result(42)).toBe(undefined);
   });
 
   it('throws an error if any argument is not a function', () => {
     // @ts-expect-error - null is not a function
     expect(() => flow(null)).toThrow(TypeError);
     // @ts-expect-error - null is not a function
-    expect(() => flow(() => {}, null)).toThrow(TypeError);
+    expect(() => flow(() => { }, null)).toThrow(TypeError);
+    expect(() => {
+      flow(1 as unknown as () => void, () => { });
+    }).toThrow(TypeError);
   });
 
   it('returns the original value if no functions are provided', () => {
-    const result = flow()(42);
-    expect(result).toBe(42);
+    const result = flow();
+    expect(result(42)).toBe(42);
+    expect(result('test')).toBe('test');
   });
 
-  it.todo('binds the functions to the correct context', () => {
-    const context = { value: 42 };
-    const fn1 = function (this: { value: number }) {
-      return this.value;
-    };
-    const fn2 = function (this: { value: number }, n: number) {
-      return this.value + n;
-    };
-    const fn = flow(fn1, fn2).bind(context);
-    const result = fn(10);
-    expect(result).toBe(52);
-  });
+  it('composes functions correctly', () => {
+    const addOne = (x: number) => x + 1;
+    const multiplyByTwo = (x: number) => x * 2;
+    const subtractThree = (x: number) => x - 3;
 
-  it('should return a function', () => {
-    const result = flow();
-    expect(typeof result).toBe('function');
+    const composed = flow(addOne, multiplyByTwo, subtractThree);
+    expect(composed(5)).toBe(9); // (5 + 1) * 2 - 3 = 9
   });
 
-  it('should throw an error if any argument is not a function', () => {
-    expect(() => {
-      flow(1 as unknown as Function, () => {});
-    }).toThrow(TypeError);
+  it('works with single function', () => {
+    const double = (x: number) => x * 2;
+    const fn = flow(double);
+    expect(fn(5)).toBe(10);
   });
 
-  it('should return the input argument if no functions are provided', () => {
-    const input = 'test';
-    const result = flow()(input);
-    expect(result).toBe(input);
+  it('works with multiple functions', () => {
+    const fn1 = (n: number) => n + 1;
+    const fn2 = (n: number) => n * 2;
+    const fn3 = (n: number) => n - 1;
+
+    const composed = flow(fn1, fn2, fn3);
+    expect(composed(5)).toBe(11); // ((5 + 1) * 2) - 1 = 11
   });
 });

package/src/utils/flow.ts

@@ -11,10 +11,10 @@ export default function flow(...funcs: Function[]): Function {
   }
   return (...args: Function[]) => {
     let i = 0;
-    let result = length ? funcs[i].apply(this, args) : args[0];
+    let result = length ? funcs[i].apply(undefined, args) : args[0];
     while (i + 1 < length) {
       i += 1;
-      result = funcs[i].call(this, result);
+      result = funcs[i].call(undefined, result);
     }
     return result;
   };

package/src/utils/index.ts

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

package/src/utils/isServer.spec.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+
+describe('isServer', () => {
+  it('returns boolean value', async () => {
+    const { default: isServer } = await import('./isServer');
+    expect(typeof isServer).toBe('boolean');
+  });
+
+  it('returns false in browser environment', async () => {
+    // in jsdom environment, window and document exist
+    const { default: isServer } = await import('./isServer');
+    // in test environment with jsdom, it should be false
+    expect(isServer).toBe(false);
+  });
+});

package/src/utils/moduleInterop.spec.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+
+import interopDefaultSync from './moduleInterop';
+
+describe('interopDefaultSync', () => {
+  it('returns module with default export', () => {
+    const module = { default: 'test' };
+    expect(interopDefaultSync(module)).toBe('test');
+  });
+
+  it('returns module without default export', () => {
+    const module = { foo: 'bar' };
+    expect(interopDefaultSync(module)).toBe(module);
+  });
+
+  it('returns non-object values as-is', () => {
+    expect(interopDefaultSync('string')).toBe('string');
+    expect(interopDefaultSync(123)).toBe(123);
+    expect(interopDefaultSync(null)).toBe(null);
+    // eslint-disable-next-line @typescript-eslint/no-confusing-void-expression
+    expect(interopDefaultSync(undefined)).toBe(undefined);
+  });
+
+  it('handles null module', () => {
+    expect(interopDefaultSync(null)).toBe(null);
+  });
+
+  it('handles module with null default', () => {
+    const module = { default: null };
+    expect(interopDefaultSync(module)).toBe(null);
+  });
+
+  it('handles module with undefined default', () => {
+    const module = { default: undefined };
+    expect(interopDefaultSync(module)).toBe(undefined);
+  });
+});

package/src/useHookFormMask.ts

@@ -1,47 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable import-x/no-extraneous-dependencies */
-import inputmask from 'inputmask';
-
-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 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): UseFormRegisterReturn<Path<T>> => {
-    if (!registerFn) throw new Error('registerFn is required');
-
-    const { ref, ...restRegister } = registerFn(fieldName, options as any);
-
-    const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options as any));
-
-    const newRef = flow((_ref: HTMLElement) => {
-      if (_ref) {
-        const { nodeName } = _ref;
-
-        if (nodeName !== 'INPUT') {
-          maskInput.mask(_ref.querySelector('input') as HTMLElement);
-        } else {
-          maskInput.mask(_ref);
-        }
-      }
-      return _ref;
-    }, ref) as RefCallback<HTMLElement>;
-
-    return {
-      ...restRegister,
-      ref: newRef,
-    };
-  };
-}

package/src/useMaskInput.ts

@@ -1,41 +0,0 @@
-/* eslint-disable import-x/no-extraneous-dependencies */
-import { useEffect, useRef } from 'react';
-
-import inputmask from 'inputmask';
-
-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;
-}
-
-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 && ref.current) {
-      if (!ref.current) return;
-
-      const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options));
-
-      maskInput.mask(ref.current);
-
-      if (register && ref.current) {
-        register(ref.current);
-      }
-    }
-  }, [mask, register, options]);
-
-  return ref;
-}