rsuite 5.0.3 → 5.1.0

package/esm/MaskedInput/conformToMask.js

@@ -0,0 +1,239 @@
+import { convertMaskToPlaceholder, processCaretTraps, defaultPlaceholderChar } from './utilities';
+export function isArray(value) {
+  return Array.isArray && Array.isArray(value) || value instanceof Array;
+}
+export default function conformToMask(rawValue, mask, config) {
+  if (rawValue === void 0) {
+    rawValue = '';
+  }
+
+  if (mask === void 0) {
+    mask = [];
+  }
+
+  if (config === void 0) {
+    config = {};
+  }
+
+  if (!isArray(mask)) {
+    // If someone passes a function as the mask property, we should call the
+    // function to get the mask array - Normally this is handled by the
+    // `createTextMaskInputElement:update` function - this allows mask functions
+    // to be used directly with `conformToMask`
+    if (typeof mask === 'function') {
+      // call the mask function to get the mask array
+      mask = mask(rawValue, config); // mask functions can setup caret traps to have some control over how the caret moves. We need to process
+      // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask
+
+      mask = processCaretTraps(mask).maskWithoutCaretTraps;
+    } else {
+      throw new Error('Text-mask:conformToMask; The mask property must be an array.');
+    }
+  } // These configurations tell us how to conform the mask
+
+
+  var _config = config,
+      _config$guide = _config.guide,
+      guide = _config$guide === void 0 ? true : _config$guide,
+      _config$previousConfo = _config.previousConformedValue,
+      previousConformedValue = _config$previousConfo === void 0 ? '' : _config$previousConfo,
+      _config$placeholderCh = _config.placeholderChar,
+      placeholderChar = _config$placeholderCh === void 0 ? defaultPlaceholderChar : _config$placeholderCh,
+      _config$placeholder = _config.placeholder,
+      placeholder = _config$placeholder === void 0 ? convertMaskToPlaceholder(mask, placeholderChar) : _config$placeholder,
+      currentCaretPosition = _config.currentCaretPosition,
+      keepCharPositions = _config.keepCharPositions; // The configs below indicate that the user wants the algorithm to work in *no guide* mode
+
+  var suppressGuide = guide === false && previousConformedValue !== undefined; // Calculate lengths once for performance
+
+  var rawValueLength = rawValue.length;
+  var previousConformedValueLength = previousConformedValue.length;
+  var placeholderLength = placeholder.length;
+  var maskLength = mask.length; // This tells us the number of edited characters and the direction in which they were edited (+/-)
+
+  var editDistance = rawValueLength - previousConformedValueLength; // In *no guide* mode, we need to know if the user is trying to add a character or not
+
+  var isAddition = editDistance > 0; // Tells us the index of the first change. For (438) 394-4938 to (38) 394-4938, that would be 1
+
+  var indexOfFirstChange = currentCaretPosition + (isAddition ? -editDistance : 0); // We're also gonna need the index of last change, which we can derive as follows...
+
+  var indexOfLastChange = indexOfFirstChange + Math.abs(editDistance); // If `conformToMask` is configured to keep character positions, that is, for mask 111, previous value
+  // _2_ and raw value 3_2_, the new conformed value should be 32_, not 3_2 (default behavior). That's in the case of
+  // addition. And in the case of deletion, previous value _23, raw value _3, the new conformed string should be
+  // __3, not _3_ (default behavior)
+  //
+  // The next block of logic handles keeping character positions for the case of deletion. (Keeping
+  // character positions for the case of addition is further down since it is handled differently.)
+  // To do this, we want to compensate for all characters that were deleted
+
+  if (keepCharPositions === true && !isAddition) {
+    // We will be storing the new placeholder characters in this variable.
+    var compensatingPlaceholderChars = ''; // For every character that was deleted from a placeholder position, we add a placeholder char
+
+    for (var i = indexOfFirstChange; i < indexOfLastChange; i++) {
+      if (placeholder[i] === placeholderChar) {
+        compensatingPlaceholderChars += placeholderChar;
+      }
+    } // Now we trick our algorithm by modifying the raw value to make it contain additional placeholder characters
+    // That way when the we start laying the characters again on the mask, it will keep the non-deleted characters
+    // in their positions.
+
+
+    rawValue = rawValue.slice(0, indexOfFirstChange) + compensatingPlaceholderChars + rawValue.slice(indexOfFirstChange, rawValueLength);
+  } // Convert `rawValue` string to an array, and mark characters based on whether they are newly added or have
+  // existed in the previous conformed value. Identifying new and old characters is needed for `conformToMask`
+  // to work if it is configured to keep character positions.
+
+
+  var rawValueArr = rawValue.split('').map(function (char, i) {
+    return {
+      char: char,
+      isNew: i >= indexOfFirstChange && i < indexOfLastChange
+    };
+  }); // The loop below removes masking characters from user input. For example, for mask
+  // `00 (111)`, the placeholder would be `00 (___)`. If user input is `00 (234)`, the loop below
+  // would remove all characters but `234` from the `rawValueArr`. The rest of the algorithm
+  // then would lay `234` on top of the available placeholder positions in the mask.
+
+  for (var _i = rawValueLength - 1; _i >= 0; _i--) {
+    var char = rawValueArr[_i].char;
+
+    if (char !== placeholderChar) {
+      var shouldOffset = _i >= indexOfFirstChange && previousConformedValueLength === maskLength;
+
+      if (char === placeholder[shouldOffset ? _i - editDistance : _i]) {
+        rawValueArr.splice(_i, 1);
+      }
+    }
+  } // This is the variable that we will be filling with characters as we figure them out
+  // in the algorithm below
+
+
+  var conformedValue = '';
+  var someCharsRejected = false; // Ok, so first we loop through the placeholder looking for placeholder characters to fill up.
+
+  placeholderLoop: for (var _i2 = 0; _i2 < placeholderLength; _i2++) {
+    var charInPlaceholder = placeholder[_i2]; // We see one. Let's find out what we can put in it.
+
+    if (charInPlaceholder === placeholderChar) {
+      // But before that, do we actually have any user characters that need a place?
+      if (rawValueArr.length > 0) {
+        // We will keep chipping away at user input until either we run out of characters
+        // or we find at least one character that we can map.
+        while (rawValueArr.length > 0) {
+          // Let's retrieve the first user character in the queue of characters we have left
+          var _rawValueArr$shift = rawValueArr.shift(),
+              rawValueChar = _rawValueArr$shift.char,
+              isNew = _rawValueArr$shift.isNew; // If the character we got from the user input is a placeholder character (which happens
+          // regularly because user input could be something like (540) 90_-____, which includes
+          // a bunch of `_` which are placeholder characters) and we are not in *no guide* mode,
+          // then we map this placeholder character to the current spot in the placeholder
+
+
+          if (rawValueChar === placeholderChar && suppressGuide !== true) {
+            conformedValue += placeholderChar; // And we go to find the next placeholder character that needs filling
+
+            continue placeholderLoop; // Else if, the character we got from the user input is not a placeholder, let's see
+            // if the current position in the mask can accept it.
+          } else if (mask[_i2].test(rawValueChar)) {
+            // we map the character differently based on whether we are keeping character positions or not.
+            // If any of the conditions below are met, we simply map the raw value character to the
+            // placeholder position.
+            if (keepCharPositions !== true || isNew === false || previousConformedValue === '' || guide === false || !isAddition) {
+              conformedValue += rawValueChar;
+            } else {
+              // We enter this block of code if we are trying to keep character positions and none of the conditions
+              // above is met. In this case, we need to see if there's an available spot for the raw value character
+              // to be mapped to. If we couldn't find a spot, we will discard the character.
+              //
+              // For example, for mask `1111`, previous conformed value `_2__`, raw value `942_2__`. We can map the
+              // `9`, to the first available placeholder position, but then, there are no more spots available for the
+              // `4` and `2`. So, we discard them and end up with a conformed value of `92__`.
+              var rawValueArrLength = rawValueArr.length;
+              var indexOfNextAvailablePlaceholderChar = null; // Let's loop through the remaining raw value characters. We are looking for either a suitable spot, ie,
+              // a placeholder character or a non-suitable spot, ie, a non-placeholder character that is not new.
+              // If we see a suitable spot first, we store its position and exit the loop. If we see a non-suitable
+              // spot first, we exit the loop and our `indexOfNextAvailablePlaceholderChar` will stay as `null`.
+
+              for (var _i3 = 0; _i3 < rawValueArrLength; _i3++) {
+                var charData = rawValueArr[_i3];
+
+                if (charData.char !== placeholderChar && charData.isNew === false) {
+                  break;
+                }
+
+                if (charData.char === placeholderChar) {
+                  indexOfNextAvailablePlaceholderChar = _i3;
+                  break;
+                }
+              } // If `indexOfNextAvailablePlaceholderChar` is not `null`, that means the character is not blocked.
+              // We can map it. And to keep the character positions, we remove the placeholder character
+              // from the remaining characters
+
+
+              if (indexOfNextAvailablePlaceholderChar !== null) {
+                conformedValue += rawValueChar;
+                rawValueArr.splice(indexOfNextAvailablePlaceholderChar, 1); // If `indexOfNextAvailablePlaceholderChar` is `null`, that means the character is blocked. We have to
+                // discard it.
+              } else {
+                _i2--;
+              }
+            } // Since we've mapped this placeholder position. We move on to the next one.
+
+
+            continue placeholderLoop;
+          } else {
+            someCharsRejected = true;
+          }
+        }
+      } // We reach this point when we've mapped all the user input characters to placeholder
+      // positions in the mask. In *guide* mode, we append the left over characters in the
+      // placeholder to the `conformedString`, but in *no guide* mode, we don't wanna do that.
+      //
+      // That is, for mask `(111)` and user input `2`, we want to return `(2`, not `(2__)`.
+
+
+      if (suppressGuide === false) {
+        conformedValue += placeholder.substr(_i2, placeholderLength);
+      } // And we break
+
+
+      break; // Else, the charInPlaceholder is not a placeholderChar. That is, we cannot fill it
+      // with user input. So we just map it to the final output
+    } else {
+      conformedValue += charInPlaceholder;
+    }
+  } // The following logic is needed to deal with the case of deletion in *no guide* mode.
+  //
+  // Consider the silly mask `(111) /// 1`. What if user tries to delete the last placeholder
+  // position? Something like `(589) /// `. We want to conform that to `(589`. Not `(589) /// `.
+  // That's why the logic below finds the last filled placeholder character, and removes everything
+  // from that point on.
+
+
+  if (suppressGuide && isAddition === false) {
+    var indexOfLastFilledPlaceholderChar = null; // Find the last filled placeholder position and substring from there
+
+    for (var _i4 = 0; _i4 < conformedValue.length; _i4++) {
+      if (placeholder[_i4] === placeholderChar) {
+        indexOfLastFilledPlaceholderChar = _i4;
+      }
+    }
+
+    if (indexOfLastFilledPlaceholderChar !== null) {
+      // We substring from the beginning until the position after the last filled placeholder char.
+      conformedValue = conformedValue.substr(0, indexOfLastFilledPlaceholderChar + 1);
+    } else {
+      // If we couldn't find `indexOfLastFilledPlaceholderChar` that means the user deleted
+      // the first character in the mask. So we return an empty string.
+      conformedValue = '';
+    }
+  }
+
+  return {
+    conformedValue: conformedValue,
+    meta: {
+      someCharsRejected: someCharsRejected
+    }
+  };
+}

