@hi-ui/check-select 4.0.0-beta.3 → 4.0.0-beta.32

package/lib/esm/CheckSelect.js

@@ -8,21 +8,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useCallback, useState, useMemo } 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 { Picker } from '@hi-ui/picker';
-import { uniqBy } from 'lodash';
+import { uniqBy } from '@hi-ui/array-utils';
 import { Highlighter } from '@hi-ui/highlighter';
-import { useToggle } from '@hi-ui/use-toggle';
+import { useUncontrolledToggle } from '@hi-ui/use-toggle';
 import { times } from '@hi-ui/times';
 import { callAllFuncs } from '@hi-ui/func-utils';
 import { useLocaleContext } from '@hi-ui/locale-context';
@@ -60,6 +60,8 @@ 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,
+      onOpen = _a.onOpen,
+      onClose = _a.onClose,
       appearance = _a.appearance,
       invalid = _a.invalid,
       dataSource = _a.dataSource,
@@ -70,14 +72,18 @@ 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", "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({
+    disabled: disabled,
+    onOpen: onOpen,
+    onClose: onClose
+  }),
+      menuVisible = _useUncontrolledToggl[0],
+      menuVisibleAction = _useUncontrolledToggl[1];
 
   var displayRender = useCallback(function (item) {
     if (isFunction(displayRenderProp)) {
@@ -85,34 +91,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,18 +160,19 @@ 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) {
@@ -201,23 +194,47 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       allChecked = _useMemo[0],
       indeterminate = _useMemo[1];
 
+  var valueLatestRef = useLatestRef(value);
   var toggleCheckAll = useCallback(function (showChecked) {
-    var checkedItems = mergedData.filter(function (item) {
-      return value.includes(item.id);
-    });
+    var value = valueLatestRef.current; // 当前页的数据选项
+
     var items = dropdownItems.filter(function (item) {
       return !('groupTitle' in item);
     });
+    var targetIds = items.map(function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    });
+    var allData = uniqBy(items.concat(mergedData), 'id');
 
     if (showChecked) {
-      tryChangeValue(items.map(function (_ref2) {
-        var id = _ref2.id;
-        return id;
-      }), checkedItems, showChecked);
+      var nextCheckedIds = Array.from(new Set(value.concat(targetIds)));
+      var changedIds = nextCheckedIds.filter(function (id) {
+        return !value.includes(id);
+      });
+      var changedItems = allData.filter(function (_ref3) {
+        var id = _ref3.id;
+        return changedIds.includes(id);
+      });
+      tryChangeValue(nextCheckedIds, changedItems, showChecked);
     } 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 (_ref4) {
+        var id = _ref4.id;
+        return _changedIds.includes(id);
+      }); // items
+
+
+      tryChangeValue(_nextCheckedIds, _changedItems, showChecked);
     }
-  }, [dropdownItems, mergedData, value, tryChangeValue]);
+  }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
 
   var renderDefaultFooter = function renderDefaultFooter() {
     var extra = renderExtraFooter ? renderExtraFooter() : null;
@@ -235,6 +252,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     return extra;
   };
 
