@hi-ui/check-select 4.1.3 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/lib/cjs/CheckSelect.js +49 -18
  3. package/lib/cjs/styles/index.scss.js +2 -2
  4. package/lib/esm/CheckSelect.js +50 -20
  5. package/lib/esm/styles/index.scss.js +2 -2
  6. package/lib/types/CheckSelect.d.ts +6 -7
  7. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @hi-ui/check-select
2
2
 
3
+ ## 4.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#2600](https://github.com/XiaoMi/hiui/pull/2600) [`03ecca72b`](https://github.com/XiaoMi/hiui/commit/03ecca72bac72a1b042e96599b68c3317f0c3236) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: add size api
8
+
9
+ ## 4.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#2531](https://github.com/XiaoMi/hiui/pull/2531) [`0a9d90ac5`](https://github.com/XiaoMi/hiui/commit/0a9d90ac53bdf66aa2b83b698b58d2cdeb98d912) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 增加 tagInputProps API,支持显示内容高度自适应
14
+
15
+ ### Patch Changes
16
+
17
+ - [#2567](https://github.com/XiaoMi/hiui/pull/2567) [`bd5940eba`](https://github.com/XiaoMi/hiui/commit/bd5940eba7d7a80aa676f37bb804ea27544864d2) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 支持回车选中值
18
+
19
+ - Updated dependencies [[`bd5940eba`](https://github.com/XiaoMi/hiui/commit/bd5940eba7d7a80aa676f37bb804ea27544864d2), [`0a9d90ac5`](https://github.com/XiaoMi/hiui/commit/0a9d90ac53bdf66aa2b83b698b58d2cdeb98d912)]:
20
+ - @hi-ui/picker@4.1.1
21
+ - @hi-ui/popper@4.0.5
22
+ - @hi-ui/tag-input@4.0.6
23
+
3
24
  ## 4.1.3
4
25
 
5
26
  ### Patch Changes
package/lib/cjs/CheckSelect.js CHANGED
@@ -41,6 +41,8 @@ var VirtualList = require('@hi-ui/virtual-list');
41
41
 
42
42
  var picker = require('@hi-ui/picker');
43
43
 
44
+ var domUtils = require('@hi-ui/dom-utils');
45
+
44
46
  var arrayUtils = require('@hi-ui/array-utils');
45
47
 
46
48
  var highlighter = require('@hi-ui/highlighter');
@@ -77,7 +79,7 @@ var _prefix = classname.getPrefixCls(_role);
77
79
 
78
80
  var DEFAULT_FIELD_NAMES = {};
79
81
  /**
80
- * TODO: What is CheckSelect
82
+ * 多项选择器
81
83
  */
82
84
 
83
85
  var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -116,7 +118,11 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
116
118
  _a$fieldNames = _a.fieldNames,
117
119
  fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
118
120
  customRender = _a.customRender,
119
- 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", "customRender"]);
121
+ tagInputProps = _a.tagInputProps,
122
+ _a$size = _a.size,
123
+ size = _a$size === void 0 ? 'md' : _a$size,
124
+ onKeyDownProp = _a.onKeyDown,
125
+ 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", "customRender", "tagInputProps", "size", "onKeyDown"]);
120
126
 
121
127
  var i18n = core.useLocaleContext();
122
128
  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
@@ -149,7 +155,9 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
149
155
  var value = context$1.value,
150
156
  tryChangeValue = context$1.tryChangeValue,
151
157
  flattedData = context$1.flattedData,
152
- checkedItems = context$1.checkedItems; // ************************** 搜索 ************************* //
158
+ checkedItems = context$1.checkedItems,
159
+ onSelect = context$1.onSelect,
160
+ isCheckedId = context$1.isCheckedId; // ************************** 搜索 ************************* //
153
161
 
154
162
  var _c = useSearchMode.useAsyncSearch({
155
163
  dataSource: dataSource,
@@ -268,7 +276,31 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
268
276
 
269
277
  tryChangeValue(_nextCheckedIds, _changedItems, shouldChecked);
270
278
  }
271
- }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
279
+ }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]); // ************************** 回车选中处理 ************************* //
280
+
281
+ var defaultIndex = showData.findIndex(function (item) {
282
+ return !item.disabled;
283
+ });
284
+
285
+ var _useState2 = React.useState(defaultIndex),
286
+ focusedIndex = _useState2[0],
287
+ setFocusedIndex = _useState2[1];
288
+
289
+ var handleKeyDown = useLatest.useLatestCallback(function (evt) {
290
+ var key = evt.key;
291
+
292
+ if (key === 'Enter') {
293
+ var focusedItem = showData[focusedIndex];
294
+
295
+ if (focusedItem) {
296
+ onSelect(focusedItem, !isCheckedId(focusedItem.id));
297
+ }
298
+ }
299
+ }); // 更新 focused 索引
300
+
301
+ React.useEffect(function () {
302
+ setFocusedIndex(defaultIndex);
303
+ }, [defaultIndex, menuVisible]);
272
304
 
