rsuite 5.7.1 → 5.9.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 +26 -0
- package/Table/styles/index.less +2 -10
- package/cjs/Button/Button.d.ts +1 -1
- package/cjs/Cascader/Cascader.d.ts +12 -3
- package/cjs/Cascader/Cascader.js +17 -14
- package/cjs/Cascader/test/Cascader.test.d.ts +1 -0
- package/cjs/Cascader/test/Cascader.test.js +70 -0
- package/cjs/DateRangePicker/index.d.ts +1 -0
- package/cjs/Dropdown/Dropdown.d.ts +5 -2
- package/cjs/Dropdown/Dropdown.js +5 -1
- package/cjs/InputNumber/InputNumber.js +27 -34
- package/cjs/Menu/Menu.d.ts +10 -2
- package/cjs/Menu/Menu.js +18 -11
- package/cjs/Menu/MenuItem.js +1 -0
- package/cjs/Modal/Modal.d.ts +6 -2
- package/cjs/Modal/Modal.js +6 -2
- package/cjs/RangeSlider/RangeSlider.js +3 -1
- package/cjs/SelectPicker/SelectPicker.d.ts +1 -1
- package/cjs/SelectPicker/SelectPicker.js +2 -1
- package/cjs/Toggle/Toggle.js +7 -2
- package/dist/rsuite-rtl.css +4 -11
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +4 -11
- package/dist/rsuite.js +16 -16
- 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/Button/Button.d.ts +1 -1
- package/esm/Cascader/Cascader.d.ts +12 -3
- package/esm/Cascader/Cascader.js +17 -14
- package/esm/Cascader/test/Cascader.test.d.ts +1 -0
- package/esm/Cascader/test/Cascader.test.js +59 -0
- package/esm/DateRangePicker/index.d.ts +1 -0
- package/esm/Dropdown/Dropdown.d.ts +5 -2
- package/esm/Dropdown/Dropdown.js +5 -1
- package/esm/InputNumber/InputNumber.js +28 -35
- package/esm/Menu/Menu.d.ts +10 -2
- package/esm/Menu/Menu.js +18 -11
- package/esm/Menu/MenuItem.js +1 -0
- package/esm/Modal/Modal.d.ts +6 -2
- package/esm/Modal/Modal.js +5 -3
- package/esm/RangeSlider/RangeSlider.js +3 -1
- package/esm/SelectPicker/SelectPicker.d.ts +1 -1
- package/esm/SelectPicker/SelectPicker.js +2 -1
- package/esm/Toggle/Toggle.js +8 -3
- package/package.json +2 -2
package/esm/Button/Button.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export interface ButtonProps extends WithAsProps, React.HTMLAttributes<HTMLEleme
|
|
|
9
9
|
size?: TypeAttributes.Size;
|
|
10
10
|
/** A button can have different colors */
|
|
11
11
|
color?: TypeAttributes.Color;
|
|
12
|
-
/** Format button to appear inside a content
|
|
12
|
+
/** Format button to appear inside a content block */
|
|
13
13
|
block?: boolean;
|
|
14
14
|
/** Providing a `href` will render an `<a>` element, _styled_ as a button */
|
|
15
15
|
href?: string;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PickerLocale } from '../locales';
|
|
3
|
-
import {
|
|
3
|
+
import { PickerInstance } from '../Picker';
|
|
4
4
|
import { ItemDataType, FormControlPickerProps } from '../@types/common';
|
|
5
5
|
export declare type ValueType = number | string;
|
|
6
|
-
export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType
|
|
6
|
+
export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>> {
|
|
7
7
|
/** Sets the width of the menu */
|
|
8
8
|
menuWidth?: number;
|
|
9
9
|
/** Sets the height of the menu */
|
|
@@ -18,6 +18,8 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T |
|
|
|
18
18
|
renderMenu?: (items: ItemDataType[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
|
|
19
19
|
/** Custom render menu items */
|
|
20
20
|
renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
|
|
21
|
+
/** Custom render search items */
|
|
22
|
+
renderSearchItem?: (itemLabel: React.ReactNode, items: ItemDataType[]) => React.ReactNode;
|
|
21
23
|
/** Custom render selected items */
|
|
22
24
|
renderValue?: (value: T, selectedPaths: ItemDataType[], selectedElement: React.ReactNode) => React.ReactNode;
|
|
23
25
|
/** Called when the option is selected */
|
|
@@ -29,5 +31,12 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T |
|
|
|
29
31
|
/** Asynchronously load the children of the tree node. */
|
|
30
32
|
getChildren?: (node: ItemDataType) => ItemDataType[] | Promise<ItemDataType[]>;
|
|
31
33
|
}
|
|
32
|
-
|
|
34
|
+
export interface CascaderComponent {
|
|
35
|
+
<T>(props: CascaderProps<T> & {
|
|
36
|
+
ref?: React.Ref<PickerInstance>;
|
|
37
|
+
}): JSX.Element | null;
|
|
38
|
+
displayName?: string;
|
|
39
|
+
propTypes?: React.WeakValidationMap<CascaderProps<any>>;
|
|
40
|
+
}
|
|
41
|
+
declare const Cascader: CascaderComponent;
|
|
33
42
|
export default Cascader;
|
package/esm/Cascader/Cascader.js
CHANGED
|
@@ -51,6 +51,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
51
51
|
placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
|
|
52
52
|
id = props.id,
|
|
53
53
|
renderMenuItem = props.renderMenuItem,
|
|
54
|
+
renderSearchItem = props.renderSearchItem,
|
|
54
55
|
renderValue = props.renderValue,
|
|
55
56
|
renderMenu = props.renderMenu,
|
|
56
57
|
renderExtraFooter = props.renderExtraFooter,
|
|
@@ -63,7 +64,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
63
64
|
onClose = props.onClose,
|
|
64
65
|
onOpen = props.onOpen,
|
|
65
66
|
getChildren = props.getChildren,
|
|
66
|
-
rest = _objectWithoutPropertiesLoose(props, ["as", "data", "classPrefix", "childrenKey", "valueKey", "labelKey", "defaultValue", "placeholder", "disabled", "disabledItemValues", "appearance", "cleanable", "locale", "toggleAs", "style", "value", "inline", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "searchable", "parentSelectable", "placement", "id", "renderMenuItem", "renderValue", "renderMenu", "renderExtraFooter", "onEnter", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "getChildren"]); // Use component active state to support keyboard events.
|
|
67
|
+
rest = _objectWithoutPropertiesLoose(props, ["as", "data", "classPrefix", "childrenKey", "valueKey", "labelKey", "defaultValue", "placeholder", "disabled", "disabledItemValues", "appearance", "cleanable", "locale", "toggleAs", "style", "value", "inline", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "searchable", "parentSelectable", "placement", "id", "renderMenuItem", "renderSearchItem", "renderValue", "renderMenu", "renderExtraFooter", "onEnter", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "getChildren"]); // Use component active state to support keyboard events.
|
|
67
68
|
|
|
68
69
|
|
|
69
70
|
var _useState = useState(false),
|
|
@@ -79,9 +80,9 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
79
80
|
var targetRef = useRef(null);
|
|
80
81
|
var searchInputRef = useRef(null);
|
|
81
82
|
|
|
82
|
-
var
|
|
83
|
-
value =
|
|
84
|
-
setValue =
|
|
83
|
+
var _ref = useControlled(valueProp, defaultValue),
|
|
84
|
+
value = _ref[0],
|
|
85
|
+
setValue = _ref[1];
|
|
85
86
|
|
|
86
87
|
var _usePaths = usePaths({
|
|
87
88
|
data: data,
|
|
@@ -357,6 +358,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
357
358
|
'cascader-row-disabled': disabled,
|
|
358
359
|
'cascader-row-focus': item[valueKey] === focusItemValue
|
|
359
360
|
});
|
|
361
|
+
var label = formattedNodes.map(function (node, index) {
|
|
362
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
363
|
+
key: "col-" + index,
|
|
364
|
+
className: prefix('cascader-col')
|
|
365
|
+
}, node[labelKey]);
|
|
366
|
+
});
|
|
360
367
|
return /*#__PURE__*/React.createElement("div", {
|
|
361
368
|
key: key,
|
|
362
369
|
"aria-disabled": disabled,
|
|
@@ -367,12 +374,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
367
374
|
handleSearchRowSelect(item, nodes, event);
|
|
368
375
|
}
|
|
369
376
|
}
|
|
370
|
-
},
|
|
371
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
372
|
-
key: "col-" + index,
|
|
373
|
-
className: prefix('cascader-col')
|
|
374
|
-
}, node[labelKey]);
|
|
375
|
-
}));
|
|
377
|
+
}, renderSearchItem ? renderSearchItem(label, nodes) : label);
|
|
376
378
|
};
|
|
377
379
|
|
|
378
380
|
var renderSearchResultPanel = function renderSearchResultPanel() {
|
|
@@ -390,10 +392,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
390
392
|
};
|
|
391
393
|
|
|
392
394
|
var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
|
|
393
|
-
var
|
|
394
|
-
left =
|
|
395
|
-
top =
|
|
396
|
-
className =
|
|
395
|
+
var _ref2 = positionProps || {},
|
|
396
|
+
left = _ref2.left,
|
|
397
|
+
top = _ref2.top,
|
|
398
|
+
className = _ref2.className;
|
|
397
399
|
|
|
398
400
|
var styles = _extends({}, menuStyle, {
|
|
399
401
|
left: left,
|
|
@@ -510,6 +512,7 @@ Cascader.propTypes = _extends({}, listPickerPropTypes, {
|
|
|
510
512
|
onSearch: PropTypes.func,
|
|
511
513
|
cleanable: PropTypes.bool,
|
|
512
514
|
renderMenuItem: PropTypes.func,
|
|
515
|
+
renderSearchItem: PropTypes.func,
|
|
513
516
|
menuWidth: PropTypes.number,
|
|
514
517
|
menuHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
515
518
|
searchable: PropTypes.bool,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { expectType } from 'ts-expect';
|
|
3
|
+
import Cascader from '../Cascader'; // Infer value and onChange types from data
|
|
4
|
+
|
|
5
|
+
var numberValuedData = [{
|
|
6
|
+
label: 'One',
|
|
7
|
+
value: 1
|
|
8
|
+
}];
|
|
9
|
+
|
|
10
|
+
/*#__PURE__*/
|
|
11
|
+
React.createElement(Cascader, {
|
|
12
|
+
data: numberValuedData,
|
|
13
|
+
value: 1
|
|
14
|
+
}); // @ts-expect-error should not accept string value
|
|
15
|
+
|
|
16
|
+
/*#__PURE__*/
|
|
17
|
+
React.createElement(Cascader, {
|
|
18
|
+
data: numberValuedData,
|
|
19
|
+
value: "1"
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
/*#__PURE__*/
|
|
23
|
+
React.createElement(Cascader, {
|
|
24
|
+
data: numberValuedData,
|
|
25
|
+
onChange: function onChange(newValue) {
|
|
26
|
+
expectType(newValue);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
var stringValuedData = [{
|
|
30
|
+
label: 'One',
|
|
31
|
+
value: 'One'
|
|
32
|
+
}];
|
|
33
|
+
|
|
34
|
+
/*#__PURE__*/
|
|
35
|
+
React.createElement(Cascader, {
|
|
36
|
+
data: stringValuedData,
|
|
37
|
+
value: "1"
|
|
38
|
+
}); // @ts-expect-error should not accept number value
|
|
39
|
+
|
|
40
|
+
/*#__PURE__*/
|
|
41
|
+
React.createElement(Cascader, {
|
|
42
|
+
data: stringValuedData,
|
|
43
|
+
value: 1
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
/*#__PURE__*/
|
|
47
|
+
React.createElement(Cascader, {
|
|
48
|
+
data: stringValuedData,
|
|
49
|
+
onChange: function onChange(newValue) {
|
|
50
|
+
expectType(newValue);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
var pickerRef = /*#__PURE__*/React.createRef();
|
|
54
|
+
|
|
55
|
+
/*#__PURE__*/
|
|
56
|
+
React.createElement(Cascader, {
|
|
57
|
+
ref: pickerRef,
|
|
58
|
+
data: []
|
|
59
|
+
});
|
|
@@ -29,10 +29,13 @@ export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttr
|
|
|
29
29
|
/** No caret variation */
|
|
30
30
|
noCaret?: boolean;
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
33
|
-
* @deprecated
|
|
32
|
+
* Controlled open state
|
|
34
33
|
*/
|
|
35
34
|
open?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Whether dropdown is initially open
|
|
37
|
+
*/
|
|
38
|
+
defaultOpen?: boolean;
|
|
36
39
|
/**
|
|
37
40
|
* @deprecated
|
|
38
41
|
*/
|
package/esm/Dropdown/Dropdown.js
CHANGED
|
@@ -44,6 +44,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
44
44
|
placement = _rest$placement === void 0 ? 'bottomStart' : _rest$placement,
|
|
45
45
|
toggleAs = rest.toggleAs,
|
|
46
46
|
toggleClassName = rest.toggleClassName,
|
|
47
|
+
open = rest.open,
|
|
48
|
+
defaultOpen = rest.defaultOpen,
|
|
47
49
|
_rest$classPrefix = rest.classPrefix,
|
|
48
50
|
classPrefix = _rest$classPrefix === void 0 ? 'dropdown' : _rest$classPrefix,
|
|
49
51
|
className = rest.className,
|
|
@@ -51,7 +53,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
51
53
|
children = rest.children,
|
|
52
54
|
menuStyle = rest.menuStyle,
|
|
53
55
|
style = rest.style,
|
|
54
|
-
toggleProps = _objectWithoutPropertiesLoose(rest, ["as", "title", "onClose", "onOpen", "onToggle", "eventKey", "trigger", "placement", "toggleAs", "toggleClassName", "classPrefix", "className", "disabled", "children", "menuStyle", "style"]);
|
|
56
|
+
toggleProps = _objectWithoutPropertiesLoose(rest, ["as", "title", "onClose", "onOpen", "onToggle", "eventKey", "trigger", "placement", "toggleAs", "toggleClassName", "open", "defaultOpen", "classPrefix", "className", "disabled", "children", "menuStyle", "style"]);
|
|
55
57
|
|
|
56
58
|
var _useContext = useContext(NavContext),
|
|
57
59
|
onSelectFromNav = _useContext.onSelect;
|
|
@@ -192,6 +194,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
192
194
|
return /*#__PURE__*/React.createElement(DropdownContext.Provider, {
|
|
193
195
|
value: dropdownContextValue
|
|
194
196
|
}, /*#__PURE__*/React.createElement(Menu, {
|
|
197
|
+
open: open,
|
|
198
|
+
defaultOpen: defaultOpen,
|
|
195
199
|
menuButtonText: title,
|
|
196
200
|
renderMenuButton: renderMenuButton,
|
|
197
201
|
openMenuOn: menuButtonTriggers,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
import React, {
|
|
3
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import isNil from 'lodash/isNil';
|
|
6
6
|
import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
|
|
@@ -53,7 +53,7 @@ function decimals() {
|
|
|
53
53
|
*/
|
|
54
54
|
|
|
55
55
|
|
|
56
|
-
function
|
|
56
|
+
function valueReachesMax(value, max) {
|
|
57
57
|
if (!isNil(value)) {
|
|
58
58
|
return +value >= max;
|
|
59
59
|
}
|
|
@@ -67,7 +67,7 @@ function disableMaxValue(value, max) {
|
|
|
67
67
|
*/
|
|
68
68
|
|
|
69
69
|
|
|
70
|
-
function
|
|
70
|
+
function valueReachesMin(value, min) {
|
|
71
71
|
if (!isNil(value)) {
|
|
72
72
|
return +value <= min;
|
|
73
73
|
}
|
|
@@ -108,18 +108,6 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
108
108
|
value = _useControlled[0],
|
|
109
109
|
setValue = _useControlled[1];
|
|
110
110
|
|
|
111
|
-
var _useState = useState(function () {
|
|
112
|
-
return disableMaxValue(value, max);
|
|
113
|
-
}),
|
|
114
|
-
disabledUpButton = _useState[0],
|
|
115
|
-
setDisabledUpButton = _useState[1];
|
|
116
|
-
|
|
117
|
-
var _useState2 = useState(function () {
|
|
118
|
-
return disableMinValue(value, min);
|
|
119
|
-
}),
|
|
120
|
-
disabledDownButton = _useState2[0],
|
|
121
|
-
setDisabledDownButton = _useState2[1];
|
|
122
|
-
|
|
123
111
|
var _useClassNames = useClassNames(classPrefix),
|
|
124
112
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
125
113
|
merge = _useClassNames.merge,
|
|
@@ -134,14 +122,10 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
134
122
|
var inputRef = useRef();
|
|
135
123
|
var handleChangeValue = useCallback(function (currentValue, event) {
|
|
136
124
|
if (currentValue !== value) {
|
|
137
|
-
// Disable the up button when the value is greater than the maximum value.
|
|
138
|
-
setDisabledUpButton(disableMaxValue(currentValue, max)); // Disable the down button when the value is greater than the minimum value.
|
|
139
|
-
|
|
140
|
-
setDisabledDownButton(disableMinValue(currentValue, min));
|
|
141
125
|
setValue(currentValue);
|
|
142
126
|
onChange === null || onChange === void 0 ? void 0 : onChange(currentValue, event);
|
|
143
127
|
}
|
|
144
|
-
}, [
|
|
128
|
+
}, [onChange, setValue, value]);
|
|
145
129
|
var getSafeValue = useCallback(function (value) {
|
|
146
130
|
if (!Number.isNaN(value)) {
|
|
147
131
|
if (+value > max) {
|
|
@@ -156,27 +140,34 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
156
140
|
}
|
|
157
141
|
|
|
158
142
|
return value.toString();
|
|
159
|
-
}, [max, min]);
|
|
160
|
-
|
|
143
|
+
}, [max, min]); // Increment value by step
|
|
144
|
+
|
|
145
|
+
var handleStepUp = useCallback(function (event) {
|
|
161
146
|
var val = +(value || 0);
|
|
162
147
|
var bit = decimals(val, step);
|
|
163
148
|
handleChangeValue(getSafeValue((val + step).toFixed(bit)), event);
|
|
164
|
-
}, [getSafeValue, handleChangeValue, step, value]);
|
|
165
|
-
|
|
149
|
+
}, [getSafeValue, handleChangeValue, step, value]); // Decrement value by step
|
|
150
|
+
|
|
151
|
+
var handleStepDown = useCallback(function (event) {
|
|
166
152
|
var val = +(value || 0);
|
|
167
153
|
var bit = decimals(val, step);
|
|
168
154
|
handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
|
|
169
|
-
}, [getSafeValue, handleChangeValue, step, value]);
|
|
155
|
+
}, [getSafeValue, handleChangeValue, step, value]); // Disables step up/down button when
|
|
156
|
+
// - InputNumber is disabled/readonly
|
|
157
|
+
// - value reaches max/min limits
|
|
158
|
+
|
|
159
|
+
var stepUpDisabled = disabled || readOnly || valueReachesMax(value, max);
|
|
160
|
+
var stepDownDisabled = disabled || readOnly || valueReachesMin(value, min);
|
|
170
161
|
var handleKeyDown = useCallback(function (event) {
|
|
171
162
|
switch (event.key) {
|
|
172
163
|
case KEY_VALUES.UP:
|
|
173
164
|
event.preventDefault();
|
|
174
|
-
|
|
165
|
+
handleStepUp(event);
|
|
175
166
|
break;
|
|
176
167
|
|
|
177
168
|
case KEY_VALUES.DOWN:
|
|
178
169
|
event.preventDefault();
|
|
179
|
-
|
|
170
|
+
handleStepDown(event);
|
|
180
171
|
break;
|
|
181
172
|
|
|
182
173
|
case KEY_VALUES.HOME:
|
|
@@ -195,23 +186,23 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
195
186
|
|
|
196
187
|
break;
|
|
197
188
|
}
|
|
198
|
-
}, [
|
|
189
|
+
}, [handleStepUp, handleStepDown, minProp, maxProp, handleChangeValue, getSafeValue]);
|
|
199
190
|
var handleWheel = useCallback(function (event) {
|
|
200
191
|
if (!disabled && !readOnly && event.target === document.activeElement) {
|
|
201
192
|
event.preventDefault();
|
|
202
193
|
var delta = event['wheelDelta'] || -event.deltaY || -(event === null || event === void 0 ? void 0 : event.detail);
|
|
203
194
|
|
|
204
195
|
if (delta > 0) {
|
|
205
|
-
|
|
196
|
+
handleStepDown(event);
|
|
206
197
|
}
|
|
207
198
|
|
|
208
199
|
if (delta < 0) {
|
|
209
|
-
|
|
200
|
+
handleStepUp(event);
|
|
210
201
|
}
|
|
211
202
|
}
|
|
212
203
|
|
|
213
204
|
onWheel === null || onWheel === void 0 ? void 0 : onWheel(event);
|
|
214
|
-
}, [disabled,
|
|
205
|
+
}, [disabled, handleStepDown, handleStepUp, onWheel, readOnly]);
|
|
215
206
|
var handleChange = useCallback(function (value, event) {
|
|
216
207
|
if (!/^-?(?:\d+)?(\.)?\d*$/.test(value) && value !== '') {
|
|
217
208
|
return;
|
|
@@ -270,14 +261,16 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
270
261
|
tabIndex: -1,
|
|
271
262
|
appearance: buttonAppearance,
|
|
272
263
|
className: prefix('touchspin-up'),
|
|
273
|
-
onClick:
|
|
274
|
-
disabled:
|
|
264
|
+
onClick: handleStepUp,
|
|
265
|
+
disabled: stepUpDisabled,
|
|
266
|
+
"aria-label": "Increment"
|
|
275
267
|
}, /*#__PURE__*/React.createElement(AngleUpIcon, null)), /*#__PURE__*/React.createElement(Button, {
|
|
276
268
|
tabIndex: -1,
|
|
277
269
|
appearance: buttonAppearance,
|
|
278
270
|
className: prefix('touchspin-down'),
|
|
279
|
-
onClick:
|
|
280
|
-
disabled:
|
|
271
|
+
onClick: handleStepDown,
|
|
272
|
+
disabled: stepDownDisabled,
|
|
273
|
+
"aria-label": "Decrement"
|
|
281
274
|
}, /*#__PURE__*/React.createElement(AngleDownIcon, null))), postfix && /*#__PURE__*/React.createElement(InputGroupAddon, null, postfix));
|
|
282
275
|
});
|
|
283
276
|
InputNumber.displayName = 'InputNumber';
|
package/esm/Menu/Menu.d.ts
CHANGED
|
@@ -2,12 +2,20 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { MenuContextProps } from './MenuContext';
|
|
4
4
|
export interface MenuProps {
|
|
5
|
+
/**
|
|
6
|
+
* Whether dropdown is initially open
|
|
7
|
+
*/
|
|
8
|
+
defaultOpen?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Controlled open state
|
|
11
|
+
*/
|
|
12
|
+
open?: boolean;
|
|
5
13
|
disabled?: boolean;
|
|
6
14
|
children: (props: React.HTMLAttributes<HTMLDivElement> & MenuRenderProps, ref: React.Ref<HTMLDivElement>) => React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;
|
|
7
15
|
menuButtonText?: React.ReactNode;
|
|
8
16
|
renderMenuButton?: (props: React.ButtonHTMLAttributes<HTMLButtonElement> & MenuButtonRenderProps, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
9
17
|
renderMenuPopup?: (props: React.HTMLAttributes<HTMLUListElement> & MenuPopupRenderProps, ref: React.Ref<HTMLUListElement>) => React.ReactElement<React.HTMLAttributes<HTMLUListElement>>;
|
|
10
|
-
openMenuOn?: MenuButtonTrigger[];
|
|
18
|
+
openMenuOn?: readonly MenuButtonTrigger[];
|
|
11
19
|
onToggleMenu?: (open: boolean, event: React.SyntheticEvent) => void;
|
|
12
20
|
}
|
|
13
21
|
export declare type MenuButtonTrigger = 'mouseover' | 'click' | 'contextmenu';
|
|
@@ -26,7 +34,7 @@ export interface MenuHandle {
|
|
|
26
34
|
/**
|
|
27
35
|
* Headless ARIA `menu`
|
|
28
36
|
*/
|
|
29
|
-
declare function Menu(
|
|
37
|
+
declare function Menu({ disabled, children, openMenuOn, defaultOpen, open: openProp, menuButtonText, renderMenuButton, renderMenuPopup, onToggleMenu }: MenuProps & React.HTMLAttributes<HTMLUListElement>): React.ReactElement<React.HTMLAttributes<HTMLDivElement>, string | React.JSXElementConstructor<any>>;
|
|
30
38
|
declare namespace Menu {
|
|
31
39
|
var displayName: string;
|
|
32
40
|
var propTypes: {
|
package/esm/Menu/Menu.js
CHANGED
|
@@ -15,27 +15,34 @@ var defaultOpenMenuOn = ['click'];
|
|
|
15
15
|
* Headless ARIA `menu`
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
function Menu(
|
|
18
|
+
function Menu(_ref) {
|
|
19
19
|
var _items$activeItemInde;
|
|
20
20
|
|
|
21
|
-
var disabled =
|
|
22
|
-
children =
|
|
23
|
-
|
|
24
|
-
openMenuOn =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
var disabled = _ref.disabled,
|
|
22
|
+
children = _ref.children,
|
|
23
|
+
_ref$openMenuOn = _ref.openMenuOn,
|
|
24
|
+
openMenuOn = _ref$openMenuOn === void 0 ? defaultOpenMenuOn : _ref$openMenuOn,
|
|
25
|
+
_ref$defaultOpen = _ref.defaultOpen,
|
|
26
|
+
defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
|
|
27
|
+
openProp = _ref.open,
|
|
28
|
+
menuButtonText = _ref.menuButtonText,
|
|
29
|
+
renderMenuButton = _ref.renderMenuButton,
|
|
30
|
+
renderMenuPopup = _ref.renderMenuPopup,
|
|
31
|
+
onToggleMenu = _ref.onToggleMenu;
|
|
29
32
|
var buttonElementRef = useRef(null);
|
|
30
33
|
var menuElementRef = useRef(null);
|
|
31
34
|
var parentMenu = useContext(MenuContext);
|
|
32
35
|
var isSubmenu = !!parentMenu;
|
|
33
|
-
var menu = useMenu(
|
|
36
|
+
var menu = useMenu({
|
|
37
|
+
open: defaultOpen
|
|
38
|
+
});
|
|
34
39
|
var _menu$ = menu[0],
|
|
35
|
-
|
|
40
|
+
openState = _menu$.open,
|
|
36
41
|
items = _menu$.items,
|
|
37
42
|
activeItemIndex = _menu$.activeItemIndex,
|
|
38
43
|
dispatch = menu[1];
|
|
44
|
+
var openControlled = typeof openProp !== 'undefined';
|
|
45
|
+
var open = openControlled ? openProp : openState;
|
|
39
46
|
|
|
40
47
|
var _useCustom = useCustom('Menu'),
|
|
41
48
|
rtl = _useCustom.rtl;
|
package/esm/Menu/MenuItem.js
CHANGED
|
@@ -99,6 +99,7 @@ function MenuItem(props) {
|
|
|
99
99
|
if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menubar') {
|
|
100
100
|
menuitemProps.onMouseDown = handleMouseDown;
|
|
101
101
|
menuitemProps.onMouseOver = handleMouseMove;
|
|
102
|
+
menuitemProps.onMouseLeave = handleMouseLeave;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
105
|
return children(menuitemProps, menuitemRef);
|
package/esm/Modal/Modal.d.ts
CHANGED
|
@@ -6,9 +6,10 @@ import ModalHeader from './ModalHeader';
|
|
|
6
6
|
import ModalTitle from './ModalTitle';
|
|
7
7
|
import ModalFooter from './ModalFooter';
|
|
8
8
|
import { TypeAttributes, RsRefForwardingComponent } from '../@types/common';
|
|
9
|
+
export declare type ModalSize = TypeAttributes.Size | 'full';
|
|
9
10
|
export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HTMLElement>, 'role' | 'id' | 'aria-labelledby' | 'aria-describedby'> {
|
|
10
11
|
/** A modal can have different sizes */
|
|
11
|
-
size?:
|
|
12
|
+
size?: ModalSize;
|
|
12
13
|
/** Set the duration of the animation */
|
|
13
14
|
animationTimeout?: number;
|
|
14
15
|
/** Set an animation effect for Modal, the default is Bounce. */
|
|
@@ -17,7 +18,10 @@ export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HT
|
|
|
17
18
|
dialogClassName?: string;
|
|
18
19
|
/** CSS style applied to dialog DOM nodes */
|
|
19
20
|
dialogStyle?: React.CSSProperties;
|
|
20
|
-
/**
|
|
21
|
+
/**
|
|
22
|
+
* Full screen
|
|
23
|
+
* @deprecated Use size="full" instead.
|
|
24
|
+
*/
|
|
21
25
|
full?: boolean;
|
|
22
26
|
/** You can use a custom element type for Dialog */
|
|
23
27
|
dialogAs?: React.ElementType;
|
package/esm/Modal/Modal.js
CHANGED
|
@@ -11,7 +11,7 @@ import on from 'dom-lib/on';
|
|
|
11
11
|
import getAnimationEnd from 'dom-lib/getAnimationEnd';
|
|
12
12
|
import BaseModal, { modalPropTypes } from '../Overlay/Modal';
|
|
13
13
|
import Bounce from '../Animation/Bounce';
|
|
14
|
-
import { useClassNames, mergeRefs,
|
|
14
|
+
import { useClassNames, mergeRefs, useWillUnmount } from '../utils';
|
|
15
15
|
import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
|
|
16
16
|
import { ModalContext } from './ModalContext';
|
|
17
17
|
import ModalBody from './ModalBody';
|
|
@@ -20,6 +20,8 @@ import ModalTitle from './ModalTitle';
|
|
|
20
20
|
import ModalFooter from './ModalFooter';
|
|
21
21
|
import { useBodyStyles } from './utils';
|
|
22
22
|
import useUniqueId from '../utils/useUniqueId';
|
|
23
|
+
import deprecatePropType from '../utils/deprecatePropType';
|
|
24
|
+
var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
|
|
23
25
|
var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
24
26
|
var className = props.className,
|
|
25
27
|
children = props.children,
|
|
@@ -193,10 +195,10 @@ Modal.propTypes = _extends({}, modalPropTypes, {
|
|
|
193
195
|
animationTimeout: PropTypes.number,
|
|
194
196
|
classPrefix: PropTypes.string,
|
|
195
197
|
dialogClassName: PropTypes.string,
|
|
196
|
-
size: PropTypes.oneOf(
|
|
198
|
+
size: PropTypes.oneOf(modalSizes),
|
|
197
199
|
dialogStyle: PropTypes.object,
|
|
198
200
|
dialogAs: PropTypes.elementType,
|
|
199
|
-
full: PropTypes.bool,
|
|
201
|
+
full: deprecatePropType(PropTypes.bool, 'Use size="full" instead.'),
|
|
200
202
|
overflow: PropTypes.bool,
|
|
201
203
|
drawer: PropTypes.bool
|
|
202
204
|
});
|
|
@@ -255,7 +255,9 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
255
255
|
end = v;
|
|
256
256
|
}
|
|
257
257
|
|
|
258
|
-
var nextValue = getValidValue([start, end].sort()
|
|
258
|
+
var nextValue = getValidValue([start, end].sort(function (a, b) {
|
|
259
|
+
return a - b;
|
|
260
|
+
}));
|
|
259
261
|
|
|
260
262
|
if (isRangeMatchingConstraint(nextValue)) {
|
|
261
263
|
setValue(nextValue);
|
|
@@ -32,7 +32,7 @@ export interface SelectProps<T> {
|
|
|
32
32
|
/** Called after clicking the group title */
|
|
33
33
|
onGroupTitleClick?: (event: React.SyntheticEvent) => void;
|
|
34
34
|
/** Called when searching */
|
|
35
|
-
onSearch?: (searchKeyword: string, event
|
|
35
|
+
onSearch?: (searchKeyword: string, event?: React.SyntheticEvent) => void;
|
|
36
36
|
/** Called when clean */
|
|
37
37
|
onClean?: (event: React.SyntheticEvent) => void;
|
|
38
38
|
}
|
|
@@ -182,8 +182,9 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
182
182
|
var handleExited = useCallback(function () {
|
|
183
183
|
setSearchKeyword('');
|
|
184
184
|
setActive(false);
|
|
185
|
+
onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
|
|
185
186
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
186
|
-
}, [onClose, setSearchKeyword]);
|
|
187
|
+
}, [onClose, setSearchKeyword, onSearch]);
|
|
187
188
|
var handleEntered = useCallback(function () {
|
|
188
189
|
setActive(true);
|
|
189
190
|
setFocusItemValue(value);
|
package/esm/Toggle/Toggle.js
CHANGED
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import React, { useCallback, useRef } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import { useClassNames, useControlled, useCustom } from '../utils';
|
|
5
|
+
import { partitionHTMLProps, useClassNames, useControlled, useCustom } from '../utils';
|
|
6
6
|
import Plaintext from '../Plaintext';
|
|
7
7
|
import Loader from '../Loader';
|
|
8
8
|
var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -46,6 +46,11 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
46
46
|
}));
|
|
47
47
|
var inner = checked ? checkedChildren : unCheckedChildren;
|
|
48
48
|
var label = checked ? locale.on : locale.off;
|
|
49
|
+
|
|
50
|
+
var _partitionHTMLProps = partitionHTMLProps(rest),
|
|
51
|
+
htmlInputProps = _partitionHTMLProps[0],
|
|
52
|
+
restProps = _partitionHTMLProps[1];
|
|
53
|
+
|
|
49
54
|
var handleInputChange = useCallback(function (e) {
|
|
50
55
|
if (disabled || readOnly || loading) {
|
|
51
56
|
return;
|
|
@@ -63,7 +68,7 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
63
68
|
return /*#__PURE__*/React.createElement("label", _extends({
|
|
64
69
|
ref: ref,
|
|
65
70
|
className: classes
|
|
66
|
-
},
|
|
71
|
+
}, restProps), /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, {
|
|
67
72
|
ref: inputRef,
|
|
68
73
|
type: "checkbox",
|
|
69
74
|
checked: checkedProp,
|
|
@@ -77,7 +82,7 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
77
82
|
"aria-disabled": disabled,
|
|
78
83
|
"aria-label": typeof inner === 'string' ? inner : label,
|
|
79
84
|
"aria-busy": loading || undefined
|
|
80
|
-
}), /*#__PURE__*/React.createElement(Component, {
|
|
85
|
+
})), /*#__PURE__*/React.createElement(Component, {
|
|
81
86
|
className: prefix('presentation')
|
|
82
87
|
}, /*#__PURE__*/React.createElement("span", {
|
|
83
88
|
className: prefix('inner')
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rsuite",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.9.0",
|
|
4
4
|
"description": "A suite of react components",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"lodash": "^4.17.11",
|
|
38
38
|
"prop-types": "^15.7.2",
|
|
39
39
|
"react-virtualized": "^9.22.3",
|
|
40
|
-
"rsuite-table": "^5.
|
|
40
|
+
"rsuite-table": "^5.5.0",
|
|
41
41
|
"schema-typed": "^2.0.2"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|