rsuite 5.0.3 → 5.2.2

package/esm/Input/Input.d.ts

@@ -3,7 +3,7 @@ import { WithAsProps, RsRefForwardingComponent, TypeAttributes, FormControlBaseP
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps<string | number | ReadonlyArray<string>> {
+export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */
@@ -12,6 +12,7 @@ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<
     size?: TypeAttributes.Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Called on press enter */
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }

package/esm/InputNumber/InputNumber.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
 import AngleDownIcon from '@rsuite/icons/legacy/AngleDown';
-import helper from '../DOMHelper';
+import on from 'dom-lib/on';
 import InputGroup from '../InputGroup/InputGroup';
 import InputGroupAddon from '../InputGroup/InputGroupAddon';
 import Input from '../Input';
@@ -195,7 +195,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var wheelListener;
 
     if (inputRef.current && scrollable) {
-      wheelListener = helper.on(inputRef.current, 'wheel', handleWheel, {
+      wheelListener = on(inputRef.current, 'wheel', handleWheel, {
         passive: false
       });
     }

package/esm/InputPicker/InputPicker.js

@@ -14,7 +14,7 @@ import clone from 'lodash/clone';
 import isArray from 'lodash/isArray';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
-import { getWidth } from 'dom-lib';
+import getWidth from 'dom-lib/getWidth';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../Plaintext';

package/esm/List/helper/useSortHelper.js

@@ -4,10 +4,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { on } from 'dom-lib';
+import on from 'dom-lib/on';
 import { useCallback, useRef, useState } from 'react';
 import AutoScroller from './AutoScroller';
 import { closestNode, getEdgeOffset, getScrollingParent, isContainInteractiveElement, setInlineStyles, setTransitionDuration, setTranslate3d } from './utils';
+import { useIsMounted } from '../../utils';
 import useManager from './useManager';
 
 var useSortHelper = function useSortHelper(config) {
@@ -30,14 +31,16 @@ var useSortHelper = function useSortHelper(config) {
       listItemRegister = _useManager.listItemRegister,
       getManagedItem = _useManager.getManagedItem,
       getOrderedItems = _useManager.getOrderedItems;
+
+  var isMounted = useIsMounted();
   /**
    * start dragging
    * */
 
-
   var handlePress = useCallback(function (mouseDownEvent, targetNode, curManagedItem) {
     var _activeNodeHelper;
 
+    if (!isMounted()) return;
     var listItemBaseClassName = targetNode.classList[0]; // get list item base className
 
     var helperElementClass = listItemBaseClassName + "-helper";
@@ -217,7 +220,8 @@ var useSortHelper = function useSortHelper(config) {
       setTimeout(function () {
         var _activeNodeHelper2, _activeNodeHelper2$pa;
 
-        // Remove the helper from the DOM
+        if (!isMounted()) return; // Remove the helper from the DOM
+
         (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 ? void 0 : (_activeNodeHelper2$pa = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2$pa === void 0 ? void 0 : _activeNodeHelper2$pa.removeChild(activeNodeHelper);
         activeNodeHelper = null; // Remove redundant styles
 
@@ -260,7 +264,7 @@ var useSortHelper = function useSortHelper(config) {
       oldIndex: activeNodeOldIndex,
       newIndex: activeNodeNextIndex
     }, mouseDownEvent.nativeEvent);
-  }, [autoScroll, getOrderedItems, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
+  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
   /**
    * Determine whether to start dragging
    * */

package/esm/MaskedInput/MaskedInput.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from '../Input';
+import type { TextMaskProps } from './TextMask';
+import { RsRefForwardingComponent } from '../@types/common';
+export declare type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+declare const MaskedInput: RsRefForwardingComponent<'input', MaskedInputProps>;
+export default MaskedInput;

package/esm/MaskedInput/MaskedInput.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import TextMask from './TextMask';
+import Input from '../Input';
+var MaskedInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      inputAs = _props$as === void 0 ? TextMask : _props$as;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+    as: inputAs,
+    ref: ref
+  }));
+});
+export default MaskedInput;

package/esm/MaskedInput/TextMask.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 TextMaskBaseProps {
+    /**
+     * `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 TextMaskProps = TextMaskBaseProps & 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 TextMask: React.ForwardRefExoticComponent<TextMaskBaseProps & 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 TextMask;

package/esm/MaskedInput/TextMask.js

@@ -0,0 +1,67 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useEffect, useRef } from 'react';
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+import createTextMaskInputElement from './createTextMaskInputElement';
+import { mergeRefs } from '../utils';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+
+var defaultRender = function defaultRender(ref, props) {
+  return /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref
+  }, props));
+};
+
+var TextMask = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
+
+  var inputRef = useRef(null);
+  var textMaskInputElement = useRef();
+  var initTextMask = useCallback(function () {
+    var _textMaskInputElement;
+
+    textMaskInputElement.current = createTextMaskInputElement(_extends({
+      inputElement: inputRef.current
+    }, props));
+    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
+  }, [props, value]);
+  var handleChange = 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]);
+  useEffect(function () {
+    initTextMask();
+  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
+  return render(mergeRefs(inputRef, ref), _extends({
+    onChange: handleChange,
+    defaultValue: value
+  }, omit(rest, ['keepCharPositions'])));
+});
+TextMask.displayName = 'TextMask';
+TextMask.propTypes = {
+  render: PropTypes.func,
+  onChange: PropTypes.func,
+  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.bool]).isRequired,
+  guide: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  pipe: PropTypes.func,
+  placeholderChar: PropTypes.string,
+  keepCharPositions: PropTypes.bool,
+  showMask: PropTypes.bool
+};
+export default TextMask;

package/esm/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/esm/MaskedInput/adjustCaretPosition.js

@@ -0,0 +1,213 @@
+var defaultArray = [];
+var emptyString = '';
+export default 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/esm/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;
+    };
+};