rsuite 5.49.0 → 5.51.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 (233) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/Cascader/styles/index.less +4 -4
  3. package/CheckTreePicker/styles/index.less +3 -3
  4. package/DatePicker/styles/index.less +1 -1
  5. package/DateRangePicker/styles/index.less +15 -5
  6. package/Dropdown/styles/index.less +5 -4
  7. package/Dropdown/styles/mixin.less +0 -11
  8. package/Form/styles/mixin.less +1 -2
  9. package/InputGroup/styles/index.less +0 -14
  10. package/InputPicker/styles/index.less +1 -1
  11. package/Picker/styles/index.less +33 -26
  12. package/Picker/styles/mixin.less +20 -16
  13. package/README.md +4 -4
  14. package/TagInput/styles/index.less +2 -2
  15. package/TagPicker/styles/index.less +5 -1
  16. package/TreePicker/styles/index.less +2 -2
  17. package/cjs/@types/common.d.ts +8 -0
  18. package/cjs/AutoComplete/AutoComplete.js +39 -37
  19. package/cjs/AutoComplete/Combobox.d.ts +8 -0
  20. package/cjs/AutoComplete/Combobox.js +31 -0
  21. package/cjs/Calendar/Calendar.d.ts +5 -1
  22. package/cjs/Calendar/CalendarContainer.d.ts +5 -1
  23. package/cjs/Calendar/CalendarContainer.js +35 -37
  24. package/cjs/Cascader/Cascader.js +58 -59
  25. package/cjs/Cascader/DropdownMenu.d.ts +3 -20
  26. package/cjs/Cascader/DropdownMenu.js +48 -48
  27. package/cjs/Cascader/TreeView.d.ts +24 -0
  28. package/cjs/Cascader/TreeView.js +174 -0
  29. package/cjs/CheckPicker/CheckPicker.d.ts +2 -2
  30. package/cjs/CheckPicker/CheckPicker.js +42 -44
  31. package/cjs/CheckTreePicker/CheckTreeNode.d.ts +2 -2
  32. package/cjs/CheckTreePicker/CheckTreeNode.js +31 -59
  33. package/cjs/CheckTreePicker/CheckTreePicker.js +81 -84
  34. package/cjs/DatePicker/DatePicker.d.ts +5 -1
  35. package/cjs/DatePicker/DatePicker.js +7 -10
  36. package/cjs/DatePicker/Toolbar.js +2 -1
  37. package/cjs/DateRangeInput/DateRangeInput.js +2 -2
  38. package/cjs/DateRangePicker/Calendar.js +24 -23
  39. package/cjs/DateRangePicker/DateRangePicker.d.ts +18 -4
  40. package/cjs/DateRangePicker/DateRangePicker.js +239 -202
  41. package/cjs/DateRangePicker/types.d.ts +11 -3
  42. package/cjs/DateRangePicker/utils.d.ts +2 -1
  43. package/cjs/DateRangePicker/utils.js +7 -5
  44. package/cjs/Form/Form.d.ts +14 -0
  45. package/cjs/Form/Form.js +39 -30
  46. package/cjs/Form/FormContext.d.ts +1 -0
  47. package/cjs/FormControl/FormControl.d.ts +11 -1
  48. package/cjs/FormControl/FormControl.js +40 -17
  49. package/cjs/FormGroup/FormGroup.js +2 -1
  50. package/cjs/InputPicker/InputPicker.js +108 -92
  51. package/cjs/InputPicker/InputSearch.js +3 -15
  52. package/cjs/InputPicker/TagList.d.ts +3 -0
  53. package/cjs/InputPicker/TagList.js +29 -0
  54. package/cjs/InputPicker/TextBox.d.ts +18 -0
  55. package/cjs/InputPicker/TextBox.js +48 -0
  56. package/cjs/MultiCascader/MultiCascader.js +53 -52
  57. package/cjs/MultiCascader/{DropdownMenu.d.ts → TreeView.d.ts} +3 -3
  58. package/cjs/MultiCascader/{DropdownMenu.js → TreeView.js} +77 -74
  59. package/{esm/Picker/DropdownMenuCheckItem.d.ts → cjs/Picker/ListCheckItem.d.ts} +3 -3
  60. package/cjs/Picker/{DropdownMenuCheckItem.js → ListCheckItem.js} +14 -30
  61. package/cjs/Picker/{DropdownMenuItem.d.ts → ListItem.d.ts} +4 -4
  62. package/cjs/Picker/{DropdownMenuItem.js → ListItem.js} +15 -24
  63. package/cjs/Picker/ListItemGroup.d.ts +6 -0
  64. package/cjs/Picker/{DropdownMenuGroup.js → ListItemGroup.js} +3 -9
  65. package/cjs/Picker/Listbox.d.ts +35 -0
  66. package/cjs/Picker/{DropdownMenu.js → Listbox.js} +49 -64
  67. package/cjs/{DatePicker → Picker}/PickerIndicator.d.ts +1 -1
  68. package/cjs/{DatePicker → Picker}/PickerIndicator.js +2 -1
  69. package/cjs/{DatePicker → Picker}/PickerLabel.d.ts +1 -1
  70. package/cjs/Picker/{PickerOverlay.d.ts → PickerPopup.d.ts} +3 -3
  71. package/cjs/Picker/{PickerOverlay.js → PickerPopup.js} +9 -7
  72. package/cjs/Picker/PickerToggle.d.ts +17 -22
  73. package/cjs/Picker/PickerToggle.js +63 -181
  74. package/cjs/Picker/PickerToggleTrigger.d.ts +15 -0
  75. package/cjs/Picker/PickerToggleTrigger.js +21 -5
  76. package/cjs/Picker/SearchBar.js +7 -9
  77. package/cjs/Picker/TreeView.d.ts +7 -0
  78. package/cjs/Picker/TreeView.js +31 -0
  79. package/cjs/Picker/hooks/index.d.ts +6 -0
  80. package/cjs/Picker/hooks/index.js +18 -0
  81. package/cjs/Picker/hooks/useCombobox.d.ts +7 -0
  82. package/cjs/Picker/hooks/useCombobox.js +22 -0
  83. package/cjs/Picker/hooks/useFocusItemValue.d.ts +30 -0
  84. package/cjs/Picker/hooks/useFocusItemValue.js +246 -0
  85. package/cjs/Picker/hooks/usePickerClassName.d.ts +21 -0
  86. package/cjs/Picker/hooks/usePickerClassName.js +39 -0
  87. package/cjs/Picker/{usePickerRef.d.ts → hooks/usePickerRef.d.ts} +5 -3
  88. package/cjs/Picker/{usePickerRef.js → hooks/usePickerRef.js} +13 -7
  89. package/cjs/Picker/hooks/useSearch.d.ts +18 -0
  90. package/cjs/Picker/hooks/useSearch.js +57 -0
  91. package/cjs/Picker/hooks/useToggleKeyDownEvent.d.ts +25 -0
  92. package/cjs/Picker/hooks/useToggleKeyDownEvent.js +101 -0
  93. package/cjs/Picker/index.d.ts +9 -5
  94. package/cjs/Picker/index.js +32 -16
  95. package/cjs/Picker/propTypes.d.ts +0 -6
  96. package/cjs/Picker/propTypes.js +0 -5
  97. package/cjs/Picker/utils.d.ts +2 -100
  98. package/cjs/Picker/utils.js +1 -473
  99. package/cjs/SelectPicker/SelectPicker.d.ts +2 -2
  100. package/cjs/SelectPicker/SelectPicker.js +47 -50
  101. package/cjs/TagInput/index.js +4 -0
  102. package/cjs/TreePicker/TreeNode.d.ts +2 -2
  103. package/cjs/TreePicker/TreeNode.js +22 -56
  104. package/cjs/TreePicker/TreePicker.js +91 -95
  105. package/cjs/utils/constants.d.ts +2 -1
  106. package/cjs/utils/constants.js +1 -0
  107. package/cjs/utils/dateUtils.d.ts +0 -1
  108. package/cjs/utils/dateUtils.js +0 -6
  109. package/cjs/utils/getStringLength.d.ts +2 -0
  110. package/cjs/utils/getStringLength.js +18 -0
  111. package/cjs/utils/index.d.ts +1 -0
  112. package/cjs/utils/index.js +4 -1
  113. package/dist/rsuite-no-reset-rtl.css +201 -186
  114. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  115. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  116. package/dist/rsuite-no-reset.css +201 -186
  117. package/dist/rsuite-no-reset.min.css +1 -1
  118. package/dist/rsuite-no-reset.min.css.map +1 -1
  119. package/dist/rsuite-rtl.css +201 -186
  120. package/dist/rsuite-rtl.min.css +1 -1
  121. package/dist/rsuite-rtl.min.css.map +1 -1
  122. package/dist/rsuite.css +201 -186
  123. package/dist/rsuite.js +235 -104
  124. package/dist/rsuite.js.map +1 -1
  125. package/dist/rsuite.min.css +1 -1
  126. package/dist/rsuite.min.css.map +1 -1
  127. package/dist/rsuite.min.js +1 -1
  128. package/dist/rsuite.min.js.map +1 -1
  129. package/esm/@types/common.d.ts +8 -0
  130. package/esm/AutoComplete/AutoComplete.js +42 -40
  131. package/esm/AutoComplete/Combobox.d.ts +8 -0
  132. package/esm/AutoComplete/Combobox.js +25 -0
  133. package/esm/Calendar/Calendar.d.ts +5 -1
  134. package/esm/Calendar/CalendarContainer.d.ts +5 -1
  135. package/esm/Calendar/CalendarContainer.js +37 -39
  136. package/esm/Cascader/Cascader.js +61 -62
  137. package/esm/Cascader/DropdownMenu.d.ts +3 -20
  138. package/esm/Cascader/DropdownMenu.js +50 -49
  139. package/esm/Cascader/TreeView.d.ts +24 -0
  140. package/esm/Cascader/TreeView.js +167 -0
  141. package/esm/CheckPicker/CheckPicker.d.ts +2 -2
  142. package/esm/CheckPicker/CheckPicker.js +45 -47
  143. package/esm/CheckTreePicker/CheckTreeNode.d.ts +2 -2
  144. package/esm/CheckTreePicker/CheckTreeNode.js +33 -61
  145. package/esm/CheckTreePicker/CheckTreePicker.js +84 -87
  146. package/esm/DatePicker/DatePicker.d.ts +5 -1
  147. package/esm/DatePicker/DatePicker.js +5 -8
  148. package/esm/DatePicker/Toolbar.js +2 -1
  149. package/esm/DateRangeInput/DateRangeInput.js +2 -2
  150. package/esm/DateRangePicker/Calendar.js +25 -23
  151. package/esm/DateRangePicker/DateRangePicker.d.ts +18 -4
  152. package/esm/DateRangePicker/DateRangePicker.js +241 -204
  153. package/esm/DateRangePicker/types.d.ts +11 -3
  154. package/esm/DateRangePicker/utils.d.ts +2 -1
  155. package/esm/DateRangePicker/utils.js +7 -5
  156. package/esm/Form/Form.d.ts +14 -0
  157. package/esm/Form/Form.js +41 -32
  158. package/esm/Form/FormContext.d.ts +1 -0
  159. package/esm/FormControl/FormControl.d.ts +11 -1
  160. package/esm/FormControl/FormControl.js +41 -18
  161. package/esm/FormGroup/FormGroup.js +3 -2
  162. package/esm/InputPicker/InputPicker.js +110 -94
  163. package/esm/InputPicker/InputSearch.js +4 -15
  164. package/esm/InputPicker/TagList.d.ts +3 -0
  165. package/esm/InputPicker/TagList.js +23 -0
  166. package/esm/InputPicker/TextBox.d.ts +18 -0
  167. package/esm/InputPicker/TextBox.js +42 -0
  168. package/esm/MultiCascader/MultiCascader.js +56 -55
  169. package/esm/MultiCascader/{DropdownMenu.d.ts → TreeView.d.ts} +3 -3
  170. package/esm/MultiCascader/{DropdownMenu.js → TreeView.js} +79 -75
  171. package/{cjs/Picker/DropdownMenuCheckItem.d.ts → esm/Picker/ListCheckItem.d.ts} +3 -3
  172. package/esm/Picker/{DropdownMenuCheckItem.js → ListCheckItem.js} +15 -30
  173. package/esm/Picker/{DropdownMenuItem.d.ts → ListItem.d.ts} +4 -4
  174. package/esm/Picker/{DropdownMenuItem.js → ListItem.js} +16 -24
  175. package/esm/Picker/ListItemGroup.d.ts +6 -0
  176. package/esm/Picker/{DropdownMenuGroup.js → ListItemGroup.js} +3 -9
  177. package/esm/Picker/Listbox.d.ts +35 -0
  178. package/esm/Picker/{DropdownMenu.js → Listbox.js} +50 -64
  179. package/esm/{DatePicker → Picker}/PickerIndicator.d.ts +1 -1
  180. package/esm/{DatePicker → Picker}/PickerIndicator.js +2 -1
  181. package/esm/{DatePicker → Picker}/PickerLabel.d.ts +1 -1
  182. package/esm/Picker/{PickerOverlay.d.ts → PickerPopup.d.ts} +3 -3
  183. package/esm/Picker/{PickerOverlay.js → PickerPopup.js} +10 -8
  184. package/esm/Picker/PickerToggle.d.ts +17 -22
  185. package/esm/Picker/PickerToggle.js +65 -183
  186. package/esm/Picker/PickerToggleTrigger.d.ts +15 -0
  187. package/esm/Picker/PickerToggleTrigger.js +20 -5
  188. package/esm/Picker/SearchBar.js +8 -9
  189. package/esm/Picker/TreeView.d.ts +7 -0
  190. package/esm/Picker/TreeView.js +25 -0
  191. package/esm/Picker/hooks/index.d.ts +6 -0
  192. package/esm/Picker/hooks/index.js +7 -0
  193. package/esm/Picker/hooks/useCombobox.d.ts +7 -0
  194. package/esm/Picker/hooks/useCombobox.js +17 -0
  195. package/esm/Picker/hooks/useFocusItemValue.d.ts +30 -0
  196. package/esm/Picker/hooks/useFocusItemValue.js +240 -0
  197. package/esm/Picker/hooks/usePickerClassName.d.ts +21 -0
  198. package/esm/Picker/hooks/usePickerClassName.js +33 -0
  199. package/esm/Picker/{usePickerRef.d.ts → hooks/usePickerRef.d.ts} +5 -3
  200. package/esm/Picker/{usePickerRef.js → hooks/usePickerRef.js} +13 -8
  201. package/esm/Picker/hooks/useSearch.d.ts +18 -0
  202. package/esm/Picker/hooks/useSearch.js +51 -0
  203. package/esm/Picker/hooks/useToggleKeyDownEvent.d.ts +25 -0
  204. package/esm/Picker/hooks/useToggleKeyDownEvent.js +96 -0
  205. package/esm/Picker/index.d.ts +9 -5
  206. package/esm/Picker/index.js +9 -5
  207. package/esm/Picker/propTypes.d.ts +0 -6
  208. package/esm/Picker/propTypes.js +0 -5
  209. package/esm/Picker/utils.d.ts +2 -100
  210. package/esm/Picker/utils.js +2 -467
  211. package/esm/SelectPicker/SelectPicker.d.ts +2 -2
  212. package/esm/SelectPicker/SelectPicker.js +50 -53
  213. package/esm/TagInput/index.js +4 -0
  214. package/esm/TreePicker/TreeNode.d.ts +2 -2
  215. package/esm/TreePicker/TreeNode.js +24 -58
  216. package/esm/TreePicker/TreePicker.js +94 -98
  217. package/esm/utils/constants.d.ts +2 -1
  218. package/esm/utils/constants.js +1 -0
  219. package/esm/utils/dateUtils.d.ts +0 -1
  220. package/esm/utils/dateUtils.js +0 -5
  221. package/esm/utils/getStringLength.d.ts +2 -0
  222. package/esm/utils/getStringLength.js +13 -0
  223. package/esm/utils/index.d.ts +1 -0
  224. package/esm/utils/index.js +1 -0
  225. package/package.json +1 -1
  226. package/styles/mixins/combobox.less +10 -0
  227. package/styles/variables.less +1 -3
  228. package/cjs/Picker/DropdownMenu.d.ts +0 -59
  229. package/cjs/Picker/DropdownMenuGroup.d.ts +0 -6
  230. package/esm/Picker/DropdownMenu.d.ts +0 -59
  231. package/esm/Picker/DropdownMenuGroup.d.ts +0 -6
  232. /package/cjs/{DatePicker → Picker}/PickerLabel.js +0 -0
  233. /package/esm/{DatePicker → Picker}/PickerLabel.js +0 -0
