rsuite 5.48.1 → 5.50.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 (203) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/Cascader/styles/index.less +5 -4
  3. package/DatePicker/styles/index.less +18 -11
  4. package/DateRangeInput/package.json +7 -0
  5. package/DateRangePicker/styles/index.less +20 -0
  6. package/Dropdown/styles/index.less +5 -4
  7. package/Dropdown/styles/mixin.less +0 -11
  8. package/InputGroup/styles/index.less +1 -0
  9. package/Picker/styles/index.less +51 -24
  10. package/Picker/styles/mixin.less +17 -13
  11. package/README.md +34 -24
  12. package/Sidenav/styles/index.less +2 -0
  13. package/TagInput/styles/index.less +1 -1
  14. package/cjs/AutoComplete/AutoComplete.js +25 -26
  15. package/cjs/Calendar/Calendar.d.ts +5 -1
  16. package/cjs/Calendar/CalendarContainer.d.ts +7 -1
  17. package/cjs/Calendar/CalendarContainer.js +11 -4
  18. package/cjs/Calendar/CalendarHeader.js +2 -0
  19. package/cjs/Calendar/MonthDropdown.js +7 -2
  20. package/cjs/Calendar/MonthDropdownItem.js +2 -2
  21. package/cjs/Calendar/Table.js +6 -1
  22. package/cjs/Calendar/TimeDropdown.js +17 -10
  23. package/cjs/Calendar/types.d.ts +1 -0
  24. package/cjs/Cascader/Cascader.js +46 -48
  25. package/cjs/CheckPicker/CheckPicker.d.ts +2 -2
  26. package/cjs/CheckPicker/CheckPicker.js +33 -36
  27. package/cjs/CheckTreePicker/CheckTreePicker.js +61 -64
  28. package/cjs/CustomProvider/CustomProvider.d.ts +13 -0
  29. package/cjs/CustomProvider/CustomProvider.js +2 -2
  30. package/cjs/DateInput/DateField.d.ts +9 -31
  31. package/cjs/DateInput/DateField.js +61 -12
  32. package/cjs/DateInput/DateInput.d.ts +7 -2
  33. package/cjs/DateInput/DateInput.js +74 -92
  34. package/cjs/DateInput/index.d.ts +4 -0
  35. package/cjs/DateInput/index.js +19 -1
  36. package/cjs/DateInput/useDateInputState.d.ts +7 -31
  37. package/cjs/DateInput/useDateInputState.js +39 -15
  38. package/cjs/DateInput/useIsFocused.d.ts +7 -0
  39. package/cjs/DateInput/useIsFocused.js +28 -0
  40. package/cjs/DateInput/useKeyboardInputEvent.d.ts +10 -0
  41. package/cjs/DateInput/useKeyboardInputEvent.js +44 -0
  42. package/cjs/DateInput/utils.d.ts +23 -1
  43. package/cjs/DateInput/utils.js +155 -51
  44. package/cjs/DatePicker/DatePicker.d.ts +25 -8
  45. package/cjs/DatePicker/DatePicker.js +208 -241
  46. package/cjs/DatePicker/Toolbar.js +5 -22
  47. package/cjs/DatePicker/utils.d.ts +5 -1
  48. package/cjs/DatePicker/utils.js +17 -1
  49. package/cjs/DateRangeInput/DateRangeInput.d.ts +29 -0
  50. package/cjs/DateRangeInput/DateRangeInput.js +244 -0
  51. package/cjs/DateRangeInput/index.d.ts +3 -0
  52. package/cjs/DateRangeInput/index.js +9 -0
  53. package/cjs/DateRangeInput/utils.d.ts +61 -0
  54. package/cjs/DateRangeInput/utils.js +146 -0
  55. package/cjs/DateRangePicker/Calendar.js +24 -23
  56. package/cjs/DateRangePicker/DateRangePicker.d.ts +18 -4
  57. package/cjs/DateRangePicker/DateRangePicker.js +251 -203
  58. package/cjs/DateRangePicker/types.d.ts +11 -3
  59. package/cjs/DateRangePicker/utils.d.ts +2 -1
  60. package/cjs/DateRangePicker/utils.js +7 -5
  61. package/cjs/FormControl/FormControl.d.ts +11 -1
  62. package/cjs/FormControl/FormControl.js +6 -5
  63. package/cjs/Input/Input.d.ts +11 -0
  64. package/cjs/Input/Input.js +11 -8
  65. package/cjs/InputPicker/InputPicker.js +62 -63
  66. package/cjs/MultiCascader/MultiCascader.js +40 -42
  67. package/cjs/Overlay/OverlayTrigger.d.ts +3 -0
  68. package/cjs/Overlay/OverlayTrigger.js +5 -0
  69. package/cjs/Picker/PickerIndicator.d.ts +10 -0
  70. package/cjs/Picker/PickerIndicator.js +49 -0
  71. package/cjs/Picker/PickerLabel.d.ts +9 -0
  72. package/cjs/Picker/PickerLabel.js +23 -0
  73. package/cjs/Picker/PickerToggle.d.ts +17 -22
  74. package/cjs/Picker/PickerToggle.js +52 -177
  75. package/cjs/Picker/index.d.ts +3 -0
  76. package/cjs/Picker/index.js +10 -1
  77. package/cjs/Picker/usePickerRef.d.ts +19 -0
  78. package/cjs/Picker/usePickerRef.js +88 -0
  79. package/cjs/Picker/utils.d.ts +5 -9
  80. package/cjs/Picker/utils.js +22 -89
  81. package/cjs/SelectPicker/SelectPicker.d.ts +2 -2
  82. package/cjs/SelectPicker/SelectPicker.js +39 -42
  83. package/cjs/TreePicker/TreePicker.js +72 -75
  84. package/cjs/index.d.ts +2 -0
  85. package/cjs/index.js +3 -1
  86. package/cjs/locales/index.d.ts +2 -2
  87. package/cjs/utils/constants.d.ts +2 -1
  88. package/cjs/utils/constants.js +1 -0
  89. package/cjs/utils/dateUtils.d.ts +0 -1
  90. package/cjs/utils/dateUtils.js +0 -6
  91. package/cjs/utils/getStringLength.d.ts +2 -0
  92. package/cjs/utils/getStringLength.js +18 -0
  93. package/cjs/utils/index.d.ts +3 -0
  94. package/cjs/utils/index.js +11 -2
  95. package/cjs/utils/useCustom.js +1 -1
  96. package/cjs/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  97. package/cjs/utils/useIsomorphicLayoutEffect.js +9 -0
  98. package/dist/rsuite-no-reset-rtl.css +140 -207
  99. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  100. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  101. package/dist/rsuite-no-reset.css +140 -207
  102. package/dist/rsuite-no-reset.min.css +1 -1
  103. package/dist/rsuite-no-reset.min.css.map +1 -1
  104. package/dist/rsuite-rtl.css +140 -75
  105. package/dist/rsuite-rtl.min.css +1 -1
  106. package/dist/rsuite-rtl.min.css.map +1 -1
  107. package/dist/rsuite.css +140 -75
  108. package/dist/rsuite.js +4833 -258
  109. package/dist/rsuite.js.map +1 -1
  110. package/dist/rsuite.min.css +1 -1
  111. package/dist/rsuite.min.css.map +1 -1
  112. package/dist/rsuite.min.js +1 -1
  113. package/dist/rsuite.min.js.map +1 -1
  114. package/esm/AutoComplete/AutoComplete.js +28 -29
  115. package/esm/Calendar/Calendar.d.ts +5 -1
  116. package/esm/Calendar/CalendarContainer.d.ts +7 -1
  117. package/esm/Calendar/CalendarContainer.js +12 -5
  118. package/esm/Calendar/CalendarHeader.js +2 -0
  119. package/esm/Calendar/MonthDropdown.js +7 -2
  120. package/esm/Calendar/MonthDropdownItem.js +2 -2
  121. package/esm/Calendar/Table.js +6 -1
  122. package/esm/Calendar/TimeDropdown.js +17 -10
  123. package/esm/Calendar/types.d.ts +1 -0
  124. package/esm/Cascader/Cascader.js +49 -51
  125. package/esm/CheckPicker/CheckPicker.d.ts +2 -2
  126. package/esm/CheckPicker/CheckPicker.js +36 -39
  127. package/esm/CheckTreePicker/CheckTreePicker.js +64 -67
  128. package/esm/CustomProvider/CustomProvider.d.ts +13 -0
  129. package/esm/CustomProvider/CustomProvider.js +3 -3
  130. package/esm/DateInput/DateField.d.ts +9 -31
  131. package/esm/DateInput/DateField.js +61 -12
  132. package/esm/DateInput/DateInput.d.ts +7 -2
  133. package/esm/DateInput/DateInput.js +77 -95
  134. package/esm/DateInput/index.d.ts +4 -0
  135. package/esm/DateInput/index.js +4 -0
  136. package/esm/DateInput/useDateInputState.d.ts +7 -31
  137. package/esm/DateInput/useDateInputState.js +41 -18
  138. package/esm/DateInput/useIsFocused.d.ts +7 -0
  139. package/esm/DateInput/useIsFocused.js +22 -0
  140. package/esm/DateInput/useKeyboardInputEvent.d.ts +10 -0
  141. package/esm/DateInput/useKeyboardInputEvent.js +38 -0
  142. package/esm/DateInput/utils.d.ts +23 -1
  143. package/esm/DateInput/utils.js +150 -51
  144. package/esm/DatePicker/DatePicker.d.ts +25 -8
  145. package/esm/DatePicker/DatePicker.js +211 -244
  146. package/esm/DatePicker/Toolbar.js +5 -22
  147. package/esm/DatePicker/utils.d.ts +5 -1
  148. package/esm/DatePicker/utils.js +16 -1
  149. package/esm/DateRangeInput/DateRangeInput.d.ts +29 -0
  150. package/esm/DateRangeInput/DateRangeInput.js +237 -0
  151. package/esm/DateRangeInput/index.d.ts +3 -0
  152. package/esm/DateRangeInput/index.js +3 -0
  153. package/esm/DateRangeInput/utils.d.ts +61 -0
  154. package/esm/DateRangeInput/utils.js +137 -0
  155. package/esm/DateRangePicker/Calendar.js +25 -23
  156. package/esm/DateRangePicker/DateRangePicker.d.ts +18 -4
  157. package/esm/DateRangePicker/DateRangePicker.js +253 -205
  158. package/esm/DateRangePicker/types.d.ts +11 -3
  159. package/esm/DateRangePicker/utils.d.ts +2 -1
  160. package/esm/DateRangePicker/utils.js +7 -5
  161. package/esm/FormControl/FormControl.d.ts +11 -1
  162. package/esm/FormControl/FormControl.js +4 -3
  163. package/esm/Input/Input.d.ts +11 -0
  164. package/esm/Input/Input.js +12 -9
  165. package/esm/InputPicker/InputPicker.js +64 -65
  166. package/esm/MultiCascader/MultiCascader.js +43 -45
  167. package/esm/Overlay/OverlayTrigger.d.ts +3 -0
  168. package/esm/Overlay/OverlayTrigger.js +5 -0
  169. package/esm/Picker/PickerIndicator.d.ts +10 -0
  170. package/esm/Picker/PickerIndicator.js +43 -0
  171. package/esm/Picker/PickerLabel.d.ts +9 -0
  172. package/esm/Picker/PickerLabel.js +17 -0
  173. package/esm/Picker/PickerToggle.d.ts +17 -22
  174. package/esm/Picker/PickerToggle.js +54 -179
  175. package/esm/Picker/index.d.ts +3 -0
  176. package/esm/Picker/index.js +3 -0
  177. package/esm/Picker/usePickerRef.d.ts +19 -0
  178. package/esm/Picker/usePickerRef.js +82 -0
  179. package/esm/Picker/utils.d.ts +5 -9
  180. package/esm/Picker/utils.js +24 -90
  181. package/esm/SelectPicker/SelectPicker.d.ts +2 -2
  182. package/esm/SelectPicker/SelectPicker.js +42 -45
  183. package/esm/TreePicker/TreePicker.js +75 -78
  184. package/esm/index.d.ts +2 -0
  185. package/esm/index.js +1 -0
  186. package/esm/locales/index.d.ts +2 -2
  187. package/esm/utils/constants.d.ts +2 -1
  188. package/esm/utils/constants.js +1 -0
  189. package/esm/utils/dateUtils.d.ts +0 -1
  190. package/esm/utils/dateUtils.js +0 -5
  191. package/esm/utils/getStringLength.d.ts +2 -0
  192. package/esm/utils/getStringLength.js +13 -0
  193. package/esm/utils/index.d.ts +3 -0
  194. package/esm/utils/index.js +4 -1
  195. package/esm/utils/useCustom.js +2 -2
  196. package/esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  197. package/esm/utils/useIsomorphicLayoutEffect.js +4 -0
  198. package/package.json +1 -1
  199. package/styles/color-modes/dark.less +1 -0
  200. package/styles/color-modes/high-contrast.less +1 -0
  201. package/styles/color-modes/light.less +1 -0
  202. package/styles/mixins/combobox.less +10 -0
  203. package/styles/normalize.less +230 -231
