react-input-mask-format 2.0.0 → 2.2.0

package/dist/index.js

@@ -1,3 +1,10 @@
+import {
+  getInputSelection,
+  isInputFocused,
+  setInputSelection,
+  setNativeValue
+} from "./chunk-CEZXZ7IJ.js";
+
 // src/index.tsx
 import React, { useLayoutEffect as useLayoutEffect2, forwardRef } from "react";
 
@@ -14,27 +21,6 @@ function cancelDefer(deferId) {
   }
 }
 
-// src/utils/input.ts
-function setInputSelection(input, start, end) {
-  if (end === void 0) {
-    end = start;
-  }
-  input.setSelectionRange(start, end);
-}
-function getInputSelection(input) {
-  const start = input.selectionStart;
-  const end = input.selectionEnd;
-  return {
-    start,
-    end,
-    length: (end != null ? end : 0) - (start != null ? start : 0)
-  };
-}
-function isInputFocused(input) {
-  const inputDocument = input.ownerDocument;
-  return inputDocument.hasFocus() && inputDocument.activeElement === input;
-}
-
 // src/utils/helpers.ts
 function getElementDocument(element) {
   return element == null ? void 0 : element.ownerDocument;
@@ -231,6 +217,12 @@ var defaultFormatChars = {
   a: /[A-Za-z]/,
   "*": /[A-Za-z0-9]/
 };
+var extendedFormatChars = {
+  ...defaultFormatChars,
+  A: /[A-Z]/,
+  "\u042F": /[А-Яа-яЁёӘәҒғҚқҢңӨөҰұҮүҺһІі]/,
+  "#": /[0-9A-Fa-f]/
+};
 
 // src/validate-props.ts
 function warnDev(condition, message) {
@@ -457,13 +449,14 @@ var MaskUtils = class {
       if (position >= mask.length) {
         return value;
       }
-      const isAllowed = this.isCharacterAllowedAtPosition(character, position);
+      const transformedCharacter = this.transform && this.isPositionEditable(position) ? this.transform(character, position) : character;
+      const isAllowed = this.isCharacterAllowedAtPosition(transformedCharacter, position);
       const isEditable = this.isPositionEditable(position);
       const nextEditablePosition = this.getRightEditablePosition(position);
-      const isNextPlaceholder = maskPlaceholder && nextEditablePosition ? character === maskPlaceholder[nextEditablePosition] : null;
+      const isNextPlaceholder = maskPlaceholder && nextEditablePosition ? transformedCharacter === maskPlaceholder[nextEditablePosition] : null;
       const valueBefore = value.slice(0, position);
       if (isAllowed || !isEditable) {
-        const insertedCharacter = isAllowed ? character : mask[position];
+        const insertedCharacter = isAllowed ? transformedCharacter : mask[position];
         value = valueBefore + insertedCharacter;
       }
       if (!isAllowed && !isEditable && !isNextPlaceholder) {
@@ -558,6 +551,7 @@ var MaskUtils = class {
       };
     };
     this.maskOptions = parseMask(options);
+    this.transform = options.transform;
   }
 };
 
@@ -575,15 +569,22 @@ function resolveMaskPlaceholder(maskPlaceholder, maskChar) {
   }
   return maskChar;
 }
