rsuite 5.60.1 → 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 (475) 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 +37 -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 +63 -26
  21. package/DatePicker/styles/index.less +1 -0
  22. package/DateRangeInput/styles/index.css +4 -4
  23. package/DateRangePicker/styles/index.css +69 -26
  24. package/DateRangePicker/styles/index.less +3 -0
  25. package/Dropdown/styles/index.css +14 -13
  26. package/Highlight/package.json +7 -0
  27. package/Highlight/styles/index.css +8 -0
  28. package/Highlight/styles/index.less +6 -0
  29. package/IconButton/styles/index.css +11 -10
  30. package/Input/styles/index.css +4 -4
  31. package/InputGroup/styles/index.css +18 -17
  32. package/InputGroup/styles/index.less +1 -1
  33. package/InputNumber/styles/index.css +19 -18
  34. package/InputPicker/styles/index.css +58 -22
  35. package/LICENSE +1 -1
  36. package/MultiCascadeTree/styles/index.css +61 -36
  37. package/MultiCascadeTree/styles/index.less +1 -1
  38. package/MultiCascader/styles/index.css +704 -679
  39. package/MultiCascader/styles/index.less +0 -1
  40. package/Nav/styles/index.css +15 -14
  41. package/Navbar/styles/index.css +14 -13
  42. package/Pagination/styles/index.css +62 -26
  43. package/Panel/styles/index.css +4 -4
  44. package/Placeholder/styles/index.css +2 -3
  45. package/Placeholder/styles/index.less +2 -3
  46. package/README.md +53 -90
  47. package/Radio/styles/index.css +7 -7
  48. package/Radio/styles/index.less +1 -5
  49. package/RangeSlider/styles/index.css +2 -2
  50. package/Rate/styles/index.css +1 -1
  51. package/Rate/styles/index.less +1 -1
  52. package/SelectPicker/styles/index.css +58 -22
  53. package/Slider/styles/index.css +2 -2
  54. package/Slider/styles/index.less +2 -2
  55. package/Steps/styles/index.css +6 -1
  56. package/Steps/styles/index.less +2 -1
  57. package/Tabs/styles/index.css +15 -14
  58. package/TagInput/styles/index.css +59 -27
  59. package/TagPicker/styles/index.css +59 -27
  60. package/Toggle/styles/index.css +16 -8
  61. package/Toggle/styles/index.less +2 -1
  62. package/Tree/styles/indent-line.less +8 -0
  63. package/Tree/styles/index.css +140 -141
  64. package/Tree/styles/index.less +188 -1
  65. package/Tree/styles/toggle.less +36 -0
  66. package/TreePicker/styles/index.css +142 -134
  67. package/TreePicker/styles/index.less +4 -234
  68. package/Uploader/styles/index.css +12 -11
  69. package/cjs/@types/common.d.ts +41 -4
  70. package/cjs/AutoComplete/AutoComplete.js +2 -1
  71. package/cjs/CascadeTree/CascadeTree.js +8 -7
  72. package/cjs/CascadeTree/SearchView.js +7 -14
  73. package/cjs/CascadeTree/hooks/usePaths.js +4 -4
  74. package/cjs/CascadeTree/hooks/useSearch.js +2 -1
  75. package/cjs/CascadeTree/utils.d.ts +0 -11
  76. package/cjs/CascadeTree/utils.js +0 -23
  77. package/cjs/Cascader/Cascader.js +17 -16
  78. package/cjs/CheckPicker/CheckPicker.js +26 -29
  79. package/cjs/CheckTree/CheckTree.d.ts +16 -0
  80. package/cjs/CheckTree/CheckTree.js +112 -0
  81. package/cjs/CheckTree/CheckTreeNode.d.ts +72 -0
  82. package/cjs/CheckTree/CheckTreeNode.js +117 -0
  83. package/cjs/CheckTree/CheckTreeView.d.ts +70 -0
  84. package/cjs/CheckTree/CheckTreeView.js +310 -0
  85. package/cjs/CheckTree/hooks/useTreeCheckState.d.ts +10 -0
  86. package/cjs/CheckTree/hooks/useTreeCheckState.js +93 -0
  87. package/cjs/CheckTree/hooks/useTreeNodeProps.d.ts +22 -0
  88. package/cjs/CheckTree/hooks/useTreeNodeProps.js +59 -0
  89. package/cjs/CheckTree/hooks/useTreeValue.d.ts +5 -0
  90. package/cjs/CheckTree/hooks/useTreeValue.js +21 -0
  91. package/cjs/CheckTree/index.d.ts +2 -14
  92. package/cjs/CheckTree/index.js +2 -23
  93. package/cjs/CheckTree/utils.d.ts +53 -0
  94. package/cjs/{CheckTreePicker → CheckTree}/utils.js +76 -26
  95. package/cjs/CheckTreePicker/CheckTreePicker.d.ts +30 -12
  96. package/cjs/CheckTreePicker/CheckTreePicker.js +153 -603
  97. package/cjs/CheckTreePicker/hooks/useFocusState.d.ts +16 -0
  98. package/cjs/CheckTreePicker/hooks/useFocusState.js +42 -0
  99. package/cjs/DateInput/DateField.js +3 -1
  100. package/cjs/DateInput/DateInput.js +17 -16
  101. package/{esm/DateInput → cjs/DateInput/hooks}/useDateInputState.d.ts +1 -1
  102. package/cjs/DateInput/{useDateInputState.js → hooks/useDateInputState.js} +2 -2
  103. package/cjs/DateInput/hooks/useFieldCursor.d.ts +6 -0
  104. package/cjs/DateInput/hooks/useFieldCursor.js +56 -0
  105. package/cjs/DateInput/hooks/useSelectedState.d.ts +14 -0
  106. package/cjs/DateInput/hooks/useSelectedState.js +23 -0
  107. package/cjs/DateInput/index.d.ts +5 -3
  108. package/cjs/DateInput/index.js +11 -5
  109. package/cjs/DateInput/utils.d.ts +0 -1
  110. package/cjs/DateInput/utils.js +2 -24
  111. package/cjs/DatePicker/DatePicker.d.ts +4 -0
  112. package/cjs/DatePicker/DatePicker.js +20 -5
  113. package/cjs/DatePicker/types.d.ts +0 -4
  114. package/cjs/DateRangeInput/DateRangeInput.js +16 -17
  115. package/cjs/DateRangePicker/DateRangePicker.d.ts +51 -23
  116. package/cjs/DateRangePicker/DateRangePicker.js +71 -51
  117. package/cjs/DateRangePicker/hooks/useDateDisabled.d.ts +16 -0
  118. package/cjs/DateRangePicker/hooks/useDateDisabled.js +31 -0
  119. package/cjs/DateRangePicker/types.d.ts +1 -0
  120. package/cjs/Highlight/Highlight.d.ts +14 -0
  121. package/cjs/Highlight/Highlight.js +58 -0
  122. package/cjs/Highlight/index.d.ts +3 -0
  123. package/cjs/Highlight/index.js +9 -0
  124. package/cjs/Highlight/utils/highlightText.d.ts +5 -0
  125. package/cjs/Highlight/utils/highlightText.js +29 -0
  126. package/cjs/InputPicker/InputPicker.js +37 -41
  127. package/cjs/MultiCascadeTree/SearchView.js +6 -14
  128. package/cjs/MultiCascadeTree/hooks/useCascadeValue.js +15 -1
  129. package/cjs/MultiCascadeTree/hooks/useColumnData.js +2 -2
  130. package/cjs/MultiCascadeTree/hooks/useFlattenData.js +3 -3
  131. package/cjs/MultiCascadeTree/hooks/useSearch.js +2 -1
  132. package/cjs/MultiCascadeTree/utils.d.ts +4 -4
  133. package/cjs/MultiCascadeTree/utils.js +20 -11
  134. package/cjs/MultiCascader/MultiCascader.js +12 -12
  135. package/cjs/SelectPicker/SelectPicker.js +2 -6
  136. package/cjs/Tree/IndentLine.d.ts +3 -0
  137. package/cjs/Tree/IndentLine.js +18 -0
  138. package/cjs/Tree/Tree.d.ts +4 -92
  139. package/cjs/Tree/Tree.js +79 -20
  140. package/cjs/Tree/TreeNode.d.ts +101 -0
  141. package/cjs/Tree/TreeNode.js +147 -0
  142. package/cjs/Tree/TreeNodeToggle.d.ts +9 -0
  143. package/cjs/Tree/TreeNodeToggle.js +56 -0
  144. package/cjs/Tree/TreeProvider.d.ts +52 -0
  145. package/cjs/Tree/TreeProvider.js +84 -0
  146. package/cjs/Tree/TreeView.d.ts +68 -0
  147. package/cjs/Tree/TreeView.js +305 -0
  148. package/cjs/Tree/hooks/useExpandTree.d.ts +60 -0
  149. package/cjs/Tree/hooks/useExpandTree.js +77 -0
  150. package/cjs/Tree/hooks/useFlattenTree.d.ts +42 -0
  151. package/cjs/Tree/hooks/useFlattenTree.js +98 -0
  152. package/cjs/Tree/hooks/useFocusTree.d.ts +24 -0
  153. package/cjs/Tree/hooks/useFocusTree.js +158 -0
  154. package/cjs/Tree/hooks/useForceUpdate.d.ts +2 -0
  155. package/cjs/Tree/hooks/useForceUpdate.js +16 -0
  156. package/cjs/Tree/hooks/useTreeDrag.d.ts +32 -0
  157. package/cjs/Tree/hooks/useTreeDrag.js +268 -0
  158. package/cjs/Tree/hooks/useTreeNodeProps.d.ts +29 -0
  159. package/cjs/Tree/hooks/useTreeNodeProps.js +83 -0
  160. package/cjs/Tree/hooks/useTreeNodeRefs.d.ts +6 -0
  161. package/cjs/Tree/hooks/useTreeNodeRefs.js +22 -0
  162. package/cjs/Tree/hooks/useTreeSearch.d.ts +18 -0
  163. package/cjs/Tree/hooks/useTreeSearch.js +74 -0
  164. package/cjs/Tree/hooks/useTreeWithChildren.d.ts +14 -0
  165. package/cjs/Tree/hooks/useTreeWithChildren.js +64 -0
  166. package/cjs/Tree/hooks/useVirtualizedTreeData.d.ts +7 -0
  167. package/cjs/Tree/hooks/useVirtualizedTreeData.js +82 -0
  168. package/cjs/Tree/types.d.ts +257 -0
  169. package/cjs/Tree/types.js +33 -0
  170. package/cjs/Tree/utils/flattenTree.d.ts +25 -0
  171. package/cjs/Tree/utils/flattenTree.js +95 -0
  172. package/cjs/Tree/utils/focusableTree.d.ts +55 -0
  173. package/cjs/Tree/utils/focusableTree.js +157 -0
  174. package/cjs/Tree/utils/formatNodeRefKey.d.ts +4 -0
  175. package/cjs/Tree/utils/formatNodeRefKey.js +11 -0
  176. package/cjs/Tree/utils/getExpandItemValues.d.ts +11 -0
  177. package/cjs/Tree/utils/getExpandItemValues.js +21 -0
  178. package/cjs/Tree/utils/getNodeParentKeys.d.ts +5 -0
  179. package/cjs/Tree/utils/getNodeParentKeys.js +21 -0
  180. package/cjs/Tree/utils/getTreeActiveNode.d.ts +5 -0
  181. package/cjs/Tree/utils/getTreeActiveNode.js +21 -0
  182. package/cjs/Tree/utils/hasVisibleChildren.d.ts +5 -0
  183. package/cjs/Tree/utils/hasVisibleChildren.js +16 -0
  184. package/cjs/Tree/utils/indentTreeNode.d.ts +3 -0
  185. package/cjs/Tree/utils/indentTreeNode.js +18 -0
  186. package/cjs/Tree/utils/index.d.ts +11 -0
  187. package/cjs/Tree/utils/index.js +35 -0
  188. package/cjs/Tree/utils/isExpand.d.ts +6 -0
  189. package/cjs/Tree/utils/isExpand.js +14 -0
  190. package/cjs/Tree/utils/isSearching.d.ts +1 -0
  191. package/cjs/Tree/utils/isSearching.js +10 -0
  192. package/cjs/Tree/utils/treeKeyboardInteractions.d.ts +21 -0
  193. package/cjs/Tree/utils/treeKeyboardInteractions.js +49 -0
  194. package/cjs/TreePicker/TreePicker.d.ts +27 -21
  195. package/cjs/TreePicker/TreePicker.js +155 -575
  196. package/cjs/TreePicker/hooks/useFocusState.d.ts +20 -0
  197. package/cjs/TreePicker/hooks/useFocusState.js +53 -0
  198. package/cjs/index.d.ts +2 -0
  199. package/cjs/index.js +3 -1
  200. package/cjs/internals/Picker/Listbox.d.ts +40 -10
  201. package/cjs/internals/Picker/Listbox.js +21 -16
  202. package/cjs/internals/Picker/PickerIndicator.d.ts +2 -1
  203. package/cjs/internals/Picker/PickerIndicator.js +7 -3
  204. package/cjs/internals/Picker/hooks/useFocusItemValue.js +4 -4
  205. package/cjs/internals/Picker/hooks/usePickerRef.d.ts +1 -4
  206. package/cjs/internals/Picker/hooks/usePickerRef.js +3 -20
  207. package/cjs/internals/Picker/index.d.ts +0 -1
  208. package/cjs/internals/Picker/index.js +1 -4
  209. package/cjs/internals/Picker/utils.js +12 -12
  210. package/cjs/internals/{Picker → Tree}/TreeView.js +1 -1
  211. package/cjs/internals/Tree/index.d.ts +1 -0
  212. package/cjs/internals/Tree/index.js +8 -0
  213. package/cjs/internals/Tree/utils/filterNodesOfTree.d.ts +5 -0
  214. package/cjs/internals/Tree/utils/filterNodesOfTree.js +31 -0
  215. package/cjs/internals/Tree/utils/findNodeOfTree.d.ts +1 -0
  216. package/cjs/internals/Tree/utils/findNodeOfTree.js +26 -0
  217. package/cjs/internals/Tree/utils/getParentMap.d.ts +15 -0
  218. package/cjs/internals/Tree/utils/getParentMap.js +52 -0
  219. package/cjs/internals/Tree/utils/getPathTowardsItem.d.ts +4 -0
  220. package/cjs/internals/Tree/utils/getPathTowardsItem.js +16 -0
  221. package/cjs/internals/Tree/utils/index.d.ts +4 -0
  222. package/cjs/internals/Tree/utils/index.js +14 -0
  223. package/cjs/internals/Windowing/List.d.ts +1 -0
  224. package/cjs/internals/Windowing/List.js +5 -1
  225. package/cjs/internals/Windowing/index.d.ts +1 -1
  226. package/cjs/internals/Windowing/index.js +4 -2
  227. package/cjs/internals/hooks/index.d.ts +1 -0
  228. package/cjs/internals/hooks/index.js +8 -0
  229. package/cjs/internals/hooks/useFoucsVirtualListItem.d.ts +7 -0
  230. package/cjs/internals/hooks/useFoucsVirtualListItem.js +26 -0
  231. package/cjs/{utils → internals/utils}/getSafeRegExpString.d.ts +1 -1
  232. package/cjs/{utils → internals/utils}/getSafeRegExpString.js +1 -1
  233. package/cjs/internals/utils/index.d.ts +2 -0
  234. package/cjs/internals/utils/index.js +9 -0
  235. package/cjs/internals/utils/stringifyReactNode.d.ts +2 -0
  236. package/cjs/internals/utils/stringifyReactNode.js +17 -0
  237. package/cjs/utils/constants.d.ts +0 -2
  238. package/cjs/utils/constants.js +1 -6
  239. package/cjs/utils/getDataGroupBy.js +3 -3
  240. package/cjs/utils/index.d.ts +0 -3
  241. package/cjs/utils/index.js +1 -10
  242. package/cjs/utils/useIsomorphicLayoutEffect.d.ts +2 -2
  243. package/dist/rsuite-no-reset-rtl.css +301 -302
  244. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  245. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  246. package/dist/rsuite-no-reset.css +303 -306
  247. package/dist/rsuite-no-reset.min.css +1 -1
  248. package/dist/rsuite-no-reset.min.css.map +1 -1
  249. package/dist/rsuite-rtl.css +302 -303
  250. package/dist/rsuite-rtl.min.css +1 -1
  251. package/dist/rsuite-rtl.min.css.map +1 -1
  252. package/dist/rsuite.css +304 -307
  253. package/dist/rsuite.js +657 -140
  254. package/dist/rsuite.js.map +1 -1
  255. package/dist/rsuite.min.css +1 -1
  256. package/dist/rsuite.min.css.map +1 -1
  257. package/dist/rsuite.min.js +1 -1
  258. package/dist/rsuite.min.js.map +1 -1
  259. package/esm/@types/common.d.ts +41 -4
  260. package/esm/AutoComplete/AutoComplete.js +2 -1
  261. package/esm/CascadeTree/CascadeTree.js +2 -1
  262. package/esm/CascadeTree/SearchView.js +6 -13
  263. package/esm/CascadeTree/hooks/usePaths.js +1 -1
  264. package/esm/CascadeTree/hooks/useSearch.js +2 -1
  265. package/esm/CascadeTree/utils.d.ts +0 -11
  266. package/esm/CascadeTree/utils.js +0 -22
  267. package/esm/Cascader/Cascader.js +2 -1
  268. package/esm/CheckPicker/CheckPicker.js +4 -7
  269. package/esm/CheckTree/CheckTree.d.ts +16 -0
  270. package/esm/CheckTree/CheckTree.js +105 -0
  271. package/esm/CheckTree/CheckTreeNode.d.ts +72 -0
  272. package/esm/CheckTree/CheckTreeNode.js +110 -0
  273. package/esm/CheckTree/CheckTreeView.d.ts +70 -0
  274. package/esm/CheckTree/CheckTreeView.js +304 -0
  275. package/esm/CheckTree/hooks/useTreeCheckState.d.ts +10 -0
  276. package/esm/CheckTree/hooks/useTreeCheckState.js +87 -0
  277. package/esm/CheckTree/hooks/useTreeNodeProps.d.ts +22 -0
  278. package/esm/CheckTree/hooks/useTreeNodeProps.js +52 -0
  279. package/esm/CheckTree/hooks/useTreeValue.d.ts +5 -0
  280. package/esm/CheckTree/hooks/useTreeValue.js +16 -0
  281. package/esm/CheckTree/index.d.ts +2 -14
  282. package/esm/CheckTree/index.js +1 -21
  283. package/esm/CheckTree/utils.d.ts +53 -0
  284. package/esm/{CheckTreePicker → CheckTree}/utils.js +72 -22
  285. package/esm/CheckTreePicker/CheckTreePicker.d.ts +30 -12
  286. package/esm/CheckTreePicker/CheckTreePicker.js +156 -607
  287. package/esm/CheckTreePicker/hooks/useFocusState.d.ts +16 -0
  288. package/esm/CheckTreePicker/hooks/useFocusState.js +37 -0
  289. package/esm/DateInput/DateField.js +3 -1
  290. package/esm/DateInput/DateInput.js +19 -18
  291. package/{cjs/DateInput → esm/DateInput/hooks}/useDateInputState.d.ts +1 -1
  292. package/esm/DateInput/{useDateInputState.js → hooks/useDateInputState.js} +2 -2
  293. package/esm/DateInput/hooks/useFieldCursor.d.ts +6 -0
  294. package/esm/DateInput/hooks/useFieldCursor.js +49 -0
  295. package/esm/DateInput/hooks/useSelectedState.d.ts +14 -0
  296. package/esm/DateInput/hooks/useSelectedState.js +17 -0
  297. package/esm/DateInput/index.d.ts +5 -3
  298. package/esm/DateInput/index.js +5 -3
  299. package/esm/DateInput/utils.d.ts +0 -1
  300. package/esm/DateInput/utils.js +2 -23
  301. package/esm/DatePicker/DatePicker.d.ts +4 -0
  302. package/esm/DatePicker/DatePicker.js +20 -5
  303. package/esm/DatePicker/types.d.ts +0 -4
  304. package/esm/DateRangeInput/DateRangeInput.js +17 -18
  305. package/esm/DateRangePicker/DateRangePicker.d.ts +51 -23
  306. package/esm/DateRangePicker/DateRangePicker.js +71 -51
  307. package/esm/DateRangePicker/hooks/useDateDisabled.d.ts +16 -0
  308. package/esm/DateRangePicker/hooks/useDateDisabled.js +26 -0
  309. package/esm/DateRangePicker/types.d.ts +1 -0
  310. package/esm/Highlight/Highlight.d.ts +14 -0
  311. package/esm/Highlight/Highlight.js +52 -0
  312. package/esm/Highlight/index.d.ts +3 -0
  313. package/esm/Highlight/index.js +3 -0
  314. package/esm/Highlight/utils/highlightText.d.ts +5 -0
  315. package/esm/Highlight/utils/highlightText.js +25 -0
  316. package/esm/InputPicker/InputPicker.js +3 -7
  317. package/esm/MultiCascadeTree/SearchView.js +6 -14
  318. package/esm/MultiCascadeTree/hooks/useCascadeValue.js +15 -1
  319. package/esm/MultiCascadeTree/hooks/useColumnData.js +1 -1
  320. package/esm/MultiCascadeTree/hooks/useFlattenData.js +1 -1
  321. package/esm/MultiCascadeTree/hooks/useSearch.js +2 -1
  322. package/esm/MultiCascadeTree/utils.d.ts +4 -4
  323. package/esm/MultiCascadeTree/utils.js +18 -9
  324. package/esm/MultiCascader/MultiCascader.js +1 -1
  325. package/esm/SelectPicker/SelectPicker.js +2 -6
  326. package/esm/Tree/IndentLine.d.ts +3 -0
  327. package/esm/Tree/IndentLine.js +12 -0
  328. package/esm/Tree/Tree.d.ts +4 -92
  329. package/esm/Tree/Tree.js +78 -18
  330. package/esm/Tree/TreeNode.d.ts +101 -0
  331. package/esm/Tree/TreeNode.js +141 -0
  332. package/esm/Tree/TreeNodeToggle.d.ts +9 -0
  333. package/esm/Tree/TreeNodeToggle.js +50 -0
  334. package/esm/Tree/TreeProvider.d.ts +52 -0
  335. package/esm/Tree/TreeProvider.js +74 -0
  336. package/esm/Tree/TreeView.d.ts +68 -0
  337. package/esm/Tree/TreeView.js +299 -0
  338. package/esm/Tree/hooks/useExpandTree.d.ts +60 -0
  339. package/esm/Tree/hooks/useExpandTree.js +70 -0
  340. package/esm/Tree/hooks/useFlattenTree.d.ts +42 -0
  341. package/esm/Tree/hooks/useFlattenTree.js +92 -0
  342. package/esm/Tree/hooks/useFocusTree.d.ts +24 -0
  343. package/esm/Tree/hooks/useFocusTree.js +153 -0
  344. package/esm/Tree/hooks/useForceUpdate.d.ts +2 -0
  345. package/esm/Tree/hooks/useForceUpdate.js +11 -0
  346. package/esm/Tree/hooks/useTreeDrag.d.ts +32 -0
  347. package/esm/Tree/hooks/useTreeDrag.js +264 -0
  348. package/esm/Tree/hooks/useTreeNodeProps.d.ts +29 -0
  349. package/esm/Tree/hooks/useTreeNodeProps.js +76 -0
  350. package/esm/Tree/hooks/useTreeNodeRefs.d.ts +6 -0
  351. package/esm/Tree/hooks/useTreeNodeRefs.js +18 -0
  352. package/esm/Tree/hooks/useTreeSearch.d.ts +18 -0
  353. package/esm/Tree/hooks/useTreeSearch.js +69 -0
  354. package/esm/Tree/hooks/useTreeWithChildren.d.ts +14 -0
  355. package/esm/Tree/hooks/useTreeWithChildren.js +59 -0
  356. package/esm/Tree/hooks/useVirtualizedTreeData.d.ts +7 -0
  357. package/esm/Tree/hooks/useVirtualizedTreeData.js +77 -0
  358. package/esm/Tree/types.d.ts +257 -0
  359. package/esm/Tree/types.js +30 -0
  360. package/esm/Tree/utils/flattenTree.d.ts +25 -0
  361. package/esm/Tree/utils/flattenTree.js +88 -0
  362. package/esm/Tree/utils/focusableTree.d.ts +55 -0
  363. package/esm/Tree/utils/focusableTree.js +146 -0
  364. package/esm/Tree/utils/formatNodeRefKey.d.ts +4 -0
  365. package/esm/Tree/utils/formatNodeRefKey.js +7 -0
  366. package/esm/Tree/utils/getExpandItemValues.d.ts +11 -0
  367. package/esm/Tree/utils/getExpandItemValues.js +17 -0
  368. package/esm/Tree/utils/getNodeParentKeys.d.ts +5 -0
  369. package/esm/Tree/utils/getNodeParentKeys.js +17 -0
  370. package/esm/Tree/utils/getTreeActiveNode.d.ts +5 -0
  371. package/esm/Tree/utils/getTreeActiveNode.js +16 -0
  372. package/esm/Tree/utils/hasVisibleChildren.d.ts +5 -0
  373. package/esm/Tree/utils/hasVisibleChildren.js +12 -0
  374. package/esm/Tree/utils/indentTreeNode.d.ts +3 -0
  375. package/esm/Tree/utils/indentTreeNode.js +14 -0
  376. package/esm/Tree/utils/index.d.ts +11 -0
  377. package/esm/Tree/utils/index.js +14 -0
  378. package/esm/Tree/utils/isExpand.d.ts +6 -0
  379. package/esm/Tree/utils/isExpand.js +11 -0
  380. package/esm/Tree/utils/isSearching.d.ts +1 -0
  381. package/esm/Tree/utils/isSearching.js +5 -0
  382. package/esm/Tree/utils/treeKeyboardInteractions.d.ts +21 -0
  383. package/esm/Tree/utils/treeKeyboardInteractions.js +43 -0
  384. package/esm/TreePicker/TreePicker.d.ts +27 -21
  385. package/esm/TreePicker/TreePicker.js +158 -579
  386. package/esm/TreePicker/hooks/useFocusState.d.ts +20 -0
  387. package/esm/TreePicker/hooks/useFocusState.js +48 -0
  388. package/esm/index.d.ts +2 -0
  389. package/esm/index.js +1 -0
  390. package/esm/internals/Picker/Listbox.d.ts +40 -10
  391. package/esm/internals/Picker/Listbox.js +22 -16
  392. package/esm/internals/Picker/PickerIndicator.d.ts +2 -1
  393. package/esm/internals/Picker/PickerIndicator.js +7 -3
  394. package/esm/internals/Picker/hooks/useFocusItemValue.js +1 -1
  395. package/esm/internals/Picker/hooks/usePickerRef.d.ts +1 -4
  396. package/esm/internals/Picker/hooks/usePickerRef.js +3 -20
  397. package/esm/internals/Picker/index.d.ts +0 -1
  398. package/esm/internals/Picker/index.js +0 -1
  399. package/esm/internals/Picker/utils.js +1 -1
  400. package/esm/internals/{Picker → Tree}/TreeView.js +1 -1
  401. package/esm/internals/Tree/index.d.ts +1 -0
  402. package/esm/internals/Tree/index.js +2 -0
  403. package/esm/internals/Tree/utils/filterNodesOfTree.d.ts +5 -0
  404. package/esm/internals/Tree/utils/filterNodesOfTree.js +26 -0
  405. package/esm/internals/Tree/utils/findNodeOfTree.d.ts +1 -0
  406. package/esm/internals/Tree/utils/findNodeOfTree.js +22 -0
  407. package/esm/internals/Tree/utils/getParentMap.d.ts +15 -0
  408. package/esm/internals/Tree/utils/getParentMap.js +47 -0
  409. package/esm/internals/Tree/utils/getPathTowardsItem.d.ts +4 -0
  410. package/esm/internals/Tree/utils/getPathTowardsItem.js +12 -0
  411. package/esm/internals/Tree/utils/index.d.ts +4 -0
  412. package/esm/internals/Tree/utils/index.js +5 -0
  413. package/esm/internals/Windowing/List.d.ts +1 -0
  414. package/esm/internals/Windowing/List.js +3 -0
  415. package/esm/internals/Windowing/index.d.ts +1 -1
  416. package/esm/internals/Windowing/index.js +1 -1
  417. package/esm/internals/hooks/index.d.ts +1 -0
  418. package/esm/internals/hooks/index.js +2 -0
  419. package/esm/internals/hooks/useFoucsVirtualListItem.d.ts +7 -0
  420. package/esm/internals/hooks/useFoucsVirtualListItem.js +22 -0
  421. package/esm/{utils → internals/utils}/getSafeRegExpString.d.ts +1 -1
  422. package/esm/{utils → internals/utils}/getSafeRegExpString.js +1 -1
  423. package/esm/internals/utils/index.d.ts +2 -0
  424. package/esm/internals/utils/index.js +3 -0
  425. package/esm/internals/utils/stringifyReactNode.d.ts +2 -0
  426. package/esm/internals/utils/stringifyReactNode.js +12 -0
  427. package/esm/utils/constants.d.ts +0 -2
  428. package/esm/utils/constants.js +0 -3
  429. package/esm/utils/getDataGroupBy.js +1 -1
  430. package/esm/utils/index.d.ts +0 -3
  431. package/esm/utils/index.js +0 -3
  432. package/esm/utils/useIsomorphicLayoutEffect.d.ts +2 -2
  433. package/internals/Picker/styles/index.less +27 -1
  434. package/package.json +2 -2
  435. package/styles/color-modes/dark.less +5 -1
  436. package/styles/color-modes/high-contrast.less +8 -2
  437. package/styles/color-modes/light.less +10 -5
  438. package/styles/index.less +1 -0
  439. package/TreePicker/styles/mixin.less +0 -7
  440. package/cjs/CheckTreePicker/CheckTreeNode.d.ts +0 -28
  441. package/cjs/CheckTreePicker/CheckTreeNode.js +0 -140
  442. package/cjs/CheckTreePicker/utils.d.ts +0 -44
  443. package/cjs/Tree/TreeContext.d.ts +0 -6
  444. package/cjs/Tree/TreeContext.js +0 -10
  445. package/cjs/TreePicker/TreeNode.d.ts +0 -36
  446. package/cjs/TreePicker/TreeNode.js +0 -174
  447. package/cjs/utils/appendTooltip.d.ts +0 -10
  448. package/cjs/utils/appendTooltip.js +0 -20
  449. package/cjs/utils/stringToObject.d.ts +0 -2
  450. package/cjs/utils/stringToObject.js +0 -19
  451. package/cjs/utils/treeUtils.d.ts +0 -304
  452. package/cjs/utils/treeUtils.js +0 -1095
  453. package/esm/CheckTreePicker/CheckTreeNode.d.ts +0 -28
  454. package/esm/CheckTreePicker/CheckTreeNode.js +0 -133
  455. package/esm/CheckTreePicker/utils.d.ts +0 -44
  456. package/esm/Tree/TreeContext.d.ts +0 -6
  457. package/esm/Tree/TreeContext.js +0 -4
  458. package/esm/TreePicker/TreeNode.d.ts +0 -36
  459. package/esm/TreePicker/TreeNode.js +0 -167
  460. package/esm/utils/appendTooltip.d.ts +0 -10
  461. package/esm/utils/appendTooltip.js +0 -15
  462. package/esm/utils/stringToObject.d.ts +0 -2
  463. package/esm/utils/stringToObject.js +0 -14
  464. package/esm/utils/treeUtils.d.ts +0 -304
  465. package/esm/utils/treeUtils.js +0 -1043
  466. /package/cjs/DateInput/{useIsFocused.d.ts → hooks/useIsFocused.d.ts} +0 -0
  467. /package/cjs/DateInput/{useIsFocused.js → hooks/useIsFocused.js} +0 -0
  468. /package/cjs/DateInput/{useKeyboardInputEvent.d.ts → hooks/useKeyboardInputEvent.d.ts} +0 -0
  469. /package/cjs/DateInput/{useKeyboardInputEvent.js → hooks/useKeyboardInputEvent.js} +0 -0
  470. /package/cjs/internals/{Picker → Tree}/TreeView.d.ts +0 -0
  471. /package/esm/DateInput/{useIsFocused.d.ts → hooks/useIsFocused.d.ts} +0 -0
  472. /package/esm/DateInput/{useIsFocused.js → hooks/useIsFocused.js} +0 -0
  473. /package/esm/DateInput/{useKeyboardInputEvent.d.ts → hooks/useKeyboardInputEvent.d.ts} +0 -0
  474. /package/esm/DateInput/{useKeyboardInputEvent.js → hooks/useKeyboardInputEvent.js} +0 -0
  475. /package/esm/internals/{Picker → Tree}/TreeView.d.ts +0 -0