@@ -5,25 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
6
  exports.__esModule = true;
7
7
  exports.default = void 0;
8
- var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
9
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
10
10
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
- var _debounce = _interopRequireDefault(require("lodash/debounce"));
14
12
  var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
15
- var _CloseButton = _interopRequireDefault(require("../CloseButton"));
16
13
  var _utils = require("../utils");
17
14
  var _Plaintext = _interopRequireDefault(require("../Plaintext"));
18
15
  var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"));
19
- var _TextMask = _interopRequireDefault(require("../MaskedInput/TextMask"));
20
- var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
21
- var _Loader = _interopRequireDefault(require("../Loader"));
22
16
  var _Stack = _interopRequireDefault(require("../Stack"));
23
- var _templateObject, _templateObject2;
24
- var defaultInputMask = [];
17
+ var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
18
+ var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
19
+ var _templateObject;
25
20
  var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
26
- var activeProp = props.active,
21
+ var active = props.active,
27
22
  _props$as = props.as,
28
23
  Component = _props$as === void 0 ? _ToggleButton.default : _props$as,
29
24
  _props$classPrefix = props.classPrefix,
@@ -36,26 +31,14 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
36
31
  readOnly = props.readOnly,
37
32
  plaintext = props.plaintext,
38
33
  hasValue = props.hasValue,
