rsuite 5.56.0 → 5.58.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 (272) hide show
  1. package/Accordion/styles/index.css +30 -0
  2. package/AutoComplete/styles/index.css +0 -137
  3. package/CHANGELOG.md +32 -0
  4. package/CascadeTree/package.json +7 -0
  5. package/CascadeTree/styles/index.css +273 -0
  6. package/CascadeTree/styles/index.less +77 -0
  7. package/CascadeTree/styles/search.less +45 -0
  8. package/Cascader/styles/index.css +187 -329
  9. package/Cascader/styles/index.less +1 -122
  10. package/CheckPicker/styles/index.css +0 -137
  11. package/CheckTree/styles/index.css +0 -137
  12. package/CheckTreePicker/styles/index.css +0 -137
  13. package/DatePicker/styles/index.css +0 -137
  14. package/DateRangePicker/styles/index.css +0 -137
  15. package/Dropdown/styles/index.css +35 -8
  16. package/Dropdown/styles/index.less +24 -13
  17. package/Heading/package.json +7 -0
  18. package/Heading/styles/index.css +42 -0
  19. package/Heading/styles/index.less +41 -0
  20. package/HeadingGroup/package.json +7 -0
  21. package/HeadingGroup/styles/index.css +5 -0
  22. package/HeadingGroup/styles/index.less +3 -0
  23. package/InputPicker/styles/index.css +29 -146
  24. package/InputPicker/styles/index.less +28 -12
  25. package/InputPicker/styles/mixin.less +7 -0
  26. package/MultiCascadeTree/package.json +7 -0
  27. package/MultiCascadeTree/styles/index.css +3564 -0
  28. package/MultiCascadeTree/styles/index.less +37 -0
  29. package/MultiCascader/styles/index.css +72 -206
  30. package/MultiCascader/styles/index.less +11 -31
  31. package/Nav/styles/index.css +35 -8
  32. package/Navbar/styles/index.css +35 -8
  33. package/Pagination/styles/index.css +0 -137
  34. package/Panel/styles/index.css +30 -0
  35. package/Panel/styles/index.less +1 -0
  36. package/Popover/styles/index.css +30 -0
  37. package/Popover/styles/index.less +3 -2
  38. package/SelectPicker/styles/index.css +0 -137
  39. package/Tabs/styles/index.css +35 -8
  40. package/TagInput/styles/index.css +132 -150
  41. package/TagPicker/styles/index.css +132 -150
  42. package/TagPicker/styles/index.less +57 -5
  43. package/TagPicker/styles/mixin.less +21 -0
  44. package/Text/package.json +7 -0
  45. package/Text/styles/index.css +192 -0
  46. package/Text/styles/index.less +117 -0
  47. package/cjs/@types/common.d.ts +12 -14
  48. package/cjs/CascadeTree/CascadeTree.d.ts +16 -0
  49. package/cjs/CascadeTree/CascadeTree.js +174 -0
  50. package/cjs/CascadeTree/SearchView.d.ts +17 -0
  51. package/cjs/CascadeTree/SearchView.js +106 -0
  52. package/cjs/CascadeTree/TreeView.d.ts +20 -0
  53. package/cjs/{Cascader → CascadeTree}/TreeView.js +42 -33
  54. package/cjs/CascadeTree/hooks/index.d.ts +3 -0
  55. package/cjs/CascadeTree/hooks/index.js +12 -0
  56. package/cjs/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
  57. package/cjs/CascadeTree/hooks/usePaths.js +42 -0
  58. package/cjs/CascadeTree/hooks/useSearch.d.ts +17 -0
  59. package/cjs/CascadeTree/hooks/useSearch.js +59 -0
  60. package/cjs/CascadeTree/hooks/useSelect.d.ts +23 -0
  61. package/cjs/CascadeTree/hooks/useSelect.js +64 -0
  62. package/cjs/CascadeTree/index.d.ts +4 -0
  63. package/cjs/CascadeTree/index.js +9 -0
  64. package/cjs/CascadeTree/types.d.ts +66 -0
  65. package/cjs/CascadeTree/types.js +2 -0
  66. package/cjs/CascadeTree/utils.d.ts +32 -0
  67. package/cjs/CascadeTree/utils.js +66 -0
  68. package/cjs/Cascader/Cascader.d.ts +57 -26
  69. package/cjs/Cascader/Cascader.js +178 -249
  70. package/cjs/Cascader/useActive.d.ts +15 -0
  71. package/cjs/Cascader/useActive.js +43 -0
  72. package/cjs/CheckPicker/CheckPicker.js +2 -9
  73. package/cjs/CheckTreePicker/CheckTreePicker.js +2 -10
  74. package/cjs/DatePicker/DatePicker.js +5 -5
  75. package/cjs/DateRangePicker/DateRangePicker.js +3 -5
  76. package/cjs/Dropdown/DropdownItem.d.ts +10 -2
  77. package/cjs/Dropdown/DropdownItem.js +12 -3
  78. package/cjs/Heading/Heading.d.ts +16 -0
  79. package/cjs/Heading/Heading.js +44 -0
  80. package/cjs/Heading/index.d.ts +3 -0
  81. package/cjs/Heading/index.js +10 -0
  82. package/cjs/HeadingGroup/HeadingGroup.d.ts +8 -0
  83. package/cjs/HeadingGroup/HeadingGroup.js +17 -0
  84. package/cjs/HeadingGroup/index.d.ts +3 -0
  85. package/cjs/HeadingGroup/index.js +9 -0
  86. package/cjs/InlineEdit/InlineEdit.d.ts +1 -1
  87. package/cjs/InputPicker/InputPicker.js +7 -8
  88. package/cjs/Loader/Loader.js +5 -4
  89. package/cjs/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
  90. package/cjs/MultiCascadeTree/MultiCascadeTree.js +131 -0
  91. package/cjs/MultiCascadeTree/SearchView.d.ts +17 -0
  92. package/cjs/MultiCascadeTree/SearchView.js +117 -0
  93. package/cjs/MultiCascadeTree/TreeView.d.ts +22 -0
  94. package/cjs/{MultiCascader → MultiCascadeTree}/TreeView.js +20 -20
  95. package/cjs/MultiCascadeTree/hooks/index.d.ts +5 -0
  96. package/cjs/MultiCascadeTree/hooks/index.js +16 -0
  97. package/cjs/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
  98. package/cjs/MultiCascadeTree/hooks/useCascadeValue.js +202 -0
  99. package/cjs/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
  100. package/cjs/MultiCascadeTree/hooks/useColumnData.js +52 -0
  101. package/cjs/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
  102. package/cjs/MultiCascadeTree/hooks/useFlattenData.js +33 -0
  103. package/cjs/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
  104. package/cjs/MultiCascadeTree/hooks/useSearch.js +52 -0
  105. package/cjs/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
  106. package/cjs/MultiCascadeTree/hooks/useSelect.js +83 -0
  107. package/cjs/MultiCascadeTree/index.d.ts +4 -0
  108. package/cjs/MultiCascadeTree/index.js +9 -0
  109. package/cjs/MultiCascadeTree/types.d.ts +26 -0
  110. package/cjs/MultiCascadeTree/types.js +2 -0
  111. package/cjs/MultiCascadeTree/utils.d.ts +37 -0
  112. package/cjs/MultiCascadeTree/utils.js +140 -0
  113. package/cjs/MultiCascader/MultiCascader.d.ts +57 -29
  114. package/cjs/MultiCascader/MultiCascader.js +173 -289
  115. package/cjs/Panel/Panel.js +3 -1
  116. package/cjs/Popover/Popover.js +3 -1
  117. package/cjs/SelectPicker/SelectPicker.js +3 -9
  118. package/cjs/Text/Text.d.ts +47 -0
  119. package/cjs/Text/Text.js +72 -0
  120. package/cjs/Text/index.d.ts +3 -0
  121. package/cjs/Text/index.js +10 -0
  122. package/cjs/Tree/Tree.d.ts +4 -4
  123. package/cjs/TreePicker/TreePicker.js +3 -10
  124. package/cjs/index.d.ts +27 -16
  125. package/cjs/index.js +30 -19
  126. package/cjs/internals/Overlay/OverlayTrigger.js +24 -17
  127. package/cjs/internals/Picker/PickerToggle.d.ts +4 -5
  128. package/cjs/internals/Picker/PickerToggleTrigger.d.ts +1 -1
  129. package/cjs/internals/Picker/PickerToggleTrigger.js +1 -1
  130. package/cjs/internals/Picker/hooks/useToggleKeyDownEvent.d.ts +0 -2
  131. package/cjs/internals/Picker/hooks/useToggleKeyDownEvent.js +0 -4
  132. package/cjs/toaster/ToastContainer.d.ts +9 -2
  133. package/cjs/toaster/index.d.ts +0 -1
  134. package/cjs/toaster/index.js +1 -3
  135. package/cjs/useToaster/index.d.ts +2 -0
  136. package/cjs/useToaster/index.js +9 -0
  137. package/cjs/{toaster → useToaster}/useToaster.d.ts +4 -4
  138. package/cjs/{toaster → useToaster}/useToaster.js +4 -4
  139. package/cjs/utils/index.d.ts +1 -0
  140. package/cjs/utils/index.js +5 -2
  141. package/dist/rsuite-no-reset-rtl.css +393 -219
  142. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  143. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  144. package/dist/rsuite-no-reset.css +393 -219
  145. package/dist/rsuite-no-reset.min.css +1 -1
  146. package/dist/rsuite-no-reset.min.css.map +1 -1
  147. package/dist/rsuite-rtl.css +393 -219
  148. package/dist/rsuite-rtl.min.css +1 -1
  149. package/dist/rsuite-rtl.min.css.map +1 -1
  150. package/dist/rsuite.css +393 -219
  151. package/dist/rsuite.js +321 -57
  152. package/dist/rsuite.js.map +1 -1
  153. package/dist/rsuite.min.css +1 -1
  154. package/dist/rsuite.min.css.map +1 -1
  155. package/dist/rsuite.min.js +1 -1
  156. package/dist/rsuite.min.js.map +1 -1
  157. package/esm/@types/common.d.ts +12 -14
  158. package/esm/CascadeTree/CascadeTree.d.ts +16 -0
  159. package/esm/CascadeTree/CascadeTree.js +167 -0
  160. package/esm/CascadeTree/SearchView.d.ts +17 -0
  161. package/esm/CascadeTree/SearchView.js +100 -0
  162. package/esm/CascadeTree/TreeView.d.ts +20 -0
  163. package/esm/{Cascader → CascadeTree}/TreeView.js +42 -33
  164. package/esm/CascadeTree/hooks/index.d.ts +3 -0
  165. package/esm/CascadeTree/hooks/index.js +4 -0
  166. package/esm/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
  167. package/esm/CascadeTree/hooks/usePaths.js +36 -0
  168. package/esm/CascadeTree/hooks/useSearch.d.ts +17 -0
  169. package/esm/CascadeTree/hooks/useSearch.js +54 -0
  170. package/esm/CascadeTree/hooks/useSelect.d.ts +23 -0
  171. package/esm/CascadeTree/hooks/useSelect.js +59 -0
  172. package/esm/CascadeTree/index.d.ts +4 -0
  173. package/esm/CascadeTree/index.js +3 -0
  174. package/esm/CascadeTree/types.d.ts +66 -0
  175. package/esm/CascadeTree/types.js +1 -0
  176. package/esm/CascadeTree/utils.d.ts +32 -0
  177. package/esm/CascadeTree/utils.js +61 -0
  178. package/esm/Cascader/Cascader.d.ts +57 -26
  179. package/esm/Cascader/Cascader.js +165 -235
  180. package/esm/Cascader/useActive.d.ts +15 -0
  181. package/esm/Cascader/useActive.js +37 -0
  182. package/esm/CheckPicker/CheckPicker.js +2 -9
  183. package/esm/CheckTreePicker/CheckTreePicker.js +2 -10
  184. package/esm/DatePicker/DatePicker.js +6 -6
  185. package/esm/DateRangePicker/DateRangePicker.js +3 -5
  186. package/esm/Dropdown/DropdownItem.d.ts +10 -2
  187. package/esm/Dropdown/DropdownItem.js +12 -3
  188. package/esm/Heading/Heading.d.ts +16 -0
  189. package/esm/Heading/Heading.js +38 -0
  190. package/esm/Heading/index.d.ts +3 -0
  191. package/esm/Heading/index.js +4 -0
  192. package/esm/HeadingGroup/HeadingGroup.d.ts +8 -0
  193. package/esm/HeadingGroup/HeadingGroup.js +11 -0
  194. package/esm/HeadingGroup/index.d.ts +3 -0
  195. package/esm/HeadingGroup/index.js +3 -0
  196. package/esm/InlineEdit/InlineEdit.d.ts +1 -1
  197. package/esm/InputPicker/InputPicker.js +7 -8
  198. package/esm/Loader/Loader.js +6 -5
  199. package/esm/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
  200. package/esm/MultiCascadeTree/MultiCascadeTree.js +125 -0
  201. package/esm/MultiCascadeTree/SearchView.d.ts +17 -0
  202. package/esm/MultiCascadeTree/SearchView.js +111 -0
  203. package/esm/MultiCascadeTree/TreeView.d.ts +22 -0
  204. package/esm/{MultiCascader → MultiCascadeTree}/TreeView.js +20 -20
  205. package/esm/MultiCascadeTree/hooks/index.d.ts +5 -0
  206. package/esm/MultiCascadeTree/hooks/index.js +6 -0
  207. package/esm/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
  208. package/esm/MultiCascadeTree/hooks/useCascadeValue.js +197 -0
  209. package/esm/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
  210. package/esm/MultiCascadeTree/hooks/useColumnData.js +46 -0
  211. package/esm/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
  212. package/esm/MultiCascadeTree/hooks/useFlattenData.js +28 -0
  213. package/esm/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
  214. package/esm/MultiCascadeTree/hooks/useSearch.js +47 -0
  215. package/esm/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
  216. package/esm/MultiCascadeTree/hooks/useSelect.js +77 -0
  217. package/esm/MultiCascadeTree/index.d.ts +4 -0
  218. package/esm/MultiCascadeTree/index.js +3 -0
  219. package/esm/MultiCascadeTree/types.d.ts +26 -0
  220. package/esm/MultiCascadeTree/types.js +1 -0
  221. package/esm/MultiCascadeTree/utils.d.ts +37 -0
  222. package/esm/MultiCascadeTree/utils.js +130 -0
  223. package/esm/MultiCascader/MultiCascader.d.ts +57 -29
  224. package/esm/MultiCascader/MultiCascader.js +166 -281
  225. package/esm/Panel/Panel.js +3 -1
  226. package/esm/Popover/Popover.js +3 -1
  227. package/esm/SelectPicker/SelectPicker.js +3 -9
  228. package/esm/Text/Text.d.ts +47 -0
  229. package/esm/Text/Text.js +66 -0
  230. package/esm/Text/index.d.ts +3 -0
  231. package/esm/Text/index.js +4 -0
  232. package/esm/Tree/Tree.d.ts +4 -4
  233. package/esm/TreePicker/TreePicker.js +3 -10
  234. package/esm/index.d.ts +27 -16
  235. package/esm/index.js +38 -15
  236. package/esm/internals/Overlay/OverlayTrigger.js +24 -17
  237. package/esm/internals/Picker/PickerToggle.d.ts +4 -5
  238. package/esm/internals/Picker/PickerToggleTrigger.d.ts +1 -1
  239. package/esm/internals/Picker/PickerToggleTrigger.js +1 -1
  240. package/esm/internals/Picker/hooks/useToggleKeyDownEvent.d.ts +0 -2
  241. package/esm/internals/Picker/hooks/useToggleKeyDownEvent.js +0 -4
  242. package/esm/toaster/ToastContainer.d.ts +9 -2
  243. package/esm/toaster/index.d.ts +0 -1
  244. package/esm/toaster/index.js +0 -1
  245. package/esm/useToaster/index.d.ts +2 -0
  246. package/esm/useToaster/index.js +3 -0
  247. package/esm/{toaster → useToaster}/useToaster.d.ts +4 -4
  248. package/esm/{toaster → useToaster}/useToaster.js +4 -4
  249. package/esm/utils/index.d.ts +1 -0
  250. package/esm/utils/index.js +2 -1
  251. package/internals/Picker/styles/index.less +0 -5
  252. package/internals/Picker/styles/mixin.less +0 -73
  253. package/package.json +1 -1
  254. package/styles/color-modes/light.less +7 -0
  255. package/styles/index.less +5 -0
  256. package/useToaster/package.json +7 -0
  257. package/useToaster/styles/index.css +239 -0
  258. package/useToaster/styles/index.less +1 -0
  259. package/cjs/Cascader/DropdownMenu.d.ts +0 -24
  260. package/cjs/Cascader/DropdownMenu.js +0 -175
  261. package/cjs/Cascader/TreeView.d.ts +0 -24
  262. package/cjs/Cascader/utils.js +0 -79
  263. package/cjs/MultiCascader/TreeView.d.ts +0 -25
  264. package/cjs/MultiCascader/utils.d.ts +0 -71
  265. package/cjs/MultiCascader/utils.js +0 -382
  266. package/esm/Cascader/DropdownMenu.d.ts +0 -24
  267. package/esm/Cascader/DropdownMenu.js +0 -168
  268. package/esm/Cascader/TreeView.d.ts +0 -24
  269. package/esm/Cascader/utils.js +0 -74
  270. package/esm/MultiCascader/TreeView.d.ts +0 -25
  271. package/esm/MultiCascader/utils.d.ts +0 -71
  272. package/esm/MultiCascader/utils.js +0 -369
