rsuite 5.56.0 → 5.57.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 (179) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/CascadeTree/package.json +7 -0
  3. package/CascadeTree/styles/index.css +273 -0
  4. package/CascadeTree/styles/index.less +77 -0
  5. package/CascadeTree/styles/search.less +45 -0
  6. package/Cascader/styles/index.css +187 -192
  7. package/Cascader/styles/index.less +1 -122
  8. package/MultiCascadeTree/package.json +7 -0
  9. package/MultiCascadeTree/styles/index.css +3701 -0
  10. package/MultiCascadeTree/styles/index.less +37 -0
  11. package/MultiCascader/styles/index.css +72 -69
  12. package/MultiCascader/styles/index.less +11 -31
  13. package/cjs/@types/common.d.ts +12 -14
  14. package/cjs/CascadeTree/CascadeTree.d.ts +16 -0
  15. package/cjs/CascadeTree/CascadeTree.js +174 -0
  16. package/cjs/CascadeTree/SearchView.d.ts +17 -0
  17. package/cjs/CascadeTree/SearchView.js +106 -0
  18. package/cjs/CascadeTree/TreeView.d.ts +20 -0
  19. package/cjs/{Cascader → CascadeTree}/TreeView.js +42 -33
  20. package/cjs/CascadeTree/hooks/index.d.ts +3 -0
  21. package/cjs/CascadeTree/hooks/index.js +12 -0
  22. package/cjs/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
  23. package/cjs/CascadeTree/hooks/usePaths.js +42 -0
  24. package/cjs/CascadeTree/hooks/useSearch.d.ts +17 -0
  25. package/cjs/CascadeTree/hooks/useSearch.js +59 -0
  26. package/cjs/CascadeTree/hooks/useSelect.d.ts +23 -0
  27. package/cjs/CascadeTree/hooks/useSelect.js +64 -0
  28. package/cjs/CascadeTree/index.d.ts +4 -0
  29. package/cjs/CascadeTree/index.js +9 -0
  30. package/cjs/CascadeTree/types.d.ts +66 -0
  31. package/cjs/CascadeTree/types.js +2 -0
  32. package/cjs/CascadeTree/utils.d.ts +32 -0
  33. package/cjs/CascadeTree/utils.js +66 -0
  34. package/cjs/Cascader/Cascader.d.ts +57 -26
  35. package/cjs/Cascader/Cascader.js +180 -247
  36. package/cjs/Cascader/useActive.d.ts +15 -0
  37. package/cjs/Cascader/useActive.js +43 -0
  38. package/cjs/InlineEdit/InlineEdit.d.ts +1 -1
  39. package/cjs/Loader/Loader.js +5 -4
  40. package/cjs/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
  41. package/cjs/MultiCascadeTree/MultiCascadeTree.js +131 -0
  42. package/cjs/MultiCascadeTree/SearchView.d.ts +17 -0
  43. package/cjs/MultiCascadeTree/SearchView.js +117 -0
  44. package/cjs/MultiCascadeTree/TreeView.d.ts +22 -0
  45. package/cjs/{MultiCascader → MultiCascadeTree}/TreeView.js +20 -20
  46. package/cjs/MultiCascadeTree/hooks/index.d.ts +5 -0
  47. package/cjs/MultiCascadeTree/hooks/index.js +16 -0
  48. package/cjs/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
  49. package/cjs/MultiCascadeTree/hooks/useCascadeValue.js +202 -0
  50. package/cjs/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
  51. package/cjs/MultiCascadeTree/hooks/useColumnData.js +52 -0
  52. package/cjs/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
  53. package/cjs/MultiCascadeTree/hooks/useFlattenData.js +33 -0
  54. package/cjs/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
  55. package/cjs/MultiCascadeTree/hooks/useSearch.js +52 -0
  56. package/cjs/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
  57. package/cjs/MultiCascadeTree/hooks/useSelect.js +83 -0
  58. package/cjs/MultiCascadeTree/index.d.ts +4 -0
  59. package/cjs/MultiCascadeTree/index.js +9 -0
  60. package/cjs/MultiCascadeTree/types.d.ts +26 -0
  61. package/cjs/MultiCascadeTree/types.js +2 -0
  62. package/cjs/MultiCascadeTree/utils.d.ts +37 -0
  63. package/cjs/MultiCascadeTree/utils.js +140 -0
  64. package/cjs/MultiCascader/MultiCascader.d.ts +57 -29
  65. package/cjs/MultiCascader/MultiCascader.js +175 -287
  66. package/cjs/Tree/Tree.d.ts +4 -4
  67. package/cjs/index.d.ts +6 -1
  68. package/cjs/index.js +8 -3
  69. package/cjs/internals/Picker/PickerToggle.d.ts +4 -5
  70. package/cjs/toaster/ToastContainer.d.ts +9 -2
  71. package/cjs/toaster/index.d.ts +0 -1
  72. package/cjs/toaster/index.js +1 -3
  73. package/cjs/useToaster/index.d.ts +2 -0
  74. package/cjs/useToaster/index.js +9 -0
  75. package/cjs/{toaster → useToaster}/useToaster.d.ts +4 -4
  76. package/cjs/{toaster → useToaster}/useToaster.js +4 -4
  77. package/cjs/utils/index.d.ts +1 -0
  78. package/cjs/utils/index.js +5 -2
  79. package/dist/rsuite-no-reset-rtl.css +64 -61
  80. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  81. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  82. package/dist/rsuite-no-reset.css +64 -61
  83. package/dist/rsuite-no-reset.min.css +1 -1
  84. package/dist/rsuite-no-reset.min.css.map +1 -1
  85. package/dist/rsuite-rtl.css +64 -61
  86. package/dist/rsuite-rtl.min.css +1 -1
  87. package/dist/rsuite-rtl.min.css.map +1 -1
  88. package/dist/rsuite.css +64 -61
  89. package/dist/rsuite.js +242 -44
  90. package/dist/rsuite.js.map +1 -1
  91. package/dist/rsuite.min.css +1 -1
  92. package/dist/rsuite.min.css.map +1 -1
  93. package/dist/rsuite.min.js +1 -1
  94. package/dist/rsuite.min.js.map +1 -1
  95. package/esm/@types/common.d.ts +12 -14
  96. package/esm/CascadeTree/CascadeTree.d.ts +16 -0
  97. package/esm/CascadeTree/CascadeTree.js +167 -0
  98. package/esm/CascadeTree/SearchView.d.ts +17 -0
  99. package/esm/CascadeTree/SearchView.js +100 -0
  100. package/esm/CascadeTree/TreeView.d.ts +20 -0
  101. package/esm/{Cascader → CascadeTree}/TreeView.js +42 -33
  102. package/esm/CascadeTree/hooks/index.d.ts +3 -0
  103. package/esm/CascadeTree/hooks/index.js +4 -0
  104. package/esm/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
  105. package/esm/CascadeTree/hooks/usePaths.js +36 -0
  106. package/esm/CascadeTree/hooks/useSearch.d.ts +17 -0
  107. package/esm/CascadeTree/hooks/useSearch.js +54 -0
  108. package/esm/CascadeTree/hooks/useSelect.d.ts +23 -0
  109. package/esm/CascadeTree/hooks/useSelect.js +59 -0
  110. package/esm/CascadeTree/index.d.ts +4 -0
  111. package/esm/CascadeTree/index.js +3 -0
  112. package/esm/CascadeTree/types.d.ts +66 -0
  113. package/esm/CascadeTree/types.js +1 -0
  114. package/esm/CascadeTree/utils.d.ts +32 -0
  115. package/esm/CascadeTree/utils.js +61 -0
  116. package/esm/Cascader/Cascader.d.ts +57 -26
  117. package/esm/Cascader/Cascader.js +167 -233
  118. package/esm/Cascader/useActive.d.ts +15 -0
  119. package/esm/Cascader/useActive.js +37 -0
  120. package/esm/InlineEdit/InlineEdit.d.ts +1 -1
  121. package/esm/Loader/Loader.js +6 -5
  122. package/esm/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
  123. package/esm/MultiCascadeTree/MultiCascadeTree.js +125 -0
  124. package/esm/MultiCascadeTree/SearchView.d.ts +17 -0
  125. package/esm/MultiCascadeTree/SearchView.js +111 -0
  126. package/esm/MultiCascadeTree/TreeView.d.ts +22 -0
  127. package/esm/{MultiCascader → MultiCascadeTree}/TreeView.js +20 -20
  128. package/esm/MultiCascadeTree/hooks/index.d.ts +5 -0
  129. package/esm/MultiCascadeTree/hooks/index.js +6 -0
  130. package/esm/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
  131. package/esm/MultiCascadeTree/hooks/useCascadeValue.js +197 -0
  132. package/esm/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
  133. package/esm/MultiCascadeTree/hooks/useColumnData.js +46 -0
  134. package/esm/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
  135. package/esm/MultiCascadeTree/hooks/useFlattenData.js +28 -0
  136. package/esm/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
  137. package/esm/MultiCascadeTree/hooks/useSearch.js +47 -0
  138. package/esm/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
  139. package/esm/MultiCascadeTree/hooks/useSelect.js +77 -0
  140. package/esm/MultiCascadeTree/index.d.ts +4 -0
  141. package/esm/MultiCascadeTree/index.js +3 -0
  142. package/esm/MultiCascadeTree/types.d.ts +26 -0
  143. package/esm/MultiCascadeTree/types.js +1 -0
  144. package/esm/MultiCascadeTree/utils.d.ts +37 -0
  145. package/esm/MultiCascadeTree/utils.js +130 -0
  146. package/esm/MultiCascader/MultiCascader.d.ts +57 -29
  147. package/esm/MultiCascader/MultiCascader.js +168 -279
  148. package/esm/Tree/Tree.d.ts +4 -4
  149. package/esm/index.d.ts +6 -1
  150. package/esm/index.js +5 -1
  151. package/esm/internals/Picker/PickerToggle.d.ts +4 -5
  152. package/esm/toaster/ToastContainer.d.ts +9 -2
  153. package/esm/toaster/index.d.ts +0 -1
  154. package/esm/toaster/index.js +0 -1
  155. package/esm/useToaster/index.d.ts +2 -0
  156. package/esm/useToaster/index.js +3 -0
  157. package/esm/{toaster → useToaster}/useToaster.d.ts +4 -4
  158. package/esm/{toaster → useToaster}/useToaster.js +4 -4
  159. package/esm/utils/index.d.ts +1 -0
  160. package/esm/utils/index.js +2 -1
  161. package/package.json +1 -1
  162. package/styles/index.less +2 -0
  163. package/useToaster/package.json +7 -0
  164. package/useToaster/styles/index.css +239 -0
  165. package/useToaster/styles/index.less +1 -0
  166. package/cjs/Cascader/DropdownMenu.d.ts +0 -24
  167. package/cjs/Cascader/DropdownMenu.js +0 -175
  168. package/cjs/Cascader/TreeView.d.ts +0 -24
  169. package/cjs/Cascader/utils.js +0 -79
  170. package/cjs/MultiCascader/TreeView.d.ts +0 -25
  171. package/cjs/MultiCascader/utils.d.ts +0 -71
  172. package/cjs/MultiCascader/utils.js +0 -382
  173. package/esm/Cascader/DropdownMenu.d.ts +0 -24
  174. package/esm/Cascader/DropdownMenu.js +0 -168
  175. package/esm/Cascader/TreeView.d.ts +0 -24
  176. package/esm/Cascader/utils.js +0 -74
  177. package/esm/MultiCascader/TreeView.d.ts +0 -25
  178. package/esm/MultiCascader/utils.d.ts +0 -71
  179. package/esm/MultiCascader/utils.js +0 -369
