@hi-ui/check-select 4.0.0-beta.7 → 4.0.0

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;

package/lib/esm/CheckSelect.js

@@ -2,33 +2,33 @@
  * @hi-ui/check-select
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useCallback, useState, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState, useRef } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useCheckSelect } from './use-check-select.js';
 import { UpOutlined, DownOutlined } from '@hi-ui/icons';
 import { CheckSelectProvider, useCheckSelectContext } from './context.js';
-import { useLatestCallback, useLatestRef } from '@hi-ui/use-latest';
+import { useLatestRef } from '@hi-ui/use-latest';
 import Checkbox from '@hi-ui/checkbox';
 import { TagInputMock } from '@hi-ui/tag-input';
 import { isUndef, isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion';
-import VirtualList from 'rc-virtual-list';
+import VirtualList, { useCheckInVirtual } from '@hi-ui/virtual-list';
 import { Picker } from '@hi-ui/picker';
-import { uniqBy } from '@hi-ui/array-utils';
+import { uniqBy, times } from '@hi-ui/array-utils';
 import { Highlighter } from '@hi-ui/highlighter';
-import { useToggle } from '@hi-ui/use-toggle';
-import { times } from '@hi-ui/times';
+import { useUncontrolledToggle } from '@hi-ui/use-toggle';
 import { callAllFuncs } from '@hi-ui/func-utils';
-import { useLocaleContext } from '@hi-ui/locale-context';
+import { useLocaleContext } from '@hi-ui/core';
 import { useAsyncSearch, useTreeCustomSearch, useFilterSearch, useSearchMode } from '@hi-ui/use-search-mode';
 import '@hi-ui/use-children';
 import { flattenData } from './hooks/use-flatten-data.js';
+import { getAllCheckedStatus, isCheckableOption, isOption } from './utils/index.js';
 var _role = 'check-select';
 
 var _prefix = getPrefixCls(_role);
@@ -60,6 +60,9 @@ var CheckSelect = /*#__PURE__*/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,
@@ -70,14 +73,19 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       onSearchProp = _a.onSearch,
       _a$fieldNames = _a.fieldNames,
       fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
-      rest = __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 = __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 = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
 
-  var _useToggle = useToggle(),
-      menuVisible = _useToggle[0],
-      menuVisibleAction = _useToggle[1];
+  var _useUncontrolledToggl = useUncontrolledToggle({
+    visible: visible,
+    disabled: disabled,
+    onOpen: onOpen,
+    onClose: onClose
+  }),
+      menuVisible = _useUncontrolledToggl[0],
+      menuVisibleAction = _useUncontrolledToggl[1];
 
   var displayRender = useCallback(function (item) {
     if (isFunction(displayRenderProp)) {
@@ -85,34 +93,20 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
 
     return item.title;
-  }, [displayRenderProp]); // 搜索时临时选中缓存数据
-
-  var _useState = useState([]),
-      selectedItems = _useState[0],
-      setSelectedItems = _useState[1];
-
-  var onSelect = 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(Object.assign(Object.assign({}, rest), {
     children: children,
     fieldNames: fieldNames,
-    onSelect: onSelect
+    onSelect: onSelectProp
   })),
       rootProps = _b.rootProps,
       context = __rest(_b, ["rootProps"]);
 
   var value = context.value,
       tryChangeValue = context.tryChangeValue,
-      flattedData = context.flattedData; // ************************** 搜索 ************************* //
+      flattedData = context.flattedData,
+      checkedItems = context.checkedItems; // ************************** 搜索 ************************* //
 
   var _c = useAsyncSearch({
     dataSource: dataSource,
@@ -168,67 +162,79 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var shouldUseSearch = !!searchValue && !hasError;
   var showData = useMemo(function () {
     return shouldUseSearch ? stateInSearch.data : flattedData;
-  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 下拉菜单不能合并（因为树形数据，不知道是第几级）
+  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 根据 id 进行合并，注意必须是扁平数据
 
   var mergedData = useMemo(function () {
-    var nextData = selectedItems.concat(flattedData);
+    var nextData = checkedItems.concat(flattedData);
     return uniqBy(nextData, 'id');
-  }, [selectedItems, flattedData]);
+  }, [checkedItems, flattedData]);
 
-  var _useState2 = useState(null),
-      filterItems = _useState2[0],
-      setFilterItems = _useState2[1];
+  var _useState = useState(null),
+      filterItems = _useState[0],
+      setFilterItems = _useState[1];
 
   var dropdownItems = filterItems || showData;
+  var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
 
   var _useMemo = 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 getAllCheckedStatus(dropdownItems, value, isOption);
   }, [dropdownItems, value]),
-      allChecked = _useMemo[0],
-      indeterminate = _useMemo[1];
+      showAllChecked = _useMemo[0],
+      showIndeterminate = _useMemo[1];
 
-  var toggleCheckAll = 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 = useLatestRef(value);
+  var toggleCheckAll = useCallback(function () {
+    var value = valueLatestRef.current;
+
+    var _getAllCheckedStatus = getAllCheckedStatus(dropdownItems, value, isCheckableOption),
+        currentAllChecked = _getAllCheckedStatus[0];
+
+    var shouldChecked = !currentAllChecked; // 当前页的数据选项
+
+    var items = dropdownItems.filter(isCheckableOption);
+    var targetIds = items.map(function (_ref) {
+      var id = _ref.id;
+      return id;
     });
+    var allData = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
-        indeterminate: indeterminate,
-        checked: allChecked,
-        onChange: function onChange(evt) {
-          toggleCheckAll(evt.target.checked);
-        }
+        indeterminate: showIndeterminate,
+        checked: showAllChecked,
+        onChange: toggleCheckAll
       }, i18n.get('checkSelect.checkAll')), extra);
     }
 
