rsuite 4.10.3 → 4.10.7

package/es/Cascader/Cascader.js

@@ -36,6 +36,7 @@ function (_React$Component) {
     _this.triggerRef = void 0;
     _this.containerRef = void 0;
     _this.positionRef = void 0;
+    _this.menuWrapperRef = void 0;
     _this.menuContainerRef = void 0;
     _this.isControlled = void 0;
 
@@ -291,7 +292,7 @@ function (_React$Component) {
       items: []
     };
     _this.state = _extends({}, initState, {}, getDerivedStateForCascade(props, initState), {
-      flattenData: flattenTree(props.data)
+      flattenData: flattenTree(props.data, props.childrenKey)
     });
     _this.isControlled = !_isUndefined(props.value);
     _this.triggerRef = React.createRef();
@@ -299,6 +300,7 @@ function (_React$Component) {
     _this.positionRef = React.createRef();
     _this.toggleRef = React.createRef(); // for test
 
+    _this.menuWrapperRef = React.createRef();
     _this.menuContainerRef = React.createRef();
     return _this;
   }
@@ -307,7 +309,8 @@ function (_React$Component) {
     var value = nextProps.value,
         data = nextProps.data,
         labelKey = nextProps.labelKey,
-        valueKey = nextProps.valueKey;
+        valueKey = nextProps.valueKey,
+        childrenKey = nextProps.childrenKey;
 
     if (data !== prevState.data) {
       var _prevState$selectNode;
@@ -325,12 +328,12 @@ function (_React$Component) {
           return _stringToObject(item, labelKey, valueKey);
         })), {
           data: data,
-          flattenData: flattenTree(data)
+          flattenData: flattenTree(data, childrenKey)
         });
       }
 
       return _extends({}, getDerivedStateForCascade(nextProps, prevState), {
-        flattenData: flattenTree(data),
+        flattenData: flattenTree(data, childrenKey),
         data: data
       });
     }
