rsuite 5.64.2 → 5.65.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/AutoComplete/styles/index.css +14 -6
- package/CHANGELOG.md +19 -0
- package/Cascader/styles/index.css +14 -6
- package/CheckPicker/styles/index.css +14 -6
- package/CheckTree/styles/index.css +14 -6
- package/CheckTreePicker/styles/index.css +14 -6
- package/DatePicker/styles/index.css +14 -6
- package/DateRangePicker/styles/index.css +14 -6
- package/Divider/styles/index.css +3 -1
- package/Divider/styles/index.less +3 -1
- package/HStack/package.json +7 -0
- package/InputPicker/styles/index.css +14 -6
- package/MultiCascadeTree/styles/index.css +14 -6
- package/MultiCascader/styles/index.css +14 -6
- package/Pagination/styles/index.css +17 -7
- package/SelectPicker/styles/index.css +14 -6
- package/Table/styles/index.css +14 -7
- package/Table/styles/index.less +11 -7
- package/TagInput/styles/index.css +14 -6
- package/TagPicker/styles/index.css +14 -6
- package/Uploader/styles/index.css +3 -0
- package/Uploader/styles/index.less +4 -0
- package/VStack/package.json +7 -0
- package/cjs/DatePicker/DatePicker.js +3 -2
- package/cjs/DateRangePicker/DateRangePicker.js +3 -2
- package/cjs/Message/Message.js +10 -6
- package/cjs/Notification/Notification.d.ts +9 -5
- package/cjs/Notification/Notification.js +10 -6
- package/cjs/Stack/HStack.d.ts +10 -0
- package/cjs/Stack/HStack.js +29 -0
- package/cjs/Stack/VStack.d.ts +7 -0
- package/cjs/Stack/VStack.js +32 -0
- package/cjs/Stack/index.d.ts +4 -0
- package/cjs/Stack/index.js +5 -1
- package/cjs/index.d.ts +2 -2
- package/cjs/index.js +4 -2
- package/cjs/internals/types/index.d.ts +1 -0
- package/cjs/toaster/ToastContainer.d.ts +11 -2
- package/cjs/toaster/ToastContainer.js +28 -18
- package/cjs/toaster/ToastContext.d.ts +2 -0
- package/cjs/toaster/hooks/useDelayedClosure.d.ts +27 -0
- package/cjs/toaster/hooks/useDelayedClosure.js +47 -0
- package/dist/rsuite-no-reset-rtl.css +34 -14
- 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 +34 -14
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +34 -14
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +34 -14
- package/dist/rsuite.js +40 -7
- 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/DatePicker/DatePicker.js +3 -2
- package/esm/DateRangePicker/DateRangePicker.js +3 -2
- package/esm/Message/Message.js +12 -8
- package/esm/Notification/Notification.d.ts +9 -5
- package/esm/Notification/Notification.js +12 -8
- package/esm/Stack/HStack.d.ts +10 -0
- package/esm/Stack/HStack.js +24 -0
- package/esm/Stack/VStack.d.ts +7 -0
- package/esm/Stack/VStack.js +27 -0
- package/esm/Stack/index.d.ts +4 -0
- package/esm/Stack/index.js +2 -0
- package/esm/index.d.ts +2 -2
- package/esm/index.js +1 -1
- package/esm/internals/types/index.d.ts +1 -0
- package/esm/toaster/ToastContainer.d.ts +11 -2
- package/esm/toaster/ToastContainer.js +28 -18
- package/esm/toaster/ToastContext.d.ts +2 -0
- package/esm/toaster/hooks/useDelayedClosure.d.ts +27 -0
- package/esm/toaster/hooks/useDelayedClosure.js +42 -0
- package/internals/Picker/styles/index.less +9 -4
- package/package.json +1 -2
- package/styles/color-modes/dark.less +1 -0
- package/styles/color-modes/high-contrast.less +1 -0
- package/styles/color-modes/light.less +3 -0
- package/styles/color-modes.less +4 -3
- package/styles/mixins/color-modes.less +4 -2
- package/styles/variables.less +3 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
-
var _templateObject;
|
|
5
|
+
var _templateObject, _templateObject2;
|
|
6
6
|
var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
|
|
7
7
|
import React, { useMemo } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
@@ -501,9 +501,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
501
501
|
inside: true,
|
|
502
502
|
size: size,
|
|
503
503
|
disabled: disabled,
|
|
504
|
+
className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["input-group"]))),
|
|
504
505
|
onClick: handleClick
|
|
505
506
|
}), /*#__PURE__*/React.createElement(PickerLabel, {
|
|
506
|
-
className: prefix(
|
|
507
|
+
className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["label"]))),
|
|
507
508
|
id: id + "-label"
|
|
508
509
|
}, label), /*#__PURE__*/React.createElement(Input, _extends({
|
|
509
510
|
"aria-haspopup": "dialog",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
-
var _templateObject;
|
|
5
|
+
var _templateObject, _templateObject2;
|
|
6
6
|
var _excluded = ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"];
|
|
7
7
|
import React, { useEffect, useRef, useState, useMemo } from 'react';
|
|
8
8
|
import isNil from 'lodash/isNil';
|
|
@@ -776,10 +776,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
776
776
|
plaintext: plaintext
|
|
777
777
|
}) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
|
|
778
778
|
inside: true,
|
|
779
|
+
className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["input-group"]))),
|
|
779
780
|
disabled: disabled,
|
|
780
781
|
size: size
|
|
781
782
|
}), /*#__PURE__*/React.createElement(PickerLabel, {
|
|
782
|
-
className: prefix(
|
|
783
|
+
className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["label"]))),
|
|
783
784
|
id: id + "-label"
|
|
784
785
|
}, label), /*#__PURE__*/React.createElement(Input, _extends({
|
|
785
786
|
"aria-haspopup": "dialog",
|
package/esm/Message/Message.js
CHANGED
|
@@ -4,14 +4,15 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
|
|
|
4
4
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
5
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
6
6
|
var _excluded = ["as", "bordered", "centered", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"];
|
|
7
|
-
import React, { useState
|
|
7
|
+
import React, { useState } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import { STATUS } from "../internals/constants/index.js";
|
|
10
10
|
import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
|
|
11
|
-
import { useClassNames,
|
|
11
|
+
import { useClassNames, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
|
|
12
|
+
import { mergeRefs } from "../internals/utils/index.js";
|
|
12
13
|
import { oneOf } from "../internals/propTypes/index.js";
|
|
13
14
|
import CloseButton from "../internals/CloseButton/index.js";
|
|
14
|
-
import
|
|
15
|
+
import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
|
|
15
16
|
/**
|
|
16
17
|
* The `Message` component is used to display important messages to users.
|
|
17
18
|
* @see https://rsuitejs.com/components/message
|
|
@@ -44,12 +45,15 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
44
45
|
merge = _useClassNames.merge,
|
|
45
46
|
prefix = _useClassNames.prefix;
|
|
46
47
|
var isMounted = useIsMounted();
|
|
47
|
-
var
|
|
48
|
-
usedToaster = _useContext.usedToaster;
|
|
48
|
+
var targetRef = React.useRef(null);
|
|
49
49
|
|
|
50
50
|
// Timed close message
|
|
51
|
-
var
|
|
52
|
-
|
|
51
|
+
var _useDelayedClosure = useDelayedClosure({
|
|
52
|
+
targetRef: targetRef,
|
|
53
|
+
onClose: onClose,
|
|
54
|
+
duration: duration
|
|
55
|
+
}),
|
|
56
|
+
clear = _useDelayedClosure.clear;
|
|
53
57
|
var handleClose = useEventCallback(function (event) {
|
|
54
58
|
setDisplay('hiding');
|
|
55
59
|
onClose === null || onClose === void 0 ? void 0 : onClose(event);
|
|
@@ -71,7 +75,7 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
71
75
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
72
76
|
role: "alert"
|
|
73
77
|
}, rest, {
|
|
74
|
-
ref: ref,
|
|
78
|
+
ref: mergeRefs(targetRef, ref),
|
|
75
79
|
className: classes
|
|
76
80
|
}), /*#__PURE__*/React.createElement("div", {
|
|
77
81
|
className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["container"])))
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
|
|
3
|
-
export type MessageType = 'info' | 'success' | 'warning' | 'error';
|
|
2
|
+
import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../internals/types';
|
|
4
3
|
export interface NotificationProps extends WithAsProps {
|
|
5
4
|
/** Title of the message */
|
|
6
5
|
header?: React.ReactNode;
|
|
@@ -11,15 +10,20 @@ export interface NotificationProps extends WithAsProps {
|
|
|
11
10
|
*
|
|
12
11
|
* @default 4500
|
|
13
12
|
* @deprecated Use `toaster.push(<Notification />, { duration: 4500 })` instead.
|
|
13
|
+
* @internal
|
|
14
14
|
*/
|
|
15
15
|
duration?: number;
|
|
16
16
|
/**
|
|
17
17
|
* The remove button is displayed.
|
|
18
18
|
*/
|
|
19
19
|
closable?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Type of message
|
|
22
|
+
*/
|
|
23
|
+
type?: TypeAttributes.Status;
|
|
24
|
+
/**
|
|
25
|
+
* Callback after the message is removed
|
|
26
|
+
*/
|
|
23
27
|
onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
|
|
24
28
|
}
|
|
25
29
|
/**
|
|
@@ -4,13 +4,14 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
|
|
|
4
4
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
5
|
var _templateObject, _templateObject2;
|
|
6
6
|
var _excluded = ["as", "classPrefix", "closable", "duration", "className", "type", "header", "children", "onClose"];
|
|
7
|
-
import React, { useState
|
|
7
|
+
import React, { useState } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
|
|
10
|
-
import { useClassNames,
|
|
10
|
+
import { useClassNames, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
|
|
11
11
|
import { oneOf } from "../internals/propTypes/index.js";
|
|
12
12
|
import CloseButton from "../internals/CloseButton/index.js";
|
|
13
|
-
import
|
|
13
|
+
import { mergeRefs } from "../internals/utils/index.js";
|
|
14
|
+
import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
|
|
14
15
|
/**
|
|
15
16
|
* The `Notification` component is used to display global messages and notifications.
|
|
16
17
|
*
|
|
@@ -38,12 +39,15 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
38
39
|
merge = _useClassNames.merge,
|
|
39
40
|
prefix = _useClassNames.prefix;
|
|
40
41
|
var isMounted = useIsMounted();
|
|
41
|
-
var
|
|
42
|
-
usedToaster = _useContext.usedToaster;
|
|
42
|
+
var targetRef = React.useRef(null);
|
|
43
43
|
|
|
44
44
|
// Timed close message
|
|
45
|
-
var
|
|
46
|
-
|
|
45
|
+
var _useDelayedClosure = useDelayedClosure({
|
|
46
|
+
targetRef: targetRef,
|
|
47
|
+
onClose: onClose,
|
|
48
|
+
duration: duration
|
|
49
|
+
}),
|
|
50
|
+
clear = _useDelayedClosure.clear;
|
|
47
51
|
|
|
48
52
|
// Click to trigger to close the message
|
|
49
53
|
var handleClose = useEventCallback(function (event) {
|
|
@@ -77,7 +81,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
77
81
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
78
82
|
role: "alert"
|
|
79
83
|
}, rest, {
|
|
80
|
-
ref: ref,
|
|
84
|
+
ref: mergeRefs(targetRef, ref),
|
|
81
85
|
className: classes
|
|
82
86
|
}), /*#__PURE__*/React.createElement("div", {
|
|
83
87
|
className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["content"])))
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StackProps } from './Stack';
|
|
3
|
+
export interface HStackProps extends Omit<StackProps, 'direction'> {
|
|
4
|
+
/**
|
|
5
|
+
* Reverse the order of the children in the stack
|
|
6
|
+
*/
|
|
7
|
+
reverse?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<unknown>>;
|
|
10
|
+
export default HStack;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
|
+
var _excluded = ["reverse", "spacing", "childrenRenderMode"];
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import Stack from "./Stack.js";
|
|
7
|
+
var HStack = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
8
|
+
var reverse = props.reverse,
|
|
9
|
+
_props$spacing = props.spacing,
|
|
10
|
+
spacing = _props$spacing === void 0 ? 6 : _props$spacing,
|
|
11
|
+
_props$childrenRender = props.childrenRenderMode,
|
|
12
|
+
childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
|
|
13
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded);
|
|
14
|
+
var direction = reverse ? 'row-reverse' : 'row';
|
|
15
|
+
return /*#__PURE__*/React.createElement(Stack, _extends({
|
|
16
|
+
spacing: spacing,
|
|
17
|
+
childrenRenderMode: childrenRenderMode
|
|
18
|
+
}, rest, {
|
|
19
|
+
direction: direction,
|
|
20
|
+
ref: ref
|
|
21
|
+
}));
|
|
22
|
+
});
|
|
23
|
+
HStack.displayName = 'HStack';
|
|
24
|
+
export default HStack;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StackProps } from './Stack';
|
|
3
|
+
export interface VStackProps extends Omit<StackProps, 'direction'> {
|
|
4
|
+
reverse?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<unknown>>;
|
|
7
|
+
export default VStack;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
|
+
var _excluded = ["reverse", "spacing", "alignItems", "childrenRenderMode"];
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import Stack from "./Stack.js";
|
|
7
|
+
var VStack = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
8
|
+
var reverse = props.reverse,
|
|
9
|
+
_props$spacing = props.spacing,
|
|
10
|
+
spacing = _props$spacing === void 0 ? 6 : _props$spacing,
|
|
11
|
+
_props$alignItems = props.alignItems,
|
|
12
|
+
alignItems = _props$alignItems === void 0 ? 'flex-start' : _props$alignItems,
|
|
13
|
+
_props$childrenRender = props.childrenRenderMode,
|
|
14
|
+
childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
|
|
15
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded);
|
|
16
|
+
var direction = reverse ? 'column-reverse' : 'column';
|
|
17
|
+
return /*#__PURE__*/React.createElement(Stack, _extends({
|
|
18
|
+
spacing: spacing,
|
|
19
|
+
childrenRenderMode: childrenRenderMode,
|
|
20
|
+
alignItems: alignItems
|
|
21
|
+
}, rest, {
|
|
22
|
+
direction: direction,
|
|
23
|
+
ref: ref
|
|
24
|
+
}));
|
|
25
|
+
});
|
|
26
|
+
VStack.displayName = 'VStack';
|
|
27
|
+
export default VStack;
|
package/esm/Stack/index.d.ts
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import Stack from './Stack';
|
|
2
2
|
export type { StackProps } from './Stack';
|
|
3
|
+
export type { HStackProps } from './HStack';
|
|
4
|
+
export type { VStackProps } from './VStack';
|
|
5
|
+
export { default as HStack } from './HStack';
|
|
6
|
+
export { default as VStack } from './VStack';
|
|
3
7
|
export default Stack;
|
package/esm/Stack/index.js
CHANGED
package/esm/index.d.ts
CHANGED
|
@@ -167,8 +167,8 @@ export { default as Footer } from './Footer';
|
|
|
167
167
|
export type { FooterProps } from './Footer';
|
|
168
168
|
export { default as Divider } from './Divider';
|
|
169
169
|
export type { DividerProps } from './Divider';
|
|
170
|
-
export { default as Stack } from './Stack';
|
|
171
|
-
export type { StackProps } from './Stack';
|
|
170
|
+
export { default as Stack, HStack, VStack } from './Stack';
|
|
171
|
+
export type { StackProps, HStackProps, VStackProps } from './Stack';
|
|
172
172
|
export { default as Schema } from './Schema';
|
|
173
173
|
export { default as Animation } from './Animation';
|
|
174
174
|
export type { TransitionProps, SlideProps, CollapseProps, FadeProps, BounceProps } from './Animation';
|
package/esm/index.js
CHANGED
|
@@ -104,7 +104,7 @@ export { default as Header } from "./Header/index.js";
|
|
|
104
104
|
export { default as Sidebar } from "./Sidebar/index.js";
|
|
105
105
|
export { default as Footer } from "./Footer/index.js";
|
|
106
106
|
export { default as Divider } from "./Divider/index.js";
|
|
107
|
-
export { default as Stack } from "./Stack/index.js";
|
|
107
|
+
export { default as Stack, HStack, VStack } from "./Stack/index.js";
|
|
108
108
|
// Utils
|
|
109
109
|
// --------------------------------------------------------
|
|
110
110
|
export { default as Schema } from "./Schema/index.js";
|
|
@@ -172,6 +172,7 @@ export declare namespace TypeAttributes {
|
|
|
172
172
|
type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
|
|
173
173
|
type Placement = Placement4 | Placement8 | PlacementAuto;
|
|
174
174
|
type CheckTrigger = 'change' | 'blur' | 'none' | null;
|
|
175
|
+
type DisplayState = 'show' | 'hide' | 'hiding';
|
|
175
176
|
}
|
|
176
177
|
export interface SVGIcon {
|
|
177
178
|
viewBox: string;
|
|
@@ -11,15 +11,24 @@ export interface ToastContainerProps extends WithAsProps {
|
|
|
11
11
|
placement?: PlacementType;
|
|
12
12
|
/**
|
|
13
13
|
* Set the message to appear in the specified container
|
|
14
|
-
*
|
|
15
14
|
*/
|
|
16
15
|
container?: HTMLElement | (() => HTMLElement);
|
|
17
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* The number of milliseconds to wait before automatically closing a message.
|
|
18
|
+
*/
|
|
18
19
|
duration?: number;
|
|
20
|
+
/**
|
|
21
|
+
* Reset the hide timer if the mouse moves over the message.
|
|
22
|
+
*/
|
|
23
|
+
mouseReset?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Callback fired when the component mounts
|
|
26
|
+
*/
|
|
19
27
|
callback?: (ref: React.RefObject<ToastContainerInstance>) => void;
|
|
20
28
|
}
|
|
21
29
|
interface PushOptions {
|
|
22
30
|
duration?: number;
|
|
31
|
+
mouseReset?: boolean;
|
|
23
32
|
}
|
|
24
33
|
export interface ToastContainerInstance {
|
|
25
34
|
root: HTMLElement;
|
|
@@ -23,13 +23,19 @@ var useMessages = function useMessages() {
|
|
|
23
23
|
return key;
|
|
24
24
|
}, [messages]);
|
|
25
25
|
var push = useCallback(function (message, options) {
|
|
26
|
+
var _ref = options || {},
|
|
27
|
+
duration = _ref.duration,
|
|
28
|
+
_ref$mouseReset = _ref.mouseReset,
|
|
29
|
+
mouseReset = _ref$mouseReset === void 0 ? true : _ref$mouseReset;
|
|
26
30
|
var key = guid();
|
|
27
31
|
setMessages(function (prevMessages) {
|
|
28
|
-
return [].concat(prevMessages, [
|
|
32
|
+
return [].concat(prevMessages, [{
|
|
29
33
|
key: key,
|
|
30
34
|
visible: true,
|
|
31
|
-
node: message
|
|
32
|
-
|
|
35
|
+
node: message,
|
|
36
|
+
duration: duration,
|
|
37
|
+
mouseReset: mouseReset
|
|
38
|
+
}]);
|
|
33
39
|
});
|
|
34
40
|
return key;
|
|
35
41
|
}, []);
|
|
@@ -100,8 +106,17 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
100
106
|
};
|
|
101
107
|
});
|
|
102
108
|
var elements = messages.map(function (item) {
|
|
103
|
-
|
|
104
|
-
|
|
109
|
+
var mouseReset = item.mouseReset,
|
|
110
|
+
duration = item.duration,
|
|
111
|
+
node = item.node;
|
|
112
|
+
return /*#__PURE__*/React.createElement(ToastContext.Provider, {
|
|
113
|
+
value: {
|
|
114
|
+
usedToaster: true,
|
|
115
|
+
mouseReset: mouseReset,
|
|
116
|
+
duration: duration
|
|
117
|
+
},
|
|
118
|
+
key: item.key
|
|
119
|
+
}, /*#__PURE__*/React.createElement(Transition, {
|
|
105
120
|
in: item.visible,
|
|
106
121
|
exitedClassName: rootPrefix('toast-fade-exited'),
|
|
107
122
|
exitingClassName: rootPrefix('toast-fade-exiting'),
|
|
@@ -109,31 +124,26 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
109
124
|
enteredClassName: rootPrefix('toast-fade-entered'),
|
|
110
125
|
timeout: 300
|
|
111
126
|
}, function (transitionProps, ref) {
|
|
112
|
-
var
|
|
127
|
+
var _node$props, _node$props2;
|
|
113
128
|
var transitionClassName = transitionProps.className,
|
|
114
129
|
rest = _objectWithoutPropertiesLoose(transitionProps, _excluded2);
|
|
115
|
-
return /*#__PURE__*/React.cloneElement(
|
|
130
|
+
return /*#__PURE__*/React.cloneElement(node, _extends({}, rest, {
|
|
116
131
|
ref: ref,
|
|
117
|
-
duration:
|
|
118
|
-
|
|
119
|
-
onClose: createChainedFunction((_item$node = item.node) === null || _item$node === void 0 ? void 0 : (_item$node$props = _item$node.props) === null || _item$node$props === void 0 ? void 0 : _item$node$props.onClose, function () {
|
|
132
|
+
duration: duration,
|
|
133
|
+
onClose: createChainedFunction((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, function () {
|
|
120
134
|
return remove(item.key);
|
|
121
135
|
}),
|
|
122
|
-
className: merge(rootPrefix('toast'), (
|
|
136
|
+
className: merge(rootPrefix('toast'), (_node$props2 = node.props) === null || _node$props2 === void 0 ? void 0 : _node$props2.className, transitionClassName)
|
|
123
137
|
}));
|
|
124
|
-
});
|
|
138
|
+
}));
|
|
125
139
|
});
|
|
126
|
-
return /*#__PURE__*/React.createElement(
|
|
127
|
-
value: {
|
|
128
|
-
usedToaster: true
|
|
129
|
-
}
|
|
130
|
-
}, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
140
|
+
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
131
141
|
ref: function ref(selfRef) {
|
|
132
142
|
rootRef.current = selfRef;
|
|
133
143
|
callback === null || callback === void 0 ? void 0 : callback(selfRef);
|
|
134
144
|
},
|
|
135
145
|
className: classes
|
|
136
|
-
}), elements)
|
|
146
|
+
}), elements);
|
|
137
147
|
});
|
|
138
148
|
ToastContainer.getInstance = function (props) {
|
|
139
149
|
var container = props.container,
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface UseDelayedClosureProps {
|
|
3
|
+
/**
|
|
4
|
+
* Callback function to be called when the closure is triggered.
|
|
5
|
+
*/
|
|
6
|
+
onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
|
|
7
|
+
/**
|
|
8
|
+
* The duration (in milliseconds) after which the closure should be triggered.
|
|
9
|
+
*/
|
|
10
|
+
duration: number;
|
|
11
|
+
/**
|
|
12
|
+
* Optional reference to the target element.
|
|
13
|
+
*/
|
|
14
|
+
targetRef?: React.RefObject<HTMLElement>;
|
|
15
|
+
/**
|
|
16
|
+
* Reset the hide timer if the mouse moves over the target element.
|
|
17
|
+
*/
|
|
18
|
+
mouseReset?: boolean;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* A hook that delays the closure of the message box.
|
|
22
|
+
*/
|
|
23
|
+
declare function useDelayedClosure(props: UseDelayedClosureProps): {
|
|
24
|
+
clear: () => void;
|
|
25
|
+
reset: () => void;
|
|
26
|
+
};
|
|
27
|
+
export default useDelayedClosure;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useContext, useRef } from 'react';
|
|
3
|
+
import on from 'dom-lib/on';
|
|
4
|
+
import { useTimeout, useMount } from "../../internals/hooks/index.js";
|
|
5
|
+
import ToastContext from "../ToastContext.js";
|
|
6
|
+
/**
|
|
7
|
+
* A hook that delays the closure of the message box.
|
|
8
|
+
*/
|
|
9
|
+
function useDelayedClosure(props) {
|
|
10
|
+
var onClose = props.onClose,
|
|
11
|
+
durationProp = props.duration,
|
|
12
|
+
targetRef = props.targetRef;
|
|
13
|
+
var _useContext = useContext(ToastContext),
|
|
14
|
+
usedToaster = _useContext.usedToaster,
|
|
15
|
+
_useContext$duration = _useContext.duration,
|
|
16
|
+
duration = _useContext$duration === void 0 ? durationProp : _useContext$duration,
|
|
17
|
+
mouseReset = _useContext.mouseReset;
|
|
18
|
+
var mouseEnterRef = useRef();
|
|
19
|
+
var mouseLeaveRef = useRef();
|
|
20
|
+
var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
|
|
21
|
+
clear = _useTimeout.clear,
|
|
22
|
+
reset = _useTimeout.reset;
|
|
23
|
+
useMount(function () {
|
|
24
|
+
if (targetRef !== null && targetRef !== void 0 && targetRef.current && mouseReset) {
|
|
25
|
+
if (mouseEnterRef.current || mouseLeaveRef.current) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
mouseEnterRef.current = on(targetRef.current, 'mouseenter', clear);
|
|
29
|
+
mouseLeaveRef.current = on(targetRef.current, 'mouseleave', reset);
|
|
30
|
+
return function () {
|
|
31
|
+
var _mouseEnterRef$curren, _mouseLeaveRef$curren;
|
|
32
|
+
(_mouseEnterRef$curren = mouseEnterRef.current) === null || _mouseEnterRef$curren === void 0 ? void 0 : _mouseEnterRef$curren.off();
|
|
33
|
+
(_mouseLeaveRef$curren = mouseLeaveRef.current) === null || _mouseLeaveRef$curren === void 0 ? void 0 : _mouseLeaveRef$curren.off();
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
clear: clear,
|
|
39
|
+
reset: reset
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
export default useDelayedClosure;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
color: var(--rs-text-disabled) !important;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.rs-picker-value-count{
|
|
47
|
+
.rs-picker-value-count {
|
|
48
48
|
opacity: 0.5;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
@@ -110,11 +110,16 @@
|
|
|
110
110
|
align-items: center;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
&-error > .rs-input-group {
|
|
114
|
-
border-color: var(--rs-state-error)
|
|
113
|
+
&-error > .rs-picker-input-group {
|
|
114
|
+
border-color: var(--rs-picker-state-error);
|
|
115
|
+
|
|
116
|
+
&:hover {
|
|
117
|
+
border-color: var(--rs-picker-state-error);
|
|
118
|
+
}
|
|
115
119
|
|
|
116
120
|
&:focus-within {
|
|
117
|
-
|
|
121
|
+
border-color: var(--rs-picker-state-error);
|
|
122
|
+
outline: var(--rs-picker-state-error-outline);
|
|
118
123
|
}
|
|
119
124
|
}
|
|
120
125
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rsuite",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.65.0",
|
|
4
4
|
"description": "A suite of react components",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
"@babel/runtime": "^7.20.1",
|
|
28
28
|
"@juggle/resize-observer": "^3.4.0",
|
|
29
29
|
"@rsuite/icons": "^1.0.2",
|
|
30
|
-
"@types/chai": "^4.3.3",
|
|
31
30
|
"@types/lodash": "^4.14.184",
|
|
32
31
|
"@types/prop-types": "^15.7.5",
|
|
33
32
|
"@types/react-window": "^1.8.5",
|
|
@@ -342,6 +342,7 @@
|
|
|
342
342
|
--rs-timeline-indicator-active-bg: var(--rs-primary-500);
|
|
343
343
|
|
|
344
344
|
// Table
|
|
345
|
+
--rs-table-border-color: var(--rs-border-secondary);
|
|
345
346
|
--rs-table-shadow: rgba(9, 9, 9, 0.99);
|
|
346
347
|
--rs-table-sort: var(--rs-primary-500);
|
|
347
348
|
--rs-table-resize: var(--rs-primary-500);
|
|
@@ -354,6 +354,7 @@
|
|
|
354
354
|
--rs-timeline-indicator-active-bg: var(--rs-primary-500);
|
|
355
355
|
|
|
356
356
|
// Table
|
|
357
|
+
--rs-table-border-color: var(--rs-border-secondary);
|
|
357
358
|
--rs-table-shadow: rgba(9, 9, 9, 0.99);
|
|
358
359
|
--rs-table-sort: var(--rs-primary-500);
|
|
359
360
|
--rs-table-resize: var(--rs-primary-500);
|
|
@@ -364,6 +364,7 @@
|
|
|
364
364
|
--rs-timeline-indicator-active-bg: var(--rs-primary-500);
|
|
365
365
|
|
|
366
366
|
// Table
|
|
367
|
+
--rs-table-border-color: var(--rs-border-secondary);
|
|
367
368
|
--rs-table-shadow: rgba(9, 9, 9, 0.08);
|
|
368
369
|
--rs-table-sort: var(--rs-primary-500);
|
|
369
370
|
--rs-table-resize: var(--rs-primary-500);
|
|
@@ -387,6 +388,8 @@
|
|
|
387
388
|
--rs-picker-value: var(--rs-primary-700);
|
|
388
389
|
--rs-picker-count-bg: var(--rs-primary-500);
|
|
389
390
|
--rs-picker-count-text: #fff;
|
|
391
|
+
--rs-picker-state-error: var(--rs-state-error);
|
|
392
|
+
--rs-picker-state-error-outline: var(--rs-state-error-outline);
|
|
390
393
|
|
|
391
394
|
// Calendar
|
|
392
395
|
--rs-calendar-today-bg: var(--rs-primary-500);
|
package/styles/color-modes.less
CHANGED
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
.rs-theme-high-contrast {
|
|
16
|
-
|
|
14
|
+
& when (@enable-high-contrast = true) {
|
|
15
|
+
.rs-theme-high-contrast {
|
|
16
|
+
@import 'color-modes/high-contrast';
|
|
17
|
+
}
|
|
17
18
|
}
|
package/styles/variables.less
CHANGED
|
@@ -23,6 +23,9 @@
|
|
|
23
23
|
// Whether include styles for dark mode
|
|
24
24
|
@enable-dark-mode: true;
|
|
25
25
|
|
|
26
|
+
// Whether include styles for high-contrast mode
|
|
27
|
+
@enable-high-contrast: true;
|
|
28
|
+
|
|
26
29
|
// Media queries breakpoints
|
|
27
30
|
// Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
|
28
31
|
|