rsuite 5.60.2 → 5.61.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 (438) hide show
  1. package/Accordion/styles/index.css +4 -4
  2. package/AutoComplete/styles/index.css +58 -22
  3. package/Button/styles/index.css +12 -8
  4. package/Button/styles/mixin.less +1 -1
  5. package/CHANGELOG.md +25 -0
  6. package/Calendar/styles/index.css +16 -15
  7. package/CascadeTree/styles/index.css +11 -9
  8. package/CascadeTree/styles/index.less +7 -0
  9. package/CascadeTree/styles/search.less +0 -10
  10. package/Cascader/styles/index.css +60 -31
  11. package/CheckPicker/styles/index.css +59 -27
  12. package/CheckPicker/styles/index.less +3 -3
  13. package/CheckTree/styles/index.css +160 -134
  14. package/CheckTree/styles/index.less +141 -1
  15. package/CheckTreePicker/styles/index.css +170 -126
  16. package/CheckTreePicker/styles/index.less +8 -181
  17. package/Checkbox/styles/index.css +7 -8
  18. package/Checkbox/styles/index.less +1 -5
  19. package/DateInput/styles/index.css +4 -4
  20. package/DatePicker/styles/index.css +62 -26
  21. package/DateRangeInput/styles/index.css +4 -4
  22. package/DateRangePicker/styles/index.css +67 -26
  23. package/DateRangePicker/styles/index.less +2 -0
  24. package/Dropdown/styles/index.css +14 -13
  25. package/Highlight/package.json +7 -0
  26. package/Highlight/styles/index.css +8 -0
  27. package/Highlight/styles/index.less +6 -0
  28. package/IconButton/styles/index.css +11 -10
  29. package/Input/styles/index.css +4 -4
  30. package/InputGroup/styles/index.css +18 -17
  31. package/InputGroup/styles/index.less +1 -1
  32. package/InputNumber/styles/index.css +19 -18
  33. package/InputPicker/styles/index.css +58 -22
  34. package/MultiCascadeTree/styles/index.css +61 -36
  35. package/MultiCascadeTree/styles/index.less +1 -1
  36. package/MultiCascader/styles/index.css +704 -679
  37. package/MultiCascader/styles/index.less +0 -1
  38. package/Nav/styles/index.css +15 -14
  39. package/Navbar/styles/index.css +14 -13
  40. package/Pagination/styles/index.css +62 -26
  41. package/Panel/styles/index.css +4 -4
  42. package/Placeholder/styles/index.css +2 -3
  43. package/Placeholder/styles/index.less +2 -3
  44. package/README.md +21 -39
  45. package/Radio/styles/index.css +7 -7
  46. package/Radio/styles/index.less +1 -5
  47. package/RangeSlider/styles/index.css +1 -1
  48. package/Rate/styles/index.css +1 -1
  49. package/Rate/styles/index.less +1 -1
  50. package/SelectPicker/styles/index.css +58 -22
  51. package/Slider/styles/index.css +1 -1
  52. package/Slider/styles/index.less +1 -1
  53. package/Steps/styles/index.css +6 -1
  54. package/Steps/styles/index.less +2 -1
  55. package/Tabs/styles/index.css +15 -14
  56. package/TagInput/styles/index.css +59 -27
  57. package/TagPicker/styles/index.css +59 -27
  58. package/Toggle/styles/index.css +10 -7
  59. package/Tree/styles/indent-line.less +8 -0
  60. package/Tree/styles/index.css +140 -141
  61. package/Tree/styles/index.less +188 -1
  62. package/Tree/styles/toggle.less +36 -0
  63. package/TreePicker/styles/index.css +142 -134
  64. package/TreePicker/styles/index.less +4 -234
  65. package/Uploader/styles/index.css +12 -11
  66. package/cjs/@types/common.d.ts +41 -4
  67. package/cjs/AutoComplete/AutoComplete.js +2 -1
  68. package/cjs/CascadeTree/CascadeTree.js +8 -7
  69. package/cjs/CascadeTree/SearchView.js +7 -14
  70. package/cjs/CascadeTree/hooks/usePaths.js +4 -4
  71. package/cjs/CascadeTree/hooks/useSearch.js +2 -1
  72. package/cjs/CascadeTree/utils.d.ts +0 -11
  73. package/cjs/CascadeTree/utils.js +0 -23
  74. package/cjs/Cascader/Cascader.js +17 -16
  75. package/cjs/CheckPicker/CheckPicker.js +26 -29
  76. package/cjs/CheckTree/CheckTree.d.ts +16 -0
  77. package/cjs/CheckTree/CheckTree.js +112 -0
  78. package/cjs/CheckTree/CheckTreeNode.d.ts +72 -0
  79. package/cjs/CheckTree/CheckTreeNode.js +117 -0
  80. package/cjs/CheckTree/CheckTreeView.d.ts +70 -0
  81. package/cjs/CheckTree/CheckTreeView.js +310 -0
  82. package/cjs/CheckTree/hooks/useTreeCheckState.d.ts +10 -0
  83. package/cjs/CheckTree/hooks/useTreeCheckState.js +93 -0
  84. package/cjs/CheckTree/hooks/useTreeNodeProps.d.ts +22 -0
  85. package/cjs/CheckTree/hooks/useTreeNodeProps.js +59 -0
  86. package/cjs/CheckTree/hooks/useTreeValue.d.ts +5 -0
  87. package/cjs/CheckTree/hooks/useTreeValue.js +21 -0
  88. package/cjs/CheckTree/index.d.ts +2 -14
  89. package/cjs/CheckTree/index.js +2 -23
  90. package/cjs/CheckTree/utils.d.ts +53 -0
  91. package/cjs/{CheckTreePicker → CheckTree}/utils.js +76 -26
  92. package/cjs/CheckTreePicker/CheckTreePicker.d.ts +30 -12
  93. package/cjs/CheckTreePicker/CheckTreePicker.js +153 -603
  94. package/cjs/CheckTreePicker/hooks/useFocusState.d.ts +16 -0
  95. package/cjs/CheckTreePicker/hooks/useFocusState.js +42 -0
  96. package/cjs/DatePicker/DatePicker.d.ts +4 -0
  97. package/cjs/DatePicker/DatePicker.js +20 -5
  98. package/cjs/DatePicker/types.d.ts +0 -4
  99. package/cjs/DateRangePicker/DateRangePicker.d.ts +51 -23
  100. package/cjs/DateRangePicker/DateRangePicker.js +71 -51
  101. package/cjs/DateRangePicker/hooks/useDateDisabled.d.ts +16 -0
  102. package/cjs/DateRangePicker/hooks/useDateDisabled.js +31 -0
  103. package/cjs/DateRangePicker/types.d.ts +1 -0
  104. package/cjs/Highlight/Highlight.d.ts +14 -0
  105. package/cjs/Highlight/Highlight.js +58 -0
  106. package/cjs/Highlight/index.d.ts +3 -0
  107. package/cjs/Highlight/index.js +9 -0
  108. package/cjs/Highlight/utils/highlightText.d.ts +5 -0
  109. package/cjs/Highlight/utils/highlightText.js +29 -0
  110. package/cjs/InputPicker/InputPicker.js +37 -41
  111. package/cjs/MultiCascadeTree/SearchView.js +6 -14
  112. package/cjs/MultiCascadeTree/hooks/useCascadeValue.js +15 -1
  113. package/cjs/MultiCascadeTree/hooks/useColumnData.js +2 -2
  114. package/cjs/MultiCascadeTree/hooks/useFlattenData.js +3 -3
  115. package/cjs/MultiCascadeTree/hooks/useSearch.js +2 -1
  116. package/cjs/MultiCascadeTree/utils.d.ts +4 -4
  117. package/cjs/MultiCascadeTree/utils.js +20 -11
  118. package/cjs/MultiCascader/MultiCascader.js +12 -12
  119. package/cjs/SelectPicker/SelectPicker.js +2 -6
  120. package/cjs/Tree/IndentLine.d.ts +3 -0
  121. package/cjs/Tree/IndentLine.js +18 -0
  122. package/cjs/Tree/Tree.d.ts +4 -92
  123. package/cjs/Tree/Tree.js +79 -20
  124. package/cjs/Tree/TreeNode.d.ts +101 -0
  125. package/cjs/Tree/TreeNode.js +147 -0
  126. package/cjs/Tree/TreeNodeToggle.d.ts +9 -0
  127. package/cjs/Tree/TreeNodeToggle.js +56 -0
  128. package/cjs/Tree/TreeProvider.d.ts +52 -0
  129. package/cjs/Tree/TreeProvider.js +84 -0
  130. package/cjs/Tree/TreeView.d.ts +68 -0
  131. package/cjs/Tree/TreeView.js +305 -0
  132. package/cjs/Tree/hooks/useExpandTree.d.ts +60 -0
  133. package/cjs/Tree/hooks/useExpandTree.js +77 -0
  134. package/cjs/Tree/hooks/useFlattenTree.d.ts +42 -0
  135. package/cjs/Tree/hooks/useFlattenTree.js +98 -0
  136. package/cjs/Tree/hooks/useFocusTree.d.ts +24 -0
  137. package/cjs/Tree/hooks/useFocusTree.js +158 -0
  138. package/cjs/Tree/hooks/useForceUpdate.d.ts +2 -0
  139. package/cjs/Tree/hooks/useForceUpdate.js +16 -0
  140. package/cjs/Tree/hooks/useTreeDrag.d.ts +32 -0
  141. package/cjs/Tree/hooks/useTreeDrag.js +268 -0
  142. package/cjs/Tree/hooks/useTreeNodeProps.d.ts +29 -0
  143. package/cjs/Tree/hooks/useTreeNodeProps.js +83 -0
  144. package/cjs/Tree/hooks/useTreeNodeRefs.d.ts +6 -0
  145. package/cjs/Tree/hooks/useTreeNodeRefs.js +22 -0
  146. package/cjs/Tree/hooks/useTreeSearch.d.ts +18 -0
  147. package/cjs/Tree/hooks/useTreeSearch.js +74 -0
  148. package/cjs/Tree/hooks/useTreeWithChildren.d.ts +14 -0
  149. package/cjs/Tree/hooks/useTreeWithChildren.js +64 -0
  150. package/cjs/Tree/hooks/useVirtualizedTreeData.d.ts +7 -0
  151. package/cjs/Tree/hooks/useVirtualizedTreeData.js +82 -0
  152. package/cjs/Tree/types.d.ts +257 -0
  153. package/cjs/Tree/types.js +33 -0
  154. package/cjs/Tree/utils/flattenTree.d.ts +25 -0
  155. package/cjs/Tree/utils/flattenTree.js +95 -0
  156. package/cjs/Tree/utils/focusableTree.d.ts +55 -0
  157. package/cjs/Tree/utils/focusableTree.js +157 -0
  158. package/cjs/Tree/utils/formatNodeRefKey.d.ts +4 -0
  159. package/cjs/Tree/utils/formatNodeRefKey.js +11 -0
  160. package/cjs/Tree/utils/getExpandItemValues.d.ts +11 -0
  161. package/cjs/Tree/utils/getExpandItemValues.js +21 -0
  162. package/cjs/Tree/utils/getNodeParentKeys.d.ts +5 -0
  163. package/cjs/Tree/utils/getNodeParentKeys.js +21 -0
  164. package/cjs/Tree/utils/getTreeActiveNode.d.ts +5 -0
  165. package/cjs/Tree/utils/getTreeActiveNode.js +21 -0
  166. package/cjs/Tree/utils/hasVisibleChildren.d.ts +5 -0
  167. package/cjs/Tree/utils/hasVisibleChildren.js +16 -0
  168. package/cjs/Tree/utils/indentTreeNode.d.ts +3 -0
  169. package/cjs/Tree/utils/indentTreeNode.js +18 -0
  170. package/cjs/Tree/utils/index.d.ts +11 -0
  171. package/cjs/Tree/utils/index.js +35 -0
  172. package/cjs/Tree/utils/isExpand.d.ts +6 -0
  173. package/cjs/Tree/utils/isExpand.js +14 -0
  174. package/cjs/Tree/utils/isSearching.d.ts +1 -0
  175. package/cjs/Tree/utils/isSearching.js +10 -0
  176. package/cjs/Tree/utils/treeKeyboardInteractions.d.ts +21 -0
  177. package/cjs/Tree/utils/treeKeyboardInteractions.js +49 -0
  178. package/cjs/TreePicker/TreePicker.d.ts +27 -21
  179. package/cjs/TreePicker/TreePicker.js +155 -575
  180. package/cjs/TreePicker/hooks/useFocusState.d.ts +20 -0
  181. package/cjs/TreePicker/hooks/useFocusState.js +53 -0
  182. package/cjs/index.d.ts +2 -0
  183. package/cjs/index.js +3 -1
  184. package/cjs/internals/Picker/Listbox.d.ts +40 -10
  185. package/cjs/internals/Picker/Listbox.js +21 -16
  186. package/cjs/internals/Picker/PickerIndicator.d.ts +2 -1
  187. package/cjs/internals/Picker/PickerIndicator.js +7 -3
  188. package/cjs/internals/Picker/hooks/useFocusItemValue.js +4 -4
  189. package/cjs/internals/Picker/hooks/usePickerRef.d.ts +1 -4
  190. package/cjs/internals/Picker/hooks/usePickerRef.js +3 -20
  191. package/cjs/internals/Picker/index.d.ts +0 -1
  192. package/cjs/internals/Picker/index.js +1 -4
  193. package/cjs/internals/Picker/utils.js +12 -12
  194. package/cjs/internals/{Picker → Tree}/TreeView.js +1 -1
  195. package/cjs/internals/Tree/index.d.ts +1 -0
  196. package/cjs/internals/Tree/index.js +8 -0
  197. package/cjs/internals/Tree/utils/filterNodesOfTree.d.ts +5 -0
  198. package/cjs/internals/Tree/utils/filterNodesOfTree.js +31 -0
  199. package/cjs/internals/Tree/utils/findNodeOfTree.d.ts +1 -0
  200. package/cjs/internals/Tree/utils/findNodeOfTree.js +26 -0
  201. package/cjs/internals/Tree/utils/getParentMap.d.ts +15 -0
  202. package/cjs/internals/Tree/utils/getParentMap.js +52 -0
  203. package/cjs/internals/Tree/utils/getPathTowardsItem.d.ts +4 -0
  204. package/cjs/internals/Tree/utils/getPathTowardsItem.js +16 -0
  205. package/cjs/internals/Tree/utils/index.d.ts +4 -0
  206. package/cjs/internals/Tree/utils/index.js +14 -0
  207. package/cjs/internals/Windowing/List.d.ts +1 -0
  208. package/cjs/internals/Windowing/List.js +5 -1
  209. package/cjs/internals/Windowing/index.d.ts +1 -1
  210. package/cjs/internals/Windowing/index.js +4 -2
  211. package/cjs/internals/hooks/index.d.ts +1 -0
  212. package/cjs/internals/hooks/index.js +8 -0
  213. package/cjs/internals/hooks/useFoucsVirtualListItem.d.ts +7 -0
  214. package/cjs/internals/hooks/useFoucsVirtualListItem.js +26 -0
  215. package/cjs/{utils → internals/utils}/getSafeRegExpString.d.ts +1 -1
  216. package/cjs/{utils → internals/utils}/getSafeRegExpString.js +1 -1
  217. package/cjs/internals/utils/index.d.ts +2 -0
  218. package/cjs/internals/utils/index.js +9 -0
  219. package/cjs/internals/utils/stringifyReactNode.d.ts +2 -0
  220. package/cjs/internals/utils/stringifyReactNode.js +17 -0
  221. package/cjs/utils/constants.d.ts +0 -2
  222. package/cjs/utils/constants.js +1 -6
  223. package/cjs/utils/getDataGroupBy.js +3 -3
  224. package/cjs/utils/index.d.ts +0 -3
  225. package/cjs/utils/index.js +1 -10
  226. package/cjs/utils/useIsomorphicLayoutEffect.d.ts +2 -2
  227. package/dist/rsuite-no-reset-rtl.css +292 -300
  228. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  229. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  230. package/dist/rsuite-no-reset.css +294 -304
  231. package/dist/rsuite-no-reset.min.css +1 -1
  232. package/dist/rsuite-no-reset.min.css.map +1 -1
  233. package/dist/rsuite-rtl.css +293 -301
  234. package/dist/rsuite-rtl.min.css +1 -1
  235. package/dist/rsuite-rtl.min.css.map +1 -1
  236. package/dist/rsuite.css +295 -305
  237. package/dist/rsuite.js +611 -116
  238. package/dist/rsuite.js.map +1 -1
  239. package/dist/rsuite.min.css +1 -1
  240. package/dist/rsuite.min.css.map +1 -1
  241. package/dist/rsuite.min.js +1 -1
  242. package/dist/rsuite.min.js.map +1 -1
  243. package/esm/@types/common.d.ts +41 -4
  244. package/esm/AutoComplete/AutoComplete.js +2 -1
  245. package/esm/CascadeTree/CascadeTree.js +2 -1
  246. package/esm/CascadeTree/SearchView.js +6 -13
  247. package/esm/CascadeTree/hooks/usePaths.js +1 -1
  248. package/esm/CascadeTree/hooks/useSearch.js +2 -1
  249. package/esm/CascadeTree/utils.d.ts +0 -11
  250. package/esm/CascadeTree/utils.js +0 -22
  251. package/esm/Cascader/Cascader.js +2 -1
  252. package/esm/CheckPicker/CheckPicker.js +4 -7
  253. package/esm/CheckTree/CheckTree.d.ts +16 -0
  254. package/esm/CheckTree/CheckTree.js +105 -0
  255. package/esm/CheckTree/CheckTreeNode.d.ts +72 -0
  256. package/esm/CheckTree/CheckTreeNode.js +110 -0
  257. package/esm/CheckTree/CheckTreeView.d.ts +70 -0
  258. package/esm/CheckTree/CheckTreeView.js +304 -0
  259. package/esm/CheckTree/hooks/useTreeCheckState.d.ts +10 -0
  260. package/esm/CheckTree/hooks/useTreeCheckState.js +87 -0
  261. package/esm/CheckTree/hooks/useTreeNodeProps.d.ts +22 -0
  262. package/esm/CheckTree/hooks/useTreeNodeProps.js +52 -0
  263. package/esm/CheckTree/hooks/useTreeValue.d.ts +5 -0
  264. package/esm/CheckTree/hooks/useTreeValue.js +16 -0
  265. package/esm/CheckTree/index.d.ts +2 -14
  266. package/esm/CheckTree/index.js +1 -21
  267. package/esm/CheckTree/utils.d.ts +53 -0
  268. package/esm/{CheckTreePicker → CheckTree}/utils.js +72 -22
  269. package/esm/CheckTreePicker/CheckTreePicker.d.ts +30 -12
  270. package/esm/CheckTreePicker/CheckTreePicker.js +156 -607
  271. package/esm/CheckTreePicker/hooks/useFocusState.d.ts +16 -0
  272. package/esm/CheckTreePicker/hooks/useFocusState.js +37 -0
  273. package/esm/DatePicker/DatePicker.d.ts +4 -0
  274. package/esm/DatePicker/DatePicker.js +20 -5
  275. package/esm/DatePicker/types.d.ts +0 -4
  276. package/esm/DateRangePicker/DateRangePicker.d.ts +51 -23
  277. package/esm/DateRangePicker/DateRangePicker.js +71 -51
  278. package/esm/DateRangePicker/hooks/useDateDisabled.d.ts +16 -0
  279. package/esm/DateRangePicker/hooks/useDateDisabled.js +26 -0
  280. package/esm/DateRangePicker/types.d.ts +1 -0
  281. package/esm/Highlight/Highlight.d.ts +14 -0
  282. package/esm/Highlight/Highlight.js +52 -0
  283. package/esm/Highlight/index.d.ts +3 -0
  284. package/esm/Highlight/index.js +3 -0
  285. package/esm/Highlight/utils/highlightText.d.ts +5 -0
  286. package/esm/Highlight/utils/highlightText.js +25 -0
  287. package/esm/InputPicker/InputPicker.js +3 -7
  288. package/esm/MultiCascadeTree/SearchView.js +6 -14
  289. package/esm/MultiCascadeTree/hooks/useCascadeValue.js +15 -1
  290. package/esm/MultiCascadeTree/hooks/useColumnData.js +1 -1
  291. package/esm/MultiCascadeTree/hooks/useFlattenData.js +1 -1
  292. package/esm/MultiCascadeTree/hooks/useSearch.js +2 -1
  293. package/esm/MultiCascadeTree/utils.d.ts +4 -4
  294. package/esm/MultiCascadeTree/utils.js +18 -9
  295. package/esm/MultiCascader/MultiCascader.js +1 -1
  296. package/esm/SelectPicker/SelectPicker.js +2 -6
  297. package/esm/Tree/IndentLine.d.ts +3 -0
  298. package/esm/Tree/IndentLine.js +12 -0
  299. package/esm/Tree/Tree.d.ts +4 -92
  300. package/esm/Tree/Tree.js +78 -18
  301. package/esm/Tree/TreeNode.d.ts +101 -0
  302. package/esm/Tree/TreeNode.js +141 -0
  303. package/esm/Tree/TreeNodeToggle.d.ts +9 -0
  304. package/esm/Tree/TreeNodeToggle.js +50 -0
  305. package/esm/Tree/TreeProvider.d.ts +52 -0
  306. package/esm/Tree/TreeProvider.js +74 -0
  307. package/esm/Tree/TreeView.d.ts +68 -0
  308. package/esm/Tree/TreeView.js +299 -0
  309. package/esm/Tree/hooks/useExpandTree.d.ts +60 -0
  310. package/esm/Tree/hooks/useExpandTree.js +70 -0
  311. package/esm/Tree/hooks/useFlattenTree.d.ts +42 -0
  312. package/esm/Tree/hooks/useFlattenTree.js +92 -0
  313. package/esm/Tree/hooks/useFocusTree.d.ts +24 -0
  314. package/esm/Tree/hooks/useFocusTree.js +153 -0
  315. package/esm/Tree/hooks/useForceUpdate.d.ts +2 -0
  316. package/esm/Tree/hooks/useForceUpdate.js +11 -0
  317. package/esm/Tree/hooks/useTreeDrag.d.ts +32 -0
  318. package/esm/Tree/hooks/useTreeDrag.js +264 -0
  319. package/esm/Tree/hooks/useTreeNodeProps.d.ts +29 -0
  320. package/esm/Tree/hooks/useTreeNodeProps.js +76 -0
  321. package/esm/Tree/hooks/useTreeNodeRefs.d.ts +6 -0
  322. package/esm/Tree/hooks/useTreeNodeRefs.js +18 -0
  323. package/esm/Tree/hooks/useTreeSearch.d.ts +18 -0
  324. package/esm/Tree/hooks/useTreeSearch.js +69 -0
  325. package/esm/Tree/hooks/useTreeWithChildren.d.ts +14 -0
  326. package/esm/Tree/hooks/useTreeWithChildren.js +59 -0
  327. package/esm/Tree/hooks/useVirtualizedTreeData.d.ts +7 -0
  328. package/esm/Tree/hooks/useVirtualizedTreeData.js +77 -0
  329. package/esm/Tree/types.d.ts +257 -0
  330. package/esm/Tree/types.js +30 -0
  331. package/esm/Tree/utils/flattenTree.d.ts +25 -0
  332. package/esm/Tree/utils/flattenTree.js +88 -0
  333. package/esm/Tree/utils/focusableTree.d.ts +55 -0
  334. package/esm/Tree/utils/focusableTree.js +146 -0
  335. package/esm/Tree/utils/formatNodeRefKey.d.ts +4 -0
  336. package/esm/Tree/utils/formatNodeRefKey.js +7 -0
  337. package/esm/Tree/utils/getExpandItemValues.d.ts +11 -0
  338. package/esm/Tree/utils/getExpandItemValues.js +17 -0
  339. package/esm/Tree/utils/getNodeParentKeys.d.ts +5 -0
  340. package/esm/Tree/utils/getNodeParentKeys.js +17 -0
  341. package/esm/Tree/utils/getTreeActiveNode.d.ts +5 -0
  342. package/esm/Tree/utils/getTreeActiveNode.js +16 -0
  343. package/esm/Tree/utils/hasVisibleChildren.d.ts +5 -0
  344. package/esm/Tree/utils/hasVisibleChildren.js +12 -0
  345. package/esm/Tree/utils/indentTreeNode.d.ts +3 -0
  346. package/esm/Tree/utils/indentTreeNode.js +14 -0
  347. package/esm/Tree/utils/index.d.ts +11 -0
  348. package/esm/Tree/utils/index.js +14 -0
  349. package/esm/Tree/utils/isExpand.d.ts +6 -0
  350. package/esm/Tree/utils/isExpand.js +11 -0
  351. package/esm/Tree/utils/isSearching.d.ts +1 -0
  352. package/esm/Tree/utils/isSearching.js +5 -0
  353. package/esm/Tree/utils/treeKeyboardInteractions.d.ts +21 -0
  354. package/esm/Tree/utils/treeKeyboardInteractions.js +43 -0
  355. package/esm/TreePicker/TreePicker.d.ts +27 -21
  356. package/esm/TreePicker/TreePicker.js +158 -579
  357. package/esm/TreePicker/hooks/useFocusState.d.ts +20 -0
  358. package/esm/TreePicker/hooks/useFocusState.js +48 -0
  359. package/esm/index.d.ts +2 -0
  360. package/esm/index.js +1 -0
  361. package/esm/internals/Picker/Listbox.d.ts +40 -10
  362. package/esm/internals/Picker/Listbox.js +22 -16
  363. package/esm/internals/Picker/PickerIndicator.d.ts +2 -1
  364. package/esm/internals/Picker/PickerIndicator.js +7 -3
  365. package/esm/internals/Picker/hooks/useFocusItemValue.js +1 -1
  366. package/esm/internals/Picker/hooks/usePickerRef.d.ts +1 -4
  367. package/esm/internals/Picker/hooks/usePickerRef.js +3 -20
  368. package/esm/internals/Picker/index.d.ts +0 -1
  369. package/esm/internals/Picker/index.js +0 -1
  370. package/esm/internals/Picker/utils.js +1 -1
  371. package/esm/internals/{Picker → Tree}/TreeView.js +1 -1
  372. package/esm/internals/Tree/index.d.ts +1 -0
  373. package/esm/internals/Tree/index.js +2 -0
  374. package/esm/internals/Tree/utils/filterNodesOfTree.d.ts +5 -0
  375. package/esm/internals/Tree/utils/filterNodesOfTree.js +26 -0
  376. package/esm/internals/Tree/utils/findNodeOfTree.d.ts +1 -0
  377. package/esm/internals/Tree/utils/findNodeOfTree.js +22 -0
  378. package/esm/internals/Tree/utils/getParentMap.d.ts +15 -0
  379. package/esm/internals/Tree/utils/getParentMap.js +47 -0
  380. package/esm/internals/Tree/utils/getPathTowardsItem.d.ts +4 -0
  381. package/esm/internals/Tree/utils/getPathTowardsItem.js +12 -0
  382. package/esm/internals/Tree/utils/index.d.ts +4 -0
  383. package/esm/internals/Tree/utils/index.js +5 -0
  384. package/esm/internals/Windowing/List.d.ts +1 -0
  385. package/esm/internals/Windowing/List.js +3 -0
  386. package/esm/internals/Windowing/index.d.ts +1 -1
  387. package/esm/internals/Windowing/index.js +1 -1
  388. package/esm/internals/hooks/index.d.ts +1 -0
  389. package/esm/internals/hooks/index.js +2 -0
  390. package/esm/internals/hooks/useFoucsVirtualListItem.d.ts +7 -0
  391. package/esm/internals/hooks/useFoucsVirtualListItem.js +22 -0
  392. package/esm/{utils → internals/utils}/getSafeRegExpString.d.ts +1 -1
  393. package/esm/{utils → internals/utils}/getSafeRegExpString.js +1 -1
  394. package/esm/internals/utils/index.d.ts +2 -0
  395. package/esm/internals/utils/index.js +3 -0
  396. package/esm/internals/utils/stringifyReactNode.d.ts +2 -0
  397. package/esm/internals/utils/stringifyReactNode.js +12 -0
  398. package/esm/utils/constants.d.ts +0 -2
  399. package/esm/utils/constants.js +0 -3
  400. package/esm/utils/getDataGroupBy.js +1 -1
  401. package/esm/utils/index.d.ts +0 -3
  402. package/esm/utils/index.js +0 -3
  403. package/esm/utils/useIsomorphicLayoutEffect.d.ts +2 -2
  404. package/internals/Picker/styles/index.less +27 -1
  405. package/package.json +1 -1
  406. package/styles/color-modes/dark.less +5 -1
  407. package/styles/color-modes/high-contrast.less +8 -2
  408. package/styles/color-modes/light.less +10 -5
  409. package/styles/index.less +1 -0
  410. package/TreePicker/styles/mixin.less +0 -7
  411. package/cjs/CheckTreePicker/CheckTreeNode.d.ts +0 -28
  412. package/cjs/CheckTreePicker/CheckTreeNode.js +0 -140
  413. package/cjs/CheckTreePicker/utils.d.ts +0 -44
  414. package/cjs/Tree/TreeContext.d.ts +0 -6
  415. package/cjs/Tree/TreeContext.js +0 -10
  416. package/cjs/TreePicker/TreeNode.d.ts +0 -36
  417. package/cjs/TreePicker/TreeNode.js +0 -174
  418. package/cjs/utils/appendTooltip.d.ts +0 -10
  419. package/cjs/utils/appendTooltip.js +0 -20
  420. package/cjs/utils/stringToObject.d.ts +0 -2
  421. package/cjs/utils/stringToObject.js +0 -19
  422. package/cjs/utils/treeUtils.d.ts +0 -304
  423. package/cjs/utils/treeUtils.js +0 -1095
  424. package/esm/CheckTreePicker/CheckTreeNode.d.ts +0 -28
  425. package/esm/CheckTreePicker/CheckTreeNode.js +0 -133
  426. package/esm/CheckTreePicker/utils.d.ts +0 -44
  427. package/esm/Tree/TreeContext.d.ts +0 -6
  428. package/esm/Tree/TreeContext.js +0 -4
  429. package/esm/TreePicker/TreeNode.d.ts +0 -36
  430. package/esm/TreePicker/TreeNode.js +0 -167
  431. package/esm/utils/appendTooltip.d.ts +0 -10
  432. package/esm/utils/appendTooltip.js +0 -15
  433. package/esm/utils/stringToObject.d.ts +0 -2
  434. package/esm/utils/stringToObject.js +0 -14
  435. package/esm/utils/treeUtils.d.ts +0 -304
  436. package/esm/utils/treeUtils.js +0 -1043
  437. /package/cjs/internals/{Picker → Tree}/TreeView.d.ts +0 -0
  438. /package/esm/internals/{Picker → Tree}/TreeView.d.ts +0 -0
