@mtes-mct/monitor-ui 8.0.0 → 8.1.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [8.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v7.6.2...v8.0.0) (2023-07-19)
+
+
+* build(deps)!: upgrade rsuite ([e17df4c](https://github.com/MTES-MCT/monitor-ui/commit/e17df4c0b8c41ee0803b2596f9a20ec6beab28e7))
+
+
+### BREAKING CHANGES
+
+* upgrade rsuite peer deps
+
 ## [7.6.2](https://github.com/MTES-MCT/monitor-ui/compare/v7.6.1...v7.6.2) (2023-07-17)
 
 

package/index.js

@@ -2517,6 +2517,8 @@ class NewWindow extends PureComponent {
         if (!mounted || !this.container) {
             return null;
         }
+        // For some reason `ReactNode` type is inconsistent
+        // between `@types/react` (=> `children`) and `react-dom` (=> `ReactDOM.createPortal()`)
         return ReactDOM.createPortal(children, this.container);
     }
 }
@@ -2687,6 +2689,7 @@ function Notifier({ isSideWindow = false }) {
         draggable: false }));
 }
 // TODO Style the notifications with Adeline.
+// We need to retype `ToastContainer` manually because `styled-components` mess up with the `children` prop
 const StyledToastContainer = styled(k) ``;
 
 const ICON_SIZE = {
@@ -3517,13 +3520,13 @@ const TagGroup = styled.div.attrs(props => ({
   gap: 8px;
 `;
 
-const Table = styled.table `
+const Table$1 = styled.table `
   width: 100%;
   table-layout: auto;
   overflow: auto;
   border-collapse: separate;
 `;
-const Head = styled.thead `
+const Head$1 = styled.thead `
   position: sticky;
   top: 0;
   z-index: 1;
@@ -3532,7 +3535,7 @@ const Head = styled.thead `
     border-left: 1px solid ${p => p.theme.color.lightGray};
   }
 `;
-const SortContainer = styled.div `
+const SortContainer$1 = styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -3542,7 +3545,7 @@ const SortContainer = styled.div `
     cursor: pointer;
   }
 `;
-const Th = styled.th `
+const Th$1 = styled.th `
   background-color: ${p => p.theme.color.gainsboro};
   border-top: 1px solid ${p => p.theme.color.lightGray};
   border-bottom: 1px solid ${p => p.theme.color.lightGray};
@@ -3555,26 +3558,21 @@ const Th = styled.th `
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-const BodyTr = styled.tr `
+const BodyTr$1 = styled.tr `
   :hover {
-    background-color: ${p => p.theme.color.blueYonder[25]};
+    > td {
+      background-color: ${p => p.theme.color.blueYonder[25]};
+    }
   }
   td:first-child {
     border-left: 1px solid ${p => p.theme.color.lightGray};
   }
-
-  td:nth-child(10) {
-    text-align: center;
-  }
-  td:nth-child(11) {
-    text-align: center;
-  }
 `;
-const Td = styled.td `
+const Td$1 = styled.td `
   font-size: 13px;
   font-weight: 500;
   color: ${p => p.theme.color.gunMetal};
-  text-align: left;
+  text-align: ${p => (p.$isCenter ? 'center' : 'left')};
   border-bottom: 1px solid ${p => p.theme.color.lightGray};
   border-right: 1px solid ${p => p.theme.color.lightGray};
   overflow: hidden;
@@ -3583,6 +3581,45 @@ const Td = styled.td `
   white-space: nowrap;
 `;
 const SimpleTable = {
+    BodyTr: BodyTr$1,
+    Head: Head$1,
+    SortContainer: SortContainer$1,
+    Table: Table$1,
+    Td: Td$1,
+    Th: Th$1
+};
+
+const Table = styled(SimpleTable.Table) `
+  border-collapse: separate;
+  border-spacing: 0 5px;
+`;
+const Head = styled(SimpleTable.Head) `
+  th:last-child {
+    border-right: 1px solid ${p => p.theme.color.lightGray};
+  }
+`;
+const SortContainer = styled(SimpleTable.SortContainer) `
+  justify-content: start;
+  gap: 8px;
+`;
+const Th = styled(SimpleTable.Th) `
+  background-color: ${p => p.theme.color.white};
+  border-top: 1px solid ${p => p.theme.color.lightGray};
+  border-bottom: 1px solid ${p => p.theme.color.lightGray};
+  border-right: none;
+`;
+const BodyTr = styled(SimpleTable.BodyTr) `
+  td:last-child {
+    border-right: 1px solid ${p => p.theme.color.lightGray};
+  }
+`;
+const Td = styled(SimpleTable.Td) `
+  background-color: ${p => p.theme.color.cultured};
+  border-top: 1px solid ${p => p.theme.color.lightGray};
+  border-right: none;
+  padding: 4px 10px;
+`;
+const TableWithSelectableRows = {
     BodyTr,
     Head,
     SortContainer,
@@ -31469,7 +31506,7 @@ function isString(str) {
 /** Checks if value is object */
 function isObject(obj) {
   var _obj$constructor;
-  return typeof obj === 'object' && obj != null && (obj == null ? void 0 : (_obj$constructor = obj.constructor) == null ? void 0 : _obj$constructor.name) === 'Object';
+  return typeof obj === 'object' && obj != null && (obj == null || (_obj$constructor = obj.constructor) == null ? void 0 : _obj$constructor.name) === 'Object';
 }
 function pick(obj, keys) {
   if (Array.isArray(keys)) return pick(obj, (_, k) => keys.includes(k));
@@ -32418,7 +32455,7 @@ class Masked {
 
   /** Value that includes raw user input */
   get rawInputValue() {
-    return this.extractInput(0, this.value.length, {
+    return this.extractInput(0, this.displayValue.length, {
       raw: true
     });
   }
@@ -32446,9 +32483,9 @@ class Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
-    return Math.min(this.value.length, toPos - fromPos);
+    return Math.min(this.displayValue.length, toPos - fromPos);
   }
 
   /** Extracts value in range considering flags */
@@ -32457,9 +32494,9 @@ class Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
-    return this.value.slice(fromPos, toPos);
+    return this.displayValue.slice(fromPos, toPos);
   }
 
   /** Extracts tail in range */
@@ -32468,7 +32505,7 @@ class Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     return new ContinuousTailDetails(this.extractInput(fromPos, toPos), fromPos);
   }
@@ -32506,7 +32543,7 @@ class Masked {
         const beforeTailState = this.state;
         if (this.overwrite === true) {
           consistentTail = checkTail.state;
-          checkTail.unshift(this.value.length - details.tailShift);
+          checkTail.unshift(this.displayValue.length - details.tailShift);
         }
         let tailDetails = this.appendTail(checkTail);
         appended = tailDetails.rawInserted === checkTail.toString();
@@ -32575,9 +32612,9 @@ class Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
-    this._value = this.value.slice(0, fromPos) + this.value.slice(toPos);
+    this._value = this.displayValue.slice(0, fromPos) + this.displayValue.slice(toPos);
     return new ChangeDetails();
   }
 
@@ -32591,7 +32628,7 @@ class Masked {
     this.rawInputValue = rawInput;
     // append lost trailing chars at the end
     if (this.value && this.value !== value && value.indexOf(this.value) === 0) {
-      this.append(value.slice(this.value.length), {}, '');
+      this.append(value.slice(this.displayValue.length), {}, '');
     }
     delete this._refreshing;
     return ret;
@@ -32667,7 +32704,7 @@ class Masked {
     if (eagerRemove && removeDirection !== DIRECTION.NONE && oldRawValue === this.rawInputValue) {
       if (removeDirection === DIRECTION.FORCE_LEFT) {
         let valLength;
-        while (oldRawValue === this.rawInputValue && (valLength = this.value.length)) {
+        while (oldRawValue === this.rawInputValue && (valLength = this.displayValue.length)) {
           details.aggregate(new ChangeDetails({
             tailShift: -1
           })).aggregate(this.remove(valLength - 1));
@@ -32753,7 +32790,7 @@ class ChunksTailDetails {
     const details = new ChangeDetails();
     for (let ci = 0; ci < this.chunks.length && !details.skip; ++ci) {
       const chunk = this.chunks[ci];
-      const lastBlockIter = masked._mapPosToBlock(masked.value.length);
+      const lastBlockIter = masked._mapPosToBlock(masked.displayValue.length);
       const stop = chunk.stop;
       let chunkBlock;
       if (stop != null && (
@@ -32901,13 +32938,13 @@ class PatternCursor {
     }
     if (this.index >= this.masked._blocks.length) {
       this.index = this.masked._blocks.length - 1;
-      this.offset = this.block.value.length; // TODO this is stupid type error, `block` depends on index that was changed above
+      this.offset = this.block.displayValue.length; // TODO this is stupid type error, `block` depends on index that was changed above
     }
   }
 
   _pushLeft(fn) {
     this.pushState();
-    for (this.bindBlock(); 0 <= this.index; --this.index, this.offset = ((_this$block = this.block) == null ? void 0 : _this$block.value.length) || 0) {
+    for (this.bindBlock(); 0 <= this.index; --this.index, this.offset = ((_this$block = this.block) == null ? void 0 : _this$block.displayValue.length) || 0) {
       var _this$block;
       if (fn()) return this.ok = true;
     }
@@ -33284,7 +33321,7 @@ class PatternInputDefinition {
     var _flags$_beforeTailSta;
     return {
       ...flags,
-      _beforeTailState: (flags == null ? void 0 : (_flags$_beforeTailSta = flags._beforeTailState) == null ? void 0 : _flags$_beforeTailSta.masked) || (flags == null ? void 0 : flags._beforeTailState)
+      _beforeTailState: (flags == null || (_flags$_beforeTailSta = flags._beforeTailState) == null ? void 0 : _flags$_beforeTailSta.masked) || (flags == null ? void 0 : flags._beforeTailState)
     };
   }
 }
@@ -33352,6 +33389,7 @@ class MaskedPattern extends Masked {
   _rebuildMask() {
     const defs = this.definitions;
     this._blocks = [];
+    this.exposeBlock = undefined;
     this._stops = [];
     this._maskedBlocks = {};
     const pattern = this.mask;
@@ -33367,17 +33405,22 @@ class MaskedPattern extends Masked {
         // use block name with max length
         const bName = bNames[0];
         if (bName) {
+          const {
+            expose,
+            ...blockOpts
+          } = normalizeOpts(this.blocks[bName]);
           const maskedBlock = createMask({
             lazy: this.lazy,
             eager: this.eager,
             placeholderChar: this.placeholderChar,
             displayChar: this.displayChar,
             overwrite: this.overwrite,
-            ...normalizeOpts(this.blocks[bName]),
+            ...blockOpts,
             parent: this
           });
           if (maskedBlock) {
             this._blocks.push(maskedBlock);
+            if (expose) this.exposeBlock = maskedBlock;
 
             // store block index
             if (!this._maskedBlocks[bName]) this._maskedBlocks[bName] = [];
@@ -33442,7 +33485,7 @@ class MaskedPattern extends Masked {
     this._blocks.forEach(b => b.reset());
   }
   get isComplete() {
-    return this._blocks.every(b => b.isComplete);
+    return this.exposeBlock ? this.exposeBlock.isComplete : this._blocks.every(b => b.isComplete);
   }
   get isFilled() {
     return this._blocks.every(b => b.isFilled);
@@ -33458,17 +33501,39 @@ class MaskedPattern extends Masked {
     super.doCommit();
   }
   get unmaskedValue() {
-    return this._blocks.reduce((str, b) => str += b.unmaskedValue, '');
+    return this.exposeBlock ? this.exposeBlock.unmaskedValue : this._blocks.reduce((str, b) => str += b.unmaskedValue, '');
   }
   set unmaskedValue(unmaskedValue) {
-    super.unmaskedValue = unmaskedValue;
+    if (this.exposeBlock) {
+      const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length);
+      this.exposeBlock.unmaskedValue = unmaskedValue;
+      this.appendTail(tail);
+      this.doCommit();
+    } else super.unmaskedValue = unmaskedValue;
   }
   get value() {
+    return this.exposeBlock ? this.exposeBlock.value :
     // TODO return _value when not in change?
-    return this._blocks.reduce((str, b) => str += b.value, '');
+    this._blocks.reduce((str, b) => str += b.value, '');
   }
   set value(value) {
-    super.value = value;
+    if (this.exposeBlock) {
+      const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length);
+      this.exposeBlock.value = value;
+      this.appendTail(tail);
+      this.doCommit();
+    } else super.value = value;
+  }
+  get typedValue() {
+    return this.exposeBlock ? this.exposeBlock.typedValue : super.typedValue;
+  }
+  set typedValue(value) {
+    if (this.exposeBlock) {
+      const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length);
+      this.exposeBlock.typedValue = value;
+      this.appendTail(tail);
+      this.doCommit();
+    } else super.typedValue = value;
   }
   get displayValue() {
     return this._blocks.reduce((str, b) => str += b.displayValue, '');
@@ -33479,7 +33544,7 @@ class MaskedPattern extends Masked {
   _appendEager() {
     var _this$_mapPosToBlock;
     const details = new ChangeDetails();
-    let startBlockIndex = (_this$_mapPosToBlock = this._mapPosToBlock(this.value.length)) == null ? void 0 : _this$_mapPosToBlock.index;
+    let startBlockIndex = (_this$_mapPosToBlock = this._mapPosToBlock(this.displayValue.length)) == null ? void 0 : _this$_mapPosToBlock.index;
     if (startBlockIndex == null) return details;
 
     // TODO test if it works for nested pattern masks
@@ -33495,16 +33560,16 @@ class MaskedPattern extends Masked {
     if (flags === void 0) {
       flags = {};
     }
-    const blockIter = this._mapPosToBlock(this.value.length);
+    const blockIter = this._mapPosToBlock(this.displayValue.length);
     const details = new ChangeDetails();
     if (!blockIter) return details;
     for (let bi = blockIter.index;; ++bi) {
-      var _flags$_beforeTailSta, _flags$_beforeTailSta2;
+      var _flags$_beforeTailSta;
       const block = this._blocks[bi];
       if (!block) break;
       const blockDetails = block._appendChar(ch, {
         ...flags,
-        _beforeTailState: (_flags$_beforeTailSta = flags._beforeTailState) == null ? void 0 : (_flags$_beforeTailSta2 = _flags$_beforeTailSta._blocks) == null ? void 0 : _flags$_beforeTailSta2[bi]
+        _beforeTailState: (_flags$_beforeTailSta = flags._beforeTailState) == null || (_flags$_beforeTailSta = _flags$_beforeTailSta._blocks) == null ? void 0 : _flags$_beforeTailSta[bi]
       });
       const skip = blockDetails.skip;
       details.aggregate(blockDetails);
@@ -33518,7 +33583,7 @@ class MaskedPattern extends Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     const chunkTail = new ChunksTailDetails();
     if (fromPos === toPos) return chunkTail;
@@ -33536,7 +33601,7 @@ class MaskedPattern extends Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     if (flags === void 0) {
       flags = {};
@@ -33561,7 +33626,7 @@ class MaskedPattern extends Masked {
   _appendPlaceholder(toBlockIndex) {
     const details = new ChangeDetails();
     if (this.lazy && toBlockIndex == null) return details;
-    const startBlockIter = this._mapPosToBlock(this.value.length);
+    const startBlockIter = this._mapPosToBlock(this.displayValue.length);
     if (!startBlockIter) return details;
     const startBlockIndex = startBlockIter.index;
     const endBlockIndex = toBlockIndex != null ? toBlockIndex : this._blocks.length;
@@ -33582,7 +33647,7 @@ class MaskedPattern extends Masked {
     for (let bi = 0; bi < this._blocks.length; ++bi) {
       const block = this._blocks[bi];
       const blockStartPos = accVal.length;
-      accVal += block.value;
+      accVal += block.displayValue;
       if (pos <= accVal.length) {
         return {
           index: bi,
@@ -33592,11 +33657,11 @@ class MaskedPattern extends Masked {
     }
   }
   _blockStartPos(blockIndex) {
-    return this._blocks.slice(0, blockIndex).reduce((pos, b) => pos += b.value.length, 0);
+    return this._blocks.slice(0, blockIndex).reduce((pos, b) => pos += b.displayValue.length, 0);
   }
   _forEachBlocksInRange(fromPos, toPos, fn) {
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     const fromBlockIter = this._mapPosToBlock(fromPos);
     if (fromBlockIter) {
@@ -33604,12 +33669,12 @@ class MaskedPattern extends Masked {
       // process first block
       const isSameBlock = toBlockIter && fromBlockIter.index === toBlockIter.index;
       const fromBlockStartPos = fromBlockIter.offset;
-      const fromBlockEndPos = toBlockIter && isSameBlock ? toBlockIter.offset : this._blocks[fromBlockIter.index].value.length;
+      const fromBlockEndPos = toBlockIter && isSameBlock ? toBlockIter.offset : this._blocks[fromBlockIter.index].displayValue.length;
       fn(this._blocks[fromBlockIter.index], fromBlockIter.index, fromBlockStartPos, fromBlockEndPos);
       if (toBlockIter && !isSameBlock) {
         // process intermediate blocks
         for (let bi = fromBlockIter.index + 1; bi < toBlockIter.index; ++bi) {
-          fn(this._blocks[bi], bi, 0, this._blocks[bi].value.length);
+          fn(this._blocks[bi], bi, 0, this._blocks[bi].displayValue.length);
         }
 
         // process last block
@@ -33622,7 +33687,7 @@ class MaskedPattern extends Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     const removeDetails = super.remove(fromPos, toPos);
     this._forEachBlocksInRange(fromPos, toPos, (b, _, bFromPos, bToPos) => {
@@ -33643,7 +33708,7 @@ class MaskedPattern extends Masked {
       if (cursor.pushRightBeforeInput()) return cursor.pos;
       cursor.popState();
       if (cursor.pushLeftBeforeInput()) return cursor.pos;
-      return this.value.length;
+      return this.displayValue.length;
     }
 
     // FORCE is only about a|* otherwise is 0
@@ -33682,7 +33747,7 @@ class MaskedPattern extends Masked {
       cursor.pushRightBeforeInput();
       cursor.pushRightBeforeRequired();
       if (cursor.pushRightBeforeFilled()) return cursor.pos;
-      if (direction === DIRECTION.FORCE_RIGHT) return this.value.length;
+      if (direction === DIRECTION.FORCE_RIGHT) return this.displayValue.length;
 
       // backward flow
       cursor.popState();
@@ -33698,7 +33763,7 @@ class MaskedPattern extends Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     let total = 0;
     this._forEachBlocksInRange(fromPos, toPos, (b, _, bFromPos, bToPos) => {
@@ -33950,6 +34015,8 @@ IMask.MaskedDate = MaskedDate;
 class MaskedDynamic extends Masked {
   /** Currently chosen mask */
 
+  /** Currently chosen mask */
+
   /** Compliled {@link Masked} options */
 
   /** Chooses {@link Masked} depending on input value */
@@ -33967,13 +34034,22 @@ class MaskedDynamic extends Masked {
   _update(opts) {
     super._update(opts);
     if ('mask' in opts) {
+      this.exposeMask = undefined;
       // mask could be totally dynamic with only `dispatch` option
-      this.compiledMasks = Array.isArray(opts.mask) ? opts.mask.map(m => createMask({
-        overwrite: this._overwrite,
-        eager: this._eager,
-        skipInvalid: this._skipInvalid,
-        ...normalizeOpts(m)
-      })) : [];
+      this.compiledMasks = Array.isArray(opts.mask) ? opts.mask.map(m => {
+        const {
+          expose,
+          ...maskOpts
+        } = normalizeOpts(m);
+        const masked = createMask({
+          overwrite: this._overwrite,
+          eager: this._eager,
+          skipInvalid: this._skipInvalid,
+          ...maskOpts
+        });
+        if (expose) this.exposeMask = masked;
+        return masked;
+      }) : [];
 
       // this.currentMask = this.doDispatch(''); // probably not needed but lets see
     }
@@ -34105,28 +34181,40 @@ class MaskedDynamic extends Masked {
     this.compiledMasks.forEach(m => m.reset());
   }
   get value() {
-    return this.currentMask ? this.currentMask.value : '';
+    return this.exposeMask ? this.exposeMask.value : this.currentMask ? this.currentMask.value : '';
   }
   set value(value) {
-    super.value = value;
+    if (this.exposeMask) {
+      this.exposeMask.value = value;
+      this.currentMask = this.exposeMask;
+      this._applyDispatch();
+    } else super.value = value;
   }
   get unmaskedValue() {
-    return this.currentMask ? this.currentMask.unmaskedValue : '';
+    return this.exposeMask ? this.exposeMask.unmaskedValue : this.currentMask ? this.currentMask.unmaskedValue : '';
   }
   set unmaskedValue(unmaskedValue) {
-    super.unmaskedValue = unmaskedValue;
+    if (this.exposeMask) {
+      this.exposeMask.unmaskedValue = unmaskedValue;
+      this.currentMask = this.exposeMask;
+      this._applyDispatch();
+    } else super.unmaskedValue = unmaskedValue;
   }
   get typedValue() {
-    return this.currentMask ? this.currentMask.typedValue : '';
+    return this.exposeMask ? this.exposeMask.typedValue : this.currentMask ? this.currentMask.typedValue : '';
   }
-
-  // probably typedValue should not be used with dynamic
-  set typedValue(value) {
-    let unmaskedValue = String(value);
+  set typedValue(typedValue) {
+    if (this.exposeMask) {
+      this.exposeMask.typedValue = typedValue;
+      this.currentMask = this.exposeMask;
+      this._applyDispatch();
+      return;
+    }
+    let unmaskedValue = String(typedValue);
 
     // double check it
     if (this.currentMask) {
-      this.currentMask.typedValue = value;
+      this.currentMask.typedValue = typedValue;
       unmaskedValue = this.currentMask.unmaskedValue;
     }
     this.unmaskedValue = unmaskedValue;
@@ -34230,7 +34318,7 @@ MaskedDynamic.DEFAULTS = {
     // simulate input
     const inputs = masked.compiledMasks.map((m, index) => {
       const isCurrent = masked.currentMask === m;
-      const startInputPos = isCurrent ? m.value.length : m.nearestInputPos(m.value.length, DIRECTION.FORCE_LEFT);
+      const startInputPos = isCurrent ? m.displayValue.length : m.nearestInputPos(m.displayValue.length, DIRECTION.FORCE_LEFT);
       if (m.rawInputValue !== inputValue) {
         m.reset();
         m.append(inputValue, {
@@ -34244,7 +34332,7 @@ MaskedDynamic.DEFAULTS = {
       return {
         index,
         weight: m.rawInputValue.length,
-        totalInputPositions: m.totalInputPositions(0, Math.max(startInputPos, m.nearestInputPos(m.value.length, DIRECTION.FORCE_LEFT)))
+        totalInputPositions: m.totalInputPositions(0, Math.max(startInputPos, m.nearestInputPos(m.displayValue.length, DIRECTION.FORCE_LEFT)))
       };
     });
 
@@ -34257,6 +34345,10 @@ IMask.MaskedDynamic = MaskedDynamic;
 
 /** Pattern which validates enum values */
 class MaskedEnum extends MaskedPattern {
+  constructor(opts) {
+    super(opts); // mask will be created in _update
+  }
+
   updateOptions(opts) {
     super.updateOptions(opts);
   }
@@ -34266,13 +34358,17 @@ class MaskedEnum extends MaskedPattern {
       ...eopts
     } = opts;
     if (_enum) {
-      eopts.mask = '*'.repeat(_enum[0].length);
+      const lengths = _enum.map(e => e.length);
+      const requiredLength = Math.min(...lengths);
+      const optionalLength = Math.max(...lengths) - requiredLength;
+      eopts.mask = '*'.repeat(requiredLength);
+      if (optionalLength) eopts.mask += '[' + '*'.repeat(optionalLength) + ']';
       this.enum = _enum;
     }
     super._update(eopts);
   }
   doValidate(flags) {
-    return this.enum.some(e => e.indexOf(this.unmaskedValue) >= 0) && super.doValidate(flags);
+    return this.enum.some(e => e.indexOf(this.unmaskedValue) === 0) && super.doValidate(flags);
   }
 }
 IMask.MaskedEnum = MaskedEnum;
@@ -34299,9 +34395,7 @@ class MaskedFunction extends Masked {
 }
 IMask.MaskedFunction = MaskedFunction;
 
-/**
-  Number mask
-*/
+/** Number mask */
 class MaskedNumber extends Masked {
   /** Single char */
 
@@ -34363,7 +34457,7 @@ class MaskedNumber extends Masked {
     if (flags === void 0) {
       flags = {};
     }
-    ch = this._removeThousandsSeparators(this.scale && this.mapToRadix.length && (
+    const [prepCh, details] = super.doPrepareChar(this._removeThousandsSeparators(this.scale && this.mapToRadix.length && (
     /*
       radix should be mapped when
       1) input is done from keyboard = flags.input && flags.raw
@@ -34372,8 +34466,7 @@ class MaskedNumber extends Masked {
       1) value is set = flags.input && !flags.raw
       2) raw value is set = !flags.input && flags.raw
     */
-    flags.input && flags.raw || !flags.input && !flags.raw) ? ch.replace(this._mapToRadixRegExp, this.radix) : ch);
-    const [prepCh, details] = super.doPrepareChar(ch, flags);
+    flags.input && flags.raw || !flags.input && !flags.raw) ? ch.replace(this._mapToRadixRegExp, this.radix) : ch), flags);
     if (ch && !prepCh) details.skip = true;
     if (prepCh && !this.allowPositive && !this.value && prepCh !== '-') details.aggregate(this._appendChar('-'));
     return [prepCh, details];
@@ -34402,7 +34495,7 @@ class MaskedNumber extends Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     [fromPos, toPos] = this._adjustRangeWithSeparators(fromPos, toPos);
     return this._removeThousandsSeparators(super.extractInput(fromPos, toPos, flags));
@@ -34443,7 +34536,7 @@ class MaskedNumber extends Masked {
       fromPos = 0;
     }
     if (toPos === void 0) {
-      toPos = this.value.length;
+      toPos = this.displayValue.length;
     }
     [fromPos, toPos] = this._adjustRangeWithSeparators(fromPos, toPos);
     const valueBeforePos = this.value.slice(0, fromPos);
@@ -36326,5 +36419,5 @@ function logSoftError({ context = {}, isSideWindowError = false, message, origin
     }
 }
 
-export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, logSoftError, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, TableWithSelectableRows, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, logSoftError, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map