@douyinfe/semi-ui 2.4.1 → 2.5.1

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 (103) hide show
  1. package/button/index.tsx +1 -1
  2. package/cascader/__test__/cascader.test.js +24 -0
  3. package/cascader/_story/cascader.stories.js +73 -0
  4. package/cascader/index.tsx +5 -2
  5. package/datePicker/_story/v2/FixInputRangeFocus.jsx +25 -0
  6. package/datePicker/_story/v2/index.js +2 -1
  7. package/datePicker/datePicker.tsx +3 -0
  8. package/dist/css/semi.css +56 -29
  9. package/dist/css/semi.min.css +1 -1
  10. package/dist/umd/semi-ui.js +523 -227
  11. package/dist/umd/semi-ui.js.map +1 -1
  12. package/dist/umd/semi-ui.min.js +1 -1
  13. package/dist/umd/semi-ui.min.js.map +1 -1
  14. package/form/__test__/formApi.test.js +182 -0
  15. package/form/_story/FormApi/arrayDemo.jsx +4 -7
  16. package/form/_story/Layout/slotDemo.jsx +2 -2
  17. package/form/_story/demo.jsx +18 -1
  18. package/form/_story/form.stories.js +6 -6
  19. package/form/baseForm.tsx +2 -2
  20. package/lib/cjs/autoComplete/index.d.ts +1 -1
  21. package/lib/cjs/button/Button.d.ts +4 -4
  22. package/lib/cjs/button/buttonGroup.d.ts +2 -2
  23. package/lib/cjs/button/index.d.ts +5 -6
  24. package/lib/cjs/cascader/index.js +6 -0
  25. package/lib/cjs/datePicker/datePicker.js +4 -0
  26. package/lib/cjs/dropdown/index.d.ts +1 -1
  27. package/lib/cjs/form/baseForm.d.ts +1 -1
  28. package/lib/cjs/form/baseForm.js +2 -2
  29. package/lib/cjs/form/field.d.ts +1 -1
  30. package/lib/cjs/iconButton/index.d.ts +2 -2
  31. package/lib/cjs/select/index.d.ts +3 -3
  32. package/lib/cjs/select/index.js +32 -28
  33. package/lib/cjs/select/option.js +2 -2
  34. package/lib/cjs/select/virtualRow.js +2 -2
  35. package/lib/cjs/table/Table.d.ts +1 -1
  36. package/lib/cjs/table/Table.js +8 -2
  37. package/lib/cjs/table/interface.d.ts +1 -0
  38. package/lib/cjs/tabs/interface.d.ts +1 -1
  39. package/lib/cjs/tooltip/index.d.ts +1 -1
  40. package/lib/cjs/tooltip/index.js +12 -4
  41. package/lib/cjs/tree/index.d.ts +2 -0
  42. package/lib/cjs/tree/index.js +15 -8
  43. package/lib/cjs/treeSelect/index.d.ts +2 -0
  44. package/lib/cjs/treeSelect/index.js +64 -27
  45. package/lib/cjs/upload/fileCard.js +31 -22
  46. package/lib/cjs/upload/index.d.ts +6 -0
  47. package/lib/cjs/upload/index.js +15 -8
  48. package/lib/cjs/upload/interface.d.ts +8 -6
  49. package/lib/es/autoComplete/index.d.ts +1 -1
  50. package/lib/es/button/Button.d.ts +4 -4
  51. package/lib/es/button/buttonGroup.d.ts +2 -2
  52. package/lib/es/button/index.d.ts +5 -6
  53. package/lib/es/cascader/index.js +5 -0
  54. package/lib/es/datePicker/datePicker.js +4 -0
  55. package/lib/es/dropdown/index.d.ts +1 -1
  56. package/lib/es/form/baseForm.d.ts +1 -1
  57. package/lib/es/form/baseForm.js +2 -2
  58. package/lib/es/form/field.d.ts +1 -1
  59. package/lib/es/iconButton/index.d.ts +2 -2
  60. package/lib/es/select/index.d.ts +3 -3
  61. package/lib/es/select/index.js +30 -26
  62. package/lib/es/select/option.js +2 -2
  63. package/lib/es/select/virtualRow.js +2 -2
  64. package/lib/es/table/Table.d.ts +1 -1
  65. package/lib/es/table/Table.js +10 -2
  66. package/lib/es/table/interface.d.ts +1 -0
  67. package/lib/es/tabs/interface.d.ts +1 -1
  68. package/lib/es/tooltip/index.d.ts +1 -1
  69. package/lib/es/tooltip/index.js +12 -4
  70. package/lib/es/tree/index.d.ts +2 -0
  71. package/lib/es/tree/index.js +15 -8
  72. package/lib/es/treeSelect/index.d.ts +2 -0
  73. package/lib/es/treeSelect/index.js +64 -27
  74. package/lib/es/upload/fileCard.js +31 -24
  75. package/lib/es/upload/index.d.ts +6 -0
  76. package/lib/es/upload/index.js +14 -8
  77. package/lib/es/upload/interface.d.ts +8 -6
  78. package/package.json +9 -9
  79. package/select/index.tsx +18 -19
  80. package/select/option.tsx +2 -2
  81. package/select/virtualRow.tsx +2 -2
  82. package/table/Table.tsx +7 -2
  83. package/table/_story/Perf/Virtualized/index.jsx +6 -0
  84. package/table/_story/table.stories.js +1 -2
  85. package/table/_story/v2/FixedHeaderMerge/index.jsx +98 -0
  86. package/table/_story/v2/FixedResizable/index.jsx +114 -0
  87. package/table/_story/v2/defaultFilteredValue.tsx +114 -0
  88. package/table/_story/v2/index.js +5 -0
  89. package/table/interface.ts +1 -0
  90. package/tabs/interface.ts +1 -1
  91. package/tooltip/__test__/tooltip.test.js +48 -4
  92. package/tooltip/_story/tooltip.stories.js +718 -559
  93. package/tooltip/index.tsx +6 -6
  94. package/tree/__test__/treeMultiple.test.js +94 -0
  95. package/tree/_story/tree.stories.js +169 -0
  96. package/tree/index.tsx +12 -5
  97. package/treeSelect/__test__/treeMultiple.test.js +94 -0
  98. package/treeSelect/_story/treeSelect.stories.js +242 -0
  99. package/treeSelect/index.tsx +72 -40
  100. package/upload/_story/upload.stories.js +22 -6
  101. package/upload/fileCard.tsx +23 -23
  102. package/upload/index.tsx +15 -6
  103. package/upload/interface.ts +7 -5