39
- editable = props.editable,
40
34
  _props$loading = props.loading,
41
35
  loading = _props$loading === void 0 ? false : _props$loading,
42
- cleanableProp = props.cleanable,
36
+ cleanable = props.cleanable,
43
37
  _props$tabIndex = props.tabIndex,
44
- tabIndexProp = _props$tabIndex === void 0 ? editable ? -1 : 0 : _props$tabIndex,
38
+ tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
45
39
  id = props.id,
46
- value = props.value,
47
- inputPlaceholder = props.inputPlaceholder,
48
40
  inputValueProp = props.inputValue,
49
- _props$inputMask = props.inputMask,
50
- inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,
51
- onInputChange = props.onInputChange,
52
- onInputPressEnter = props.onInputPressEnter,
53
- onInputBackspace = props.onInputBackspace,
54
- onInputBlur = props.onInputBlur,
55
- onInputFocus = props.onInputFocus,
56
41
  onClean = props.onClean,
57
- onFocus = props.onFocus,
58
- onBlur = props.onBlur,
59
42
  _props$placement = props.placement,
60
43
  placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
61
44
  caretComponent = props.caretComponent,
@@ -63,102 +46,29 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
63
46
  caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
64
47
  label = props.label,
65
48
  name = props.name,
66
- rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBackspace", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
67
- var _useCustom = (0, _utils.useCustom)(),
68
- locale = _useCustom.locale;
69
- var inputRef = (0, _react.useRef)(null);
70
- var comboboxRef = (0, _react.useRef)(null);
71
- var _useState = (0, _react.useState)(false),
72
- activeState = _useState[0],
73
- setActive = _useState[1];
49
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "loading", "cleanable", "tabIndex", "id", "inputValue", "onClean", "placement", "caretComponent", "caretAs", "label", "name"]);
50
+ var combobox = (0, _react.useRef)(null);
74
51
  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