273
305
  var renderDefaultFooter = function renderDefaultFooter() {
274
306
  var extra = renderExtraFooter ? renderExtraFooter() : null;
@@ -315,12 +347,14 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
315
347
  disabled: disabled,
316
348
  onOpen: menuVisibleAction.on,
317
349
  onClose: menuVisibleAction.off,
350
+ onKeyDown: domUtils.mockDefaultHandlers(handleKeyDown, onKeyDownProp),
318
351
  searchable: searchable,
319
352
  scrollable: !inVirtual,
320
353
  onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
321
354
  loading: rest.loading !== undefined ? rest.loading : loading,
322
355
  footer: renderDefaultFooter(),
323
- trigger: customRender ? typeof customRender === 'function' ? customRender(checkedItems) : customRender : /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, {
356
+ trigger: customRender ? typeof customRender === 'function' ? customRender(checkedItems) : customRender : /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({}, tagInputProps, {
357
+ size: size,
324
358
  clearable: clearable,
325
359
  placeholder: placeholder,
326
360
  // @ts-ignore
@@ -377,19 +411,23 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
377
411
 
378
412
  expandedViewRef.current = 'onlyChecked';
379
413
  }
380
- })
414
+ }))
381
415
  }), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default["default"].createElement(VirtualList__default["default"], Object.assign({
382
416
  ref: listRef,
383
417
  itemKey: "id",
384
418
  fullHeight: false
385
- }, virtualListProps), function (node) {
419
+ }, virtualListProps), function (node, index) {
386
420
  /* 反向 map，搜索删选数据时会对数据进行处理 */
387
421
  return 'groupTitle' in node ? /*#__PURE__*/React__default["default"].createElement(CheckSelectOptionGroup, {
388
422
  label: node.groupTitle
389
423
  }) : /*#__PURE__*/React__default["default"].createElement(CheckSelectOption, {
390
424
  option: node,
391
425
  depth: node.depth,
392
- titleRender: proxyTitleRender
426
+ titleRender: proxyTitleRender,
427
+ onMouseEnter: function onMouseEnter() {
428
+ !node.disabled && setFocusedIndex(index);
429
+ },
430
+ focused: focusedIndex === index
393
431
  });
394
432
  }) : null));
395
433
  }); // @ts-ignore
@@ -401,10 +439,6 @@ if (env.__DEV__) {
401
439
  }
402
440
 
403
441
  var optionPrefix = classname.getPrefixCls('check-select-option');
404
- /**
405
- * TODO: What is CheckSelectOption
406
- */
407
-
408
442
  var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
409
443
  var _a$prefixCls2 = _a.prefixCls,
410
444
  prefixCls = _a$prefixCls2 === void 0 ? optionPrefix : _a$prefixCls2,
@@ -414,7 +448,8 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
414
448
  onClick = _a.onClick,
415
449
  titleRender = _a.titleRender,
416
450
  depth = _a.depth,
417
- rest = tslib.__rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth"]);
451
+ focused = _a.focused,
452
+ rest = tslib.__rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth", "focused"]);
418
453
 
419
454
  var _useCheckSelectContex = context.useCheckSelectContext(),
420
455
  isCheckedId = _useCheckSelectContex.isCheckedId,
@@ -428,7 +463,7 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
428
463
  disabled: disabled,
429
464
  checked: checked
430
465
  }));