package/Tabs/styles/index.css CHANGED
@@ -35,7 +35,7 @@
35
35
  --rs-violet-500: #673ab7;
36
36
  --rs-violet-700: #531ba8;
37
37
  --rs-text-primary: var(--rs-gray-800);
38
- --rs-text-disabled: var(--rs-gray-400);
38
+ --rs-text-disabled: var(--rs-gray-600);
39
39
  --rs-border-primary: var(--rs-gray-200);
40
40
  --rs-bg-card: var(--rs-gray-0);
41
41
  --rs-bg-overlay: var(--rs-gray-0);
@@ -46,7 +46,7 @@
46
46
  --rs-btn-default-active-bg: var(--rs-gray-300);
47
47
  --rs-btn-default-active-text: var(--rs-gray-900);
48
48
  --rs-btn-default-disabled-bg: var(--rs-gray-50);
49
- --rs-btn-default-disabled-text: var(--rs-gray-400);
49
+ --rs-btn-default-disabled-text: var(--rs-gray-600);
50
50
  --rs-btn-primary-bg: var(--rs-primary-500);
51
51
  --rs-btn-primary-text: var(--rs-gray-0);
52
52
  --rs-btn-primary-hover-bg: var(--rs-primary-600);
@@ -130,7 +130,7 @@
130
130
  --rs-violet-500: #673ab7;