package/esm/MaskedInput/createTextMaskInputElement.d.ts

@@ -0,0 +1,7 @@
+export default function createTextMaskInputElement(config: any): {
+    state: {
+        previousConformedValue: any;
+        previousPlaceholder: any;
+    };
+    update(rawValue: any, { inputElement, mask: providedMask, guide, pipe, placeholderChar, keepCharPositions, showMask }?: any): void;
+};

package/esm/MaskedInput/createTextMaskInputElement.js

@@ -0,0 +1,212 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import isString from 'lodash/isString';
+import isNumber from 'lodash/isNumber';
+import adjustCaretPosition from './adjustCaretPosition';
+import conformToMask from './conformToMask';
+import { convertMaskToPlaceholder, processCaretTraps, defaultPlaceholderChar } from './utilities';
+var emptyString = '';
+var strNone = 'none';
+var strObject = 'object';
+var isAndroid = typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);
+var defer = typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : setTimeout;
+export default function createTextMaskInputElement(config) {
+  // Anything that we will need to keep between `update` calls, we will store in this `state` object.
+  var state = {
+    previousConformedValue: undefined,
+    previousPlaceholder: undefined
+  };
+  return {
+    state: state,
+    // `update` is called by framework components whenever they want to update the `value` of the input element.
+    // The caller can send a `rawValue` to be conformed and set on the input element. However, the default use-case
+    // is for this to be read from the `inputElement` directly.
+    update: function update(rawValue, _temp) {
+      var _pipeResults, _pipeResults2;
+
+      var _ref = _temp === void 0 ? config : _temp,
+          inputElement = _ref.inputElement,
+          providedMask = _ref.mask,
+          guide = _ref.guide,
+          pipe = _ref.pipe,
+          _ref$placeholderChar = _ref.placeholderChar,
+          placeholderChar = _ref$placeholderChar === void 0 ? defaultPlaceholderChar : _ref$placeholderChar,
+          _ref$keepCharPosition = _ref.keepCharPositions,
+          keepCharPositions = _ref$keepCharPosition === void 0 ? false : _ref$keepCharPosition,
+          _ref$showMask = _ref.showMask,
+          showMask = _ref$showMask === void 0 ? false : _ref$showMask;
+
+      // if `rawValue` is `undefined`, read from the `inputElement`
+      if (typeof rawValue === 'undefined') {
+        rawValue = inputElement.value;
+      } // If `rawValue` equals `state.previousConformedValue`, we don't need to change anything. So, we return.
+      // This check is here to handle controlled framework components that repeat the `update` call on every render.
+
+
+      if (rawValue === state.previousConformedValue) {
+        return;
+      } // Text Mask accepts masks that are a combination of a `mask` and a `pipe` that work together. If such a `mask` is
+      // passed, we destructure it below, so the rest of the code can work normally as if a separate `mask` and a `pipe`
+      // were passed.
+
+
+      if (typeof providedMask === strObject && providedMask.pipe !== undefined && providedMask.mask !== undefined) {
+        pipe = providedMask.pipe;
+        providedMask = providedMask.mask;
+      } // The `placeholder` is an essential piece of how Text Mask works. For a mask like `(111)`, the placeholder would
+      // be `(___)` if the `placeholderChar` is set to `_`.
+
+
+      var placeholder; // We don't know what the mask would be yet. If it is an array, we take it as is, but if it's a function, we will
+      // have to call that function to get the mask array.
+
+      var mask; // If the provided mask is an array, we can call `convertMaskToPlaceholder` here once and we'll always have the
+      // correct `placeholder`.
+
+      if (providedMask instanceof Array) {
+        placeholder = convertMaskToPlaceholder(providedMask, placeholderChar);
+      } // In framework components that support reactivity, it's possible to turn off masking by passing
+      // `false` for `mask` after initialization. See https://github.com/text-mask/text-mask/pull/359
+
+
+      if (providedMask === false) {
+        return;
+      } // We check the provided `rawValue` before moving further.
+      // If it's something we can't work with `getSafeRawValue` will throw.
+
+
+      var safeRawValue = getSafeRawValue(rawValue); // `selectionEnd` indicates to us where the caret position is after the user has typed into the input
+
+      var currentCaretPosition = inputElement.selectionEnd; // We need to know what the `previousConformedValue` and `previousPlaceholder` is from the previous `update` call
+
+      var previousConformedValue = state.previousConformedValue,
+          previousPlaceholder = state.previousPlaceholder;
+      var caretTrapIndexes; // If the `providedMask` is a function. We need to call it at every `update` to get the `mask` array.
+      // Then we also need to get the `placeholder`
+
+      if (typeof providedMask === 'function') {
+        mask = providedMask(safeRawValue, {
+          currentCaretPosition: currentCaretPosition,
+          previousConformedValue: previousConformedValue,
+          placeholderChar: placeholderChar
+        }); // disable masking if `mask` is `false`
+
+        if (mask === false) {
+          return;
+        } // mask functions can setup caret traps to have some control over how the caret moves. We need to process
+        // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask and return
+        // the indexes of the caret traps.
+
+
+        var _processCaretTraps = processCaretTraps(mask),
+            maskWithoutCaretTraps = _processCaretTraps.maskWithoutCaretTraps,
+            indexes = _processCaretTraps.indexes;
+
+        mask = maskWithoutCaretTraps; // The processed mask is what we're interested in
+
+        caretTrapIndexes = indexes; // And we need to store these indexes because they're needed by `adjustCaretPosition`
+
+        placeholder = convertMaskToPlaceholder(mask, placeholderChar); // If the `providedMask` is not a function, we just use it as-is.
+      } else {
+        mask = providedMask;
+      } // The following object will be passed to `conformToMask` to determine how the `rawValue` will be conformed
+
+
+      var conformToMaskConfig = {
+        previousConformedValue: previousConformedValue,
+        guide: guide,
+        placeholderChar: placeholderChar,
+        pipe: pipe,
+        placeholder: placeholder,
+        currentCaretPosition: currentCaretPosition,
+        keepCharPositions: keepCharPositions
+      }; // `conformToMask` returns `conformedValue` as part of an object for future API flexibility
+
+      var _conformToMask = conformToMask(safeRawValue, mask, conformToMaskConfig),
+          conformedValue = _conformToMask.conformedValue; // The following few lines are to support the `pipe` feature.
+
+
+      var piped = typeof pipe === 'function';
+      var pipeResults = {}; // If `pipe` is a function, we call it.
+
+      if (piped) {
+        // `pipe` receives the `conformedValue` and the configurations with which `conformToMask` was called.
+        pipeResults = pipe(conformedValue, _extends({
+          rawValue: safeRawValue
+        }, conformToMaskConfig)); // `pipeResults` should be an object. But as a convenience, we allow the pipe author to just return `false` to
+        // indicate rejection. Or return just a string when there are no piped characters.
+        // If the `pipe` returns `false` or a string, the block below turns it into an object that the rest
+        // of the code can work with.
+
+        if (pipeResults === false) {
+          // If the `pipe` rejects `conformedValue`, we use the `previousConformedValue`, and set `rejected` to `true`.
+          pipeResults = {
+            value: previousConformedValue,
+            rejected: true
+          };
+        } else if (isString(pipeResults)) {
+          pipeResults = {
+            value: pipeResults
+          };
+        }
+      } // Before we proceed, we need to know which conformed value to use, the one returned by the pipe or the one
+      // returned by `conformToMask`.
+
+
+      var finalConformedValue = piped ? (_pipeResults = pipeResults) === null || _pipeResults === void 0 ? void 0 : _pipeResults.value : conformedValue; // After determining the conformed value, we will need to know where to set
+      // the caret position. `adjustCaretPosition` will tell us.
+
+      var adjustedCaretPosition = adjustCaretPosition({
+        previousConformedValue: previousConformedValue,
+        previousPlaceholder: previousPlaceholder,
+        conformedValue: finalConformedValue,
+        placeholder: placeholder,
+        rawValue: safeRawValue,
+        currentCaretPosition: currentCaretPosition,
+        placeholderChar: placeholderChar,
+        indexesOfPipedChars: (_pipeResults2 = pipeResults) === null || _pipeResults2 === void 0 ? void 0 : _pipeResults2.indexesOfPipedChars,
+        caretTrapIndexes: caretTrapIndexes
+      }); // Text Mask sets the input value to an empty string when the condition below is set. It provides a better UX.
+
+      var inputValueShouldBeEmpty = finalConformedValue === placeholder && adjustedCaretPosition === 0;
+      var emptyValue = showMask ? placeholder : emptyString;
+      var inputElementValue = inputValueShouldBeEmpty ? emptyValue : finalConformedValue;
+      state.previousConformedValue = inputElementValue; // store value for access for next time
+
+      state.previousPlaceholder = placeholder; // In some cases, this `update` method will be repeatedly called with a raw value that has already been conformed
+      // and set to `inputElement.value`. The below check guards against needlessly readjusting the input state.
+      // See https://github.com/text-mask/text-mask/issues/231
+
+      if (inputElement.value === inputElementValue) {
+        return;
+      }
+
+      inputElement.value = inputElementValue; // set the input value
+
+      safeSetSelection(inputElement, adjustedCaretPosition); // adjust caret position
+    }
+  };
+}
+
+function safeSetSelection(element, selectionPosition) {
+  if (document.activeElement === element) {
+    if (isAndroid) {
+      defer(function () {
+        return element.setSelectionRange(selectionPosition, selectionPosition, strNone);
+      }, 0);
+    } else {
+      element.setSelectionRange(selectionPosition, selectionPosition, strNone);
+    }
+  }
+}
+
+function getSafeRawValue(inputValue) {
+  if (isString(inputValue)) {
+    return inputValue;
+  } else if (isNumber(inputValue)) {
+    return String(inputValue);
+  } else if (inputValue === undefined || inputValue === null) {
+    return emptyString;
+  } else {
+    throw new Error("The 'value' provided to Text Mask needs to be a string or a number. The value received was:\n\n " + JSON.stringify(inputValue));
+  }
+}