-function toRegExpFormatChars(formatChars) {
+function normalizeFormatChars(formatChars) {
   if (!formatChars) {
-    return void 0;
+    return { formatChars: void 0, hasLegacyString: false };
   }
   const result = {};
+  let hasLegacyString = false;
   for (const key of Object.keys(formatChars)) {
-    result[key] = new RegExp(formatChars[key]);
+    const value = formatChars[key];
+    if (typeof value === "string") {
+      hasLegacyString = true;
+      result[key] = new RegExp(value);
+    } else {
+      result[key] = value;
+    }
   }
-  return result;
+  return { formatChars: result, hasLegacyString };
 }
 function createBeforeMaskedStateChangeAdapter(beforeMaskedValueChange, maskOptions) {
   return ({ previousState, currentState, nextState }) => {
@@ -597,6 +598,220 @@ function createBeforeMaskedStateChangeAdapter(beforeMaskedValueChange, maskOptio
   };
 }
 
+// src/utils/transform.ts
+function resolveTransform(transform) {
+  if (!transform) {
+    return void 0;
+  }
+  if (transform === "uppercase") {
+    return (char) => char.toUpperCase();
+  }
+  if (transform === "lowercase") {
+    return (char) => char.toLowerCase();
+  }
+  if (typeof transform === "function") {
+    return transform;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.error(
+      `react-input-mask-format: invalid transform "${String(
+        transform
+      )}", expected "uppercase" | "lowercase" | (char, position) => char`
+    );
+  }
+  return void 0;
+}
+
+// src/use-mask.ts
+import { useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+
+// src/bind-mask.ts
+var IS_JSDOM = typeof navigator !== "undefined" && navigator.userAgent.includes("jsdom");
+function createMaskController(maskUtils, options) {
+  let input = null;
+  let lastValue = "";
+  let lastSelection = { start: null, end: null };
+  function getInputState() {
+    return { value: input.value, selection: getInputSelection(input) };
+  }
+  function getLastInputState() {
+    return { value: lastValue, selection: lastSelection };
+  }
+  function setInputState({ value, selection }) {
+    setNativeValue(input, value);
+    lastValue = value;
+    if (input && isInputFocused(input) && selection.start !== null && selection.end !== null) {
+      setInputSelection(input, selection.start, selection.end);
+      lastSelection = getInputSelection(input);
+    } else {
+      lastSelection = selection;
+    }
+    if (IS_JSDOM) {
+      const resyncValue = value;
+      const resyncSelection = selection;
+      queueMicrotask(() => {
+        if (!input || input.value !== resyncValue) return;
+        input.value = resyncValue;
+        if (isInputFocused(input) && resyncSelection.start !== null && resyncSelection.end !== null) {
+          setInputSelection(input, resyncSelection.start, resyncSelection.end);
+        }
+      });
+    }
+  }
+  function handleInput() {
+    const currentState = getInputState();
+    const previousState = getLastInputState();
+    let nextState = maskUtils.processChange(currentState, previousState);
+    if (options.beforeMaskedStateChange) {
+      nextState = options.beforeMaskedStateChange({ currentState, previousState, nextState });
+    }
+    setInputState(nextState);
+  }
+  function handleFocus() {
+    const currentValue = getInputState().value;
+    if (!maskUtils.isValueFilled(currentValue)) {
+      const newValue = maskUtils.formatValue(currentValue);
+      const newSelection = maskUtils.getDefaultSelectionForValue(newValue);
+      let nextState = { value: newValue, selection: newSelection };
+      if (options.beforeMaskedStateChange) {
+        nextState = options.beforeMaskedStateChange({ currentState: getInputState(), nextState });
+      }
+      setInputState(nextState);
+      defer(() => {
+        if (input && isInputFocused(input)) {
+          setInputSelection(input, lastSelection.start, lastSelection.end);
+        }
+      });
+    }
+  }
+  function handleBlur() {
+    const lastValueOnBlur = getLastInputState().value;
+    if (!options.alwaysShowMask && maskUtils.isValueEmpty(lastValueOnBlur)) {
+      let nextState = { value: "", selection: { start: null, end: null } };
+      if (options.beforeMaskedStateChange) {
+        nextState = options.beforeMaskedStateChange({ currentState: getInputState(), nextState });
+      }
+      setInputState(nextState);
+    }
+  }
+  function handleMouseDown(event) {
+    if (!input) return;
+    const { value } = getInputState();
+    const inputDocument = getElementDocument(input);
+    if (!isInputFocused(input) && !maskUtils.isValueFilled(value)) {
+      const mouseDownX = event.clientX;
+      const mouseDownY = event.clientY;
+      const mouseDownTime = (/* @__PURE__ */ new Date()).getTime();
+      const mouseUpHandler = (mouseUpEvent) => {
+        inputDocument.removeEventListener("mouseup", mouseUpHandler);
+        if (!input || !isInputFocused(input)) return;
+        const deltaX = Math.abs(mouseUpEvent.clientX - mouseDownX);
+        const deltaY = Math.abs(mouseUpEvent.clientY - mouseDownY);
+        const axisDelta = Math.max(deltaX, deltaY);
+        const timeDelta = (/* @__PURE__ */ new Date()).getTime() - mouseDownTime;
+        if (axisDelta <= 10 && timeDelta <= 200 || axisDelta <= 5 && timeDelta <= 300) {
+          const newSelection = maskUtils.getDefaultSelectionForValue(lastValue);
+          if (newSelection.start !== null && newSelection.end !== null) {
+            setInputSelection(input, newSelection.start, newSelection.end);
+            lastSelection = getInputSelection(input);
+          }
+        }
+      };
+      inputDocument.addEventListener("mouseup", mouseUpHandler);
+    }
+  }
+  function bind(el) {
+    input = el;
+    lastValue = el.value;
+    lastSelection = getInputSelection(el);
+    const formatted = maskUtils.formatValue(el.value);
+    if (!maskUtils.isValueEmpty(formatted) || options.alwaysShowMask) {
+      setNativeValue(el, formatted);
+      lastValue = formatted;
+    }
+    el.addEventListener("input", handleInput);
+    el.addEventListener("focus", handleFocus);
+    el.addEventListener("blur", handleBlur);
+    el.addEventListener("mousedown", handleMouseDown);
+  }
+  function unbind() {
+    if (input) {
+      input.removeEventListener("input", handleInput);
+      input.removeEventListener("focus", handleFocus);
+      input.removeEventListener("blur", handleBlur);
+      input.removeEventListener("mousedown", handleMouseDown);
+    }
+    input = null;
+  }
+  function update(nextMaskUtils, nextOptions) {
+    maskUtils = nextMaskUtils;
+    options = nextOptions;
+  }
+  return { bind, unbind, update };
+}
+
+// src/use-mask.ts
+function useMask(options) {
+  const {
+    mask,
+    maskPlaceholder: maskPlaceholderProp,
+    alwaysShowMask = false,
+    formatChars,
+    transform,
+    beforeMaskedStateChange: beforeMaskedStateChangeProp,
+    beforeMaskedValueChange
+  } = options;
+  if (beforeMaskedValueChange !== void 0) {
+    warnDeprecatedOnce(
+      "beforeMaskedValueChange",
+      "beforeMaskedValueChange is deprecated, use beforeMaskedStateChange."
+    );
+  }
+  const resolvedPlaceholder = resolveMaskPlaceholder(maskPlaceholderProp, void 0);
+  const maskPlaceholder = resolvedPlaceholder === void 0 ? "_" : resolvedPlaceholder;
+  const { formatChars: normalizedFormatChars, hasLegacyString } = normalizeFormatChars(formatChars);
+  if (hasLegacyString) {
+    warnDeprecatedOnce(
+      "formatChars",
+      "string values in formatChars are deprecated, pass RegExp values instead."
+    );
+  }
+  const maskUtils = new MaskUtils({
+    mask: mask != null ? mask : null,
+    maskPlaceholder,
+    formatChars: normalizedFormatChars,
+    transform: resolveTransform(transform)
+  });
+  let beforeMaskedStateChange = beforeMaskedStateChangeProp;
+  if (!beforeMaskedStateChange && beforeMaskedValueChange) {
+    const v2MaskOptions = {
+      mask: mask != null ? mask : void 0,
+      maskChar: maskPlaceholder,
+      alwaysShowMask,
+      formatChars: formatChars != null ? formatChars : { "9": "[0-9]", a: "[A-Za-z]", "*": "[A-Za-z0-9]" },
+      permanents: maskUtils.maskOptions.permanents
+    };
+    beforeMaskedStateChange = createBeforeMaskedStateChangeAdapter(beforeMaskedValueChange, v2MaskOptions);
+  }
+  const controllerOptions = { alwaysShowMask, beforeMaskedStateChange };
+  const controllerRef = useRef2(null);
+  useEffect2(() => {
+    var _a;
+    (_a = controllerRef.current) == null ? void 0 : _a.update(maskUtils, controllerOptions);
+  });
+  return useCallback2((el) => {
+    var _a;
+    if (el) {
+      const controller = createMaskController(maskUtils, controllerOptions);
+      controller.bind(el);
+      controllerRef.current = controller;
+    } else {
+      (_a = controllerRef.current) == null ? void 0 : _a.unbind();
+      controllerRef.current = null;
+    }
+  }, []);
+}
+
 // src/index.tsx
 var InputMask = forwardRef(function InputMask2(props, forwardedRef) {
   const {
@@ -605,6 +820,7 @@ var InputMask = forwardRef(function InputMask2(props, forwardedRef) {
     mask,
     maskPlaceholder: maskPlaceholderProp,
     beforeMaskedStateChange: beforeMaskedStateChangeProp,
+    transform,
     maskChar,
     formatChars,
     beforeMaskedValueChange,
@@ -613,9 +829,6 @@ var InputMask = forwardRef(function InputMask2(props, forwardedRef) {
   if (maskChar !== void 0) {
     warnDeprecatedOnce("maskChar", "maskChar is deprecated, use maskPlaceholder instead. See migration guide: https://github.com/Temirtator/react-input-mask-format#migrating-from-react-input-mask");
   }
-  if (formatChars !== void 0) {
-    warnDeprecatedOnce("formatChars", "formatChars is deprecated, prefer an array mask with RegExps. See migration guide: https://github.com/Temirtator/react-input-mask-format#migrating-from-react-input-mask");
-  }
   if (beforeMaskedValueChange !== void 0) {
     warnDeprecatedOnce("beforeMaskedValueChange", "beforeMaskedValueChange is deprecated, use beforeMaskedStateChange. See migration guide: https://github.com/Temirtator/react-input-mask-format#migrating-from-react-input-mask");
   }
@@ -623,10 +836,18 @@ var InputMask = forwardRef(function InputMask2(props, forwardedRef) {
   const maskPlaceholder = resolvedPlaceholder === void 0 ? "_" : resolvedPlaceholder;
   validateMaxLength(props);
   validateMaskPlaceholder({ ...props, maskPlaceholder });
+  const { formatChars: normalizedFormatChars, hasLegacyString } = normalizeFormatChars(formatChars);
+  if (hasLegacyString) {
+    warnDeprecatedOnce(
+      "formatChars",
+      'string values in formatChars are deprecated, pass RegExp values instead (e.g. { "#": /[0-9]/ }). See migration guide: https://github.com/Temirtator/react-input-mask-format#migrating-from-react-input-mask'
+    );
+  }
   const maskUtils = new MaskUtils({
     mask,
     maskPlaceholder,
-    formatChars: toRegExpFormatChars(formatChars)
+    formatChars: normalizedFormatChars,
+    transform: resolveTransform(transform)
   });
   let beforeMaskedStateChange = beforeMaskedStateChangeProp;
   if (!beforeMaskedStateChange && beforeMaskedValueChange) {
@@ -847,6 +1068,9 @@ var InputMask = forwardRef(function InputMask2(props, forwardedRef) {
 InputMask.displayName = "InputMask";
 var src_default = InputMask;
 export {
-  src_default as default
+  src_default as default,
+  defaultFormatChars,
+  extendedFormatChars,
+  useMask
 };
 //# sourceMappingURL=index.js.map