@hi-ui/check-select 4.0.0-beta.5 → 4.0.0-beta.50

package/README.md

@@ -16,30 +16,30 @@
 
 ## Props
 
-| 参数              | 说明                                                                                                     | 类型                                                                | 可选值                                       | 默认值                                                                |
-| ----------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
-| data              | 下拉框选项数据源                                                                                         | DataItem[] \| groupDataItem[]                                       | -                                            | -                                                                     |
-| fieldNames        | 设置 data 中 id, title, disabled, children 对应的 key                                                    | object                                                              | -                                            | { title: 'title', id: 'id',disabled:'disabled', children: 'children'} |
-| dataSource        | 关键词搜索时，触发异步下拉框选项数据源                                                                   | DataSource (keyword: string) => (DataSource \| DataItem \| Promise) | -                                            | -                                                                     |
-| value             | 被选中项的值                                                                                             | ReactText[]                                                         | -                                            | -                                                                     |
-| defaultValue      | 默认被选中项的值                                                                                         | ReactText[]                                                         | -                                            | -                                                                     |
-| showCheckAll      | 是否显示**全选**，只对多选生效                                                                           | boolean                                                             | true \| false                                | false                                                                 |
-| showJustSelected  | 是否显示**仅看已选**，只对多选生效 (3.0 新增)                                                            | boolean                                                             | true \| false                                | false                                                                 |
-| searchable        | 是否可以筛选                                                                                             | boolean                                                             | true \| false                                | false                                                                 |
-| filterOption      | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean                        | (keyword: string, item: DataItem) => boolean | -                                                                     |
-| clearable         | 是否可以清空                                                                                             | boolean                                                             | true \| false                                | true                                                                  |
-| disabled          | 是否禁用                                                                                                 | boolean                                                             | true \| false                                | false                                                                 |
-| placeholder       | 输入框占位                                                                                               | string                                                              | -                                            | '请选择'                                                              |
-| searchPlaceholder | 搜索输入框占位                                                                                           | string                                                              | -                                            | '搜索'                                                                |
-| emptyContent      | 设置选项为空时展示的内容                                                                                 | ReactNode                                                           | -                                            | '无匹配数据'                                                          |
-| loadingContent    | 设置加载中时展示的内容                                                                                   | ReactNode                                                           | -                                            | '数据加载中...'                                                       |
-| optionWidth       | 自定义下拉选项宽度                                                                                       | number                                                              | -                                            |                                                                       |
-| renderExtraFooter | 自定义下拉菜单底部渲染                                                                                   | () => ReactNode                                                     | -                                            | 无内容                                                                |
-| overlayClassName  | 下拉根元素的类名称                                                                                       | string                                                              | -                                            | -                                                                     |
-| onOverlayScroll   | 下拉列表滚动时的回调                                                                                     | function                                                            | -                                            | -                                                                     |
-| overlay           | 自定义控制弹出层 popper 行为                                                                             | PopperOverlayProps                                                  | -                                            | -                                                                     |
-| render            | 自定义渲染节点的 title 内容径                                                                            | (item: CheckSelectEventData, keyword: string) => React.ReactNode    | -                                            |
-| displayRender     | 自定义选择后展示的内容                                                                                   | (selectedItems: DataItem[]) => string                               | -                                            | -                                                                     |
+| 参数              | 说明                                                                                                     | 类型                                                                 | 可选值                                       | 默认值                                                                |
+| ----------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| data              | 下拉框选项数据源                                                                                         | DataItem[] \| groupDataItem[]                                        | -                                            | -                                                                     |
+| fieldNames        | 设置 data 中 id, title, disabled, children 对应的 key                                                    | object                                                               | -                                            | { title: 'title', id: 'id',disabled:'disabled', children: 'children'} |
+| dataSource        | 关键词搜索时，触发异步下拉框选项数据源                                                                   | DataSource (keyword: string) => (DataSource \| DataItem \| Promise)  | -                                            | -                                                                     |
+| value             | 被选中项的值                                                                                             | ReactText[]                                                          | -                                            | -                                                                     |
+| defaultValue      | 默认被选中项的值                                                                                         | ReactText[]                                                          | -                                            | -                                                                     |
+| showCheckAll      | 是否显示**全选**，只对多选生效                                                                           | boolean                                                              | true \| false                                | false                                                                 |
+| showJustSelected  | 是否显示**仅看已选**，只对多选生效 (3.0 新增)                                                            | boolean                                                              | true \| false                                | false                                                                 |
+| searchable        | 是否可以筛选                                                                                             | boolean                                                              | true \| false                                | false                                                                 |
+| filterOption      | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean                         | (keyword: string, item: DataItem) => boolean | -                                                                     |
+| clearable         | 是否可以清空                                                                                             | boolean                                                              | true \| false                                | true                                                                  |
+| disabled          | 是否禁用                                                                                                 | boolean                                                              | true \| false                                | false                                                                 |
+| placeholder       | 输入框占位                                                                                               | string                                                               | -                                            | '请选择'                                                              |
+| searchPlaceholder | 搜索输入框占位                                                                                           | string                                                               | -                                            | '搜索'                                                                |
+| emptyContent      | 设置选项为空时展示的内容                                                                                 | ReactNode                                                            | -                                            | '无匹配数据'                                                          |
+| loadingContent    | 设置加载中时展示的内容                                                                                   | ReactNode                                                            | -                                            | '数据加载中...'                                                       |
+| optionWidth       | 自定义下拉选项宽度                                                                                       | number                                                               | -                                            |                                                                       |
+| renderExtraFooter | 自定义下拉菜单底部渲染                                                                                   | () => ReactNode                                                      | -                                            | 无内容                                                                |
+| overlayClassName  | 下拉根元素的类名称                                                                                       | string                                                               | -                                            | -                                                                     |
+| onOverlayScroll   | 下拉列表滚动时的回调                                                                                     | function                                                             | -                                            | -                                                                     |
+| overlay           | 自定义控制弹出层 popper 行为                                                                             | PopperOverlayProps                                                   | -                                            | -                                                                     |
+| render            | 自定义渲染节点的 title 内容径                                                                            | (item: CheckSelectItemEventData, keyword: string) => React.ReactNode | -                                            |
+| displayRender     | 自定义选择后展示的内容                                                                                   | (selectedItems: DataItem[]) => string                                | -                                            | -                                                                     |
 
 > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 CheckSelect，请尝试使用 `overlay={ container: triggerNode.parentElement }` 将下拉弹层渲染节点固定在触发器的父元素中。
 
