rsuite 5.55.1 → 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 (223) hide show
  1. package/AutoComplete/styles/index.css +3 -3
  2. package/CHANGELOG.md +33 -0
  3. package/CascadeTree/package.json +7 -0
  4. package/CascadeTree/styles/index.css +273 -0
  5. package/CascadeTree/styles/index.less +77 -0
  6. package/CascadeTree/styles/search.less +45 -0
  7. package/Cascader/styles/index.css +190 -195
  8. package/Cascader/styles/index.less +1 -122
  9. package/CheckPicker/styles/index.css +142 -40
  10. package/CheckPicker/styles/index.less +1 -1
  11. package/CheckTree/styles/index.css +143 -41
  12. package/CheckTreePicker/styles/index.css +143 -41
  13. package/CheckTreePicker/styles/index.less +2 -2
  14. package/Checkbox/styles/index.css +159 -36
  15. package/Checkbox/styles/index.less +32 -13
  16. package/DatePicker/styles/index.css +3 -3
  17. package/DateRangePicker/styles/index.css +3 -3
  18. package/InputPicker/styles/index.css +3 -3
  19. package/MultiCascadeTree/package.json +7 -0
  20. package/MultiCascadeTree/styles/index.css +3701 -0
  21. package/MultiCascadeTree/styles/index.less +37 -0
  22. package/MultiCascader/styles/index.css +213 -108
  23. package/MultiCascader/styles/index.less +11 -31
  24. package/Pagination/styles/index.css +3 -3
  25. package/Radio/styles/index.css +133 -19
  26. package/Radio/styles/index.less +28 -12
  27. package/RadioGroup/styles/index.css +1 -1
  28. package/RadioGroup/styles/index.less +1 -1
  29. package/SelectPicker/styles/index.css +3 -3
  30. package/TagGroup/styles/index.css +1 -1
  31. package/TagGroup/styles/index.less +1 -1
  32. package/TagInput/styles/index.css +141 -39
  33. package/TagPicker/styles/index.css +141 -39
  34. package/cjs/@types/common.d.ts +12 -14
  35. package/cjs/CascadeTree/CascadeTree.d.ts +16 -0
  36. package/cjs/CascadeTree/CascadeTree.js +174 -0
  37. package/cjs/CascadeTree/SearchView.d.ts +17 -0
  38. package/cjs/CascadeTree/SearchView.js +106 -0
  39. package/cjs/CascadeTree/TreeView.d.ts +20 -0
  40. package/cjs/{Cascader → CascadeTree}/TreeView.js +42 -33
  41. package/cjs/CascadeTree/hooks/index.d.ts +3 -0
  42. package/cjs/CascadeTree/hooks/index.js +12 -0
  43. package/cjs/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
  44. package/cjs/CascadeTree/hooks/usePaths.js +42 -0
  45. package/cjs/CascadeTree/hooks/useSearch.d.ts +17 -0
  46. package/cjs/CascadeTree/hooks/useSearch.js +59 -0
  47. package/cjs/CascadeTree/hooks/useSelect.d.ts +23 -0
  48. package/cjs/CascadeTree/hooks/useSelect.js +64 -0
  49. package/cjs/CascadeTree/index.d.ts +4 -0
  50. package/cjs/CascadeTree/index.js +9 -0
  51. package/cjs/CascadeTree/types.d.ts +66 -0
  52. package/cjs/CascadeTree/types.js +2 -0
  53. package/cjs/CascadeTree/utils.d.ts +32 -0
  54. package/cjs/CascadeTree/utils.js +66 -0
  55. package/cjs/Cascader/Cascader.d.ts +57 -26
  56. package/cjs/Cascader/Cascader.js +180 -247
  57. package/cjs/Cascader/useActive.d.ts +15 -0
  58. package/cjs/Cascader/useActive.js +43 -0
  59. package/cjs/Checkbox/Checkbox.d.ts +67 -25
  60. package/cjs/Checkbox/Checkbox.js +36 -26
  61. package/cjs/InlineEdit/InlineEdit.d.ts +1 -1
  62. package/cjs/InputPicker/InputPicker.js +2 -2
  63. package/cjs/InputPicker/InputPickerContext.d.ts +1 -1
  64. package/cjs/Loader/Loader.js +5 -4
  65. package/cjs/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
  66. package/cjs/MultiCascadeTree/MultiCascadeTree.js +131 -0
  67. package/cjs/MultiCascadeTree/SearchView.d.ts +17 -0
  68. package/cjs/MultiCascadeTree/SearchView.js +117 -0
  69. package/cjs/MultiCascadeTree/TreeView.d.ts +22 -0
  70. package/cjs/{MultiCascader → MultiCascadeTree}/TreeView.js +22 -21
  71. package/cjs/MultiCascadeTree/hooks/index.d.ts +5 -0
  72. package/cjs/MultiCascadeTree/hooks/index.js +16 -0
  73. package/cjs/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
  74. package/cjs/MultiCascadeTree/hooks/useCascadeValue.js +202 -0
  75. package/cjs/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
  76. package/cjs/MultiCascadeTree/hooks/useColumnData.js +52 -0
  77. package/cjs/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
  78. package/cjs/MultiCascadeTree/hooks/useFlattenData.js +33 -0
  79. package/cjs/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
  80. package/cjs/MultiCascadeTree/hooks/useSearch.js +52 -0
  81. package/cjs/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
  82. package/cjs/MultiCascadeTree/hooks/useSelect.js +83 -0
  83. package/cjs/MultiCascadeTree/index.d.ts +4 -0
  84. package/cjs/MultiCascadeTree/index.js +9 -0
  85. package/cjs/MultiCascadeTree/types.d.ts +26 -0
  86. package/cjs/MultiCascadeTree/types.js +2 -0
  87. package/cjs/MultiCascadeTree/utils.d.ts +37 -0
  88. package/cjs/MultiCascadeTree/utils.js +140 -0
  89. package/cjs/MultiCascader/MultiCascader.d.ts +57 -29
  90. package/cjs/MultiCascader/MultiCascader.js +175 -287
  91. package/cjs/Radio/Radio.d.ts +42 -16
  92. package/cjs/Radio/Radio.js +42 -37
  93. package/cjs/RadioGroup/RadioGroup.d.ts +1 -1
  94. package/cjs/RadioGroup/RadioGroup.js +3 -3
  95. package/cjs/TagPicker/index.js +1 -1
  96. package/cjs/Tree/Tree.d.ts +4 -4
  97. package/cjs/index.d.ts +6 -1
  98. package/cjs/index.js +8 -3
  99. package/cjs/internals/Picker/ListCheckItem.d.ts +2 -11
  100. package/cjs/internals/Picker/ListCheckItem.js +8 -6
  101. package/cjs/internals/Picker/PickerToggle.d.ts +4 -5
  102. package/cjs/toaster/ToastContainer.d.ts +9 -2
  103. package/cjs/toaster/index.d.ts +0 -1
  104. package/cjs/toaster/index.js +1 -3
  105. package/cjs/useToaster/index.d.ts +2 -0
  106. package/cjs/useToaster/index.js +9 -0
  107. package/cjs/{toaster → useToaster}/useToaster.d.ts +4 -4
  108. package/cjs/{toaster → useToaster}/useToaster.js +4 -4
  109. package/cjs/utils/index.d.ts +1 -0
  110. package/cjs/utils/index.js +5 -2
  111. package/dist/rsuite-no-reset-rtl.css +322 -124
  112. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  113. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  114. package/dist/rsuite-no-reset.css +322 -124
  115. package/dist/rsuite-no-reset.min.css +1 -1
  116. package/dist/rsuite-no-reset.min.css.map +1 -1
  117. package/dist/rsuite-rtl.css +322 -124
  118. package/dist/rsuite-rtl.min.css +1 -1
  119. package/dist/rsuite-rtl.min.css.map +1 -1
  120. package/dist/rsuite.css +322 -124
  121. package/dist/rsuite.js +248 -50
  122. package/dist/rsuite.js.map +1 -1
  123. package/dist/rsuite.min.css +1 -1
  124. package/dist/rsuite.min.css.map +1 -1
  125. package/dist/rsuite.min.js +1 -1
  126. package/dist/rsuite.min.js.map +1 -1
  127. package/esm/@types/common.d.ts +12 -14
  128. package/esm/CascadeTree/CascadeTree.d.ts +16 -0
  129. package/esm/CascadeTree/CascadeTree.js +167 -0
  130. package/esm/CascadeTree/SearchView.d.ts +17 -0
  131. package/esm/CascadeTree/SearchView.js +100 -0
  132. package/esm/CascadeTree/TreeView.d.ts +20 -0
  133. package/esm/{Cascader → CascadeTree}/TreeView.js +42 -33
  134. package/esm/CascadeTree/hooks/index.d.ts +3 -0
  135. package/esm/CascadeTree/hooks/index.js +4 -0
  136. package/esm/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
  137. package/esm/CascadeTree/hooks/usePaths.js +36 -0
  138. package/esm/CascadeTree/hooks/useSearch.d.ts +17 -0
  139. package/esm/CascadeTree/hooks/useSearch.js +54 -0
  140. package/esm/CascadeTree/hooks/useSelect.d.ts +23 -0
  141. package/esm/CascadeTree/hooks/useSelect.js +59 -0
  142. package/esm/CascadeTree/index.d.ts +4 -0
  143. package/esm/CascadeTree/index.js +3 -0
  144. package/esm/CascadeTree/types.d.ts +66 -0
  145. package/esm/CascadeTree/types.js +1 -0
  146. package/esm/CascadeTree/utils.d.ts +32 -0
  147. package/esm/CascadeTree/utils.js +61 -0
  148. package/esm/Cascader/Cascader.d.ts +57 -26
  149. package/esm/Cascader/Cascader.js +167 -233
  150. package/esm/Cascader/useActive.d.ts +15 -0
  151. package/esm/Cascader/useActive.js +37 -0
  152. package/esm/Checkbox/Checkbox.d.ts +67 -25
  153. package/esm/Checkbox/Checkbox.js +38 -28
  154. package/esm/InlineEdit/InlineEdit.d.ts +1 -1
  155. package/esm/InputPicker/InputPicker.js +2 -2
  156. package/esm/InputPicker/InputPickerContext.d.ts +1 -1
  157. package/esm/Loader/Loader.js +6 -5
  158. package/esm/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
  159. package/esm/MultiCascadeTree/MultiCascadeTree.js +125 -0
  160. package/esm/MultiCascadeTree/SearchView.d.ts +17 -0
  161. package/esm/MultiCascadeTree/SearchView.js +111 -0
  162. package/esm/MultiCascadeTree/TreeView.d.ts +22 -0
  163. package/esm/{MultiCascader → MultiCascadeTree}/TreeView.js +22 -21
  164. package/esm/MultiCascadeTree/hooks/index.d.ts +5 -0
  165. package/esm/MultiCascadeTree/hooks/index.js +6 -0
  166. package/esm/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
  167. package/esm/MultiCascadeTree/hooks/useCascadeValue.js +197 -0
  168. package/esm/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
  169. package/esm/MultiCascadeTree/hooks/useColumnData.js +46 -0
  170. package/esm/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
  171. package/esm/MultiCascadeTree/hooks/useFlattenData.js +28 -0
  172. package/esm/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
  173. package/esm/MultiCascadeTree/hooks/useSearch.js +47 -0
  174. package/esm/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
  175. package/esm/MultiCascadeTree/hooks/useSelect.js +77 -0
  176. package/esm/MultiCascadeTree/index.d.ts +4 -0
  177. package/esm/MultiCascadeTree/index.js +3 -0
  178. package/esm/MultiCascadeTree/types.d.ts +26 -0
  179. package/esm/MultiCascadeTree/types.js +1 -0
  180. package/esm/MultiCascadeTree/utils.d.ts +37 -0
  181. package/esm/MultiCascadeTree/utils.js +130 -0
  182. package/esm/MultiCascader/MultiCascader.d.ts +57 -29
  183. package/esm/MultiCascader/MultiCascader.js +168 -279
  184. package/esm/Radio/Radio.d.ts +42 -16
  185. package/esm/Radio/Radio.js +43 -38
  186. package/esm/RadioGroup/RadioGroup.d.ts +1 -1
  187. package/esm/RadioGroup/RadioGroup.js +5 -5
  188. package/esm/TagPicker/index.js +1 -1
  189. package/esm/Tree/Tree.d.ts +4 -4
  190. package/esm/index.d.ts +6 -1
  191. package/esm/index.js +5 -1
  192. package/esm/internals/Picker/ListCheckItem.d.ts +2 -11
  193. package/esm/internals/Picker/ListCheckItem.js +8 -6
  194. package/esm/internals/Picker/PickerToggle.d.ts +4 -5
  195. package/esm/toaster/ToastContainer.d.ts +9 -2
  196. package/esm/toaster/index.d.ts +0 -1
  197. package/esm/toaster/index.js +0 -1
  198. package/esm/useToaster/index.d.ts +2 -0
  199. package/esm/useToaster/index.js +3 -0
  200. package/esm/{toaster → useToaster}/useToaster.d.ts +4 -4
  201. package/esm/{toaster → useToaster}/useToaster.js +4 -4
  202. package/esm/utils/index.d.ts +1 -0
  203. package/esm/utils/index.js +2 -1
  204. package/internals/Picker/styles/index.less +1 -1
  205. package/package.json +1 -1
  206. package/styles/index.less +2 -0
  207. package/useToaster/package.json +7 -0
  208. package/useToaster/styles/index.css +239 -0
  209. package/useToaster/styles/index.less +1 -0
  210. package/cjs/Cascader/DropdownMenu.d.ts +0 -24
  211. package/cjs/Cascader/DropdownMenu.js +0 -175
  212. package/cjs/Cascader/TreeView.d.ts +0 -24
  213. package/cjs/Cascader/utils.js +0 -79
  214. package/cjs/MultiCascader/TreeView.d.ts +0 -25
  215. package/cjs/MultiCascader/utils.d.ts +0 -71
  216. package/cjs/MultiCascader/utils.js +0 -382
  217. package/esm/Cascader/DropdownMenu.d.ts +0 -24
  218. package/esm/Cascader/DropdownMenu.js +0 -168
  219. package/esm/Cascader/TreeView.d.ts +0 -24
  220. package/esm/Cascader/utils.js +0 -74
  221. package/esm/MultiCascader/TreeView.d.ts +0 -25
  222. package/esm/MultiCascader/utils.d.ts +0 -71
  223. package/esm/MultiCascader/utils.js +0 -369