@@ -0,0 +1,43 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _react = require("react");
8
+ var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
9
+ var useActive = function useActive(props) {
10
+ var onOpen = props.onOpen,
11
+ onClose = props.onClose,
12
+ onEntered = props.onEntered,
13
+ onExited = props.onExited,
14
+ target = props.target,
15
+ setSearchKeyword = props.setSearchKeyword; // Use component active state to support keyboard events.
16
+ var _useState = (0, _react.useState)(false),
17
+ active = _useState[0],
18
+ setActive = _useState[1];
19
+ var handleEntered = (0, _useEventCallback.default)(function (node) {
20
+ onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);
21
+ if (!target.current) {
22
+ return;
23
+ }
24
+ onOpen === null || onOpen === void 0 ? void 0 : onOpen();
25
+ setActive(true);
26
+ });
27
+ var handleExited = (0, _useEventCallback.default)(function (node) {
28
+ onExited === null || onExited === void 0 ? void 0 : onExited(node);
29
+ if (!target.current) {
30
+ return;
31
+ }
32
+ onClose === null || onClose === void 0 ? void 0 : onClose();
33
+ setActive(false);
34
+ setSearchKeyword('');
35
+ });
36
+ return {
37
+ active: active,
38
+ handleEntered: handleEntered,
39
+ handleExited: handleExited
40
+ };
41
+ };
42
+ var _default = useActive;
43
+ exports.default = _default;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
3
3
  import { type ChildrenProps } from './renderChildren';