@@ -67,7 +67,7 @@
 | title    | 下拉选择项标题   | string    | -             | -      |
 | disabled | 是否禁用         | boolean   | true \| false | false  |
 
-### CheckSelectEventData
+### CheckSelectItemEventData
 
 | 参数     | 说明                             | 类型    | 可选值        | 默认值 |
 | -------- | -------------------------------- | ------- | ------------- | ------ |

package/lib/cjs/CheckSelect.js

@@ -37,18 +37,16 @@ var tagInput = require('@hi-ui/tag-input');
 
 var typeAssertion = require('@hi-ui/type-assertion');
 
-var VirtualList = require('rc-virtual-list');
+var VirtualList = require('@hi-ui/virtual-list');
 
 var picker = require('@hi-ui/picker');
 
-var uniqBy = require('./node_modules/lodash/uniqBy.js');
+var arrayUtils = require('@hi-ui/array-utils');
 
 var highlighter = require('@hi-ui/highlighter');
 
 var useToggle = require('@hi-ui/use-toggle');
 
-var times = require('@hi-ui/times');
-
 var funcUtils = require('@hi-ui/func-utils');
 
 var localeContext = require('@hi-ui/locale-context');
@@ -59,6 +57,8 @@ require('@hi-ui/use-children');
 
 var useFlattenData = require('./hooks/use-flatten-data.js');
 