431
- var cls = classname.cx(prefixCls, className, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled");
466
+ var cls = classname.cx(prefixCls, className, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled", focused && prefixCls + "--focused");
432
467
  var handleOptionCheck = React.useCallback(function (evt) {
433
468
  onSelect(option, !checked);
434
469
  onClick === null || onClick === void 0 ? void 0 : onClick(evt);
@@ -458,10 +493,6 @@ if (env.__DEV__) {
458
493
  }
459
494
 
460
495
  var optionGroupPrefix = classname.getPrefixCls('select-option-group');
461
- /**
462
- * TODO: What is CheckSelectOptionGroup
463
- */
464
-
465
496
  var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
466
497
  var _a$prefixCls3 = _a.prefixCls,
467
498
  prefixCls = _a$prefixCls3 === void 0 ? optionGroupPrefix : _a$prefixCls3,
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,9 +12,9 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- 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); }";
15
+ var css_248z = ".hi-v4-check-select-option {margin-top: var(--hi-v4-spacing-1, 2px);margin-bottom: var(--hi-v4-spacing-1, 2px);-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-2, 4px) var(--hi-v4-spacing-3, 6px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;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);}";
16
16
 
17
- var __styleInject__ = require('inject-head-style')["default"];
17
+ var __styleInject__ = require('style-inject')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
package/lib/esm/CheckSelect.js CHANGED
@@ -8,18 +8,19 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import { __rest } from 'tslib';
11
- import React, { forwardRef, useCallback, useMemo, useState, useRef, useEffect } from 'react';
11
+ import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useCheckSelect } from './use-check-select.js';
15
15
  import { UpOutlined, DownOutlined } from '@hi-ui/icons';
16
16
  import { CheckSelectProvider, useCheckSelectContext } from './context.js';
17
- import { useLatestRef } from '@hi-ui/use-latest';
17
+ import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
18
18
  import Checkbox from '@hi-ui/checkbox';
19
19
  import { TagInputMock } from '@hi-ui/tag-input';
20
20
  import { isUndef, isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion';
21
21
  import VirtualList, { useCheckInVirtual } from '@hi-ui/virtual-list';
22
22
  import { Picker } from '@hi-ui/picker';
23
+ import { mockDefaultHandlers } from '@hi-ui/dom-utils';
23
24
  import { uniqBy, times } from '@hi-ui/array-utils';
24
25
  import { Highlighter } from '@hi-ui/highlighter';
25
26
  import { useUncontrolledToggle } from '@hi-ui/use-toggle';
@@ -35,7 +36,7 @@ var _prefix = getPrefixCls(_role);
35
36
 
36
37
  var DEFAULT_FIELD_NAMES = {};
37
38
  /**
38
- * TODO: What is CheckSelect
39
+ * 多项选择器
39
40
  */
40
41
 
41
42
  var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -74,7 +75,11 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
74
75
  _a$fieldNames = _a.fieldNames,
75
76
  fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
76
77
  customRender = _a.customRender,
77
- 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", "customRender"]);
78
+ tagInputProps = _a.tagInputProps,
79
+ _a$size = _a.size,
80
+ size = _a$size === void 0 ? 'md' : _a$size,
81
+ onKeyDownProp = _a.onKeyDown,
82
+ 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", "customRender", "tagInputProps", "size", "onKeyDown"]);
78
83
 
79
84
  var i18n = useLocaleContext();
80
85
  var placeholder = isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
@@ -107,7 +112,9 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
107
112
  var value = context.value,
108
113
  tryChangeValue = context.tryChangeValue,
109
114
  flattedData = context.flattedData,
110
- checkedItems = context.checkedItems; // ************************** 搜索 ************************* //
115
+ checkedItems = context.checkedItems,
116
+ onSelect = context.onSelect,
117
+ isCheckedId = context.isCheckedId; // ************************** 搜索 ************************* //
111
118
 
112
119
  var _c = useAsyncSearch({
113
120
  dataSource: dataSource,
@@ -226,7 +233,31 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
226
233
 
227
234
  tryChangeValue(_nextCheckedIds, _changedItems, shouldChecked);
228
235
  }
229
- }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
236
+ }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]); // ************************** 回车选中处理 ************************* //
237
+
238
+ var defaultIndex = showData.findIndex(function (item) {
239
+ return !item.disabled;
240
+ });
241
+
242
+ var _useState2 = useState(defaultIndex),
243
+ focusedIndex = _useState2[0],
244
+ setFocusedIndex = _useState2[1];
245
+
246
+ var handleKeyDown = useLatestCallback(function (evt) {
247
+ var key = evt.key;
248
+
249
+ if (key === 'Enter') {
250
+ var focusedItem = showData[focusedIndex];
251
+
252
+ if (focusedItem) {
253
+ onSelect(focusedItem, !isCheckedId(focusedItem.id));
254
+ }
255
+ }
256
+ }); // 更新 focused 索引
257
+
258
+ useEffect(function () {
259
+ setFocusedIndex(defaultIndex);
260
+ }, [defaultIndex, menuVisible]);
230
261
 