75
52
  withClassPrefix = _useClassNames.withClassPrefix,
76
53
  merge = _useClassNames.merge,
77
54
  prefix = _useClassNames.prefix;
78
- var getInputValue = (0, _react.useCallback)(function () {
79
- return typeof inputValueProp === 'undefined' ? Array.isArray(value) ? value.join(',') : value : inputValueProp;
80
- }, [inputValueProp, value]);
81
- var _useState2 = (0, _react.useState)(getInputValue),
82
- inputValue = _useState2[0],
83
- setInputValue = _useState2[1];
84
- (0, _react.useEffect)(function () {
85
- if (comboboxRef.current) {
86
- var _value = getInputValue();
87
- setInputValue(_value);
55
+ var inputValue = (0, _react.useMemo)(function () {
56
+ if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {
57
+ return inputValueProp;
58
+ } else if (Array.isArray(inputValueProp)) {
59
+ return inputValueProp.join(',');
88
60
  }
89
- }, [getInputValue]);
61
+ return '';
62
+ }, [inputValueProp]);
90
63
  var classes = merge(className, withClassPrefix({
91
- active: activeProp || activeState
64
+ active: active
92
65
  }));
93
- var handleFocus = (0, _react.useCallback)(function (event) {
94
- if (!loading) {
95
- setActive(true);
96
- }
97
- if (editable) {
98
- // Avoid firing the onFocus event twice when DatePicker and DateRangePicker allow keyboard input.
99
- if (event.target === inputRef.current) {
100
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
101
- }
102
-
103
- // Force the input to be focused and editable.
104
- if (document.activeElement === comboboxRef.current) {
105
- var _inputRef$current;
106
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
107
- }
108
- } else {
109
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
110
- }
111
- }, [editable, loading, onFocus]);
112
- var handleBlur = (0, _react.useCallback)(function (event) {
113
- if (inputRef.current && !editable) {
114
- setActive(false);
115
- }
116
-
117
- // When activeElement is an input, it remains active.
118
- if (editable && inputRef.current && document.activeElement !== inputRef.current) {
119
- setActive(false);
120
- }
121
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
122
- }, [editable, onBlur]);
123
- var handleInputBlur = function handleInputBlur(event) {
124
- setInputValue(getInputValue());
125
- onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(event);
126
- };
127
- var handleClean = (0, _react.useCallback)(function (event) {
128
- var _inputRef$current2, _comboboxRef$current;
66
+ var handleClean = (0, _utils.useEventCallback)(function (event) {
67
+ var _combobox$current;
129
68
  event.stopPropagation();
130
69
  onClean === null || onClean === void 0 ? void 0 : onClean(event);
131
-
132
- // When the value is cleared, the current component is still in focus.
133
- editable ? (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus() : (_comboboxRef$current = comboboxRef.current) === null || _comboboxRef$current === void 0 ? void 0 : _comboboxRef$current.focus();
134
- }, [editable, onClean]);
135
- var handleInputChange = (0, _react.useCallback)(function (event) {
136
- var _event$target;
137
- var value = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;
138
- setInputValue(value);
139
- onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);
140
- }, [onInputChange]);
141
- var handleInputKeyDown = (0, _react.useCallback)(function (event) {
142
- if (editable) {
143
- if (event.key === _utils.KEY_VALUES.ENTER) {
144
- onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
145
- }
146
- if (event.key === _utils.KEY_VALUES.BACKSPACE) {
147
- onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);
148
- }
149
- }
150
- }, [editable, onInputPressEnter, onInputBackspace]);
151
- var renderInput = (0, _react.useCallback)(function (ref, props) {
152
- return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
153
- type: "text",
154
- autoComplete: "off",
155
- ref: (0, _utils.mergeRefs)(inputRef, ref),
156
- name: name,
157
- style: {
158
- pointerEvents: editable ? undefined : 'none'
159
- }
160
- }, props));
161
- }, [editable, name]);
70
+ (_combobox$current = combobox.current) === null || _combobox$current === void 0 ? void 0 : _combobox$current.focus();
71
+ });
162
72
  var ToggleCaret = (0, _useToggleCaret.default)(placement);