@@ -1,27 +1,15 @@
1
1
  'use client';
2
2
  "use strict";
3
3
 
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
5
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
5
  exports.__esModule = true;
7
6
  exports.createConcatChildrenFunction = createConcatChildrenFunction;
8
7
  exports.shouldDisplay = shouldDisplay;
9
- exports.usePickerClassName = usePickerClassName;
10
8
  exports.onMenuKeyDown = onMenuKeyDown;
11
- exports.useSearch = useSearch;
12
- exports.usePublicMethods = usePublicMethods;
13
- exports.useToggleKeyDownEvent = exports.useFocusItemValue = void 0;
14
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
15
- var _react = _interopRequireWildcard(require("react"));
16
- var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
9
+ var _react = _interopRequireDefault(require("react"));
17
10
  var _trim = _interopRequireDefault(require("lodash/trim"));
18
- var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
19
- var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
20
- var _omit = _interopRequireDefault(require("lodash/omit"));
21
- var _find = _interopRequireDefault(require("lodash/find"));
22
11
  var _treeUtils = require("../utils/treeUtils");
23
12
  var _utils = require("../utils");
24
- var _domLib = require("dom-lib");
25
13
  var defaultNodeKeys = {
26
14
  valueKey: 'value',
27
15
  childrenKey: 'children'
@@ -56,33 +44,6 @@ function shouldDisplay(label, searchKeyword) {
56
44
  }
57
45
  return false;
58
46
  }