package/esm/@types/common.d.ts CHANGED
@@ -35,10 +35,10 @@ export interface AnimationEventProps {
35
35
  onExited?: (node: HTMLElement) => void;
36
36
  }
37
37
  export declare type PickerAppearance = 'default' | 'subtle';
38
- export interface PickerBaseProps<LocaleType = any> extends WithAsProps, AnimationEventProps {
38
+ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventProps {
39
39
  id?: string;
40
40
  /** Custom locale */
41
- locale?: Partial<LocaleType>;
41
+ locale?: Partial<L>;
42
42
  /** A picker can have different appearances. */
43
43
  appearance?: PickerAppearance;
44
44
  /** Format picker to appear inside a content block */
@@ -108,24 +108,22 @@ export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTML
108
108
  /** Make the control readonly */
109
109
  readOnly?: boolean;
110
110
  }
111
- declare type ToArray<V> = V extends any[] ? V : V[];
112
- export interface FormControlPickerProps<ValueType = any, LocaleType = any, DataType = Record<string, any>> extends PickerBaseProps<LocaleType>, FormControlBaseProps<ValueType> {
111
+ export declare type ToArray<V> = V extends any[] ? V : V[];
112
+ export interface DataProps<TData> {
113
113
  /** The data of component */
114
- data: DataType[];
114
+ data: TData[];
115
115
  /** Set option value 'key' in 'data' */
116
116
  valueKey?: string;
117
117
  /** Set options to display the 'key' in 'data' */
118
118
  labelKey?: string;
119
119
  /** Set children key in data */
120
120
  childrenKey?: string;
121
- /** Disabled items */
122
- disabledItemValues?: ToArray<NonNullable<ValueType>>;
123
- /** Initial value */
124
- defaultValue?: ValueType;
125
- /** Current value of the component. Creates a controlled component */
126
- value?: ValueType;
127
- /** Called after the value has been changed */
128
- onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
121
+ }
122
+ export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends PickerBaseProps<L>, FormControlBaseProps<T>, DataProps<D> {
123
+ /**
124
+ * Disabled items
125
+ */
126
+ disabledItemValues?: ToArray<NonNullable<I>>;
129
127
  }
130
128
  export declare namespace TypeAttributes {
131
129
  type Size = 'lg' | 'md' | 'sm' | 'xs';
@@ -150,6 +148,7 @@ export interface ItemDataType<T = number | string> extends Record<string, any> {
150
148
  children?: ItemDataType<T>[];
151
149
  loading?: boolean;
152
150
  }
151
+ export declare type DataItemValue = number | string | null;
153
152
  export interface Offset {
154
153
  top: number;
155
154
  left: number;
@@ -163,4 +162,3 @@ export declare type CursorPosition = {
163
162
  clientTop: number;
164
163
  clientLeft: number;
165
164
  };
166
- export {};
package/esm/CascadeTree/CascadeTree.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { CascadeTreeProps } from './types';
3
+ export interface CascadeTreeComponent {
4
+ <T>(props: CascadeTreeProps<T> & {
5
+ ref?: React.Ref<HTMLDivElement>;
6
+ }): JSX.Element | null;
7
+ displayName?: string;
8
+ propTypes?: React.WeakValidationMap<CascadeTreeProps<any>>;
9
+ }
10
+ /**
11
+ * CascadeTree is a component that displays tree-structured data in columns.
12
+ *
13
+ * @see https://rsuitejs.com/components/cascade-tree
14
+ */
15
+ declare const CascadeTree: CascadeTreeComponent;
16
+ export default CascadeTree;
package/esm/CascadeTree/CascadeTree.js ADDED
@@ -0,0 +1,167 @@
1
+ 'use client';
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
+ import React, { useCallback, useMemo } from 'react';
5
+ import { getParentMap, flattenTree } from '../utils/treeUtils';
6
+ import { useControlled, useClassNames, useEventCallback } from '../utils';
7
+ import { useMap } from '../utils/useMap';
8
+ import TreeView from './TreeView';
9
+ import SearchView from './SearchView';
10
+ import { useSearch, useSelect, usePaths } from './hooks';
11
+ /**
12
+ * CascadeTree is a component that displays tree-structured data in columns.
13
+ *
14
+ * @see https://rsuitejs.com/components/cascade-tree
15
+ */
16
+ var CascadeTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
17
+ var _props$as = props.as,
18
+ Component = _props$as === void 0 ? 'div' : _props$as,
19
+ _props$data = props.data,
20
+ data = _props$data === void 0 ? [] : _props$data,
21
+ defaultValue = props.defaultValue,
22
+ className = props.className,
23
+ _props$classPrefix = props.classPrefix,
24
+ classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,
25
+ _props$childrenKey = props.childrenKey,
26
+ childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
27
+ _props$valueKey = props.valueKey,
28
+ valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
29
+ _props$labelKey = props.labelKey,
30
+ labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
31
+ valueProp = props.value,
32
+ _props$disabledItemVa = props.disabledItemValues,
33
+ disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
34
+ columnWidth = props.columnWidth,
35
+ columnHeight = props.columnHeight,
36
+ searchable = props.searchable,
37
+ renderTreeNode = props.renderTreeNode,
38
+ renderColumn = props.renderColumn,
39
+ onSelect = props.onSelect,
40
+ onSearch = props.onSearch,
41
+ onChange = props.onChange,
42
+ getChildren = props.getChildren,
43
+ rest = _objectWithoutPropertiesLoose(props, ["as", "data", "defaultValue", "className", "classPrefix", "childrenKey", "valueKey", "labelKey", "value", "disabledItemValues", "columnWidth", "columnHeight", "searchable", "renderTreeNode", "renderColumn", "onSelect", "onSearch", "onChange", "getChildren"]);
44
+ var _ref = useControlled(valueProp, defaultValue),
45
+ value = _ref[0],
46
+ setValue = _ref[1]; // Store the children of each node
47
+ var childrenMap = useMap();
48
+
49
+ // Store the parent of each node
50
+ var parentMap = useMemo(function () {
51
+ return getParentMap(data, function (item) {
52
+ var _childrenMap$get;
53
+ return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];
54
+ });
55
+ }, [childrenMap, childrenKey, data]);
56
+
57
+ // Flatten the tree data
58
+ var flattenedData = useMemo(function () {
59
+ return flattenTree(data, function (item) {
60
+ var _childrenMap$get2;
61
+ return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];
62
+ });
63
+ }, [childrenMap, childrenKey, data]);
64
+
65
+ // The selected item
66
+ var selectedItem = flattenedData.find(function (item) {
67
+ return item[valueKey] === value;
68
+ });
69
+
70
+ // Callback function after selecting the node
71
+ var onSelectCallback = function onSelectCallback(node, event) {
72
+ var isLeafNode = node.isLeafNode,
73
+ cascadePaths = node.cascadePaths,
74
+ itemData = node.itemData;
75
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemData, cascadePaths, event);
76
+ if (isLeafNode) {
77
+ var nextValue = itemData[valueKey];
78
+ setValue(nextValue);
79
+ }
80
+ };
81
+ var _useSelect = useSelect({
82
+ value: value,
83
+ valueKey: valueKey,
84
+ childrenKey: childrenKey,
85
+ childrenMap: childrenMap,
86
+ selectedItem: selectedItem,
87
+ getChildren: getChildren,
88
+ onChange: onChange,
89
+ onSelect: onSelectCallback
90
+ }),
91
+ activeItem = _useSelect.activeItem,
92
+ loadingItemsSet = _useSelect.loadingItemsSet,
93
+ handleSelect = _useSelect.handleSelect;
94
+ var _usePaths = usePaths({
95
+ data: data,
96
+ activeItem: activeItem,
97
+ selectedItem: selectedItem,
98
+ getParent: function getParent(item) {
99
+ return parentMap.get(item);
100
+ },
101
+ getChildren: function getChildren(item) {
102
+ var _childrenMap$get3;
103
+ return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];
104
+ }
105
+ }),
106
+ columns = _usePaths.columns,
107
+ pathTowardsActiveItem = _usePaths.pathTowardsActiveItem;
108
+ var _useClassNames = useClassNames(classPrefix),
109
+ withClassPrefix = _useClassNames.withClassPrefix,
110
+ merge = _useClassNames.merge;
111
+ var classes = merge(className, withClassPrefix());
112
+ var onSearchCallback = useCallback(function (value, _items, event) {
113
+ return onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
114
+ }, [onSearch]);
115
+ var _useSearch = useSearch({
116
+ labelKey: labelKey,
117
+ childrenKey: childrenKey,
118
+ parentMap: parentMap,
119
+ flattenedData: flattenedData,
120
+ onSearch: onSearchCallback
121
+ }),
122
+ items = _useSearch.items,
123
+ searchKeyword = _useSearch.searchKeyword,
124
+ setSearchKeyword = _useSearch.setSearchKeyword,
125
+ handleSearch = _useSearch.handleSearch;
126
+ var handleSearchRowSelect = useEventCallback(function (item, items, event) {
127
+ var _item$childrenKey;
128
+ var node = {
129
+ itemData: item,
130
+ cascadePaths: items,
131
+ isLeafNode: !((_item$childrenKey = item[childrenKey]) !== null && _item$childrenKey !== void 0 && _item$childrenKey.length)
132
+ };
133
+ handleSelect(node, event);
134
+ setSearchKeyword('');
135
+ });
136
+ return /*#__PURE__*/React.createElement(Component, _extends({
137
+ className: classes
138
+ }, rest, {
139
+ ref: ref
140
+ }), searchable && /*#__PURE__*/React.createElement(SearchView, {
141
+ data: items,
142
+ searchKeyword: searchKeyword,
143
+ valueKey: valueKey,
144
+ labelKey: labelKey,
145
+ parentMap: parentMap,
146
+ disabledItemValues: disabledItemValues,
147
+ onSelect: handleSearchRowSelect,
148
+ onSearch: handleSearch
149
+ }), !searchKeyword && /*#__PURE__*/React.createElement(TreeView, {
150
+ columnWidth: columnWidth,
151
+ columnHeight: columnHeight,
152
+ disabledItemValues: disabledItemValues,
153
+ loadingItemsSet: loadingItemsSet,
154
+ valueKey: valueKey,
155
+ labelKey: labelKey,
156
+ childrenKey: childrenKey,
157
+ classPrefix: classPrefix,
158
+ data: columns,
159
+ cascadePaths: pathTowardsActiveItem,
160
+ activeItemValue: value,
161
+ onSelect: handleSelect,
162
+ renderColumn: renderColumn,
163
+ renderTreeNode: renderTreeNode
164
+ }));
165
+ });
166
+ CascadeTree.displayName = 'CascadeTree';
167
+ export default CascadeTree;
package/esm/CascadeTree/SearchView.d.ts ADDED
@@ -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
+ parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
8
+ data: ItemDataType<T>[];
9
+ focusItemValue?: T | null;
10
+ disabledItemValues: any[];
11
+ renderSearchItem?: (label: React.ReactNode, items: ItemDataType<T>[]) => React.ReactNode;
12
+ onSelect: (item: ItemDataType<T>, items: ItemDataType<T>[], event: React.MouseEvent) => void;
13
+ onSearch: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
14
+ inputRef?: React.RefObject<HTMLInputElement>;
15
+ }
16
+ declare function SearchView<T>(props: SearchViewProps<T>): JSX.Element;
17
+ export default SearchView;
package/esm/CascadeTree/SearchView.js ADDED
@@ -0,0 +1,100 @@
1
+ 'use client';
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
+ import React from 'react';
5
+ import { useClassNames, useCustom } from '../utils';
6
+ import { getPathTowardsItem } from '../utils/treeUtils';
7
+ import { highlightLabel } from './utils';
8
+ import SearchBox from '../internals/SearchBox';
9
+ function SearchView(props) {
10
+ var _props$as = props.as,
11
+ Component = _props$as === void 0 ? 'div' : _props$as,
12
+ _props$classPrefix = props.classPrefix,
13
+ classPrefix = _props$classPrefix === void 0 ? 'cascade-search-view' : _props$classPrefix,
14
+ className = props.className,
15
+ searchKeyword = props.searchKeyword,
16
+ labelKey = props.labelKey,
17
+ valueKey = props.valueKey,
18
+ parentMap = props.parentMap,
19
+ data = props.data,
20
+ focusItemValue = props.focusItemValue,
21
+ disabledItemValues = props.disabledItemValues,
22
+ inputRef = props.inputRef,
23
+ renderSearchItem = props.renderSearchItem,
24
+ onSearch = props.onSearch,
25
+ onSelect = props.onSelect,
26
+ rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "searchKeyword", "labelKey", "valueKey", "parentMap", "data", "focusItemValue", "disabledItemValues", "inputRef", "renderSearchItem", "onSearch", "onSelect"]);
27
+ var _useClassNames = useClassNames(classPrefix),
28
+ merge = _useClassNames.merge,
29
+ prefix = _useClassNames.prefix,
30
+ withClassPrefix = _useClassNames.withClassPrefix,
31
+ rootPrefix = _useClassNames.rootPrefix;
32
+ var classes = merge(className, withClassPrefix());
33
+ var _useCustom = useCustom('Picker'),
34
+ locale = _useCustom.locale;
35
+ var renderSearchRow = function renderSearchRow(item, key) {
36
+ var items = getPathTowardsItem(item, function (item) {
37
+ return parentMap.get(item);
38
+ });
39
+ var formattedNodes = items.map(function (itemData) {
40
+ var _extends2;
41
+ var label = highlightLabel({
42
+ item: itemData,
43
+ labelKey: labelKey,
44
+ searchKeyword: searchKeyword,
45
+ render: function render(patch, index) {
46
+ return /*#__PURE__*/React.createElement("span", {
47
+ key: index,
48
+ className: prefix('match')
49
+ }, patch);
50
+ }
51
+ });
52
+ return _extends({}, itemData, (_extends2 = {}, _extends2[labelKey] = label, _extends2));
53
+ });
54
+ var disabled = disabledItemValues.some(function (value) {
55
+ return formattedNodes.some(function (itemData) {
56
+ return itemData[valueKey] === value;
57
+ });
58
+ });
59
+ var itemClasses = prefix('row', {
60
+ 'row-disabled': disabled,
61
+ 'row-focus': item[valueKey] === focusItemValue
62
+ });
63
+ var label = formattedNodes.map(function (itemData, index) {
64
+ return /*#__PURE__*/React.createElement("span", {
65
+ key: "col-" + index,
66
+ className: prefix('col')
67
+ }, itemData[labelKey]);
68
+ });
69
+ var handleCheck = function handleCheck(event) {
70
+ if (!disabled) {
71
+ onSelect(item, items, event);
72
+ }
73
+ };
74
+ return /*#__PURE__*/React.createElement("div", {
75
+ role: "treeitem",
76
+ "aria-disabled": disabled,
77
+ "aria-label": item[labelKey],
78
+ key: key,
79
+ "data-key": item[valueKey],
80
+ className: itemClasses,
81
+ tabIndex: -1,
82
+ onClick: handleCheck
83
+ }, renderSearchItem ? renderSearchItem(label, items) : label);
84
+ };
85
+ return /*#__PURE__*/React.createElement(Component, _extends({
86
+ className: classes
87
+ }, rest), /*#__PURE__*/React.createElement(SearchBox, {
88
+ placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
89
+ onChange: onSearch,
90
+ value: searchKeyword,
91
+ inputRef: inputRef
92
+ }), searchKeyword !== '' && /*#__PURE__*/React.createElement("div", {
93
+ className: prefix('panel'),
94
+ "data-layer": 0,
95
+ role: "tree"
96
+ }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/React.createElement("div", {
97
+ className: merge(prefix('none'), rootPrefix('picker-none'))
98
+ }, locale.noResultsText)));
99
+ }
100
+ export default SearchView;
package/esm/CascadeTree/TreeView.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { ItemDataType, WithAsProps, RsRefForwardingComponent, DataProps, ToArray } from '../@types/common';
3
+ import { SelectNode, CascadeColumn } from './types';
4
+ declare type SetLike<T = unknown> = {
5
+ has(value: T): boolean;
6
+ };
7
+ export interface TreeViewProps<T = any> extends WithAsProps, Omit<DataProps<ItemDataType<T>>, 'data'> {
8
+ data?: (readonly ItemDataType<T>[])[];
9
+ disabledItemValues?: ToArray<NonNullable<T>>;
10
+ activeItemValue?: T | null;
11
+ loadingItemsSet?: SetLike<ItemDataType<T>>;
12
+ cascadePaths?: ItemDataType<T>[];
13
+ columnWidth?: number;
14
+ columnHeight?: number | string;
15
+ renderTreeNode?: (node: React.ReactNode, itemData: ItemDataType<T>) => React.ReactNode;
16
+ renderColumn?: (childNodes: React.ReactNode, column: CascadeColumn<T>) => React.ReactNode;
17
+ onSelect?: (node: SelectNode<T>, event: React.MouseEvent) => void;
18
+ }
19
+ declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
20
+ export default TreeView;
package/esm/{Cascader → CascadeTree}/TreeView.js RENAMED
@@ -16,30 +16,31 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
16
16
  var _props$as = props.as,