163
73
  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;
164
74
  if (plaintext) {
@@ -167,89 +77,54 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
167
77
  localeKey: "notSelected"
168
78
  }, hasValue ? children : null);
169
79
  }
170
- var showCleanButton = cleanableProp && hasValue && !readOnly;
171
-
172
- // When the component is read-only or disabled, the input is not interactive.
173
- var inputFocused = readOnly || disabled ? false : editable && activeState;
174
- var tabIndex = disabled ? undefined : tabIndexProp;
80
+ var showCleanButton = cleanable && hasValue && !readOnly;
175
81
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
176
82
  role: "combobox",
177
83
  "aria-haspopup": "listbox",
178
- "aria-expanded": activeProp,
84
+ "aria-expanded": active,
179
85
  "aria-disabled": disabled,
180
86
  "aria-owns": id ? id + "-listbox" : undefined
181
87
  }, rest, {
182
- ref: (0, _utils.mergeRefs)(comboboxRef, ref),
88
+ ref: (0, _utils.mergeRefs)(combobox, ref),
183
89
  disabled: disabled,
184
- tabIndex: tabIndex,
185
- className: classes,
186
- onFocus: !disabled ? handleFocus : null
187
- // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
188
- ,
189
- onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null
190
- }), /*#__PURE__*/_react.default.createElement(_Stack.default, null, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement("span", {
191
- className: prefix('label')
90
+ tabIndex: disabled ? undefined : tabIndex,
91
+ className: classes
92
+ }), /*#__PURE__*/_react.default.createElement(_Stack.default, null, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {
93
+ as: "span",
94
+ className: prefix('label'),
95
+ id: id ? id + "-label" : undefined
192
96
  }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
193
97
  grow: 1,
194
98
  style: {
195
99
  overflow: 'hidden'
196
100
  }
197
- }, loading ? /*#__PURE__*/_react.default.createElement(_Loader.default, {
198
- style: {
199
- display: 'block',
200
- padding: '1px 0'
201
- },
202
- "data-testid": "spinner"
203
- }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextMask.default, {
204
- keepCharPositions: true,
205
- mask: inputMask,
206
- value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
207
- onBlur: handleInputBlur,
208
- onFocus: onInputFocus,
209
- onChange: handleInputChange,
210
- onKeyDown: handleInputKeyDown,
211
- id: id,
212
- "aria-hidden": !inputFocused,
213
- readOnly: !inputFocused,
214
- disabled: disabled,
101
+ }, /*#__PURE__*/_react.default.createElement("input", {
102
+ readOnly: true,
103
+ "aria-hidden": true,
215
104
  "aria-controls": id ? id + "-listbox" : undefined,
216
- tabIndex: editable ? 0 : -1,
217
- className: prefix('textbox', {
218
- 'read-only': !inputFocused
219
- }),
220
- placeholder: inputPlaceholder,
221
- render: renderInput,
222
- "data-testid": "picker-toggle-input"
105
+ "aria-labelledby": label ? id + "-label" : undefined,
106
+ tabIndex: -1,
107
+ "data-testid": "picker-toggle-input",
108
+ name: name,
109
+ value: inputValue,
110
+ id: id,
111
+ className: prefix('textbox', 'read-only'),
112
+ style: {
113
+ pointerEvents: 'none'
114
+ }
223
115
  }), children ? /*#__PURE__*/_react.default.createElement("span", {
224
116
  className: prefix(hasValue ? 'value' : 'placeholder'),
225
117
  "aria-placeholder": typeof children === 'string' ? children : undefined
226
- }, children) : null)), showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
227
- className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
228
- tabIndex: -1,
229
- locale: {
230
- closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
231
- },
232
- onClick: handleClean
233
- }), caret && !showCleanButton && /*#__PURE__*/_react.default.createElement(Caret, {
234
- className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["caret"])))
235
- })));
118
+ }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
119
+ className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["indicator"])))
120
+ }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {
121
+ as: _react.default.Fragment,
122
+ loading: loading,
123
+ caretAs: caret ? Caret : null,
124
+ onClose: handleClean,
125
+ showCleanButton: showCleanButton
126
+ }))));
236
127
  });
