rsuite 4.10.10 → 4.11.0

package/es/CheckPicker/CheckPicker.d.ts

@@ -1,14 +1,21 @@
 import * as React from 'react';
 
-import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 
-export interface CheckPickerProps extends FormControlPickerProps<any[]>, SelectProps<any[]> {
+export interface CheckPickerProps extends FormControlPickerProps<any[]>, BaseSelectProps {
   /** Top the selected option in the options */
   sticky?: boolean;
 
   /** A picker that can be counted */
   countable?: boolean;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const CheckPicker: React.ComponentType<CheckPickerProps>;

package/es/CheckTreePicker/CheckTreePicker.js

@@ -427,7 +427,7 @@ function (_React$Component) {
     _this.unserializeLists({
       check: nextValue,
       expand: _nextExpandItemValues
-    }, _props);
+    }, _props, true);
 
     _this.state = {
       data: data,
@@ -901,13 +901,17 @@ function (_React$Component) {
     return list;
   };
 
-  _proto.unserializeLists = function unserializeLists(lists, nextProps) {
+  _proto.unserializeLists = function unserializeLists(lists, nextProps, initial) {
     var _this8 = this;
 
     if (nextProps === void 0) {
       nextProps = this.props;
     }
 
+    if (initial === void 0) {
+      initial = false;
+    }
+
     var _nextProps = nextProps,
         valueKey = _nextProps.valueKey,
         cascade = _nextProps.cascade,
@@ -945,7 +949,7 @@ function (_React$Component) {
               }
             });
           } else {
-            _this8.nodes[refKey][listKey] = expandAll;
+            _this8.nodes[refKey][listKey] = initial ? expandAll : false;
           }
         }
       });

