@maskito/core - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

index.cjs.js

@@ -11,7 +11,7 @@ 'use strict';
 function setContentEditableSelection(element, [from, to]) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     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));
+    range.setStart(element.firstChild || element, Math.min(from, (_b = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0));
+    range.setEnd(element.lastChild || element, Math.min(to, (_d = (_c = element.textContent) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0));
     const selection = document.getSelection();
@@ -43,3 +43,3 @@ if (selection) {
     setSelectionRange(from, to) {
-        setContentEditableSelection(this.element, [from || 0, to || 0]);
+        setContentEditableSelection(this.element, [from !== null && from !== void 0 ? from : 0, to !== null && to !== void 0 ? to : 0]);
     }
@@ -179,8 +179,2 @@ select() {
         const charConstraint = mask[newValidatedChars.length] || '';
-        if (isFixedCharacter(charConstraint)) {
-            return newValidatedChars + charConstraint;
-        }
-        if (!char.match(charConstraint)) {
-            return newValidatedChars;
-        }
         if (maskedFrom === null && charIndex >= elementState.selection[0]) {
@@ -192,3 +186,8 @@ maskedFrom = newValidatedChars.length;
         }
-        return newValidatedChars + char;
+        if (isFixedCharacter(charConstraint)) {
+            return newValidatedChars + charConstraint;
+        }
+        return char.match(charConstraint)
+            ? newValidatedChars + char
+            : newValidatedChars;
     }, '');
@@ -334,3 +333,3 @@ const trailingFixedCharacters = getLeadingFixedCharacters(mask, maskedValue, '', initialElementState);
         this.element.addEventListener(eventType, untypedFn, options);
-        this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn));
+        this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn, options));
     }
@@ -479,3 +478,3 @@ destroy() {
         .reverse()
-        .findIndex((char) => char.match(SPACE_REG));
+        .findIndex((char) => SPACE_REG.exec(char));
     return [
@@ -487,3 +486,3 @@ selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0,
 
-/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-restricted-types */
 /**
@@ -517,2 +516,3 @@ * @internal
         this.options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), this.maskitoOptions);
+        this.upcomingElementState = null;
         this.preprocessor = maskitoPipe(this.options.preprocessors);
@@ -533,3 +533,3 @@ this.postprocessor = maskitoPipe(this.options.postprocessors);
         this.eventListener.listen('beforeinput', (event) => {
-            var _a;
+            var _a, _b, _c;
             const isForward = event.inputType.includes('Forward');
@@ -596,9 +596,13 @@ this.updateHistory(this.elementState);
                 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')) ||
-                        '');
+                    return this.handleInsert(event, (_c = (_a = event.data) !== null && _a !== void 0 ? _a : 
+                    // `event.data` for `contentEditable` is always `null` for paste/drop events
+                    (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.getData('text/plain')) !== null && _c !== void 0 ? _c : '');
             }
         });
+        this.eventListener.listen('input', () => {
+            if (this.upcomingElementState) {
+                this.updateElementState(this.upcomingElementState);
+                this.upcomingElementState = null;
+            }
+        }, { capture: true });
         this.eventListener.listen('input', ({ inputType }) => {
@@ -616,2 +620,14 @@ if (inputType === 'insertCompositionText') {
     }
+    destroy() {
+        this.eventListener.destroy();
+        this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown());
+    }
+    updateElementState({ value, selection }, eventInit) {
+        const initialValue = this.elementState.value;
+        this.updateValue(value);
+        this.updateSelectionRange(selection);
+        if (eventInit && initialValue !== value) {
+            this.dispatchInputEvent(eventInit);
+        }
+    }
     get elementState() {
@@ -621,3 +637,3 @@ const { value, selectionStart, selectionEnd } = this.element;
             value,
-            selection: [selectionStart || 0, selectionEnd || 0],
+            selection: [selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0, selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0],
         };
@@ -629,17 +645,2 @@ }
     }
-    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]) {
@@ -657,3 +658,6 @@ var _a;
     ensureValueFitsMask() {
-        this.updateElementState(maskitoTransform(this.elementState, this.options));
+        this.updateElementState(maskitoTransform(this.elementState, this.options), {
+            inputType: 'insertText',
+            data: null,
+        });
     }
@@ -689,15 +693,11 @@ dispatchInputEvent(eventInit = {
         }
-        event.preventDefault();
         if (areElementValuesEqual(initialState, elementState, maskModel, newElementState)) {
+            event.preventDefault();
             // 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);
+        this.upcomingElementState = newElementState;
     }
     handleInsert(event, data) {
-        const initialElementState = this.elementState;
+        const { options, maxLength, element, elementState: initialElementState } = this;
         const { elementState, data: insertedText = data } = this.preprocessor({
@@ -707,3 +707,3 @@ data,
         }, 'insert');
-        const maskModel = new MaskModel(elementState, this.options);
+        const maskModel = new MaskModel(elementState, options);
         try {
@@ -720,13 +720,16 @@ maskModel.addCharacters(elementState.selection, insertedText);
         const newElementState = this.postprocessor(maskModel, initialElementState);
-        if (newElementState.value.length > this.maxLength) {
+        if (newElementState.value.length > maxLength) {
             return event.preventDefault();
         }
-        if (newPossibleValue !== newElementState.value ||
-            this.element.isContentEditable) {
-            event.preventDefault();
-            this.updateElementState(newElementState, {
-                data,
-                inputType: event.inputType,
-            });
-            this.updateHistory(newElementState);
+        if (newPossibleValue !== newElementState.value || element.isContentEditable) {
+            this.upcomingElementState = newElementState;
+            if (options.overwriteMode === 'replace' &&
+                newPossibleValue.length > maxLength) {
+                /**
+                 * Browsers know nothing about Maskito and its `overwriteMode`.
+                 * When textfield value length is already equal to attribute `maxlength`,
+                 * pressing any key (even with valid value) does not emit `input` event.
+                 */
+                this.dispatchInputEvent({ inputType: 'insertText', data });
+            }
         }