231
262
  var renderDefaultFooter = function renderDefaultFooter() {
232
263
  var extra = renderExtraFooter ? renderExtraFooter() : null;
@@ -273,12 +304,14 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
273
304
  disabled: disabled,
274
305
  onOpen: menuVisibleAction.on,
275
306
  onClose: menuVisibleAction.off,
307
+ onKeyDown: mockDefaultHandlers(handleKeyDown, onKeyDownProp),
276
308
  searchable: searchable,
277
309
  scrollable: !inVirtual,
278
310
  onSearch: callAllFuncs(onSearchProp, onSearch),
279
311
  loading: rest.loading !== undefined ? rest.loading : loading,
280
312
  footer: renderDefaultFooter(),
281
- trigger: customRender ? typeof customRender === 'function' ? customRender(checkedItems) : customRender : /*#__PURE__*/React.createElement(TagInputMock, {
313
+ trigger: customRender ? typeof customRender === 'function' ? customRender(checkedItems) : customRender : /*#__PURE__*/React.createElement(TagInputMock, Object.assign({}, tagInputProps, {
314
+ size: size,
282
315
  clearable: clearable,
283
316
  placeholder: placeholder,
284
317
  // @ts-ignore
@@ -335,19 +368,23 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
335
368
 
336
369
  expandedViewRef.current = 'onlyChecked';
337
370
  }
338
- })
371
+ }))
339
372
  }), isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React.createElement(VirtualList, Object.assign({
340
373
  ref: listRef,
341
374
  itemKey: "id",
342
375
  fullHeight: false
343
- }, virtualListProps), function (node) {
376
+ }, virtualListProps), function (node, index) {
344
377
  /* 反向 map，搜索删选数据时会对数据进行处理 */
345
378
  return 'groupTitle' in node ? /*#__PURE__*/React.createElement(CheckSelectOptionGroup, {
346
379
  label: node.groupTitle
347
380
  }) : /*#__PURE__*/React.createElement(CheckSelectOption, {
348
381
  option: node,
349
382
  depth: node.depth,
350
- titleRender: proxyTitleRender
383
+ titleRender: proxyTitleRender,
384
+ onMouseEnter: function onMouseEnter() {
385
+ !node.disabled && setFocusedIndex(index);
386
+ },
387
+ focused: focusedIndex === index
351
388
  });
352
389
  }) : null));
353
390
  }); // @ts-ignore
@@ -359,10 +396,6 @@ if (__DEV__) {
359
396
  }
360
397
 
361
398
  var optionPrefix = getPrefixCls('check-select-option');
362
- /**
363
- * TODO: What is CheckSelectOption
364
- */
365
-
366
399
  var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
367
400
  var _a$prefixCls2 = _a.prefixCls,
368
401
  prefixCls = _a$prefixCls2 === void 0 ? optionPrefix : _a$prefixCls2,
@@ -372,7 +405,8 @@ var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
372
405
  onClick = _a.onClick,
373
406
  titleRender = _a.titleRender,
374
407
  depth = _a.depth,
375
- rest = __rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth"]);
408
+ focused = _a.focused,
409
+ rest = __rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth", "focused"]);
376
410
 
377
411
  var _useCheckSelectContex = useCheckSelectContext(),
378
412
  isCheckedId = _useCheckSelectContex.isCheckedId,
@@ -386,7 +420,7 @@ var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
386
420
  disabled: disabled,
387
421
  checked: checked
388
422
  }));
