@hh.ru/magritte-ui-input 5.0.22 → 5.0.24

package/index.esm-fa75fa26.js

@@ -0,0 +1,1650 @@
+import './index.css';
+import { useState, useCallback, useRef, useLayoutEffect, useEffect } from 'react';
+
+function getContentEditableSelection(element) {
+    const { anchorOffset = 0, focusOffset = 0 } = element.ownerDocument.getSelection() || {};
+    const from = Math.min(anchorOffset, focusOffset);
+    const to = Math.max(anchorOffset, focusOffset);
+    return [from, to];
+}
+
+function setContentEditableSelection(element, [from, to]) {
+    var _a, _b;
+    const document = element.ownerDocument;
+    const range = document.createRange();
+    range.setStart(element.firstChild || element, Math.min(from, ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) || 0));
+    range.setEnd(element.lastChild || element, Math.min(to, ((_b = element.textContent) === null || _b === void 0 ? void 0 : _b.length) || 0));
+    const selection = document.getSelection();
+    if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+}
+
+class ContentEditableAdapter {
+    constructor(element) {
+        this.element = element;
+        this.maxLength = Infinity;
+    }
+    get value() {
+        return this.element.innerText.replace(/\n\n$/, '\n');
+    }
+    set value(value) {
+        // Setting into innerHTML of element with `white-space: pre;` style
+        this.element.innerHTML = value.replace(/\n$/, '\n\n');
+    }
+    get selectionStart() {
+        return getContentEditableSelection(this.element)[0];
+    }
+    get selectionEnd() {
+        return getContentEditableSelection(this.element)[1];
+    }
+    setSelectionRange(from, to) {
+        setContentEditableSelection(this.element, [from || 0, to || 0]);
+    }
+    select() {
+        this.setSelectionRange(0, this.value.length);
+    }
+}
+function maskitoAdaptContentEditable(element) {
+    const adapter = new ContentEditableAdapter(element);
+    return new Proxy(element, {
+        get(target, prop) {
+            if (prop in adapter) {
+                return adapter[prop];
+            }
+            const nativeProperty = target[prop];
+            return typeof nativeProperty === 'function'
+                ? nativeProperty.bind(target)
+                : nativeProperty;
+        },
+        set(target, prop, val, receiver) {
+            return Reflect.set(prop in adapter ? adapter : target, prop, val, receiver);
+        },
+    });
+}
+
+const MASKITO_DEFAULT_ELEMENT_PREDICATE = e => e.isContentEditable
+    ? maskitoAdaptContentEditable(e)
+    : e.querySelector('input,textarea') ||
+        e;
+
+const MASKITO_DEFAULT_OPTIONS = {
+    mask: /^.*$/,
+    preprocessors: [],
+    postprocessors: [],
+    plugins: [],
+    overwriteMode: 'shift',
+};
+
+class MaskHistory {
+    constructor() {
+        this.now = null;
+        this.past = [];
+        this.future = [];
+    }
+    undo() {
+        const state = this.past.pop();
+        if (state && this.now) {
+            this.future.push(this.now);
+            this.updateElement(state, 'historyUndo');
+        }
+    }
+    redo() {
+        const state = this.future.pop();
+        if (state && this.now) {
+            this.past.push(this.now);
+            this.updateElement(state, 'historyRedo');
+        }
+    }
+    updateHistory(state) {
+        if (!this.now) {
+            this.now = state;
+            return;
+        }
+        const isValueChanged = this.now.value !== state.value;
+        const isSelectionChanged = this.now.selection.some((item, index) => item !== state.selection[index]);
+        if (!isValueChanged && !isSelectionChanged) {
+            return;
+        }
+        if (isValueChanged) {
+            this.past.push(this.now);
+            this.future = [];
+        }
+        this.now = state;
+    }
+    updateElement(state, inputType) {
+        this.now = state;
+        this.updateElementState(state, { inputType, data: null });
+    }
+}
+
+function areElementValuesEqual(sampleState, ...states) {
+    return states.every(({ value }) => value === sampleState.value);
+}
+function areElementStatesEqual(sampleState, ...states) {
+    return states.every(({ value, selection }) => value === sampleState.value &&
+        selection[0] === sampleState.selection[0] &&
+        selection[1] === sampleState.selection[1]);
+}
+
+function applyOverwriteMode({ value, selection }, newCharacters, mode) {
+    const [from, to] = selection;
+    const computedMode = typeof mode === 'function' ? mode({ value, selection }) : mode;
+    return {
+        value,
+        selection: computedMode === 'replace' ? [from, from + newCharacters.length] : [from, to],
+    };
+}
+
+function isFixedCharacter(char) {
+    return typeof char === 'string';
+}
+
+function getLeadingFixedCharacters(mask, validatedValuePart, newCharacter, initialElementState) {
+    let leadingFixedCharacters = '';
+    for (let i = validatedValuePart.length; i < mask.length; i++) {
+        const charConstraint = mask[i];
+        const isInitiallyExisted = (initialElementState === null || initialElementState === void 0 ? void 0 : initialElementState.value[i]) === charConstraint;
+        if (!isFixedCharacter(charConstraint) ||
+            (charConstraint === newCharacter && !isInitiallyExisted)) {
+            return leadingFixedCharacters;
+        }
+        leadingFixedCharacters += charConstraint;
+    }
+    return leadingFixedCharacters;
+}
+
+function validateValueWithMask(value, maskExpression) {
+    if (Array.isArray(maskExpression)) {
+        return (value.length === maskExpression.length &&
+            Array.from(value).every((char, i) => {
+                const charConstraint = maskExpression[i];
+                return isFixedCharacter(charConstraint)
+                    ? char === charConstraint
+                    : char.match(charConstraint);
+            }));
+    }
+    return maskExpression.test(value);
+}
+
+function guessValidValueByPattern(elementState, mask, initialElementState) {
+    let maskedFrom = null;
+    let maskedTo = null;
+    const maskedValue = Array.from(elementState.value).reduce((validatedCharacters, char, charIndex) => {
+        const leadingCharacters = getLeadingFixedCharacters(mask, validatedCharacters, char, initialElementState);
+        const newValidatedChars = validatedCharacters + leadingCharacters;
+        const charConstraint = mask[newValidatedChars.length];
+        if (isFixedCharacter(charConstraint)) {
+            return newValidatedChars + charConstraint;
+        }
+        if (!char.match(charConstraint)) {
+            return newValidatedChars;
+        }
+        if (maskedFrom === null && charIndex >= elementState.selection[0]) {
+            maskedFrom = newValidatedChars.length;
+        }
+        if (maskedTo === null && charIndex >= elementState.selection[1]) {
+            maskedTo = newValidatedChars.length;
+        }
+        return newValidatedChars + char;
+    }, '');
+    const trailingFixedCharacters = getLeadingFixedCharacters(mask, maskedValue, '', initialElementState);
+    return {
+        value: validateValueWithMask(maskedValue + trailingFixedCharacters, mask)
+            ? maskedValue + trailingFixedCharacters
+            : maskedValue,
+        selection: [maskedFrom !== null && maskedFrom !== void 0 ? maskedFrom : maskedValue.length, maskedTo !== null && maskedTo !== void 0 ? maskedTo : maskedValue.length],
+    };
+}
+
+function guessValidValueByRegExp({ value, selection }, maskRegExp) {
+    const [from, to] = selection;
+    let newFrom = from;
+    let newTo = to;
+    const validatedValue = Array.from(value).reduce((validatedValuePart, char, i) => {
+        const newPossibleValue = validatedValuePart + char;
+        if (from === i) {
+            newFrom = validatedValuePart.length;
+        }
+        if (to === i) {
+            newTo = validatedValuePart.length;
+        }
+        return newPossibleValue.match(maskRegExp) ? newPossibleValue : validatedValuePart;
+    }, '');
+    return { value: validatedValue, selection: [newFrom, newTo] };
+}
+
+function calibrateValueByMask(elementState, mask, initialElementState = null) {
+    if (validateValueWithMask(elementState.value, mask)) {
+        return elementState;
+    }
+    const { value, selection } = Array.isArray(mask)
+        ? guessValidValueByPattern(elementState, mask, initialElementState)
+        : guessValidValueByRegExp(elementState, mask);
+    return {
+        selection,
+        value: Array.isArray(mask) ? value.slice(0, mask.length) : value,
+    };
+}
+
+function removeFixedMaskCharacters(initialElementState, mask) {
+    if (!Array.isArray(mask)) {
+        return initialElementState;
+    }
+    const [from, to] = initialElementState.selection;
+    const selection = [];
+    const unmaskedValue = Array.from(initialElementState.value).reduce((rawValue, char, i) => {
+        const charConstraint = mask[i];
+        if (i === from) {
+            selection.push(rawValue.length);
+        }
+        if (i === to) {
+            selection.push(rawValue.length);
+        }
+        return isFixedCharacter(charConstraint) && charConstraint === char
+            ? rawValue
+            : rawValue + char;
+    }, '');
+    if (selection.length < 2) {
+        selection.push(...new Array(2 - selection.length).fill(unmaskedValue.length));
+    }
+    return {
+        value: unmaskedValue,
+        selection: [selection[0], selection[1]],
+    };
+}
+
+class MaskModel {
+    constructor(initialElementState, maskOptions) {
+        this.initialElementState = initialElementState;
+        this.maskOptions = maskOptions;
+        this.value = '';
+        this.selection = [0, 0];
+        const { value, selection } = calibrateValueByMask(this.initialElementState, this.getMaskExpression(this.initialElementState));
+        this.value = value;
+        this.selection = selection;
+    }
+    addCharacters([from, to], newCharacters) {
+        const { value } = this;
+        const maskExpression = this.getMaskExpression({
+            value: value.slice(0, from) + newCharacters + value.slice(to),
+            selection: [from + newCharacters.length, from + newCharacters.length],
+        });
+        const initialElementState = { value, selection: [from, to] };
+        const unmaskedElementState = removeFixedMaskCharacters(initialElementState, maskExpression);
+        const [unmaskedFrom, unmaskedTo] = applyOverwriteMode(unmaskedElementState, newCharacters, this.maskOptions.overwriteMode).selection;
+        const newUnmaskedLeadingValuePart = unmaskedElementState.value.slice(0, unmaskedFrom) + newCharacters;
+        const newCaretIndex = newUnmaskedLeadingValuePart.length;
+        const maskedElementState = calibrateValueByMask({
+            value: newUnmaskedLeadingValuePart +
+                unmaskedElementState.value.slice(unmaskedTo),
+            selection: [newCaretIndex, newCaretIndex],
+        }, maskExpression, initialElementState);
+        const isInvalidCharsInsertion = 
+        // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
+        value.slice(0, unmaskedFrom) ===
+            calibrateValueByMask({
+                value: newUnmaskedLeadingValuePart,
+                selection: [newCaretIndex, newCaretIndex],
+            }, maskExpression, initialElementState).value;
+        if (isInvalidCharsInsertion ||
+            areElementStatesEqual(this, maskedElementState) // If typing new characters does not change value
+        ) {
+            throw new Error('Invalid mask value');
+        }
+        this.value = maskedElementState.value;
+        this.selection = maskedElementState.selection;
+    }
+    deleteCharacters([from, to]) {
+        if (from === to || !to) {
+            return;
+        }
+        const { value } = this;
+        const maskExpression = this.getMaskExpression({
+            value: value.slice(0, from) + value.slice(to),
+            selection: [from, from],
+        });
+        const initialElementState = { value, selection: [from, to] };
+        const unmaskedElementState = removeFixedMaskCharacters(initialElementState, maskExpression);
+        const [unmaskedFrom, unmaskedTo] = unmaskedElementState.selection;
+        const newUnmaskedValue = unmaskedElementState.value.slice(0, unmaskedFrom) +
+            unmaskedElementState.value.slice(unmaskedTo);
+        const maskedElementState = calibrateValueByMask({ value: newUnmaskedValue, selection: [unmaskedFrom, unmaskedFrom] }, maskExpression, initialElementState);
+        this.value = maskedElementState.value;
+        this.selection = maskedElementState.selection;
+    }
+    getMaskExpression(elementState) {
+        const { mask } = this.maskOptions;
+        return typeof mask === 'function' ? mask(elementState) : mask;
+    }
+}
+
+class EventListener {
+    constructor(element) {
+        this.element = element;
+        this.listeners = [];
+    }
+    listen(eventType, fn, options) {
+        const untypedFn = fn;
+        this.element.addEventListener(eventType, untypedFn, options);
+        this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn));
+    }
+    destroy() {
+        this.listeners.forEach(stopListen => stopListen());
+    }
+}
+
+const HotkeyModifier = {
+    CTRL: 1 << 0,
+    ALT: 1 << 1,
+    SHIFT: 1 << 2,
+    META: 1 << 3,
+};
+// TODO add variants that can be processed correctly
+const HotkeyCode = {
+    Y: 89,
+    Z: 90,
+};
+/**
+ * Checks if the passed keyboard event match the required hotkey.
+ *
+ * @example
+ * input.addEventListener('keydown', (event) => {
+ *     if (isHotkey(event, HotkeyModifier.CTRL | HotkeyModifier.SHIFT, HotkeyCode.Z)) {
+ *         // redo hotkey pressed
+ *     }
+ * })
+ *
+ * @return will return `true` only if the {@link HotkeyCode} matches and only the necessary
+ * {@link HotkeyModifier modifiers} have been pressed
+ */
+function isHotkey(event, modifiers, hotkeyCode) {
+    return (event.ctrlKey === !!(modifiers & HotkeyModifier.CTRL) &&
+        event.altKey === !!(modifiers & HotkeyModifier.ALT) &&
+        event.shiftKey === !!(modifiers & HotkeyModifier.SHIFT) &&
+        event.metaKey === !!(modifiers & HotkeyModifier.META) &&
+        /**
+         * We intentionally use legacy {@link KeyboardEvent#keyCode `keyCode`} property. It is more
+         * "keyboard-layout"-independent than {@link KeyboardEvent#key `key`} or {@link KeyboardEvent#code `code`} properties.
+         * @see {@link https://github.com/taiga-family/maskito/issues/315 `KeyboardEvent#code` issue}
+         */
+        event.keyCode === hotkeyCode);
+}
+
+function isRedo(event) {
+    return (isHotkey(event, HotkeyModifier.CTRL, HotkeyCode.Y) || // Windows
+        isHotkey(event, HotkeyModifier.CTRL | HotkeyModifier.SHIFT, HotkeyCode.Z) || // Windows & Android
+        isHotkey(event, HotkeyModifier.META | HotkeyModifier.SHIFT, HotkeyCode.Z) // macOS & iOS
+    );
+}
+function isUndo(event) {
+    return (isHotkey(event, HotkeyModifier.CTRL, HotkeyCode.Z) || // Windows & Android
+        isHotkey(event, HotkeyModifier.META, HotkeyCode.Z) // macOS & iOS
+    );
+}
+
+/**
+ * Sets value to element, and dispatches input event
+ * if you passed ELementState, it also sets selection range
+ *
+ * @example
+ * maskitoUpdateElement(input, newValue);
+ * maskitoUpdateElement(input, elementState);
+ *
+ * @see {@link https://github.com/taiga-family/maskito/issues/804 issue}
+ *
+ * @return void
+ */
+function maskitoUpdateElement(element, valueOrElementState) {
+    var _a;
+    const initialValue = element.value;
+    if (typeof valueOrElementState === 'string') {
+        element.value = valueOrElementState;
+    }
+    else {
+        const [from, to] = valueOrElementState.selection;
+        element.value = valueOrElementState.value;
+        if (element.matches(':focus')) {
+            (_a = element.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(element, from, to);
+        }
+    }
+    if (element.value !== initialValue) {
+        element.dispatchEvent(new Event('input', 
+        /**
+         * React handles this event only on bubbling phase
+         *
+         * here is the list of events that are processed in the capture stage, others are processed in the bubbling stage
+         * https://github.com/facebook/react/blob/cb2439624f43c510007f65aea5c50a8bb97917e4/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js#L222
+         */
+        { bubbles: true }));
+    }
+}
+
+function getLineSelection({ value, selection }, isForward) {
+    const [from, to] = selection;
+    if (from !== to) {
+        return [from, to];
+    }
+    const nearestBreak = isForward
+        ? value.slice(from).indexOf('\n') + 1 || value.length
+        : value.slice(0, to).lastIndexOf('\n') + 1;
+    const selectFrom = isForward ? from : nearestBreak;
+    const selectTo = isForward ? nearestBreak : to;
+    return [selectFrom, selectTo];
+}
+
+function getNotEmptySelection({ value, selection }, isForward) {
+    const [from, to] = selection;
+    if (from !== to) {
+        return [from, to];
+    }
+    const notEmptySelection = isForward ? [from, to + 1] : [from - 1, to];
+    return notEmptySelection.map(x => Math.min(Math.max(x, 0), value.length));
+}
+
+const TRAILING_SPACES_REG = /\s+$/g;
+const LEADING_SPACES_REG = /^\s+/g;
+const SPACE_REG = /\s/;
+function getWordSelection({ value, selection }, isForward) {
+    const [from, to] = selection;
+    if (from !== to) {
+        return [from, to];
+    }
+    if (isForward) {
+        const valueAfterSelectionStart = value.slice(from);
+        const [leadingSpaces] = valueAfterSelectionStart.match(LEADING_SPACES_REG) || [
+            '',
+        ];
+        const nearestWordEndIndex = valueAfterSelectionStart
+            .trimStart()
+            .search(SPACE_REG);
+        return [
+            from,
+            nearestWordEndIndex !== -1
+                ? from + leadingSpaces.length + nearestWordEndIndex
+                : value.length,
+        ];
+    }
+    const valueBeforeSelectionEnd = value.slice(0, to);
+    const [trailingSpaces] = valueBeforeSelectionEnd.match(TRAILING_SPACES_REG) || [''];
+    const selectedWordLength = valueBeforeSelectionEnd
+        .trimEnd()
+        .split('')
+        .reverse()
+        .findIndex(char => char.match(SPACE_REG));
+    return [
+        selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0,
+        to,
+    ];
+}
+
+/* eslint-disable @typescript-eslint/ban-types */
+/**
+ * @internal
+ */
+function maskitoPipe(processors = []) {
+    return (initialData, ...readonlyArgs) => processors.reduce((data, fn) => (Object.assign(Object.assign({}, data), fn(data, ...readonlyArgs))), initialData);
+}
+
+function maskitoTransform(valueOrState, maskitoOptions) {
+    const options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), maskitoOptions);
+    const preprocessor = maskitoPipe(options.preprocessors);
+    const postprocessor = maskitoPipe(options.postprocessors);
+    const initialElementState = typeof valueOrState === 'string'
+        ? { value: valueOrState, selection: [0, 0] }
+        : valueOrState;
+    const { elementState } = preprocessor({ elementState: initialElementState, data: '' }, 'validation');
+    const maskModel = new MaskModel(elementState, options);
+    const { value, selection } = postprocessor(maskModel, initialElementState);
+    return typeof valueOrState === 'string' ? value : { value, selection };
+}
+
+class Maskito extends MaskHistory {
+    constructor(element, maskitoOptions) {
+        super();
+        this.element = element;
+        this.maskitoOptions = maskitoOptions;
+        this.isTextArea = this.element.nodeName === 'TEXTAREA';
+        this.eventListener = new EventListener(this.element);
+        this.options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), this.maskitoOptions);
+        this.preprocessor = maskitoPipe(this.options.preprocessors);
+        this.postprocessor = maskitoPipe(this.options.postprocessors);
+        this.teardowns = this.options.plugins.map(plugin => plugin(this.element, this.options));
+        this.updateHistory(this.elementState);
+        this.eventListener.listen('keydown', event => {
+            if (isRedo(event)) {
+                event.preventDefault();
+                return this.redo();
+            }
+            if (isUndo(event)) {
+                event.preventDefault();
+                return this.undo();
+            }
+        });
+        this.eventListener.listen('beforeinput', event => {
+            var _a;
+            const isForward = event.inputType.includes('Forward');
+            this.updateHistory(this.elementState);
+            switch (event.inputType) {
+                // historyUndo/historyRedo will not be triggered if value was modified programmatically
+                case 'historyUndo':
+                    event.preventDefault();
+                    return this.undo();
+                case 'historyRedo':
+                    event.preventDefault();
+                    return this.redo();
+                case 'deleteByCut':
+                case 'deleteContentBackward':
+                case 'deleteContentForward':
+                    return this.handleDelete({
+                        event,
+                        isForward,
+                        selection: getNotEmptySelection(this.elementState, isForward),
+                    });
+                case 'deleteWordForward':
+                case 'deleteWordBackward':
+                    return this.handleDelete({
+                        event,
+                        isForward,
+                        selection: getWordSelection(this.elementState, isForward),
+                        force: true,
+                    });
+                case 'deleteSoftLineBackward':
+                case 'deleteSoftLineForward':
+                case 'deleteHardLineBackward':
+                case 'deleteHardLineForward':
+                    return this.handleDelete({
+                        event,
+                        isForward,
+                        selection: getLineSelection(this.elementState, isForward),
+                        force: true,
+                    });
+                case 'insertCompositionText':
+                    return; // will be handled inside `compositionend` event
+                case 'insertLineBreak':
+                case 'insertParagraph':
+                    return this.handleEnter(event);
+                case 'insertFromPaste':
+                case 'insertText':
+                case 'insertFromDrop':
+                default:
+                    return this.handleInsert(event, event.data ||
+                        (
+                        // `event.data` for `contentEditable` is always `null` for paste/drop events
+                        (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain')) ||
+                        '');
+            }
+        });
+        this.eventListener.listen('input', ({ inputType }) => {
+            if (inputType === 'insertCompositionText') {
+                return; // will be handled inside `compositionend` event
+            }
+            this.ensureValueFitsMask();
+            this.updateHistory(this.elementState);
+        });
+        this.eventListener.listen('compositionend', () => {
+            this.ensureValueFitsMask();
+            this.updateHistory(this.elementState);
+        });
+    }
+    get elementState() {
+        const { value, selectionStart, selectionEnd } = this.element;
+        return {
+            value,
+            selection: [selectionStart || 0, selectionEnd || 0],
+        };
+    }
+    get maxLength() {
+        const { maxLength } = this.element;
+        return maxLength === -1 ? Infinity : maxLength;
+    }
+    destroy() {
+        this.eventListener.destroy();
+        this.teardowns.forEach(teardown => teardown === null || teardown === void 0 ? void 0 : teardown());
+    }
+    updateElementState({ value, selection }, eventInit = {
+        inputType: 'insertText',
+        data: null,
+    }) {
+        const initialValue = this.elementState.value;
+        this.updateValue(value);
+        this.updateSelectionRange(selection);
+        if (initialValue !== value) {
+            this.dispatchInputEvent(eventInit);
+        }
+    }
+    updateSelectionRange([from, to]) {
+        var _a;
+        const { element } = this;
+        if (element.matches(':focus') &&
+            (element.selectionStart !== from || element.selectionEnd !== to)) {
+            (_a = element.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(element, from, to);
+        }
+    }
+    updateValue(value) {
+        this.element.value = value;
+    }
+    ensureValueFitsMask() {
+        this.updateElementState(maskitoTransform(this.elementState, this.options));
+    }
+    dispatchInputEvent(eventInit = {
+        inputType: 'insertText',
+        data: null,
+    }) {
+        if (globalThis.InputEvent) {
+            this.element.dispatchEvent(new InputEvent('input', Object.assign(Object.assign({}, eventInit), { bubbles: true, cancelable: false })));
+        }
+    }
+    handleDelete({ event, selection, isForward, force = false, }) {
+        const initialState = {
+            value: this.elementState.value,
+            selection,
+        };
+        const [initialFrom, initialTo] = initialState.selection;
+        const { elementState } = this.preprocessor({
+            elementState: initialState,
+            data: '',
+        }, isForward ? 'deleteForward' : 'deleteBackward');
+        const maskModel = new MaskModel(elementState, this.options);
+        const [from, to] = elementState.selection;
+        maskModel.deleteCharacters([from, to]);
+        const newElementState = this.postprocessor(maskModel, initialState);
+        const newPossibleValue = initialState.value.slice(0, initialFrom) +
+            initialState.value.slice(initialTo);
+        if (newPossibleValue === newElementState.value &&
+            !force &&
+            !this.element.isContentEditable) {
+            return;
+        }
+        event.preventDefault();
+        if (areElementValuesEqual(initialState, elementState, maskModel, newElementState)) {
+            // User presses Backspace/Delete for the fixed value
+            return this.updateSelectionRange(isForward ? [to, to] : [from, from]);
+        }
+        this.updateElementState(newElementState, {
+            inputType: event.inputType,
+            data: null,
+        });
+        this.updateHistory(newElementState);
+    }
+    handleInsert(event, data) {
+        const initialElementState = this.elementState;
+        const { elementState, data: insertedText = data } = this.preprocessor({
+            data,
+            elementState: initialElementState,
+        }, 'insert');
+        const maskModel = new MaskModel(elementState, this.options);
+        try {
+            maskModel.addCharacters(elementState.selection, insertedText);
+        }
+        catch (_a) {
+            return event.preventDefault();
+        }
+        const [from, to] = elementState.selection;
+        const newPossibleValue = initialElementState.value.slice(0, from) +
+            data +
+            initialElementState.value.slice(to);
+        const newElementState = this.postprocessor(maskModel, initialElementState);
+        if (newElementState.value.length > this.maxLength) {
+            return event.preventDefault();
+        }
+        if (newPossibleValue !== newElementState.value ||
+            this.element.isContentEditable) {
+            event.preventDefault();
+            this.updateElementState(newElementState, {
+                data,
+                inputType: event.inputType,
+            });
+            this.updateHistory(newElementState);
+        }
+    }
+    handleEnter(event) {
+        if (this.isTextArea || this.element.isContentEditable) {
+            this.handleInsert(event, '\n');
+        }
+    }
+}
+
+/**
+ * Clamps a value between two inclusive limits
+ *
+ * @param value
+ * @param min lower limit
+ * @param max upper limit
+ */
+function clamp(value, min, max) {
+    const clampedValue = Math.min(Number(max), Math.max(Number(min), Number(value)));
+    return (value instanceof Date ? new Date(clampedValue) : clampedValue);
+}
+
+function countDigits(str) {
+    return str.replaceAll(/\W/g, '').length;
+}
+
+const getDateSegmentValueLength = (dateString) => {
+    var _a, _b, _c;
+    return ({
+        day: ((_a = dateString.match(/d/g)) === null || _a === void 0 ? void 0 : _a.length) || 0,
+        month: ((_b = dateString.match(/m/g)) === null || _b === void 0 ? void 0 : _b.length) || 0,
+        year: ((_c = dateString.match(/y/g)) === null || _c === void 0 ? void 0 : _c.length) || 0,
+    });
+};
+
+function dateToSegments(date) {
+    return {
+        day: String(date.getDate()).padStart(2, '0'),
+        month: String(date.getMonth() + 1).padStart(2, '0'),
+        year: String(date.getFullYear()).padStart(4, '0'),
+        hours: String(date.getHours()).padStart(2, '0'),
+        minutes: String(date.getMinutes()).padStart(2, '0'),
+        seconds: String(date.getSeconds()).padStart(2, '0'),
+        milliseconds: String(date.getMilliseconds()).padStart(3, '0'),
+    };
+}
+
+function getFirstCompleteDate(dateString, dateModeTemplate) {
+    const digitsInDate = countDigits(dateModeTemplate);
+    const [completeDate = ''] = dateString.match(new RegExp(`(\\D*\\d){${digitsInDate}}`)) || [];
+    return completeDate;
+}
+
+function isDateStringComplete(dateString, dateModeTemplate) {
+    if (dateString.length < dateModeTemplate.length) {
+        return false;
+    }
+    return dateString.split(/\D/).every(segment => !segment.match(/^0+$/));
+}
+
+function parseDateRangeString(dateRange, dateModeTemplate, rangeSeparator) {
+    const digitsInDate = countDigits(dateModeTemplate);
+    return (dateRange
+        .replace(rangeSeparator, '')
+        .match(new RegExp(`(\\D*\\d[^\\d\\s]*){1,${digitsInDate}}`, 'g')) || []);
+}
+
+function parseDateString(dateString, fullMode) {
+    const cleanMode = fullMode.replaceAll(/[^dmy]/g, '');
+    const onlyDigitsDate = dateString.replaceAll(/\D+/g, '');
+    const dateSegments = {
+        day: onlyDigitsDate.slice(cleanMode.indexOf('d'), cleanMode.lastIndexOf('d') + 1),
+        month: onlyDigitsDate.slice(cleanMode.indexOf('m'), cleanMode.lastIndexOf('m') + 1),
+        year: onlyDigitsDate.slice(cleanMode.indexOf('y'), cleanMode.lastIndexOf('y') + 1),
+    };
+    return Object.fromEntries(Object.entries(dateSegments)
+        .filter(([_, value]) => Boolean(value))
+        .sort(([a], [b]) => fullMode.toLowerCase().indexOf(a[0]) >
+        fullMode.toLowerCase().indexOf(b[0])
+        ? 1
+        : -1));
+}
+
+function segmentsToDate(parsedDate, parsedTime) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const year = ((_a = parsedDate.year) === null || _a === void 0 ? void 0 : _a.length) === 2 ? `20${parsedDate.year}` : parsedDate.year;
+    const date = new Date(Number(year !== null && year !== void 0 ? year : '0'), Number((_b = parsedDate.month) !== null && _b !== void 0 ? _b : '1') - 1, Number((_c = parsedDate.day) !== null && _c !== void 0 ? _c : '1'), Number((_d = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.hours) !== null && _d !== void 0 ? _d : '0'), Number((_e = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.minutes) !== null && _e !== void 0 ? _e : '0'), Number((_f = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.seconds) !== null && _f !== void 0 ? _f : '0'), Number((_g = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.milliseconds) !== null && _g !== void 0 ? _g : '0'));
+    // needed for years less than 1900
+    date.setFullYear(Number(year !== null && year !== void 0 ? year : '0'));
+    return date;
+}
+
+const DATE_TIME_SEPARATOR = ', ';
+
+function toDateString({ day, month, year, hours, minutes, seconds, milliseconds, }, { dateMode, dateTimeSeparator = DATE_TIME_SEPARATOR, timeMode, }) {
+    var _a;
+    const safeYear = ((_a = dateMode.match(/y/g)) === null || _a === void 0 ? void 0 : _a.length) === 2 ? year === null || year === void 0 ? void 0 : year.slice(-2) : year;
+    const fullMode = dateMode + (timeMode ? dateTimeSeparator + timeMode : '');
+    return fullMode
+        .replaceAll(/d+/g, day !== null && day !== void 0 ? day : '')
+        .replaceAll(/m+/g, month !== null && month !== void 0 ? month : '')
+        .replaceAll(/y+/g, safeYear !== null && safeYear !== void 0 ? safeYear : '')
+        .replaceAll(/H+/g, hours !== null && hours !== void 0 ? hours : '')
+        .replaceAll('MSS', milliseconds !== null && milliseconds !== void 0 ? milliseconds : '')
+        .replaceAll(/M+/g, minutes !== null && minutes !== void 0 ? minutes : '')
+        .replaceAll(/S+/g, seconds !== null && seconds !== void 0 ? seconds : '')
+        .replaceAll(/^\D+/g, '')
+        .replaceAll(/\D+$/g, '');
+}
+
+const DATE_SEGMENTS_MAX_VALUES = {
+    day: 31,
+    month: 12,
+    year: 9999,
+};
+
+const DEFAULT_MIN_DATE = new Date('0001-01-01');
+const DEFAULT_MAX_DATE = new Date('9999-12-31');
+
+const DEFAULT_TIME_SEGMENT_MAX_VALUES = {
+    hours: 23,
+    minutes: 59,
+    seconds: 59,
+    milliseconds: 999,
+};
+
+const TIME_FIXED_CHARACTERS = [':', '.'];
+
+const TIME_SEGMENT_VALUE_LENGTHS = {
+    hours: 2,
+    minutes: 2,
+    seconds: 2,
+    milliseconds: 3,
+};
+/**
+ * {@link https://symbl.cc/en/003A/ Colon}
+ * is a punctuation mark that connects parts of a text logically.
+ * ---
+ * is also used as separator in time.
+ */
+const CHAR_COLON = '\u003A';
+/**
+ * {@link https://symbl.cc/en/FF1A/ Full-width colon}
+ * is a full-width punctuation mark used to separate parts of a text commonly in Japanese.
+ */
+const CHAR_JP_COLON = '\uFF1A';
+
+function validateDateString({ dateString, dateModeTemplate, offset, selection: [from, to], }) {
+    const parsedDate = parseDateString(dateString, dateModeTemplate);
+    const dateSegments = Object.entries(parsedDate);
+    const validatedDateSegments = {};
+    for (const [segmentName, segmentValue] of dateSegments) {
+        const validatedDate = toDateString(validatedDateSegments, {
+            dateMode: dateModeTemplate,
+        });
+        const maxSegmentValue = DATE_SEGMENTS_MAX_VALUES[segmentName];
+        const fantomSeparator = validatedDate.length && 1;
+        const lastSegmentDigitIndex = offset +
+            validatedDate.length +
+            fantomSeparator +
+            getDateSegmentValueLength(dateModeTemplate)[segmentName];
+        const isLastSegmentDigitAdded = lastSegmentDigitIndex >= from && lastSegmentDigitIndex === to;
+        if (isLastSegmentDigitAdded && Number(segmentValue) > Number(maxSegmentValue)) {
+            // 3|1.10.2010 => Type 9 => 3|1.10.2010
+            return { validatedDateString: '', updatedSelection: [from, to] }; // prevent changes
+        }
+        if (isLastSegmentDigitAdded && Number(segmentValue) < 1) {
+            // 31.0|1.2010 => Type 0 => 31.0|1.2010
+            return { validatedDateString: '', updatedSelection: [from, to] }; // prevent changes
+        }
+        validatedDateSegments[segmentName] = segmentValue;
+    }
+    const validatedDateString = toDateString(validatedDateSegments, {
+        dateMode: dateModeTemplate,
+    });
+    const addedDateSegmentSeparators = validatedDateString.length - dateString.length;
+    return {
+        validatedDateString,
+        updatedSelection: [
+            from + addedDateSegmentSeparators,
+            to + addedDateSegmentSeparators,
+        ],
+    };
+}
+
+/**
+ * Copy-pasted solution from lodash
+ * @see https://lodash.com/docs/4.17.15#escapeRegExp
+ */
+const reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+const reHasRegExpChar = new RegExp(reRegExpChar.source);
+function escapeRegExp(str) {
+    return str && reHasRegExpChar.test(str) ? str.replaceAll(reRegExpChar, '\\$&') : str;
+}
+
+function padWithZeroesUntilValid(segmentValue, paddedMaxValue, prefixedZeroesCount = 0) {
+    if (Number(segmentValue.padEnd(paddedMaxValue.length, '0')) <= Number(paddedMaxValue)) {
+        return { validatedSegmentValue: segmentValue, prefixedZeroesCount };
+    }
+    if (segmentValue.endsWith('0')) {
+        // 00:|00 => Type 9 => 00:09|
+        return padWithZeroesUntilValid(`0${segmentValue.slice(0, paddedMaxValue.length - 1)}`, paddedMaxValue, prefixedZeroesCount + 1);
+    }
+    // |19:00 => Type 2 => 2|0:00
+    return padWithZeroesUntilValid(`${segmentValue.slice(0, paddedMaxValue.length - 1)}0`, paddedMaxValue, prefixedZeroesCount);
+}
+
+/**
+ * Replace fullwidth colon with half width colon
+ * @param fullWidthColon full width colon
+ * @returns processed half width colon
+ */
+function toHalfWidthColon(fullWidthColon) {
+    return fullWidthColon.replaceAll(new RegExp(CHAR_JP_COLON, 'g'), CHAR_COLON);
+}
+
+/**
+ * Replace fullwidth numbers with half width number
+ * @param fullWidthNumber full width number
+ * @returns processed half width number
+ */
+function toHalfWidthNumber(fullWidthNumber) {
+    return fullWidthNumber.replaceAll(/[０-９]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xfee0));
+}
+
+/**
+ * Convert full width colon (：) to half width one (:)
+ */
+function createColonConvertPreprocessor() {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        return {
+            elementState: {
+                selection,
+                value: toHalfWidthColon(value),
+            },
+            data: toHalfWidthColon(data),
+        };
+    };
+}
+
+function createDateSegmentsZeroPaddingPostprocessor({ dateModeTemplate, dateSegmentSeparator, splitFn, uniteFn, }) {
+    return ({ value, selection }) => {
+        var _a;
+        const [from, to] = selection;
+        const { dateStrings, restPart = '' } = splitFn(value);
+        const validatedDateStrings = [];
+        let caretShift = 0;
+        dateStrings.forEach(dateString => {
+            const parsedDate = parseDateString(dateString, dateModeTemplate);
+            const dateSegments = Object.entries(parsedDate);
+            const validatedDateSegments = dateSegments.reduce((acc, [segmentName, segmentValue]) => {
+                const { validatedSegmentValue, prefixedZeroesCount } = padWithZeroesUntilValid(segmentValue, `${DATE_SEGMENTS_MAX_VALUES[segmentName]}`);
+                caretShift += prefixedZeroesCount;
+                return Object.assign(Object.assign({}, acc), { [segmentName]: validatedSegmentValue });
+            }, {});
+            validatedDateStrings.push(toDateString(validatedDateSegments, { dateMode: dateModeTemplate }));
+        });
+        const validatedValue = uniteFn(validatedDateStrings, value) +
+            (((_a = dateStrings[dateStrings.length - 1]) === null || _a === void 0 ? void 0 : _a.endsWith(dateSegmentSeparator))
+                ? dateSegmentSeparator
+                : '') +
+            restPart;
+        if (caretShift && validatedValue[to + 1] === dateSegmentSeparator) {
+            /**
+             * If `caretShift` > 0, it means that time segment was padded with zero.
+             * It is only possible if any character insertion happens.
+             * If caret is before `dateSegmentSeparator` => it should be moved after `dateSegmentSeparator`.
+             */
+            caretShift++;
+        }
+        return {
+            selection: [from + caretShift, to + caretShift],
+            value: validatedValue,
+        };
+    };
+}
+
+/**
+ * It replaces pseudo range separators with valid one.
+ * @example '01.01.2000_11.11.2000' -> '01.01.2000 - 01.01.2000'
+ * @example '01.01.2000_23:59' -> '01.01.2000, 23:59'
+ */
+function createFirstDateEndSeparatorPreprocessor({ dateModeTemplate, firstDateEndSeparator, dateSegmentSeparator, pseudoFirstDateEndSeparators, }) {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        const firstCompleteDate = getFirstCompleteDate(value, dateModeTemplate);
+        const pseudoSeparators = pseudoFirstDateEndSeparators.filter(x => !firstDateEndSeparator.includes(x) && x !== dateSegmentSeparator);
+        const pseudoSeparatorsRE = new RegExp(`[${pseudoSeparators.join('')}]`, 'gi');
+        return {
+            elementState: {
+                selection,
+                value: firstCompleteDate && value.length > firstCompleteDate.length
+                    ? firstCompleteDate +
+                        value
+                            .slice(firstCompleteDate.length)
+                            .replace(/^[\D\s]*/, firstDateEndSeparator)
+                    : value,
+            },
+            data: data.replace(pseudoSeparatorsRE, firstDateEndSeparator),
+        };
+    };
+}
+
+/**
+ * Convert full width numbers like １, ２ to half width numbers 1, 2
+ */
+function createFullWidthToHalfWidthPreprocessor() {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        return {
+            elementState: {
+                selection,
+                value: toHalfWidthNumber(value),
+            },
+            data: toHalfWidthNumber(data),
+        };
+    };
+}
+
+function raiseSegmentValueToMin(segments, fullMode) {
+    const segmentsLength = getDateSegmentValueLength(fullMode);
+    return Object.fromEntries(Object.entries(segments).map(([key, value]) => {
+        const segmentLength = segmentsLength[key];
+        return [
+            key,
+            value.length === segmentLength && value.match(/^0+$/)
+                ? '1'.padStart(segmentLength, '0')
+                : value,
+        ];
+    }));
+}
+
+function createMinMaxDatePostprocessor({ dateModeTemplate, min = DEFAULT_MIN_DATE, max = DEFAULT_MAX_DATE, rangeSeparator = '', dateSegmentSeparator = '.', }) {
+    return ({ value, selection }) => {
+        const endsWithRangeSeparator = rangeSeparator && value.endsWith(rangeSeparator);
+        const dateStrings = parseDateRangeString(value, dateModeTemplate, rangeSeparator);
+        let validatedValue = '';
+        for (const dateString of dateStrings) {
+            validatedValue += validatedValue ? rangeSeparator : '';
+            const parsedDate = parseDateString(dateString, dateModeTemplate);
+            if (!isDateStringComplete(dateString, dateModeTemplate)) {
+                const fixedDate = raiseSegmentValueToMin(parsedDate, dateModeTemplate);
+                const fixedValue = toDateString(fixedDate, { dateMode: dateModeTemplate });
+                const tail = dateString.endsWith(dateSegmentSeparator)
+                    ? dateSegmentSeparator
+                    : '';
+                validatedValue += fixedValue + tail;
+                continue;
+            }
+            const date = segmentsToDate(parsedDate);
+            const clampedDate = clamp(date, min, max);
+            validatedValue += toDateString(dateToSegments(clampedDate), {
+                dateMode: dateModeTemplate,
+            });
+        }
+        return {
+            selection,
+            value: validatedValue + (endsWithRangeSeparator ? rangeSeparator : ''),
+        };
+    };
+}
+
+function normalizeDatePreprocessor({ dateModeTemplate, dateSegmentsSeparator, rangeSeparator = '', dateTimeSeparator = DATE_TIME_SEPARATOR, }) {
+    return ({ elementState, data }) => {
+        const separator = rangeSeparator
+            ? new RegExp(`${rangeSeparator}|-`)
+            : dateTimeSeparator;
+        const possibleDates = data.split(separator);
+        const dates = data.includes(dateTimeSeparator)
+            ? [possibleDates[0]]
+            : possibleDates;
+        if (dates.every(date => date.trim().split(/\D/).filter(Boolean).length ===
+            dateModeTemplate.split(dateSegmentsSeparator).length)) {
+            const newData = dates
+                .map(date => normalizeDateString(date, dateModeTemplate, dateSegmentsSeparator))
+                .join(rangeSeparator);
+            return {
+                elementState,
+                data: `${newData}${data.includes(dateTimeSeparator)
+                    ? dateTimeSeparator + possibleDates[1] || ''
+                    : ''}`,
+            };
+        }
+        return { elementState, data };
+    };
+}
+function normalizeDateString(dateString, template, separator) {
+    const dateSegments = dateString.split(/\D/).filter(Boolean);
+    const templateSegments = template.split(separator);
+    const normalizedSegments = dateSegments.map((segment, index) => index === templateSegments.length - 1
+        ? segment
+        : segment.padStart(templateSegments[index].length, '0'));
+    return normalizedSegments.join(separator);
+}
+
+function createValidDatePreprocessor({ dateModeTemplate, dateSegmentsSeparator, rangeSeparator = '', }) {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        if (data === dateSegmentsSeparator) {
+            return {
+                elementState,
+                data: selection[0] === value.length ? data : '',
+            };
+        }
+        const newCharacters = data.replaceAll(new RegExp(`[^\\d${escapeRegExp(dateSegmentsSeparator)}${rangeSeparator}]`, 'g'), '');
+        if (!newCharacters) {
+            return { elementState, data: '' };
+        }
+        const [from, rawTo] = selection;
+        let to = rawTo + data.length;
+        const newPossibleValue = value.slice(0, from) + newCharacters + value.slice(to);
+        const dateStrings = parseDateRangeString(newPossibleValue, dateModeTemplate, rangeSeparator);
+        let validatedValue = '';
+        const hasRangeSeparator = Boolean(rangeSeparator) && newPossibleValue.includes(rangeSeparator);
+        for (const dateString of dateStrings) {
+            const { validatedDateString, updatedSelection } = validateDateString({
+                dateString,
+                dateModeTemplate,
+                offset: validatedValue.length,
+                selection: [from, to],
+            });
+            if (dateString && !validatedDateString) {
+                return { elementState, data: '' }; // prevent changes
+            }
+            to = updatedSelection[1];
+            validatedValue +=
+                hasRangeSeparator && !validatedValue
+                    ? validatedDateString + rangeSeparator
+                    : validatedDateString;
+        }
+        const newData = validatedValue.slice(from, to);
+        return {
+            elementState: {
+                selection,
+                value: validatedValue.slice(0, from) +
+                    newData
+                        .split(dateSegmentsSeparator)
+                        .map(segment => '0'.repeat(segment.length))
+                        .join(dateSegmentsSeparator) +
+                    validatedValue.slice(to),
+            },
+            data: newData,
+        };
+    };
+}
+
+const noop = () => { };
+function createTimeSegmentsSteppingPlugin({ step, fullMode, timeSegmentMaxValues, }) {
+    const segmentsIndexes = createTimeSegmentsIndexes(fullMode);
+    return step <= 0
+        ? noop
+        : element => {
+            const listener = (event) => {
+                if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+                    return;
+                }
+                event.preventDefault();
+                const selectionStart = element.selectionStart || 0;
+                const activeSegment = getActiveSegment({
+                    segmentsIndexes,
+                    selectionStart,
+                });
+                if (!activeSegment) {
+                    return;
+                }
+                const updatedValue = updateSegmentValue({
+                    selection: segmentsIndexes.get(activeSegment),
+                    value: element.value,
+                    toAdd: event.key === 'ArrowUp' ? step : -step,
+                    max: timeSegmentMaxValues[activeSegment],
+                });
+                maskitoUpdateElement(element, {
+                    value: updatedValue,
+                    selection: [selectionStart, selectionStart],
+                });
+            };
+            element.addEventListener('keydown', listener);
+            return () => element.removeEventListener('keydown', listener);
+        };
+}
+function createTimeSegmentsIndexes(fullMode) {
+    return new Map([
+        ['hours', getSegmentRange(fullMode, 'HH')],
+        ['minutes', getSegmentRange(fullMode, 'MM')],
+        ['seconds', getSegmentRange(fullMode, 'SS')],
+        ['milliseconds', getSegmentRange(fullMode, 'MSS')],
+    ]);
+}
+function getSegmentRange(mode, segment) {
+    const index = mode.indexOf(segment);
+    return index === -1 ? [-1, -1] : [index, index + segment.length];
+}
+function getActiveSegment({ segmentsIndexes, selectionStart, }) {
+    for (const [segmentName, segmentRange] of segmentsIndexes.entries()) {
+        const [from, to] = segmentRange;
+        if (from <= selectionStart && selectionStart <= to) {
+            return segmentName;
+        }
+    }
+    return null;
+}
+function updateSegmentValue({ selection, value, toAdd, max, }) {
+    const [from, to] = selection;
+    const segmentValue = Number(value.slice(from, to).padEnd(to - from, '0'));
+    const newSegmentValue = mod(segmentValue + toAdd, max + 1);
+    return (value.slice(0, from) +
+        String(newSegmentValue).padStart(to - from, '0') +
+        value.slice(to, value.length));
+}
+function mod(value, max) {
+    if (value < 0) {
+        value += Math.floor(Math.abs(value) / max + 1) * max;
+    }
+    return value % max;
+}
+
+function createZeroPlaceholdersPreprocessor() {
+    return ({ elementState }, actionType) => {
+        const { value, selection } = elementState;
+        if (!value || isLastChar(value, selection)) {
+            return { elementState };
+        }
+        const [from, to] = selection;
+        const zeroes = value.slice(from, to).replaceAll(/\d/g, '0');
+        const newValue = value.slice(0, from) + zeroes + value.slice(to);
+        if (actionType === 'validation' || (actionType === 'insert' && from === to)) {
+            return {
+                elementState: { selection, value: newValue },
+            };
+        }
+        return {
+            elementState: {
+                selection: actionType === 'deleteBackward' || actionType === 'insert'
+                    ? [from, from]
+                    : [to, to],
+                value: newValue,
+            },
+        };
+    };
+}
+function isLastChar(value, [_, to]) {
+    return to === value.length;
+}
+
+function maskitoDateOptionsGenerator({ mode, separator = '.', max, min, }) {
+    const dateModeTemplate = mode.split('/').join(separator);
+    return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), { mask: Array.from(dateModeTemplate).map(char => char === separator ? char : /\d/), overwriteMode: 'replace', preprocessors: [
+            createFullWidthToHalfWidthPreprocessor(),
+            createZeroPlaceholdersPreprocessor(),
+            normalizeDatePreprocessor({
+                dateModeTemplate,
+                dateSegmentsSeparator: separator,
+            }),
+            createValidDatePreprocessor({
+                dateModeTemplate,
+                dateSegmentsSeparator: separator,
+            }),
+        ], postprocessors: [
+            createDateSegmentsZeroPaddingPostprocessor({
+                dateModeTemplate,
+                dateSegmentSeparator: separator,
+                splitFn: value => ({ dateStrings: [value] }),
+                uniteFn: ([dateString]) => dateString,
+            }),
+            createMinMaxDatePostprocessor({
+                min,
+                max,
+                dateModeTemplate,
+                dateSegmentSeparator: separator,
+            }),
+        ] });
+}
+
+function padTimeSegments(timeSegments) {
+    return Object.fromEntries(Object.entries(timeSegments).map(([segmentName, segmentValue]) => [
+        segmentName,
+        `${segmentValue}`.padEnd(TIME_SEGMENT_VALUE_LENGTHS[segmentName], '0'),
+    ]));
+}
+
+const SEGMENT_FULL_NAME = {
+    HH: 'hours',
+    MM: 'minutes',
+    SS: 'seconds',
+    MSS: 'milliseconds',
+};
+/**
+ * @param timeString can be with/without fixed characters
+ */
+function parseTimeString(timeString, timeMode) {
+    const onlyDigits = timeString.replaceAll(/\D+/g, '');
+    let offset = 0;
+    return Object.fromEntries(timeMode.split(/\W/).map(segmentAbbr => {
+        const segmentValue = onlyDigits.slice(offset, offset + segmentAbbr.length);
+        offset += segmentAbbr.length;
+        return [SEGMENT_FULL_NAME[segmentAbbr], segmentValue];
+    }));
+}
+
+const LEADING_NON_DIGITS = /^\D*/;
+const TRAILING_NON_DIGITS = /\D*$/;
+function toTimeString({ hours = '', minutes = '', seconds = '', milliseconds = '', }) {
+    return `${hours}:${minutes}:${seconds}.${milliseconds}`
+        .replace(LEADING_NON_DIGITS, '')
+        .replace(TRAILING_NON_DIGITS, '');
+}
+
+const TRAILING_TIME_SEGMENT_SEPARATOR_REG = new RegExp(`[${TIME_FIXED_CHARACTERS.map(escapeRegExp).join('')}]$`);
+function validateTimeString({ timeString, paddedMaxValues, offset, selection: [from, to], timeMode, }) {
+    const parsedTime = parseTimeString(timeString, timeMode);
+    const possibleTimeSegments = Object.entries(parsedTime);
+    const validatedTimeSegments = {};
+    let paddedZeroes = 0;
+    for (const [segmentName, segmentValue] of possibleTimeSegments) {
+        const validatedTime = toTimeString(validatedTimeSegments);
+        const maxSegmentValue = paddedMaxValues[segmentName];
+        const fantomSeparator = validatedTime.length && 1;
+        const lastSegmentDigitIndex = offset +
+            validatedTime.length +
+            fantomSeparator +
+            TIME_SEGMENT_VALUE_LENGTHS[segmentName];
+        const isLastSegmentDigitAdded = lastSegmentDigitIndex >= from && lastSegmentDigitIndex <= to;
+        if (isLastSegmentDigitAdded && Number(segmentValue) > Number(maxSegmentValue)) {
+            // 2|0:00 => Type 9 => 2|0:00
+            return { validatedTimeString: '', updatedTimeSelection: [from, to] }; // prevent changes
+        }
+        const { validatedSegmentValue, prefixedZeroesCount } = padWithZeroesUntilValid(segmentValue, `${maxSegmentValue}`);
+        paddedZeroes += prefixedZeroesCount;
+        validatedTimeSegments[segmentName] = validatedSegmentValue;
+    }
+    const [trailingSegmentSeparator = ''] = timeString.match(TRAILING_TIME_SEGMENT_SEPARATOR_REG) || [];
+    const validatedTimeString = toTimeString(validatedTimeSegments) + trailingSegmentSeparator;
+    const addedDateSegmentSeparators = Math.max(validatedTimeString.length - timeString.length, 0);
+    return {
+        validatedTimeString,
+        updatedTimeSelection: [
+            from + paddedZeroes + addedDateSegmentSeparators,
+            to + paddedZeroes + addedDateSegmentSeparators,
+        ],
+    };
+}
+
+function isDateTimeStringComplete(dateTimeString, { dateMode, timeMode, dateTimeSeparator = DATE_TIME_SEPARATOR, }) {
+    return (dateTimeString.length >=
+        dateMode.length + timeMode.length + dateTimeSeparator.length &&
+        dateTimeString
+            .split(dateTimeSeparator)[0]
+            .split(/\D/)
+            .every(segment => !segment.match(/^0+$/)));
+}
+
+function parseDateTimeString(dateTime, { dateModeTemplate, dateTimeSeparator, }) {
+    const hasSeparator = dateTime.includes(dateTimeSeparator);
+    return [
+        dateTime.slice(0, dateModeTemplate.length),
+        dateTime.slice(hasSeparator
+            ? dateModeTemplate.length + dateTimeSeparator.length
+            : dateModeTemplate.length),
+    ];
+}
+
+function createMinMaxDateTimePostprocessor({ dateModeTemplate, timeMode, min = DEFAULT_MIN_DATE, max = DEFAULT_MAX_DATE, dateTimeSeparator, }) {
+    return ({ value, selection }) => {
+        const [dateString, timeString] = parseDateTimeString(value, {
+            dateModeTemplate,
+            dateTimeSeparator,
+        });
+        const parsedDate = parseDateString(dateString, dateModeTemplate);
+        const parsedTime = parseTimeString(timeString, timeMode);
+        if (!isDateTimeStringComplete(value, {
+            dateMode: dateModeTemplate,
+            timeMode,
+            dateTimeSeparator,
+        })) {
+            const fixedDate = raiseSegmentValueToMin(parsedDate, dateModeTemplate);
+            const { year, month, day } = isDateStringComplete(dateString, dateModeTemplate)
+                ? dateToSegments(clamp(segmentsToDate(fixedDate), min, max))
+                : fixedDate;
+            const fixedValue = toDateString(Object.assign({ year,
+                month,
+                day }, parsedTime), { dateMode: dateModeTemplate, dateTimeSeparator, timeMode });
+            const tail = value.slice(fixedValue.length);
+            return {
+                selection,
+                value: fixedValue + tail,
+            };
+        }
+        const date = segmentsToDate(parsedDate, parsedTime);
+        const clampedDate = clamp(date, min, max);
+        const validatedValue = toDateString(dateToSegments(clampedDate), {
+            dateMode: dateModeTemplate,
+            dateTimeSeparator,
+            timeMode,
+        });
+        return {
+            selection,
+            value: validatedValue,
+        };
+    };
+}
+
+function createValidDateTimePreprocessor({ dateModeTemplate, dateSegmentsSeparator, dateTimeSeparator, timeMode, }) {
+    const invalidCharsRegExp = new RegExp(`[^\\d${TIME_FIXED_CHARACTERS.map(escapeRegExp).join('')}${escapeRegExp(dateSegmentsSeparator)}]+`);
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        if (data === dateSegmentsSeparator) {
+            return {
+                elementState,
+                data: selection[0] === value.length ? data : '',
+            };
+        }
+        const newCharacters = data.replace(invalidCharsRegExp, '');
+        if (!newCharacters) {
+            return { elementState, data: '' };
+        }
+        const [from, rawTo] = selection;
+        let to = rawTo + data.length;
+        const newPossibleValue = value.slice(0, from) + newCharacters + value.slice(to);
+        const [dateString, timeString] = parseDateTimeString(newPossibleValue, {
+            dateModeTemplate,
+            dateTimeSeparator,
+        });
+        let validatedValue = '';
+        const hasDateTimeSeparator = newPossibleValue.includes(dateTimeSeparator);
+        const { validatedDateString, updatedSelection } = validateDateString({
+            dateString,
+            dateModeTemplate,
+            offset: 0,
+            selection: [from, to],
+        });
+        if (dateString && !validatedDateString) {
+            return { elementState, data: '' }; // prevent changes
+        }
+        to = updatedSelection[1];
+        validatedValue += validatedDateString;
+        const paddedMaxValues = padTimeSegments(DEFAULT_TIME_SEGMENT_MAX_VALUES);
+        const { validatedTimeString, updatedTimeSelection } = validateTimeString({
+            timeString,
+            paddedMaxValues,
+            offset: validatedValue.length + dateTimeSeparator.length,
+            selection: [from, to],
+            timeMode,
+        });
+        if (timeString && !validatedTimeString) {
+            return { elementState, data: '' }; // prevent changes
+        }
+        to = updatedTimeSelection[1];
+        validatedValue += hasDateTimeSeparator
+            ? dateTimeSeparator + validatedTimeString
+            : validatedTimeString;
+        const newData = validatedValue.slice(from, to);
+        return {
+            elementState: {
+                selection,
+                value: validatedValue.slice(0, from) +
+                    newData
+                        .split(dateSegmentsSeparator)
+                        .map(segment => '0'.repeat(segment.length))
+                        .join(dateSegmentsSeparator) +
+                    validatedValue.slice(to),
+            },
+            data: newData,
+        };
+    };
+}
+
+function maskitoDateTimeOptionsGenerator({ dateMode, timeMode, dateSeparator = '.', min, max, dateTimeSeparator = DATE_TIME_SEPARATOR, timeStep = 0, }) {
+    const dateModeTemplate = dateMode.split('/').join(dateSeparator);
+    return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), { mask: [
+            ...Array.from(dateModeTemplate).map(char => char === dateSeparator ? char : /\d/),
+            ...dateTimeSeparator.split(''),
+            ...Array.from(timeMode).map(char => TIME_FIXED_CHARACTERS.includes(char) ? char : /\d/),
+        ], overwriteMode: 'replace', preprocessors: [
+            createFullWidthToHalfWidthPreprocessor(),
+            createColonConvertPreprocessor(),
+            createFirstDateEndSeparatorPreprocessor({
+                dateModeTemplate,
+                dateSegmentSeparator: dateSeparator,
+                firstDateEndSeparator: dateTimeSeparator,
+                pseudoFirstDateEndSeparators: dateTimeSeparator.split(''),
+            }),
+            createZeroPlaceholdersPreprocessor(),
+            normalizeDatePreprocessor({
+                dateModeTemplate,
+                dateSegmentsSeparator: dateSeparator,
+                dateTimeSeparator,
+            }),
+            createValidDateTimePreprocessor({
+                dateModeTemplate,
+                dateSegmentsSeparator: dateSeparator,
+                dateTimeSeparator,
+                timeMode,
+            }),
+        ], postprocessors: [
+            createDateSegmentsZeroPaddingPostprocessor({
+                dateModeTemplate,
+                dateSegmentSeparator: dateSeparator,
+                splitFn: value => {
+                    const [dateString, timeString] = parseDateTimeString(value, {
+                        dateModeTemplate,
+                        dateTimeSeparator,
+                    });
+                    return { dateStrings: [dateString], restPart: timeString };
+                },
+                uniteFn: ([validatedDateString], initialValue) => validatedDateString +
+                    (initialValue.includes(dateTimeSeparator) ? dateTimeSeparator : ''),
+            }),
+            createMinMaxDateTimePostprocessor({
+                min,
+                max,
+                dateModeTemplate,
+                timeMode,
+                dateTimeSeparator,
+            }),
+        ], plugins: [
+            createTimeSegmentsSteppingPlugin({
+                step: timeStep,
+                fullMode: `${dateModeTemplate}${dateTimeSeparator}${timeMode}`,
+                timeSegmentMaxValues: DEFAULT_TIME_SEGMENT_MAX_VALUES,
+            }),
+        ] });
+}
+
+function createMaxValidationPreprocessor(timeSegmentMaxValues, timeMode) {
+    const paddedMaxValues = padTimeSegments(timeSegmentMaxValues);
+    const invalidCharsRegExp = new RegExp(`[^\\d${TIME_FIXED_CHARACTERS.map(escapeRegExp).join('')}]+`);
+    return ({ elementState, data }, actionType) => {
+        if (actionType === 'deleteBackward' || actionType === 'deleteForward') {
+            return { elementState, data };
+        }
+        const { value, selection } = elementState;
+        if (actionType === 'validation') {
+            const { validatedTimeString, updatedTimeSelection } = validateTimeString({
+                timeString: value,
+                paddedMaxValues,
+                offset: 0,
+                selection,
+                timeMode,
+            });
+            return {
+                elementState: {
+                    value: validatedTimeString,
+                    selection: updatedTimeSelection,
+                },
+                data,
+            };
+        }
+        const newCharacters = data.replace(invalidCharsRegExp, '');
+        const [from, rawTo] = selection;
+        let to = rawTo + newCharacters.length; // to be conformed with `overwriteMode: replace`
+        const newPossibleValue = value.slice(0, from) + newCharacters + value.slice(to);
+        const { validatedTimeString, updatedTimeSelection } = validateTimeString({
+            timeString: newPossibleValue,
+            paddedMaxValues,
+            offset: 0,
+            selection: [from, to],
+            timeMode,
+        });
+        if (newPossibleValue && !validatedTimeString) {
+            return { elementState, data: '' }; // prevent changes
+        }
+        to = updatedTimeSelection[1];
+        const newData = validatedTimeString.slice(from, to);
+        return {
+            elementState: {
+                selection,
+                value: validatedTimeString.slice(0, from) +
+                    '0'.repeat(newData.length) +
+                    validatedTimeString.slice(to),
+            },
+            data: newData,
+        };
+    };
+}
+
+function maskitoTimeOptionsGenerator({ mode, timeSegmentMaxValues = {}, step = 0, }) {
+    const enrichedTimeSegmentMaxValues = Object.assign(Object.assign({}, DEFAULT_TIME_SEGMENT_MAX_VALUES), timeSegmentMaxValues);
+    return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), { mask: Array.from(mode).map(char => TIME_FIXED_CHARACTERS.includes(char) ? char : /\d/), preprocessors: [
+            createFullWidthToHalfWidthPreprocessor(),
+            createColonConvertPreprocessor(),
+            createZeroPlaceholdersPreprocessor(),
+            createMaxValidationPreprocessor(enrichedTimeSegmentMaxValues, mode),
+        ], plugins: [
+            createTimeSegmentsSteppingPlugin({
+                fullMode: mode,
+                step,
+                timeSegmentMaxValues: enrichedTimeSegmentMaxValues,
+            }),
+        ], overwriteMode: 'replace' });
+}
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+function isThenable(x) {
+  return x && typeof x === 'object' && 'then' in x;
+}
+/**
+ * Hook for convenient use of Maskito in React
+ * @description For controlled inputs use `onInput` event
+ * @param options options used for creating Maskito
+ * @param elementPredicate function that can help find nested Input or TextArea
+ * @returns ref callback to pass it in React Element
+ * @example
+ * // To avoid unnecessary hook runs with Maskito recreation pass named variables
+ * // good example ✅
+ * useMaskito({ options: maskitoOptions, elementPredicate: maskitoPredicate })
+ *
+ * // bad example ❌
+ * useMaskito({ options: { mask: /^.*$/ }, elementPredicate: () => e.querySelector('input') })
+ */
+const useMaskito = ({
+  options = null,
+  elementPredicate = MASKITO_DEFAULT_ELEMENT_PREDICATE
+} = {}) => {
+  const [hostElement, setHostElement] = useState(null);
+  const [element, setElement] = useState(null);
+  const onRefChange = useCallback(node => {
+    setHostElement(node);
+  }, []);
+  const latestPredicateRef = useRef(elementPredicate);
+  latestPredicateRef.current = elementPredicate;
+  useIsomorphicLayoutEffect(() => {
+    if (!hostElement) {
+      return;
+    }
+    const predicate = elementPredicate;
+    const elementOrPromise = predicate(hostElement);
+    if (isThenable(elementOrPromise)) {
+      void elementOrPromise.then(el => {
+        if (latestPredicateRef.current === predicate) {
+          setElement(el);
+        }
+      });
+    } else {
+      setElement(elementOrPromise);
+    }
+  }, [hostElement, elementPredicate, latestPredicateRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (!element || !options) {
+      return;
+    }
+    const maskedElement = new Maskito(element, options);
+    return () => {
+      maskedElement.destroy();
+    };
+  }, [options, element]);
+  return onRefChange;
+};
+
+export { MASKITO_DEFAULT_OPTIONS as M, maskitoDateTimeOptionsGenerator as a, maskitoTimeOptionsGenerator as b, maskitoDateOptionsGenerator as m, useMaskito as u };
+//# sourceMappingURL=index.esm-fa75fa26.js.map