131
131
  --rs-violet-700: #531ba8;
132
132
  --rs-text-primary: var(--rs-gray-50);
133
- --rs-text-disabled: var(--rs-gray-500);
133
+ --rs-text-disabled: var(--rs-gray-400);
134
134
  --rs-border-primary: var(--rs-gray-600);
135
135
  --rs-bg-card: var(--rs-gray-800);
136
136
  --rs-bg-overlay: var(--rs-gray-700);
@@ -224,7 +224,7 @@
224
224
  --rs-violet-500: #673ab7;
225
225
  --rs-violet-700: #531ba8;
226
226
  --rs-text-primary: var(--rs-gray-50);
227
- --rs-text-disabled: var(--rs-gray-500);
227
+ --rs-text-disabled: var(--rs-gray-400);
228
228
  --rs-border-primary: var(--rs-gray-100);
229
229
  --rs-bg-card: var(--rs-gray-800);
230
230
  --rs-bg-overlay: var(--rs-gray-800);
@@ -237,7 +237,8 @@
237
237
  --rs-btn-default-active-bg: transparent;
238
238
  --rs-btn-default-active-text: var(--rs-primary-200);
239
239
  --rs-btn-default-disabled-bg: transparent;
240
- --rs-btn-default-disabled-text: var(--rs-primary-500);
240
+ --rs-btn-default-disabled-text: var(--rs-primary-900);
241
+ --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
241
242
  --rs-btn-primary-bg: var(--rs-primary-500);
