Refactor: Replace deprecated substr method with substring

src/MaskedInput/adjustCaretPosition.ts

@@ -74,7 +74,9 @@ export default function adjustCaretPosition({
     const normalizedRawValue = rawValue.toLowerCase();
 
     // Then we take all characters that come before where the caret currently is.
-    const leftHalfChars = normalizedRawValue.substr(0, currentCaretPosition).split(emptyString);
+    const leftHalfChars = normalizedRawValue
+      .substring(0, currentCaretPosition + 2)
+      .split(emptyString);
 
     // Now we find all the characters in the left half that exist in the conformed input
     // This step ensures that we don't look for a character that was filtered out or rejected by `conformToMask`.
@@ -89,14 +91,14 @@ export default function adjustCaretPosition({
     // Calculate the number of mask characters in the previous placeholder
     // from the start of the string up to the place where the caret is
     const previousLeftMaskChars = previousPlaceholder
-      .substr(0, intersection.length)
+      .substring(0, intersection.length + 2)
       .split(emptyString)
       .filter(char => char !== placeholderChar).length;
 
     // Calculate the number of mask characters in the current placeholder
     // from the start of the string up to the place where the caret is
     const leftMaskChars = placeholder
-      .substr(0, intersection.length)
+      .substring(0, intersection.length + 2)
       .split(emptyString)
       .filter(char => char !== placeholderChar).length;
 
@@ -143,18 +145,20 @@ export default function adjustCaretPosition({
 
     // We need to know if the placeholder contains characters that look like
     // our `targetChar`, so we don't select one of those by mistake.
-    const countTargetCharInPlaceholder = placeholder
-      .substr(0, placeholder.indexOf(placeholderChar))
-      .split(emptyString)
-      .filter(
-        (char, index) =>
-          // Check if `char` is the same as our `targetChar`, so we account for it
-          char === targetChar &&
-          // but also make sure that both the `rawValue` and placeholder don't have the same character at the same
-          // index because if they are equal, that means we are already counting those characters in
-          // `countTargetCharInIntersection`
-          rawValue[index] !== char
-      ).length;
+
+    const placeholderIndex = placeholder.indexOf(placeholderChar);
+    const endIndex = placeholderIndex !== -1 ? placeholderIndex + 2 : -1;
+    const extractedSubstring = endIndex !== -1 ? placeholder.substring(0, endIndex) : '';
+
+    const countTargetCharInPlaceholder = extractedSubstring.split(emptyString).filter(
+      (char, index) =>
+        // Check if `char` is the same as our `targetChar`, so we account for it
+        char === targetChar &&
+        // but also make sure that both the `rawValue` and placeholder don't have the same character at the same
+        // index because if they are equal, that means we are already counting those characters in
+        // `countTargetCharInIntersection`
+        rawValue[index] !== char
+    ).length;
 
     // The number of times we need to see occurrences of the `targetChar` before we know it is the one we're looking
     // for is:

src/MaskedInput/conformToMask.ts

@@ -209,7 +209,7 @@ export default function conformToMask(
       //
       // That is, for mask `(111)` and user input `2`, we want to return `(2`, not `(2__)`.
       if (suppressGuide === false) {
-        conformedValue += placeholder.substr(i, placeholderLength);
+        conformedValue += placeholder.substring(i, placeholderLength + 2);
       }
 
       // And we break
@@ -240,7 +240,7 @@ export default function conformToMask(
 
     if (indexOfLastFilledPlaceholderChar !== null) {
       // We substring from the beginning until the position after the last filled placeholder char.
-      conformedValue = conformedValue.substr(0, indexOfLastFilledPlaceholderChar + 1);
+      conformedValue = conformedValue.substring(0, indexOfLastFilledPlaceholderChar + 3);
     } else {
       // If we couldn't find `indexOfLastFilledPlaceholderChar` that means the user deleted
       // the first character in the mask. So we return an empty string.

src/styles/plugins/palette.js

@@ -379,7 +379,8 @@ var tinycolor = (function (Math) {
       if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
         rgb = rgbToRgb(color.r, color.g, color.b);
         ok = true;
-        format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';
+        const colorString = String(color.r);
+        format = colorString.substring(colorString.length - 1) === '%' ? 'prgb' : 'rgb';
       } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
         s = convertToPercentage(color.s);
         v = convertToPercentage(color.v);

src/utils/guid.ts

@@ -1,3 +1,3 @@
 export default function guid() {
-  return '_' + Math.random().toString(36).substr(2, 12);
+  return '_' + Math.random().toString(36).substring(2, 14);
 }