rsuite 5.0.3 → 5.1.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [5.1.0](https://github.com/rsuite/rsuite/compare/v5.0.3...v5.1.0) (2021-10-29)
+
+### Bug Fixes
+
+- **DatePicker:** fix DatePicker does not change value after pressing enter ([#2055](https://github.com/rsuite/rsuite/issues/2055)) ([c775444](https://github.com/rsuite/rsuite/commit/c7754445763f2553a3cc50e195b1dc347f774415))
+- **DateRangePicker:** fix DateRangePicker does not change value after pressing enter ([#2056](https://github.com/rsuite/rsuite/issues/2056)) ([8e5db2e](https://github.com/rsuite/rsuite/commit/8e5db2e54d8e6ad79f7219dc69cd1f52f32a8295))
+- **Dropdown.Item:** item inside Nav not pass "as" ([#2026](https://github.com/rsuite/rsuite/issues/2026)) ([34bfffd](https://github.com/rsuite/rsuite/commit/34bfffdbcd353753912b30b38523e3b62f430e98)), closes [#2025](https://github.com/rsuite/rsuite/issues/2025)
+- **Dropdown.Item:** render custom element inside li ([#2044](https://github.com/rsuite/rsuite/issues/2044)) ([a2e8a00](https://github.com/rsuite/rsuite/commit/a2e8a00c94f77028ed489a65f970264eeb9551ea))
+- **Overlay:** fix position offset inside container ([#2049](https://github.com/rsuite/rsuite/issues/2049)) ([c27b19e](https://github.com/rsuite/rsuite/commit/c27b19e9c9ec0191ccf5d36d9efe6b176b0b6d84))
+- **Toggle:** improve a11y (keyboard focusable + keyboard events) ([#2032](https://github.com/rsuite/rsuite/issues/2032)) ([9fdfd52](https://github.com/rsuite/rsuite/commit/9fdfd52e1eab3ad3e93569112e33ad3490335fbd))
+
+### Features
+
+- **locales:** Created fa_IR locale to add support of Persian language in Rsuite locals ([#2061](https://github.com/rsuite/rsuite/issues/2061)) ([14e5946](https://github.com/rsuite/rsuite/commit/14e59466cfd285ec1098d67280338a7df1ef8f5f))
+- **MaskedInput:** added support for MaskedInput to replace `react-text-mask` ([#2054](https://github.com/rsuite/rsuite/issues/2054)) ([496416a](https://github.com/rsuite/rsuite/commit/496416a2e4b32362252ef70f5c4e40f785ecf5be))
+- **Toggle:** add loading prop ([#2031](https://github.com/rsuite/rsuite/issues/2031)) ([28778de](https://github.com/rsuite/rsuite/commit/28778de0af0495a1bb68479bf3c679413255ce7b))
+
 ## [5.0.3](https://github.com/rsuite/rsuite/compare/v5.0.2...v5.0.3) (2021-10-22)
 
 ### Bug Fixes

package/MaskedInput/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/MaskedInput",
+  "private": true,
+  "main": "../cjs/MaskedInput/index.js",
+  "module": "../esm/MaskedInput/index.js",
+  "types": "../esm/MaskedInput/index.d.ts"
+}

package/README.md

@@ -187,7 +187,7 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
 [rsuite-design]: https://rsuitejs.com/design/default
-[live-preview-on-codesandbox]: https://codesandbox.io/s/mo7jxvr9x9?from-embed
+[live-preview-on-codesandbox]: https://codesandbox.io/s/rsuite-template-5vq6zo2z5l
 [rsuite-doc-guide]: https://rsuitejs.com/en/guide/introduction
 [rsuite-doc-guide-themes]: https://rsuitejs.com/en/guide/themes
 [rsuite-doc-guide-intl]: https://rsuitejs.com/en/guide/intl

package/Toggle/styles/index.less

@@ -32,6 +32,20 @@
   }
 
   // The switch thumb
+  &-loader {
+    position: absolute;
+    transition: left @toggle-transition, margin-left @toggle-transition, width @toggle-transition;
+
+    .rs-loader-spin {
+      &::before {
+        border-color: var(--rs-toggle-loader-ring);
+      }
+      &::after {
+        border-top-color: var(--rs-toggle-loader-rotor);
+      }
+    }
+  }
+
   &::after {
     content: '';
     cursor: pointer;
@@ -67,6 +81,12 @@
     background-color: var(--rs-toggle-checked-disabled-bg);
     color: var(--rs-toggle-checked-disabled-thumb);
   }
+
+  &&-loading {
+    &::after {
+      display: none;
+    }
+  }
 }
 
 // Label text inside the switch

package/Toggle/styles/mixin.less

@@ -5,6 +5,13 @@
   min-width: @min-width;
   border-radius: (@toogle-height / 2);
 
+  &-loader {
+    width: @handle-diameter;
+    height: @handle-diameter;
+    left: @toggle-handle-gap;
+    top: @toggle-handle-gap;
+  }
+
   &::after {
     width: @handle-diameter;
     height: @handle-diameter;
@@ -44,6 +51,11 @@
       margin-left: @toggle-inner-margin;
     }
   }
+
+  &.rs-btn-toggle-checked &-loader {
+    left: 100%;
+    margin-left: -(@handle-diameter + @toggle-handle-gap);
+  }
 }
 
 // Small

package/cjs/DOMHelper/index.d.ts

@@ -46,7 +46,7 @@ declare const DOMHelper: {
     } | DOMRect;
     nodeName: (node: Element) => string;
     getOffsetParent: (node: Element) => Element;
-    getPosition: (node: Element, offsetParent?: Element) => DOMRect | {
+    getPosition: (node: Element, offsetParent?: Element, calcMargin?: boolean) => DOMRect | {
         top: number;
         left: number;
         height: number;

package/cjs/DatePicker/DatePicker.js

@@ -328,7 +328,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * The callback after the enter key is triggered on the input
    */
 
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  var handleInputPressEnd = (0, _react.useCallback)(function (event) {
     if (inputState === 'Typing') {
       updateValue(event, calendarDate);
     }
@@ -460,7 +460,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
     inputMask: _utils.DateUtils.getDateMask(formatStr),
     onInputChange: handleInputChange,
-    onInputBlur: handleInputBlur,
+    onInputBlur: handleInputPressEnd,
+    onInputPressEnter: handleInputPressEnd,
     onKeyDown: onPickerKeyDown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -426,7 +426,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * The callback after the enter key is triggered on the input
    */
 
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  var handleInputPressEnd = (0, _react.useCallback)(function (event) {
     if (inputState === 'Typing') {
       handleValueUpdate(event, selectValue);
     }
@@ -602,7 +602,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     inputValue: value ? getDisplayString(value, true) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,
     onInputChange: handleInputChange,
-    onInputBlur: handleInputBlur,
+    onInputBlur: handleInputPressEnd,
+    onInputPressEnter: handleInputPressEnd,
     onKeyDown: onPickerKeyDown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,

package/cjs/Dropdown/DropdownItem.js

@@ -54,7 +54,13 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       eventKey = props.eventKey,
       onSelect = props.onSelect,
       icon = props.icon,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "active", "eventKey", "onSelect", "icon"]);
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'li' : _props$as,
+      divider = props.divider,
+      panel = props.panel,
+      children = props.children,
+      disabled = props.disabled,
+      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "active", "eventKey", "onSelect", "icon", "as", "divider", "panel", "children", "disabled"]);
   var internalId = (0, _useInternalId.default)('DropdownItem');
   var nav = (0, _react.useContext)(_NavContext.default);
   var dropdown = (0, _react.useContext)(_DropdownContext.default);
@@ -106,6 +112,15 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       };
     }
   }, [internalId, selected, dispatch]);
+  var renderDropdownItem = (0, _react.useCallback)(function (ui) {
+    if (Component === 'li') {
+      return ui;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("li", {
+      role: "none presentation"
+    }, ui);
+  }, [Component]);
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({
@@ -113,28 +128,19 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, props));
   }
 
-  var _rest$as = rest.as,
-      Component = _rest$as === void 0 ? 'li' : _rest$as,
-      divider = rest.divider,
-      panel = rest.panel,
-      children = rest.children,
-      disabled = rest.disabled,
-      restProps = (0, _objectWithoutPropertiesLoose2.default)(rest, ["as", "divider", "panel", "children", "disabled"]);
-
   if (divider) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref,
       role: "separator",
       className: merge(prefix('divider'), className)
-    }, restProps));
+    }, restProps)));
   }
 
   if (panel) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref,
-      role: "none presentation",
       className: merge(prefix('panel'), className)
-    }, restProps), children);
+    }, restProps), children));
   }
 
   if (navbar) {
@@ -158,6 +164,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       className: classes,
       "aria-current": selected || undefined
     }, dataAttributes, restProps, {
+      as: Component,
       onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick)
     }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
       className: prefix('menu-icon')