242
243
  --rs-btn-primary-text: var(--rs-gray-900);
243
244
  --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -391,14 +392,14 @@
391
392
  .rs-btn:disabled,
392
393
  .rs-btn.rs-btn-disabled {
393
394
  cursor: not-allowed;
394
- color: #c5c6c7;
395
+ color: #8e8e93;
395
396
  color: var(--rs-btn-default-disabled-text);
396
397
  background-color: #f7f7fa;
397
398
  background-color: var(--rs-btn-default-disabled-bg);
398
399
  }
399
400
  .rs-theme-high-contrast .rs-btn:disabled,
400
401
  .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
401
- opacity: 0.5;
402
+ border-color: var(--rs-btn-default-disabled-boreder-color);
402
403
  }
403
404
  @media not all and (min-resolution: 0.001dpcm) {
404
405
  .rs-btn {
@@ -446,7 +447,7 @@
446
447
  }
447
448
  .rs-theme-high-contrast .rs-btn-primary:disabled,
448
449
  .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
449
- opacity: 0.5;
450
+ border-color: var(--rs-btn-default-disabled-boreder-color);
450
451
  }
451
452
  .rs-btn-subtle {
452
453
  color: #575757;
@@ -476,7 +477,7 @@
476
477
  }
477
478
  .rs-theme-high-contrast .rs-btn-subtle:disabled,