@@ -9,15 +9,11 @@ import { useClassNames, shallowEqual, useCustom, useEventCallback } from '../uti
9
9
  import { ListCheckItem, useCombobox } from '../internals/Picker';
10
10
  import { isSomeParentChecked, isSomeChildChecked } from './utils';
11
11
  var emptyArray = [];
12
-
13
- /**
14
- * TODO: reuse Menu from Cascader for consistent behavior
15
- */
16
12
  var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
17
13
  var _props$as = props.as,
18
14
  Component = _props$as === void 0 ? 'div' : _props$as,
19
15
  _props$classPrefix = props.classPrefix,
20
- classPrefix = _props$classPrefix === void 0 ? 'menu' : _props$classPrefix,
16
+ classPrefix = _props$classPrefix === void 0 ? 'tree' : _props$classPrefix,
21
17
  className = props.className,
22
18
  cascade = props.cascade,
23
19
  _props$cascadeData = props.cascadeData,
@@ -28,10 +24,10 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
28
24
  childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
29
25
  _props$disabledItemVa = props.disabledItemValues,
30
26
  disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
31
- _props$menuWidth = props.menuWidth,
32
- menuWidth = _props$menuWidth === void 0 ? 156 : _props$menuWidth,
33
- _props$menuHeight = props.menuHeight,
34
- menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,
27
+ _props$columnWidth = props.columnWidth,
28
+ columnWidth = _props$columnWidth === void 0 ? 156 : _props$columnWidth,
29
+ _props$columnHeight = props.columnHeight,
30
+ columnHeight = _props$columnHeight === void 0 ? 200 : _props$columnHeight,
35
31
  _props$uncheckableIte = props.uncheckableItemValues,
