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.
- package/CHANGELOG.md +27 -0
- package/Cascader/styles/index.less +5 -4
- package/DatePicker/styles/index.less +18 -11
- package/DateRangeInput/package.json +7 -0
- package/DateRangePicker/styles/index.less +20 -0
- package/Dropdown/styles/index.less +5 -4
- package/Dropdown/styles/mixin.less +0 -11
- package/InputGroup/styles/index.less +1 -0
- package/Picker/styles/index.less +51 -24
- package/Picker/styles/mixin.less +17 -13
- package/README.md +34 -24
- package/Sidenav/styles/index.less +2 -0
- package/TagInput/styles/index.less +1 -1
- package/cjs/AutoComplete/AutoComplete.js +25 -26
- package/cjs/Calendar/Calendar.d.ts +5 -1
- package/cjs/Calendar/CalendarContainer.d.ts +7 -1
- package/cjs/Calendar/CalendarContainer.js +11 -4
- package/cjs/Calendar/CalendarHeader.js +2 -0
- package/cjs/Calendar/MonthDropdown.js +7 -2
- package/cjs/Calendar/MonthDropdownItem.js +2 -2
- package/cjs/Calendar/Table.js +6 -1
- package/cjs/Calendar/TimeDropdown.js +17 -10
- package/cjs/Calendar/types.d.ts +1 -0
- package/cjs/Cascader/Cascader.js +46 -48
- package/cjs/CheckPicker/CheckPicker.d.ts +2 -2
- package/cjs/CheckPicker/CheckPicker.js +33 -36
- package/cjs/CheckTreePicker/CheckTreePicker.js +61 -64
- package/cjs/CustomProvider/CustomProvider.d.ts +13 -0
- package/cjs/CustomProvider/CustomProvider.js +2 -2
- package/cjs/DateInput/DateField.d.ts +9 -31
- package/cjs/DateInput/DateField.js +61 -12
- package/cjs/DateInput/DateInput.d.ts +7 -2
- package/cjs/DateInput/DateInput.js +74 -92
- package/cjs/DateInput/index.d.ts +4 -0
- package/cjs/DateInput/index.js +19 -1
- package/cjs/DateInput/useDateInputState.d.ts +7 -31
- package/cjs/DateInput/useDateInputState.js +39 -15
- package/cjs/DateInput/useIsFocused.d.ts +7 -0
- package/cjs/DateInput/useIsFocused.js +28 -0
- package/cjs/DateInput/useKeyboardInputEvent.d.ts +10 -0
- package/cjs/DateInput/useKeyboardInputEvent.js +44 -0
- package/cjs/DateInput/utils.d.ts +23 -1
- package/cjs/DateInput/utils.js +155 -51
- package/cjs/DatePicker/DatePicker.d.ts +25 -8
- package/cjs/DatePicker/DatePicker.js +208 -241
- package/cjs/DatePicker/Toolbar.js +5 -22
- package/cjs/DatePicker/utils.d.ts +5 -1
- package/cjs/DatePicker/utils.js +17 -1
- package/cjs/DateRangeInput/DateRangeInput.d.ts +29 -0
- package/cjs/DateRangeInput/DateRangeInput.js +244 -0
- package/cjs/DateRangeInput/index.d.ts +3 -0
- package/cjs/DateRangeInput/index.js +9 -0
- package/cjs/DateRangeInput/utils.d.ts +61 -0
- package/cjs/DateRangeInput/utils.js +146 -0
- package/cjs/DateRangePicker/Calendar.js +24 -23
- package/cjs/DateRangePicker/DateRangePicker.d.ts +18 -4
- package/cjs/DateRangePicker/DateRangePicker.js +251 -203
- package/cjs/DateRangePicker/types.d.ts +11 -3
- package/cjs/DateRangePicker/utils.d.ts +2 -1
- package/cjs/DateRangePicker/utils.js +7 -5
- package/cjs/FormControl/FormControl.d.ts +11 -1
- package/cjs/FormControl/FormControl.js +6 -5
- package/cjs/Input/Input.d.ts +11 -0
- package/cjs/Input/Input.js +11 -8
- package/cjs/InputPicker/InputPicker.js +62 -63
- package/cjs/MultiCascader/MultiCascader.js +40 -42
- package/cjs/Overlay/OverlayTrigger.d.ts +3 -0
- package/cjs/Overlay/OverlayTrigger.js +5 -0
- package/cjs/Picker/PickerIndicator.d.ts +10 -0
- package/cjs/Picker/PickerIndicator.js +49 -0
- package/cjs/Picker/PickerLabel.d.ts +9 -0
- package/cjs/Picker/PickerLabel.js +23 -0
- package/cjs/Picker/PickerToggle.d.ts +17 -22
- package/cjs/Picker/PickerToggle.js +52 -177
- package/cjs/Picker/index.d.ts +3 -0
- package/cjs/Picker/index.js +10 -1
- package/cjs/Picker/usePickerRef.d.ts +19 -0
- package/cjs/Picker/usePickerRef.js +88 -0
- package/cjs/Picker/utils.d.ts +5 -9
- package/cjs/Picker/utils.js +22 -89
- package/cjs/SelectPicker/SelectPicker.d.ts +2 -2
- package/cjs/SelectPicker/SelectPicker.js +39 -42
- package/cjs/TreePicker/TreePicker.js +72 -75
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +3 -1
- package/cjs/locales/index.d.ts +2 -2
- package/cjs/utils/constants.d.ts +2 -1
- package/cjs/utils/constants.js +1 -0
- package/cjs/utils/dateUtils.d.ts +0 -1
- package/cjs/utils/dateUtils.js +0 -6
- package/cjs/utils/getStringLength.d.ts +2 -0
- package/cjs/utils/getStringLength.js +18 -0
- package/cjs/utils/index.d.ts +3 -0
- package/cjs/utils/index.js +11 -2
- package/cjs/utils/useCustom.js +1 -1
- package/cjs/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/cjs/utils/useIsomorphicLayoutEffect.js +9 -0
- package/dist/rsuite-no-reset-rtl.css +140 -207
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
- package/dist/rsuite-no-reset.css +140 -207
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +140 -75
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +140 -75
- package/dist/rsuite.js +4833 -258
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.map +1 -1
- package/esm/AutoComplete/AutoComplete.js +28 -29
- package/esm/Calendar/Calendar.d.ts +5 -1
- package/esm/Calendar/CalendarContainer.d.ts +7 -1
- package/esm/Calendar/CalendarContainer.js +12 -5
- package/esm/Calendar/CalendarHeader.js +2 -0
- package/esm/Calendar/MonthDropdown.js +7 -2
- package/esm/Calendar/MonthDropdownItem.js +2 -2
- package/esm/Calendar/Table.js +6 -1
- package/esm/Calendar/TimeDropdown.js +17 -10
- package/esm/Calendar/types.d.ts +1 -0
- package/esm/Cascader/Cascader.js +49 -51
- package/esm/CheckPicker/CheckPicker.d.ts +2 -2
- package/esm/CheckPicker/CheckPicker.js +36 -39
- package/esm/CheckTreePicker/CheckTreePicker.js +64 -67
- package/esm/CustomProvider/CustomProvider.d.ts +13 -0
- package/esm/CustomProvider/CustomProvider.js +3 -3
- package/esm/DateInput/DateField.d.ts +9 -31
- package/esm/DateInput/DateField.js +61 -12
- package/esm/DateInput/DateInput.d.ts +7 -2
- package/esm/DateInput/DateInput.js +77 -95
- package/esm/DateInput/index.d.ts +4 -0
- package/esm/DateInput/index.js +4 -0
- package/esm/DateInput/useDateInputState.d.ts +7 -31
- package/esm/DateInput/useDateInputState.js +41 -18
- package/esm/DateInput/useIsFocused.d.ts +7 -0
- package/esm/DateInput/useIsFocused.js +22 -0
- package/esm/DateInput/useKeyboardInputEvent.d.ts +10 -0
- package/esm/DateInput/useKeyboardInputEvent.js +38 -0
- package/esm/DateInput/utils.d.ts +23 -1
- package/esm/DateInput/utils.js +150 -51
- package/esm/DatePicker/DatePicker.d.ts +25 -8
- package/esm/DatePicker/DatePicker.js +211 -244
- package/esm/DatePicker/Toolbar.js +5 -22
- package/esm/DatePicker/utils.d.ts +5 -1
- package/esm/DatePicker/utils.js +16 -1
- package/esm/DateRangeInput/DateRangeInput.d.ts +29 -0
- package/esm/DateRangeInput/DateRangeInput.js +237 -0
- package/esm/DateRangeInput/index.d.ts +3 -0
- package/esm/DateRangeInput/index.js +3 -0
- package/esm/DateRangeInput/utils.d.ts +61 -0
- package/esm/DateRangeInput/utils.js +137 -0
- package/esm/DateRangePicker/Calendar.js +25 -23
- package/esm/DateRangePicker/DateRangePicker.d.ts +18 -4
- package/esm/DateRangePicker/DateRangePicker.js +253 -205
- package/esm/DateRangePicker/types.d.ts +11 -3
- package/esm/DateRangePicker/utils.d.ts +2 -1
- package/esm/DateRangePicker/utils.js +7 -5
- package/esm/FormControl/FormControl.d.ts +11 -1
- package/esm/FormControl/FormControl.js +4 -3
- package/esm/Input/Input.d.ts +11 -0
- package/esm/Input/Input.js +12 -9
- package/esm/InputPicker/InputPicker.js +64 -65
- package/esm/MultiCascader/MultiCascader.js +43 -45
- package/esm/Overlay/OverlayTrigger.d.ts +3 -0
- package/esm/Overlay/OverlayTrigger.js +5 -0
- package/esm/Picker/PickerIndicator.d.ts +10 -0
- package/esm/Picker/PickerIndicator.js +43 -0
- package/esm/Picker/PickerLabel.d.ts +9 -0
- package/esm/Picker/PickerLabel.js +17 -0
- package/esm/Picker/PickerToggle.d.ts +17 -22
- package/esm/Picker/PickerToggle.js +54 -179
- package/esm/Picker/index.d.ts +3 -0
- package/esm/Picker/index.js +3 -0
- package/esm/Picker/usePickerRef.d.ts +19 -0
- package/esm/Picker/usePickerRef.js +82 -0
- package/esm/Picker/utils.d.ts +5 -9
- package/esm/Picker/utils.js +24 -90
- package/esm/SelectPicker/SelectPicker.d.ts +2 -2
- package/esm/SelectPicker/SelectPicker.js +42 -45
- package/esm/TreePicker/TreePicker.js +75 -78
- package/esm/index.d.ts +2 -0
- package/esm/index.js +1 -0
- package/esm/locales/index.d.ts +2 -2
- package/esm/utils/constants.d.ts +2 -1
- package/esm/utils/constants.js +1 -0
- package/esm/utils/dateUtils.d.ts +0 -1
- package/esm/utils/dateUtils.js +0 -5
- package/esm/utils/getStringLength.d.ts +2 -0
- package/esm/utils/getStringLength.js +13 -0
- package/esm/utils/index.d.ts +3 -0
- package/esm/utils/index.js +4 -1
- package/esm/utils/useCustom.js +2 -2
- package/esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/esm/utils/useIsomorphicLayoutEffect.js +4 -0
- package/package.json +1 -1
- package/styles/color-modes/dark.less +1 -0
- package/styles/color-modes/high-contrast.less +1 -0
- package/styles/color-modes/light.less +1 -0
- package/styles/mixins/combobox.less +10 -0
- 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
|
|
24
|
-
var
|
|
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
|
|
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
|
-
|
|
36
|
+
cleanable = props.cleanable,
|
|
43
37
|
_props$tabIndex = props.tabIndex,
|
|
44
|
-
|
|
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", "
|
|
67
|
-
var
|
|
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
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
|
|
61
|
+
return '';
|
|
62
|
+
}, [inputValueProp]);
|
|
90
63
|
var classes = merge(className, withClassPrefix({
|
|
91
|
-
active:
|
|
64
|
+
active: active
|
|
92
65
|
}));
|
|
93
|
-
var
|
|
94
|
-
|
|
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
|
-
|
|
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 =
|
|
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":
|
|
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)(
|
|
88
|
+
ref: (0, _utils.mergeRefs)(combobox, ref),
|
|
183
89
|
disabled: disabled,
|
|
184
|
-
tabIndex: tabIndex,
|
|
185
|
-
className: classes
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
,
|
|
189
|
-
|
|
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
|
-
},
|
|
198
|
-
|
|
199
|
-
|
|
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
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
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)
|
|
227
|
-
className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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;
|
package/cjs/Picker/index.d.ts
CHANGED
|
@@ -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';
|
package/cjs/Picker/index.js
CHANGED
|
@@ -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;
|
package/cjs/Picker/utils.d.ts
CHANGED
|
@@ -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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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) => (
|
|
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 {};
|