17
17
  Component = _props$as === void 0 ? 'div' : _props$as,
18
18
  activeItemValue = props.activeItemValue,
19
- classPrefix = props.classPrefix,
19
+ _props$classPrefix = props.classPrefix,
20
+ classPrefix = _props$classPrefix === void 0 ? 'tree' : _props$classPrefix,
20
21
  className = props.className,
21
22
  _props$childrenKey = props.childrenKey,
22
23
  childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
23
24
  _props$disabledItemVa = props.disabledItemValues,
24
25
  disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
25
- _props$menuWidth = props.menuWidth,
26
- menuWidth = _props$menuWidth === void 0 ? 120 : _props$menuWidth,
27
- _props$menuHeight = props.menuHeight,
28
- menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,
26
+ _props$columnWidth = props.columnWidth,
27
+ columnWidth = _props$columnWidth === void 0 ? 140 : _props$columnWidth,
28
+ _props$columnHeight = props.columnHeight,
29
+ columnHeight = _props$columnHeight === void 0 ? 200 : _props$columnHeight,
29
30
  _props$valueKey = props.valueKey,
30
31
  valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
31
- _props$cascadeData = props.cascadeData,
32
- cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,
32
+ _props$data = props.data,
33
+ data = _props$data === void 0 ? emptyArray : _props$data,
33
34
  _props$cascadePaths = props.cascadePaths,
