use-mask-input 3.8.0 → 3.10.0

package/src/api/withTanStackFormMask.ts

@@ -0,0 +1,73 @@
+import { applyMaskToElement } from '../core';
+import {
+  getUnmaskedValue, makeMaskCacheKey, setPrevRef, setUnmaskedValue,
+} from '../utils';
+
+import type { RefCallback } from 'react';
+
+import type {
+  Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,
+} from '../types';
+
+type MaskedRefCallback = RefCallback<HTMLElement | null> & {
+  currentElement?: HTMLElement | null;
+};
+
+const refCache = new WeakMap<
+  RefCallback<HTMLElement | null>,
+  Map<string, RefCallback<HTMLElement | null>>
+>();
+
+/**
+ * Enhances TanStack Form-compatible input props with mask support.
+ * Works with objects returned by field.getInputProps().
+ */
+export default function withTanStackFormMask<T extends TanStackFormInputProps>(
+  inputProps: T,
+  mask: Mask,
+  options?: Options,
+): UseTanStackFormMaskReturn<T> {
+  const { ref } = inputProps;
+
+  if (!ref) {
+    let currentElement: HTMLElement | null = null;
+    const result = {
+      ...inputProps,
+      ref: ((input: HTMLElement | null) => {
+        currentElement = input;
+        if (input) applyMaskToElement(input, mask, options);
+      }) as RefCallback<HTMLElement | null>,
+    } as unknown as UseTanStackFormMaskReturn<T>;
+    setUnmaskedValue(result, () => getUnmaskedValue(currentElement));
+
+    setPrevRef(result, ref);
+    return result;
+  }
+
+  if (!refCache.has(ref)) {
+    refCache.set(ref, new Map());
+  }
+
+  const maskCache = refCache.get(ref);
+  const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);
+
+  if (!maskCache?.has(cacheKey)) {
+    const maskedRef = ((input: HTMLElement | null) => {
+      maskedRef.currentElement = input;
+      if (input) applyMaskToElement(input, mask, options);
+      ref(input);
+    }) as MaskedRefCallback;
+
+    maskCache?.set(cacheKey, maskedRef);
+  }
+
+  const maskedRef = maskCache?.get(cacheKey) as MaskedRefCallback | undefined;
+  const result = {
+    ...inputProps,
+    ref: maskedRef,
+  } as unknown as UseTanStackFormMaskReturn<T>;
+  setUnmaskedValue(result, () => getUnmaskedValue(maskedRef?.currentElement ?? null));
+
+  setPrevRef(result, ref);
+  return result;
+}

package/src/core/maskEngine.spec.ts

