@mantine/hooks 9.0.0-alpha.3 → 9.0.0-alpha.5

package/cjs/use-mask/use-mask.cjs

@@ -0,0 +1,583 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const DEFAULT_TOKENS = {
+  "9": /[0-9]/,
+  a: /[A-Za-z]/,
+  A: /[A-Z]/,
+  "*": /[A-Za-z0-9]/,
+  "#": /[-+0-9]/
+};
+function parseMask(mask, tokens) {
+  if (Array.isArray(mask)) {
+    return mask.map((item) => {
+      if (item instanceof RegExp) {
+        return { type: "token", char: "_", pattern: item };
+      }
+      return { type: "literal", char: item };
+    });
+  }
+  const slots = [];
+  let optional = false;
+  for (let i = 0; i < mask.length; i++) {
+    const char = mask[i];
+    if (char === "\\" && i + 1 < mask.length) {
+      i++;
+      slots.push({ type: "literal", char: mask[i] });
+      continue;
+    }
+    if (char === "?") {
+      optional = true;
+      continue;
+    }
+    if (tokens[char]) {
+      slots.push({ type: "token", char, pattern: tokens[char], optional });
+    } else {
+      slots.push({ type: "literal", char, optional });
+    }
+  }
+  return slots;
+}
+function getSlotChar(slotCharOption, index) {
+  if (slotCharOption === null || slotCharOption === "" || slotCharOption === void 0) {
+    return "";
+  }
+  if (slotCharOption.length > 1) {
+    return slotCharOption[index] || "_";
+  }
+  return slotCharOption;
+}
+function applyMaskToRaw(raw, slots, _slotCharOption, transform) {
+  let result = "";
+  let rawIndex = 0;
+  let slotIndex = 0;
+  for (slotIndex = 0; slotIndex < slots.length; slotIndex++) {
+    const slot = slots[slotIndex];
+    if (slot.type === "literal") {
+      result += slot.char;
+    } else if (rawIndex < raw.length) {
+      const ch = transform ? transform(raw[rawIndex]) : raw[rawIndex];
+      if (slot.pattern && slot.pattern.test(ch)) {
+        result += ch;
+        rawIndex++;
+      } else {
+        rawIndex++;
+        slotIndex--;
+      }
+    } else {
+      break;
+    }
+  }
+  return result;
+}
+function buildDisplayValue(value, slots, slotCharOption, showSlots) {
+  if (!showSlots) {
+    return value;
+  }
+  let display = value;
+  for (let i = value.length; i < slots.length; i++) {
+    const slot = slots[i];
+    if (slot.type === "literal") {
+      display += slot.char;
+    } else {
+      const sc = getSlotChar(slotCharOption, i);
+      if (!sc) {
+        break;
+      }
+      display += sc;
+    }
+  }
+  return display;
+}
+function extractRaw(masked, slots) {
+  let raw = "";
+  for (let i = 0; i < masked.length && i < slots.length; i++) {
+    if (slots[i].type === "token") {
+      raw += masked[i];
+    }
+  }
+  return raw;
+}
+function checkComplete(masked, slots) {
+  for (let i = 0; i < slots.length; i++) {
+    if (slots[i].type === "token" && !slots[i].optional) {
+      if (i >= masked.length) {
+        return false;
+      }
+      if (!slots[i].pattern.test(masked[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function findNextTokenIndex(slots, from) {
+  for (let i = from; i < slots.length; i++) {
+    if (slots[i].type === "token") {
+      return i;
+    }
+  }
+  return slots.length;
+}
+function findPrevTokenIndex(slots, from) {
+  for (let i = from; i >= 0; i--) {
+    if (slots[i].type === "token") {
+      return i;
+    }
+  }
+  return -1;
+}
+function processInput(inputValue, slots, _slotCharOption) {
+  let result = "";
+  let inputIndex = 0;
+  for (let slotIndex = 0; slotIndex < slots.length && inputIndex <= inputValue.length; slotIndex++) {
+    const slot = slots[slotIndex];
+    if (slot.type === "literal") {
+      result += slot.char;
+      if (inputIndex < inputValue.length && inputValue[inputIndex] === slot.char) {
+        inputIndex++;
+      }
+      continue;
+    }
+    if (inputIndex >= inputValue.length) {
+      break;
+    }
+    while (inputIndex < inputValue.length) {
+      const ch = inputValue[inputIndex];
+      inputIndex++;
+      if (slot.pattern.test(ch)) {
+        result += ch;
+        break;
+      }
+    }
+    if (result.length <= slotIndex) {
+      break;
+    }
+  }
+  return result;
+}
+function getResolvedOptions(options, rawValue) {
+  const tokens = { ...DEFAULT_TOKENS, ...options.tokens };
+  let mask = options.mask;
+  let slotChar = options.slotChar === void 0 ? "_" : options.slotChar;
+  let separate = options.separate ?? false;
+  if (options.modify) {
+    const overrides = options.modify(rawValue);
+    if (overrides) {
+      if (overrides.mask !== void 0) {
+        mask = overrides.mask;
+      }
+      if (overrides.tokens !== void 0) {
+        Object.assign(tokens, overrides.tokens);
+      }
+      if (overrides.slotChar !== void 0) {
+        slotChar = overrides.slotChar;
+      }
+      if (overrides.separate !== void 0) {
+        separate = overrides.separate;
+      }
+    }
+  }
+  const slots = parseMask(mask, tokens);
+  return { slots, slotChar, separate, tokens, transform: options.transform };
+}
+function formatMask(raw, options) {
+  const { slots, slotChar, transform } = getResolvedOptions(options, raw);
+  return applyMaskToRaw(raw, slots, slotChar, transform);
+}
+function unformatMask(masked, options) {
+  const { slots } = getResolvedOptions(options, "");
+  return extractRaw(masked, slots);
+}
+function isMaskComplete(masked, options) {
+  const { slots } = getResolvedOptions(options, "");
+  return checkComplete(masked, slots);
+}
+function generatePattern(mode, options) {
+  const { slots } = getResolvedOptions(options, "");
+  let pattern = "";
+  for (const slot of slots) {
+    if (slot.type === "literal") {
+      pattern += slot.char.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    } else {
+      const src = slot.pattern.source;
+      if (mode === "full-inexact") {
+        pattern += slot.optional ? `${src}?` : src;
+      } else {
+        pattern += slot.optional ? `(${src})?` : `(${src})`;
+      }
+    }
+  }
+  return pattern;
+}
+function useMask(options) {
+  const optionsRef = react.useRef(options);
+  optionsRef.current = options;
+  const inputRef = react.useRef(null);
+  const [maskedValue, setMaskedValue] = react.useState("");
+  const [rawValue, setRawValue] = react.useState("");
+  const processedRef = react.useRef("");
+  const wasCompleteRef = react.useRef(false);
+  const isFocusedRef = react.useRef(false);
+  const getOptions = react.useCallback(() => {
+    const opts = optionsRef.current;
+    return getResolvedOptions(opts, rawValue);
+  }, [rawValue]);
+  const updateValue = react.useCallback(
+    (newMasked, cursorPos) => {
+      const opts = optionsRef.current;
+      const { slots } = getResolvedOptions(
+        opts,
+        extractRaw(newMasked, getResolvedOptions(opts, "").slots)
+      );
+      const raw = extractRaw(newMasked, slots);
+      const { slots: resolvedSlots, slotChar } = getResolvedOptions(opts, raw);
+      const reprocessed = processInput(newMasked, resolvedSlots);
+      const newRaw = extractRaw(reprocessed, resolvedSlots);
+      const showSlots = opts.alwaysShowMask || isFocusedRef.current;
+      const showOnFocus = opts.showMaskOnFocus !== false;
+      const shouldShowSlots = showSlots && (showOnFocus || reprocessed.length > 0);
+      const displayValue = buildDisplayValue(reprocessed, resolvedSlots, slotChar, shouldShowSlots);
+      processedRef.current = reprocessed;
+      setMaskedValue(displayValue);
+      setRawValue(newRaw);
+      if (inputRef.current) {
+        inputRef.current.value = displayValue;
+        if (cursorPos !== void 0 && document.activeElement === inputRef.current) {
+          const pos = Math.min(cursorPos, reprocessed.length);
+          inputRef.current.setSelectionRange(pos, pos);
+        }
+      }
+      if (opts.onChangeRaw) {
+        opts.onChangeRaw(newRaw, displayValue);
+      }
+      const complete = checkComplete(reprocessed, resolvedSlots);
+      if (complete && !wasCompleteRef.current && opts.onComplete) {
+        opts.onComplete(displayValue, newRaw);
+      }
+      wasCompleteRef.current = complete;
+      return { displayValue, newRaw, reprocessed, resolvedSlots };
+    },
+    [getOptions]
+  );
+  const handleInput = react.useCallback(
+    (e) => {
+      const input = e.target;
+      const opts = optionsRef.current;
+      const { slots: resolvedSlots, slotChar, transform } = getResolvedOptions(opts, "");
+      const raw = extractRaw(input.value, resolvedSlots);
+      const reformatted = applyMaskToRaw(raw, resolvedSlots, slotChar, transform);
+      updateValue(reformatted, reformatted.length);
+    },
+    [updateValue]
+  );
+  const clampCursorToProcessed = react.useCallback((input) => {
+    const opts = optionsRef.current;
+    const { slots } = getResolvedOptions(opts, "");
+    const processed = processedRef.current;
+    const cursorPos = input.selectionStart ?? 0;
+    const maxPos = processed.length > 0 ? findNextEditablePosition(processed.length, slots, processed) : findNextTokenIndex(slots, 0);
+    if (cursorPos > maxPos) {
+      input.setSelectionRange(maxPos, maxPos);
+    }
+  }, []);
+  const handleFocus = react.useCallback(() => {
+    isFocusedRef.current = true;
+    const opts = optionsRef.current;
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const { slots, slotChar } = getResolvedOptions(opts, "");
+    const showOnFocus = opts.showMaskOnFocus !== false;
+    const processed = processedRef.current;
+    if (showOnFocus || opts.alwaysShowMask) {
+      const display = buildDisplayValue(processed, slots, slotChar, true);
+      input.value = display;
+      setMaskedValue(display);
+    }
+    requestAnimationFrame(() => {
+      if (input === document.activeElement) {
+        clampCursorToProcessed(input);
+      }
+    });
+  }, [clampCursorToProcessed]);
+  const handleMouseUp = react.useCallback(() => {
+    const input = inputRef.current;
+    if (!input || input !== document.activeElement) {
+      return;
+    }
+    clampCursorToProcessed(input);
+  }, [clampCursorToProcessed]);
+  const handleBlur = react.useCallback(() => {
+    isFocusedRef.current = false;
+    const opts = optionsRef.current;
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const { slots, slotChar } = getResolvedOptions(opts, rawValue);
+    const processed = processInput(input.value, slots);
+    const complete = checkComplete(processed, slots);
+    if (opts.autoClear && !complete && processed.length > 0) {
+      input.value = "";
+      processedRef.current = "";
+      setMaskedValue("");
+      setRawValue("");
+      wasCompleteRef.current = false;
+      if (opts.onChangeRaw) {
+        opts.onChangeRaw("", "");
+      }
+      if (opts.alwaysShowMask) {
+        const emptyDisplay = buildDisplayValue("", slots, slotChar, true);
+        input.value = emptyDisplay;
+        setMaskedValue(emptyDisplay);
+      }
+      return;
+    }
+    if (!opts.alwaysShowMask && !complete) {
+      const display = buildDisplayValue(processed, slots, slotChar, false);
+      input.value = display;
+      setMaskedValue(display);
+    }
+  }, [rawValue]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      const input = e.target;
+      const opts = optionsRef.current;
+      const { slots, slotChar, transform } = getResolvedOptions(opts, rawValue);
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+      const processed = processedRef.current;
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        if (e.metaKey || e.ctrlKey && !e.altKey) {
+          const clampedStart = Math.min(start, processed.length);
+          const afterRaw2 = extractRaw(processed.slice(clampedStart), slots.slice(clampedStart));
+          const newValue2 = applyMaskToRaw(afterRaw2, slots, slotChar, transform);
+          updateValue(newValue2, 0);
+          return;
+        }
+        if (start !== end) {
+          const clampedEnd = Math.min(end, processed.length);
+          const before = processed.slice(0, start);
+          const afterRaw2 = extractRaw(processed.slice(clampedEnd), slots.slice(clampedEnd));
+          const newValue2 = applyMaskToRaw(
+            extractRaw(before, slots) + afterRaw2,
+            slots,
+            slotChar,
+            transform
+          );
+          updateValue(newValue2, start);
+          return;
+        }
+        if (start === 0) {
+          return;
+        }
+        let deletePos = start - 1;
+        while (deletePos >= 0 && slots[deletePos] && slots[deletePos].type === "literal") {
+          deletePos--;
+        }
+        if (deletePos < 0) {
+          return;
+        }
+        const beforeRaw = extractRaw(processed.slice(0, deletePos), slots.slice(0, deletePos));
+        const afterRaw = extractRaw(processed.slice(deletePos + 1), slots.slice(deletePos + 1));
+        const newValue = applyMaskToRaw(beforeRaw + afterRaw, slots, slotChar, transform);
+        updateValue(newValue, deletePos);
+      } else if (e.key === "Delete") {
+        e.preventDefault();
+        if (start !== end) {
+          const clampedEnd = Math.min(end, processed.length);
+          const before = processed.slice(0, start);
+          const afterRaw2 = extractRaw(processed.slice(clampedEnd), slots.slice(clampedEnd));
+          const newValue2 = applyMaskToRaw(
+            extractRaw(before, slots) + afterRaw2,
+            slots,
+            slotChar,
+            transform
+          );
+          updateValue(newValue2, start);
+          return;
+        }
+        let deletePos = start;
+        while (deletePos < slots.length && slots[deletePos] && slots[deletePos].type === "literal") {
+          deletePos++;
+        }
+        if (deletePos >= processed.length) {
+          return;
+        }
+        const beforeRaw = extractRaw(processed.slice(0, start), slots.slice(0, start));
+        const afterRaw = extractRaw(processed.slice(deletePos + 1), slots.slice(deletePos + 1));
+        const newValue = applyMaskToRaw(beforeRaw + afterRaw, slots, slotChar, transform);
+        updateValue(newValue, start);
+      } else if (e.key === "ArrowRight" && !e.shiftKey) {
+        const nextPos = findNextEditablePosition(start + 1, slots, input.value);
+        if (nextPos !== start + 1) {
+          e.preventDefault();
+          input.setSelectionRange(nextPos, nextPos);
+        }
+      } else if (e.key === "ArrowLeft" && !e.shiftKey) {
+        if (start > 0) {
+          const prevToken = findPrevTokenIndex(slots, start - 1);
+          if (prevToken >= 0 && prevToken !== start - 1) {
+            e.preventDefault();
+            input.setSelectionRange(prevToken + 1, prevToken + 1);
+          }
+        }
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault();
+        let insertPos = Math.min(start, processed.length);
+        while (insertPos < slots.length && slots[insertPos] && slots[insertPos].type === "literal") {
+          insertPos++;
+        }
+        if (insertPos >= slots.length) {
+          return;
+        }
+        const slot = slots[insertPos];
+        const ch = transform ? transform(e.key) : e.key;
+        if (!slot.pattern.test(ch)) {
+          return;
+        }
+        const beforeRaw = extractRaw(processed.slice(0, insertPos), slots.slice(0, insertPos));
+        const afterRaw = start < end ? extractRaw(
+          processed.slice(Math.min(end, processed.length)),
+          slots.slice(Math.min(end, processed.length))
+        ) : extractRaw(processed.slice(insertPos), slots.slice(insertPos));
+        const newValue = applyMaskToRaw(beforeRaw + ch + afterRaw, slots, slotChar, transform);
+        const newCursorPos = findNextEditablePosition(insertPos + 1, slots, newValue);
+        updateValue(newValue, newCursorPos);
+      }
+    },
+    [rawValue, updateValue]
+  );
+  const handlePaste = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      const input = e.target;
+      const opts = optionsRef.current;
+      const pastedText = e.clipboardData?.getData("text") ?? "";
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+      const processed = processedRef.current;
+      const { slots, slotChar, transform } = getResolvedOptions(opts, "");
+      const clampedEnd = Math.min(end, processed.length);
+      const beforeRaw = extractRaw(processed.slice(0, start), slots.slice(0, start));
+      const afterRaw = extractRaw(processed.slice(clampedEnd), slots.slice(clampedEnd));
+      const newValue = applyMaskToRaw(
+        beforeRaw + pastedText + afterRaw,
+        slots,
+        slotChar,
+        transform
+      );
+      const { reprocessed } = updateValue(newValue);
+      const pasteEndPos = Math.min((reprocessed || newValue).length, slots.length);
+      if (input === document.activeElement) {
+        input.setSelectionRange(pasteEndPos, pasteEndPos);
+      }
+    },
+    [updateValue]
+  );
+  const setAriaAttributes = react.useCallback((input) => {
+    const opts = optionsRef.current;
+    if (opts.invalid) {
+      input.setAttribute("aria-invalid", "true");
+    } else {
+      input.removeAttribute("aria-invalid");
+    }
+  }, []);
+  const refCallback = react.useCallback(
+    (node) => {
+      const prevInput = inputRef.current;
+      if (prevInput) {
+        prevInput.removeEventListener("input", handleInput);
+        prevInput.removeEventListener("focus", handleFocus);
+        prevInput.removeEventListener("blur", handleBlur);
+        prevInput.removeEventListener("mouseup", handleMouseUp);
+        prevInput.removeEventListener("keydown", handleKeyDown);
+        prevInput.removeEventListener("paste", handlePaste);
+      }
+      inputRef.current = node;
+      if (node) {
+        node.addEventListener("input", handleInput);
+        node.addEventListener("focus", handleFocus);
+        node.addEventListener("blur", handleBlur);
+        node.addEventListener("mouseup", handleMouseUp);
+        node.addEventListener("keydown", handleKeyDown);
+        node.addEventListener("paste", handlePaste);
+        setAriaAttributes(node);
+        if (options.alwaysShowMask && !node.value) {
+          const { slots, slotChar } = getResolvedOptions(options, "");
+          const display = buildDisplayValue("", slots, slotChar, true);
+          node.value = display;
+          setMaskedValue(display);
+        }
+      }
+    },
+    [
+      handleInput,
+      handleFocus,
+      handleBlur,
+      handleMouseUp,
+      handleKeyDown,
+      handlePaste,
+      setAriaAttributes,
+      options
+    ]
+  );
+  react.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    setAriaAttributes(input);
+  }, [options.invalid, setAriaAttributes]);
+  const isComplete = (() => {
+    const { slots } = getOptions();
+    return checkComplete(processedRef.current, slots);
+  })();
+  const reset = react.useCallback(() => {
+    const opts = optionsRef.current;
+    const input = inputRef.current;
+    processedRef.current = "";
+    setMaskedValue("");
+    setRawValue("");
+    wasCompleteRef.current = false;
+    if (input) {
+      if (opts.alwaysShowMask) {
+        const { slots, slotChar } = getResolvedOptions(opts, "");
+        const display = buildDisplayValue("", slots, slotChar, true);
+        input.value = display;
+        setMaskedValue(display);
+      } else {
+        input.value = "";
+      }
+    }
+    if (opts.onChangeRaw) {
+      opts.onChangeRaw("", "");
+    }
+  }, []);
+  return {
+    ref: refCallback,
+    value: maskedValue,
+    rawValue,
+    isComplete,
+    reset
+  };
+}
+function findNextEditablePosition(from, slots, value) {
+  let pos = from;
+  while (pos < slots.length && pos < value.length && slots[pos] && slots[pos].type === "literal") {
+    pos++;
+  }
+  return pos;
+}
+
+exports.formatMask = formatMask;
+exports.generatePattern = generatePattern;
+exports.isMaskComplete = isMaskComplete;
+exports.unformatMask = unformatMask;
+exports.useMask = useMask;
+//# sourceMappingURL=use-mask.cjs.map