package/esm/MaskedInput/index.d.ts

@@ -0,0 +1,3 @@
+import MaskedInput from './MaskedInput';
+export type { MaskedInputProps } from './MaskedInput';
+export default MaskedInput;

package/esm/MaskedInput/index.js

@@ -0,0 +1,2 @@
+import MaskedInput from './MaskedInput';
+export default MaskedInput;

package/esm/MaskedInput/types.d.ts

@@ -0,0 +1,10 @@
+export interface ConfigType {
+    guide?: boolean;
+    previousConformedValue?: string;
+    placeholderChar?: string;
+    placeholder?: string;
+    currentCaretPosition?: number;
+    keepCharPositions?: boolean;
+}
+export declare type MaskType = string | (string | RegExp)[];
+export declare type MaskFunctionType = (rawValue: string, config: ConfigType) => MaskType;

package/esm/MaskedInput/utilities.d.ts

@@ -0,0 +1,7 @@
+import { MaskType, MaskFunctionType } from './types';
+export declare const defaultPlaceholderChar = "_";
+export declare function convertMaskToPlaceholder(mask?: MaskType | MaskFunctionType, placeholderChar?: string): string;
+export declare function processCaretTraps(mask: any): {
+    maskWithoutCaretTraps: any;
+    indexes: any[];
+};