4
- export interface InlineEditProps extends WithAsProps {
4
+ export interface InlineEditProps extends Omit<WithAsProps, 'children'> {
5
5
  /**
6
6
  * If true, the InlineEdit will be disabled.
7
7
  */
@@ -29,20 +29,20 @@ var Loader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
29
29
  content = props.content,
30
30
  size = props.size,
31
31
  rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "inverse", "backdrop", "speed", "center", "vertical", "content", "size"]);
32
- var hasContent = !!content;
33
32
  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
34
33
  merge = _useClassNames.merge,
35
34
  withClassPrefix = _useClassNames.withClassPrefix,
36
35
  prefix = _useClassNames.prefix;
36
+ var labelId = (0, _utils.useUniqueId)('loader-label-');
37
37
  var classes = merge(className, prefix('wrapper', "speed-" + speed, size, {
38
38
  'backdrop-wrapper': backdrop,
39
- 'has-content': hasContent,
40
39
  vertical: vertical,
41
40
  inverse: inverse,
42
41
  center: center
43
42
  }));
44
43
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
45
- role: "progressbar"
44
+ role: "status",
45
+ "aria-labelledby": content ? labelId : undefined
46
46
  }, rest, {
47
47
  ref: ref,
48
48
  className: classes
@@ -52,7 +52,8 @@ var Loader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
52
52
  className: withClassPrefix()
53
53
  }, /*#__PURE__*/_react.default.createElement("span", {
54
54
  className: prefix('spin')
55
- }), hasContent && /*#__PURE__*/_react.default.createElement("span", {
55
+ }), content && /*#__PURE__*/_react.default.createElement("span", {
56
+ id: labelId,
56
57
  className: prefix('content')
57
58
  }, content)));