@@ -46,7 +46,8 @@
46
46
  --rs-text-primary: var(--rs-gray-800);
47
47
  --rs-text-secondary: var(--rs-gray-600);
48
48
  --rs-text-inverse: var(--rs-gray-50);
49
- --rs-text-disabled: var(--rs-gray-400);
49
+ --rs-text-disabled: var(--rs-gray-600);
50
+ --rs-text-highlight-bg: #fff6c9;
50
51
  --rs-border-primary: var(--rs-gray-200);
51
52
  --rs-bg-overlay: var(--rs-gray-0);
52
53
  --rs-state-hover-bg: var(--rs-primary-50);
@@ -60,7 +61,7 @@
60
61
  --rs-btn-default-active-bg: var(--rs-gray-300);
61
62
  --rs-btn-default-active-text: var(--rs-gray-900);
62
63
  --rs-btn-default-disabled-bg: var(--rs-gray-50);
63
- --rs-btn-default-disabled-text: var(--rs-gray-400);
64
+ --rs-btn-default-disabled-text: var(--rs-gray-600);
64
65
  --rs-btn-primary-bg: var(--rs-primary-500);
65
66
  --rs-btn-primary-text: var(--rs-gray-0);
66
67
  --rs-btn-primary-hover-bg: var(--rs-primary-600);