package/esm/MaskedInput/utilities.js

@@ -0,0 +1,38 @@
+var emptyArray = [];
+var strCaretTrap = '[]';
+export var defaultPlaceholderChar = '_';
+export function convertMaskToPlaceholder(mask, placeholderChar) {
+  if (mask === void 0) {
+    mask = emptyArray;
+  }
+
+  if (placeholderChar === void 0) {
+    placeholderChar = defaultPlaceholderChar;
+  }
+
+  if (!Array.isArray(mask)) {
+    throw new Error('Text-mask:convertMaskToPlaceholder; The mask property must be an array.');
+  }
+
+  if (mask.indexOf(placeholderChar) !== -1) {
+    throw new Error('Placeholder character must not be used as part of the mask. Please specify a character ' + 'that is not present in your mask as your placeholder character.\n\n' + ("The placeholder character that was received is: " + JSON.stringify(placeholderChar) + "\n\n") + ("The mask that was received is: " + JSON.stringify(mask)));
+  }
+
+  return mask.map(function (char) {
+    return char instanceof RegExp ? placeholderChar : char;
+  }).join('');
+}
+export function processCaretTraps(mask) {
+  var indexes = [];
+  var indexOfCaretTrap;
+
+  while (indexOfCaretTrap = mask.indexOf(strCaretTrap), indexOfCaretTrap !== -1) {
+    indexes.push(indexOfCaretTrap);
+    mask.splice(indexOfCaretTrap, 1);
+  }
+
+  return {
+    maskWithoutCaretTraps: mask,
+    indexes: indexes
+  };
+}

