rsuite 5.8.1 → 5.11.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/ButtonToolbar/styles/index.less +1 -1
- package/CHANGELOG.md +24 -0
- package/README.md +4 -0
- package/Table/styles/index.less +2 -10
- package/cjs/Button/Button.d.ts +1 -1
- package/cjs/DateRangePicker/DateRangePicker.d.ts +2 -0
- package/cjs/DateRangePicker/DateRangePicker.js +4 -2
- package/cjs/Dropdown/Dropdown.d.ts +5 -2
- package/cjs/Dropdown/Dropdown.js +5 -1
- package/cjs/Form/Form.d.ts +1 -1
- package/cjs/Form/Form.js +15 -5
- package/cjs/Form/FormContext.d.ts +2 -0
- package/cjs/FormControl/FormControl.d.ts +2 -0
- package/cjs/FormControl/FormControl.js +11 -1
- package/cjs/Menu/Menu.d.ts +10 -2
- package/cjs/Menu/Menu.js +18 -11
- package/cjs/Menu/Menubar.js +10 -3
- package/cjs/Modal/Modal.d.ts +6 -2
- package/cjs/Modal/Modal.js +6 -2
- package/cjs/utils/dom.d.ts +1 -1
- package/dist/rsuite-rtl.css +5 -12
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +5 -12
- package/dist/rsuite.js +14 -14
- 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/DateRangePicker/DateRangePicker.d.ts +2 -0
- package/esm/DateRangePicker/DateRangePicker.js +4 -2
- package/esm/Dropdown/Dropdown.d.ts +5 -2
- package/esm/Dropdown/Dropdown.js +5 -1
- package/esm/Form/Form.d.ts +1 -1
- package/esm/Form/Form.js +15 -5
- package/esm/Form/FormContext.d.ts +2 -0
- package/esm/FormControl/FormControl.d.ts +2 -0
- package/esm/FormControl/FormControl.js +12 -1
- package/esm/Menu/Menu.d.ts +10 -2
- package/esm/Menu/Menu.js +18 -11
- package/esm/Menu/Menubar.js +9 -3
- package/esm/Modal/Modal.d.ts +6 -2
- package/esm/Modal/Modal.js +5 -3
- package/esm/utils/dom.d.ts +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# [5.11.0](https://github.com/rsuite/rsuite/compare/v5.10.0...v5.11.0) (2022-05-05)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- **ButtonToolbar:** change item gap to 10px ([#2475](https://github.com/rsuite/rsuite/issues/2475)) ([d97810a](https://github.com/rsuite/rsuite/commit/d97810ab4cd401b27be929569ce85bff0f498498))
|
|
6
|
+
- **Dropdown.Menu:** fix expected highlight item when focus moving in ([#2477](https://github.com/rsuite/rsuite/issues/2477)) ([b9fdea5](https://github.com/rsuite/rsuite/commit/b9fdea5d57ce76ddc80f5e9776feab02e4ebfacd))
|
|
7
|
+
- **Menubar:** fix unhandled nullish value ([#2478](https://github.com/rsuite/rsuite/issues/2478)) ([10d515d](https://github.com/rsuite/rsuite/commit/10d515d06dd08f2b93e5d7dbd3be7b1114185cab))
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
- **DateRangePicker:** expose calendars renderTitle ([#2480](https://github.com/rsuite/rsuite/issues/2480)) ([4461e09](https://github.com/rsuite/rsuite/commit/4461e09ec3917f379b5df213db16cedade6f39e1))
|
|
12
|
+
|
|
13
|
+
# [5.10.0](https://github.com/rsuite/rsuite/compare/v5.9.0...v5.10.0) (2022-04-28)
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
- **FormControl:** support `shouldResetWithUnmount` on `<FormControl>` ([#2468](https://github.com/rsuite/rsuite/issues/2468)) ([69dee5e](https://github.com/rsuite/rsuite/commit/69dee5ece1c20bdc1e1f42429e93150afb7995d8))
|
|
18
|
+
|
|
19
|
+
# [5.9.0](https://github.com/rsuite/rsuite/compare/v5.8.1...v5.9.0) (2022-04-21)
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
- **Dropdown:** add `open` and `defaultOpen` props ([#2442](https://github.com/rsuite/rsuite/issues/2442)) ([ab13d63](https://github.com/rsuite/rsuite/commit/ab13d6368676c19f8a4fb041e84a423b1a810914))
|
|
24
|
+
|
|
1
25
|
## [5.8.1](https://github.com/rsuite/rsuite/compare/v5.8.0...v5.8.1) (2022-04-15)
|
|
2
26
|
|
|
3
27
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -99,6 +99,10 @@ You can go through [full documentation][rsuite-doc-guide] or start with followin
|
|
|
99
99
|
- [Use in Vite][demo-vite]
|
|
100
100
|
</details>
|
|
101
101
|
|
|
102
|
+
<a href="https://vercel.com?utm_source=rsuite&utm_campaign=oss" target="_blank">
|
|
103
|
+
<img src="https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg" alt="Vercel banner" />
|
|
104
|
+
</a>
|
|
105
|
+
|
|
102
106
|
## Previous major versions
|
|
103
107
|
|
|
104
108
|
The previous major version 4.x will no longer receive new features,
|
package/Table/styles/index.less
CHANGED
|
@@ -22,17 +22,12 @@
|
|
|
22
22
|
height: 36px;
|
|
23
23
|
width: 100%;
|
|
24
24
|
top: 0;
|
|
25
|
-
border-bottom: 1px solid var(--rs-border-secondary);
|
|
26
25
|
|
|
27
26
|
&.virtualized {
|
|
28
27
|
.pointer-event-none();
|
|
29
28
|
}
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
&-row-rowspan + &-row {
|
|
33
|
-
border-top: 1px solid var(--rs-border-secondary);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
31
|
&-row-expanded {
|
|
37
32
|
position: absolute;
|
|
38
33
|
height: 46px;
|
|
@@ -167,14 +162,12 @@
|
|
|
167
162
|
|
|
168
163
|
&-cell {
|
|
169
164
|
height: 36px;
|
|
170
|
-
border-style: solid;
|
|
171
|
-
border-width: 0;
|
|
172
|
-
border-color: var(--rs-border-secondary);
|
|
173
165
|
display: block;
|
|
174
166
|
overflow: hidden;
|
|
175
167
|
position: absolute;
|
|
176
168
|
white-space: normal;
|
|
177
169
|
background-color: var(--rs-bg-card);
|
|
170
|
+
border-bottom: 1px solid var(--rs-border-secondary);
|
|
178
171
|
|
|
179
172
|
&.first {
|
|
180
173
|
border-left-width: 0;
|
|
@@ -195,7 +188,6 @@
|
|
|
195
188
|
|
|
196
189
|
&-content {
|
|
197
190
|
padding: @table-cell-padding-y @table-cell-padding-x;
|
|
198
|
-
|
|
199
191
|
.ellipsis();
|
|
200
192
|
}
|
|
201
193
|
|
|
@@ -318,7 +310,7 @@
|
|
|
318
310
|
}
|
|
319
311
|
|
|
320
312
|
&-cell-bordered &-cell {
|
|
321
|
-
border-
|
|
313
|
+
border-right: 1px solid var(--rs-border-secondary);
|
|
322
314
|
}
|
|
323
315
|
|
|
324
316
|
&-column-group {
|
package/cjs/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;
|
|
@@ -35,6 +35,8 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
|
|
|
35
35
|
onClean?: (event: React.MouseEvent) => void;
|
|
36
36
|
/** Custom render value */
|
|
37
37
|
renderValue?: (value: DateRange, format: string) => React.ReactNode;
|
|
38
|
+
/** Custom render for calendar title */
|
|
39
|
+
renderTitle?: (date: Date) => React.ReactNode;
|
|
38
40
|
}
|
|
39
41
|
export interface DateRangePicker extends PickerComponent<DateRangePickerProps> {
|
|
40
42
|
/** Allow the maximum number of days specified, other dates are disabled */
|
|
@@ -93,7 +93,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
93
93
|
onOk = props.onOk,
|
|
94
94
|
onOpen = props.onOpen,
|
|
95
95
|
onSelect = props.onSelect,
|
|
96
|
-
|
|
96
|
+
renderTitle = props.renderTitle,
|
|
97
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
|
|
97
98
|
|
|
98
99
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
99
100
|
merge = _useClassNames.merge,
|
|
@@ -561,7 +562,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
561
562
|
onChangeCalendarTime: handleChangeCalendarTime,
|
|
562
563
|
onMouseMove: handleMouseMove,
|
|
563
564
|
onSelect: handleSelectDate,
|
|
564
|
-
onToggleMeridian: handleToggleMeridian
|
|
565
|
+
onToggleMeridian: handleToggleMeridian,
|
|
566
|
+
renderTitle: renderTitle
|
|
565
567
|
};
|
|
566
568
|
return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
|
|
567
569
|
className: classes,
|
|
@@ -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/cjs/Dropdown/Dropdown.js
CHANGED
|
@@ -73,6 +73,8 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
73
73
|
placement = _rest$placement === void 0 ? 'bottomStart' : _rest$placement,
|
|
74
74
|
toggleAs = rest.toggleAs,
|
|
75
75
|
toggleClassName = rest.toggleClassName,
|
|
76
|
+
open = rest.open,
|
|
77
|
+
defaultOpen = rest.defaultOpen,
|
|
76
78
|
_rest$classPrefix = rest.classPrefix,
|
|
77
79
|
classPrefix = _rest$classPrefix === void 0 ? 'dropdown' : _rest$classPrefix,
|
|
78
80
|
className = rest.className,
|
|
@@ -80,7 +82,7 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
80
82
|
children = rest.children,
|
|
81
83
|
menuStyle = rest.menuStyle,
|
|
82
84
|
style = rest.style,
|
|
83
|
-
toggleProps = (0, _objectWithoutPropertiesLoose2.default)(rest, ["as", "title", "onClose", "onOpen", "onToggle", "eventKey", "trigger", "placement", "toggleAs", "toggleClassName", "classPrefix", "className", "disabled", "children", "menuStyle", "style"]);
|
|
85
|
+
toggleProps = (0, _objectWithoutPropertiesLoose2.default)(rest, ["as", "title", "onClose", "onOpen", "onToggle", "eventKey", "trigger", "placement", "toggleAs", "toggleClassName", "open", "defaultOpen", "classPrefix", "className", "disabled", "children", "menuStyle", "style"]);
|
|
84
86
|
|
|
85
87
|
var _useContext = (0, _react.useContext)(_NavContext.default),
|
|
86
88
|
onSelectFromNav = _useContext.onSelect;
|
|
@@ -220,6 +222,8 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
220
222
|
return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
|
|
221
223
|
value: dropdownContextValue
|
|
222
224
|
}, /*#__PURE__*/_react.default.createElement(_Menu.default, {
|
|
225
|
+
open: open,
|
|
226
|
+
defaultOpen: defaultOpen,
|
|
223
227
|
menuButtonText: title,
|
|
224
228
|
renderMenuButton: renderMenuButton,
|
|
225
229
|
openMenuOn: menuButtonTriggers,
|
package/cjs/Form/Form.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
|
|
|
33
33
|
/** The error message comes from context */
|
|
34
34
|
errorFromContext?: boolean;
|
|
35
35
|
/** Callback fired when data changing */
|
|
36
|
-
onChange?: (formValue: T, event
|
|
36
|
+
onChange?: (formValue: T, event?: React.SyntheticEvent) => void;
|
|
37
37
|
/** Callback fired when error checking */
|
|
38
38
|
onError?: (formError: E) => void;
|
|
39
39
|
/** Callback fired when data cheking */
|
package/cjs/Form/Form.js
CHANGED
|
@@ -218,6 +218,16 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
218
218
|
resetErrors: resetErrors
|
|
219
219
|
};
|
|
220
220
|
});
|
|
221
|
+
var removeFieldError = (0, _react.useCallback)(function (name) {
|
|
222
|
+
var formError = (0, _omit.default)(getFormError(), [name]);
|
|
223
|
+
setFormError(formError);
|
|
224
|
+
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
225
|
+
}, [getFormError, onCheck]);
|
|
226
|
+
var removeFieldValue = (0, _react.useCallback)(function (name) {
|
|
227
|
+
var formValue = (0, _omit.default)(getFormValue(), [name]);
|
|
228
|
+
setFormValue(formValue);
|
|
229
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
|
|
230
|
+
}, [getFormValue, onChange]);
|
|
221
231
|
var handleSubmit = (0, _react.useCallback)(function (event) {
|
|
222
232
|
if (disabled || readOnly || plaintext) {
|
|
223
233
|
return;
|
|
@@ -237,10 +247,8 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
237
247
|
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
238
248
|
}, [onError, onCheck, getFormError]);
|
|
239
249
|
var handleFieldSuccess = (0, _react.useCallback)(function (name) {
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
243
|
-
}, [onCheck, getFormError]);
|
|
250
|
+
removeFieldError(name);
|
|
251
|
+
}, [removeFieldError]);
|
|
244
252
|
var handleFieldChange = (0, _react.useCallback)(function (name, value, event) {
|
|
245
253
|
var _extends5;
|
|
246
254
|
|
|
@@ -260,11 +268,13 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
260
268
|
plaintext: plaintext,
|
|
261
269
|
disabled: disabled,
|
|
262
270
|
formError: getFormError(),
|
|
271
|
+
removeFieldValue: removeFieldValue,
|
|
272
|
+
removeFieldError: removeFieldError,
|
|
263
273
|
onFieldChange: handleFieldChange,
|
|
264
274
|
onFieldError: handleFieldError,
|
|
265
275
|
onFieldSuccess: handleFieldSuccess
|
|
266
276
|
};
|
|
267
|
-
}, [model, checkTrigger, formDefaultValue, errorFromContext, readOnly, plaintext, disabled, getFormError, handleFieldChange, handleFieldError, handleFieldSuccess]);
|
|
277
|
+
}, [model, checkTrigger, formDefaultValue, errorFromContext, readOnly, plaintext, disabled, getFormError, removeFieldValue, removeFieldError, handleFieldChange, handleFieldError, handleFieldSuccess]);
|
|
268
278
|
return /*#__PURE__*/_react.default.createElement("form", (0, _extends6.default)({}, rest, {
|
|
269
279
|
ref: rootRef,
|
|
270
280
|
onSubmit: handleSubmit,
|
|
@@ -12,6 +12,8 @@ export interface FormContextValue<T = Record<string, any>, errorMsgType = any, E
|
|
|
12
12
|
plaintext?: boolean;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
formError?: E;
|
|
15
|
+
removeFieldValue?: (name: string) => void;
|
|
16
|
+
removeFieldError?: (name: string) => void;
|
|
15
17
|
onFieldChange?: (name: string, value: any, event: React.SyntheticEvent) => void;
|
|
16
18
|
onFieldError?: (name: string, errorMessage: string) => void;
|
|
17
19
|
onFieldSuccess?: (name: string) => void;
|
|
@@ -28,6 +28,8 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
|
|
|
28
28
|
disabled?: boolean;
|
|
29
29
|
/** Asynchronous check value */
|
|
30
30
|
checkAsync?: boolean;
|
|
31
|
+
/** Remove field value and error message when component is unmounted */
|
|
32
|
+
shouldResetWithUnmount?: boolean;
|
|
31
33
|
}
|
|
32
34
|
interface FormControlComponent extends React.FC<FormControlProps> {
|
|
33
35
|
<Accepter extends React.ElementType = typeof Input>(props: FormControlProps & {
|
|
@@ -40,6 +40,8 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
40
40
|
_useContext$formDefau = _useContext.formDefaultValue,
|
|
41
41
|
formDefaultValue = _useContext$formDefau === void 0 ? {} : _useContext$formDefau,
|
|
42
42
|
formError = _useContext.formError,
|
|
43
|
+
removeFieldValue = _useContext.removeFieldValue,
|
|
44
|
+
removeFieldError = _useContext.removeFieldError,
|
|
43
45
|
onFieldChange = _useContext.onFieldChange,
|
|
44
46
|
onFieldError = _useContext.onFieldError,
|
|
45
47
|
onFieldSuccess = _useContext.onFieldSuccess,
|
|
@@ -69,7 +71,9 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
69
71
|
onChange = props.onChange,
|
|
70
72
|
onBlur = props.onBlur,
|
|
71
73
|
defaultValue = props.defaultValue,
|
|
72
|
-
|
|
74
|
+
_props$shouldResetWit = props.shouldResetWithUnmount,
|
|
75
|
+
shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,
|
|
76
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "className", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount"]);
|
|
73
77
|
|
|
74
78
|
var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),
|
|
75
79
|
controlId = _useContext2.controlId;
|
|
@@ -78,6 +82,12 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
78
82
|
throw new Error("\n <FormControl> must be inside a component decorated with <Form>.\n And need to update React to 16.6.0 +.\n ");
|
|
79
83
|
}
|
|
80
84
|
|
|
85
|
+
(0, _utils.useWillUnmount)(function () {
|
|
86
|
+
if (shouldResetWithUnmount) {
|
|
87
|
+
removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);
|
|
88
|
+
removeFieldError === null || removeFieldError === void 0 ? void 0 : removeFieldError(name);
|
|
89
|
+
}
|
|
90
|
+
});
|
|
81
91
|
var trigger = checkTrigger || contextCheckTrigger;
|
|
82
92
|
var formValue = (0, _react.useContext)(_FormContext.FormValueContext);
|
|
83
93
|
var val = (0, _isUndefined.default)(value) ? formValue === null || formValue === void 0 ? void 0 : formValue[name] : value;
|
package/cjs/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/cjs/Menu/Menu.js
CHANGED
|
@@ -36,27 +36,34 @@ var defaultOpenMenuOn = ['click'];
|
|
|
36
36
|
* Headless ARIA `menu`
|
|
37
37
|
*/
|
|
38
38
|
|
|
39
|
-
function Menu(
|
|
39
|
+
function Menu(_ref) {
|
|
40
40
|
var _items$activeItemInde;
|
|
41
41
|
|
|
42
|
-
var disabled =
|
|
43
|
-
children =
|
|
44
|
-
|
|
45
|
-
openMenuOn =
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
42
|
+
var disabled = _ref.disabled,
|
|
43
|
+
children = _ref.children,
|
|
44
|
+
_ref$openMenuOn = _ref.openMenuOn,
|
|
45
|
+
openMenuOn = _ref$openMenuOn === void 0 ? defaultOpenMenuOn : _ref$openMenuOn,
|
|
46
|
+
_ref$defaultOpen = _ref.defaultOpen,
|
|
47
|
+
defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
|
|
48
|
+
openProp = _ref.open,
|
|
49
|
+
menuButtonText = _ref.menuButtonText,
|
|
50
|
+
renderMenuButton = _ref.renderMenuButton,
|
|
51
|
+
renderMenuPopup = _ref.renderMenuPopup,
|
|
52
|
+
onToggleMenu = _ref.onToggleMenu;
|
|
50
53
|
var buttonElementRef = (0, _react.useRef)(null);
|
|
51
54
|
var menuElementRef = (0, _react.useRef)(null);
|
|
52
55
|
var parentMenu = (0, _react.useContext)(_MenuContext.default);
|
|
53
56
|
var isSubmenu = !!parentMenu;
|
|
54
|
-
var menu = (0, _useMenu.default)(
|
|
57
|
+
var menu = (0, _useMenu.default)({
|
|
58
|
+
open: defaultOpen
|
|
59
|
+
});
|
|
55
60
|
var _menu$ = menu[0],
|
|
56
|
-
|
|
61
|
+
openState = _menu$.open,
|
|
57
62
|
items = _menu$.items,
|
|
58
63
|
activeItemIndex = _menu$.activeItemIndex,
|
|
59
64
|
dispatch = menu[1];
|
|
65
|
+
var openControlled = typeof openProp !== 'undefined';
|
|
66
|
+
var open = openControlled ? openProp : openState;
|
|
60
67
|
|
|
61
68
|
var _useCustom = (0, _utils.useCustom)('Menu'),
|
|
62
69
|
rtl = _useCustom.rtl;
|
package/cjs/Menu/Menubar.js
CHANGED
|
@@ -19,8 +19,12 @@ var _events = require("../utils/events");
|
|
|
19
19
|
|
|
20
20
|
var _useMenu = _interopRequireDefault(require("./useMenu"));
|
|
21
21
|
|
|
22
|
+
var _dom = require("../utils/dom");
|
|
23
|
+
|
|
22
24
|
// Headless ARIA `menubar`
|
|
23
25
|
function Menubar(_ref) {
|
|
26
|
+
var _items$activeItemInde3;
|
|
27
|
+
|
|
24
28
|
var _ref$vertical = _ref.vertical,
|
|
25
29
|
vertical = _ref$vertical === void 0 ? false : _ref$vertical,
|
|
26
30
|
children = _ref.children,
|
|
@@ -35,7 +39,8 @@ function Menubar(_ref) {
|
|
|
35
39
|
var menubarElementRef = (0, _react.useRef)(null);
|
|
36
40
|
var onFocus = (0, _react.useCallback)(function (event) {
|
|
37
41
|
// Focus moves inside Menubar
|
|
38
|
-
if ((0, _events.isFocusEntering)(event)
|
|
42
|
+
if ((0, _events.isFocusEntering)(event) && // Skip if focus is moving to a focusable element within this menu
|
|
43
|
+
!(event.target !== event.currentTarget && (0, _dom.isFocusableElement)(event.target))) {
|
|
39
44
|
if (activeItemIndex === null) {
|
|
40
45
|
dispatch({
|
|
41
46
|
type: _MenuContext.MenuActionTypes.MoveFocus,
|
|
@@ -58,7 +63,9 @@ function Menubar(_ref) {
|
|
|
58
63
|
rtl = _useCustom.rtl;
|
|
59
64
|
|
|
60
65
|
var onKeyDown = (0, _react.useCallback)(function (event) {
|
|
61
|
-
var
|
|
66
|
+
var _items$activeItemInde, _items$activeItemInde2;
|
|
67
|
+
|
|
68
|
+
var activeItemElement = (0, _isNil.default)(activeItemIndex) ? null : (_items$activeItemInde = (_items$activeItemInde2 = items[activeItemIndex]) === null || _items$activeItemInde2 === void 0 ? void 0 : _items$activeItemInde2.element) !== null && _items$activeItemInde !== void 0 ? _items$activeItemInde : null;
|
|
62
69
|
|
|
63
70
|
switch (true) {
|
|
64
71
|
case !vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:
|
|
@@ -138,7 +145,7 @@ function Menubar(_ref) {
|
|
|
138
145
|
onBlur: onBlur,
|
|
139
146
|
onKeyDown: onKeyDown,
|
|
140
147
|
onClick: onClick,
|
|
141
|
-
'aria-activedescendant': (0, _isNil.default)(activeItemIndex) ? undefined : items[activeItemIndex].element.id,
|
|
148
|
+
'aria-activedescendant': (0, _isNil.default)(activeItemIndex) ? undefined : (_items$activeItemInde3 = items[activeItemIndex]) === null || _items$activeItemInde3 === void 0 ? void 0 : _items$activeItemInde3.element.id,
|
|
142
149
|
'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'
|
|
143
150
|
|
|
144
151
|
}, menubarElementRef));
|
package/cjs/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/cjs/Modal/Modal.js
CHANGED
|
@@ -45,8 +45,12 @@ var _utils2 = require("./utils");
|
|
|
45
45
|
|
|
46
46
|
var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
|
|
47
47
|
|
|
48
|
+
var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
|
|
49
|
+
|
|
48
50
|
var _templateObject, _templateObject2;
|
|
49
51
|
|
|
52
|
+
var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
|
|
53
|
+
|
|
50
54
|
var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
51
55
|
var className = props.className,
|
|
52
56
|
children = props.children,
|
|
@@ -219,10 +223,10 @@ Modal.propTypes = (0, _extends2.default)({}, _Modal.modalPropTypes, {
|
|
|
219
223
|
animationTimeout: _propTypes.default.number,
|
|
220
224
|
classPrefix: _propTypes.default.string,
|
|
221
225
|
dialogClassName: _propTypes.default.string,
|
|
222
|
-
size: _propTypes.default.oneOf(
|
|
226
|
+
size: _propTypes.default.oneOf(modalSizes),
|
|
223
227
|
dialogStyle: _propTypes.default.object,
|
|
224
228
|
dialogAs: _propTypes.default.elementType,
|
|
225
|
-
full: _propTypes.default.bool,
|
|
229
|
+
full: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use size="full" instead.'),
|
|
226
230
|
overflow: _propTypes.default.bool,
|
|
227
231
|
drawer: _propTypes.default.bool
|
|
228
232
|
});
|
package/cjs/utils/dom.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function isFocusableElement(element:
|
|
1
|
+
export declare function isFocusableElement(element: Element): boolean;
|
package/dist/rsuite-rtl.css
CHANGED
|
@@ -2782,7 +2782,7 @@ tbody.rs-anim-collapse.rs-anim-in {
|
|
|
2782
2782
|
line-height: 0;
|
|
2783
2783
|
}
|
|
2784
2784
|
.rs-btn-toolbar > :not(:first-child):not(.rs-btn-block) {
|
|
2785
|
-
margin-right:
|
|
2785
|
+
margin-right: 10px;
|
|
2786
2786
|
}
|
|
2787
2787
|
.rs-picker-subtle .picker-subtle-toggle {
|
|
2788
2788
|
position: relative;
|
|
@@ -13565,8 +13565,6 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
13565
13565
|
height: 36px;
|
|
13566
13566
|
width: 100%;
|
|
13567
13567
|
top: 0;
|
|
13568
|
-
border-bottom: 1px solid #f2f2f5;
|
|
13569
|
-
border-bottom: 1px solid var(--rs-border-secondary);
|
|
13570
13568
|
}
|
|
13571
13569
|
.rs-table-row.virtualized {
|
|
13572
13570
|
pointer-events: none;
|
|
@@ -13576,10 +13574,6 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
13576
13574
|
visibility: hidden;
|
|
13577
13575
|
}
|
|
13578
13576
|
}
|
|
13579
|
-
.rs-table-row-rowspan + .rs-table-row {
|
|
13580
|
-
border-top: 1px solid #f2f2f5;
|
|
13581
|
-
border-top: 1px solid var(--rs-border-secondary);
|
|
13582
|
-
}
|
|
13583
13577
|
.rs-table-row-expanded {
|
|
13584
13578
|
position: absolute;
|
|
13585
13579
|
height: 46px;
|
|
@@ -13732,16 +13726,14 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
13732
13726
|
}
|
|
13733
13727
|
.rs-table-cell {
|
|
13734
13728
|
height: 36px;
|
|
13735
|
-
border-style: solid;
|
|
13736
|
-
border-width: 0;
|
|
13737
|
-
border-color: #f2f2f5;
|
|
13738
|
-
border-color: var(--rs-border-secondary);
|
|
13739
13729
|
display: block;
|
|
13740
13730
|
overflow: hidden;
|
|
13741
13731
|
position: absolute;
|
|
13742
13732
|
white-space: normal;
|
|
13743
13733
|
background-color: #fff;
|
|
13744
13734
|
background-color: var(--rs-bg-card);
|
|
13735
|
+
border-bottom: 1px solid #f2f2f5;
|
|
13736
|
+
border-bottom: 1px solid var(--rs-border-secondary);
|
|
13745
13737
|
}
|
|
13746
13738
|
.rs-table-cell.first {
|
|
13747
13739
|
border-right-width: 0;
|
|
@@ -13884,7 +13876,8 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
|
|
|
13884
13876
|
border: 1px solid var(--rs-border-secondary);
|
|
13885
13877
|
}
|
|
13886
13878
|
.rs-table-cell-bordered .rs-table-cell {
|
|
13887
|
-
border-
|
|
13879
|
+
border-left: 1px solid #f2f2f5;
|
|
13880
|
+
border-left: 1px solid var(--rs-border-secondary);
|
|
13888
13881
|
}
|
|
13889
13882
|
.rs-table-column-group {
|
|
13890
13883
|
position: absolute;
|