@@ -89,6 +90,7 @@
89
90
  --rs-input-bg: var(--rs-gray-0);
90
91
  --rs-input-focus-border: var(--rs-primary-500);
91
92
  --rs-input-disabled-bg: var(--rs-gray-50);
93
+ --rs-listbox-option-group-bg: var(--rs-gray-0);
92
94
  --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
93
95
  --rs-listbox-option-hover-text: var(--rs-primary-700);
94
96
  --rs-checkbox-icon: #fff;
@@ -99,6 +101,7 @@
99
101
  --rs-picker-value: var(--rs-primary-700);
100
102
  --rs-picker-count-bg: var(--rs-primary-500);
101
103
  --rs-picker-count-text: #fff;
104
+ --rs-tree-indent-line-color: rgba(0, 0, 0, 0.1);
102
105
  }
103
106
  @supports not (color: rgb(from white r g b)) {
104
107
  :root,
@@ -159,7 +162,7 @@
159
162
  --rs-text-primary: var(--rs-gray-50);
160
163
  --rs-text-secondary: var(--rs-gray-200);
161
164
  --rs-text-inverse: var(--rs-gray-800);
162
- --rs-text-disabled: var(--rs-gray-500);
165
+ --rs-text-disabled: var(--rs-gray-400);
163
166
  --rs-border-primary: var(--rs-gray-600);
164
167
  --rs-bg-overlay: var(--rs-gray-700);
165
168
  --rs-state-hover-bg: var(--rs-gray-600);
@@ -202,6 +205,7 @@
202
205
  --rs-input-bg: var(--rs-gray-800);
203
206
  --rs-input-focus-border: var(--rs-primary-500);
204
207
  --rs-input-disabled-bg: var(--rs-gray-700);
208
+ --rs-listbox-option-group-bg: var(--rs-gray-700);
205
209
  --rs-listbox-option-hover-bg: var(--rs-gray-600);
206
210
  --rs-listbox-option-hover-text: currentColor;
207
211
  --rs-checkbox-icon: var(--rs-gray-800);
@@ -212,6 +216,7 @@
212
216
  --rs-picker-value: var(--rs-primary-500);
213
217
  --rs-picker-count-bg: var(--rs-primary-700);
214
218
  --rs-picker-count-text: #fff;
219
+ --rs-tree-indent-line-color: rgba(255, 255, 255, 0.1);
215
220
  }
