react-input-mask-format 1.0.4 → 2.0.0

package/dist/index.cjs

@@ -0,0 +1,883 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+var import_react2 = __toESM(require("react"), 1);
+
+// src/hooks.ts
+var import_react = require("react");
+
+// src/utils/defer.ts
+function defer(fn) {
+  return requestAnimationFrame(fn);
+}
+function cancelDefer(deferId) {
+  if (deferId !== null) {
+    cancelAnimationFrame(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;
+}
+function getElementWindow(element) {
+  var _a;
+  return (_a = getElementDocument(element)) == null ? void 0 : _a.defaultView;
+}
+function isDOMElement(element) {
+  const elementWindow = getElementWindow(element);
+  return !!elementWindow && element instanceof elementWindow.HTMLElement;
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function findLastIndex(array, predicate) {
+  for (let i = array.length - 1; i >= 0; i--) {
+    const x = array[i];
+    if (predicate(x, i)) {
+      return i;
+    }
+  }
+  return -1;
+}
+function repeat(string, n = 1) {
+  let result = "";
+  for (let i = 0; i < n; i++) {
+    result += string;
+  }
+  return result;
+}
+function toString(value) {
+  return `${value}`;
+}
+
+// src/hooks.ts
+function useInputElement(inputRef) {
+  return (0, import_react.useCallback)(() => {
+    let input = inputRef.current;
+    const isDOMNode = typeof window !== "undefined" && isDOMElement(input);
+    if (!input || !isDOMNode) {
+      return null;
+    }
+    if (input.nodeName !== "INPUT") {
+      input = input.querySelector("input");
+    }
+    if (!input) {
+      throw new Error("react-input-mask: inputComponent doesn't contain input node");
+    }
+    return input;
+  }, [inputRef]);
+}
+function useDeferLoop(callback) {
+  const deferIdRef = (0, import_react.useRef)(null);
+  const runLoop = (0, import_react.useCallback)(() => {
+    if (deferIdRef.current !== null) {
+      return;
+    }
+    function loop() {
+      callback();
+      deferIdRef.current = defer(loop);
+    }
+    loop();
+  }, [callback]);
+  const stopLoop = (0, import_react.useCallback)(() => {
+    cancelDefer(deferIdRef.current);
+    deferIdRef.current = null;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (deferIdRef.current) {
+      stopLoop();
+      runLoop();
+    }
+  }, [runLoop, stopLoop]);
+  (0, import_react.useEffect)(() => cancelDefer(deferIdRef.current), []);
+  return [runLoop, stopLoop];
+}
+function useSelection(inputRef, isMasked) {
+  const selectionRef = (0, import_react.useRef)({ start: null, end: null });
+  const getInputElement = useInputElement(inputRef);
+  const getSelection = (0, import_react.useCallback)(() => {
+    const input = getInputElement();
+    return getInputSelection(input);
+  }, [getInputElement]);
+  const getLastSelection = (0, import_react.useCallback)(() => {
+    return selectionRef.current;
+  }, []);
+  const setSelection = (0, import_react.useCallback)(
+    (selection) => {
+      const input = getInputElement();
+      if (!input || !isInputFocused(input)) {
+        return;
+      }
+      setInputSelection(input, selection.start, selection.end);
+      selectionRef.current = getSelection();
+    },
+    [getInputElement, getSelection]
+  );
+  const selectionLoop = (0, import_react.useCallback)(() => {
+    selectionRef.current = getSelection();
+  }, [getSelection]);
+  const [runSelectionLoop, stopSelectionLoop] = useDeferLoop(selectionLoop);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!isMasked) {
+      return;
+    }
+    const input = getInputElement();
+    if (!input) return;
+    input.addEventListener("focus", runSelectionLoop);
+    input.addEventListener("blur", stopSelectionLoop);
+    if (isInputFocused(input)) {
+      runSelectionLoop();
+    }
+    return () => {
+      input.removeEventListener("focus", runSelectionLoop);
+      input.removeEventListener("blur", stopSelectionLoop);
+      stopSelectionLoop();
+    };
+  });
+  return { getSelection, getLastSelection, setSelection };
+}
+function useValue(inputRef, initialValue) {
+  const getInputElement = useInputElement(inputRef);
+  const valueRef = (0, import_react.useRef)(initialValue);
+  const getValue = (0, import_react.useCallback)(() => {
+    return getInputElement().value;
+  }, [getInputElement]);
+  const getLastValue = (0, import_react.useCallback)(() => {
+    return valueRef.current;
+  }, []);
+  const setValue = (0, import_react.useCallback)(
+    (newValue) => {
+      valueRef.current = newValue;
+      const input = getInputElement();
+      if (input) {
+        input.value = newValue;
+      }
+    },
+    [getInputElement]
+  );
+  return {
+    getValue,
+    getLastValue,
+    setValue
+  };
+}
+function useInputState(initialValue, isMasked) {
+  const inputRef = (0, import_react.useRef)(null);
+  const { getSelection, getLastSelection, setSelection } = useSelection(inputRef, isMasked);
+  const { getValue, getLastValue, setValue } = useValue(inputRef, initialValue);
+  function getLastInputState() {
+    return {
+      value: getLastValue(),
+      selection: getLastSelection()
+    };
+  }
+  function getInputState() {
+    return {
+      value: getValue(),
+      selection: getSelection()
+    };
+  }
+  function setInputState({ value, selection }) {
+    setValue(value);
+    setSelection(selection);
+  }
+  return {
+    inputRef,
+    getInputState,
+    getLastInputState,
+    setInputState
+  };
+}
+function usePrevious(value) {
+  const ref = (0, import_react.useRef)(void 0);
+  (0, import_react.useEffect)(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+// src/constants.ts
+var CONTROLLED_PROPS = [
+  "disabled",
+  "onBlur",
+  "onChange",
+  "onFocus",
+  "onMouseDown",
+  "readOnly",
+  "value"
+];
+var defaultFormatChars = {
+  "9": /[0-9]/,
+  a: /[A-Za-z]/,
+  "*": /[A-Za-z0-9]/
+};
+
+// src/validate-props.ts
+function warnDev(condition, message) {
+  if (process.env.NODE_ENV !== "production" && !condition) {
+    console.error(`react-input-mask-format: ${message}`);
+  }
+}
+function invariant(condition, message) {
+  if (!condition) {
+    throw new Error(`react-input-mask-format: ${message}`);
+  }
+}
+function validateMaxLength(props) {
+  warnDev(
+    !props.maxLength || !props.mask,
+    "maxLength property shouldn't be passed to the masked input. It breaks masking and unnecessary because length is limited by the mask length."
+  );
+}
+function validateMaskPlaceholder(props) {
+  const { mask, maskPlaceholder } = props;
+  invariant(
+    !mask || !maskPlaceholder || maskPlaceholder.length === 1 || maskPlaceholder.length === mask.length,
+    `maskPlaceholder should either be a single character or have the same length as the mask:
+mask: ${mask}
+maskPlaceholder: ${maskPlaceholder}`
+  );
+}
+function validateChildren(props, inputElement) {
+  const conflictProps = CONTROLLED_PROPS.filter(
+    (propId) => inputElement.props[propId] != null && inputElement.props[propId] !== props[propId]
+  );
+  invariant(
+    !conflictProps.length,
+    `the following props should be passed to the InputMask component, not to children: ${conflictProps.join(",")}`
+  );
+}
+
+// src/utils/parse-mask.ts
+function parseMask({
+  mask,
+  maskPlaceholder,
+  formatChars = defaultFormatChars
+}) {
+  const permanents = [];
+  if (!mask) {
+    return {
+      maskPlaceholder: null,
+      mask: null,
+      prefix: null,
+      lastEditablePosition: null,
+      permanents: []
+    };
+  }
+  let parsedMask;
+  if (typeof mask === "string") {
+    let isPermanent = false;
+    let parsedMaskString = "";
+    mask.split("").forEach((character) => {
+      if (!isPermanent && character === "\\") {
+        isPermanent = true;
+      } else {
+        if (isPermanent || !formatChars[character]) {
+          permanents.push(parsedMaskString.length);
+        }
+        parsedMaskString += character;
+        isPermanent = false;
+      }
+    });
+    parsedMask = parsedMaskString.split("").map((character, index) => {
+      if (permanents.indexOf(index) === -1) {
+        return formatChars[character];
+      }
+      return character;
+    });
+  } else {
+    mask.forEach((character, index) => {
+      if (typeof character === "string") {
+        permanents.push(index);
+      }
+    });
+    parsedMask = mask;
+  }
+  let parsedPlaceholder = maskPlaceholder != null ? maskPlaceholder : null;
+  if (parsedPlaceholder) {
+    let placeholderChars;
+    if (parsedPlaceholder.length === 1) {
+      placeholderChars = parsedMask.map((character, index) => {
+        if (permanents.indexOf(index) !== -1) {
+          return character;
+        }
+        return parsedPlaceholder;
+      });
+    } else {
+      placeholderChars = parsedPlaceholder.split("");
+    }
+    permanents.forEach((position) => {
+      placeholderChars[position] = parsedMask[position];
+    });
+    parsedPlaceholder = placeholderChars.join("");
+  }
+  const prefix = permanents.filter((position, index) => position === index).map((position) => parsedMask[position]).join("");
+  let lastEditablePosition = parsedMask.length - 1;
+  while (permanents.indexOf(lastEditablePosition) !== -1) {
+    lastEditablePosition--;
+  }
+  return {
+    maskPlaceholder: parsedPlaceholder,
+    prefix,
+    mask: parsedMask,
+    lastEditablePosition,
+    permanents
+  };
+}
+
+// src/utils/mask.ts
+var MaskUtils = class {
+  constructor(options) {
+    this.isCharacterAllowedAtPosition = (character, position) => {
+      const { maskPlaceholder } = this.maskOptions;
+      if (this.isCharacterFillingPosition(character, position)) {
+        return true;
+      }
+      if (!maskPlaceholder) {
+        return false;
+      }
+      return maskPlaceholder[position] === character;
+    };
+    this.isCharacterFillingPosition = (character, position) => {
+      const { mask } = this.maskOptions;
+      if (!character || position >= mask.length) {
+        return false;
+      }
+      if (!this.isPositionEditable(position)) {
+        return mask[position] === character;
+      }
+      const charRule = mask[position];
+      return new RegExp(charRule).test(character);
+    };
+    this.isPositionEditable = (position) => {
+      const { mask, permanents } = this.maskOptions;
+      return position < mask.length && permanents.indexOf(position) === -1;
+    };
+    this.isValueEmpty = (value) => {
+      return value.split("").every((character, position) => {
+        return !this.isPositionEditable(position) || !this.isCharacterFillingPosition(character, position);
+      });
+    };
+    this.isValueFilled = (value) => {
+      return this.getFilledLength(value) === this.maskOptions.lastEditablePosition + 1;
+    };
+    this.getDefaultSelectionForValue = (value) => {
+      const filledLength = this.getFilledLength(value);
+      const cursorPosition = this.getRightEditablePosition(filledLength);
+      return { start: cursorPosition, end: cursorPosition };
+    };
+    this.getFilledLength = (value) => {
+      const characters = value.split("");
+      const lastFilledIndex = findLastIndex(characters, (character, position) => {
+        return this.isPositionEditable(position) && this.isCharacterFillingPosition(character, position);
+      });
+      return lastFilledIndex + 1;
+    };
+    this.getStringFillingLengthAtPosition = (string, position) => {
+      const characters = string.split("");
+      const insertedValue = characters.reduce((value, character) => {
+        return this.insertCharacterAtPosition(value, character, value.length);
+      }, repeat(" ", position));
+      return insertedValue.length - position;
+    };
+    this.getLeftEditablePosition = (position) => {
+      for (let i = position; i >= 0; i--) {
+        if (this.isPositionEditable(i)) {
+          return i;
+        }
+      }
+      return null;
+    };
+    this.getRightEditablePosition = (position) => {
+      const { mask } = this.maskOptions;
+      for (let i = position; i < mask.length; i++) {
+        if (this.isPositionEditable(i)) {
+          return i;
+        }
+      }
+      return null;
+    };
+    this.formatValue = (value) => {
+      const { maskPlaceholder, mask } = this.maskOptions;
+      if (!maskPlaceholder) {
+        value = this.insertStringAtPosition("", value, 0);
+        while (value.length < mask.length && !this.isPositionEditable(value.length)) {
+          value += mask[value.length];
+        }
+        return value;
+      }
+      return this.insertStringAtPosition(maskPlaceholder, value, 0);
+    };
+    this.clearRange = (value, start, len) => {
+      if (!len) {
+        return value;
+      }
+      const end = start + len;
+      const { maskPlaceholder, mask } = this.maskOptions;
+      const clearedValue = value.split("").map((character, i) => {
+        const isEditable = this.isPositionEditable(i);
+        if (!maskPlaceholder && i >= end && !isEditable) {
+          return "";
+        }
+        if (i < start || i >= end) {
+          return character;
+        }
+        if (!isEditable) {
+          return mask[i];
+        }
+        if (maskPlaceholder) {
+          return maskPlaceholder[i];
+        }
+        return "";
+      }).join("");
+      return this.formatValue(clearedValue);
+    };
+    this.insertCharacterAtPosition = (value, character, position) => {
+      const { mask, maskPlaceholder } = this.maskOptions;
+      if (position >= mask.length) {
+        return value;
+      }
+      const isAllowed = this.isCharacterAllowedAtPosition(character, position);
+      const isEditable = this.isPositionEditable(position);
+      const nextEditablePosition = this.getRightEditablePosition(position);
+      const isNextPlaceholder = maskPlaceholder && nextEditablePosition ? character === maskPlaceholder[nextEditablePosition] : null;
+      const valueBefore = value.slice(0, position);
+      if (isAllowed || !isEditable) {
+        const insertedCharacter = isAllowed ? character : mask[position];
+        value = valueBefore + insertedCharacter;
+      }
+      if (!isAllowed && !isEditable && !isNextPlaceholder) {
+        value = this.insertCharacterAtPosition(value, character, position + 1);
+      }
+      return value;
+    };
+    this.insertStringAtPosition = (value, string, position) => {
+      const { mask, maskPlaceholder } = this.maskOptions;
+      if (!string || position >= mask.length) {
+        return value;
+      }
+      const characters = string.split("");
+      const isFixedLength = this.isValueFilled(value) || !!maskPlaceholder;
+      const valueAfter = value.slice(position);
+      value = characters.reduce((value2, character) => {
+        return this.insertCharacterAtPosition(value2, character, value2.length);
+      }, value.slice(0, position));
+      if (isFixedLength) {
+        value += valueAfter.slice(value.length - position);
+      } else if (this.isValueFilled(value)) {
+        value += mask.slice(value.length).join("");
+      } else {
+        const editableCharactersAfter = valueAfter.split("").filter((character, i) => {
+          return this.isPositionEditable(position + i);
+        });
+        value = editableCharactersAfter.reduce((value2, character) => {
+          const nextEditablePosition = this.getRightEditablePosition(
+            value2.length
+          );
+          if (nextEditablePosition === null) {
+            return value2;
+          }
+          if (!this.isPositionEditable(value2.length)) {
+            value2 += mask.slice(value2.length, nextEditablePosition).join("");
+          }
+          return this.insertCharacterAtPosition(value2, character, value2.length);
+        }, value);
+      }
+      return value;
+    };
+    this.processChange = (currentState, previousState) => {
+      const { mask, prefix, lastEditablePosition } = this.maskOptions;
+      const { value, selection } = currentState;
+      const previousValue = previousState.value;
+      const previousSelection = previousState.selection;
+      let newValue = value;
+      let enteredString = "";
+      let formattedEnteredStringLength = 0;
+      let removedLength = 0;
+      let cursorPosition = Math.min(previousSelection.start, selection.start);
+      if (selection.end > previousSelection.start) {
+        enteredString = newValue.slice(previousSelection.start, selection.end);
+        formattedEnteredStringLength = this.getStringFillingLengthAtPosition(
+          enteredString,
+          cursorPosition
+        );
+        if (!formattedEnteredStringLength) {
+          removedLength = 0;
+        } else {
+          removedLength = previousSelection.length;
+        }
+      } else if (newValue.length < previousValue.length) {
+        removedLength = previousValue.length - newValue.length;
+      }
+      newValue = previousValue;
+      if (removedLength) {
+        if (removedLength === 1 && !previousSelection.length) {
+          const deleteFromRight = previousSelection.start === selection.start;
+          cursorPosition = deleteFromRight ? this.getRightEditablePosition(selection.start) : this.getLeftEditablePosition(selection.start);
+        }
+        newValue = this.clearRange(newValue, cursorPosition, removedLength);
+      }
+      newValue = this.insertStringAtPosition(
+        newValue,
+        enteredString,
+        cursorPosition
+      );
+      cursorPosition += formattedEnteredStringLength;
+      if (cursorPosition >= mask.length) {
+        cursorPosition = mask.length;
+      } else if (cursorPosition < prefix.length && !formattedEnteredStringLength) {
+        cursorPosition = prefix.length;
+      } else if (cursorPosition >= prefix.length && cursorPosition < lastEditablePosition && formattedEnteredStringLength) {
+        cursorPosition = this.getRightEditablePosition(cursorPosition);
+      }
+      newValue = this.formatValue(newValue);
+      return {
+        value: newValue,
+        enteredString,
+        selection: { start: cursorPosition, end: cursorPosition }
+      };
+    };
+    this.maskOptions = parseMask(options);
+  }
+};
+
+// src/v2-compat.ts
+var warned = /* @__PURE__ */ new Set();
+function warnDeprecatedOnce(prop, message) {
+  if (process.env.NODE_ENV !== "production" && !warned.has(prop)) {
+    warned.add(prop);
+    console.warn(`react-input-mask-format: ${message}`);
+  }
+}
+function resolveMaskPlaceholder(maskPlaceholder, maskChar) {
+  if (maskPlaceholder !== void 0) {
+    return maskPlaceholder;
+  }
+  return maskChar;
+}
+function toRegExpFormatChars(formatChars) {
+  if (!formatChars) {
+    return void 0;
+  }
+  const result = {};
+  for (const key of Object.keys(formatChars)) {
+    result[key] = new RegExp(formatChars[key]);
+  }
+  return result;
+}
+function createBeforeMaskedStateChangeAdapter(beforeMaskedValueChange, maskOptions) {
+  return ({ previousState, currentState, nextState }) => {
+    var _a, _b;
+    return beforeMaskedValueChange(
+      nextState,
+      (_a = previousState != null ? previousState : currentState) != null ? _a : null,
+      (_b = nextState.enteredString) != null ? _b : null,
+      maskOptions
+    );
+  };
+}
+
+// src/index.tsx
+var InputMask = (0, import_react2.forwardRef)(function InputMask2(props, forwardedRef) {
+  const {
+    alwaysShowMask = false,
+    children,
+    mask,
+    maskPlaceholder: maskPlaceholderProp,
+    beforeMaskedStateChange: beforeMaskedStateChangeProp,
+    maskChar,
+    formatChars,
+    beforeMaskedValueChange,
+    ...restProps
+  } = props;
+  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");
+  }
+  const resolvedPlaceholder = resolveMaskPlaceholder(maskPlaceholderProp, maskChar);
+  const maskPlaceholder = resolvedPlaceholder === void 0 ? "_" : resolvedPlaceholder;
+  validateMaxLength(props);
+  validateMaskPlaceholder({ ...props, maskPlaceholder });
+  const maskUtils = new MaskUtils({
+    mask,
+    maskPlaceholder,
+    formatChars: toRegExpFormatChars(formatChars)
+  });
+  let beforeMaskedStateChange = beforeMaskedStateChangeProp;
+  if (!beforeMaskedStateChange && beforeMaskedValueChange) {
+    const v2MaskOptions = {
+      mask,
+      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 isMasked = !!mask;
+  const isEditable = !restProps.disabled && !restProps.readOnly;
+  const isControlled = props.value !== null && props.value !== void 0;
+  const previousIsMasked = usePrevious(isMasked);
+  const initialValue = toString(
+    (isControlled ? props.value : props.defaultValue) || ""
+  );
+  const {
+    inputRef,
+    getInputState,
+    setInputState,
+    getLastInputState
+  } = useInputState(initialValue, isMasked);
+  const getInputElement = useInputElement(inputRef);
+  function onChange(event) {
+    const currentState = getInputState();
+    const previousState = getLastInputState();
+    let newInputState = maskUtils.processChange(currentState, previousState);
+    if (beforeMaskedStateChange) {
+      newInputState = beforeMaskedStateChange({
+        currentState,
+        previousState,
+        nextState: newInputState
+      });
+    }
+    setInputState(newInputState);
+    if (props.onChange) {
+      props.onChange(event);
+    }
+  }
+  function onFocus(event) {
+    inputRef.current = event.target;
+    const currentValue = getInputState().value;
+    if (isMasked && !maskUtils.isValueFilled(currentValue)) {
+      let newValue = maskUtils.formatValue(currentValue);
+      let newSelection = maskUtils.getDefaultSelectionForValue(newValue);
+      let newInputState = {
+        value: newValue,
+        selection: newSelection
+      };
+      if (beforeMaskedStateChange) {
+        newInputState = beforeMaskedStateChange({
+          currentState: getInputState(),
+          nextState: newInputState
+        });
+        newValue = newInputState.value;
+        newSelection = newInputState.selection;
+      }
+      setInputState(newInputState);
+      if (newValue !== currentValue && props.onChange) {
+        props.onChange(event);
+      }
+      defer(() => {
+        setInputState(getLastInputState());
+      });
+    }
+    if (props.onFocus) {
+      props.onFocus(event);
+    }
+  }
+  function onBlur(event) {
+    const currentValue = getInputState().value;
+    const lastValue = getLastInputState().value;
+    if (isMasked && !alwaysShowMask && maskUtils.isValueEmpty(lastValue)) {
+      let newValue = "";
+      let newInputState = {
+        value: newValue,
+        selection: { start: null, end: null }
+      };
+      if (beforeMaskedStateChange) {
+        newInputState = beforeMaskedStateChange({
+          currentState: getInputState(),
+          nextState: newInputState
+        });
+        newValue = newInputState.value;
+      }
+      setInputState(newInputState);
+      if (newValue !== currentValue && props.onChange) {
+        props.onChange(event);
+      }
+    }
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  }
+  function onMouseDown(event) {
+    const input = getInputElement();
+    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 (!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 lastState = getLastInputState();
+          const newSelection = maskUtils.getDefaultSelectionForValue(
+            lastState.value
+          );
+          const newState = {
+            ...lastState,
+            selection: newSelection
+          };
+          setInputState(newState);
+        }
+      };
+      inputDocument.addEventListener("mouseup", mouseUpHandler);
+    }
+    if (props.onMouseDown) {
+      props.onMouseDown(event);
+    }
+  }
+  let renderValue = props.value;
+  if (isMasked && isControlled) {
+    const input = getInputElement();
+    const isFocused = !!input && isInputFocused(input);
+    let newValue = isFocused || alwaysShowMask || props.value ? maskUtils.formatValue(props.value) : props.value;
+    if (beforeMaskedStateChange) {
+      newValue = beforeMaskedStateChange({
+        nextState: { value: newValue, selection: { start: null, end: null } }
+      }).value;
+    }
+    renderValue = newValue;
+  }
+  const lastSelection = getLastInputState().selection;
+  (0, import_react2.useLayoutEffect)(() => {
+    if (isMasked && isControlled) {
+      setInputState({
+        ...getLastInputState(),
+        value: renderValue
+      });
+    }
+  });
+  (0, import_react2.useLayoutEffect)(() => {
+    if (!isMasked) {
+      return;
+    }
+    const input = getInputElement();
+    const isFocused = isInputFocused(input);
+    const previousSelection = lastSelection;
+    const currentState = getInputState();
+    let newInputState = { ...currentState };
+    if (!isControlled) {
+      const currentValue = currentState.value;
+      const formattedValue = maskUtils.formatValue(currentValue);
+      const isValueEmpty = maskUtils.isValueEmpty(formattedValue);
+      const shouldFormatValue = !isValueEmpty || isFocused || alwaysShowMask;
+      if (shouldFormatValue) {
+        newInputState.value = formattedValue;
+      } else if (isValueEmpty && !isFocused) {
+        newInputState.value = "";
+      }
+    }
+    if (isFocused && !previousIsMasked) {
+      newInputState.selection = maskUtils.getDefaultSelectionForValue(
+        newInputState.value
+      );
+    } else if (isControlled && isFocused && previousSelection) {
+      if (previousSelection.start !== null && previousSelection.end !== null) {
+        newInputState.selection = previousSelection;
+      }
+    }
+    if (beforeMaskedStateChange) {
+      newInputState = beforeMaskedStateChange({
+        currentState,
+        nextState: newInputState
+      });
+    }
+    setInputState(newInputState);
+  });
+  const inputProps = {
+    ...restProps,
+    onFocus,
+    onBlur,
+    onChange: isMasked && isEditable ? onChange : props.onChange,
+    onMouseDown: isMasked && isEditable ? onMouseDown : props.onMouseDown,
+    // `ref` may target either the plain <input> DOM node or, when custom
+    // children are used, whatever node the child's own ref forwards to.
+    ref: (ref) => {
+      inputRef.current = ref;
+      if (isFunction(forwardedRef)) {
+        forwardedRef(ref);
+      } else if (forwardedRef !== null && typeof forwardedRef === "object") {
+        forwardedRef.current = ref;
+      }
+    },
+    value: isMasked && isControlled ? renderValue : props.value
+  };
+  if (children) {
+    validateChildren(props, children);
+    return import_react2.default.cloneElement(children, inputProps);
+  }
+  return /* @__PURE__ */ import_react2.default.createElement("input", { ...inputProps });
+});
+InputMask.displayName = "InputMask";
+var src_default = InputMask;
+//# sourceMappingURL=index.cjs.map