478
479
  .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
479
- opacity: 0.5;
480
+ border-color: var(--rs-btn-default-disabled-boreder-color);
480
481
  }
481
482
  .rs-btn-link {
482
483
  color: #1675e0;
@@ -507,7 +508,7 @@
507
508
  }
508
509
  .rs-theme-high-contrast .rs-btn-link:disabled,
509
510
  .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
510
- opacity: 0.5;
511
+ border-color: var(--rs-btn-default-disabled-boreder-color);
511
512
  }
512
513
  .rs-btn-ghost {
513
514
  color: #1675e0;
@@ -549,7 +550,7 @@
549
550
  }
550
551
  .rs-theme-high-contrast .rs-btn-ghost:disabled,
551
552
  .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
552
- opacity: 0.5;
553
+ border-color: var(--rs-btn-default-disabled-boreder-color);
553
554
  }
554
555
  .rs-btn-red {
555
556
  --rs-btn-primary-bg: var(--rs-red-500);
@@ -1364,13 +1365,13 @@
1364
1365
  outline: 0;
1365
1366
  }
1366
1367
  .rs-dropdown-item-disabled {
1367
- color: #c5c6c7;
1368
+ color: #8e8e93;
1368
1369
  color: var(--rs-text-disabled);
1369
1370
  cursor: not-allowed;
1370
1371
  pointer-events: none;
1371
1372
  }
1372
1373
  .rs-dropdown-item-disabled .rs-text {
1373
- color: #c5c6c7;
1374
+ color: #8e8e93;
1374
1375
  color: var(--rs-text-disabled);
1375
1376
  }
1376
1377
  .rs-dropdown-item-disabled:hover,
@@ -1614,7 +1615,7 @@
1614
1615
  .rs-nav-item.rs-nav-item-disabled {
1615
1616
  cursor: not-allowed;
1616
1617
  pointer-events: none;
1617
- color: #c5c6c7;
1618
+ color: #8e8e93;
1618
1619
  color: var(--rs-text-disabled);
1619
1620
  }