34
35
  cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,
35
36
  loadingItemsSet = props.loadingItemsSet,
36
37
  _props$labelKey = props.labelKey,
37
38
  labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
38
39
  style = props.style,
39
- renderMenu = props.renderMenu,
40
- renderMenuItem = props.renderMenuItem,
40
+ renderColumn = props.renderColumn,
41
+ renderTreeNode = props.renderTreeNode,
41
42
  onSelect = props.onSelect,
42
- rest = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
43
+ rest = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "columnWidth", "columnHeight", "valueKey", "data", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderColumn", "renderTreeNode", "onSelect"]);
43
44
  var _useClassNames = useClassNames(classPrefix),
44
45
  merge = _useClassNames.merge,
45
46
  prefix = _useClassNames.prefix;
@@ -73,7 +74,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
73
74
  }, [prefix]);
74
75
  var getCascadePaths = function getCascadePaths(layer, node) {
75
76
  var paths = [];
76
- for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
77
+ for (var i = 0; i < data.length && i < layer; i += 1) {
77
78
  if (i < layer - 1 && cascadePaths) {
78
79
  paths.push(cascadePaths[i]);
79
80
  }
@@ -81,25 +82,29 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
81
82
  paths.push(node);
82
83
  return paths;
83
84
  };
84
- var handleSelect = useEventCallback(function (layer, node, event) {
85
- var isLeafNode = isNil(node[childrenKey]);
86
- var cascadePaths = getCascadePaths(layer + 1, node);
87
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
85
+ var handleSelect = useEventCallback(function (layer, itemData, event) {
86
+ var isLeafNode = isNil(itemData[childrenKey]);
87
+ var cascadePaths = getCascadePaths(layer + 1, itemData);
88
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect({
89
+ itemData: itemData,
90
+ cascadePaths: cascadePaths,
91
+ isLeafNode: isLeafNode
92
+ }, event);
88
93
  });
89
94
  var renderCascadeNode = function renderCascadeNode(nodeProps) {
90
95
  var _loadingItemsSet$has;
91
- var node = nodeProps.node,
96
+ var itemData = nodeProps.itemData,
92
97
  index = nodeProps.index,
93
98
  layer = nodeProps.layer,
94
99
  focus = nodeProps.focus,
95
100
  size = nodeProps.size;
96
- var children = node[childrenKey];
97
- var value = node[valueKey];
98
- var label = node[labelKey];
101
+ var children = itemData[childrenKey];
102
+ var value = itemData[valueKey];
103
+ var label = itemData[labelKey];
99
104
  var disabled = disabledItemValues.some(function (disabledValue) {
100
105
  return shallowEqual(disabledValue, value);
101
106
  });
102
- var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(node)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;
107
+ var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(itemData)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;
103
108
 
104
109
  // Use `value` in keys when If `value` is string or number
105
110
  var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
@@ -111,7 +116,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
111
116
  "aria-setsize": size,
112
117
  "aria-posinset": index + 1,
113
118
  "aria-label": typeof label === 'string' ? label : undefined,
114
- classPrefix: "picker-cascader-menu-item",
119
+ classPrefix: "cascade-tree-item",
115
120
  key: layer + "-" + onlyKey,
116
121
  disabled: disabled,
117
122
  active: !isUndefined(activeItemValue) && shallowEqual(activeItemValue, value),
@@ -119,21 +124,21 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
119
124
  value: value,
120
125
  className: children ? prefix('has-children') : undefined,
121
126
  onSelect: function onSelect(_value, event) {
122
- return handleSelect(layer, node, event);
127
+ return handleSelect(layer, itemData, event);
123
128
  }
124
- }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/React.createElement(Icon, {
129
+ }, renderTreeNode ? renderTreeNode(label, itemData) : label, children ? /*#__PURE__*/React.createElement(Icon, {
125
130
  className: prefix('caret'),
126
131
  spin: loading,
127
132
  "data-testid": "spinner"
128
133
  }) : null);
129
134
  };
130
- var cascadeNodes = cascadeData.map(function (children, layer) {
135
+ var cascadeNodes = data.map(function (children, layer) {
131
136
  var onlyKey = layer + "_" + children.length;
132
- var parentNode = cascadePaths[layer - 1];
133
- var menu = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
134
- var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]);
137
+ var parentItem = cascadePaths[layer - 1];
138
+ var childNodes = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (itemData, index) {
139
+ var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], itemData[valueKey]);
135
140
  return renderCascadeNode({
136
- node: item,
141
+ itemData: itemData,
137
142
  index: index,
138
143
  layer: layer,
139
144
  focus: focus,
@@ -147,17 +152,21 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
147
152
  key: onlyKey,
148
153
  className: prefix('column'),
149
154
  style: {
150
- height: menuHeight,
151
- width: menuWidth
155
+ height: columnHeight,
156
+ width: columnWidth
152
157
  }
153
- }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
158
+ }, renderColumn ? renderColumn(childNodes, {
159
+ items: children,
160
+ parentItem: parentItem,
161
+ layer: layer
162
+ }) : childNodes);
154
163
  });