+  var expandedViewRef = useRef('normal');
   var cls = cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
   return /*#__PURE__*/React.createElement(CheckSelectProvider, {
     value: context
@@ -243,16 +261,8 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: cls
   }, rootProps, {
     visible: menuVisible,
-    onOpen: function onOpen() {
-      if (showOnlyShowChecked) {
-        if (filterItems) {
-          setFilterItems(null);
-        }
-      }
-
-      menuVisibleAction.on();
-    },
     disabled: disabled,
+    onOpen: menuVisibleAction.on,
     onClose: menuVisibleAction.off,
     searchable: searchable,
     onSearch: callAllFuncs(onSearchProp, onSearch),
@@ -271,16 +281,49 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       onChange: tryChangeValue,
       data: mergedData,
       invalid: invalid,
-      onExpand: function onExpand() {
-        if (showOnlyShowChecked) {
-          setFilterItems(function () {
-            return mergedData.filter(function (item) {
-              return value.includes(item.id);
-            });
+      onClick: function onClick(evt) {
+        if (!showOnlyShowChecked) return;
+        if (disabled) return; // 阻止 Picker 调用 onOpen/onClose
+
+        evt.preventDefault();
+
+        if (filterItems) {
+          setFilterItems(null);
+        }
+
+        if (menuVisible) {
+          if (expandedViewRef.current === 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
+        }
+
+        expandedViewRef.current = 'normal';
+      },
+      expandable: showOnlyShowChecked,
+      activeExpandable: activeExpandable,
+      onExpand: function onExpand(evt) {
+        if (!showOnlyShowChecked) return;
+        if (disabled) return; // 阻止冒泡触发外层 onClick
+
+        evt.stopPropagation();
+        evt.preventDefault();
+        setFilterItems(function () {
+          return mergedData.filter(function (item) {
+            return value.includes(item.id);
           });
+        });
+
+        if (menuVisible) {
+          if (expandedViewRef.current !== 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
         }
 
-        menuVisibleAction.on();
+        expandedViewRef.current = 'onlyChecked';
       }
     })
   }), isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React.createElement(VirtualList, {
@@ -408,4 +451,3 @@ var renderIndent = function renderIndent(prefixCls, depth) {
 };
 
 export { CheckSelect, CheckSelectOption, CheckSelectOptionGroup };
-//# sourceMappingURL=CheckSelect.js.map

package/lib/esm/context.js

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

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

@@ -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

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

package/lib/esm/index.js

@@ -9,4 +9,3 @@
  */
 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

@@ -7,11 +7,9 @@
  * 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: 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 __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

@@ -8,9 +8,9 @@
  * 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 'lodash';
+import { uniqBy } from '@hi-ui/array-utils';
 import { useCheck } from '@hi-ui/use-check';
 import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
 import { useData } from './hooks/use-data.js';
@@ -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/types/CheckSelect.d.ts

@@ -1,7 +1,7 @@
 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';
 /**
@@ -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[]>;
     /**
      * 自定义下拉菜单底部渲染
      */

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/types.d.ts

@@ -1,29 +1,30 @@
 import React from 'react';
+import type { HiBaseAppearanceEnum } from '@hi-ui/core';
 export interface CheckSelectDataItem {
     /**
-     * 节点唯一 id
+     * 选择项值，唯一 id
      */
     id?: React.ReactText;
     /**
-     * 节点标题
+     * 选项标题
      */
     title?: React.ReactNode;
     /**
-     * 是否禁用该节点
+     * 是否禁用该选项
      */
     disabled?: boolean;
 }
 export interface CheckSelectGroupDataItem {
     /**
-     * 节点组标题
+     * 选项组标题
      */
     groupTitle?: React.ReactNode;
     /**
-     * 是否禁用该节点
+     * 组选项列表
      */
     children?: CheckSelectDataItem[];
 }
-export declare type CheckSelectMergedItem = CheckSelectDataItem & CheckSelectGroupDataItem;
+export declare type CheckSelectMergedItem = CheckSelectDataItem | CheckSelectGroupDataItem;
 export interface CheckSelectRequiredProps {
     checked: boolean;
     focused: boolean;
@@ -46,5 +47,6 @@ export interface FlattedCheckSelectDataItem extends CheckSelectDataItem {
      */
     parent?: FlattedCheckSelectDataItem;
 }
-export interface CheckSelectEventData extends FlattedCheckSelectDataItem, CheckSelectRequiredProps {
+export interface CheckSelectItemEventData extends FlattedCheckSelectDataItem, CheckSelectRequiredProps {
 }
+export declare type CheckSelectAppearanceEnum = HiBaseAppearanceEnum | undefined;

package/lib/types/use-check-select.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { CheckSelectDataItem, CheckSelectEventData } from './types';
-import { HiBaseFieldNames } from '@hi-ui/core';
+import { CheckSelectDataItem, CheckSelectItemEventData, CheckSelectMergedItem } from './types';
 export declare const useCheckSelect: ({ data: dataProp, children, disabled, value: valueProp, defaultValue, onChange: onChangeProp, onSelect, fieldNames, ...rest }: UseCheckSelectProps) => {
     rootProps: {};
     data: any[];
     flattedData: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
     value: React.ReactText[];
-    tryChangeValue: (value: React.ReactText[], item: CheckSelectEventData | CheckSelectEventData[], shouldChecked: boolean) => void;
+    tryChangeValue: (value: React.ReactText[], item: CheckSelectItemEventData | CheckSelectItemEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("@hi-ui/use-check").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: React.ReactText) => boolean;
+    checkedItems: CheckSelectItemEventData[];
 };
 export interface UseCheckSelectProps {
     /**
@@ -25,12 +25,12 @@ export interface UseCheckSelectProps {
      * changedItems: 变更的选项集合
      * checkedItems：所有选中项的选项集合
      */
-    onChange?: (value: React.ReactText[], changedItems?: CheckSelectDataItem[], checkedItems?: CheckSelectDataItem[]) => void;
+    onChange?: (value: React.ReactText[], changedItems: CheckSelectDataItem[], checkedItems: CheckSelectDataItem[]) => void;
     /**
      * 选中值时回调。暂不对外暴露
      * @private
      */
-    onSelect?: (value: React.ReactText[], targetOption: CheckSelectEventData, shouldChecked: boolean) => void;
+    onSelect?: (value: React.ReactText[], targetOption: CheckSelectItemEventData, shouldChecked: boolean) => void;
     /**
      * 是否禁止使用
      */
@@ -38,7 +38,7 @@ export interface UseCheckSelectProps {
     /**
      * 选项数据
      */
-    data?: CheckSelectDataItem[];
+    data?: CheckSelectMergedItem[];
     /**
      * JSX 子节点
      */
@@ -46,6 +46,6 @@ export interface UseCheckSelectProps {
     /**
      * 设置 data 中 id, title, disabled, children 对应的 key
      */
-    fieldNames?: HiBaseFieldNames;
+    fieldNames?: Record<string, string>;
 }
 export declare type UseSelectReturn = ReturnType<typeof useCheckSelect>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-select",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.32",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,40 +43,40 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/checkbox": "^4.0.0-beta.0",
+    "@hi-ui/array-utils": "^4.0.0-beta.8",
+    "@hi-ui/checkbox": "^4.0.0-beta.13",
     "@hi-ui/classname": "^4.0.0-beta.0",
-    "@hi-ui/core": "^4.0.0-beta.0",
-    "@hi-ui/core-css": "^4.0.0-beta.0",
-    "@hi-ui/env": "^4.0.0-beta.0",
-    "@hi-ui/func-utils": "^4.0.0-beta.0",
-    "@hi-ui/highlighter": "^4.0.0-beta.0",
-    "@hi-ui/icons": "^4.0.0-beta.0",
-    "@hi-ui/input": "^4.0.0-beta.0",
-    "@hi-ui/locale-context": "^4.0.0-beta.1",
-    "@hi-ui/picker": "^4.0.0-beta.2",
-    "@hi-ui/popper": "^4.0.0-beta.0",
-    "@hi-ui/tag-input": "^4.0.0-beta.1",
-    "@hi-ui/times": "^4.0.0-beta.0",
-    "@hi-ui/tree-utils": "^4.0.0-beta.0",
-    "@hi-ui/type-assertion": "^4.0.0-beta.0",
-    "@hi-ui/use-check": "^4.0.0-beta.0",
-    "@hi-ui/use-children": "^4.0.0-beta.0",
-    "@hi-ui/use-data-source": "^4.0.0-beta.0",
-    "@hi-ui/use-latest": "^4.0.0-beta.0",
-    "@hi-ui/use-search-mode": "^4.0.0-beta.1",
-    "@hi-ui/use-toggle": "^4.0.0-beta.0",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.0",
-    "lodash": "^4.17.21",
-    "rc-virtual-list": "^3.4.1"
+    "@hi-ui/core": "^4.0.0-beta.9",
+    "@hi-ui/core-css": "^4.0.0-beta.5",
+    "@hi-ui/env": "^4.0.0-beta.1",
+    "@hi-ui/func-utils": "^4.0.0-beta.13",
+    "@hi-ui/highlighter": "^4.0.0-beta.10",
+    "@hi-ui/icons": "^4.0.0-beta.11",
+    "@hi-ui/input": "^4.0.0-beta.16",
+    "@hi-ui/locale-context": "^4.0.0-beta.19",
+    "@hi-ui/picker": "^4.0.0-beta.25",
+    "@hi-ui/popper": "^4.0.0-beta.15",
+    "@hi-ui/tag-input": "^4.0.0-beta.19",
+    "@hi-ui/times": "^4.0.0-beta.6",
+    "@hi-ui/tree-utils": "^4.0.0-beta.5",
+    "@hi-ui/type-assertion": "^4.0.0-beta.5",
+    "@hi-ui/use-check": "^4.0.0-beta.5",
+    "@hi-ui/use-children": "^4.0.0-beta.5",
+    "@hi-ui/use-data-source": "^4.0.0-beta.6",
+    "@hi-ui/use-latest": "^4.0.0-beta.5",
+    "@hi-ui/use-search-mode": "^4.0.0-beta.20",
+    "@hi-ui/use-toggle": "^4.0.0-beta.5",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
+    "rc-virtual-list": "^3.4.7"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-beta.0",
+    "@hi-ui/hi-build": "^4.0.0-beta.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "a4fea8a5a1e2b1c7402aa947e6ae08af66527743"
+  "gitHead": "ef96654e009a72c3445d8df4a4182973631d00e9"
 }