237
128
  PickerToggle.displayName = 'PickerToggle';
238
- PickerToggle.propTypes = {
239
- classPrefix: _propTypes.default.string,
240
- hasValue: _propTypes.default.bool,
241
- cleanable: _propTypes.default.bool,
242
- className: _propTypes.default.string,
243
- children: _propTypes.default.node,
244
- caret: _propTypes.default.bool,
245
- as: _propTypes.default.elementType,
246
- onClean: _propTypes.default.func,
247
- active: _propTypes.default.bool,
248
- readOnly: _propTypes.default.bool,
249
- disabled: _propTypes.default.bool,
250
- plaintext: _propTypes.default.bool,
251
- caretComponent: (0, _deprecatePropType.default)(_propTypes.default.elementType, 'Use `caretAs` instead.'),
252
- caretAs: _propTypes.default.elementType
253
- };
254
129
  var _default = PickerToggle;
255
130
  exports.default = _default;
@@ -7,9 +7,12 @@ export { default as DropdownMenuGroup } from './DropdownMenuGroup';
7
7
  export { default as DropdownMenuItem } from './DropdownMenuItem';
8
8
  export { default as PickerOverlay } from './PickerOverlay';
9
9
  export { default as PickerToggle } from './PickerToggle';
10
+ export { default as PickerLabel } from './PickerLabel';
11
+ export { default as PickerIndicator } from './PickerIndicator';
10
12
  export { default as PickerToggleTrigger } from './PickerToggleTrigger';
11
13
  export { default as SearchBar } from './SearchBar';
12
14
  export { default as SelectedElement } from './SelectedElement';
15
+ export { default as usePickerRef } from './usePickerRef';
13
16
  export { pickTriggerPropKeys, omitTriggerPropKeys };