59
- /**
60
- * The className of the assembled Toggle is on the Picker.
61
- */
62
- function usePickerClassName(props) {
63
- var _withClassPrefix;
64
- var name = props.name,
65
- classPrefix = props.classPrefix,
66
- className = props.className,
67
- placement = props.placement,
68
- appearance = props.appearance,
69
- cleanable = props.cleanable,
70
- block = props.block,
71
- disabled = props.disabled,
72
- countable = props.countable,
73
- readOnly = props.readOnly,
74
- plaintext = props.plaintext,
75
- hasValue = props.hasValue,
76
- rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["name", "classPrefix", "className", "placement", "appearance", "cleanable", "block", "disabled", "countable", "readOnly", "plaintext", "hasValue"]);
77
- var _useClassNames = (0, _utils.useClassNames)(classPrefix),
78
- withClassPrefix = _useClassNames.withClassPrefix,
79
- merge = _useClassNames.merge;
80
- var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));
81
-
82
- // Those props that're used for composing the className
83
- var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext', 'name'])));
84
- return [classes, usedClassNamePropKeys];
85
- }
86
47
  /**
87
48
  * Handling keyboard events...
88
49
  * @param event Keyboard event object
@@ -131,437 +92,4 @@ function onMenuKeyDown(event, events) {
131
92
  break;
132
93
  default:
133
94
  }
134
- }
135
- /**
136
- * Checks if the element has a vertical scrollbar.
137
- */
138
- function hasVerticalScroll(element) {
139
- var scrollHeight = element.scrollHeight,
140
- clientHeight = element.clientHeight;
141
- return scrollHeight > clientHeight;
142
- }
143
-
144
- /**
145
- * Checks if the element is within the visible area of the container
146
- */
147
- function isVisible(element, container, direction) {
148
- if (!hasVerticalScroll(container)) {
149
- return true;
150
- }
151
- var _element$getBoundingC = element.getBoundingClientRect(),
152
- top = _element$getBoundingC.top,
153
- bottom = _element$getBoundingC.bottom,
154
- height = _element$getBoundingC.height;
155
- var _container$getBoundin = container.getBoundingClientRect(),
156
- containerTop = _container$getBoundin.top,
157
- containerBottom = _container$getBoundin.bottom;
158
- if (direction === 'top') {
159
- return top + height > containerTop;
160
- }
161
- return bottom - height < containerBottom;
162
- }
163
- function scrollTo(container, direction, step) {
164
- var scrollTop = container.scrollTop;
165
- container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;
166
- }
167
-
168
- /**
169
- * A hook that manages the focus state of the option.
170
- * @param defaultFocusItemValue
171
- * @param props
172
- */
173
- var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {
174
- var _props$valueKey = props.valueKey,
175
- valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
176
- _props$focusableQuery = props.focusableQueryKey,
177
- focusableQueryKey = _props$focusableQuery === void 0 ? '[data-key][aria-disabled="false"]' : _props$focusableQuery,
178
- _props$defaultLayer = props.defaultLayer,
179
- defaultLayer = _props$defaultLayer === void 0 ? 0 : _props$defaultLayer,
180
- data = props.data,
181
- target = props.target,
182
- rtl = props.rtl,
183
- callback = props.callback,
184
- _props$getParent = props.getParent,
185
- getParent = _props$getParent === void 0 ? function (item) {
186
- return item === null || item === void 0 ? void 0 : item.parent;
187
- } : _props$getParent;
188
- var _useState = (0, _react.useState)(defaultFocusItemValue),
189
- focusItemValue = _useState[0],
190
- setFocusItemValue = _useState[1];
191
- var _useState2 = (0, _react.useState)(defaultLayer),
192
- layer = _useState2[0],
193
- setLayer = _useState2[1];
194
- var _useState3 = (0, _react.useState)([]),
195
- keys = _useState3[0],
196
- setKeys = _useState3[1];
197
- var focusCallback = (0, _react.useCallback)(function (value, event) {
198
- var menu = (0, _isFunction.default)(target) ? target() : target;
199
- var focusElement = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-key=\"" + value + "\"]");
200
- focusElement === null || focusElement === void 0 ? void 0 : focusElement.focus();
201
- callback === null || callback === void 0 ? void 0 : callback(value, event);
202
- }, [callback, target]);
203
- var getScrollContainer = (0, _react.useCallback)(function () {
204
- var menu = (0, _isFunction.default)(target) ? target() : target;
205
-
206
- // For Cascader and MutiCascader
207
- var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + layer + "\"]");
208
- if (subMenu) {
209
- return subMenu;
210
- }
211
-
212
- // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker
213
- return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role="listbox"]');
214
- }, [layer, target]);
215
-
216
- /**
217
- * Get the elements visible in all options.
218
- */
219
- var getFocusableMenuItems = (0, _react.useCallback)(function () {
220
- if (!target) {
221
- return [];
222
- }
223
- var currentKeys = keys;
224
- if (layer < 1) {
225
- var popup = (0, _isFunction.default)(target) ? target() : target;
226
- var rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer="0"]');
227
- if (rootMenu) {
228
- var _rootMenu$querySelect;
229
- currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(function (item) {
230
- var _item$dataset;
231
- return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;
232
- });
233
- } else {
234
- var _popup$querySelectorA;
235
- currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(function (item) {
236
- var _item$dataset2;
237
- return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;
238
- });
239
- }
240
- }
241
-
242
- // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.
243
- // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string
244
- return currentKeys.map(function (key) {
245
- return (0, _find.default)(data, function (i) {
246
- return "" + i[valueKey] === key;
247
- });
248
- });
249
- }, [data, focusableQueryKey, keys, target, valueKey, layer]);
250
-
251
- /**
252
- * Get the index of the focus item.
253
- */
254
- var findFocusItemIndex = (0, _react.useCallback)(function (callback) {
255
- var items = getFocusableMenuItems();
256
- for (var i = 0; i < items.length; i += 1) {
257
- var _items$i;
258
- if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {
259
- callback(items, i);
260
- return;
261
- }
262
- }
263
- callback(items, -1);
264
- }, [focusItemValue, getFocusableMenuItems, valueKey]);
265
- var scrollListItem = (0, _react.useCallback)(function (direction, itemValue, willOverflow) {
266
- var container = getScrollContainer();
267
- var item = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + itemValue + "\"]");
268
- if (willOverflow && container) {
269
- var scrollHeight = container.scrollHeight,
270
- clientHeight = container.clientHeight;
271
- container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;
272
- return;
273
- }
274
- if (item && container) {
275
- if (!isVisible(item, container, direction)) {
276
- var height = (0, _domLib.getHeight)(item);
277
- scrollTo(container, direction, height);
278
- }
279
- }
280
- }, [getScrollContainer]);
281
- var focusNextMenuItem = (0, _react.useCallback)(function (event) {
282
- findFocusItemIndex(function (items, index) {
283
- var willOverflow = index + 2 > items.length;
284
- var nextIndex = willOverflow ? 0 : index + 1;
285
- var focusItem = items[nextIndex];
286
- if (!(0, _isUndefined.default)(focusItem)) {
287
- setFocusItemValue(focusItem[valueKey]);
288
- focusCallback(focusItem[valueKey], event);
289
- scrollListItem('bottom', focusItem[valueKey], willOverflow);
290
- }
291
- });
292
- }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
293
- var focusPrevMenuItem = (0, _react.useCallback)(function (event) {
294
- findFocusItemIndex(function (items, index) {
295
- var willOverflow = index === 0;
296
- var nextIndex = willOverflow ? items.length - 1 : index - 1;
297
- var focusItem = items[nextIndex];
298
- if (!(0, _isUndefined.default)(focusItem)) {
299
- setFocusItemValue(focusItem[valueKey]);
300
- focusCallback(focusItem[valueKey], event);
301
- scrollListItem('top', focusItem[valueKey], willOverflow);
302
- }
303
- });
304
- }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
305
- var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {
306
- var menu = (0, _isFunction.default)(target) ? target() : target;
307
- var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
308
- if (subMenu) {
309
- var _Array$from;
310
- return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {
311
- var _item$dataset3;
312
- return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;
313
- });
314
- }
315
- return null;
316
- }, [focusableQueryKey, target]);
317
- var focusNextLevelMenu = (0, _react.useCallback)(function (event) {
318
- var nextLayer = layer + 1;
319
- var nextKeys = getSubMenuKeys(nextLayer);
320
- if (nextKeys) {
321
- setKeys(nextKeys);
322
- setLayer(nextLayer);
323
- setFocusItemValue(nextKeys[0]);
324
- focusCallback(nextKeys[0], event);
325
- }
326
- }, [focusCallback, getSubMenuKeys, layer]);
327
- var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {
328
- var nextLayer = layer - 1;
329
- var nextKeys = getSubMenuKeys(nextLayer);
330
- if (nextKeys) {
331
- var _getParent;
332
- setKeys(nextKeys);
333
- setLayer(nextLayer);
334
- var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
335
- return item[valueKey] === focusItemValue;
336
- });
337
- var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];
338
- if (parentItemValue) {
339
- setFocusItemValue(parentItemValue);
340
- focusCallback(parentItemValue, event);
341
- }
342
- }
343
- }, [focusCallback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);
344
- var handleKeyDown = (0, _react.useCallback)(function (event) {
345
- var _onMenuKeyDown;
346
- onMenuKeyDown(event, (_onMenuKeyDown = {
347
- down: focusNextMenuItem,
348
- up: focusPrevMenuItem
349
- }, _onMenuKeyDown[rtl ? 'left' : 'right'] = focusNextLevelMenu, _onMenuKeyDown[rtl ? 'right' : 'left'] = focusPrevLevelMenu, _onMenuKeyDown));
350
- }, [focusNextLevelMenu, focusNextMenuItem, focusPrevLevelMenu, focusPrevMenuItem, rtl]);
351
- return {
352
- focusItemValue: focusItemValue,
353
- setFocusItemValue: setFocusItemValue,
354
- layer: layer,
355
- setLayer: setLayer,
356
- keys: keys,
357
- setKeys: setKeys,
358
- onKeyDown: handleKeyDown
359
- };
360
- };
361
- exports.useFocusItemValue = useFocusItemValue;
362
- /**
363
- * A hook to control the toggle keyboard operation
364
- * @param props
365
- */
366
- var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
367
- var _props$toggle = props.toggle,
368
- toggle = _props$toggle === void 0 ? true : _props$toggle,
369
- triggerRef = props.triggerRef,
370
- targetRef = props.targetRef,
371
- overlayRef = props.overlayRef,
372
- searchInputRef = props.searchInputRef,
373
- active = props.active,
374
- readOnly = props.readOnly,
375
- disabled = props.disabled,
376
- loading = props.loading,
377
- onExit = props.onExit,
378
- onOpen = props.onOpen,
379
- onClose = props.onClose,
380
- onKeyDown = props.onKeyDown,
381
- onMenuKeyDown = props.onMenuKeyDown,
382
- onMenuPressEnter = props.onMenuPressEnter,
383
- onMenuPressBackspace = props.onMenuPressBackspace;
384
- var handleClose = (0, _react.useCallback)(function () {
385
- var _triggerRef$current, _triggerRef$current$c, _targetRef$current, _targetRef$current$fo;
386
- (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
387
-
388
- // The focus is on the trigger button after closing
389
- (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
390
- onClose === null || onClose === void 0 ? void 0 : onClose();
391
- }, [onClose, targetRef, triggerRef]);
392
- var handleOpen = (0, _react.useCallback)(function () {
393
- var _triggerRef$current2, _triggerRef$current2$;
394
- (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
395
- onOpen === null || onOpen === void 0 ? void 0 : onOpen();
396
- }, [onOpen, triggerRef]);
397
- var handleToggleDropdown = (0, _react.useCallback)(function () {
398
- if (active) {
399
- handleClose();
400
- return;
401
- }
402
- handleOpen();
403
- }, [active, handleOpen, handleClose]);
404
- var onToggle = (0, _react.useCallback)(function (event) {
405
- // Keyboard events should not be processed when readOnly and disabled are set.
406
- if (readOnly || disabled || loading) {
407
- return;
408
- }
409
- if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {
410
- // enter
411
- if (toggle && event.key === _utils.KEY_VALUES.ENTER) {
412
- handleToggleDropdown();
413
- }
414
-
415
- // delete
416
- if (event.key === _utils.KEY_VALUES.BACKSPACE) {
417
- onExit === null || onExit === void 0 ? void 0 : onExit(event);
418
- }
419
- }
420
- if (overlayRef !== null && overlayRef !== void 0 && overlayRef.current) {
421
- // The keyboard operation callback on the menu.
422
- onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);
423
- if (event.key === _utils.KEY_VALUES.ENTER) {
424
- onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);
425
- }
426
-
427
- /**
428
- * There is no callback when typing the Backspace key in the search box.
429
- * The default is to remove search keywords
430
- */
431
- if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {
432
- onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);
433
- }
434
-
435
- // The search box gets focus when typing characters and numbers.
436
- if (event.key.length === 1 && /\w/.test(event.key)) {
437
- var _event$target;
438
- // Exclude Input
439
- // eg: <SelectPicker renderExtraFooter={() => <Input />} />
440
- if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {
441
- var _searchInputRef$curre;
442
- searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
443
- }
444
- }
445
- }
446
- if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {
447
- handleClose();
448
- }
449
-
450
- // Native event callback
451
- onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
452
- }, [readOnly, disabled, loading, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
453
- return onToggle;
454
- };
455
- exports.useToggleKeyDownEvent = useToggleKeyDownEvent;
456
- /**
457
- * A hook that handles search filter options
458
- */
459
- function useSearch(data, props) {
460
- var labelKey = props.labelKey,
461
- searchBy = props.searchBy,
462
- callback = props.callback; // Use search keywords to filter options.
463
- var _useState4 = (0, _react.useState)(''),
464
- searchKeyword = _useState4[0],
465
- setSearchKeyword = _useState4[1];
466
- var resetSearch = (0, _react.useCallback)(function () {
467
- setSearchKeyword('');
468
- }, []);
469
-
470
- /**
471
- * Index of keyword in `label`
472
- * @param {node} label
473
- */
474
- var checkShouldDisplay = (0, _react.useCallback)(function (item, keyword) {
475
- var checkValue = typeof item === 'object' ? item === null || item === void 0 ? void 0 : item[labelKey] : String(item);
476
- var _keyword = (0, _isUndefined.default)(keyword) ? searchKeyword : keyword;
477
- if (typeof searchBy === 'function') {
478
- return searchBy(_keyword, checkValue, item);
479
- }
480
- return shouldDisplay(checkValue, _keyword);
481
- }, [labelKey, searchBy, searchKeyword]);
482
- var filteredData = (0, _react.useMemo)(function () {
483
- return data.filter(function (item) {
484
- return checkShouldDisplay(item, searchKeyword);
485
- });
486
- }, [checkShouldDisplay, data, searchKeyword]);
487
- var handleSearch = function handleSearch(searchKeyword, event) {
488
- var filteredData = data.filter(function (item) {
489
- return checkShouldDisplay(item, searchKeyword);
490
- });
491
- setSearchKeyword(searchKeyword);
492
- callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);
493
- };
494
- return {
495
- searchKeyword: searchKeyword,
496
- filteredData: filteredData,
497
- checkShouldDisplay: checkShouldDisplay,
498
- handleSearch: handleSearch,
499
- resetSearch: resetSearch
500
- };
501
- }
502
- /**
503
- * A hook of the exposed method of Picker
504
- */
505
- function usePublicMethods(ref, parmas) {
506
- var triggerRef = parmas.triggerRef,
507
- overlayRef = parmas.overlayRef,
508
- targetRef = parmas.targetRef,
509
- rootRef = parmas.rootRef,
510
- listRef = parmas.listRef,
511
- inline = parmas.inline;
512
- var handleOpen = (0, _react.useCallback)(function () {
513
- var _triggerRef$current3;
514
- triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();
515
- }, [triggerRef]);
516
- var handleClose = (0, _react.useCallback)(function () {
517
- var _triggerRef$current4;
518
- triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();
519
- }, [triggerRef]);
520
- var handleUpdatePosition = (0, _react.useCallback)(function () {
521
- var _triggerRef$current5;
522
- triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
523
- }, [triggerRef]);
524
- (0, _react.useImperativeHandle)(ref, function () {
525
- // Tree and CheckTree
526
- if (inline) {
527
- return {
528
- get root() {
529
- var _triggerRef$current$r, _triggerRef$current6;
530
- return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;
531
- },
532
- get list() {
533
- if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
534
- throw new Error('The list is not found, please set `virtualized` for the component.');
535
- }
536
- return listRef === null || listRef === void 0 ? void 0 : listRef.current;
537
- }
538
- };
539
- }
540
- return {
541
- get root() {
542
- var _ref, _triggerRef$current7;
543
- return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;
544
- },
545
- get overlay() {
546
- var _overlayRef$current;
547
- if (!(overlayRef !== null && overlayRef !== void 0 && overlayRef.current)) {
548
- throw new Error('The overlay is not found. Please confirm whether the picker is open.');
549
- }
550
- return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;
551
- },
552
- get target() {
553
- var _targetRef$current2;
554
- return (_targetRef$current2 = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current2 !== void 0 ? _targetRef$current2 : null;
555
- },
556
- get list() {
557
- if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
558
- throw new Error("\n The list is not found.\n 1.Please set virtualized for the component.\n 2.Please confirm whether the picker is open.\n ");
559
- }
560
- return listRef === null || listRef === void 0 ? void 0 : listRef.current;
561
- },
562
- updatePosition: handleUpdatePosition,
563
- open: handleOpen,
564
- close: handleClose
565
- };
566
- });
567
95
  }
@@ -1,4 +1,4 @@
1
- import React, { Ref } from 'react';
1
+ import React from 'react';
2
2
  import { PickerLocale } from '../locales';
3
3
  import { PickerHandle, PickerToggleProps } from '../Picker';
4
4
  import { ListProps } from '../Windowing';
@@ -49,7 +49,7 @@ export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, Pic
49
49
  }
50
50
  export interface SelectPickerComponent {
51
51
  <T>(props: SelectPickerProps<T> & {
52
- ref?: Ref<PickerHandle>;
52
+ ref?: React.Ref<PickerHandle>;
53
53
  }): JSX.Element | null;
54
54
  displayName?: string;
55
55
  propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;