@@ -768,4 +771,5 @@ }
     return (element, options) => {
-        const from = element.selectionStart || 0;
-        const to = element.selectionEnd || 0;
+        var _a, _b;
+        const from = (_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const to = (_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0;
         maskitoUpdateElement(element, {
@@ -781,2 +785,3 @@ value: maskitoTransform(element.value, customOptions || options),
         const listener = (event) => {
+            var _a, _b;
             if (event.inputType !== 'insertCompositionText') {
@@ -786,4 +791,4 @@ return;
             const selection = [
-                element.selectionStart || 0,
-                element.selectionEnd || 0,
+                (_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0,
+                (_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0,
             ];
@@ -790,0 +795,0 @@ const elementState = {

index.esm.js

@@ -9,7 +9,7 @@ function getContentEditableSelection(element) {
 function setContentEditableSelection(element, [from, to]) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     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));
+    range.setStart(element.firstChild || element, Math.min(from, (_b = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0));
+    range.setEnd(element.lastChild || element, Math.min(to, (_d = (_c = element.textContent) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0));
     const selection = document.getSelection();
@@ -41,3 +41,3 @@ if (selection) {
     setSelectionRange(from, to) {
-        setContentEditableSelection(this.element, [from || 0, to || 0]);
+        setContentEditableSelection(this.element, [from !== null && from !== void 0 ? from : 0, to !== null && to !== void 0 ? to : 0]);
     }
@@ -177,8 +177,2 @@ select() {
         const charConstraint = mask[newValidatedChars.length] || '';
-        if (isFixedCharacter(charConstraint)) {
-            return newValidatedChars + charConstraint;
-        }
-        if (!char.match(charConstraint)) {
-            return newValidatedChars;
-        }
         if (maskedFrom === null && charIndex >= elementState.selection[0]) {
@@ -190,3 +184,8 @@ maskedFrom = newValidatedChars.length;
         }
-        return newValidatedChars + char;
+        if (isFixedCharacter(charConstraint)) {
+            return newValidatedChars + charConstraint;
+        }
+        return char.match(charConstraint)
+            ? newValidatedChars + char
+            : newValidatedChars;
     }, '');
@@ -332,3 +331,3 @@ const trailingFixedCharacters = getLeadingFixedCharacters(mask, maskedValue, '', initialElementState);
         this.element.addEventListener(eventType, untypedFn, options);
-        this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn));
+        this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn, options));
     }
@@ -477,3 +476,3 @@ destroy() {
         .reverse()
-        .findIndex((char) => char.match(SPACE_REG));
+        .findIndex((char) => SPACE_REG.exec(char));
     return [
@@ -485,3 +484,3 @@ selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0,
 
-/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-restricted-types */
 /**
@@ -515,2 +514,3 @@ * @internal
         this.options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), this.maskitoOptions);
+        this.upcomingElementState = null;
         this.preprocessor = maskitoPipe(this.options.preprocessors);
@@ -531,3 +531,3 @@ this.postprocessor = maskitoPipe(this.options.postprocessors);
         this.eventListener.listen('beforeinput', (event) => {
-            var _a;
+            var _a, _b, _c;
             const isForward = event.inputType.includes('Forward');
@@ -594,9 +594,13 @@ this.updateHistory(this.elementState);
                 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')) ||
-                        '');
+                    return this.handleInsert(event, (_c = (_a = event.data) !== null && _a !== void 0 ? _a : 
+                    // `event.data` for `contentEditable` is always `null` for paste/drop events
+                    (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.getData('text/plain')) !== null && _c !== void 0 ? _c : '');
             }
         });
+        this.eventListener.listen('input', () => {
+            if (this.upcomingElementState) {
+                this.updateElementState(this.upcomingElementState);
+                this.upcomingElementState = null;
+            }
+        }, { capture: true });
         this.eventListener.listen('input', ({ inputType }) => {
@@ -614,2 +618,14 @@ if (inputType === 'insertCompositionText') {
     }
+    destroy() {
+        this.eventListener.destroy();
+        this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown());
+    }
+    updateElementState({ value, selection }, eventInit) {
+        const initialValue = this.elementState.value;
+        this.updateValue(value);
+        this.updateSelectionRange(selection);
+        if (eventInit && initialValue !== value) {
+            this.dispatchInputEvent(eventInit);
+        }
+    }
     get elementState() {
@@ -619,3 +635,3 @@ const { value, selectionStart, selectionEnd } = this.element;
             value,
-            selection: [selectionStart || 0, selectionEnd || 0],
+            selection: [selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0, selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0],
         };
@@ -627,17 +643,2 @@ }
     }
-    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]) {
@@ -655,3 +656,6 @@ var _a;
     ensureValueFitsMask() {
-        this.updateElementState(maskitoTransform(this.elementState, this.options));
+        this.updateElementState(maskitoTransform(this.elementState, this.options), {
+            inputType: 'insertText',
+            data: null,
+        });
     }
@@ -687,15 +691,11 @@ dispatchInputEvent(eventInit = {
         }
-        event.preventDefault();
         if (areElementValuesEqual(initialState, elementState, maskModel, newElementState)) {
+            event.preventDefault();
             // 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);
+        this.upcomingElementState = newElementState;
     }
     handleInsert(event, data) {
-        const initialElementState = this.elementState;
+        const { options, maxLength, element, elementState: initialElementState } = this;
         const { elementState, data: insertedText = data } = this.preprocessor({
@@ -705,3 +705,3 @@ data,
         }, 'insert');
-        const maskModel = new MaskModel(elementState, this.options);
+        const maskModel = new MaskModel(elementState, options);
         try {
@@ -718,13 +718,16 @@ maskModel.addCharacters(elementState.selection, insertedText);
         const newElementState = this.postprocessor(maskModel, initialElementState);
-        if (newElementState.value.length > this.maxLength) {
+        if (newElementState.value.length > maxLength) {
             return event.preventDefault();
         }
-        if (newPossibleValue !== newElementState.value ||
-            this.element.isContentEditable) {
-            event.preventDefault();
-            this.updateElementState(newElementState, {
-                data,
-                inputType: event.inputType,
-            });
-            this.updateHistory(newElementState);
+        if (newPossibleValue !== newElementState.value || element.isContentEditable) {
+            this.upcomingElementState = newElementState;
+            if (options.overwriteMode === 'replace' &&
+                newPossibleValue.length > maxLength) {
+                /**
+                 * Browsers know nothing about Maskito and its `overwriteMode`.
+                 * When textfield value length is already equal to attribute `maxlength`,
+                 * pressing any key (even with valid value) does not emit `input` event.
+                 */
+                this.dispatchInputEvent({ inputType: 'insertText', data });
+            }
         }
@@ -766,4 +769,5 @@ }
     return (element, options) => {
-        const from = element.selectionStart || 0;
-        const to = element.selectionEnd || 0;
+        var _a, _b;
+        const from = (_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const to = (_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0;
         maskitoUpdateElement(element, {
@@ -779,2 +783,3 @@ value: maskitoTransform(element.value, customOptions || options),
         const listener = (event) => {
+            var _a, _b;
             if (event.inputType !== 'insertCompositionText') {
@@ -784,4 +789,4 @@ return;
             const selection = [
-                element.selectionStart || 0,
-                element.selectionEnd || 0,
+                (_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0,
+                (_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0,
             ];
@@ -788,0 +793,0 @@ const elementState = {

package.json

 {
   "name": "@maskito/core",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "The main zero-dependency and framework-agnostic Maskito's package to create an input mask",
@@ -5,0 +5,0 @@ "keywords": [

src/lib/mask.d.ts

@@ -9,2 +9,3 @@ import { MaskHistory } from './classes';
     private readonly options;
+    private upcomingElementState;
     private readonly preprocessor;
@@ -14,6 +15,6 @@ private readonly postprocessor;
     constructor(element: MaskitoElement, maskitoOptions: MaskitoOptions);
+    destroy(): void;
+    protected updateElementState({ value, selection }: ElementState, eventInit?: Pick<TypedInputEvent, 'data' | 'inputType'>): void;
     private get elementState();
     private get maxLength();
-    destroy(): void;
-    protected updateElementState({ value, selection }: ElementState, eventInit?: Pick<TypedInputEvent, 'data' | 'inputType'>): void;
     private updateSelectionRange;
@@ -20,0 +21,0 @@ private updateValue;

No alert changes

Improved metrics

Total package byte prevSize

96474

2.22%

Lines of code

1750

0.63%

No dependency changes