36
32
  uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,
37
33
  value = props.value,
@@ -40,11 +36,11 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
40
36
  _props$labelKey = props.labelKey,
41
37
  labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
42
38
  style = props.style,
43
- renderMenuItem = props.renderMenuItem,
44
- renderMenu = props.renderMenu,
39
+ renderTreeNode = props.renderTreeNode,
40
+ renderColumn = props.renderColumn,
45
41
  _onCheck = props.onCheck,
46
42
  onSelect = props.onSelect,
47
- rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
43
+ rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "columnWidth", "columnHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderTreeNode", "renderColumn", "onCheck", "onSelect"]);
48
44
  var _useClassNames = useClassNames(classPrefix),
49
45
  merge = _useClassNames.merge,
50
46
  prefix = _useClassNames.prefix;
@@ -120,20 +116,21 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
120
116
  onCheck: function onCheck(_value, event, checked) {
121
117
  return _onCheck === null || _onCheck === void 0 ? void 0 : _onCheck(node, event, checked);
122
118
  },
123
- checkable: !uncheckable
124
- }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/React.createElement(Icon, {
119
+ checkable: !uncheckable,
120
+ labelClickable: false
121
+ }, renderTreeNode ? renderTreeNode(label, node) : label, children ? /*#__PURE__*/React.createElement(Icon, {
125
122
  className: prefix('caret'),
126
123
  spin: node.loading
127
124
  }) : null);