@@ -188,12 +195,12 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuitemRef),
       className: classes
     }, menuitem, dataAttributes, restProps), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
       className: prefix('menu-icon')
-    }), children);
+    }), children));
   });
 });
 

package/cjs/MaskedInput/MaskedInput.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MaskType, MaskFunctionType, ConfigType } from './types';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+interface TextMaskProps {
+    /**
+     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
+     */
+    guide?: boolean;
+    /**
+     * `mask` is an array or a function that defines how the user input is going to be masked.
+     */
+    mask?: MaskType | MaskFunctionType | boolean;
+    /**
+     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
+     * in place of the regular placeholder when the input element value is empty.
+     */
+    showMask?: boolean;
+    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
+    placeholderChar?: string;
+    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
+    keepCharPositions?: boolean;
+    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
+    pipe?: (conformedValue: string, config: ConfigType) => string;
+}
+export declare type MaskedInputProps = TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+};
+declare const MaskedInput: React.ForwardRefExoticComponent<TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default MaskedInput;

package/cjs/MaskedInput/MaskedInput.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _createTextMaskInputElement = _interopRequireDefault(require("./createTextMaskInputElement"));
+
+var _utils = require("../utils");
+
+var defaultRender = function defaultRender(ref, props) {
+  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    ref: ref
+  }, props));
+};
+
+var MaskedInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var mask = props.mask,
+      _props$guide = props.guide,
+      guide = _props$guide === void 0 ? true : _props$guide,
+      placeholderChar = props.placeholderChar,
+      value = props.value,
+      showMask = props.showMask,
+      pipe = props.pipe,
+      _props$render = props.render,
+      render = _props$render === void 0 ? defaultRender : _props$render,
+      onChange = props.onChange,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
+  var inputRef = (0, _react.useRef)(null);
+  var textMaskInputElement = (0, _react.useRef)();
+  var initTextMask = (0, _react.useCallback)(function () {
+    var _textMaskInputElement;
+
+    textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
+      inputElement: inputRef.current
+    }, props));
+    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
+  }, [props, value]);
+  var handleChange = (0, _react.useCallback)(function (event) {
+    var _textMaskInputElement2;
+
+    (_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [onChange]);
+  (0, _react.useEffect)(function () {
+    initTextMask();
+  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
+  return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
+    onChange: handleChange,
+    defaultValue: value
+  }, (0, _omit.default)(rest, ['keepCharPositions'])));
+});
+
+MaskedInput.displayName = 'MaskedInput';
+MaskedInput.propTypes = {
+  render: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
+  guide: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  pipe: _propTypes.default.func,
+  placeholderChar: _propTypes.default.string,
+  keepCharPositions: _propTypes.default.bool,
+  showMask: _propTypes.default.bool
+};
+var _default = MaskedInput;
+exports.default = _default;