package/es/InputPicker/InputPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface InputPickerProps extends FormControlPickerProps<any>, SelectProps<any> {
+export interface InputPickerProps extends FormControlPickerProps<any>, BaseSelectProps {
   /** Settings can create new options */
   creatable?: boolean;
 

package/es/SelectPicker/SelectPicker.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 
-export interface SelectProps<ValueType = any> {
+export interface BaseSelectProps {
   /** Set group condition key in data */
   groupBy?: string;
 
@@ -22,13 +22,6 @@ export interface SelectProps<ValueType = any> {
   /** Custom render menu group */
   renderMenuGroup?: (title: React.ReactNode, item: ItemDataType) => React.ReactNode;
 
-  /** Custom render selected items */
-  renderValue?: (
-    value: ValueType,
-    item: ItemDataType | ItemDataType[],
-    selectedElement: React.ReactNode
-  ) => React.ReactNode;
-
   /** Called when the option is selected */
   onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent<any>) => void;
 
@@ -53,6 +46,14 @@ export interface SelectProps<ValueType = any> {
   /** Custom search rules. */
   searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
 }
+export interface SelectProps<ValueType> extends BaseSelectProps {
+  /** Custom render selected items */
+  renderValue?: (
+    value: ValueType,
+    item: ItemDataType,
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
+}
 
 export interface SelectPickerProps extends FormControlPickerProps<any>, SelectProps<any> {}
 

package/es/TagPicker/TagPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[]> {
+export interface TagPickerProps extends FormControlPickerProps, BaseSelectProps {
   /** Option to cache value when searching asynchronously */
   cacheData?: any[];
 
@@ -16,6 +16,13 @@ export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[
    * https://github.com/rsuite/rsuite/blob/master/src/Tag/Tag.d.ts
    */
   tagProps?: TagProps;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const TagPicker: React.ComponentType<TagPickerProps>;

package/lib/CheckPicker/CheckPicker.d.ts

@@ -1,14 +1,21 @@
 import * as React from 'react';
 
-import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 
-export interface CheckPickerProps extends FormControlPickerProps<any[]>, SelectProps<any[]> {
+export interface CheckPickerProps extends FormControlPickerProps<any[]>, BaseSelectProps {
   /** Top the selected option in the options */
   sticky?: boolean;
 
   /** A picker that can be counted */
   countable?: boolean;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const CheckPicker: React.ComponentType<CheckPickerProps>;

package/lib/CheckTreePicker/CheckTreePicker.js

@@ -461,7 +461,7 @@ function (_React$Component) {
     _this.unserializeLists({
       check: nextValue,
       expand: _nextExpandItemValues
-    }, _props);
+    }, _props, true);
 
     _this.state = {
       data: data,
@@ -935,13 +935,17 @@ function (_React$Component) {
     return list;
   };
 
-  _proto.unserializeLists = function unserializeLists(lists, nextProps) {
+  _proto.unserializeLists = function unserializeLists(lists, nextProps, initial) {
     var _this8 = this;
 
     if (nextProps === void 0) {
       nextProps = this.props;
     }
 
+    if (initial === void 0) {
+      initial = false;
+    }
+
     var _nextProps = nextProps,
         valueKey = _nextProps.valueKey,
         cascade = _nextProps.cascade,
@@ -979,7 +983,7 @@ function (_React$Component) {
               }
             });
           } else {
-            _this8.nodes[refKey][listKey] = expandAll;
+            _this8.nodes[refKey][listKey] = initial ? expandAll : false;
           }
         }
       });

package/lib/InputPicker/InputPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface InputPickerProps extends FormControlPickerProps<any>, SelectProps<any> {
+export interface InputPickerProps extends FormControlPickerProps<any>, BaseSelectProps {
   /** Settings can create new options */
   creatable?: boolean;
 

package/lib/SelectPicker/SelectPicker.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 
-export interface SelectProps<ValueType = any> {
+export interface BaseSelectProps {
   /** Set group condition key in data */
   groupBy?: string;
 
@@ -22,13 +22,6 @@ export interface SelectProps<ValueType = any> {
   /** Custom render menu group */
   renderMenuGroup?: (title: React.ReactNode, item: ItemDataType) => React.ReactNode;
 
-  /** Custom render selected items */
-  renderValue?: (
-    value: ValueType,
-    item: ItemDataType | ItemDataType[],
-    selectedElement: React.ReactNode
-  ) => React.ReactNode;
-
   /** Called when the option is selected */
   onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent<any>) => void;
 
@@ -53,6 +46,14 @@ export interface SelectProps<ValueType = any> {
   /** Custom search rules. */
   searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
 }
+export interface SelectProps<ValueType> extends BaseSelectProps {
+  /** Custom render selected items */
+  renderValue?: (
+    value: ValueType,
+    item: ItemDataType,
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
+}
 
 export interface SelectPickerProps extends FormControlPickerProps<any>, SelectProps<any> {}
 

package/lib/TagPicker/TagPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[]> {
+export interface TagPickerProps extends FormControlPickerProps, BaseSelectProps {
   /** Option to cache value when searching asynchronously */
   cacheData?: any[];
 
@@ -16,6 +16,13 @@ export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[
    * https://github.com/rsuite/rsuite/blob/master/src/Tag/Tag.d.ts
    */
   tagProps?: TagProps;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const TagPicker: React.ComponentType<TagPickerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.10.10",
+  "version": "4.11.0",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/CheckPicker/CheckPicker.d.ts

@@ -1,14 +1,21 @@
 import * as React from 'react';
 
-import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 
-export interface CheckPickerProps extends FormControlPickerProps<any[]>, SelectProps<any[]> {
+export interface CheckPickerProps extends FormControlPickerProps<any[]>, BaseSelectProps {
   /** Top the selected option in the options */
   sticky?: boolean;
 
   /** A picker that can be counted */
   countable?: boolean;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const CheckPicker: React.ComponentType<CheckPickerProps>;

package/src/CheckTreePicker/CheckTreePicker.tsx

@@ -144,7 +144,8 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
         check: nextValue,
         expand: nextExpandItemValues
       },
-      props
+      props,
+      true
     );
 
     this.state = {
@@ -582,7 +583,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
     return list;
   }
 
-  unserializeLists(lists: any, nextProps: CheckTreePickerProps = this.props) {
+  unserializeLists(lists: any, nextProps: CheckTreePickerProps = this.props, initial = false) {
     const { valueKey, cascade, uncheckableItemValues = [] } = nextProps;
     const expandAll = getExpandAll(nextProps);
     // Reset values to false
@@ -613,7 +614,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
               }
             });
           } else {
-            this.nodes[refKey][listKey] = expandAll;
+            this.nodes[refKey][listKey] = initial ? expandAll : false;
           }
         }
       });

package/src/CheckTreePicker/test/CheckTreePickerSpec.js

@@ -567,45 +567,65 @@ 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);
+
+  describe('data change', () => {
+    const renderStart = () => {
+      const containerRef = React.createRef();
+      const Wrapper = () => {
+        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={containerRef}>
+            <button onClick={handleClick} className="change-data">
+              change data
+            </button>
+            <CheckTreePicker inline defaultExpandAll data={willChangeData} />
+          </div>
+        );
       };
-      return (
-        <div ref={ref}>
-          <button onClick={handleClick} className="change-data">
-            change data
-          </button>
-          <CheckTreePicker inline defaultExpandAll data={willChangeData} />
-        </div>
-      );
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<Wrapper />, container);
+      });
+      return containerRef.current;
+    };
+
+    it('Should expand when has props defaultExpandAll', () => {
+      const container = renderStart();
+      ReactTestUtils.Simulate.click(container.querySelector('.change-data'));
+      expect(container.querySelectorAll('.rs-check-tree-open').length).to.equal(2);
+    });
+
+    it('Should be all closed, when click close icon', () => {
+      const container = renderStart();
+      ReactTestUtils.Simulate.click(container.querySelector('.change-data'));
+      container.querySelectorAll('.rs-check-tree-node-expand-icon').forEach(element => {
+        ReactTestUtils.Simulate.click(element);
+      });
+      expect(container.querySelectorAll('.rs-check-tree-open').length).to.equal(0);
     });
-    const instance = getDOMNode(<Wrapper />);
-    ReactTestUtils.Simulate.click(instance.querySelector('.change-data'));
-    expect(instance.querySelectorAll('.rs-check-tree-open').length).to.equal(2);
   });
 });

package/src/InputPicker/InputPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface InputPickerProps extends FormControlPickerProps<any>, SelectProps<any> {
+export interface InputPickerProps extends FormControlPickerProps<any>, BaseSelectProps {
   /** Settings can create new options */
   creatable?: boolean;
 

package/src/SelectPicker/SelectPicker.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 
-export interface SelectProps<ValueType = any> {
+export interface BaseSelectProps {
   /** Set group condition key in data */
   groupBy?: string;
 
@@ -22,13 +22,6 @@ export interface SelectProps<ValueType = any> {
   /** Custom render menu group */
   renderMenuGroup?: (title: React.ReactNode, item: ItemDataType) => React.ReactNode;
 
-  /** Custom render selected items */
-  renderValue?: (
-    value: ValueType,
-    item: ItemDataType | ItemDataType[],
-    selectedElement: React.ReactNode
-  ) => React.ReactNode;
-
   /** Called when the option is selected */
   onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent<any>) => void;
 
@@ -53,6 +46,14 @@ export interface SelectProps<ValueType = any> {
   /** Custom search rules. */
   searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
 }
+export interface SelectProps<ValueType> extends BaseSelectProps {
+  /** Custom render selected items */
+  renderValue?: (
+    value: ValueType,
+    item: ItemDataType,
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
+}
 
 export interface SelectPickerProps extends FormControlPickerProps<any>, SelectProps<any> {}
 

package/src/SelectPicker/test/SelectPickerSpec.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
 import { globalKey, getDOMNode, getInstance } from '@test/testUtils';
@@ -338,14 +338,15 @@ describe('SelectPicker', () => {
     assert.ok(list[0].innerText, 'Louisa');
   });
 
-  it.only('SearchWord should be reset when controlled and triggered off', done => {
+  it('SearchWord should be reset when controlled and triggered off', done => {
     let searchRef = '';
     let onClose = null;
     const promise = new Promise(resolve => {
       onClose = resolve;
     });
-    const Wrapper = React.forwardRef((props, ref) => {
+    const Wrapper = () => {
       const [search, setSearch] = useState(searchRef);
+      const containerRef = useRef();
       searchRef = search;
       const handleSearch = value => {
         setSearch(value);
@@ -354,11 +355,11 @@ describe('SelectPicker', () => {
         onClose();
       };
       return (
-        <div>
+        <div ref={containerRef}>
           <button id="exit">exit</button>
           <Dropdown
+            container={() => containerRef.current}
             search={search}
-            ref={ref}
             defaultOpen
             onClose={handleClose}
             onSearch={handleSearch}
@@ -366,14 +367,15 @@ describe('SelectPicker', () => {
           />
         </div>
       );
-    });
+    };
     Wrapper.displayName = 'WrapperSelectPicker';
     ReactTestUtils.act(() => {
       ReactDOM.render(<Wrapper />, container);
     });
 
     const exit = container?.querySelector('#exit');
-    const input = document.querySelector(searchInputClassName);
+    const input = container.querySelector(searchInputClassName);
+
     // change search
     input.value = 'a';
     ReactTestUtils.Simulate.change(input);

package/src/TagPicker/TagPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[]> {
+export interface TagPickerProps extends FormControlPickerProps, BaseSelectProps {
   /** Option to cache value when searching asynchronously */
   cacheData?: any[];
 
@@ -16,6 +16,13 @@ export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[
    * https://github.com/rsuite/rsuite/blob/master/src/Tag/Tag.d.ts
    */
   tagProps?: TagProps;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const TagPicker: React.ComponentType<TagPickerProps>;