128
125
  };
129
126
  var columnStyles = {
130
- height: menuHeight,
131
- width: menuWidth
127
+ height: columnHeight,
128
+ width: columnWidth
132
129
  };
133
130
  var cascadeNodes = cascadeData.map(function (children, layer) {
134
131
  var uncheckableCount = 0;
135
132
  var onlyKey = layer + "_" + children.length;
136
- var menu = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
133
+ var childNodes = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
137
134
  var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
138
135
  return shallowEqual(uncheckableValue, item[valueKey]);
139
136
  });
@@ -150,7 +147,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
150
147
  size: children.length
151
148
  });
152
149
  }));
153
- var parentNode = cascadePaths[layer - 1];
150
+ var parentItem = cascadePaths[layer - 1];
154
151
  var columnClasses = prefix('column', {
155
152
  'column-uncheckable': uncheckableCount === children.length
156
153
  });
@@ -160,14 +157,18 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
160
157
  className: columnClasses,
161
158
  "data-layer": layer,
162
159
  style: columnStyles
163
- }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
160
+ }, renderColumn ? renderColumn(childNodes, {
161
+ items: children,
162
+ parentItem: parentItem,
163
+ layer: layer
164
+ }) : childNodes);
164
165
  });
165
166
  var styles = _extends({}, style, {
166
- width: cascadeData.length * menuWidth
167
+ width: cascadeData.length * columnWidth
167
168
  });