58
59
  });
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import type { DataItemValue } from '../@types/common';
3
+ import type { MultiCascadeTreeProps } from './types';
4
+ /**
5
+ * The `MultiCascadeTree` component is used to select multiple values from cascading options.
6
+ * @see https://rsuitejs.com/components/multi-cascade-tree/
7
+ */
8
+ declare const MultiCascadeTree: React.ForwardRefExoticComponent<MultiCascadeTreeProps<DataItemValue, DataItemValue[]> & React.RefAttributes<unknown>>;
9
+ export default MultiCascadeTree;
@@ -0,0 +1,131 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _TreeView = _interopRequireDefault(require("./TreeView"));
11
+ var _hooks = require("./hooks");
12
+ var _utils = require("../utils");
13
+ var _SearchView = _interopRequireDefault(require("./SearchView"));
14
+ var emptyArray = [];
15
+
16
+ /**
17
+ * The `MultiCascadeTree` component is used to select multiple values from cascading options.
18
+ * @see https://rsuitejs.com/components/multi-cascade-tree/
19
+ */
20
+ var MultiCascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
21
+ var _props$as = props.as,
22
+ Component = _props$as === void 0 ? 'div' : _props$as,
23
+ _props$data = props.data,
24
+ data = _props$data === void 0 ? emptyArray : _props$data,
25
+ defaultValue = props.defaultValue,
26
+ className = props.className,
27
+ _props$classPrefix = props.classPrefix,
28
+ classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,
29
+ valueProp = props.value,
30
+ _props$valueKey = props.valueKey,
31
+ valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
32
+ _props$labelKey = props.labelKey,
33
+ labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
34
+ _props$childrenKey = props.childrenKey,
35
+ childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
36
+ _props$disabledItemVa = props.disabledItemValues,
37
+ disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
38
+ _props$cascade = props.cascade,
39
+ cascade = _props$cascade === void 0 ? true : _props$cascade,
40
+ columnWidth = props.columnWidth,
41
+ columnHeight = props.columnHeight,
42
+ searchable = props.searchable,
43
+ _props$uncheckableIte = props.uncheckableItemValues,
44
+ uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,
45
+ getChildren = props.getChildren,
46
+ renderColumn = props.renderColumn,
47
+ renderTreeNode = props.renderTreeNode,
48
+ onSelect = props.onSelect,
49
+ onCheck = props.onCheck,
50
+ onChange = props.onChange,
51
+ onSearch = props.onSearch,
52
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "defaultValue", "className", "classPrefix", "value", "valueKey", "labelKey", "childrenKey", "disabledItemValues", "cascade", "columnWidth", "columnHeight", "searchable", "uncheckableItemValues", "getChildren", "renderColumn", "renderTreeNode", "onSelect", "onCheck", "onChange", "onSearch"]);
53
+ var itemKeys = {
54
+ childrenKey: childrenKey,
55
+ labelKey: labelKey,
56
+ valueKey: valueKey
57
+ };
58
+ var _useSelect = (0, _hooks.useSelect)({
59
+ data: data,
60
+ childrenKey: childrenKey,
61
+ labelKey: labelKey,
62
+ valueKey: valueKey,
63
+ onSelect: onSelect,
64
+ getChildren: getChildren
65
+ }),
66
+ selectedPaths = _useSelect.selectedPaths,
67
+ flattenData = _useSelect.flattenData,
68
+ columnData = _useSelect.columnData,
69
+ handleSelect = _useSelect.handleSelect;
70
+ var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
71
+ controlledValue = _useControlled[0];
72
+ var cascadeValueProps = (0, _extends2.default)({}, itemKeys, {
73
+ uncheckableItemValues: uncheckableItemValues,
74
+ cascade: cascade,
75
+ value: controlledValue,
76
+ onCheck: onCheck,
77
+ onChange: onChange
78
+ });
79
+ var _useCascadeValue = (0, _hooks.useCascadeValue)(cascadeValueProps, flattenData),
80
+ value = _useCascadeValue.value,
81
+ handleCheck = _useCascadeValue.handleCheck;
82
+ var _useSearch = (0, _hooks.useSearch)({
83
+ labelKey: labelKey,
84
+ valueKey: valueKey,
85
+ childrenKey: childrenKey,
86
+ flattenedData: flattenData,
87
+ uncheckableItemValues: uncheckableItemValues,
88
+ onSearch: onSearch
89
+ }),
90
+ items = _useSearch.items,
91
+ searchKeyword = _useSearch.searchKeyword,
92
+ handleSearch = _useSearch.handleSearch;
93
+ var _useClassNames = (0, _utils.useClassNames)(classPrefix),
94
+ withClassPrefix = _useClassNames.withClassPrefix,
95
+ merge = _useClassNames.merge;
96
+ var classes = merge(className, withClassPrefix('multi'));
97
+ return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
98
+ ref: ref,
99
+ className: classes
100
+ }, rest), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {
101
+ data: items,
102
+ value: value,
103
+ searchKeyword: searchKeyword,
104
+ valueKey: valueKey,
105
+ labelKey: labelKey,
106
+ childrenKey: childrenKey,
107
+ disabledItemValues: disabledItemValues,
108
+ onCheck: handleCheck,
109
+ onSearch: handleSearch
110
+ }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
111
+ cascade: cascade,
112
+ columnWidth: columnWidth,
113
+ columnHeight: columnHeight,
114
+ uncheckableItemValues: uncheckableItemValues,
115
+ disabledItemValues: disabledItemValues,
116
+ valueKey: valueKey,
117
+ labelKey: labelKey,
118
+ childrenKey: childrenKey,
119
+ classPrefix: classPrefix,
120
+ cascadeData: columnData,
121
+ cascadePaths: selectedPaths,
122
+ value: value,
123
+ onSelect: handleSelect,
124
+ onCheck: handleCheck,
125
+ renderColumn: renderColumn,
126
+ renderTreeNode: renderTreeNode
127
+ }));
128
+ });
129
+ MultiCascadeTree.displayName = 'MultiCascadeTree';
130
+ var _default = MultiCascadeTree;
131
+ exports.default = _default;
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { ItemDataType, WithAsProps } from '../@types/common';
3
+ interface SearchViewProps<T> extends WithAsProps {
4
+ searchKeyword: string;
5
+ labelKey: string;
6
+ valueKey: string;
7
+ childrenKey: string;
8
+ value: T[];
9
+ data: ItemDataType<T>[];
10
+ disabledItemValues: any[];
11
+ cascade?: boolean;
12
+ onSearch: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
13
+ onCheck: (item: ItemDataType<T>, event: React.SyntheticEvent, checked: boolean) => void;
14
+ inputRef?: React.RefObject<HTMLInputElement>;
15
+ }
16
+ declare function SearchView<T>(props: SearchViewProps<T>): JSX.Element;
17
+ export default SearchView;
@@ -0,0 +1,117 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _utils = require("../utils");
11
+ var _treeUtils = require("../utils/treeUtils");
12
+ var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
13
+ var _Checkbox = _interopRequireDefault(require("../Checkbox"));
14
+ var _utils2 = require("./utils");
15
+ var _utils3 = require("../CascadeTree/utils");
16
+ function SearchView(props) {
17
+ var _props$as = props.as,
18
+ Component = _props$as === void 0 ? 'div' : _props$as,
19
+ _props$classPrefix = props.classPrefix,
20
+ classPrefix = _props$classPrefix === void 0 ? 'cascade-search-view' : _props$classPrefix,
21
+ className = props.className,
22
+ searchKeyword = props.searchKeyword,
23
+ childrenKey = props.childrenKey,
24
+ labelKey = props.labelKey,
25
+ valueKey = props.valueKey,
26
+ value = props.value,
27
+ data = props.data,
28
+ disabledItemValues = props.disabledItemValues,
29
+ inputRef = props.inputRef,
30
+ cascade = props.cascade,
31
+ onSearch = props.onSearch,
32
+ onCheck = props.onCheck,
33
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "searchKeyword", "childrenKey", "labelKey", "valueKey", "value", "data", "disabledItemValues", "inputRef", "cascade", "onSearch", "onCheck"]);
34
+ var _useClassNames = (0, _utils.useClassNames)(classPrefix),
35
+ merge = _useClassNames.merge,
36
+ prefix = _useClassNames.prefix,
37
+ withClassPrefix = _useClassNames.withClassPrefix,
38
+ rootPrefix = _useClassNames.rootPrefix;
39
+ var classes = merge(className, withClassPrefix());
40
+ var _useCustom = (0, _utils.useCustom)('Picker'),
41
+ locale = _useCustom.locale;
42
+ var renderSearchRow = function renderSearchRow(item, key) {
43
+ var _extends2;
44
+ var nodes = (0, _treeUtils.getNodeParents)(item);
45
+ var label = (0, _utils3.highlightLabel)({
46
+ item: item,
47
+ labelKey: labelKey,
48
+ searchKeyword: searchKeyword,
49
+ render: function render(patch, index) {
50
+ return /*#__PURE__*/_react.default.createElement("span", {
51
+ key: index,
52
+ className: prefix('match')
53
+ }, patch);
54
+ }
55
+ });
56
+ nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = label, _extends2)));
57
+ var active = value.some(function (value) {
58
+ if (cascade) {
59
+ return nodes.some(function (node) {
60
+ return node[valueKey] === value;
61
+ });
62
+ }
63
+ return item[valueKey] === value;
64
+ });
65
+ var disabled = disabledItemValues.some(function (value) {
66
+ return nodes.some(function (node) {
67
+ return node[valueKey] === value;
68
+ });
69
+ });
70
+ var rowClasses = prefix('row', {
71
+ 'row-disabled': disabled
72
+ });
73
+ var indeterminate = cascade && !active && (0, _utils2.isSomeChildChecked)(item, value, {
74
+ valueKey: valueKey,
75
+ childrenKey: childrenKey
76
+ });
77
+ var handleChange = function handleChange(_value, checked, event) {
78
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(item, event, checked);
79
+ };
80
+ return /*#__PURE__*/_react.default.createElement("div", {
81
+ role: "treeitem",
82
+ "aria-disabled": disabled,
83
+ key: key,
84
+ className: rowClasses,
85
+ "data-key": item[valueKey]
86
+ }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
87
+ disabled: disabled,
88
+ checked: active,
89
+ value: item[valueKey],
90
+ indeterminate: indeterminate,
91
+ onChange: handleChange
92
+ }, /*#__PURE__*/_react.default.createElement("span", {
93
+ className: prefix('col-group')
94
+ }, nodes.map(function (node, index) {
95
+ return /*#__PURE__*/_react.default.createElement("span", {
96
+ key: "col-" + index,
97
+ className: prefix('col')
98
+ }, node[labelKey]);
99
+ }))));
100
+ };
101
+ return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({
102
+ className: classes
103
+ }, rest), /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
104
+ placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
105
+ onChange: onSearch,
106
+ value: searchKeyword,
107
+ inputRef: inputRef
108
+ }), searchKeyword !== '' && /*#__PURE__*/_react.default.createElement("div", {
109
+ className: prefix('panel'),
110
+ "data-layer": 0,
111
+ role: "tree"
112
+ }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement("div", {
113
+ className: merge(prefix('none'), rootPrefix('picker-none'))
114
+ }, locale.noResultsText)));
115
+ }
116
+ var _default = SearchView;
117
+ exports.default = _default;
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
3
+ import type { CascadeColumn } from '../CascadeTree/types';
4
+ export interface TreeViewProps<T = any> extends WithAsProps {
5
+ disabledItemValues?: T[];
6
+ value: T[];
7
+ childrenKey: string;
8
+ valueKey: string;
9
+ labelKey: string;
10
+ columnWidth?: number;
11
+ columnHeight?: number | string;
12
+ cascade?: boolean;
13
+ cascadeData: (readonly ItemDataType<T>[])[];
14
+ cascadePaths?: ItemDataType<T>[];
15
+ uncheckableItemValues: T[];
16
+ renderTreeNode?: (node: React.ReactNode, item: ItemDataType<T>) => React.ReactNode;
17
+ renderColumn?: (childNodes: React.ReactNode, column: CascadeColumn<T>) => React.ReactNode;
18
+ onCheck?: (node: ItemDataType<T>, event: React.SyntheticEvent, checked: boolean) => void;
19
+ onSelect?: (node: ItemDataType<T>, cascadePaths: ItemDataType<T>[], event: React.SyntheticEvent) => void;
20
+ }
21
+ declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
22
+ export default TreeView;
@@ -14,15 +14,11 @@ var _utils = require("../utils");
14
14
  var _Picker = require("../internals/Picker");