14
17
  export type { OverlayTriggerHandle, PositionChildProps, PickerHandle, PickerComponent, PickerToggleProps };
15
18
  export * from './utils';
@@ -11,13 +11,16 @@ var _exportNames = {
11
11
  DropdownMenuItem: true,
12
12
  PickerOverlay: true,
13
13
  PickerToggle: true,
14
+ PickerLabel: true,
15
+ PickerIndicator: true,
14
16
  PickerToggleTrigger: true,
15
17
  SearchBar: true,
16
18
  SelectedElement: true,
19
+ usePickerRef: true,
17
20
  pickTriggerPropKeys: true,
18
21
  omitTriggerPropKeys: true
19
22
  };
20
- exports.SelectedElement = exports.SearchBar = exports.PickerToggleTrigger = exports.PickerToggle = exports.PickerOverlay = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuCheckItem = exports.DropdownMenu = void 0;
23
+ exports.usePickerRef = exports.SelectedElement = exports.SearchBar = exports.PickerToggleTrigger = exports.PickerIndicator = exports.PickerLabel = exports.PickerToggle = exports.PickerOverlay = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuCheckItem = exports.DropdownMenu = void 0;
21
24
  var _PickerToggleTrigger = _interopRequireWildcard(require("./PickerToggleTrigger"));
22
25
  exports.pickTriggerPropKeys = _PickerToggleTrigger.pickTriggerPropKeys;
23
26
  exports.omitTriggerPropKeys = _PickerToggleTrigger.omitTriggerPropKeys;
@@ -34,10 +37,16 @@ var _PickerOverlay = _interopRequireDefault(require("./PickerOverlay"));
34
37
  exports.PickerOverlay = _PickerOverlay.default;
35
38
  var _PickerToggle = _interopRequireDefault(require("./PickerToggle"));
36
39
  exports.PickerToggle = _PickerToggle.default;
40
+ var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
41
+ exports.PickerLabel = _PickerLabel.default;
42
+ var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
43
+ exports.PickerIndicator = _PickerIndicator.default;
37
44
  var _SearchBar = _interopRequireDefault(require("./SearchBar"));
38
45
  exports.SearchBar = _SearchBar.default;
39
46
  var _SelectedElement = _interopRequireDefault(require("./SelectedElement"));
40
47
  exports.SelectedElement = _SelectedElement.default;
48
+ var _usePickerRef = _interopRequireDefault(require("./usePickerRef"));
49
+ exports.usePickerRef = _usePickerRef.default;
41
50
  var _utils = require("./utils");