216
221
  @supports not (color: rgb(from white r g b)) {
217
222
  .rs-theme-dark {
@@ -270,7 +275,8 @@
270
275
  --rs-text-primary: var(--rs-gray-50);
271
276
  --rs-text-secondary: var(--rs-gray-200);
272
277
  --rs-text-inverse: var(--rs-gray-800);
273
- --rs-text-disabled: var(--rs-gray-500);
278
+ --rs-text-disabled: var(--rs-gray-400);
279
+ --rs-text-highlight-bg: var(--rs-primary-500);
274
280
  --rs-border-primary: var(--rs-gray-100);
275
281
  --rs-bg-overlay: var(--rs-gray-800);
276
282
  --rs-state-hover-bg: var(--rs-gray-600);
@@ -286,7 +292,8 @@
286
292
  --rs-btn-default-active-bg: transparent;
287
293
  --rs-btn-default-active-text: var(--rs-primary-200);
288
294
  --rs-btn-default-disabled-bg: transparent;
289
- --rs-btn-default-disabled-text: var(--rs-primary-500);
295
+ --rs-btn-default-disabled-text: var(--rs-primary-900);
296
+ --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
290
297
  --rs-btn-primary-bg: var(--rs-primary-500);
291
298
  --rs-btn-primary-text: var(--rs-gray-900);
292
299
  --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -315,6 +322,7 @@
315
322
  --rs-input-bg: var(--rs-gray-800);
316
323
  --rs-input-focus-border: var(--rs-primary-500);
317
324
  --rs-input-disabled-bg: var(--rs-gray-700);
325
+ --rs-listbox-option-group-bg: var(--rs-gray-800);
318
326
  --rs-listbox-option-hover-bg: transparent;
319
327
  --rs-listbox-option-hover-text: var(--rs-primary-500);
320
328
  --rs-checkbox-icon: var(--rs-gray-800);
@@ -325,6 +333,7 @@
325
333
  --rs-picker-value: var(--rs-primary-500);
326
334
  --rs-picker-count-bg: var(--rs-primary-500);
327
335
  --rs-picker-count-text: var(--rs-gray-900);
336
+ --rs-tree-indent-line-color: rgba(255, 255, 255, 0.1);
328
337
  }
329
338
  @supports not (color: rgb(from white r g b)) {
330
339
  .rs-theme-high-contrast {
@@ -442,14 +451,14 @@
442
451
  .rs-btn:disabled,
443
452
  .rs-btn.rs-btn-disabled {
444
453
  cursor: not-allowed;
445
- color: #c5c6c7;
454
+ color: #8e8e93;
446
455
  color: var(--rs-btn-default-disabled-text);
447
456
  background-color: #f7f7fa;
448
457
  background-color: var(--rs-btn-default-disabled-bg);
449
458
  }
450
459
  .rs-theme-high-contrast .rs-btn:disabled,
451
460
  .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
452
- opacity: 0.5;
461
+ border-color: var(--rs-btn-default-disabled-boreder-color);
453
462
  }
454
463
  @media not all and (min-resolution: 0.001dpcm) {
455
464
  .rs-btn {
@@ -497,7 +506,7 @@
497
506
  }
498
507
  .rs-theme-high-contrast .rs-btn-primary:disabled,
499
508
  .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
500
- opacity: 0.5;
509
+ border-color: var(--rs-btn-default-disabled-boreder-color);
501
510
  }
502
511
  .rs-btn-subtle {
503
512
  color: #575757;
@@ -527,7 +536,7 @@
527
536
  }
528
537
  .rs-theme-high-contrast .rs-btn-subtle:disabled,
529
538
  .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
530
- opacity: 0.5;
539
+ border-color: var(--rs-btn-default-disabled-boreder-color);
531
540
  }
532
541
  .rs-btn-link {
533
542
  color: #1675e0;
@@ -558,7 +567,7 @@
558
567
  }
559
568
  .rs-theme-high-contrast .rs-btn-link:disabled,
560
569
  .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
561
- opacity: 0.5;
570
+ border-color: var(--rs-btn-default-disabled-boreder-color);
562
571
  }