15
15
  var _utils2 = require("./utils");
16
16
  var emptyArray = [];
17
-
18
- /**
19
- * TODO: reuse Menu from Cascader for consistent behavior
20
- */
21
17
  var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
22
18
  var _props$as = props.as,
23
19
  Component = _props$as === void 0 ? 'div' : _props$as,
24
20
  _props$classPrefix = props.classPrefix,
25
- classPrefix = _props$classPrefix === void 0 ? 'menu' : _props$classPrefix,
21
+ classPrefix = _props$classPrefix === void 0 ? 'tree' : _props$classPrefix,
26
22
  className = props.className,
27
23
  cascade = props.cascade,
28
24
  _props$cascadeData = props.cascadeData,
@@ -33,10 +29,10 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
33
29
  childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
34
30
  _props$disabledItemVa = props.disabledItemValues,
35
31
  disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
36
- _props$menuWidth = props.menuWidth,
37
- menuWidth = _props$menuWidth === void 0 ? 156 : _props$menuWidth,
38
- _props$menuHeight = props.menuHeight,
39
- menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,
32
+ _props$columnWidth = props.columnWidth,
33
+ columnWidth = _props$columnWidth === void 0 ? 156 : _props$columnWidth,
34
+ _props$columnHeight = props.columnHeight,
35
+ columnHeight = _props$columnHeight === void 0 ? 200 : _props$columnHeight,
40
36
  _props$uncheckableIte = props.uncheckableItemValues,
