@code-forge/react-input-mask - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/hook/useInputMask.d.ts

@@ -7,2 +7,3 @@ import type { KeyboardEvent } from "react";
     numRegex?: RegExp;
+    value?: string;
     type?: "raw" | "mask";
@@ -12,3 +13,3 @@ }
 export declare const DIGIT_REGEX: RegExp;
-export declare function useInputMask({ mask, placeholderChar, type, charRegex, numRegex, }: UseInputMaskProps): {
+export declare function useInputMask({ mask, placeholderChar, type, value, charRegex, numRegex, }: UseInputMaskProps): {
     value?: undefined;
@@ -15,0 +16,0 @@ } | {

dist/index.js

@@ -1,5 +0,5 @@
-import { useRef as L, useLayoutEffect as O, useEffect as w, useState as M } from "react";
-const U = typeof window < "u", x = U ? O : w, G = () => {
-  const t = L();
-  return x(() => {
+import { useRef as _, useLayoutEffect as j, useEffect as O, useMemo as X, useState as R } from "react";
+const $ = typeof window < "u", b = $ ? j : O, h = () => {
+  const t = _();
+  return b(() => {
     t.current && (t.current(), t.current = void 0);
@@ -9,53 +9,94 @@ }), (n) => {
   };
-}, g = (t, e = R) => e.test(t), d = (t, e = D) => e.test(t), _ = (t) => t === "*", $ = (t, e) => {
-  let n = t, s = 0;
-  return t.split("").forEach((r) => {
-    e[s] && (r === "*" && (n = n.replace(r, e[s]), s += 1), r === "A" && g(e[s]) && (n = n.replace(r, e[s]), s += 1), r === "9" && d(e[s]) && (n = n.replace(r, e[s]), s += 1));
-  }), n;
-}, y = (t, e, n = 0) => t.slice(0, n) + t.slice(n, t.length).replaceAll("*", e).replaceAll("A", e).replaceAll("9", e), j = (t, e) => t.substring(0, e).split("").filter((n) => n !== "*" && n !== "9" && n !== "A").length, k = (t, e, n) => {
-  const s = $(e, t), r = j(e, t.length);
+}, A = (t, e = P) => e.test(t), k = (t, e = U) => e.test(t), z = (t) => t === "*", M = (t) => t === "A" || t === "9" || t === "*", B = (t, e) => {
+  let n = 0;
+  return t.split("").map((r) => {
+    if (!M(r))
+      return r;
+    const u = e[n];
+    return u && (r === "*" || r === "A" && A(e[n]) || r === "9" && k(e[n])) ? (n += 1, u) : r;
+  }).join("");
+}, y = (t, e, n = 0) => t.slice(0, n) + t.slice(n, t.length).replaceAll("*", e).replaceAll("A", e).replaceAll("9", e), F = (t, e) => {
+  let n = 0;
+  return t.split("").filter((s) => n >= e ? !1 : M(s) ? (n += 1, !1) : !0).length;
+}, S = (t, e, n) => {
+  const s = B(e, t), r = F(e, t.length);
   return y(s, n, t.length + r);
-}, K = ({ filteredMask: t, value: e, rawValue: n, currentMaskChar: s, charRegex: r, numRegex: l }) => e.length > 1 || t.length === n.length ? !1 : !!(g(e, r) && g(s, r) || d(e, l) && d(s, l) || _(s)), S = (t, e) => {
-  const n = Object.getOwnPropertyDescriptor(t, "value");
-  t.value = `${e}#`, n && n.configurable && delete t.value, t.value = e;
-  const s = document.createEvent("HTMLEvents");
-  s.initEvent("change", !0, !1), t.dispatchEvent(s), n && Object.defineProperty(t, "value", n);
-}, R = /^[a-zA-Z]*$/, D = /^[0-9]*$/;
-function F({ mask: t, placeholderChar: e = "_", type: n = "raw", charRegex: s = R, numRegex: r = D }) {
-  const l = /[^A9*]+/g, E = t == null ? void 0 : t.replace(l, ""), I = G(), [c, P] = M(""), [v, T] = M(y(t ?? "", e));
+}, T = ({ filteredMask: t, value: e, rawValue: n, currentMaskChar: s, charRegex: r, numRegex: u }) => e.length > 1 || t.length === n.length ? !1 : L(e, s, r, u), L = (t, e, n, s) => !!(A(t, n) && A(e, n) || k(t, s) && k(e, s) || z(e)), H = (t, e) => t.selectionStart === 0 && t.selectionEnd === e.length, N = (t, e) => {
+  t.value = e;
+  const n = document.createEvent("HTMLEvents");
+  n.initEvent("change", !0, !1), t.dispatchEvent(n);
+}, Z = (t = "", e = "", n, s, r) => {
+  const u = {
+    maskValue: y(t, r),
+    rawValue: ""
+  };
+  if (!t || !e)
+    return u;
+  const c = t.replace(/[^A9*]+/g, "");
+  return e.split("").every((i, f) => T({
+    value: i,
+    currentMaskChar: c[f],
+    charRegex: n,
+    numRegex: s,
+    filteredMask: c,
+    rawValue: e.slice(0, f)
+  })) ? {
+    maskValue: S(e, t, r),
+    rawValue: e
+  } : u;
+}, q = (t, e, n, s, r) => {
+  const u = {
+    maskValue: y(t, r),
+    rawValue: ""
+  };
+  if (e.length != t.length)
+    return u;
+  const c = t.split("");
+  if (c.every((l, i) => M(l) ? L(e[i], l, n, s) : l === e[i])) {
+    const l = c.map((i, f) => M(i) ? e[f] : "").join("");
+    return { maskValue: e, rawValue: l };
+  }
+  return u;
+}, J = (t = "", e = "", n, s, r, u) => n === "mask" ? q(t, e, s, r, u) : Z(t, e, s, r, u), P = /^[a-zA-Z]*$/, U = /^[0-9]*$/;
+function x({ mask: t, placeholderChar: e = "_", type: n = "raw", value: s, charRegex: r = P, numRegex: u = U }) {
+  const c = /[^A9*]+/g, g = t == null ? void 0 : t.replace(c, ""), l = h(), { maskValue: i, rawValue: f } = X(() => J(t, s, n, r, u, e), [t, s, n, r, u, e]), [V, W] = R(f), [I, v] = R(i);
   if (!t)
     return {};
   if (typeof document > "u")
-    return { value: v };
-  const A = (o, u, f) => {
-    P(o);
-    const i = k(o, t, e);
-    T(i);
-    const a = n === "raw" ? o : i;
-    S(f.target, a), I(() => {
-      const p = i.indexOf(e);
-      u.setSelectionRange(p, p);
+    return { value: I };
+  const D = (o, a, d) => {
+    W(o);
+    const p = S(o, t, e);
+    v(p);
+    const w = n === "raw" ? o : p;
+    N(d.target, w), l(() => {
+      const E = p.indexOf(e);
+      a.setSelectionRange(E, E);
     });
   };
   return { ...{
-    value: v,
+    value: I,
     onKeyDown: (o) => {
-      const u = o.key, f = o.target, i = c.length, a = E[i];
-      if (u === "Tab" || u === "Enter")
+      const a = o.key, d = o.target, p = V.length, w = g[p];
+      if (o.ctrlKey && o.key.toLowerCase() === "a") {
+        o.preventDefault(), d.setSelectionRange(0, t.length);
         return;
-      if (o.preventDefault(), u === "Backspace" && c.length > 0) {
-        const b = c.slice(0, -1);
-        return A(b, f, o);
       }
-      if (!K({
-        value: u,
-        currentMaskChar: a,
-        charRegex: s,
-        numRegex: r,
-        filteredMask: E,
-        rawValue: c
+      if (a === "Tab" || a === "Enter")
+        return;
+      if (o.preventDefault(), a === "Backspace" && V.length > 0) {
+        const K = H(d, t) ? "" : V.slice(0, -1);
+        return D(K, d, o);
+      }
+      if (!T({
+        value: a,
+        currentMaskChar: w,
+        charRegex: r,
+        numRegex: u,
+        filteredMask: g,
+        rawValue: V
       }))
         return;
-      const V = c + u;
-      A(V, f, o);
+      const G = V + a;
+      D(G, d, o);
     }
@@ -65,5 +106,5 @@ } };
 export {
-  D as DIGIT_REGEX,
-  R as LETTER_REGEX,
-  F as useInputMask
+  U as DIGIT_REGEX,
+  P as LETTER_REGEX,
+  x as useInputMask
 };

dist/utils/index.d.ts

 export declare const isLetter: (char: string, regex?: RegExp) => boolean;
 export declare const isDigit: (char: string, regex?: RegExp) => boolean;
 export declare const isWildcard: (char: string) => boolean;
+export declare const isMaskChar: (char: string) => boolean;
 export declare const getMaskedValueFromRaw: (mask: string, rawValue: string) => string;
 export declare const convertMaskToPlaceholder: (mask: string, placeholderChar: string, reachedIndex?: number) => string;
+/**
+ * Goes through the mask until it reaches the raw value length and returns the count of non-masked characters
+ * @param mask Mask string
+ * @param rawLength Length of the raw value
+ * @returns Returns the count of non-masked characters
+ */
+export declare const getNonMaskedCharCount: (mask: string, rawLength: number) => number;
 export declare const convertRawValueToMaskedValue: (rawValue: string, mask: string, placeholderChar: string) => string;
-export declare const isValidInput: ({ filteredMask, value, rawValue, currentMaskChar, charRegex, numRegex, }: {
+interface IsValidInputProps {
     value: string;
@@ -14,5 +22,20 @@ currentMaskChar: string;
     numRegex: RegExp;
-}) => boolean;
+}
+export declare const isValidInput: ({ filteredMask, value, rawValue, currentMaskChar, charRegex, numRegex, }: IsValidInputProps) => boolean;
+export declare const maskAndValueMatch: (value: string, currentMaskChar: string, charRegex: RegExp, numRegex: RegExp) => boolean;
+export declare const isWholeInputSelected: (input: HTMLInputElement, mask: string) => boolean;
 export declare const triggerInputChange: (node: HTMLInputElement, inputValue: string) => void;
 export * from "./useRunAfterUpdate";
+export declare const generateRawValue: (mask: string | undefined, value: string | undefined, charRegex: RegExp, numRegex: RegExp, placeholderChar: string) => {
+    maskValue: string;
+    rawValue: string;
+};
+export declare const generateMaskValue: (mask: string, value: string, charRegex: RegExp, numRegex: RegExp, placeholderChar: string) => {
+    maskValue: string;
+    rawValue: string;
+};
+export declare const generateDefaultValues: (mask: string | undefined, value: string | undefined, type: "raw" | "mask", charRegex: RegExp, numRegex: RegExp, placeholderChar: string) => {
+    maskValue: string;
+    rawValue: string;
+};
 //# sourceMappingURL=index.d.ts.map

package.json

@@ -5,2 +5,3 @@ {
   "author": "Alem Tuzlak",
+  "version": "1.0.4",
   "license": "MIT",
@@ -18,3 +19,2 @@ "keywords": [
   "private": false,
-  "version": "1.0.3",
   "type": "module",
@@ -39,3 +39,3 @@ "main": "./dist/index.umd.cjs",
     "preview": "vite preview",
-    "test": "vitest run"
+    "test": "vitest run --coverage"
   },
@@ -47,2 +47,3 @@ "peerDependencies": {
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
     "@types/node": "^18.16.0",
@@ -54,2 +55,3 @@ "@types/react": "^18.0.28",
     "@vitejs/plugin-react": "^4.0.0-beta.0",
+    "@vitest/coverage-c8": "^0.30.1",
     "eslint": "^8.38.0",
@@ -67,2 +69,2 @@ "eslint-plugin-react-hooks": "^4.6.0",
   }
-}
+}

README.md

@@ -21,3 +21,3 @@ # React Input Mask
 
-It is also designed to be used with Remix.run and other server-side rendering frameworks.
+It is also designed to be used with Next.js and Remix.run and other server-side rendering frameworks.
 
@@ -71,4 +71,4 @@ ## Installation
 | type | "raw" or "mask" | The type of value to return from the hook. If set to "raw", the hook will return the raw value of the input field (eg. mask 999-999-99 with 111-111-11 will output 11111111). If set to "mask", the hook will return the masked value of the input field. (eg. mask 999-999-99 with 111-111-11 will output 111-111-11) | "raw" |
+| value | string | The initial value of the input field. (The hook expects to be given a value created by itself, if you provide an invalid value it will try to fill as much of the mask as it can but relies on you to pass it a positive value, otherwise it will default to its default values) | undefined |
 
-
 ## Examples
@@ -75,0 +75,0 @@ ### Phone Number

No alert changes

Improved metrics

Total package byte prevSize

21252

increased by23.96%

Lines of code

180

increased by59.29%

Worsened metrics

Dev dependency count

19

increased by11.76%

No dependency changes