@@ -441,6 +444,7 @@ function (_React$Component) {
     var menuProps = _pick(this.props, Object.keys(_omit(dropdownMenuPropTypes, ['classPrefix'])));
 
     return React.createElement(MenuWrapper, {
+      ref: this.menuWrapperRef,
       className: classes,
       style: menuStyle,
       getToggleInstance: this.getToggleInstance,

package/es/InputNumber/InputNumber.js

@@ -164,6 +164,17 @@ function (_React$Component) {
     }
   };
 
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var preValue = prevProps.value;
+    var currentValue = this.props.value;
+
+    if (preValue !== currentValue) {
+      this.setState({
+        value: currentValue
+      });
+    }
+  };
+
   _proto.getValue = function getValue() {
     var value = this.props.value;
     return _isUndefined(value) ? this.state.value : value;

package/es/Modal/BaseModal.js

@@ -48,6 +48,7 @@ function (_React$Component2) {
     _this.lastFocus = null;
     _this.onDocumentKeyupListener = null;
     _this.onFocusinListener = null;
+    _this._isMounted = null;
 
     _this.setMountNodeRef = function (ref) {
       var _ref$getMountNode;
@@ -95,15 +96,30 @@ function (_React$Component2) {
     _this.enforceFocus = function () {
       var enforceFocus = _this.props.enforceFocus;
 
-      if (!enforceFocus || !_this.isTopModal()) {
+      if (!enforceFocus || !_this._isMounted || !_this.isTopModal()) {
         return;
       }
 
-      var active = activeElement(ownerDocument(_assertThisInitialized(_this)));
+      var currentActiveElement = activeElement(ownerDocument(_assertThisInitialized(_this)));
 
       var modal = _this.getDialogElement();
 
-      if (modal && modal !== active && !contains(modal, active)) {
+      if (modal && modal !== currentActiveElement && !contains(modal, currentActiveElement)) {
+        modal.focus();
+      }
+    };
+
+    _this.handlePortalRendered = function () {
+      if (!_this.props.autoFocus) {
+        return;
+      }
+
+      var modal = _this.getDialogElement();
+
+      var currentActiveElement = activeElement(ownerDocument(_assertThisInitialized(_this)));
+
+      if (modal && modal !== currentActiveElement && !contains(modal, currentActiveElement)) {
+        _this.lastFocus = currentActiveElement;
         modal.focus();
       }
     };
@@ -120,6 +136,8 @@ function (_React$Component2) {
   var _proto2 = BaseModal.prototype;
 
   _proto2.componentDidMount = function componentDidMount() {
+    this._isMounted = true;
+
     if (this.props.show) {
       this.onShow();
     }
@@ -163,6 +181,7 @@ function (_React$Component2) {
     var _this$props4 = this.props,
         show = _this$props4.show,
         transition = _this$props4.transition;
+    this._isMounted = false;
 
     if (show || transition && !this.state.exited) {
       this.onHide();
@@ -293,7 +312,8 @@ function (_React$Component2) {
 
     return React.createElement(Portal, {
       ref: this.setMountNodeRef,
-      container: container
+      container: container,
+      onRendered: this.handlePortalRendered
     }, React.createElement("div", {
       ref: this.modalNodeRef,
       role: rest.role,

package/es/Modal/ModalDialog.js

@@ -66,6 +66,7 @@ function (_React$Component) {
     return React.createElement("div", _extends({}, props, {
       title: null,
       role: "dialog",
+      tabIndex: -1,
       ref: mergeRefs(this.bindHtmlRef, dialogRef),
       className: classNames(classPrefix, className),
       style: modalStyle

package/es/Slider/Slider.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { StandardProps } from '../@types/common';
+import { StandardProps, FormControlBaseProps } from '../@types/common';
 
-export interface SliderProps<ValueType = number> extends StandardProps {
+export interface SliderProps<ValueType = number>
+  extends StandardProps,
+    FormControlBaseProps<ValueType> {
   /** Minimum value of sliding range */
   min?: number;
 
@@ -11,12 +13,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Slide the value of one step */
   step?: number;
 
-  /** Value (Controlled) */
-  value?: ValueType;
-
-  /** Default value */
-  defaultValue?: ValueType;
-
   /** A css class to apply to the Handle node. */
   handleClassName?: string;
 
@@ -44,9 +40,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Vertical Slide */
   vertical?: boolean;
 
-  /** Callback function that changes data */
-  onChange?: (value: ValueType, event: React.MouseEvent) => void;
-
   /** Customize labels on the render ruler */
   renderMark?: (mark: number) => React.ReactNode;
 }

package/es/Uploader/Uploader.js

@@ -268,7 +268,7 @@ function (_React$Component) {
       fileList: nextFileList
     };
 
-    if (nextFile.progress) {
+    if (nextFile.progress || nextFile.status === 'error') {
       var fileMap = this.state.fileMap;
       fileMap[nextFile.fileKey] = {
         progress: nextFile.progress,

package/lib/Cascader/Cascader.js

@@ -66,6 +66,7 @@ function (_React$Component) {
     _this.triggerRef = void 0;
     _this.containerRef = void 0;
     _this.positionRef = void 0;
+    _this.menuWrapperRef = void 0;
     _this.menuContainerRef = void 0;
     _this.isControlled = void 0;
 
@@ -321,7 +322,7 @@ function (_React$Component) {
       items: []
     };
     _this.state = (0, _extends3.default)({}, initState, {}, (0, _utils.getDerivedStateForCascade)(props, initState), {
-      flattenData: (0, _treeUtils.flattenTree)(props.data)
+      flattenData: (0, _treeUtils.flattenTree)(props.data, props.childrenKey)
     });
     _this.isControlled = !(0, _isUndefined2.default)(props.value);
     _this.triggerRef = React.createRef();
@@ -329,6 +330,7 @@ function (_React$Component) {
     _this.positionRef = React.createRef();
     _this.toggleRef = React.createRef(); // for test
 
+    _this.menuWrapperRef = React.createRef();
     _this.menuContainerRef = React.createRef();
     return _this;
   }
@@ -337,7 +339,8 @@ function (_React$Component) {
     var value = nextProps.value,
         data = nextProps.data,
         labelKey = nextProps.labelKey,
-        valueKey = nextProps.valueKey;
+        valueKey = nextProps.valueKey,
+        childrenKey = nextProps.childrenKey;
 
     if (data !== prevState.data) {
       var _prevState$selectNode;
@@ -355,12 +358,12 @@ function (_React$Component) {
           return (0, _stringToObject2.default)(item, labelKey, valueKey);
         })), {
           data: data,
-          flattenData: (0, _treeUtils.flattenTree)(data)
+          flattenData: (0, _treeUtils.flattenTree)(data, childrenKey)
         });
       }
 
       return (0, _extends3.default)({}, (0, _utils.getDerivedStateForCascade)(nextProps, prevState), {
-        flattenData: (0, _treeUtils.flattenTree)(data),
+        flattenData: (0, _treeUtils.flattenTree)(data, childrenKey),
         data: data
       });
     }
@@ -469,6 +472,7 @@ function (_React$Component) {
     var classes = (0, _classnames.default)(this.addPrefix('cascader-menu'), menuClassName, (_classNames2 = {}, _classNames2[this.addPrefix('inline')] = inline, _classNames2));
     var menuProps = (0, _pick2.default)(this.props, Object.keys((0, _omit2.default)(_DropdownMenu.dropdownMenuPropTypes, ['classPrefix'])));
     return React.createElement(_Picker.MenuWrapper, {
+      ref: this.menuWrapperRef,
       className: classes,
       style: menuStyle,
       getToggleInstance: this.getToggleInstance,

package/lib/InputNumber/InputNumber.js

@@ -189,6 +189,17 @@ function (_React$Component) {
     }
   };
 
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var preValue = prevProps.value;
+    var currentValue = this.props.value;
+
+    if (preValue !== currentValue) {
+      this.setState({
+        value: currentValue
+      });
+    }
+  };
+
   _proto.getValue = function getValue() {
     var value = this.props.value;
     return (0, _isUndefined2.default)(value) ? this.state.value : value;

package/lib/Modal/BaseModal.js

@@ -69,6 +69,7 @@ function (_React$Component2) {
     _this.lastFocus = null;
     _this.onDocumentKeyupListener = null;
     _this.onFocusinListener = null;
+    _this._isMounted = null;
 
     _this.setMountNodeRef = function (ref) {
       var _ref$getMountNode;
@@ -116,15 +117,30 @@ function (_React$Component2) {
     _this.enforceFocus = function () {
       var enforceFocus = _this.props.enforceFocus;
 
-      if (!enforceFocus || !_this.isTopModal()) {
+      if (!enforceFocus || !_this._isMounted || !_this.isTopModal()) {
         return;
       }
 
-      var active = (0, _domLib.activeElement)((0, _domLib.ownerDocument)((0, _assertThisInitialized2.default)(_this)));
+      var currentActiveElement = (0, _domLib.activeElement)((0, _domLib.ownerDocument)((0, _assertThisInitialized2.default)(_this)));
 
       var modal = _this.getDialogElement();
 
-      if (modal && modal !== active && !(0, _domLib.contains)(modal, active)) {
+      if (modal && modal !== currentActiveElement && !(0, _domLib.contains)(modal, currentActiveElement)) {
+        modal.focus();
+      }
+    };
+
+    _this.handlePortalRendered = function () {
+      if (!_this.props.autoFocus) {
+        return;
+      }
+
+      var modal = _this.getDialogElement();
+
+      var currentActiveElement = (0, _domLib.activeElement)((0, _domLib.ownerDocument)((0, _assertThisInitialized2.default)(_this)));
+
+      if (modal && modal !== currentActiveElement && !(0, _domLib.contains)(modal, currentActiveElement)) {
+        _this.lastFocus = currentActiveElement;
         modal.focus();
       }
     };
@@ -141,6 +157,8 @@ function (_React$Component2) {
   var _proto2 = BaseModal.prototype;
 
   _proto2.componentDidMount = function componentDidMount() {
+    this._isMounted = true;
+
     if (this.props.show) {
       this.onShow();
     }
@@ -184,6 +202,7 @@ function (_React$Component2) {
     var _this$props4 = this.props,
         show = _this$props4.show,
         transition = _this$props4.transition;
+    this._isMounted = false;
 
     if (show || transition && !this.state.exited) {
       this.onHide();
@@ -312,7 +331,8 @@ function (_React$Component2) {
 
     return React.createElement(_Portal.default, {
       ref: this.setMountNodeRef,
-      container: container
+      container: container,
+      onRendered: this.handlePortalRendered
     }, React.createElement("div", {
       ref: this.modalNodeRef,
       role: rest.role,

package/lib/Modal/ModalDialog.js

@@ -82,6 +82,7 @@ function (_React$Component) {
     return React.createElement("div", (0, _extends2.default)({}, props, {
       title: null,
       role: "dialog",
+      tabIndex: -1,
       ref: (0, _mergeRefs.default)(this.bindHtmlRef, dialogRef),
       className: (0, _classnames.default)(classPrefix, className),
       style: modalStyle

package/lib/Slider/Slider.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { StandardProps } from '../@types/common';
+import { StandardProps, FormControlBaseProps } from '../@types/common';
 
-export interface SliderProps<ValueType = number> extends StandardProps {
+export interface SliderProps<ValueType = number>
+  extends StandardProps,
+    FormControlBaseProps<ValueType> {
   /** Minimum value of sliding range */
   min?: number;
 
@@ -11,12 +13,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Slide the value of one step */
   step?: number;
 
-  /** Value (Controlled) */
-  value?: ValueType;
-
-  /** Default value */
-  defaultValue?: ValueType;
-
   /** A css class to apply to the Handle node. */
   handleClassName?: string;
 
@@ -44,9 +40,6 @@ export interface SliderProps<ValueType = number> extends StandardProps {
   /** Vertical Slide */
   vertical?: boolean;
 
-  /** Callback function that changes data */
-  onChange?: (value: ValueType, event: React.MouseEvent) => void;
-
   /** Customize labels on the render ruler */
   renderMark?: (mark: number) => React.ReactNode;
 }

package/lib/Uploader/Uploader.js

@@ -289,7 +289,7 @@ function (_React$Component) {
       fileList: nextFileList
     };
 
-    if (nextFile.progress) {
+    if (nextFile.progress || nextFile.status === 'error') {
       var fileMap = this.state.fileMap;
       fileMap[nextFile.fileKey] = {
         progress: nextFile.progress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.10.3",
+  "version": "4.10.7",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -29,7 +29,8 @@
     "test:component": "cross-env NODE_ENV=coverage RUN_ENV=test karma start --single-run",
     "test:styles": "node test/stylesSpec.js",
     "coveralls": "cat ./coverage/lcov/lcov.info | ./node_modules/.bin/coveralls",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "version": "npm run changelog && git add -A"
   },
   "keywords": [
     "react",
@@ -62,7 +63,7 @@
     "prop-types": "^15.7.2",
     "react-lifecycles-compat": "^3.0.4",
     "react-virtualized": "^9.21.0",
-    "rsuite-table": "^3.15.1",
+    "rsuite-table": "^3.16.0",
     "schema-typed": "^1.5.1"
   },
   "peerDependencies": {
@@ -111,7 +112,7 @@
     "css-loader": "^0.28.11",
     "cssnano": "^4.1.10",
     "del": "^3.0.0",
-    "dtslint": "^0.3.0",
+    "dtslint": "^4.2.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^6.7.2",

package/src/Cascader/Cascader.tsx

@@ -73,6 +73,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
   triggerRef: React.RefObject<any>;
   containerRef: React.RefObject<any>;
   positionRef: React.RefObject<any>;
+  menuWrapperRef: React.RefObject<any>;
   menuContainerRef: React.RefObject<any>;
   isControlled: boolean;
 
@@ -98,7 +99,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     this.state = {
       ...initState,
       ...getDerivedStateForCascade(props, initState),
-      flattenData: flattenTree(props.data)
+      flattenData: flattenTree(props.data, props.childrenKey)
     };
 
     this.isControlled = !_.isUndefined(props.value);
@@ -108,11 +109,12 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     this.toggleRef = React.createRef();
 
     // for test
+    this.menuWrapperRef = React.createRef();
     this.menuContainerRef = React.createRef();
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { value, data, labelKey, valueKey } = nextProps;
+    const { value, data, labelKey, valueKey, childrenKey } = nextProps;
     if (data !== prevState.data) {
       // First get the value of the clicked node `selectNodeValue`, and then get the new `newChildren`.
       const selectNodeValue = prevState?.selectNode?.[valueKey];
@@ -129,13 +131,13 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
             newChildren.map(item => stringToObject(item, labelKey, valueKey))
           ),
           data,
-          flattenData: flattenTree(data)
+          flattenData: flattenTree(data, childrenKey)
         };
       }
 
       return {
         ...getDerivedStateForCascade(nextProps, prevState),
-        flattenData: flattenTree(data),
+        flattenData: flattenTree(data, childrenKey),
         data
       };
     }
@@ -450,6 +452,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
 
     return (
       <MenuWrapper
+        ref={this.menuWrapperRef}
         className={classes}
         style={menuStyle}
         getToggleInstance={this.getToggleInstance}

package/src/Cascader/test/CascaderSpec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
+import ReactTestUtils, { act } from 'react-dom/test-utils';
 import Cascader from '../Cascader';
 import Button from '../../Button';
 import { getDOMNode, getInstance } from '@test/testUtils';
@@ -214,4 +214,59 @@ describe('Cascader', () => {
     assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
   });
+
+  it('Should show search items with childrenKey', () => {
+    const itemsWithChildrenKey = {
+      childrenKey: 'sub',
+      data: [
+        {
+          value: 't',
+          label: 't'
+        },
+        {
+          value: 'h',
+          label: 'h'
+        },
+        {
+          value: 'g',
+          label: 'g',
+          sub: [
+            {
+              value: 'g-m',
+              label: 'g-m'
+            },
+            {
+              value: 'g-b',
+              label: 'g-b'
+            }
+          ]
+        }
+      ]
+    };
+
+    const instance = getInstance(
+      <Cascader
+        defaultOpen
+        data={itemsWithChildrenKey.data}
+        childrenKey={itemsWithChildrenKey.childrenKey}
+      />
+    );
+
+    const overlay = getDOMNode(instance.menuWrapperRef.current);
+
+    ReactTestUtils.act(() => {
+      const input = overlay.querySelector('.rs-picker-search-bar-input');
+
+      ReactTestUtils.Simulate.focus(input);
+
+      input.value = 'g';
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    ReactTestUtils.act(() => {
+      const searchResult = overlay.querySelectorAll('.rs-picker-cascader-row');
+
+      assert.equal(searchResult.length, 2);
+    });
+  });
 });

package/src/InputNumber/InputNumber.tsx

@@ -115,6 +115,15 @@ class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
       this.inputWheelListener.off();
     }
   }
+  componentDidUpdate(prevProps: InputNumberProps) {
+    const { value: preValue } = prevProps;
+    const { value: currentValue } = this.props;
+    if (preValue !== currentValue) {
+      this.setState({
+        value: currentValue
+      });
+    }
+  }
 
   bindInputRef = ref => {
     this.input = ref;

package/src/InputNumber/test/InputNumberSpec.js

@@ -149,4 +149,29 @@ describe('InputNumber', () => {
     const instance = getDOMNode(<InputNumber classPrefix="custom-prefix" />);
     assert.ok(instance.className.match(/\bcustom-prefix\b/));
   });
+  it('should be change correct value when reset value', () => {
+    let refValue = 0;
+    const Wrapper = React.forwardRef((props, ref) => {
+      const [value, setValue] = React.useState(refValue);
+      const reset = () => {
+        setValue(null);
+      };
+      refValue = value;
+      return (
+        <div ref={ref}>
+          <InputNumber value={value} onChange={setValue} />
+          <button id="reset" onClick={reset}>
+            reset
+          </button>
+        </div>
+      );
+    });
+    const instance = getDOMNode(<Wrapper />);
+    const resetBtn = instance.querySelector('#reset');
+    ReactTestUtils.Simulate.change(instance.querySelector('.rs-input'), { target: { value: 1 } });
+    ReactTestUtils.Simulate.click(resetBtn);
+    ReactTestUtils.Simulate.change(instance.querySelector('.rs-input'), { target: { value: 1 } });
+
+    assert.equal(refValue, 1);
+  });
 });

package/src/Modal/BaseModal.tsx

@@ -50,6 +50,7 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
   lastFocus = null;
   onDocumentKeyupListener = null;
   onFocusinListener = null;
+  _isMounted = null;
 
   constructor(props: BaseModalProps) {
     super(props);
@@ -59,6 +60,7 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
     this.dialogRef = React.createRef();
   }
   componentDidMount() {
+    this._isMounted = true;
     if (this.props.show) {
       this.onShow();
     }
@@ -95,6 +97,8 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
   componentWillUnmount() {
     const { show, transition } = this.props;
 
+    this._isMounted = false;
+
     if (show || (transition && !this.state.exited)) {
       this.onHide();
     }
@@ -173,14 +177,28 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
   enforceFocus = () => {
     const { enforceFocus } = this.props;
 
-    if (!enforceFocus || !this.isTopModal()) {
+    if (!enforceFocus || !this._isMounted || !this.isTopModal()) {
+      return;
+    }
+
+    const currentActiveElement = activeElement(ownerDocument(this));
+    const modal = this.getDialogElement();
+
+    if (modal && modal !== currentActiveElement && !contains(modal, currentActiveElement)) {
+      modal.focus();
+    }
+  };
+
+  handlePortalRendered = () => {
+    if (!this.props.autoFocus) {
       return;
     }
 
-    const active = activeElement(ownerDocument(this));
     const modal = this.getDialogElement();
+    const currentActiveElement = activeElement(ownerDocument(this));
 
-    if (modal && modal !== active && !contains(modal, active)) {
+    if (modal && modal !== currentActiveElement && !contains(modal, currentActiveElement)) {
+      this.lastFocus = currentActiveElement;
       modal.focus();
     }
   };
@@ -268,7 +286,11 @@ class BaseModal extends React.Component<BaseModalProps, BaseModalState> {
     }
 
     return (
-      <Portal ref={this.setMountNodeRef} container={container}>
+      <Portal
+        ref={this.setMountNodeRef}
+        container={container}
+        onRendered={this.handlePortalRendered}
+      >
         <div ref={this.modalNodeRef} role={rest.role} style={style} className={className}>
           {backdrop && this.renderBackdrop()}
           <RefHolder ref={this.dialogRef}>{dialog}</RefHolder>

package/src/Modal/ModalDialog.tsx

@@ -53,6 +53,7 @@ class ModalDialog extends React.Component<ModalDialogProps> {
         {...props}
         title={null}
         role="dialog"
+        tabIndex={-1}
         ref={mergeRefs(this.bindHtmlRef, dialogRef)}
         className={classNames(classPrefix, className)}
         style={modalStyle}