155
164
  var styles = _extends({}, style, {
156
- width: cascadeData.length * menuWidth
165
+ width: data.length * columnWidth
157
166
  });
158
167
  return /*#__PURE__*/React.createElement(Component, _extends({
159
168
  role: "tree",
160
- id: id + "-" + popupType,
169
+ id: id ? id + "-" + popupType : undefined,
161
170
  "aria-labelledby": labelId
162
171
  }, rest, {
163
172
  ref: mergeRefs(rootRef, ref),
package/esm/CascadeTree/hooks/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default as usePaths } from './usePaths';
2
+ export { default as useSelect } from './useSelect';
3
+ export { default as useSearch } from './useSearch';
package/esm/CascadeTree/hooks/index.js ADDED
@@ -0,0 +1,4 @@
1
+ 'use client';
2
+ export { default as usePaths } from './usePaths';
3
+ export { default as useSelect } from './useSelect';
4
+ export { default as useSearch } from './useSearch';
package/esm/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} RENAMED
@@ -1,23 +1,3 @@
1
- declare type GetColumnsAndPathsOptions<T> = {
2
- getParent: (item: T) => T | undefined;
3
- getChildren: (item: T) => readonly T[] | undefined;
4
- };
5
- /**
6
- * Calculate columns to be displayed:
7
- *
8
- * - Every ancestor level of activeItem should be displayed
9
- * - The level that activeItem is at should be displayed
10
- * - If activeItem is a parent node, its child level should be displayed
11
- *
12
- * @param items
13
- * @param value
14
- * @param options
15
- * @returns
16
- */
17
- export declare function getColumnsAndPaths<T extends Record<string, unknown>>(items: readonly T[], pathTarget: T | undefined, options: GetColumnsAndPathsOptions<T>): {
18
- columns: (readonly T[])[];
19
- path: T[];
20
- };
21
1
  declare type UsePathsParams<T> = {
22
2
  data: T[];
23
3
  /**
@@ -32,18 +12,16 @@ declare type UsePathsParams<T> = {
32
12
  getChildren: (item: T) => readonly T[] | undefined;
33
13
  };
34
14
  /**
35
- * Caculate following 3 things
15
+ * A Hook to get the selected path of Tree.
36
16
  *
37
17
  * - The columns of items to be displayed
38
18
  * - The path towards the current focused item
39
19
  * - The path towards the current selected item (referred to by Cascader's value)
40
20
  *
41
- * @param params
42
- * @returns
43
21
  */
44
22
  export declare function usePaths<T extends Record<string, unknown>>({ data, activeItem, selectedItem, getParent, getChildren }: UsePathsParams<T>): {
45
- columnsToDisplay: (readonly T[])[];
23
+ columns: (readonly T[])[];
46
24
  pathTowardsSelectedItem: T[];
47
25
  pathTowardsActiveItem: T[];
48
26
  };
49
- export {};
27
+ export default usePaths;
package/esm/CascadeTree/hooks/usePaths.js ADDED
@@ -0,0 +1,36 @@
1
+ 'use client';
2
+ import { useMemo } from 'react';
3
+ import { getPathTowardsItem } from '../../utils/treeUtils';
4
+ import { getColumnsAndPaths } from '../utils';
5
+ /**
6
+ * A Hook to get the selected path of Tree.
7
+ *
8
+ * - The columns of items to be displayed
9
+ * - The path towards the current focused item
10
+ * - The path towards the current selected item (referred to by Cascader's value)
11
+ *
12
+ */
13
+ export function usePaths(_ref) {
14
+ var data = _ref.data,
15
+ activeItem = _ref.activeItem,
16
+ selectedItem = _ref.selectedItem,
17
+ getParent = _ref.getParent,
18
+ getChildren = _ref.getChildren;
19
+ var pathTowardsSelectedItem = useMemo(function () {
20
+ return getPathTowardsItem(selectedItem, getParent);
21
+ }, [getParent, selectedItem]);
22
+ var _useMemo = useMemo(function () {
23
+ return getColumnsAndPaths(data, activeItem, {
24
+ getParent: getParent,
25
+ getChildren: getChildren
26
+ });
27
+ }, [data, activeItem, getParent, getChildren]),
28
+ columns = _useMemo.columns,
29
+ pathTowardsActiveItem = _useMemo.path;
30
+ return {
31
+ columns: columns,
32
+ pathTowardsSelectedItem: pathTowardsSelectedItem,
33
+ pathTowardsActiveItem: pathTowardsActiveItem
34
+ };
35
+ }
36
+ export default usePaths;
package/esm/CascadeTree/hooks/useSearch.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { ItemDataType } from '../../@types/common';
3
+ interface SearchPanelProps<T> {
4
+ labelKey: string;
5
+ childrenKey: string;
6
+ parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
7
+ flattenedData: ItemDataType<T>[];
8
+ parentSelectable?: boolean;
9
+ onSearch: (value: string, items: ItemDataType<T>[], 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;