168
169
  return /*#__PURE__*/React.createElement(Component, _extends({
169
170
  role: "tree",
170
- id: id + "-" + popupType,
171
+ id: id ? id + "-" + popupType : undefined,
171
172
  "aria-labelledby": labelId,
172
173
  "aria-multiselectable": multiple
173
174
  }, 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,6 @@
1
+ 'use client';
2
+ export { default as useFlattenData } from './useFlattenData';
3
+ export { default as useSelect } from './useSelect';
4
+ export { default as useColumnData } from './useColumnData';
5
+ export { default as useCascadeValue } from './useCascadeValue';
6
+ export { default as useSearch } from './useSearch';
@@ -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;
@@ -0,0 +1,197 @@
1
+ 'use client';
2
+ import { useState, useEffect, useCallback } from 'react';
3
+ import uniq from 'lodash/uniq';
4
+ import remove from 'lodash/remove';
5
+ import { useEventCallback } from '../../utils';
6
+ import { getParents, removeAllChildrenValue, getOtherItemValuesByUnselectChild } from '../utils';
7
+
8
+ /**
9
+ * A hook that converts the value into a cascading value
10
+ * @param props
11
+ * @param flattenData
12
+ */
13
+ function useCascadeValue(props, flattenData) {
14
+ var valueKey = props.valueKey,
15
+ childrenKey = props.childrenKey,
16
+ uncheckableItemValues = props.uncheckableItemValues,
17
+ cascade = props.cascade,
18
+ valueProp = props.value,
19
+ onChange = props.onChange,
20
+ onCheck = props.onCheck;
21
+ /**
22
+ * Get the values of all children
23
+ */
24
+ var getChildrenValue = useCallback(function (item) {
25
+ var values = [];
26
+ if (!item[childrenKey]) {
27
+ return values;
28
+ }
29
+ item[childrenKey].forEach(function (n) {
30
+ if (uncheckableItemValues && !uncheckableItemValues.some(function (v) {
31
+ return v === n[valueKey];
32
+ })) {
33
+ values.push(n[valueKey]);
34
+ }
35
+ values = values.concat(getChildrenValue(n));
36
+ });
37
+ return values;
38
+ }, [childrenKey, uncheckableItemValues, valueKey]);
39
+ var splitValue = useCallback(function (item, checked, value) {
40
+ var itemValue = item[valueKey];
41
+ var childrenValue = getChildrenValue(item);
42
+ var parents = getParents(item);
43
+ var nextValue = [].concat(value);
44
+ var removedValue = [];
45
+ if (checked) {
46
+ nextValue.push(itemValue);
47
+
48
+ // Delete all values under the current node
49
+ removedValue = removedValue.concat(removeAllChildrenValue(nextValue, item, {
50
+ valueKey: valueKey,
51
+ childrenKey: childrenKey
52
+ }) || []);
53
+
54
+ // Traverse all ancestor nodes of the current node
55
+ // Then determine whether all the child nodes of these nodes are selected, and then they themselves must be selected
56
+ var _loop = function _loop(i) {
57
+ // Whether the parent node can be selected
58
+ var isCheckableParent = !(uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (v) {
59
+ return v === parents[i][valueKey];
60
+ }));
61
+ if (isCheckableParent) {
62
+ var isCheckAll = parents[i][childrenKey]
63
+ // Filter out options that are marked as not selectable
64
+ .filter(function (n) {
65
+ return !(uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (v) {
66
+ return v === n[valueKey];
67
+ }));
68
+ })
69
+ // Check if all nodes are selected
70
+ .every(function (n) {
71
+ return nextValue.some(function (v) {
72
+ return v === n[valueKey];
73
+ });
74
+ });
75
+ if (isCheckAll) {
76
+ // Add parent node value
77
+ nextValue.push(parents[i][valueKey]);
78
+
79
+ // Delete all values under the parent node
80
+ removedValue = removedValue.concat(removeAllChildrenValue(nextValue, parents[i], {
81
+ valueKey: valueKey,
82
+ childrenKey: childrenKey
83
+ }) || []);
84
+ }
85
+ }
86
+ };
87
+ for (var i = 0; i < parents.length; i++) {
88
+ _loop(i);
89
+ }
90
+ } else {
91
+ var tempValue = childrenValue.concat(parents.map(function (item) {
92
+ return item[valueKey];
93
+ }));
94
+ nextValue = nextValue.concat(getOtherItemValuesByUnselectChild(item, nextValue, {
95
+ valueKey: valueKey,
96
+ childrenKey: childrenKey
97
+ }));
98
+
99
+ // Delete related child and parent nodes
100
+ removedValue = remove(nextValue, function (v) {
101
+ // Delete yourself
102
+ if (v === itemValue) {
103
+ return true;
104
+ }
105
+ return tempValue.some(function (n) {
106
+ return n === v;
107
+ });
108
+ });
109
+ }
110
+ var uniqValue = uniq(nextValue);
111
+ var uniqRemovedValue = uniq(removedValue);
112
+ return {
113
+ value: uniqValue,
114
+ removedValue: uniqRemovedValue
115
+ };
116
+ }, [valueKey, childrenKey, uncheckableItemValues, getChildrenValue]);
117
+ var transformValue = useCallback(function (value) {
118
+ if (value === void 0) {
119
+ value = [];
120
+ }
121
+ if (!cascade) {
122
+ return value;
123
+ }
124
+ var tempRemovedValue = [];
125
+ var nextValue = [];
126
+ var _loop2 = function _loop2(i) {
127
+ // If the value in the current value is already in the deleted list, it will not be processed
128
+ if (tempRemovedValue.some(function (v) {
129
+ return v === value[i];
130
+ })) {
131
+ return "continue";
132
+ }
133
+ var item = flattenData.find(function (v) {
134
+ return v[valueKey] === value[i];
135
+ });
136
+ if (!item) {
137
+ return "continue";
138
+ }
139
+ var sv = splitValue(item, true, value);
140
+ tempRemovedValue = uniq(tempRemovedValue.concat(sv.removedValue));
141
+
142
+ // Get all relevant values
143
+ nextValue = uniq(nextValue.concat(sv.value));
144
+ };
145
+ for (var i = 0; i < value.length; i++) {
146
+ var _ret = _loop2(i);
147
+ if (_ret === "continue") continue;
148
+ }
149
+
150
+ // Finally traverse all nextValue, and delete if its parent node is also nextValue
151
+ return nextValue.filter(function (v) {
152
+ var item = flattenData.find(function (n) {
153
+ return n[valueKey] === v;
154
+ });
155
+ if (item !== null && item !== void 0 && item.parent && nextValue.some(function (v) {
156
+ var _item$parent;
157
+ return v === ((_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[valueKey]);
158
+ })) {
159
+ return false;
160
+ }
161
+ return true;
162
+ });
163
+ }, [cascade, flattenData, splitValue, valueKey]);
164
+ var _useState = useState(transformValue(valueProp) || []),
165
+ value = _useState[0],
166
+ setValue = _useState[1];
167
+ useEffect(function () {
168
+ // Update value when valueProp is updated.
169
+ setValue(transformValue(valueProp) || []);
170
+ }, [transformValue, valueProp]);
171
+ var handleCheck = useEventCallback(function (node, event, checked) {
172
+ var nodeValue = node[valueKey];
173
+ var nextValue = [];
174
+ if (cascade) {
175
+ nextValue = splitValue(node, checked, value).value;
176
+ } else {
177
+ nextValue = [].concat(value);
178
+ if (checked) {
179
+ nextValue.push(nodeValue);
180
+ } else {
181
+ nextValue = nextValue.filter(function (n) {
182
+ return n !== nodeValue;
183
+ });
184
+ }
185
+ }
186
+ setValue(nextValue);
187
+ onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
188
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
189
+ });
190
+ return {
191
+ value: value,
192
+ setValue: setValue,
193
+ splitValue: splitValue,
194
+ handleCheck: handleCheck
195
+ };
196
+ }
197
+ export default useCascadeValue;
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ declare type MayHasParent<T extends Record<string, unknown>> = T & {
3
+ parent?: MayHasParent<T>;
4
+ };
5
+ /**
6
+ * A hook for column data
7
+ * @param flattenData
8
+ */
9
+ declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
10
+ columnData: (readonly T[])[];
11
+ addColumn: (column: T[], index: number) => void;
12
+ removeColumnByIndex: (index: number) => void;
13
+ setColumnData: import("react").Dispatch<import("react").SetStateAction<(readonly T[])[]>>;
14
+ enforceUpdateColumnData: (nextData: T[]) => void;
15
+ };
16
+ export default useColumnData;
@@ -0,0 +1,46 @@
1
+ 'use client';
2
+ import { useState } from 'react';
3
+ import slice from 'lodash/slice';
4
+ import { UNSAFE_flattenTree } from '../../utils/treeUtils';
5
+ /**
6
+ * A hook for column data
7
+ * @param flattenData
8
+ */
9
+ function useColumnData(flattenData) {
10
+ // The columns displayed in the cascading panel.
11
+ var _useState = useState([flattenData.filter(function (item) {
12
+ return !item.parent;
13
+ })]),
14
+ columnData = _useState[0],
15
+ setColumnData = _useState[1];
16
+ /**
17
+ * Add a list of options to the cascading panel. Used for lazy loading options.
18
+ * @param column
19
+ * @param index The index of the current column.
20
+ */
21
+ function addColumn(column, index) {
22
+ setColumnData([].concat(slice(columnData, 0, index), [column]));
23
+ }
24
+
25
+ /**
26
+ * Remove subsequent columns of the specified column
27
+ * @param index
28
+ */
29
+ function removeColumnByIndex(index) {
30
+ setColumnData([].concat(slice(columnData, 0, index)));
31
+ }
32
+ function enforceUpdateColumnData(nextData) {
33
+ var nextFlattenData = UNSAFE_flattenTree(nextData);
34
+ setColumnData([nextFlattenData.filter(function (item) {
35
+ return !item.parent;
36
+ })]);
37
+ }
38
+ return {
39
+ columnData: columnData,
40
+ addColumn: addColumn,
41
+ removeColumnByIndex: removeColumnByIndex,
42
+ setColumnData: setColumnData,
43
+ enforceUpdateColumnData: enforceUpdateColumnData
44
+ };
45
+ }
46
+ export default useColumnData;
@@ -0,0 +1,9 @@
1
+ import { ItemKeys } from '../types';
2
+ /**
3
+ * A hook to flatten tree structure data
4
+ */
5
+ declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
6
+ addFlattenData: (children: T[], parent: T) => void;
7
+ flattenData: T[];
8
+ };
9
+ export default useFlattenData;
@@ -0,0 +1,28 @@
1
+ 'use client';
2
+ import { useState, useCallback, useEffect } from 'react';
3
+ import { UNSAFE_flattenTree } from '../../utils/treeUtils';
4
+ import { attachParent } from '../../utils/attachParent';
5
+ /**
6
+ * A hook to flatten tree structure data
7
+ */
8
+ function useFlattenData(data, itemKeys) {
9
+ var childrenKey = itemKeys.childrenKey;
10
+ var _useState = useState(UNSAFE_flattenTree(data, itemKeys.childrenKey)),
11
+ flattenData = _useState[0],
12
+ setFlattenData = _useState[1];
13
+ var addFlattenData = useCallback(function (children, parent) {
14
+ var nodes = children.map(function (child) {
15
+ return attachParent(child, parent);
16
+ });
17
+ parent[childrenKey] = nodes;
18
+ setFlattenData([].concat(flattenData, nodes));
19
+ }, [childrenKey, flattenData]);
20
+ useEffect(function () {
21
+ setFlattenData(UNSAFE_flattenTree(data, itemKeys.childrenKey));
22
+ }, [data, itemKeys.childrenKey]);
23
+ return {
24
+ addFlattenData: addFlattenData,
25
+ flattenData: flattenData
26
+ };
27
+ }
28
+ export default useFlattenData;
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { ItemDataType } from '../../@types/common';
3
+ interface SearchPanelProps<T> {
4
+ labelKey: string;
5
+ valueKey: string;
6
+ childrenKey: string;
7
+ flattenedData: ItemDataType<T>[];
8
+ uncheckableItemValues?: any[];
9
+ onSearch?: (value: string, event: React.SyntheticEvent) => void;
10
+ }
11
+ declare function useSearch<T>(props: SearchPanelProps<T>): {
12
+ searchKeyword: string;
13
+ setSearchKeyword: import("react").Dispatch<import("react").SetStateAction<string>>;
14
+ items: ItemDataType<T>[];
15
+ handleSearch: (...args: any[]) => any;
16
+ };
17
+ export default useSearch;
@@ -0,0 +1,47 @@
1
+ 'use client';
2
+ import { useState } from 'react';
3
+ import { getSafeRegExpString, useEventCallback } from '../../utils';
4
+ function useSearch(props) {
5
+ var _useState = useState(''),
6
+ searchKeyword = _useState[0],
7
+ setSearchKeyword = _useState[1];
8
+ var labelKey = props.labelKey,
9
+ valueKey = props.valueKey,
10
+ flattenedData = props.flattenedData,
11
+ uncheckableItemValues = props.uncheckableItemValues,
12
+ onSearch = props.onSearch;
13
+ var getSearchResult = function getSearchResult() {
14
+ var items = [];
15
+ var result = flattenedData.filter(function (item) {
16
+ if (uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (value) {
17
+ return item[valueKey] === value;
18
+ })) {
19
+ return false;
20
+ }
21
+ if (item[labelKey].match(new RegExp(getSafeRegExpString(searchKeyword), 'i'))) {
22
+ return true;
23
+ }
24
+ return false;
25
+ });
26
+ for (var i = 0; i < result.length; i++) {
27
+ items.push(result[i]);
28
+
29
+ // A maximum of 100 search results are returned.
30
+ if (i === 99) {
31
+ return items;
32
+ }
33
+ }
34
+ return items;
35
+ };
36
+ var handleSearch = useEventCallback(function (value, event) {
37
+ setSearchKeyword(value);
38
+ onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
39
+ });
40
+ return {
41
+ searchKeyword: searchKeyword,
42
+ setSearchKeyword: setSearchKeyword,
43
+ items: getSearchResult(),
44
+ handleSearch: handleSearch
45
+ };
46
+ }
47
+ export default useSearch;
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { type ItemDataType } from '../../@types/common';
3
+ export interface UseSelectProps<T> {
4
+ data: ItemDataType<T>[];
5
+ childrenKey: string;
6
+ labelKey: string;
7
+ valueKey: string;
8
+ onSelect?: (node: ItemDataType<T>, cascadePaths: ItemDataType<T>[], event: React.SyntheticEvent) => void;
9
+ getChildren?: (node: ItemDataType<T>) => ItemDataType<T>[] | Promise<ItemDataType<T>[]>;
10
+ }
11
+ declare const useSelect: <T>(props: UseSelectProps<T>) => {
12
+ columnData: (readonly ItemDataType<T>[])[];
13
+ setColumnData: React.Dispatch<React.SetStateAction<(readonly ItemDataType<T>[])[]>>;
14
+ flattenData: ItemDataType<T>[];
15
+ selectedPaths: ItemDataType<T>[] | undefined;
16
+ setSelectedPaths: React.Dispatch<React.SetStateAction<ItemDataType<T>[] | undefined>>;
17
+ handleSelect: (...args: any[]) => any;
18
+ };
19
+ export default useSelect;
@@ -0,0 +1,77 @@
1
+ 'use client';
2
+ import { useState } from 'react';
3
+ import { useEventCallback, useUpdateEffect, useIsMounted } from '../../utils';
4
+ import useFlattenData from './useFlattenData';
5
+ import useColumnData from './useColumnData';
6
+ var useSelect = function useSelect(props) {
7
+ var data = props.data,
8
+ childrenKey = props.childrenKey,
9
+ labelKey = props.labelKey,
10
+ valueKey = props.valueKey,
11
+ onSelect = props.onSelect,
12
+ getChildren = props.getChildren;
13
+ var itemKeys = {
14
+ childrenKey: childrenKey,
15
+ labelKey: labelKey,
16
+ valueKey: valueKey
17
+ };
18
+ var _useFlattenData = useFlattenData(data, itemKeys),
19
+ flattenData = _useFlattenData.flattenData,
20
+ addFlattenData = _useFlattenData.addFlattenData; // The columns displayed in the cascading panel.
21
+ var _useColumnData = useColumnData(flattenData),
22
+ columnData = _useColumnData.columnData,
23
+ addColumn = _useColumnData.addColumn,
24
+ setColumnData = _useColumnData.setColumnData,
25
+ removeColumnByIndex = _useColumnData.removeColumnByIndex,
26
+ enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;
27
+ useUpdateEffect(function () {
28
+ enforceUpdateColumnData(data);
29
+ }, [data]);
30
+ var isMounted = useIsMounted();
31
+
32
+ // The path after cascading data selection.
33
+ var _useState = useState(),
34
+ selectedPaths = _useState[0],
35
+ setSelectedPaths = _useState[1];
36
+ var handleSelect = useEventCallback(function (node, cascadePaths, event) {
37
+ var _node$childrenKey, _node$childrenKey2;
38
+ setSelectedPaths(cascadePaths);
39
+ var columnIndex = cascadePaths.length;
40
+
41
+ // Lazy load node's children
42
+ if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {
43
+ node.loading = true;
44
+ var children = getChildren(node);
45
+ if (children instanceof Promise) {
46
+ children.then(function (data) {
47
+ node.loading = false;
48
+ node[childrenKey] = data;
49
+ if (isMounted()) {
50
+ addFlattenData(data, node);
51
+ addColumn(data, columnIndex);
52
+ }
53
+ });
54
+ } else {
55
+ node.loading = false;
56
+ node[childrenKey] = children;
57
+ addFlattenData(children, node);
58
+ addColumn(children, columnIndex);
59
+ }
60
+ } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {
61
+ addColumn(node[childrenKey], columnIndex);
62
+ } else {
63
+ // Removes subsequent columns of the current column when the clicked node is a leaf node.
64
+ removeColumnByIndex(columnIndex);
65
+ }
66
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
67
+ });
68
+ return {
69
+ columnData: columnData,
70
+ setColumnData: setColumnData,
71
+ flattenData: flattenData,
72
+ selectedPaths: selectedPaths,
73
+ setSelectedPaths: setSelectedPaths,
74
+ handleSelect: handleSelect
75
+ };
76
+ };
77
+ export default useSelect;
@@ -0,0 +1,4 @@
1
+ import MultiCascadeTree from './MultiCascadeTree';
2
+ export type { ItemDataType } from '../@types/common';
3
+ export type { MultiCascadeTreeProps } from './types';
4
+ export default MultiCascadeTree;
@@ -0,0 +1,3 @@
1
+ 'use client';
2
+ import MultiCascadeTree from './MultiCascadeTree';
3
+ export default MultiCascadeTree;
@@ -0,0 +1,26 @@
1
+ /// <reference types="react" />
2
+ import type { CascadeTreeProps } from '../CascadeTree/types';
3
+ import type { ItemDataType, ToArray, WithAsProps } from '../@types/common';
4
+ export interface ItemKeys {
5
+ valueKey: string;
6
+ labelKey: string;
7
+ childrenKey: string;
8
+ }
9
+ export interface MultiCascadeTreeProps<T, V = T[]> extends WithAsProps, CascadeTreeProps<T, V> {
10
+ /**
11
+ * When set to true, selecting a child node will update the state of the parent node.
12
+ */
13
+ cascade?: boolean;
14
+ /**
15
+ * Disabled items
16
+ */
17
+ disabledItemValues?: ToArray<NonNullable<T>>;
18
+ /**
19
+ * Set the option value for the check box not to be rendered
20
+ */
21
+ uncheckableItemValues?: T[];
22
+ /**
23
+ * Called after the checkbox state changes.
24
+ */
25
+ onCheck?: (value: T[], node: ItemDataType<T>, checked: boolean, event: React.SyntheticEvent) => void;
26
+ }
@@ -0,0 +1 @@
1
+ 'use client';