563
572
  .rs-btn-ghost {
564
573
  color: #1675e0;
@@ -600,7 +609,7 @@
600
609
  }
601
610
  .rs-theme-high-contrast .rs-btn-ghost:disabled,
602
611
  .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
603
- opacity: 0.5;
612
+ border-color: var(--rs-btn-default-disabled-boreder-color);
604
613
  }
605
614
  .rs-btn-red {
606
615
  --rs-btn-primary-bg: var(--rs-red-500);
@@ -1581,7 +1590,7 @@ textarea.rs-input {
1581
1590
  .rs-input:disabled {
1582
1591
  background-color: #f7f7fa;
1583
1592
  background-color: var(--rs-input-disabled-bg);
1584
- color: #c5c6c7;
1593
+ color: #8e8e93;
1585
1594
  color: var(--rs-text-disabled);
1586
1595
  }
1587
1596
  textarea.rs-input {
@@ -1782,7 +1791,7 @@ textarea.rs-input-sm {
1782
1791
  }
1783
1792
  .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn:disabled,
1784
1793
  .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-disabled {
1785
- opacity: 0.5;
1794
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1786
1795
  }
1787
1796
  .rs-input-group.rs-input-group-inside .rs-input-group-btn > .rs-icon {
1788
1797
  font-size: 14px;
@@ -1829,16 +1838,16 @@ textarea.rs-input-sm {
1829
1838
  left: inherit;
1830
1839
  right: 1px;
1831
1840
  }
1832
- .rs-input-group-disabled {
1841
+ .rs-input-group.rs-input-group-disabled {
1833
1842
  background-color: #f7f7fa;
1834
1843
  background-color: var(--rs-input-disabled-bg);
1835
- color: #c5c6c7;
1844
+ color: #8e8e93;
1836
1845
  color: var(--rs-text-disabled);
1837
1846
  cursor: not-allowed;
1838
1847
  }
1839
- .rs-input-group-disabled .rs-input,
1840
- .rs-input-group-disabled .rs-input-group-btn,
1841
- .rs-input-group-disabled .rs-input-group-addon {
1848
+ .rs-input-group.rs-input-group-disabled .rs-input,
1849
+ .rs-input-group.rs-input-group-disabled .rs-input-group-btn,
1850
+ .rs-input-group.rs-input-group-disabled .rs-input-group-addon {
1842
1851
  color: inherit;
1843
1852
  }
1844
1853
  .rs-input-group-lg > .rs-input {
@@ -2190,6 +2199,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2190
2199
  .rs-input-group-btn:last-child > .rs-btn-group {
2191
2200
  margin-left: -1px;
2192
2201
  }
2202
+ .rs-highlight-mark {
2203
+ background-color: #fff6c9;
2204
+ background-color: var(--rs-text-highlight-bg);
2205
+ padding: 0 0.2em;
2206
+ font-weight: bolder;
2207
+ border-radius: 4px;
2208
+ }
2193
2209
  .rs-picker-subtle .picker-subtle-toggle {
2194
2210
  position: relative;
2195
2211
  z-index: 5;
@@ -2221,7 +2237,16 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2221
2237
  display: block;
2222
2238
  }
2223
2239
  .rs-picker-disabled {
2224
- opacity: 0.3;
2240
+ cursor: not-allowed;
2241
+ }
2242
+ .rs-picker-disabled .rs-picker-toggle-value,
2243
+ .rs-picker-disabled .rs-picker-toggle-indicator,
2244
+ .rs-picker-disabled .rs-picker-tag-list .rs-tag {
2245
+ color: #8e8e93 !important;
2246
+ color: var(--rs-text-disabled) !important;
2247
+ }
2248
+ .rs-picker-disabled .rs-picker-value-count {
2249
+ opacity: 0.5;
2225
2250
  }
2226
2251
  .rs-picker-toggle .rs-picker-toggle-placeholder {
2227
2252
  color: #8e8e93;
@@ -2402,14 +2427,14 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2402
2427
  .rs-picker-toggle:disabled,
2403
2428
  .rs-picker-toggle.rs-btn-disabled {
2404
2429
  cursor: not-allowed;
2405
- color: #c5c6c7;
2430
+ color: #8e8e93;
2406
2431
  color: var(--rs-btn-default-disabled-text);
2407
2432
  background-color: #f7f7fa;
2408
2433
  background-color: var(--rs-btn-default-disabled-bg);
2409
2434
  }
2410
2435
  .rs-theme-high-contrast .rs-picker-toggle:disabled,
2411
2436
  .rs-theme-high-contrast .rs-picker-toggle.rs-btn-disabled {
2412
- opacity: 0.5;
2437
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2413
2438
  }
2414
2439
  @media not all and (min-resolution: 0.001dpcm) {
2415
2440
  .rs-picker-toggle {
@@ -2492,7 +2517,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2492
2517
  }
2493
2518
  .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
2494
2519
  .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
2495
- opacity: 0.5;
2520
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2496
2521
  }
2497
2522
  .rs-picker-subtle .rs-picker-toggle-active {
2498
2523
  background-color: #e5e5ea;
@@ -2977,6 +3002,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2977
3002
  .rs-picker-popup .rs-search-box {
2978
3003
  padding: 6px 12px 6px;
2979
3004
  }
3005
+ .rs-picker-popup .rs-highlight .rs-highlight-mark {
3006
+ padding: 0;
3007
+ }
2980
3008
  .rs-picker-default .rs-btn,
2981
3009
  .rs-picker-input .rs-btn,
2982
3010
  .rs-picker-default .rs-picker-toggle,
@@ -2991,6 +3019,10 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2991
3019
  background-color: #f7f7fa !important;
2992
3020
  background-color: var(--rs-input-disabled-bg) !important;
2993
3021
  }
3022
+ .rs-picker-default.rs-picker-disabled .rs-input-group,
3023
+ .rs-picker-input.rs-picker-disabled .rs-input-group {
3024
+ pointer-events: none;
3025
+ }
2994
3026
  .rs-check-item {
2995
3027
  display: block;
2996
3028
  }
@@ -3058,6 +3090,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3058
3090
  .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
3059
3091
  left: 26px;
3060
3092
  }
3093
+ .rs-picker-menu-group {
3094
+ background-color: #fff;
3095
+ background-color: var(--rs-listbox-option-group-bg);
3096
+ position: sticky;
3097
+ top: -1px;
3098
+ z-index: 1;
3099
+ }
3061
3100
  .rs-checkbox {
3062
3101
  position: relative;
3063
3102
  display: inline-block;
@@ -3080,7 +3119,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3080
3119
  cursor: not-allowed;
3081
3120
  }
3082
3121
  .rs-checkbox-disabled > .rs-checkbox-checker > label {
3083
- color: #c5c6c7;
3122
+ color: #8e8e93;
3084
3123
  color: var(--rs-text-disabled);
3085
3124
  }
3086
3125
  .rs-checkbox-inline {
@@ -3239,10 +3278,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
3239
3278
  }
3240
3279
  .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
3241
3280
  .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
3242
- opacity: 0.3;
3243
- }
3244
- .rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
3245
- .rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
3246
3281
  opacity: 0.5;
3247
3282
  }
3248
3283
  .rs-checkbox-red .rs-checkbox-control::before {
@@ -3350,37 +3385,102 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
3350
3385
  background-color: #673ab7;
3351
3386
  background-color: var(--rs-violet-500);
3352
3387
  }
3388
+ .rs-tree-node-toggle {
3389
+ cursor: pointer;
3390
+ width: 24px;
3391
+ padding: 4px;
3392
+ display: -webkit-box;
3393
+ display: -ms-flexbox;
3394
+ display: flex;
3395
+ -webkit-box-pack: center;
3396
+ -ms-flex-pack: center;
3397
+ justify-content: center;
3398
+ -webkit-box-align: center;
3399
+ -ms-flex-align: center;
3400
+ align-items: center;
3401
+ }
3402
+ .rs-tree-node-toggle > .rs-tree-node-toggle-icon {
3403
+ display: inline-block;
3404
+ height: 16px;
3405
+ width: 16px;
3406
+ -webkit-user-select: none;
3407
+ -moz-user-select: none;
3408
+ -ms-user-select: none;
3409
+ user-select: none;
3410
+ }
3411
+ .rs-tree-node-toggle > .rs-tree-node-custom-icon,
3412
+ .rs-tree-node-toggle > .rs-tree-node-loading-icon {
3413
+ display: -webkit-box;
3414
+ display: -ms-flexbox;
3415
+ display: flex;
3416
+ -webkit-box-align: center;
3417
+ -ms-flex-align: center;
3418
+ align-items: center;
3419
+ font-size: 14px;
3420
+ }
3421
+ .rs-tree-node-toggle-placeholder {
3422
+ width: 24px;
3423
+ height: 24px;
3424
+ }
3425
+ /* rtl:begin:ignore */
3426
+ [dir='rtl'] .rs-tree-node-toggle {
3427
+ right: 0;
3428
+ padding-right: inherit;
3429
+ }
3430
+ /* rtl:end:ignore */
3431
+ .rs-tree-indent-line {
3432
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
3433
+ border-left: 1px solid var(--rs-tree-indent-line-color);
3434
+ position: absolute;
3435
+ width: 1px;
3436
+ top: -10px;
3437
+ left: 12px;
3438
+ bottom: -4px;
3439
+ }
3353
3440
  .rs-check-tree {
3354
- max-height: 360px;
3355
3441
  height: 100%;
3356
- overflow-y: auto;
3357
3442
  -webkit-box-flex: 1;
3358
3443
  -ms-flex: 1 1 auto;
3359
3444
  flex: 1 1 auto;
3360
3445
  }
3361
- .rs-check-tree.rs-check-tree-virtualized {
3362
- overflow: hidden;
3363
- }
3364
- .rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker > label {
3446
+ .rs-check-tree .rs-check-tree-node-content .rs-check-item .rs-checkbox-checker > label {
3365
3447
  text-align: left;
3366
3448
  position: relative;
3367
3449
  margin: 0;
3368
- padding: 1px 0 1px 42px;
3450
+ padding: 2px 2px 2px 38px;
3369
3451
  }
3370
- .rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
3371
- left: 20px;
3372
- }
3373
- .rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-check-tree-node-label-content {
3374
- padding: 6px 8px;
3452
+ .rs-check-tree .rs-check-tree-node-content .rs-check-item .rs-checkbox-checker .rs-checkbox-label {
3453
+ padding: 6px;
3375
3454
  width: auto;
3376
3455
  }
3377
- .rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
3456
+ .rs-check-tree .rs-check-tree-node-content:focus-visible .rs-checkbox-label {
3378
3457
  outline: 3px solid rgb(from #3498ff r g b / 25%);
3379
3458
  outline: 3px solid var(--rs-color-focus-ring);
3380
3459
  }
3381
- .rs-theme-high-contrast .rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
3460
+ .rs-theme-high-contrast .rs-check-tree .rs-check-tree-node-content:focus-visible .rs-checkbox-label {
3382
3461
  outline-offset: 2px;
3383
3462
  }
3463
+ .rs-check-tree .rs-check-tree-node-all-uncheckable .rs-check-item .rs-checkbox-checker > label {
3464
+ padding-left: 2px;
3465
+ }
3466
+ .rs-check-tree .rs-search-box {
3467
+ padding: 6px;
3468
+ }
3469
+ .rs-check-tree .rs-check-tree-empty {
3470
+ padding: 6px 12px;
3471
+ color: #8e8e93;
3472
+ color: var(--rs-text-secondary);
3473
+ }
3474
+ .rs-check-tree-view {
3475
+ max-height: 360px;
3476
+ overflow-y: auto;
3477
+ }
3478
+ .rs-check-tree.rs-tree-virtualized .rs-check-tree-view {
3479
+ overflow: hidden;
3480
+ }
3481
+ .rs-check-tree .rs-highlight-mark {
3482
+ padding: 0;
3483
+ }
3384
3484
  .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label {
3385
3485
  padding-left: 32px;
3386
3486
  }
@@ -3391,10 +3491,17 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
3391
3491
  .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
3392
3492
  left: 0;
3393
3493
  }
3494
+ .rs-check-tree-group {
3495
+ padding-left: 26px;
3496
+ }
3394
3497
  .rs-check-tree-node {
3395
3498
  position: relative;
3396
- font-size: 14px;
3397
- line-height: 22px;
3499
+ display: -webkit-box;
3500
+ display: -ms-flexbox;
3501
+ display: flex;
3502
+ -webkit-box-align: center;
3503
+ -ms-flex-align: center;
3504
+ align-items: center;
3398
3505
  }
3399
3506
  .rs-check-tree-node .rs-check-item {
3400
3507
  display: inline-block;
@@ -3404,17 +3511,20 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
3404
3511
  .rs-check-tree-node .rs-check-item-focus {
3405
3512
  background-color: transparent !important;
3406
3513
  }
3407
- .rs-check-tree-node .rs-check-item:hover .rs-check-tree-node-label-content,
3408
- .rs-check-tree-node .rs-check-item:focus .rs-check-tree-node-label-content,
3409
- .rs-check-tree-node .rs-check-item-focus .rs-check-tree-node-label-content {
3514
+ .rs-check-tree-node .rs-check-item:hover .rs-checkbox-label,
3515
+ .rs-check-tree-node .rs-check-item:focus .rs-checkbox-label,
3516
+ .rs-check-tree-node .rs-check-item-focus .rs-checkbox-label {
3410
3517
  background-color: rgb(from #cce9ff r g b / 50%);
3411
3518
  background-color: var(--rs-listbox-option-hover-bg);
3412
3519
  color: #1675e0;
3413
3520
  color: var(--rs-listbox-option-hover-text);
3414
3521
  border-radius: 6px;
3415
3522
  }
3416
- .rs-picker-popup .rs-check-tree-node .rs-check-item {
3417
- display: block;
3523
+ .rs-check-tree-node .rs-check-item.rs-checkbox-disabled .rs-checkbox-label {
3524
+ cursor: not-allowed;
3525
+ color: #8e8e93;
3526
+ color: var(--rs-text-disabled);
3527
+ background: none;
3418
3528
  }
3419
3529
  .rs-check-tree-node:focus .rs-check-item .rs-checkbox-checker > label {
3420
3530
  color: #575757;
@@ -3425,92 +3535,14 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
3425
3535
  .rs-check-tree-node .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
3426
3536
  font-weight: bold;
3427
3537
  }
3428
- .rs-check-tree-node-all-uncheckable .rs-check-item .rs-checkbox-checker > label {
3429
- padding-left: 22px;
3430
- }
3431
- .rs-check-tree-node-all-uncheckable .rs-check-item .rs-checkbox-checker > label::before {
3432
- width: 14px;
3433
- margin-left: 0;
3434
- left: 0;
3435
- }
3436
- .rs-check-tree-node-expand-icon-wrapper {
3437
- display: inline-block;
3438
- position: absolute;
3439
- cursor: pointer;
3440
- z-index: 1;
3441
- }
3442
- .rs-check-tree-node-expand-icon-wrapper > .rs-check-tree-node-expand-icon {
3443
- display: inline-block;
3444
- padding: 8px 0;
3445
- padding-right: 8px;
3446
- height: 36px;
3447
- font-size: 16px;
3448
- line-height: 22px;
3449
- -webkit-transform: rotate(-90deg) /* rtl: rotate(90deg) translateX(-13px) translateY(-15px) */;
3450
- transform: rotate(-90deg) /* rtl: rotate(90deg) translateX(-13px) translateY(-15px) */;
3451
- -webkit-transform-origin: 1.5px 14px;
3452
- transform-origin: 1.5px 14px;
3453
- margin-top: 6px;
3454
- -webkit-user-select: none;
3455
- -moz-user-select: none;
3456
- -ms-user-select: none;
3457
- user-select: none;
3458
- }
3459
- .rs-check-tree-open > .rs-check-tree-node .rs-check-tree-node-expand-icon-wrapper > .rs-check-tree-node-expand-icon {
3460
- -webkit-transform: rotate(0deg);
3461
- transform: rotate(0deg);
3462
- margin-left: 0;
3463
- margin-top: 0;
3464
- }
3465
- .rs-check-tree-node-expand-icon-wrapper > .rs-check-tree-node-expanded {
3466
- -webkit-transform: rotate(0deg);
3467
- transform: rotate(0deg);
3468
- margin-left: 0;
3469
- margin-top: 0;
3470
- }
3471
- .rs-check-tree-node-expand-icon-wrapper > .rs-check-tree-node-custom-icon,
3472
- .rs-check-tree-node-expand-icon-wrapper > .rs-check-tree-node-loading-icon {
3473
- width: 14px;
3474
- height: 36px;
3475
- display: -webkit-box;
3476
- display: -ms-flexbox;
3477
- display: flex;
3478
- -webkit-box-align: center;
3479
- -ms-flex-align: center;
3480
- align-items: center;
3481
- font-size: 14px;
3482
- }
3483
3538
  .rs-check-tree-node-children > .rs-check-tree-group {
3484
3539
  position: relative;
3485
3540
  display: none;
3486
3541
  }
3487
- .rs-check-tree-open.rs-check-tree-node-children > .rs-check-tree-group {
3542
+ .rs-check-tree-node-expanded.rs-check-tree-node-children > .rs-check-tree-group {
3488
3543
  display: block;
3489
3544
  }
3490
- .rs-check-tree-indent-line {
3491
- height: 100%;
3492
- width: 1px;
3493
- position: absolute;
3494
- top: 0;
3495
- margin-left: -13px;
3496
- border-left: 1px solid rgba(0, 0, 0, 0.1);
3497
- }
3498
- .rs-picker-popup {
3499
- display: -webkit-box;
3500
- display: -ms-flexbox;
3501
- display: flex;
3502
- -webkit-box-orient: vertical;
3503
- -webkit-box-direction: normal;
3504
- -ms-flex-direction: column;
3505
- flex-direction: column;
3506
- }
3507
- .rs-picker-popup.rs-check-tree-menu {
3508
- padding-top: 12px;
3509
- }
3510
- .rs-check-tree {
3511
- padding-right: 12px;
3512
- }
3513
- .rs-check-tree-node > .rs-check-tree-node-label .rs-check-tree-node-label-content {
3545
+ .rs-check-tree-node > .rs-check-tree-node-content .rs-checkbox-label {
3514
3546
  overflow: hidden;
3515
3547
  text-overflow: ellipsis;
3516
3548
  white-space: nowrap;
@@ -3518,11 +3550,5 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
3518
3550
  display: inline-block;
3519
3551
  vertical-align: top;
3520
3552
  }
3521
- /* rtl:begin:ignore */
3522
- [dir='rtl'] .rs-check-tree-node-expand-icon-wrapper {
3523
- right: 0;
3524
- padding-right: inherit;
3525
- }
3526
- /* rtl:end:ignore */
3527
3553
 
3528
3554
  /*# sourceMappingURL=index.css.map */
@@ -1 +1,141 @@
1
- @import '../../CheckTreePicker/styles/index.less';
1
+ @import '../../styles/common.less';
2
+ @import '../../internals/Picker/styles/index.less';
3
+ @import '../../Checkbox/styles/index.less';
4
+ @import '../../Tree/styles/toggle.less';
5
+ @import '../../Tree/styles/indent-line.less';
6
+
7
+ // Check Tree
8
+ // ----------------------
9
+
10
+ .rs-check-tree {
11
+ height: 100%;
12
+ flex: 1 1 auto;
13
+
14
+ .rs-check-tree-node-content {
15
+ .rs-check-item .rs-checkbox-checker {
16
+ > label {
17
+ text-align: left;
18
+ position: relative;
19
+ margin: 0;
20
+ padding: 2px 2px 2px 38px;
21
+ }
22
+
23
+ .rs-checkbox-label {
24
+ padding: 6px;
25
+ width: auto;
26
+ }
27
+ }
28
+
29
+ &:focus-visible {
30
+ .rs-checkbox-label {
31
+ .focus-ring();
32
+ }
33
+ }
34
+ }
35
+
36
+ // Uncheckable state
37
+ .rs-check-tree-node-all-uncheckable .rs-check-item .rs-checkbox-checker > label {
38
+ padding-left: 2px;
39
+ }
40
+
41
+ .rs-search-box {
42
+ padding: 6px;
43
+ }
44
+
45
+ .rs-check-tree-empty {
46
+ padding: 6px 12px;
47
+ color: var(--rs-text-secondary);
48
+ }
49
+
50
+ &-view {
51
+ max-height: 360px;
52
+ overflow-y: auto;
53
+ }
54
+
55
+ &.rs-tree-virtualized &-view {
56
+ overflow: hidden;
57
+ }
58
+
59
+ .rs-highlight-mark {
60
+ padding: 0;
61
+ }
62
+ }
63
+
64
+ // Only has the first level
65
+ .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
66
+ > label {
67
+ padding-left: 32px; //text gap + checkbox space
68
+
69
+ &::before {
70
+ width: 28px;
71
+ margin-left: -34px;
72
+ }
73
+ }
74
+
75
+ .rs-checkbox-control {
76
+ left: 0;
77
+ }
78
+ }
79
+
80
+ .rs-check-tree-group {
81
+ padding-left: 26px;
82
+ }
83
+
84
+ .rs-check-tree-node {
85
+ position: relative;
86
+ display: flex;
87
+ align-items: center;
88
+
89
+ .rs-check-item {
90
+ display: inline-block;
91
+
92
+ &:hover,
93
+ &:focus,
94
+ &-focus {
95
+ background-color: transparent !important;
96
+
97
+ .rs-checkbox-label {
98
+ background-color: var(--rs-listbox-option-hover-bg);
99
+ color: var(--rs-listbox-option-hover-text);
100
+ border-radius: 6px;
101
+ }
102
+ }
103
+
104
+ &.rs-checkbox-disabled {
105
+ .rs-checkbox-label {
106
+ cursor: not-allowed;
107
+ color: var(--rs-text-disabled);
108
+ background: none;
109
+ }
110
+ }
111
+ }
112
+
113
+ &:focus .rs-check-item .rs-checkbox-checker > label {
114
+ .picker-item-hover();
115
+ }
116
+
117
+ .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
118
+ .picker-item-active();
119
+ }
120
+ }
121
+
122
+ // node children
123
+ .rs-check-tree-node-children {
124
+ > .rs-check-tree-group {
125
+ position: relative;
126
+ display: none;
127
+
128
+ .rs-check-tree-node-expanded& {
129
+ display: block;
130
+ }
131
+ }
132
+ }
133
+
134
+ .rs-check-tree {
135
+ &-node > .rs-check-tree-node-content .rs-checkbox-label {
136
+ .ellipsis();
137
+
138
+ display: inline-block;
139
+ vertical-align: top;
140
+ }
141
+ }