42
51
  Object.keys(_utils).forEach(function (key) {
43
52
  if (key === "default" || key === "__esModule") return;
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ import type { OverlayTriggerHandle } from './PickerToggleTrigger';
3
+ import type { ListHandle } from '../Windowing';
4
+ export interface PickerDependentParameters {
5
+ inline?: boolean;
6
+ }
7
+ /**
8
+ * A hook of the exposed method of Picker
9
+ */
10
+ declare function usePickerRef(ref: any, parmas?: PickerDependentParameters): {
11
+ trigger: import("react").RefObject<OverlayTriggerHandle>;
12
+ root: import("react").MutableRefObject<any>;
13
+ overlay: import("react").RefObject<HTMLElement>;
14
+ target: import("react").RefObject<HTMLElement>;
15
+ list: import("react").RefObject<ListHandle>;
16
+ searchInput: import("react").RefObject<HTMLInputElement>;
17
+ treeView: import("react").RefObject<HTMLDivElement>;
18
+ };
19
+ export default usePickerRef;
@@ -0,0 +1,88 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _react = require("react");
8
+ var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
9
+ /**
10
+ * A hook of the exposed method of Picker
11
+ */
12
+ function usePickerRef(ref, parmas) {
13
+ var trigger = (0, _react.useRef)(null);
14
+ var root = (0, _react.useRef)(null);
15
+ var target = (0, _react.useRef)(null);
16
+ var overlay = (0, _react.useRef)(null);
17
+ var list = (0, _react.useRef)(null);
18
+ var searchInput = (0, _react.useRef)(null);
19
+ var treeView = (0, _react.useRef)(null);
20
+ var _ref = parmas || {},
21
+ inline = _ref.inline;
22
+ var handleOpen = (0, _useEventCallback.default)(function () {
23
+ var _trigger$current;
24
+ trigger === null || trigger === void 0 ? void 0 : (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.open();
25
+ });
26
+ var handleClose = (0, _useEventCallback.default)(function () {
27
+ var _trigger$current2;
28
+ trigger === null || trigger === void 0 ? void 0 : (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.close();
29
+ });
30
+ var handleUpdatePosition = (0, _useEventCallback.default)(function () {
31
+ var _trigger$current3;
32
+ trigger === null || trigger === void 0 ? void 0 : (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.updatePosition();
33
+ });
34
+ (0, _react.useImperativeHandle)(ref, function () {
35
+ // Tree and CheckTree
36
+ if (inline) {
37
+ return {
38
+ get root() {
39
+ var _trigger$current$root, _trigger$current4;
40
+ return root !== null && root !== void 0 && root.current ? root === null || root === void 0 ? void 0 : root.current : (_trigger$current$root = trigger === null || trigger === void 0 ? void 0 : (_trigger$current4 = trigger.current) === null || _trigger$current4 === void 0 ? void 0 : _trigger$current4.root) !== null && _trigger$current$root !== void 0 ? _trigger$current$root : null;
41
+ },
42
+ get list() {
43
+ if (!(list !== null && list !== void 0 && list.current)) {
44
+ throw new Error('The list is not found, please set `virtualized` for the component.');
45
+ }
46
+ return list === null || list === void 0 ? void 0 : list.current;
47
+ }
48
+ };
49
+ }
50
+ return {
51
+ get root() {
52
+ var _ref2, _trigger$current5;
53
+ return (_ref2 = (root === null || root === void 0 ? void 0 : root.current) || (trigger === null || trigger === void 0 ? void 0 : (_trigger$current5 = trigger.current) === null || _trigger$current5 === void 0 ? void 0 : _trigger$current5.root)) !== null && _ref2 !== void 0 ? _ref2 : null;
54
+ },
55
+ get overlay() {
56
+ var _overlay$current;
57
+ if (!(overlay !== null && overlay !== void 0 && overlay.current)) {
58
+ throw new Error('The overlay is not found. Please confirm whether the picker is open.');
59
+ }
60
+ return (_overlay$current = overlay === null || overlay === void 0 ? void 0 : overlay.current) !== null && _overlay$current !== void 0 ? _overlay$current : null;
61
+ },
62
+ get target() {
63
+ var _target$current;
64
+ return (_target$current = target === null || target === void 0 ? void 0 : target.current) !== null && _target$current !== void 0 ? _target$current : null;
65
+ },
66
+ get list() {
67
+ if (!(list !== null && list !== void 0 && list.current)) {
68
+ 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 ");
69
+ }
70
+ return list === null || list === void 0 ? void 0 : list.current;
71
+ },
72
+ updatePosition: handleUpdatePosition,
73
+ open: handleOpen,
74
+ close: handleClose
75
+ };
76
+ });
77
+ return {
78
+ trigger: trigger,
79
+ root: root,
80
+ overlay: overlay,
81
+ target: target,
82
+ list: list,
83
+ searchInput: searchInput,
84
+ treeView: treeView
85
+ };
86
+ }
87
+ var _default = usePickerRef;
88
+ exports.default = _default;
@@ -68,10 +68,10 @@ export declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null |
68
68
  };
69
69
  export interface ToggleKeyDownEventProps {
70
70
  toggle?: boolean;
71
- triggerRef: React.RefObject<any>;
72
- targetRef: React.RefObject<any>;
73
- overlayRef?: React.RefObject<any>;
74
- searchInputRef?: React.RefObject<any>;
71
+ trigger: React.RefObject<any>;
72
+ target: React.RefObject<any>;
73
+ overlay?: React.RefObject<any>;
74
+ searchInput?: React.RefObject<any>;
75
75
  active?: boolean;
76
76
  readOnly?: boolean;
77
77
  disabled?: boolean;
@@ -88,7 +88,7 @@ export interface ToggleKeyDownEventProps {
88
88
  * A hook to control the toggle keyboard operation
89
89
  * @param props
90
90
  */
91
- export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (event: React.KeyboardEvent) => void;
91
+ export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (...args: any[]) => any;
92
92
  interface SearchOptions<T> {
93
93
  labelKey: string;
94
94
  searchBy?: (keyword: string, label: any, item: T) => boolean;
@@ -113,8 +113,4 @@ export interface PickerDependentParameters {
113
113
  listRef?: React.RefObject<ListHandle>;
114
114
  inline?: boolean;
115
115
  }
116
- /**
117
- * A hook of the exposed method of Picker
118
- */
119
- export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
120
116
  export {};