@@ -56,7 +56,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
56
56
 
57
57
  var _propTypes = _interopRequireDefault(require("prop-types"));
58
58
 
59
- var _context15 = _interopRequireDefault(require("../configProvider/context"));
59
+ var _context16 = _interopRequireDefault(require("../configProvider/context"));
60
60
 
61
61
  var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/select/foundation"));
62
62
 
@@ -347,11 +347,19 @@ class Select extends _baseComponent.default {
347
347
  el.focus();
348
348
  } catch (error) {}
349
349
  },
350
- updateScrollTop: () => {
351
- var _context9, _context10;
350
+ updateScrollTop: index => {
351
+ var _context10, _context11;
352
352
 
353
353
  // eslint-disable-next-line max-len
354
- let destNode = document.querySelector((0, _concat.default)(_context9 = (0, _concat.default)(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, prefixcls, "-option-selected"));
354
+ let optionClassName = ".".concat(prefixcls, "-option-selected");
355
+
356
+ if (index !== undefined) {
357
+ var _context9;
358
+
359
+ optionClassName = (0, _concat.default)(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
360
+ }
361
+
362
+ let destNode = document.querySelector((0, _concat.default)(_context10 = (0, _concat.default)(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
355
363
 
356
364
  if ((0, _isArray.default)(destNode)) {
357
365
  // eslint-disable-next-line prefer-destructuring
@@ -379,10 +387,10 @@ class Select extends _baseComponent.default {
379
387
  }
380
388
 
381
389
  componentDidUpdate(prevProps, prevState) {
382
- var _context11, _context12;
390
+ var _context12, _context13;
383
391
 
384
- const prevChildrenKeys = (0, _map2.default)(_context11 = _react.default.Children.toArray(prevProps.children)).call(_context11, child => child.key);
385
- const nowChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(this.props.children)).call(_context12, child => child.key);
392
+ const prevChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(prevProps.children)).call(_context12, child => child.key);
393
+ const nowChildrenKeys = (0, _map2.default)(_context13 = _react.default.Children.toArray(this.props.children)).call(_context13, child => child.key);
386
394
  let isOptionsChanged = false;
387
395
 
388
396
  if (!(0, _isEqual2.default)(prevChildrenKeys, nowChildrenKeys) || !(0, _isEqual2.default)(prevProps.optionList, this.props.optionList)) {
@@ -572,33 +580,29 @@ class Select extends _baseComponent.default {
572
580
  this.foundation.handleOptionMouseEnter(optionIndex);
573
581
  }
574
582
 
575
- renderWithGroup(visibileOptions) {
583
+ renderWithGroup(visibleOptions) {
576
584
  const content = [];
577
585
  const groupStatus = new _map.default();
578
- (0, _forEach.default)(visibileOptions).call(visibileOptions, (option, optionIndex) => {
586
+ (0, _forEach.default)(visibleOptions).call(visibleOptions, (option, optionIndex) => {
579
587
  const parentGroup = option._parentGroup;
580
588
  const optionContent = this.renderOption(option, optionIndex);
581
589
 
582
- if (parentGroup && groupStatus.has(parentGroup.label)) {
583
- // group content already insert
584
- content.push(optionContent);
585
- } else if (parentGroup) {
590
+ if (parentGroup && !groupStatus.has(parentGroup.label)) {
591
+ // when use with OptionGroup and group content not already insert
586
592
  const groupContent = /*#__PURE__*/_react.default.createElement(_optionGroup.default, (0, _assign.default)({}, parentGroup, {
587
593
  key: parentGroup.label
588
594
  }));
589
595
 
590
596
  groupStatus.set(parentGroup.label, true);
591
597
  content.push(groupContent);
592
- content.push(optionContent);
593
- } else {
594
- // when not use with OptionGroup
595
- content.push(optionContent);
596
598
  }
599
+
600
+ content.push(optionContent);
597
601
  });
598
602
  return content;
599
603
  }
600
604
 
601
- renderVirtualizeList(visibileOptions) {
605
+ renderVirtualizeList(visibleOptions) {
602
606
  const {
603
607
  virtualize
604
608
  } = this.props;
@@ -613,10 +617,10 @@ class Select extends _baseComponent.default {
613
617
  return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
614
618
  ref: this.virtualizeListRef,
615
619
  height: height || _constants.numbers.LIST_HEIGHT,
616
- itemCount: visibileOptions.length,
620
+ itemCount: visibleOptions.length,
617
621
  itemSize: itemSize,
618
622
  itemData: {
619
- visibileOptions,
623
+ visibleOptions,
620
624
  renderOption: this.renderOption
621
625
  },
622
626
  width: width || '100%',
@@ -627,7 +631,7 @@ class Select extends _baseComponent.default {
627
631
  }
628
632
 
629
633
  renderOptions(children) {
630
- var _context13;
634
+ var _context14;
631
635
 
632
636
  const {
633
637
  dropdownMinWidth,
@@ -647,11 +651,11 @@ class Select extends _baseComponent.default {
647
651
  multiple
648
652
  } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
649
653
 
650
- const visibileOptions = (0, _filter.default)(options).call(options, item => item._show);
651
- let listContent = this.renderWithGroup(visibileOptions);
654
+ const visibleOptions = (0, _filter.default)(options).call(options, item => item._show);
655
+ let listContent = this.renderWithGroup(visibleOptions);
652
656
 
653
657
  if (virtualize) {
654
- listContent = this.renderVirtualizeList(visibileOptions);
658
+ listContent = this.renderVirtualizeList(visibleOptions);
655
659
  }
656
660
 
657
661
  const style = (0, _assign.default)({
@@ -663,7 +667,7 @@ class Select extends _baseComponent.default {
663
667
  });
664
668
  const isEmpty = !options.length || !(0, _some.default)(options).call(options, item => item._show);
665
669
  return /*#__PURE__*/_react.default.createElement("div", {
666
- id: (0, _concat.default)(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
670
+ id: (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
667
671
  className: dropdownClassName,
668
672
  style: style
669
673
  }, outerTopSlot, /*#__PURE__*/_react.default.createElement("div", {
@@ -891,7 +895,7 @@ class Select extends _baseComponent.default {
891
895
  }
892
896
 
893
897
  renderSelection() {
894
- var _context14;
898
+ var _context15;
895
899
 
896
900
  const {
897
901
  disabled,
@@ -975,7 +979,7 @@ class Select extends _baseComponent.default {
975
979
  role: "combobox",
976
980
  "aria-disabled": disabled,
977
981
  "aria-expanded": isOpen,
978
- "aria-controls": (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
982
+ "aria-controls": (0, _concat.default)(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
979
983
  "aria-haspopup": "listbox",
980
984
  "aria-label": "select value",
981
985
  "aria-invalid": this.props['aria-invalid'],
@@ -1042,7 +1046,7 @@ class Select extends _baseComponent.default {
1042
1046
 
1043
1047
  }
1044
1048
 
1045
- Select.contextType = _context15.default;
1049
+ Select.contextType = _context16.default;
1046
1050
  Select.Option = _option.default;
1047
1051
  Select.OptGroup = _optionGroup.default;
1048
1052
  Select.propTypes = {
@@ -65,9 +65,9 @@ class Option extends _react.PureComponent {
65
65
  const {
66
66
  props
67
67
  } = this;
68
- const isDisbled = props.disabled;
68
+ const isDisabled = props.disabled;
69
69
 
70
- if (!isDisbled) {
70
+ if (!isDisabled) {
71
71
  props.onSelect((0, _assign.default)((0, _assign.default)({}, rest), {
72
72
  value,
73
73
  label: label || children
@@ -15,9 +15,9 @@ const VirtualRow = _ref => {
15
15
  style
16
16
  } = _ref;
17
17
  const {
18
- visibileOptions
18
+ visibleOptions
19
19
  } = data;
20
- const option = visibileOptions[index];
20
+ const option = visibleOptions[index];
21
21
  return data.renderOption(option, index, style);
22
22
  };
23
23
 
@@ -298,7 +298,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
298
298
  showSizeChanger?: boolean;
299
299
  showQuickJumper?: boolean;
300
300
  popoverZIndex?: number;
301
- popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
301
+ popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
302
302
  hideOnSinglePage?: boolean;
303
303
  hoverShowPageSelect?: boolean;
304
304
  };
@@ -566,10 +566,15 @@ class Table extends _baseComponent.default {
566
566
  titleArr.push(sorter);
567
567
  }
568
568
 
569
+ const stateFilteredValue = (0, _get2.default)(curQuery, 'filteredValue');
570
+ const defaultFilteredValue = (0, _get2.default)(curQuery, 'defaultFilteredValue');
571
+ const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
572
+
569
573
  if ((0, _isArray.default)(column.filters) && column.filters.length || /*#__PURE__*/(0, _react.isValidElement)(column.filterDropdown)) {
570
574
  const filter = /*#__PURE__*/_react.default.createElement(_ColumnFilter.default, (0, _assign.default)({
571
575
  key: _constants.strings.DEFAULT_KEY_COLUMN_FILTER
572
576
  }, curQuery, {
577
+ filteredValue: filteredValue,
573
578
  onFilterDropdownVisibleChange: visible => _this.foundation.toggleShowFilter(dataIndex, visible),
574
579
  onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
575
580
  }));
@@ -1154,11 +1159,12 @@ class Table extends _baseComponent.default {
1154
1159
  willUpdateStates.cachedColumns = props.columns;
1155
1160
  willUpdateStates.cachedChildren = null;
1156
1161
  } else if (props.children && props.children !== state.cachedChildren) {
1157
- const newFlattenColumns = (0, _utils.flattenColumns)((0, _getColumns.default)(props.children));
1162
+ const newNestedColumns = (0, _getColumns.default)(props.children);
1163
+ const newFlattenColumns = (0, _utils.flattenColumns)(newNestedColumns);
1158
1164
  const columns = (0, _utils.mergeColumns)(state.queries, newFlattenColumns, null, false);
1159
1165
  willUpdateStates.flattenColumns = newFlattenColumns;
1160
1166
  willUpdateStates.queries = [...columns];
1161
- willUpdateStates.cachedColumns = [...columns];
1167
+ willUpdateStates.cachedColumns = [...newNestedColumns];
1162
1168
  willUpdateStates.cachedChildren = props.children;
1163
1169
  } // Update controlled selection column
1164
1170
 
@@ -63,6 +63,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
63
63
  className?: string;
64
64
  colSpan?: number;
65
65
  dataIndex?: string;
66
+ defaultFilteredValue?: any[];
66
67
  defaultSortOrder?: SortOrder;
67
68
  filterChildrenRecord?: boolean;
68
69
  filterDropdown?: React.ReactNode;
@@ -52,7 +52,7 @@ export interface TabBarProps {
52
52
  export interface TabPaneProps {
53
53
  className?: string;
54
54
  disabled?: boolean;
55
- icon?: string;
55
+ icon?: ReactNode;
56
56
  itemKey?: string;
57
57
  style?: CSSProperties;
58
58
  tab?: ReactNode;
@@ -67,7 +67,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
67
67
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
68
68
  motion: PropTypes.Requireable<boolean | object>;
69
69
  autoAdjustOverflow: PropTypes.Requireable<boolean>;
70
- position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
70
+ position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
71
71
  getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
72
72
  mouseEnterDelay: PropTypes.Requireable<number>;
73
73
  mouseLeaveDelay: PropTypes.Requireable<number>;
@@ -229,7 +229,9 @@ class Tooltip extends _baseComponent.default {
229
229
  } = _ref;
230
230
  return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
231
231
  className: (0, _classnames.default)(className, animateCls),
232
- style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, animateStyle), {
232
+ style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
233
+ visibility: 'visible'
234
+ }, animateStyle), {
233
235
  transformOrigin
234
236
  }), style)
235
237
  }, portalEventSet, animateEvents, {
@@ -241,7 +243,9 @@ class Tooltip extends _baseComponent.default {
241
243
  className: className
242
244
  }, portalEventSet, {
243
245
  "x-placement": placement,
244
- style: style
246
+ style: (0, _assign.default)({
247
+ visibility: motion ? undefined : 'visible'
248
+ }, style)
245
249
  }), content, icon);
246
250
  return /*#__PURE__*/_react.default.createElement(_index.default, {
247
251
  getPopupContainer: this.props.getPopupContainer,
@@ -484,11 +488,15 @@ class Tooltip extends _baseComponent.default {
484
488
  }
485
489
  };
486
490
 
487
- document.addEventListener('click', this.clickOutsideHandler, false);
491
+ document.addEventListener('mousedown', this.clickOutsideHandler, {
492
+ capture: true
493
+ });
488
494
  },
489
495
  unregisterClickOutsideHandler: () => {
490
496
  if (this.clickOutsideHandler) {
491
- document.removeEventListener('click', this.clickOutsideHandler, false);
497
+ document.removeEventListener('mousedown', this.clickOutsideHandler, {
498
+ capture: true
499
+ });
492
500
  this.clickOutsideHandler = null;
493
501
  }
494
502
  },
@@ -70,6 +70,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
70
70
  onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
71
71
  onDrop: PropTypes.Requireable<(...args: any[]) => any>;
72
72
  labelEllipsis: PropTypes.Requireable<boolean>;
73
+ checkRelation: PropTypes.Requireable<string>;
73
74
  'aria-label': PropTypes.Requireable<string>;
74
75
  };
75
76
  static defaultProps: {
@@ -90,6 +91,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
90
91
  disableStrictly: boolean;
91
92
  draggable: boolean;
92
93
  autoExpandWhenDragEnter: boolean;
94
+ checkRelation: string;
93
95
  };
94
96
  static TreeNode: typeof TreeNode;
95
97
  inputRef: React.RefObject<typeof Input>;
@@ -236,6 +236,7 @@ class Tree extends _baseComponent.default {
236
236
  selectedKeys: [],
237
237
  checkedKeys: new _set.default(),
238
238
  halfCheckedKeys: new _set.default(),
239
+ realCheckedKeys: new _set.default([]),
239
240
  motionKeys: new _set.default([]),
240
241
  motionType: 'hide',
241
242
  expandedKeys: new _set.default(props.expandedKeys),
@@ -446,12 +447,16 @@ class Tree extends _baseComponent.default {
446
447
  }
447
448
 
448
449
  if (checkedKeyValues) {
449
- const {
450
- checkedKeys,
451
- halfCheckedKeys
452
- } = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
453
- newState.checkedKeys = checkedKeys;
454
- newState.halfCheckedKeys = halfCheckedKeys;
450
+ if (props.checkRelation === 'unRelated') {
451
+ newState.realCheckedKeys = new _set.default(checkedKeyValues);
452
+ } else if (props.checkRelation === 'related') {
453
+ const {
454
+ checkedKeys,
455
+ halfCheckedKeys
456
+ } = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
457
+ newState.checkedKeys = checkedKeys;
458
+ newState.halfCheckedKeys = halfCheckedKeys;
459
+ }
455
460
  }
456
461
  } // update loadedKeys
457
462
 
@@ -461,7 +466,7 @@ class Tree extends _baseComponent.default {
461
466
  } // update disableStrictly
462
467
 
463
468
 
464
- if (treeData && props.disableStrictly) {
469
+ if (treeData && props.disableStrictly && props.checkRelation === 'related') {
465
470
  newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
466
471
  }
467
472
 
@@ -782,6 +787,7 @@ Tree.propTypes = {
782
787
  onDragStart: _propTypes.default.func,
783
788
  onDrop: _propTypes.default.func,
784
789
  labelEllipsis: _propTypes.default.bool,
790
+ checkRelation: _propTypes.default.string,
785
791
  'aria-label': _propTypes.default.string
786
792
  };
787
793
  Tree.defaultProps = {
@@ -801,7 +807,8 @@ Tree.defaultProps = {
801
807
  expandAction: false,
802
808
  disableStrictly: false,
803
809
  draggable: false,
804
- autoExpandWhenDragEnter: true
810
+ autoExpandWhenDragEnter: true,
811
+ checkRelation: 'related'
805
812
  };
806
813
  Tree.TreeNode = _treeNode.default;
807
814
  var _default = Tree;
@@ -168,6 +168,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
168
168
  optionListStyle: PropTypes.Requireable<object>;
169
169
  searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
170
170
  renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
171
+ checkRelation: PropTypes.Requireable<string>;
171
172
  'aria-label': PropTypes.Requireable<string>;
172
173
  };
173
174
  static defaultProps: Partial<TreeSelectProps>;
@@ -192,6 +193,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
192
193
  removeTag: (removedKey: TreeNodeData['key']) => void;
193
194
  handleClick: (e: React.MouseEvent) => void;
194
195
  handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
196
+ hasValue: () => boolean;
195
197
  showClearBtn: () => boolean;
196
198
  renderTagList: () => React.ReactNode[];
197
199
  /**
@@ -174,34 +174,52 @@ class TreeSelect extends _baseComponent.default {
174
174
  this.foundation.handleSelectionEnterPress(e);
175
175
  };
176
176
 
177
- this.showClearBtn = () => {
177
+ this.hasValue = () => {
178
178
  const {
179
- searchPosition
179
+ multiple,
180
+ checkRelation
180
181
  } = this.props;
181
182
  const {
182
- inputValue
183
+ realCheckedKeys,
184
+ checkedKeys,
185
+ selectedKeys
183
186
  } = this.state;
184
- const triggerSearchHasInputValue = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && inputValue;
187
+ let hasValue = false;
188
+
189
+ if (multiple) {
190
+ if (checkRelation === 'related') {
191
+ hasValue = Boolean(checkedKeys.size);
192
+ } else if (checkRelation === 'unRelated') {
193
+ hasValue = Boolean(realCheckedKeys.size);
194
+ }
195
+ } else {
196
+ hasValue = Boolean(selectedKeys.length);
197
+ }
198
+
199
+ return hasValue;
200
+ };
201
+
202
+ this.showClearBtn = () => {
185
203
  const {
186
204
  showClear,
187
205
  disabled,
188
- multiple
206
+ searchPosition
189
207
  } = this.props;
190
208
  const {
191
- selectedKeys,
192
- checkedKeys,
209
+ inputValue,
193
210
  isOpen,
194
211
  isHovering
195
212
  } = this.state;
196
- const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
197
- return showClear && (hasValue || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
213
+ const triggerSearchHasInputValue = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && inputValue;
214
+ return showClear && (this.hasValue() || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
198
215
  };
199
216
 
200
217
  this.renderTagList = () => {
201
218
  const {
202
219
  checkedKeys,
203
220
  keyEntities,
204
- disabledKeys
221
+ disabledKeys,
222
+ realCheckedKeys
205
223
  } = this.state;
206
224
  const {
207
225
  treeNodeLabelProp,
@@ -209,13 +227,21 @@ class TreeSelect extends _baseComponent.default {
209
227
  disabled,
210
228
  disableStrictly,
211
229
  size,
230
+ checkRelation,
212
231
  renderSelectedItem: propRenderSelectedItem
213
232
  } = this.props;
214
233
  const renderSelectedItem = (0, _isFunction2.default)(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
215
234
  isRenderInTag: true,
216
235
  content: (0, _get2.default)(item, treeNodeLabelProp, null)
217
236
  });
218
- const renderKeys = (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly);
237
+ let renderKeys = [];
238
+
239
+ if (checkRelation === 'related') {
240
+ renderKeys = (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly);
241
+ } else if (checkRelation === 'unRelated') {
242
+ renderKeys = [...realCheckedKeys];
243
+ }
244
+
219
245
  const tagList = []; // eslint-disable-next-line @typescript-eslint/no-shadow
220
246
 
221
247
  (0, _forEach.default)(renderKeys).call(renderKeys, key => {
@@ -303,11 +329,6 @@ class TreeSelect extends _baseComponent.default {
303
329
  searchPosition,
304
330
  filterTreeNode
305
331
  } = this.props;
306
- const {
307
- selectedKeys,
308
- checkedKeys
309
- } = this.state;
310
- const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
311
332
  const isTriggerPositionSearch = filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER; // searchPosition = trigger
312
333
 
313
334
  if (isTriggerPositionSearch) {
@@ -315,7 +336,7 @@ class TreeSelect extends _baseComponent.default {
315
336
  } // searchPosition = dropdown and single seleciton
316
337
 
317
338
 
318
- if (!multiple || !hasValue) {
339
+ if (!multiple || !this.hasValue()) {
319
340
  const renderText = this.foundation.getRenderTextInSingle();
320
341
  const spanCls = (0, _classnames.default)({
321
342
  ["".concat(prefixcls, "-selection-placeholder")]: !renderText
@@ -568,14 +589,23 @@ class TreeSelect extends _baseComponent.default {
568
589
  size,
569
590
  searchAutoFocus,
570
591
  placeholder,
571
- maxTagCount
592
+ maxTagCount,
593
+ checkRelation
572
594
  } = this.props;
573
595
  const {
574
596
  keyEntities,
575
597
  checkedKeys,
576
- inputValue
598
+ inputValue,
599
+ realCheckedKeys
577
600
  } = this.state;
578
- const keyList = (0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, leafOnly);
601
+ let keyList = [];
602
+
603
+ if (checkRelation === 'related') {
604
+ keyList = (0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, leafOnly);
605
+ } else if (checkRelation === 'unRelated') {
606
+ keyList = [...realCheckedKeys];
607
+ }
608
+
579
609
  return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
580
610
  maxTagCount: maxTagCount,
581
611
  disabled: disabled,
@@ -900,6 +930,7 @@ class TreeSelect extends _baseComponent.default {
900
930
  selectedKeys: [],
901
931
  checkedKeys: new _set.default(),
902
932
  halfCheckedKeys: new _set.default(),
933
+ realCheckedKeys: new _set.default([]),
903
934
  disabledKeys: new _set.default(),
904
935
  motionKeys: new _set.default([]),
905
936
  motionType: 'hide',
@@ -1020,12 +1051,16 @@ class TreeSelect extends _baseComponent.default {
1020
1051
  }
1021
1052
 
1022
1053
  if (checkedKeyValues) {
1023
- const {
1024
- checkedKeys,
1025
- halfCheckedKeys
1026
- } = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
1027
- newState.checkedKeys = checkedKeys;
1028
- newState.halfCheckedKeys = halfCheckedKeys;
1054
+ if (props.checkRelation === 'unRelated') {
1055
+ newState.realCheckedKeys = new _set.default(checkedKeyValues);
1056
+ } else if (props.checkRelation === 'related') {
1057
+ const {
1058
+ checkedKeys,
1059
+ halfCheckedKeys
1060
+ } = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
1061
+ newState.checkedKeys = checkedKeys;
1062
+ newState.halfCheckedKeys = halfCheckedKeys;
1063
+ }
1029
1064
  }
1030
1065
  } // loadedKeys
1031
1066
 
@@ -1040,7 +1075,7 @@ class TreeSelect extends _baseComponent.default {
1040
1075
  } // ================ disableStrictly =================
1041
1076
 
1042
1077
 
1043
- if (treeData && props.disableStrictly) {
1078
+ if (treeData && props.disableStrictly && props.checkRelation === 'related') {
1044
1079
  newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
1045
1080
  }
1046
1081
 
@@ -1307,6 +1342,7 @@ TreeSelect.propTypes = {
1307
1342
  optionListStyle: _propTypes.default.object,
1308
1343
  searchRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
1309
1344
  renderSelectedItem: _propTypes.default.func,
1345
+ checkRelation: _propTypes.default.string,
1310
1346
  'aria-label': _propTypes.default.string
1311
1347
  };
1312
1348
  TreeSelect.defaultProps = {
@@ -1335,6 +1371,7 @@ TreeSelect.defaultProps = {
1335
1371
  expandAction: false,
1336
1372
  clickToHide: true,
1337
1373
  searchAutoFocus: false,
1374
+ checkRelation: 'related',
1338
1375
  'aria-label': 'TreeSelect'
1339
1376
  };
1340
1377
  var _default = TreeSelect;