@@ -236,6 +242,16 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   };
 
   var expandedViewRef = useRef('normal');
+  var virtualListProps = {
+    height: height,
+    itemHeight: itemHeight,
+    virtual: virtual,
+    data: dropdownItems
+  };
+
+  var _useCheckInVirtual = useCheckInVirtual(virtualListProps),
+      inVirtual = _useCheckInVirtual.inVirtual;
+
   var cls = cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
   return /*#__PURE__*/React.createElement(CheckSelectProvider, {
     value: context
@@ -248,6 +264,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     onOpen: menuVisibleAction.on,
     onClose: menuVisibleAction.off,
     searchable: searchable,
+    scrollable: !inVirtual,
     onSearch: callAllFuncs(onSearchProp, onSearch),
     loading: loading,
     footer: renderDefaultFooter(),
@@ -285,6 +302,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
         expandedViewRef.current = 'normal';
       },
       expandable: showOnlyShowChecked,
+      activeExpandable: activeExpandable,
       onExpand: function onExpand(evt) {
         if (!showOnlyShowChecked) return;
         if (disabled) return; // 阻止冒泡触发外层 onClick
@@ -308,14 +326,10 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
         expandedViewRef.current = 'onlyChecked';
       }
     })
-  }), isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React.createElement(VirtualList, {
+  }), isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React.createElement(VirtualList, 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.createElement(CheckSelectOptionGroup, {
       label: node.groupTitle
@@ -433,4 +447,3 @@ var renderIndent = function renderIndent(prefixCls, depth) {
 };
 
 export { CheckSelect, CheckSelectOption, CheckSelectOptionGroup };
-//# sourceMappingURL=CheckSelect.js.map

package/lib/esm/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/check-select
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
@@ -22,4 +22,3 @@ var useCheckSelectContext = function useCheckSelectContext() {
 };
 
 export { CheckSelectProvider, useCheckSelectContext };
-//# sourceMappingURL=context.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/check-select
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
@@ -91,4 +91,3 @@ var parseOptionGroup = function parseOptionGroup(node) {
 };
 
 export { parseChildren, useData };
-//# sourceMappingURL=use-data.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/check-select
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
@@ -66,4 +66,3 @@ var flattenData = function flattenData(_ref2) {
 };
 
 export { flattenData, useFlattenData };
-//# sourceMappingURL=use-flatten-data.js.map

package/lib/esm/index.js

@@ -2,11 +2,10 @@
  * @hi-ui/check-select
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
  */
 import './styles/index.scss.js';
 export { CheckSelect, CheckSelectOption, CheckSelectOptionGroup, CheckSelect as default } from './CheckSelect.js';
-//# sourceMappingURL=index.js.map

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

@@ -2,16 +2,14 @@
  * @hi-ui/check-select
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
  */
-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: var(--hi-v4-spacing-2, 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: var(--hi-v4-border-radius-normal, 4px);\n  cursor: pointer;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  font-weight: var(--hi-v4-text-weight-normal, 400);\n  color: var(--hi-v4-color-gray-700, #1f2733);\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: 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: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--focused {\n    background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--disabled {\n    cursor: not-allowed;\n    color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-check-select-option-group {\n  display: inline-block;\n  margin-top: var(--hi-v4-spacing-6, 12px);\n  margin-bottom: var(--hi-v4-spacing-2, 4px);\n  padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  font-weight: var(--hi-v4-text-weight-normal, 400);\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-check-select-option-group:first-child {\n    margin-top: var(--hi-v4-spacing-2, 4px); }\n";
-
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+import __styleInject__ from 'inject-head-style';
+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); }";
 
 __styleInject__(css_248z);
 
-export default css_248z;
-//# sourceMappingURL=index.scss.js.map
+export { css_248z as default };

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

@@ -2,13 +2,13 @@
  * @hi-ui/check-select
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
  */
 import { __rest } from 'tslib';
-import { useRef, useCallback } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { uniqBy } from '@hi-ui/array-utils';
 import { useCheck } from '@hi-ui/use-check';
@@ -49,33 +49,34 @@ var useCheckSelect = function useCheckSelect(_a) {
       tryChangeValue = _useUncontrolledState[1];
 
   var onSelectLatest = useLatestCallback(onSelect);
-  var selectedItemsRef = useRef([]);
+  var usedItemsRef = useRef([]); // 扁平化的选中数据，可能包括异步临时选中缓存数据
+
+  var _useState = useState([]),
+      checkedItems = _useState[0],
+      setCheckedItems = _useState[1];
+
   var proxyTryChangeValue = 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([].concat(changedItems, selectedItemsRef.current, flattedDataRef.current), 'id'); // 调用用户的select
+    var usedItems = 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({
     disabled: disabled,
@@ -93,7 +94,8 @@ var useCheckSelect = function useCheckSelect(_a) {
     value: value,
     tryChangeValue: proxyTryChangeValue,
     onSelect: onOptionCheck,
-    isCheckedId: isCheckedId
+    isCheckedId: isCheckedId,
+    checkedItems: checkedItems
   };
 };
 
@@ -102,4 +104,3 @@ var allowCheck = function allowCheck(option) {
 };
 
 export { useCheckSelect };
-//# sourceMappingURL=use-check-select.js.map

package/lib/esm/utils/index.js

@@ -0,0 +1,45 @@
+/** @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.
+ */
+
+/**
+ * 判断选项是否进行可选操作
+ */
+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];
+};
+
+export { getAllCheckedStatus, isCheckableOption, isOption };

package/lib/types/CheckSelect.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { UseCheckSelectProps } from './use-check-select';
-import type { HiBaseAppearanceEnum, HiBaseHTMLProps } from '@hi-ui/core';
-import { CheckSelectDataItem, CheckSelectEventData } from './types';
+import type { HiBaseHTMLProps } from '@hi-ui/core';
+import { CheckSelectAppearanceEnum, CheckSelectDataItem, CheckSelectItemEventData, CheckSelectMergedItem } from './types';
 import { PickerProps } from '@hi-ui/picker';
 import { UseDataSource } from '@hi-ui/use-data-source';
 /**
  * TODO: What is CheckSelect
  */
 export declare const CheckSelect: React.ForwardRefExoticComponent<CheckSelectProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheckSelectProps {
+export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrollable'>, UseCheckSelectProps {
     /**
      * 设置虚拟滚动容器的可视高度。暂不对外暴露
      * @private
@@ -31,10 +31,6 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheck
      * 是否可清空
      */
     clearable?: boolean;
-    /**
-     * 是否开启换行全展示
-     */
-    wrap?: boolean;
     /**
      * 是否点击清理 tags
      */
@@ -46,11 +42,11 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheck
     /**
      * 自定义渲染节点的 title 内容
      */
-    render?: (item: CheckSelectEventData) => React.ReactNode;
+    render?: (item: CheckSelectItemEventData) => React.ReactNode;
     /**
      * 自定义选择后触发器所展示的内容，只在 title 为字符串时有效
      */
-    displayRender?: (option: CheckSelectEventData) => React.ReactNode;
+    displayRender?: (option: CheckSelectItemEventData) => React.ReactNode;
     /**
      * 触发器输入框占位符
      */
@@ -58,7 +54,7 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheck
     /**
      * 设置展现形式
      */
-    appearance?: HiBaseAppearanceEnum;
+    appearance?: CheckSelectAppearanceEnum;
     /**
      * 节点搜索模式，仅在mode=normal模式下生效
      */
@@ -72,7 +68,7 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheck
     /**
      * 异步加载数据
      */
-    dataSource?: UseDataSource<CheckSelectDataItem>;
+    dataSource?: UseDataSource<CheckSelectMergedItem[]>;
     /**
      * 自定义下拉菜单底部渲染
      */
@@ -94,7 +90,7 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheck
      */
     onClose?: () => void;
     /**
-     * 是否开启全选功能
+     * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
      */
     showCheckAll?: boolean;
     /**

package/lib/types/context.d.ts

@@ -4,16 +4,18 @@ export declare const CheckSelectProvider: import("react").Provider<Omit<{
     data: any[];
     flattedData: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
     value: import("react").ReactText[];
-    tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectEventData | import("./types").CheckSelectEventData[], shouldChecked: boolean) => void;
+    tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectItemEventData | import("./types").CheckSelectItemEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: import("react").ReactText) => boolean;
+    checkedItems: import("./types").CheckSelectItemEventData[];
 }, "rootProps"> | null>;
 export declare const useCheckSelectContext: () => Omit<{
     rootProps: {};
     data: any[];
     flattedData: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
     value: import("react").ReactText[];
-    tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectEventData | import("./types").CheckSelectEventData[], shouldChecked: boolean) => void;
+    tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectItemEventData | import("./types").CheckSelectItemEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: import("react").ReactText) => boolean;
+    checkedItems: import("./types").CheckSelectItemEventData[];
 }, "rootProps">;

package/lib/types/index.d.ts

@@ -1,3 +1,4 @@
 import './styles/index.scss';
 export * from './CheckSelect';
 export { CheckSelect as default } from './CheckSelect';
+export * from './types';