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

package/esm/use-mask/use-mask.mjs

@@ -1,577 +0,0 @@
-'use client';
-import { useRef, useState, useCallback, useEffect } from '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 = useRef(options);
-  optionsRef.current = options;
-  const inputRef = useRef(null);
-  const [maskedValue, setMaskedValue] = useState("");
-  const [rawValue, setRawValue] = useState("");
-  const processedRef = useRef("");
-  const wasCompleteRef = useRef(false);
-  const isFocusedRef = useRef(false);
-  const getOptions = useCallback(() => {
-    const opts = optionsRef.current;
-    return getResolvedOptions(opts, rawValue);
-  }, [rawValue]);
-  const updateValue = 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 = 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 = 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 = 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 = useCallback(() => {
-    const input = inputRef.current;
-    if (!input || input !== document.activeElement) {
-      return;
-    }
-    clampCursorToProcessed(input);
-  }, [clampCursorToProcessed]);
-  const handleBlur = 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 = 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 = 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 = useCallback((input) => {
-    const opts = optionsRef.current;
-    if (opts.invalid) {
-      input.setAttribute("aria-invalid", "true");
-    } else {
-      input.removeAttribute("aria-invalid");
-    }
-  }, []);
-  const refCallback = 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
-    ]
-  );
-  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 = 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;
-}
-
-export { formatMask, generatePattern, isMaskComplete, unformatMask, useMask };
-//# sourceMappingURL=use-mask.mjs.map