package/esm/Overlay/positionUtils.js

@@ -123,7 +123,7 @@ export default (function (props) {
 
   return {
     getPosition: function getPosition(target, container) {
-      var offset = container.tagName === 'BODY' ? getOffset(target) : _getPosition(target, container);
+      var offset = container.tagName === 'BODY' ? getOffset(target) : _getPosition(target, container, false);
       return offset;
     },
     calcAutoPlacement: function calcAutoPlacement(targetOffset, container, overlay) {

package/esm/Picker/PickerToggle.js

@@ -7,12 +7,12 @@ var _templateObject, _templateObject2;
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
-import MaskedInput from 'react-text-mask';
 import ToggleButton from './ToggleButton';
 import CloseButton from '../CloseButton';
 import { useClassNames, KEY_VALUES, mergeRefs } from '../utils';
 import Plaintext from '../Plaintext';
 import useToggleCaret from '../utils/useToggleCaret';
+import MaskedInput from '../MaskedInput';
 var defaultInputMask = [];
 var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var activeProp = props.active,

package/esm/Toggle/Toggle.d.ts

@@ -8,6 +8,8 @@ export interface ToggleProps extends WithAsProps {
     plaintext?: boolean;
     /** Make the control readonly */
     readOnly?: boolean;
+    /** Whether the checked state is being updated */
+    loading?: boolean;
     /** Checked（Controlled) */
     checked?: boolean;
     /** Default checked */

package/esm/Toggle/Toggle.js

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useControlled, useCustom } from '../utils';
 import Plaintext from '../Plaintext';
+import Loader from '../Loader';
 
 /**
  * fixme: Should contain an input[type=checkbox]
@@ -13,6 +14,8 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       Component = _props$as === void 0 ? 'span' : _props$as,
       disabled = props.disabled,
       readOnly = props.readOnly,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
       plaintext = props.plaintext,
       className = props.className,
       checkedChildren = props.checkedChildren,
@@ -24,7 +27,7 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size = props.size,
       localeProp = props.locale,
       onChange = props.onChange,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "disabled", "readOnly", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "disabled", "readOnly", "loading", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
 
   var _useControlled = useControlled(checkedProp, defaultChecked),
       checked = _useControlled[0],
@@ -40,7 +43,8 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var classes = merge(className, withClassPrefix(size, {
     checked: checked,
-    disabled: disabled
+    disabled: disabled,
+    loading: loading
   }));
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
@@ -52,6 +56,14 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setChecked(!checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(!checked, event);
   }, [checked, disabled, onChange, readOnly, setChecked]);
+  var handleKeyDown = useCallback(function (event) {
+    if (event.key !== ' ') {
+      return;
+    }
+
+    handleChange(event);
+    event.preventDefault();
+  }, [handleChange]);
 
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, null, inner || label);
@@ -62,14 +74,18 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-label": typeof inner === 'string' ? inner : label,
-    tabIndex: -1
+    "aria-busy": loading || undefined,
+    tabIndex: 0
   }, rest, {
     ref: ref,
     className: classes,
-    onClick: handleChange
+    onClick: handleChange,
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React.createElement("span", {
     className: prefix('inner')
-  }, inner));
+  }, inner), loading && /*#__PURE__*/React.createElement(Loader, {
+    className: prefix('loader')
+  }));
 });
 Toggle.displayName = 'Toggle';
 Toggle.propTypes = {
@@ -78,6 +94,7 @@ Toggle.propTypes = {
   defaultChecked: PropTypes.bool,
   checkedChildren: PropTypes.node,
   unCheckedChildren: PropTypes.node,
+  loading: PropTypes.bool,
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func

package/esm/index.d.ts

@@ -54,6 +54,8 @@ export { default as Form } from './Form';
 export type { FormProps, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
+export { default as MaskedInput } from './MaskedInput';
+export type { MaskedInputProps } from './MaskedInput';
 export { default as InputNumber } from './InputNumber';
 export type { InputNumberProps } from './InputNumber';
 export { default as InputGroup } from './InputGroup';

package/esm/index.js

@@ -29,6 +29,7 @@ export { default as Steps } from './Steps';
 export { default as Toggle } from './Toggle';
 export { default as Form } from './Form';
 export { default as Input } from './Input';
+export { default as MaskedInput } from './MaskedInput';
 export { default as InputNumber } from './InputNumber';
 export { default as InputGroup } from './InputGroup';
 export { default as Checkbox } from './Checkbox';