41
37
  uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,
42
38
  value = props.value,
@@ -45,11 +41,11 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
45
41
  _props$labelKey = props.labelKey,
46
42
  labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
47
43
  style = props.style,
48
- renderMenuItem = props.renderMenuItem,
49
- renderMenu = props.renderMenu,
44
+ renderTreeNode = props.renderTreeNode,
45
+ renderColumn = props.renderColumn,
50
46
  _onCheck = props.onCheck,
51
47
  onSelect = props.onSelect,
52
- rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
48
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "columnWidth", "columnHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderTreeNode", "renderColumn", "onCheck", "onSelect"]);
53
49
  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
54
50
  merge = _useClassNames.merge,
55
51
  prefix = _useClassNames.prefix;
@@ -127,19 +123,19 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
127
123
  },
128
124
  checkable: !uncheckable,
129
125
  labelClickable: false
130
- }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {
126
+ }, renderTreeNode ? renderTreeNode(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {
131
127
  className: prefix('caret'),
132
128
  spin: node.loading
133
129
  }) : null);
134
130
  };
135
131
  var columnStyles = {
136
- height: menuHeight,
137
- width: menuWidth
132
+ height: columnHeight,
133
+ width: columnWidth
138
134
  };
139
135
  var cascadeNodes = cascadeData.map(function (children, layer) {
140
136
  var uncheckableCount = 0;
141
137
  var onlyKey = layer + "_" + children.length;
142
- var menu = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {
138
+ var childNodes = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {
143
139
  var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
144
140
  return (0, _utils.shallowEqual)(uncheckableValue, item[valueKey]);
145
141
  });
@@ -156,7 +152,7 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
156
152
  size: children.length
157
153
  });