1620
1621
  .rs-nav-item.rs-nav-item-active {
package/TagInput/styles/index.css CHANGED
@@ -47,7 +47,8 @@
47
47
  --rs-text-secondary: var(--rs-gray-600);
48
48
  --rs-text-heading: var(--rs-gray-900);
49
49
  --rs-text-inverse: var(--rs-gray-50);
50
- --rs-text-disabled: var(--rs-gray-400);
50
+ --rs-text-disabled: var(--rs-gray-600);
51
+ --rs-text-highlight-bg: #fff6c9;
51
52
  --rs-border-primary: var(--rs-gray-200);
52
53
  --rs-bg-overlay: var(--rs-gray-0);
53
54
  --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
@@ -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-listbox-option-selected-text: var(--rs-primary-700);
@@ -163,7 +165,7 @@
163
165
  --rs-text-secondary: var(--rs-gray-200);
164
166
  --rs-text-heading: var(--rs-gray-0);
165
167
  --rs-text-inverse: var(--rs-gray-800);
166
- --rs-text-disabled: var(--rs-gray-500);
168
+ --rs-text-disabled: var(--rs-gray-400);
167
169
  --rs-border-primary: var(--rs-gray-600);
168
170
  --rs-bg-overlay: var(--rs-gray-700);
169
171
  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
@@ -205,6 +207,7 @@
205
207
  --rs-input-bg: var(--rs-gray-800);
206
208
  --rs-input-focus-border: var(--rs-primary-500);
207
209
  --rs-input-disabled-bg: var(--rs-gray-700);
210
+ --rs-listbox-option-group-bg: var(--rs-gray-700);
208
211
  --rs-listbox-option-hover-bg: var(--rs-gray-600);
209
212
  --rs-listbox-option-hover-text: currentColor;
210
213
  --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -278,7 +281,8 @@
278
281
  --rs-text-secondary: var(--rs-gray-200);
279
282
  --rs-text-heading: var(--rs-gray-0);
280
283
  --rs-text-inverse: var(--rs-gray-800);
281
- --rs-text-disabled: var(--rs-gray-500);
284
+ --rs-text-disabled: var(--rs-gray-400);
285
+ --rs-text-highlight-bg: var(--rs-primary-500);
282
286
  --rs-border-primary: var(--rs-gray-100);
283
287
  --rs-bg-overlay: var(--rs-gray-800);
284
288
  --rs-color-focus-ring: var(--rs-gray-0);
@@ -293,7 +297,8 @@
293
297
  --rs-btn-default-active-bg: transparent;
294
298
  --rs-btn-default-active-text: var(--rs-primary-200);
295
299
  --rs-btn-default-disabled-bg: transparent;
296
- --rs-btn-default-disabled-text: var(--rs-primary-500);
300
+ --rs-btn-default-disabled-text: var(--rs-primary-900);
301
+ --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
297
302
  --rs-btn-primary-bg: var(--rs-primary-500);
298
303
  --rs-btn-primary-text: var(--rs-gray-900);
299
304
  --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -322,6 +327,7 @@
322
327
  --rs-input-bg: var(--rs-gray-800);
323
328
  --rs-input-focus-border: var(--rs-primary-500);
324
329
  --rs-input-disabled-bg: var(--rs-gray-700);
330
+ --rs-listbox-option-group-bg: var(--rs-gray-800);
325
331
  --rs-listbox-option-hover-bg: transparent;
326
332
  --rs-listbox-option-hover-text: var(--rs-primary-500);
327
333
  --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -376,7 +382,7 @@
376
382
  cursor: not-allowed;
377
383
  }
378
384
  .rs-checkbox-disabled > .rs-checkbox-checker > label {
379
- color: #c5c6c7;
385
+ color: #8e8e93;
380
386
  color: var(--rs-text-disabled);
381
387
  }
382
388
  .rs-checkbox-inline {
@@ -535,10 +541,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
535
541
  }
536
542
  .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
537
543
  .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
538
- opacity: 0.3;
539
- }
540
- .rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
541
- .rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
542
544
  opacity: 0.5;
543
545
  }