389
- var cls = cx(prefixCls, className, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled");
423
+ var cls = cx(prefixCls, className, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled", focused && prefixCls + "--focused");
390
424
  var handleOptionCheck = useCallback(function (evt) {
391
425
  onSelect(option, !checked);
392
426
  onClick === null || onClick === void 0 ? void 0 : onClick(evt);
@@ -416,10 +450,6 @@ if (__DEV__) {
416
450
  }
417
451
 
418
452
  var optionGroupPrefix = getPrefixCls('select-option-group');
419
- /**
420
- * TODO: What is CheckSelectOptionGroup
421
- */
422
-
423
453
  var CheckSelectOptionGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
424
454
  var _a$prefixCls3 = _a.prefixCls,
425
455
  prefixCls = _a$prefixCls3 === void 0 ? optionGroupPrefix : _a$prefixCls3,
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,8 +7,8 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import __styleInject__ from 'inject-head-style';
11
- 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); }";
10
+ import __styleInject__ from 'style-inject';
11
+ var css_248z = ".hi-v4-check-select-option {margin-top: var(--hi-v4-spacing-1, 2px);margin-bottom: var(--hi-v4-spacing-1, 2px);-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-2, 4px) var(--hi-v4-spacing-3, 6px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;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);}";
12
12
 
13
13
  __styleInject__(css_248z);
14
14
 
package/lib/types/CheckSelect.d.ts CHANGED
@@ -2,10 +2,11 @@ import React from 'react';
2
2
  import { UseCheckSelectProps } from './use-check-select';
3
3
  import type { HiBaseHTMLProps } from '@hi-ui/core';
4
4
  import { CheckSelectAppearanceEnum, CheckSelectDataItem, CheckSelectItemEventData, CheckSelectMergedItem } from './types';
5
+ import { TagInputMockProps } from '@hi-ui/tag-input';
5
6
  import { PickerProps } from '@hi-ui/picker';
6
7
  import { UseDataSource } from '@hi-ui/use-data-source';
7
8
  /**
8
- * TODO: What is CheckSelect
9
+ * 多项选择器
9
10
  */
10
11
  export declare const CheckSelect: React.ForwardRefExoticComponent<CheckSelectProps & React.RefAttributes<HTMLDivElement | null>>;
11
12
  export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrollable'>, UseCheckSelectProps {
@@ -101,16 +102,14 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
101
102
  * 自定义渲染选中的内容
102
103
  */
103
104
  customRender?: React.ReactNode | ((option: CheckSelectItemEventData[]) => React.ReactNode);
105
+ /**
106
+ * TagInput 参数设置
107
+ */
108
+ tagInputProps?: TagInputMockProps;
104
109
  }
105
- /**
106
- * TODO: What is CheckSelectOption
107
- */
108
110
  export declare const CheckSelectOption: React.ForwardRefExoticComponent<Pick<CheckSelectOptionProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
109
111
  export interface CheckSelectOptionProps extends HiBaseHTMLProps {
110
112
  }
111
- /**
112
- * TODO: What is CheckSelectOptionGroup
113
- */
114
113
  export declare const CheckSelectOptionGroup: React.ForwardRefExoticComponent<Pick<CheckSelectOptionGroupProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
115
114
  export interface CheckSelectOptionGroupProps extends HiBaseHTMLProps {
116
115
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/check-select",
3
- "version": "4.1.3",
3
+ "version": "4.3.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -46,14 +46,15 @@
46
46
  "@hi-ui/array-utils": "^4.0.1",
47
47
  "@hi-ui/checkbox": "^4.0.5",
48
48
  "@hi-ui/classname": "^4.0.1",
49
+ "@hi-ui/dom-utils": "^4.0.4",
49
50
  "@hi-ui/env": "^4.0.1",
50
51
  "@hi-ui/func-utils": "^4.0.1",
51
52
  "@hi-ui/highlighter": "^4.0.5",
52
53
  "@hi-ui/icons": "^4.0.6",
53
54
  "@hi-ui/input": "^4.0.9",
54
- "@hi-ui/picker": "^4.0.6",
55
- "@hi-ui/popper": "^4.0.4",
56
- "@hi-ui/tag-input": "^4.0.5",
55
+ "@hi-ui/picker": "^4.1.1",
56
+ "@hi-ui/popper": "^4.0.5",
57
+ "@hi-ui/tag-input": "^4.0.6",
57
58
  "@hi-ui/times": "^4.0.1",
58
59
  "@hi-ui/tree-utils": "^4.0.2",
59
60
  "@hi-ui/type-assertion": "^4.0.1",
@@ -73,8 +74,7 @@
73
74
  },
74
75
  "devDependencies": {
75
76
  "@hi-ui/core": "^4.0.4",
76
- "@hi-ui/core-css": "^4.0.1",
77
- "@hi-ui/hi-build": "^4.0.1",
77
+ "@hi-ui/core-css": "^4.1.1",
78
78
  "react": "^17.0.1",
79
79
  "react-dom": "^17.0.1"
80
80
  }