+var index = require('./utils/index.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -102,6 +102,9 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       itemHeight = _a$itemHeight === void 0 ? 40 : _a$itemHeight,
       _a$virtual = _a.virtual,
       virtual = _a$virtual === void 0 ? true : _a$virtual,
+      visible = _a.visible,
+      onOpen = _a.onOpen,
+      onClose = _a.onClose,
       appearance = _a.appearance,
       invalid = _a.invalid,
       dataSource = _a.dataSource,
@@ -112,14 +115,19 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onSearchProp = _a.onSearch,
       _a$fieldNames = _a.fieldNames,
       fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "wrap", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames"]);
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames"]);
 
   var i18n = localeContext.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
 
-  var _useToggle = useToggle.useToggle(),
-      menuVisible = _useToggle[0],
-      menuVisibleAction = _useToggle[1];
+  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
+    visible: visible,
+    disabled: disabled,
+    onOpen: onOpen,
+    onClose: onClose
+  }),
+      menuVisible = _useUncontrolledToggl[0],
+      menuVisibleAction = _useUncontrolledToggl[1];
 
   var displayRender = React.useCallback(function (item) {
     if (typeAssertion.isFunction(displayRenderProp)) {
@@ -127,34 +135,20 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
 
     return item.title;
-  }, [displayRenderProp]); // 搜索时临时选中缓存数据
-
-  var _useState = React.useState([]),
-      selectedItems = _useState[0],
-      setSelectedItems = _useState[1];
-
-  var onSelect = useLatest.useLatestCallback(function (value, item, shouldChecked) {
-    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, shouldChecked);
-
-    if (shouldChecked) {
-      // TODO：as useCheckList
-      setSelectedItems(function (prev) {
-        return [].concat(prev, [item]);
-      });
-    }
-  });
+  }, [displayRenderProp]);
 
   var _b = useCheckSelect.useCheckSelect(Object.assign(Object.assign({}, rest), {
     children: children,
     fieldNames: fieldNames,
-    onSelect: onSelect
+    onSelect: onSelectProp
   })),
       rootProps = _b.rootProps,
       context$1 = tslib.__rest(_b, ["rootProps"]);
 
   var value = context$1.value,
       tryChangeValue = context$1.tryChangeValue,