158
154
  }));
159
- var parentNode = cascadePaths[layer - 1];
155
+ var parentItem = cascadePaths[layer - 1];
160
156
  var columnClasses = prefix('column', {
161
157
  'column-uncheckable': uncheckableCount === children.length
162
158
  });
@@ -166,14 +162,18 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
166
162
  className: columnClasses,
167
163
  "data-layer": layer,
168
164
  style: columnStyles
169
- }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
165
+ }, renderColumn ? renderColumn(childNodes, {
166
+ items: children,
167
+ parentItem: parentItem,
168
+ layer: layer
169
+ }) : childNodes);
170
170
  });
171
171
  var styles = (0, _extends2.default)({}, style, {
172
- width: cascadeData.length * menuWidth
172
+ width: cascadeData.length * columnWidth
173
173
  });
174
174
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
175
175
  role: "tree",
176
- id: id + "-" + popupType,
176
+ id: id ? id + "-" + popupType : undefined,
177
177
  "aria-labelledby": labelId,
178
178
  "aria-multiselectable": multiple
179
179
  }, rest, {
@@ -0,0 +1,5 @@
1
+ export { default as useFlattenData } from './useFlattenData';
2
+ export { default as useSelect } from './useSelect';
3
+ export { default as useColumnData } from './useColumnData';
4
+ export { default as useCascadeValue } from './useCascadeValue';
5
+ export { default as useSearch } from './useSearch';
@@ -0,0 +1,16 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.useSearch = exports.useCascadeValue = exports.useColumnData = exports.useSelect = exports.useFlattenData = void 0;
7
+ var _useFlattenData = _interopRequireDefault(require("./useFlattenData"));
8
+ exports.useFlattenData = _useFlattenData.default;
9
+ var _useSelect = _interopRequireDefault(require("./useSelect"));
10
+ exports.useSelect = _useSelect.default;
11
+ var _useColumnData = _interopRequireDefault(require("./useColumnData"));
12
+ exports.useColumnData = _useColumnData.default;
13
+ var _useCascadeValue = _interopRequireDefault(require("./useCascadeValue"));
14
+ exports.useCascadeValue = _useCascadeValue.default;
15
+ var _useSearch = _interopRequireDefault(require("./useSearch"));
16
+ exports.useSearch = _useSearch.default;
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ import { MultiCascadeTreeProps, ItemKeys } from '../types';
3
+ import { type ItemType } from '../utils';
4
+ /**
5
+ * A hook that converts the value into a cascading value
6
+ * @param props
7
+ * @param flattenData
8
+ */
9
+ declare function useCascadeValue<T>(props: Partial<MultiCascadeTreeProps<T>> & ItemKeys, flattenData: ItemType<T>[]): {
10
+ value: T[];
11
+ setValue: import("react").Dispatch<import("react").SetStateAction<T[]>>;
12
+ splitValue: (item: ItemType<T>, checked: boolean, value: T[]) => {
13
+ value: T[];
14
+ removedValue: T[];
15
+ };
16
+ handleCheck: (...args: any[]) => any;
17
+ };
18
+ export default useCascadeValue;