@@ -5,6 +5,12 @@ import {
 
 import { applyMaskToElement, createMaskInstance } from './maskEngine';
 
+type MaskInstance = ReturnType<typeof createMaskInstance>;
+
+function stubMaskInstance(maskFn: ReturnType<typeof vi.fn>): MaskInstance {
+  return { mask: maskFn } as unknown as MaskInstance;
+}
+
 vi.mock('inputmask', () => ({
   default: vi.fn((options) => ({
     mask: vi.fn(),
@@ -47,7 +53,7 @@ describe('maskEngine', () => {
     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);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(input, '999-999');
 
@@ -57,7 +63,7 @@ describe('maskEngine', () => {
     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);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(textarea, '999-999');
 
@@ -69,7 +75,7 @@ describe('maskEngine', () => {
       const input = document.createElement('input');
       wrapper.appendChild(input);
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(wrapper, '999-999');
 
@@ -79,7 +85,7 @@ describe('maskEngine', () => {
     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);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(wrapper, '999-999');
 
@@ -88,7 +94,7 @@ describe('maskEngine', () => {
 
     it('does nothing if element is null', () => {
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(null as unknown as HTMLElement, '999-999');
 
@@ -98,7 +104,7 @@ describe('maskEngine', () => {
     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);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(input, '999-999', { placeholder: '_' });
 

package/src/index.tsx

@@ -1,14 +1,20 @@
 export {
   useHookFormMask,
   useMaskInput,
+  useTanStackFormMask,
   withHookFormMask,
   withMask,
+  withTanStackFormMask,
 } from './api';
 
 export type {
   Input,
   Mask,
   Options,
+  UnmaskedValueApi,
+  UseMaskInputReturn,
+  TanStackFormInputProps,
+  UseTanStackFormMaskReturn,
   UseFormRegister,
   UseFormRegisterReturn,
 } from './types';

package/src/types/index.ts

@@ -30,9 +30,27 @@ export type Mask = 'datetime'
 export type Options = MaskOptions;
 export type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
 
+export interface UnmaskedValueApi {
+  unmaskedValue: () => string;
+}
+
+export type UseMaskInputReturn = RefCallback<HTMLElement | null> & UnmaskedValueApi;
+
 export interface UseHookFormMaskReturn<
   T extends FieldValues,
-> extends UseFormRegisterReturn<Path<T>> {
+> extends UseFormRegisterReturn<Path<T>>, UnmaskedValueApi {
   ref: RefCallback<HTMLElement | null>;
   prevRef: RefCallback<HTMLElement | null>;
 }
+
+export interface TanStackFormInputProps {
+  name?: string;
+  ref?: RefCallback<HTMLElement | null>;
+  [key: string]: unknown;
+}
+
+export type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> =
+  Omit<T, 'ref'> & {
+  ref: RefCallback<HTMLElement | null>;
+  prevRef: RefCallback<HTMLElement | null> | undefined;
+} & UnmaskedValueApi;

package/src/utils/index.ts

@@ -1,4 +1,9 @@
 export { default as flow } from './flow';
 export { default as isServer } from './isServer';
 export { default as moduleInterop } from './moduleInterop';
-export { makeMaskCacheKey, setPrevRef } from './maskHelpers';
+export {
+  getUnmaskedValue,
+  makeMaskCacheKey,
+  setPrevRef,
+  setUnmaskedValue,
+} from './maskHelpers';

package/src/utils/maskHelpers.ts

@@ -1,4 +1,6 @@
-import type { Mask } from '../types';
+import { findInputElement, resolveInputRef } from '../core/elementResolver';
+
+import type { Input, Mask, UnmaskedValueApi } from '../types';
 
 /**
  * Builds a stable string key from a field name and mask, used to cache ref
@@ -20,3 +22,44 @@ export function setPrevRef(result: object, ref: unknown): void {
     configurable: true,
   });
 }
+
+function resolveUnmaskedInput(input: Input | null): HTMLInputElement | HTMLTextAreaElement | null {
+  const resolved = resolveInputRef(input);
+  if (!resolved) return null;
+
+  const inputElement = findInputElement(resolved);
+  if (inputElement) {
+    return inputElement as HTMLInputElement | HTMLTextAreaElement;
+  }
+
+  return resolved as HTMLInputElement | HTMLTextAreaElement;
+}
+
+export function getUnmaskedValue(input: Input | null): string {
+  const element = resolveUnmaskedInput(input);
+  if (!element) return '';
+
+  const inputmask = (element as HTMLInputElement).inputmask as
+    | { unmaskedvalue?: () => string }
+    | undefined;
+
+  if (inputmask && typeof inputmask.unmaskedvalue === 'function') {
+    return inputmask.unmaskedvalue();
+  }
+
+  return 'value' in element ? element.value : '';
+}
+
+export function setUnmaskedValue<T extends object>(
+  result: T,
+  getter: () => string,
+): T & UnmaskedValueApi {
+  Object.defineProperty(result, 'unmaskedValue', {
+    value: getter,
+    enumerable: false,
+    writable: true,
+    configurable: true,
+  });
+
+  return result as T & UnmaskedValueApi;
+}