-      flattedData = context$1.flattedData; // ************************** 搜索 ************************* //
+      flattedData = context$1.flattedData,
+      checkedItems = context$1.checkedItems; // ************************** 搜索 ************************* //
 
   var _c = useSearchMode.useAsyncSearch({
     dataSource: dataSource,
@@ -199,10 +193,10 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
 
     var highlight = !!searchValue && searchMode === 'filter';
-    var ret = highlight ? /*#__PURE__*/React__default['default'].createElement(Checkbox__default['default'], {
+    var ret = highlight ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
       checked: node.checked,
       disabled: node.disabled
-    }, /*#__PURE__*/React__default['default'].createElement(highlighter.Highlighter, {
+    }, /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
       keyword: searchValue
     }, node.title)) : true;
     return ret;
@@ -210,67 +204,79 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var shouldUseSearch = !!searchValue && !hasError;
   var showData = React.useMemo(function () {
     return shouldUseSearch ? stateInSearch.data : flattedData;
-  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 下拉菜单不能合并（因为树形数据，不知道是第几级）
+  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 根据 id 进行合并，注意必须是扁平数据
 
   var mergedData = React.useMemo(function () {
-    var nextData = selectedItems.concat(flattedData);
-    return uniqBy['default'](nextData, 'id');
-  }, [selectedItems, flattedData]);
+    var nextData = checkedItems.concat(flattedData);
+    return arrayUtils.uniqBy(nextData, 'id');
+  }, [checkedItems, flattedData]);
 
-  var _useState2 = React.useState(null),
-      filterItems = _useState2[0],
-      setFilterItems = _useState2[1];
+  var _useState = React.useState(null),
+      filterItems = _useState[0],
+      setFilterItems = _useState[1];
 
   var dropdownItems = filterItems || showData;
+  var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
 
   var _useMemo = React.useMemo(function () {
-    var dropdownIds = dropdownItems.filter(function (item) {
-      return !('groupTitle' in item);
-    }).map(function (_ref) {
-      var id = _ref.id;
-      return id;
-    });
-    var dropdownIdsSet = new Set(dropdownIds);
-    var hasValue = false;
-    value.forEach(function (id) {
-      if (dropdownIdsSet.has(id)) {
-        hasValue = true;
-        dropdownIdsSet["delete"](id);
-      }
-    });
-    return [hasValue && dropdownIdsSet.size === 0, hasValue && dropdownIdsSet.size > 0];
+    return index.getAllCheckedStatus(dropdownItems, value, index.isOption);
   }, [dropdownItems, value]),
-      allChecked = _useMemo[0],
-      indeterminate = _useMemo[1];
+      showAllChecked = _useMemo[0],
+      showIndeterminate = _useMemo[1];
 
-  var toggleCheckAll = React.useCallback(function (showChecked) {
-    var checkedItems = mergedData.filter(function (item) {
-      return value.includes(item.id);
-    });
-    var items = dropdownItems.filter(function (item) {
-      return !('groupTitle' in item);
+  var valueLatestRef = useLatest.useLatestRef(value);
+  var toggleCheckAll = React.useCallback(function () {
+    var value = valueLatestRef.current;
+
+    var _getAllCheckedStatus = index.getAllCheckedStatus(dropdownItems, value, index.isCheckableOption),
+        currentAllChecked = _getAllCheckedStatus[0];
+
+    var shouldChecked = !currentAllChecked; // 当前页的数据选项
+
+    var items = dropdownItems.filter(index.isCheckableOption);
+    var targetIds = items.map(function (_ref) {
+      var id = _ref.id;
+      return id;
     });
+    var allData = arrayUtils.uniqBy(items.concat(mergedData), 'id');
 
-    if (showChecked) {
-      tryChangeValue(items.map(function (_ref2) {
+    if (shouldChecked) {
+      var nextCheckedIds = Array.from(new Set(value.concat(targetIds)));
+      var changedIds = nextCheckedIds.filter(function (id) {
+        return !value.includes(id);
+      });
+      var changedItems = allData.filter(function (_ref2) {
         var id = _ref2.id;
-        return id;
-      }), checkedItems, showChecked);
+        return changedIds.includes(id);
+      });
+      tryChangeValue(nextCheckedIds, changedItems, shouldChecked);
     } else {
-      tryChangeValue([], checkedItems, showChecked);
+      var _nextCheckedIds = value.filter(function (id) {
+        return !targetIds.includes(id);
+      });
+
+      var _changedIds = value.filter(function (id) {
+        return !_nextCheckedIds.includes(id);
+      });
+
+      var _changedItems = allData.filter(function (_ref3) {
+        var id = _ref3.id;
+        return _changedIds.includes(id);
+      }); // items
+
+
+      tryChangeValue(_nextCheckedIds, _changedItems, shouldChecked);
     }
-  }, [dropdownItems, mergedData, value, tryChangeValue]);
+  }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
 
   var renderDefaultFooter = function renderDefaultFooter() {
     var extra = renderExtraFooter ? renderExtraFooter() : null;
 
     if (showCheckAll) {
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Checkbox__default['default'], {
-        indeterminate: indeterminate,
-        checked: allChecked,
-        onChange: function onChange(evt) {
-          toggleCheckAll(evt.target.checked);
-        }
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+        indeterminate: showIndeterminate,
+        checked: showAllChecked,
+        onChange: toggleCheckAll
       }, i18n.get('checkSelect.checkAll')), extra);
     }
 
@@ -278,10 +284,20 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   };
 
   var expandedViewRef = React.useRef('normal');
+  var virtualListProps = {
+    height: height,
+    itemHeight: itemHeight,
+    virtual: virtual,
+    data: dropdownItems
+  };
+
+  var _useCheckInVirtual = VirtualList.useCheckInVirtual(virtualListProps),
+      inVirtual = _useCheckInVirtual.inVirtual;
+
   var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
-  return /*#__PURE__*/React__default['default'].createElement(context.CheckSelectProvider, {
+  return /*#__PURE__*/React__default["default"].createElement(context.CheckSelectProvider, {
     value: context$1
-  }, /*#__PURE__*/React__default['default'].createElement(picker.Picker, Object.assign({
+  }, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
     ref: ref,
     className: cls
   }, rootProps, {
@@ -290,15 +306,16 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onOpen: menuVisibleAction.on,
     onClose: menuVisibleAction.off,
     searchable: searchable,
+    scrollable: !inVirtual,
     onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
     loading: loading,
     footer: renderDefaultFooter(),
-    trigger: /*#__PURE__*/React__default['default'].createElement(tagInput.TagInputMock, {
+    trigger: /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, {
       clearable: clearable,
       placeholder: placeholder,
       // @ts-ignore
       displayRender: displayRender,
-      suffix: menuVisible ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null),
+      suffix: menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
       focused: menuVisible,
       appearance: appearance,
       value: value,
@@ -327,6 +344,7 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         expandedViewRef.current = 'normal';
       },
       expandable: showOnlyShowChecked,
+      activeExpandable: activeExpandable,
       onExpand: function onExpand(evt) {
         if (!showOnlyShowChecked) return;
         if (disabled) return; // 阻止冒泡触发外层 onClick
@@ -350,18 +368,14 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         expandedViewRef.current = 'onlyChecked';
       }
     })
-  }), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default['default'].createElement(VirtualList__default['default'], {
+  }), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default["default"].createElement(VirtualList__default["default"], Object.assign({
     itemKey: "id",
-    fullHeight: false,
-    height: height,
-    itemHeight: itemHeight,
-    virtual: virtual,
-    data: dropdownItems
-  }, function (node) {
+    fullHeight: false
+  }, virtualListProps), function (node) {
     /* 反向 map，搜索删选数据时会对数据进行处理 */
-    return 'groupTitle' in node ? /*#__PURE__*/React__default['default'].createElement(CheckSelectOptionGroup, {
+    return 'groupTitle' in node ? /*#__PURE__*/React__default["default"].createElement(CheckSelectOptionGroup, {
       label: node.groupTitle
-    }) : /*#__PURE__*/React__default['default'].createElement(CheckSelectOption, {
+    }) : /*#__PURE__*/React__default["default"].createElement(CheckSelectOption, {
       option: node,
       depth: node.depth,
       titleRender: proxyTitleRender
@@ -411,14 +425,14 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var renderTitle = React.useCallback(function (node, titleRender) {
     // 如果 titleRender 返回 `true`，则使用默认 title
     var title = titleRender ? titleRender(node) : true;
-    return /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       className: prefixCls + "__title"
-    }, title === true ? /*#__PURE__*/React__default['default'].createElement(Checkbox__default['default'], {
+    }, title === true ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
       checked: node.checked,
       disabled: node.disabled
     }, node.title) : title);
   }, [prefixCls]);
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     className: cls
   }, rest, {
@@ -445,10 +459,10 @@ var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       rest = tslib.__rest(_a, ["prefixCls", "className", "label"]);
 
   var cls = classname.cx(prefixCls, className);
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     className: cls
-  }, rest), /*#__PURE__*/React__default['default'].createElement("span", null, label));
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label));
 }); // @ts-ignore
 
 CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';
@@ -462,13 +476,13 @@ if (env.__DEV__) {
 
 
 var renderIndent = function renderIndent(prefixCls, depth) {
-  return times.times(depth, function (index) {
-    return /*#__PURE__*/React__default['default'].createElement("span", {
+  return arrayUtils.times(depth, function (index) {
+    return /*#__PURE__*/React__default["default"].createElement("span", {
       key: index,
       style: {
         alignSelf: 'stretch'
       }
-    }, /*#__PURE__*/React__default['default'].createElement("span", {
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: classname.cx(prefixCls + "__indent")
     }));
   });
@@ -477,4 +491,3 @@ var renderIndent = function renderIndent(prefixCls, depth) {
 exports.CheckSelect = CheckSelect;
 exports.CheckSelectOption = CheckSelectOption;
 exports.CheckSelectOptionGroup = CheckSelectOptionGroup;
-//# sourceMappingURL=CheckSelect.js.map

package/lib/cjs/context.js

@@ -30,4 +30,3 @@ var useCheckSelectContext = function useCheckSelectContext() {
 
 exports.CheckSelectProvider = CheckSelectProvider;
 exports.useCheckSelectContext = useCheckSelectContext;
-//# sourceMappingURL=context.js.map

package/lib/cjs/hooks/use-data.js

@@ -101,4 +101,3 @@ var parseOptionGroup = function parseOptionGroup(node) {
 
 exports.parseChildren = parseChildren;
 exports.useData = useData;
-//# sourceMappingURL=use-data.js.map

package/lib/cjs/hooks/use-flatten-data.js

@@ -75,4 +75,3 @@ var flattenData = function flattenData(_ref2) {
 
 exports.flattenData = flattenData;
 exports.useFlattenData = useFlattenData;
-//# sourceMappingURL=use-flatten-data.js.map

package/lib/cjs/index.js

@@ -21,4 +21,3 @@ exports.CheckSelect = CheckSelect.CheckSelect;
 exports.CheckSelectOption = CheckSelect.CheckSelectOption;
 exports.CheckSelectOptionGroup = CheckSelect.CheckSelectOptionGroup;
 exports["default"] = CheckSelect.CheckSelect;
-//# sourceMappingURL=index.js.map

package/lib/cjs/styles/index.scss.js

@@ -12,11 +12,10 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-check-select-option {\n  margin-top: 4px;\n  margin-top: var(--hi-v4-spacing-2, 4px);\n  margin-bottom: 4px;\n  margin-bottom: var(--hi-v4-spacing-2, 4px);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  width: 100%;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  border-radius: 4px;\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  font-weight: 400;\n  font-weight: var(--hi-v4-text-weight-normal, 400);\n  color: #1f2733;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  line-height: 1.25rem;\n  line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-check-select-option__indent {\n    display: inline-block;\n    width: 16px;\n    height: 100%; }\n.hi-v4-check-select-option__title {\n    display: inline-block;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    width: 100%;\n    padding: 6px;\n    padding: var(--hi-v4-spacing-3, 6px);\n    font-size: inherit;\n    font-weight: inherit;\n    color: inherit;\n    line-height: inherit; }\n.hi-v4-check-select-option:hover {\n    background-color: #f2f4f7;\n    background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--focused {\n    background-color: #f2f4f7;\n    background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--disabled {\n    cursor: not-allowed;\n    color: #929aa6;\n    color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-check-select-option-group {\n  display: inline-block;\n  margin-top: 12px;\n  margin-top: var(--hi-v4-spacing-6, 12px);\n  margin-bottom: 4px;\n  margin-bottom: var(--hi-v4-spacing-2, 4px);\n  padding: 6px 0 6px 6px;\n  padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  font-weight: 400;\n  font-weight: var(--hi-v4-text-weight-normal, 400);\n  color: #929aa6;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  line-height: 1.25rem;\n  line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-check-select-option-group:first-child {\n    margin-top: 4px;\n    margin-top: var(--hi-v4-spacing-2, 4px); }\n";
+var css_248z = ".hi-v4-check-select-option {margin-top: var(--hi-v4-spacing-2, 4px);margin-bottom: var(--hi-v4-spacing-2, 4px);-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v4-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-check-select-option__indent {display: inline-block;width: 16px;height: 100%; }.hi-v4-check-select-option__title {display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: var(--hi-v4-spacing-3, 6px);font-size: inherit;font-weight: inherit;color: inherit;line-height: inherit; }.hi-v4-check-select-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-check-select-option--focused {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-check-select-option-group {display: inline-block;margin-top: var(--hi-v4-spacing-6, 12px);margin-bottom: var(--hi-v4-spacing-2, 4px);padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-check-select-option-group:first-child {margin-top: var(--hi-v4-spacing-2, 4px); }";
 
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 
 exports["default"] = css_248z;
-//# sourceMappingURL=index.scss.js.map

package/lib/cjs/use-check-select.js

@@ -19,7 +19,7 @@ var React = require('react');
 
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 
-var uniqBy = require('./node_modules/lodash/uniqBy.js');
+var arrayUtils = require('@hi-ui/array-utils');
 
 var useCheck = require('@hi-ui/use-check');
 
@@ -65,33 +65,34 @@ var useCheckSelect = function useCheckSelect(_a) {
       tryChangeValue = _useUncontrolledState[1];
 
   var onSelectLatest = useLatest.useLatestCallback(onSelect);
-  var selectedItemsRef = React.useRef([]);
+  var usedItemsRef = React.useRef([]); // 扁平化的选中数据，可能包括异步临时选中缓存数据
+
+  var _useState = React.useState([]),
+      checkedItems = _useState[0],
+      setCheckedItems = _useState[1];
+
   var proxyTryChangeValue = React.useCallback(function (value, item, shouldChecked) {
     var changedItems = item;
 
     if (!Array.isArray(item)) {
       changedItems = [item];
-
-      if (shouldChecked) {
-        selectedItemsRef.current.push(item);
-      }
-
       onSelectLatest(value, item, shouldChecked);
     }
 
-    var selectedItems = uniqBy['default']([].concat(changedItems, selectedItemsRef.current, flattedDataRef.current), 'id'); // 调用用户的select
+    var usedItems = arrayUtils.uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
+    usedItemsRef.current = usedItems; // 使用最新的value
 
-    var checkedItems = selectedItems // 使用最新的value
-    .filter(function (item) {
+    var nextCheckedItems = usedItems.filter(function (item) {
       return value.includes(item.id);
-    }).map(function (item) {
-      return 'raw' in item ? item.raw : item;
     });
-    tryChangeValue(value, // TODO: 处理脏数据
+    setCheckedItems(nextCheckedItems);
+    tryChangeValue(value, // 处理脏数据
     changedItems.map(function (item) {
       return 'raw' in item ? item.raw : item;
-    }), checkedItems);
-  }, [tryChangeValue, onSelectLatest, flattedDataRef, selectedItemsRef]);
+    }), nextCheckedItems.map(function (item) {
+      return 'raw' in item ? item.raw : item;
+    }));
+  }, [tryChangeValue, onSelectLatest, flattedDataRef, usedItemsRef]);
 
   var _useCheckDefault = useCheck.useCheck({
     disabled: disabled,
@@ -109,7 +110,8 @@ var useCheckSelect = function useCheckSelect(_a) {
     value: value,
     tryChangeValue: proxyTryChangeValue,
     onSelect: onOptionCheck,
-    isCheckedId: isCheckedId
+    isCheckedId: isCheckedId,
+    checkedItems: checkedItems
   };
 };
 
@@ -118,4 +120,3 @@ var allowCheck = function allowCheck(option) {
 };
 
 exports.useCheckSelect = useCheckSelect;
-//# sourceMappingURL=use-check-select.js.map

package/lib/cjs/utils/index.js

@@ -0,0 +1,52 @@
+/** @LICENSE
+ * @hi-ui/check-select
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+/**
+ * 判断选项是否进行可选操作
+ */
+
+var isCheckableOption = function isCheckableOption(item) {
+  if ('groupTitle' in item) return false;
+  if (item.disabled) return false;
+  return true;
+};
+/**
+ * 判断选项为
+ */
+
+
+var isOption = function isOption(item) {
+  if ('groupTitle' in item) return false;
+  return true;
+};
+
+var getAllCheckedStatus = function getAllCheckedStatus(dropdownItems, values, filterFunc) {
+  var dropdownIds = dropdownItems.filter(filterFunc).map(function (_ref) {
+    var id = _ref.id;
+    return id;
+  });
+  var dropdownIdsSet = new Set(dropdownIds);
+  var hasValue = false;
+  values.forEach(function (id) {
+    if (dropdownIdsSet.has(id)) {
+      hasValue = true;
+      dropdownIdsSet["delete"](id);
+    }
+  });
+  return [hasValue && dropdownIdsSet.size === 0, hasValue && dropdownIdsSet.size > 0];
+};
+
+exports.getAllCheckedStatus = getAllCheckedStatus;
+exports.isCheckableOption = isCheckableOption;
+exports.isOption = isOption;