rsuite 4.10.5 → 4.10.8

package/es/CheckTreePicker/CheckTreePicker.js

@@ -510,9 +510,7 @@ function (_React$Component) {
   };
 
   _proto.updateDataChange = function updateDataChange(prevState) {
-    var _this$state2 = this.state,
-        searchKeyword = _this$state2.searchKeyword,
-        expandItemValues = _this$state2.expandItemValues;
+    var searchKeyword = this.state.searchKeyword;
     var _this$props7 = this.props,
         _this$props7$data = _this$props7.data,
         data = _this$props7$data === void 0 ? [] : _this$props7$data,
@@ -523,8 +521,7 @@ function (_React$Component) {
       this.nodes = {};
       this.flattenNodes(nextData);
       this.unserializeLists({
-        check: this.getValue(),
-        expand: expandItemValues
+        check: this.getValue()
       });
       this.setState({
         data: nextData,
@@ -567,10 +564,10 @@ function (_React$Component) {
   };
 
   _proto.updateUncheckableItemValuesChange = function updateUncheckableItemValuesChange(prevState) {
-    var _this$state3 = this.state,
-        data = _this$state3.data,
-        selectedValues = _this$state3.selectedValues,
-        expandItemValues = _this$state3.expandItemValues;
+    var _this$state2 = this.state,
+        data = _this$state2.data,
+        selectedValues = _this$state2.selectedValues,
+        expandItemValues = _this$state2.expandItemValues;
     var uncheckableItemValues = this.props.uncheckableItemValues;
 
     if (compareArray(uncheckableItemValues, prevState.uncheckableItemValues) && _isArray(uncheckableItemValues)) {
@@ -586,10 +583,10 @@ function (_React$Component) {
   };
 
   _proto.updateCascadeChange = function updateCascadeChange(prevState) {
-    var _this$state4 = this.state,
-        data = _this$state4.data,
-        selectedValues = _this$state4.selectedValues,
-        expandItemValues = _this$state4.expandItemValues;
+    var _this$state3 = this.state,
+        data = _this$state3.data,
+        selectedValues = _this$state3.selectedValues,
+        expandItemValues = _this$state3.expandItemValues;
     var cascade = this.props.cascade; // cascade 改变时，重新初始化
 
     if (cascade !== prevState.cascade && cascade) {
@@ -1062,9 +1059,9 @@ function (_React$Component) {
   _proto.renderNode = function renderNode(node, layer) {
     var _this10 = this;
 
-    var _this$state5 = this.state,
-        activeNode = _this$state5.activeNode,
-        searchKeyword = _this$state5.searchKeyword;
+    var _this$state4 = this.state,
+        activeNode = _this$state4.activeNode,
+        searchKeyword = _this$state4.searchKeyword;
     var _this$props11 = this.props,
         valueKey = _this$props11.valueKey,
         labelKey = _this$props11.labelKey,
@@ -1132,10 +1129,10 @@ function (_React$Component) {
   };
 
   _proto.renderVirtualNode = function renderVirtualNode(node, options) {
-    var _this$state6 = this.state,
-        activeNode = _this$state6.activeNode,
-        expandAll = _this$state6.expandAll,
-        searchKeyword = _this$state6.searchKeyword;
+    var _this$state5 = this.state,
+        activeNode = _this$state5.activeNode,
+        expandAll = _this$state5.expandAll,
+        searchKeyword = _this$state5.searchKeyword;
     var _this$props12 = this.props,
         valueKey = _this$props12.valueKey,
         labelKey = _this$props12.labelKey,
@@ -1185,9 +1182,9 @@ function (_React$Component) {
         _this11 = this,
         _classNames3;
 
-    var _this$state7 = this.state,
-        filterData = _this$state7.filterData,
-        isSomeNodeHasChildren = _this$state7.isSomeNodeHasChildren;
+    var _this$state6 = this.state,
+        filterData = _this$state6.filterData,
+        isSomeNodeHasChildren = _this$state6.isSomeNodeHasChildren;
     var _this$props13 = this.props,
         inline = _this$props13.inline,
         style = _this$props13.style,
@@ -1279,9 +1276,9 @@ function (_React$Component) {
         positionRef = _this$props14.positionRef,
         rest = _objectWithoutPropertiesLoose(_this$props14, ["cascade", "style", "locale", "inline", "disabled", "valueKey", "labelKey", "cleanable", "countable", "placeholder", "toggleComponentClass", "onExited", "onEntered", "onClean", "renderValue", "positionRef"]);
 
-    var _this$state8 = this.state,
-        hasValue = _this$state8.hasValue,
-        selectedValues = _this$state8.selectedValues;
+    var _this$state7 = this.state,
+        hasValue = _this$state7.hasValue,
+        selectedValues = _this$state7.selectedValues;
 
     var hasValidValue = hasValue || selectedValues.length > 0 && _isFunction(renderValue);
 

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/lib/CheckTreePicker/CheckTreePicker.js

@@ -544,9 +544,7 @@ function (_React$Component) {
   };
 
   _proto.updateDataChange = function updateDataChange(prevState) {
-    var _this$state2 = this.state,
-        searchKeyword = _this$state2.searchKeyword,
-        expandItemValues = _this$state2.expandItemValues;
+    var searchKeyword = this.state.searchKeyword;
     var _this$props7 = this.props,
         _this$props7$data = _this$props7.data,
         data = _this$props7$data === void 0 ? [] : _this$props7$data,
@@ -557,8 +555,7 @@ function (_React$Component) {
       this.nodes = {};
       this.flattenNodes(nextData);
       this.unserializeLists({
-        check: this.getValue(),
-        expand: expandItemValues
+        check: this.getValue()
       });
       this.setState({
         data: nextData,
@@ -601,10 +598,10 @@ function (_React$Component) {
   };
 
   _proto.updateUncheckableItemValuesChange = function updateUncheckableItemValuesChange(prevState) {
-    var _this$state3 = this.state,
-        data = _this$state3.data,
-        selectedValues = _this$state3.selectedValues,
-        expandItemValues = _this$state3.expandItemValues;
+    var _this$state2 = this.state,
+        data = _this$state2.data,
+        selectedValues = _this$state2.selectedValues,
+        expandItemValues = _this$state2.expandItemValues;
     var uncheckableItemValues = this.props.uncheckableItemValues;
 
     if ((0, _treeUtils.compareArray)(uncheckableItemValues, prevState.uncheckableItemValues) && (0, _isArray2.default)(uncheckableItemValues)) {
@@ -620,10 +617,10 @@ function (_React$Component) {
   };
 
   _proto.updateCascadeChange = function updateCascadeChange(prevState) {
-    var _this$state4 = this.state,
-        data = _this$state4.data,
-        selectedValues = _this$state4.selectedValues,
-        expandItemValues = _this$state4.expandItemValues;
+    var _this$state3 = this.state,
+        data = _this$state3.data,
+        selectedValues = _this$state3.selectedValues,
+        expandItemValues = _this$state3.expandItemValues;
     var cascade = this.props.cascade; // cascade 改变时，重新初始化
 
     if (cascade !== prevState.cascade && cascade) {
@@ -1096,9 +1093,9 @@ function (_React$Component) {
   _proto.renderNode = function renderNode(node, layer) {
     var _this10 = this;
 
-    var _this$state5 = this.state,
-        activeNode = _this$state5.activeNode,
-        searchKeyword = _this$state5.searchKeyword;
+    var _this$state4 = this.state,
+        activeNode = _this$state4.activeNode,
+        searchKeyword = _this$state4.searchKeyword;
     var _this$props11 = this.props,
         valueKey = _this$props11.valueKey,
         labelKey = _this$props11.labelKey,
@@ -1166,10 +1163,10 @@ function (_React$Component) {
   };
 
   _proto.renderVirtualNode = function renderVirtualNode(node, options) {
-    var _this$state6 = this.state,
-        activeNode = _this$state6.activeNode,
-        expandAll = _this$state6.expandAll,
-        searchKeyword = _this$state6.searchKeyword;
+    var _this$state5 = this.state,
+        activeNode = _this$state5.activeNode,
+        expandAll = _this$state5.expandAll,
+        searchKeyword = _this$state5.searchKeyword;
     var _this$props12 = this.props,
         valueKey = _this$props12.valueKey,
         labelKey = _this$props12.labelKey,
@@ -1219,9 +1216,9 @@ function (_React$Component) {
         _this11 = this,
         _classNames3;
 
-    var _this$state7 = this.state,
-        filterData = _this$state7.filterData,
-        isSomeNodeHasChildren = _this$state7.isSomeNodeHasChildren;
+    var _this$state6 = this.state,
+        filterData = _this$state6.filterData,
+        isSomeNodeHasChildren = _this$state6.isSomeNodeHasChildren;
     var _this$props13 = this.props,
         inline = _this$props13.inline,
         style = _this$props13.style,
@@ -1312,9 +1309,9 @@ function (_React$Component) {
         renderValue = _this$props14.renderValue,
         positionRef = _this$props14.positionRef,
         rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props14, ["cascade", "style", "locale", "inline", "disabled", "valueKey", "labelKey", "cleanable", "countable", "placeholder", "toggleComponentClass", "onExited", "onEntered", "onClean", "renderValue", "positionRef"]);
-    var _this$state8 = this.state,
-        hasValue = _this$state8.hasValue,
-        selectedValues = _this$state8.selectedValues;
+    var _this$state7 = this.state,
+        hasValue = _this$state7.hasValue,
+        selectedValues = _this$state7.selectedValues;
     var hasValidValue = hasValue || selectedValues.length > 0 && (0, _isFunction2.default)(renderValue);
     var selectedItems = this.getSelectedItems(selectedValues);
     var selectedElement = placeholder;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.10.5",
+  "version": "4.10.8",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -63,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": {
@@ -112,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/CheckTreePicker/CheckTreePicker.tsx

@@ -234,7 +234,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
   }
 
   updateDataChange(prevState: CheckTreePickerState) {
-    const { searchKeyword, expandItemValues } = this.state;
+    const { searchKeyword } = this.state;
     const { data = [], childrenKey } = this.props;
 
     if (prevState.data !== data) {
@@ -242,8 +242,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
       this.nodes = {};
       this.flattenNodes(nextData);
       this.unserializeLists({
-        check: this.getValue(),
-        expand: expandItemValues
+        check: this.getValue()
       });
 
       this.setState({

package/src/CheckTreePicker/test/CheckTreePickerSpec.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -567,4 +567,45 @@ describe('CheckTreePicker', () => {
       4
     );
   });
+  it('Should expand when has props defaultExpandAll and data change', () => {
+    const Wrapper = React.forwardRef((props, ref) => {
+      const nextData = [
+        {
+          label: 'Fujian',
+          value: 3,
+          children: [
+            {
+              label: 'Fuzhou',
+              value: 36
+            }
+          ]
+        },
+        {
+          label: 'Guangdong',
+          value: 4,
+          children: [
+            {
+              label: 'Guangzhou',
+              value: 45
+            }
+          ]
+        }
+      ];
+      const [willChangeData, setData] = useState(data);
+      const handleClick = () => {
+        setData(nextData);
+      };
+      return (
+        <div ref={ref}>
+          <button onClick={handleClick} className="change-data">
+            change data
+          </button>
+          <CheckTreePicker inline defaultExpandAll data={willChangeData} />
+        </div>
+      );
+    });
+    const instance = getDOMNode(<Wrapper />);
+    ReactTestUtils.Simulate.click(instance.querySelector('.change-data'));
+    expect(instance.querySelectorAll('.rs-check-tree-open').length).to.equal(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}

package/src/Modal/test/ModalSpec.js

@@ -124,4 +124,9 @@ describe('Modal', () => {
     const instance = getInstance(<Modal classPrefix="custom-prefix" show />);
     assert.ok(instance.dialogElement.className.match(/\bcustom-prefix\b/));
   });
+
+  it('Should be forced to focus on Modal', () => {
+    const instance = getInstance(<Modal className="custom" show />);
+    assert.equal(instance.dialogElement, document.activeElement);
+  });
 });