544
546
  .rs-checkbox-red .rs-checkbox-control::before {
@@ -727,7 +729,7 @@ textarea.rs-input {
727
729
  .rs-input:disabled {
728
730
  background-color: #f7f7fa;
729
731
  background-color: var(--rs-input-disabled-bg);
730
- color: #c5c6c7;
732
+ color: #8e8e93;
731
733
  color: var(--rs-text-disabled);
732
734
  }
733
735
  textarea.rs-input {
@@ -969,14 +971,14 @@ textarea.rs-input-sm {
969
971
  .rs-btn:disabled,
970
972
  .rs-btn.rs-btn-disabled {
971
973
  cursor: not-allowed;
972
- color: #c5c6c7;
974
+ color: #8e8e93;
973
975
  color: var(--rs-btn-default-disabled-text);
974
976
  background-color: #f7f7fa;
975
977
  background-color: var(--rs-btn-default-disabled-bg);
976
978
  }
977
979
  .rs-theme-high-contrast .rs-btn:disabled,
978
980
  .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
979
- opacity: 0.5;
981
+ border-color: var(--rs-btn-default-disabled-boreder-color);
980
982
  }
981
983
  @media not all and (min-resolution: 0.001dpcm) {
982
984
  .rs-btn {
@@ -1024,7 +1026,7 @@ textarea.rs-input-sm {
1024
1026
  }
1025
1027
  .rs-theme-high-contrast .rs-btn-primary:disabled,
1026
1028
  .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
1027
- opacity: 0.5;
1029
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1028
1030
  }
1029
1031
  .rs-btn-subtle {
1030
1032
  color: #575757;
@@ -1054,7 +1056,7 @@ textarea.rs-input-sm {
1054
1056
  }
1055
1057
  .rs-theme-high-contrast .rs-btn-subtle:disabled,
1056
1058
  .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
1057
- opacity: 0.5;
1059
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1058
1060
  }
1059
1061
  .rs-btn-link {
1060
1062
  color: #1675e0;
@@ -1085,7 +1087,7 @@ textarea.rs-input-sm {
1085
1087
  }
1086
1088
  .rs-theme-high-contrast .rs-btn-link:disabled,
1087
1089
  .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
1088
- opacity: 0.5;
1090
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1089
1091
  }
1090
1092
  .rs-btn-ghost {
1091
1093
  color: #1675e0;
@@ -1127,7 +1129,7 @@ textarea.rs-input-sm {
1127
1129
  }
1128
1130
  .rs-theme-high-contrast .rs-btn-ghost:disabled,
1129
1131
  .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
1130
- opacity: 0.5;
1132
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1131
1133
  }
1132
1134
  .rs-btn-red {
1133
1135
  --rs-btn-primary-bg: var(--rs-red-500);
@@ -2195,7 +2197,7 @@ textarea.rs-input-sm {
2195
2197
  }
2196
2198
  .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn:disabled,
2197
2199
  .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-disabled {
2198
- opacity: 0.5;
2200
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2199
2201
  }
2200
2202
  .rs-input-group.rs-input-group-inside .rs-input-group-btn > .rs-icon {
2201
2203
  font-size: 14px;
@@ -2242,16 +2244,16 @@ textarea.rs-input-sm {
2242
2244
  left: inherit;
2243
2245
  right: 1px;
2244
2246
  }
2245
- .rs-input-group-disabled {
2247
+ .rs-input-group.rs-input-group-disabled {
2246
2248
  background-color: #f7f7fa;
2247
2249
  background-color: var(--rs-input-disabled-bg);
2248
- color: #c5c6c7;
2250
+ color: #8e8e93;
2249
2251
  color: var(--rs-text-disabled);
2250
2252
  cursor: not-allowed;
2251
2253
  }
2252
- .rs-input-group-disabled .rs-input,
2253
- .rs-input-group-disabled .rs-input-group-btn,
2254
- .rs-input-group-disabled .rs-input-group-addon {
2254
+ .rs-input-group.rs-input-group-disabled .rs-input,
2255
+ .rs-input-group.rs-input-group-disabled .rs-input-group-btn,
2256
+ .rs-input-group.rs-input-group-disabled .rs-input-group-addon {
2255
2257
  color: inherit;
2256
2258
  }
2257
2259
  .rs-input-group-lg > .rs-input {
@@ -2603,6 +2605,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2603
2605
  .rs-input-group-btn:last-child > .rs-btn-group {
2604
2606
  margin-left: -1px;
2605
2607
  }
2608
+ .rs-highlight-mark {
2609
+ background-color: #fff6c9;
2610
+ background-color: var(--rs-text-highlight-bg);
2611
+ padding: 0 0.2em;
2612
+ font-weight: bolder;
2613
+ border-radius: 4px;
2614
+ }
2606
2615
  .rs-picker-toggle-wrapper {
2607
2616
  display: inline-block;
2608
2617
  vertical-align: middle;
@@ -2615,7 +2624,16 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2615
2624
  display: block;
2616
2625
  }
2617
2626
  .rs-picker-disabled {
2618
- opacity: 0.3;
2627
+ cursor: not-allowed;
2628
+ }
2629
+ .rs-picker-disabled .rs-picker-toggle-value,
2630
+ .rs-picker-disabled .rs-picker-toggle-indicator,
2631
+ .rs-picker-disabled .rs-picker-tag-list .rs-tag {
2632
+ color: #8e8e93 !important;
2633
+ color: var(--rs-text-disabled) !important;
2634
+ }
2635
+ .rs-picker-disabled .rs-picker-value-count {
2636
+ opacity: 0.5;
2619
2637
  }
2620
2638
  .rs-picker-toggle .rs-picker-toggle-placeholder {
2621
2639
  color: #8e8e93;
@@ -2796,14 +2814,14 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2796
2814
  .rs-picker-toggle:disabled,
2797
2815
  .rs-picker-toggle.rs-btn-disabled {
2798
2816
  cursor: not-allowed;
2799
- color: #c5c6c7;
2817
+ color: #8e8e93;
2800
2818
  color: var(--rs-btn-default-disabled-text);
2801
2819
  background-color: #f7f7fa;
2802
2820
  background-color: var(--rs-btn-default-disabled-bg);
2803
2821
  }
2804
2822
  .rs-theme-high-contrast .rs-picker-toggle:disabled,
2805
2823
  .rs-theme-high-contrast .rs-picker-toggle.rs-btn-disabled {
2806
- opacity: 0.5;
2824
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2807
2825
  }
2808
2826
  @media not all and (min-resolution: 0.001dpcm) {
2809
2827
  .rs-picker-toggle {
@@ -2886,7 +2904,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2886
2904
  }
2887
2905
  .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
2888
2906
  .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
2889
- opacity: 0.5;
2907
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2890
2908
  }
2891
2909
  .rs-picker-subtle .rs-picker-toggle-active {
2892
2910
  background-color: #e5e5ea;
@@ -3371,6 +3389,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3371
3389
  .rs-picker-popup .rs-search-box {
3372
3390
  padding: 6px 12px 6px;
3373
3391
  }
3392
+ .rs-picker-popup .rs-highlight .rs-highlight-mark {
3393
+ padding: 0;
3394
+ }
3374
3395
  .rs-picker-default .rs-btn,
3375
3396
  .rs-picker-input .rs-btn,
3376
3397
  .rs-picker-default .rs-picker-toggle,
@@ -3385,6 +3406,10 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3385
3406
  background-color: #f7f7fa !important;
3386
3407
  background-color: var(--rs-input-disabled-bg) !important;
3387
3408
  }
3409
+ .rs-picker-default.rs-picker-disabled .rs-input-group,
3410
+ .rs-picker-input.rs-picker-disabled .rs-input-group {
3411
+ pointer-events: none;
3412
+ }
3388
3413
  .rs-check-item {
3389
3414
  display: block;
3390
3415
  }
@@ -3452,6 +3477,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3452
3477
  .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
3453
3478
  left: 26px;
3454
3479
  }
3480
+ .rs-picker-menu-group {
3481
+ background-color: #fff;
3482
+ background-color: var(--rs-listbox-option-group-bg);
3483
+ position: sticky;
3484
+ top: -1px;
3485
+ z-index: 1;
3486
+ }
3455
3487
  .rs-picker-input {
3456
3488
  position: relative;
3457
3489
  border: 1px solid #e5e5ea;
package/TagPicker/styles/index.css CHANGED
@@ -47,7 +47,8 @@
47
47
  --rs-text-secondary: var(--rs-gray-600);
48
48
  --rs-text-heading: var(--rs-gray-900);
49
49
  --rs-text-inverse: var(--rs-gray-50);
50
- --rs-text-disabled: var(--rs-gray-400);
50
+ --rs-text-disabled: var(--rs-gray-600);
51
+ --rs-text-highlight-bg: #fff6c9;
51
52
  --rs-border-primary: var(--rs-gray-200);
52
53
  --rs-bg-overlay: var(--rs-gray-0);
53
54
  --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
@@ -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-listbox-option-selected-text: var(--rs-primary-700);
@@ -163,7 +165,7 @@
163
165
  --rs-text-secondary: var(--rs-gray-200);
164
166
  --rs-text-heading: var(--rs-gray-0);
165
167
  --rs-text-inverse: var(--rs-gray-800);
166
- --rs-text-disabled: var(--rs-gray-500);
168
+ --rs-text-disabled: var(--rs-gray-400);
167
169
  --rs-border-primary: var(--rs-gray-600);
168
170
  --rs-bg-overlay: var(--rs-gray-700);
169
171
  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
@@ -205,6 +207,7 @@
205
207
  --rs-input-bg: var(--rs-gray-800);
206
208
  --rs-input-focus-border: var(--rs-primary-500);
207
209
  --rs-input-disabled-bg: var(--rs-gray-700);
210
+ --rs-listbox-option-group-bg: var(--rs-gray-700);
208
211
  --rs-listbox-option-hover-bg: var(--rs-gray-600);
209
212
  --rs-listbox-option-hover-text: currentColor;
210
213
  --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -278,7 +281,8 @@
278
281
  --rs-text-secondary: var(--rs-gray-200);
279
282
  --rs-text-heading: var(--rs-gray-0);
280
283
  --rs-text-inverse: var(--rs-gray-800);
281
- --rs-text-disabled: var(--rs-gray-500);
284
+ --rs-text-disabled: var(--rs-gray-400);
285
+ --rs-text-highlight-bg: var(--rs-primary-500);
282
286
  --rs-border-primary: var(--rs-gray-100);
283
287
  --rs-bg-overlay: var(--rs-gray-800);
284
288
  --rs-color-focus-ring: var(--rs-gray-0);
@@ -293,7 +297,8 @@
293
297
  --rs-btn-default-active-bg: transparent;
294
298
  --rs-btn-default-active-text: var(--rs-primary-200);
295
299
  --rs-btn-default-disabled-bg: transparent;
296
- --rs-btn-default-disabled-text: var(--rs-primary-500);
300
+ --rs-btn-default-disabled-text: var(--rs-primary-900);
301
+ --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
297
302
  --rs-btn-primary-bg: var(--rs-primary-500);
298
303
  --rs-btn-primary-text: var(--rs-gray-900);
299
304
  --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -322,6 +327,7 @@
322
327
  --rs-input-bg: var(--rs-gray-800);
323
328
  --rs-input-focus-border: var(--rs-primary-500);
324
329
  --rs-input-disabled-bg: var(--rs-gray-700);
330
+ --rs-listbox-option-group-bg: var(--rs-gray-800);
325
331
  --rs-listbox-option-hover-bg: transparent;
326
332
  --rs-listbox-option-hover-text: var(--rs-primary-500);
327
333
  --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -376,7 +382,7 @@
376
382
  cursor: not-allowed;
377
383
  }
378
384
  .rs-checkbox-disabled > .rs-checkbox-checker > label {
379
- color: #c5c6c7;
385
+ color: #8e8e93;
380
386
  color: var(--rs-text-disabled);
381
387
  }
382
388
  .rs-checkbox-inline {
@@ -535,10 +541,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
535
541
  }
536
542
  .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
537
543
  .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
538
- opacity: 0.3;
539
- }
540
- .rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
541
- .rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
542
544
  opacity: 0.5;
543
545
  }
544
546
  .rs-checkbox-red .rs-checkbox-control::before {
@@ -727,7 +729,7 @@ textarea.rs-input {
727
729
  .rs-input:disabled {
728
730
  background-color: #f7f7fa;
729
731
  background-color: var(--rs-input-disabled-bg);
730
- color: #c5c6c7;
732
+ color: #8e8e93;
731
733
  color: var(--rs-text-disabled);
732
734
  }
733
735
  textarea.rs-input {
@@ -969,14 +971,14 @@ textarea.rs-input-sm {
969
971
  .rs-btn:disabled,
970
972
  .rs-btn.rs-btn-disabled {
971
973
  cursor: not-allowed;
972
- color: #c5c6c7;
974
+ color: #8e8e93;
973
975
  color: var(--rs-btn-default-disabled-text);
974
976
  background-color: #f7f7fa;
975
977
  background-color: var(--rs-btn-default-disabled-bg);
976
978
  }
977
979
  .rs-theme-high-contrast .rs-btn:disabled,
978
980
  .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
979
- opacity: 0.5;
981
+ border-color: var(--rs-btn-default-disabled-boreder-color);
980
982
  }
981
983
  @media not all and (min-resolution: 0.001dpcm) {
982
984
  .rs-btn {
@@ -1024,7 +1026,7 @@ textarea.rs-input-sm {
1024
1026
  }
1025
1027
  .rs-theme-high-contrast .rs-btn-primary:disabled,
1026
1028
  .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
1027
- opacity: 0.5;
1029
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1028
1030
  }
1029
1031
  .rs-btn-subtle {
1030
1032
  color: #575757;
@@ -1054,7 +1056,7 @@ textarea.rs-input-sm {
1054
1056
  }
1055
1057
  .rs-theme-high-contrast .rs-btn-subtle:disabled,
1056
1058
  .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
1057
- opacity: 0.5;
1059
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1058
1060
  }
1059
1061
  .rs-btn-link {
1060
1062
  color: #1675e0;
@@ -1085,7 +1087,7 @@ textarea.rs-input-sm {
1085
1087
  }
1086
1088
  .rs-theme-high-contrast .rs-btn-link:disabled,
1087
1089
  .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
1088
- opacity: 0.5;
1090
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1089
1091
  }
1090
1092
  .rs-btn-ghost {
1091
1093
  color: #1675e0;
@@ -1127,7 +1129,7 @@ textarea.rs-input-sm {
1127
1129
  }
1128
1130
  .rs-theme-high-contrast .rs-btn-ghost:disabled,
1129
1131
  .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
1130
- opacity: 0.5;
1132
+ border-color: var(--rs-btn-default-disabled-boreder-color);
1131
1133
  }
1132
1134
  .rs-btn-red {
1133
1135
  --rs-btn-primary-bg: var(--rs-red-500);
@@ -2195,7 +2197,7 @@ textarea.rs-input-sm {
2195
2197
  }
2196
2198
  .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn:disabled,
2197
2199
  .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-disabled {
2198
- opacity: 0.5;
2200
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2199
2201
  }
2200
2202
  .rs-input-group.rs-input-group-inside .rs-input-group-btn > .rs-icon {
2201
2203
  font-size: 14px;
@@ -2242,16 +2244,16 @@ textarea.rs-input-sm {
2242
2244
  left: inherit;
2243
2245
  right: 1px;
2244
2246
  }
2245
- .rs-input-group-disabled {
2247
+ .rs-input-group.rs-input-group-disabled {
2246
2248
  background-color: #f7f7fa;
2247
2249
  background-color: var(--rs-input-disabled-bg);
2248
- color: #c5c6c7;
2250
+ color: #8e8e93;
2249
2251
  color: var(--rs-text-disabled);
2250
2252
  cursor: not-allowed;
2251
2253
  }
2252
- .rs-input-group-disabled .rs-input,
2253
- .rs-input-group-disabled .rs-input-group-btn,
2254
- .rs-input-group-disabled .rs-input-group-addon {
2254
+ .rs-input-group.rs-input-group-disabled .rs-input,
2255
+ .rs-input-group.rs-input-group-disabled .rs-input-group-btn,
2256
+ .rs-input-group.rs-input-group-disabled .rs-input-group-addon {
2255
2257
  color: inherit;
2256
2258
  }
2257
2259
  .rs-input-group-lg > .rs-input {
@@ -2603,6 +2605,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2603
2605
  .rs-input-group-btn:last-child > .rs-btn-group {
2604
2606
  margin-left: -1px;
2605
2607
  }
2608
+ .rs-highlight-mark {
2609
+ background-color: #fff6c9;
2610
+ background-color: var(--rs-text-highlight-bg);
2611
+ padding: 0 0.2em;
2612
+ font-weight: bolder;
2613
+ border-radius: 4px;
2614
+ }
2606
2615
  .rs-picker-toggle-wrapper {
2607
2616
  display: inline-block;
2608
2617
  vertical-align: middle;
@@ -2615,7 +2624,16 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2615
2624
  display: block;
2616
2625
  }
2617
2626
  .rs-picker-disabled {
2618
- opacity: 0.3;
2627
+ cursor: not-allowed;
2628
+ }
2629
+ .rs-picker-disabled .rs-picker-toggle-value,
2630
+ .rs-picker-disabled .rs-picker-toggle-indicator,
2631
+ .rs-picker-disabled .rs-picker-tag-list .rs-tag {
2632
+ color: #8e8e93 !important;
2633
+ color: var(--rs-text-disabled) !important;
2634
+ }
2635
+ .rs-picker-disabled .rs-picker-value-count {
2636
+ opacity: 0.5;
2619
2637
  }
2620
2638
  .rs-picker-toggle .rs-picker-toggle-placeholder {
2621
2639
  color: #8e8e93;
@@ -2796,14 +2814,14 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2796
2814
  .rs-picker-toggle:disabled,
2797
2815
  .rs-picker-toggle.rs-btn-disabled {
2798
2816
  cursor: not-allowed;
2799
- color: #c5c6c7;
2817
+ color: #8e8e93;
2800
2818
  color: var(--rs-btn-default-disabled-text);
2801
2819
  background-color: #f7f7fa;
2802
2820
  background-color: var(--rs-btn-default-disabled-bg);
2803
2821
  }
2804
2822
  .rs-theme-high-contrast .rs-picker-toggle:disabled,
2805
2823
  .rs-theme-high-contrast .rs-picker-toggle.rs-btn-disabled {
2806
- opacity: 0.5;
2824
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2807
2825
  }
2808
2826
  @media not all and (min-resolution: 0.001dpcm) {
2809
2827
  .rs-picker-toggle {
@@ -2886,7 +2904,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2886
2904
  }
2887
2905
  .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
2888
2906
  .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
2889
- opacity: 0.5;
2907
+ border-color: var(--rs-btn-default-disabled-boreder-color);
2890
2908
  }
2891
2909
  .rs-picker-subtle .rs-picker-toggle-active {
2892
2910
  background-color: #e5e5ea;
@@ -3371,6 +3389,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3371
3389
  .rs-picker-popup .rs-search-box {
3372
3390
  padding: 6px 12px 6px;
3373
3391
  }
3392
+ .rs-picker-popup .rs-highlight .rs-highlight-mark {
3393
+ padding: 0;
3394
+ }
3374
3395
  .rs-picker-default .rs-btn,
3375
3396
  .rs-picker-input .rs-btn,
3376
3397
  .rs-picker-default .rs-picker-toggle,
@@ -3385,6 +3406,10 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3385
3406
  background-color: #f7f7fa !important;
3386
3407
  background-color: var(--rs-input-disabled-bg) !important;
3387
3408
  }
3409
+ .rs-picker-default.rs-picker-disabled .rs-input-group,
3410
+ .rs-picker-input.rs-picker-disabled .rs-input-group {
3411
+ pointer-events: none;
3412
+ }
3388
3413
  .rs-check-item {
3389
3414
  display: block;
3390
3415
  }
@@ -3452,6 +3477,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
3452
3477
  .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
3453
3478
  left: 26px;
3454
3479
  }
3480
+ .rs-picker-menu-group {
3481
+ background-color: #fff;
3482
+ background-color: var(--rs-listbox-option-group-bg);
3483
+ position: sticky;
3484
+ top: -1px;
3485
+ z-index: 1;
3486
+ }
3455
3487
  .rs-picker-input {
3456
3488
  position: relative;
3457
3489
  border: 1px solid #e5e5ea;