package/cjs/MaskedInput/adjustCaretPosition.d.ts

@@ -0,0 +1,11 @@
+export default function adjustCaretPosition({ previousConformedValue, previousPlaceholder, currentCaretPosition, conformedValue, rawValue, placeholderChar, placeholder, indexesOfPipedChars, caretTrapIndexes }: {
+    previousConformedValue?: string;
+    previousPlaceholder?: string;
+    currentCaretPosition?: number;
+    conformedValue: any;
+    rawValue: any;
+    placeholderChar: any;
+    placeholder: any;
+    indexesOfPipedChars?: any[];
+    caretTrapIndexes?: any[];
+}): number;

package/cjs/MaskedInput/adjustCaretPosition.js

@@ -0,0 +1,218 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = adjustCaretPosition;
+var defaultArray = [];
+var emptyString = '';
+
+function adjustCaretPosition(_ref) {
+  var _ref$previousConforme = _ref.previousConformedValue,
+      previousConformedValue = _ref$previousConforme === void 0 ? emptyString : _ref$previousConforme,
+      _ref$previousPlacehol = _ref.previousPlaceholder,
+      previousPlaceholder = _ref$previousPlacehol === void 0 ? emptyString : _ref$previousPlacehol,
+      _ref$currentCaretPosi = _ref.currentCaretPosition,
+      currentCaretPosition = _ref$currentCaretPosi === void 0 ? 0 : _ref$currentCaretPosi,
+      conformedValue = _ref.conformedValue,
+      rawValue = _ref.rawValue,
+      placeholderChar = _ref.placeholderChar,
+      placeholder = _ref.placeholder,
+      _ref$indexesOfPipedCh = _ref.indexesOfPipedChars,
+      indexesOfPipedChars = _ref$indexesOfPipedCh === void 0 ? defaultArray : _ref$indexesOfPipedCh,
+      _ref$caretTrapIndexes = _ref.caretTrapIndexes,
+      caretTrapIndexes = _ref$caretTrapIndexes === void 0 ? defaultArray : _ref$caretTrapIndexes;
+
+  if (currentCaretPosition === 0 || !rawValue.length) {
+    return 0;
+  } // Store lengths for faster performance?
+
+
+  var rawValueLength = rawValue.length;
+  var previousConformedValueLength = previousConformedValue.length;
+  var placeholderLength = placeholder.length;
+  var conformedValueLength = conformedValue.length; // This tells us how long the edit is. If user modified input from `(2__)` to `(243__)`,
+  // we know the user in this instance pasted two characters
+
+  var editLength = rawValueLength - previousConformedValueLength; // If the edit length is positive, that means the user is adding characters, not deleting.
+
+  var isAddition = editLength > 0; // This is the first raw value the user entered that needs to be conformed to mask
+
+  var isFirstRawValue = previousConformedValueLength === 0; // A partial multi-character edit happens when the user makes a partial selection in their
+  // input and edits that selection. That is going from `(123) 432-4348` to `() 432-4348` by
+  // selecting the first 3 digits and pressing backspace.
+  //
+  // Such cases can also happen when the user presses the backspace while holding down the ALT
+  // key.
+
+  var isPartialMultiCharEdit = editLength > 1 && !isFirstRawValue; // This algorithm doesn't support all cases of multi-character edits, so we just return
+  // the current caret position.
+  //
+  // This works fine for most cases.
+
+  if (isPartialMultiCharEdit) {
+    return currentCaretPosition;
+  } // For a mask like (111), if the `previousConformedValue` is (1__) and user attempts to enter
+  // `f` so the `rawValue` becomes (1f__), the new `conformedValue` would be (1__), which is the
+  // same as the original `previousConformedValue`. We handle this case differently for caret
+  // positioning.
+
+
+  var possiblyHasRejectedChar = isAddition && (previousConformedValue === conformedValue || conformedValue === placeholder);
+  var startingSearchIndex = 0;
+  var trackRightCharacter;
+  var targetChar;
+
+  if (possiblyHasRejectedChar) {
+    startingSearchIndex = currentCaretPosition - editLength;
+  } else {
+    // At this point in the algorithm, we want to know where the caret is right before the raw input
+    // has been conformed, and then see if we can find that same spot in the conformed input.
+    //
+    // We do that by seeing what character lies immediately before the caret, and then look for that
+    // same character in the conformed input and place the caret there.
+    // First, we need to normalize the inputs so that letter capitalization between raw input and
+    // conformed input wouldn't matter.
+    var normalizedConformedValue = conformedValue.toLowerCase();
+    var normalizedRawValue = rawValue.toLowerCase(); // Then we take all characters that come before where the caret currently is.
+
+    var leftHalfChars = normalizedRawValue.substr(0, currentCaretPosition).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`.
+
+    var intersection = leftHalfChars.filter(function (char) {
+      return normalizedConformedValue.indexOf(char) !== -1;
+    }); // The last character in the intersection is the character we want to look for in the conformed
+    // value and the one we want to adjust the caret close to
+
+    targetChar = intersection[intersection.length - 1]; // Calculate the number of mask characters in the previous placeholder
+    // from the start of the string up to the place where the caret is
+
+    var previousLeftMaskChars = previousPlaceholder.substr(0, intersection.length).split(emptyString).filter(function (char) {
+      return 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
+
+    var leftMaskChars = placeholder.substr(0, intersection.length).split(emptyString).filter(function (char) {
+      return char !== placeholderChar;
+    }).length; // Has the number of mask characters up to the caret changed?
+
+    var masklengthChanged = leftMaskChars !== previousLeftMaskChars; // Detect if `targetChar` is a mask character and has moved to the left
+
+    var targetIsMaskMovingLeft = previousPlaceholder[intersection.length - 1] !== undefined && placeholder[intersection.length - 2] !== undefined && previousPlaceholder[intersection.length - 1] !== placeholderChar && previousPlaceholder[intersection.length - 1] !== placeholder[intersection.length - 1] && previousPlaceholder[intersection.length - 1] === placeholder[intersection.length - 2]; // If deleting and the `targetChar` `is a mask character and `masklengthChanged` is true
+    // or the mask is moving to the left, we can't use the selected `targetChar` any longer
+    // if we are not at the end of the string.
+    // In this case, change tracking strategy and track the character to the right of the caret.
+
+    if (!isAddition && (masklengthChanged || targetIsMaskMovingLeft) && previousLeftMaskChars > 0 && placeholder.indexOf(targetChar) > -1 && rawValue[currentCaretPosition] !== undefined) {
+      trackRightCharacter = true;
+      targetChar = rawValue[currentCaretPosition];
+    } // It is possible that `targetChar` will appear multiple times in the conformed value.
+    // We need to know not to select a character that looks like our target character from the placeholder or
+    // the piped characters, so we inspect the piped characters and the placeholder to see if they contain
+    // characters that match our target character.
+    // If the `conformedValue` got piped, we need to know which characters were piped in so that when we look for
+    // our `targetChar`, we don't select a piped char by mistake
+
+
+    var pipedChars = indexesOfPipedChars.map(function (index) {
+      return normalizedConformedValue[index];
+    }); // We need to know how many times the `targetChar` occurs in the piped characters.
+
+    var countTargetCharInPipedChars = pipedChars.filter(function (char) {
+      return char === targetChar;
+    }).length; // We need to know how many times it occurs in the intersection
+
+    var countTargetCharInIntersection = intersection.filter(function (char) {
+      return char === targetChar;
+    }).length; // We need to know if the placeholder contains characters that look like
+    // our `targetChar`, so we don't select one of those by mistake.
+
+    var countTargetCharInPlaceholder = placeholder.substr(0, placeholder.indexOf(placeholderChar)).split(emptyString).filter(function (char, index) {
+      return (// 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:
+
+    var requiredNumberOfMatches = countTargetCharInPlaceholder + countTargetCharInIntersection + countTargetCharInPipedChars + ( // The character to the right of the caret isn't included in `intersection`
+    // so add one if we are tracking the character to the right
+    trackRightCharacter ? 1 : 0); // Now we start looking for the location of the `targetChar`.
+    // We keep looping forward and store the index in every iteration. Once we have encountered
+    // enough occurrences of the target character, we break out of the loop
+    // If are searching for the second `1` in `1214`, `startingSearchIndex` will point at `4`.
+
+    var numberOfEncounteredMatches = 0;
+
+    for (var i = 0; i < conformedValueLength; i++) {
+      var conformedValueChar = normalizedConformedValue[i];
+      startingSearchIndex = i + 1;
+
+      if (conformedValueChar === targetChar) {
+        numberOfEncounteredMatches++;
+      }
+
+      if (numberOfEncounteredMatches >= requiredNumberOfMatches) {
+        break;
+      }
+    }
+  } // At this point, if we simply return `startingSearchIndex` as the adjusted caret position,
+  // most cases would be handled. However, we want to fast forward or rewind the caret to the
+  // closest placeholder character if it happens to be in a non-editable spot. That's what the next
+  // logic is for.
+  // In case of addition, we fast forward.
+
+
+  if (isAddition) {
+    // We want to remember the last placeholder character encountered so that if the mask
+    // contains more characters after the last placeholder character, we don't forward the caret
+    // that far to the right. Instead, we stop it at the last encountered placeholder character.
+    var lastPlaceholderChar = startingSearchIndex;
+
+    for (var _i = startingSearchIndex; _i <= placeholderLength; _i++) {
+      if (placeholder[_i] === placeholderChar) {
+        lastPlaceholderChar = _i;
+      }
+
+      if ( // If we're adding, we can position the caret at the next placeholder character.
+      placeholder[_i] === placeholderChar || // If a caret trap was set by a mask function, we need to stop at the trap.
+      caretTrapIndexes.indexOf(_i) !== -1 || // This is the end of the placeholder. We cannot move any further. Let's put the caret there.
+      _i === placeholderLength) {
+        return lastPlaceholderChar;
+      }
+    }
+  } else {
+    // In case of deletion, we rewind.
+    if (trackRightCharacter) {
+      // Searching for the character that was to the right of the caret
+      // We start at `startingSearchIndex` - 1 because it includes one character extra to the right
+      for (var _i2 = startingSearchIndex - 1; _i2 >= 0; _i2--) {
+        // If tracking the character to the right of the cursor, we move to the left until
+        // we found the character and then place the caret right before it
+        if ( // `targetChar` should be in `conformedValue`, since it was in `rawValue`, just
+        // to the right of the caret
+        conformedValue[_i2] === targetChar || // If a caret trap was set by a mask function, we need to stop at the trap.
+        caretTrapIndexes.indexOf(_i2) !== -1 || // This is the beginning of the placeholder. We cannot move any further.
+        // Let's put the caret there.
+        _i2 === 0) {
+          return _i2;
+        }
+      }
+    } else {
+      // Searching for the first placeholder or caret trap to the left
+      for (var _i3 = startingSearchIndex; _i3 >= 0; _i3--) {
+        // If we're deleting, we stop the caret right before the placeholder character.
+        // For example, for mask `(111) 11`, current conformed input `(456) 86`. If user
+        // modifies input to `(456 86`. That is, they deleted the `)`, we place the caret
+        // right after the first `6`
+        if ( // If we're deleting, we can position the caret right before the placeholder character
+        placeholder[_i3 - 1] === placeholderChar || // If a caret trap was set by a mask function, we need to stop at the trap.
+        caretTrapIndexes.indexOf(_i3) !== -1 || // This is the beginning of the placeholder. We cannot move any further.
+        // Let's put the caret there.
+        _i3 === 0) {
+          return _i3;
+        }
+      }
+    }
+  }
+}

package/cjs/MaskedInput/conformToMask.d.ts

@@ -0,0 +1,8 @@
+import { MaskType, ConfigType, MaskFunctionType } from './types';
+export declare function isArray(value: any): boolean;
+export default function conformToMask(rawValue?: string, mask?: MaskType | MaskFunctionType, config?: ConfigType): {
+    conformedValue: string;
+    meta: {
+        someCharsRejected: boolean;
+    };
+};