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.
Files changed (85) hide show
  1. package/AutoComplete/styles/index.css +14 -6
  2. package/CHANGELOG.md +19 -0
  3. package/Cascader/styles/index.css +14 -6
  4. package/CheckPicker/styles/index.css +14 -6
  5. package/CheckTree/styles/index.css +14 -6
  6. package/CheckTreePicker/styles/index.css +14 -6
  7. package/DatePicker/styles/index.css +14 -6
  8. package/DateRangePicker/styles/index.css +14 -6
  9. package/Divider/styles/index.css +3 -1
  10. package/Divider/styles/index.less +3 -1
  11. package/HStack/package.json +7 -0
  12. package/InputPicker/styles/index.css +14 -6
  13. package/MultiCascadeTree/styles/index.css +14 -6
  14. package/MultiCascader/styles/index.css +14 -6
  15. package/Pagination/styles/index.css +17 -7
  16. package/SelectPicker/styles/index.css +14 -6
  17. package/Table/styles/index.css +14 -7
  18. package/Table/styles/index.less +11 -7
  19. package/TagInput/styles/index.css +14 -6
  20. package/TagPicker/styles/index.css +14 -6
  21. package/Uploader/styles/index.css +3 -0
  22. package/Uploader/styles/index.less +4 -0
  23. package/VStack/package.json +7 -0
  24. package/cjs/DatePicker/DatePicker.js +3 -2
  25. package/cjs/DateRangePicker/DateRangePicker.js +3 -2
  26. package/cjs/Message/Message.js +10 -6
  27. package/cjs/Notification/Notification.d.ts +9 -5
  28. package/cjs/Notification/Notification.js +10 -6
  29. package/cjs/Stack/HStack.d.ts +10 -0
  30. package/cjs/Stack/HStack.js +29 -0
  31. package/cjs/Stack/VStack.d.ts +7 -0
  32. package/cjs/Stack/VStack.js +32 -0
  33. package/cjs/Stack/index.d.ts +4 -0
  34. package/cjs/Stack/index.js +5 -1
  35. package/cjs/index.d.ts +2 -2
  36. package/cjs/index.js +4 -2
  37. package/cjs/internals/types/index.d.ts +1 -0
  38. package/cjs/toaster/ToastContainer.d.ts +11 -2
  39. package/cjs/toaster/ToastContainer.js +28 -18
  40. package/cjs/toaster/ToastContext.d.ts +2 -0
  41. package/cjs/toaster/hooks/useDelayedClosure.d.ts +27 -0
  42. package/cjs/toaster/hooks/useDelayedClosure.js +47 -0
  43. package/dist/rsuite-no-reset-rtl.css +34 -14
  44. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  45. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  46. package/dist/rsuite-no-reset.css +34 -14
  47. package/dist/rsuite-no-reset.min.css +1 -1
  48. package/dist/rsuite-no-reset.min.css.map +1 -1
  49. package/dist/rsuite-rtl.css +34 -14
  50. package/dist/rsuite-rtl.min.css +1 -1
  51. package/dist/rsuite-rtl.min.css.map +1 -1
  52. package/dist/rsuite.css +34 -14
  53. package/dist/rsuite.js +40 -7
  54. package/dist/rsuite.js.map +1 -1
  55. package/dist/rsuite.min.css +1 -1
  56. package/dist/rsuite.min.css.map +1 -1
  57. package/dist/rsuite.min.js +1 -1
  58. package/dist/rsuite.min.js.map +1 -1
  59. package/esm/DatePicker/DatePicker.js +3 -2
  60. package/esm/DateRangePicker/DateRangePicker.js +3 -2
  61. package/esm/Message/Message.js +12 -8
  62. package/esm/Notification/Notification.d.ts +9 -5
  63. package/esm/Notification/Notification.js +12 -8
  64. package/esm/Stack/HStack.d.ts +10 -0
  65. package/esm/Stack/HStack.js +24 -0
  66. package/esm/Stack/VStack.d.ts +7 -0
  67. package/esm/Stack/VStack.js +27 -0
  68. package/esm/Stack/index.d.ts +4 -0
  69. package/esm/Stack/index.js +2 -0
  70. package/esm/index.d.ts +2 -2
  71. package/esm/index.js +1 -1
  72. package/esm/internals/types/index.d.ts +1 -0
  73. package/esm/toaster/ToastContainer.d.ts +11 -2
  74. package/esm/toaster/ToastContainer.js +28 -18
  75. package/esm/toaster/ToastContext.d.ts +2 -0
  76. package/esm/toaster/hooks/useDelayedClosure.d.ts +27 -0
  77. package/esm/toaster/hooks/useDelayedClosure.js +42 -0
  78. package/internals/Picker/styles/index.less +9 -4
  79. package/package.json +1 -2
  80. package/styles/color-modes/dark.less +1 -0
  81. package/styles/color-modes/high-contrast.less +1 -0
  82. package/styles/color-modes/light.less +3 -0
  83. package/styles/color-modes.less +4 -3
  84. package/styles/mixins/color-modes.less +4 -2
  85. package/styles/variables.less +3 -0
@@ -132,6 +132,8 @@
132
132
  --rs-picker-value: var(--rs-primary-700);
133
133
  --rs-picker-count-bg: var(--rs-primary-500);
134
134
  --rs-picker-count-text: #fff;
135
+ --rs-picker-state-error: var(--rs-state-error);
136
+ --rs-picker-state-error-outline: var(--rs-state-error-outline);
135
137
  }
136
138
  @supports not (color: rgb(from white r g b)) {
137
139
  :root,
@@ -2792,13 +2794,19 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2792
2794
  -ms-flex-align: center;
2793
2795
  align-items: center;
2794
2796
  }
2795
- .rs-picker-error > .rs-input-group {
2796
- border-color: #f44336 !important;
2797
- border-color: var(--rs-state-error) !important;
2797
+ .rs-picker-error > .rs-picker-input-group {
2798
+ border-color: #f44336;
2799
+ border-color: var(--rs-picker-state-error);
2800
+ }
2801
+ .rs-picker-error > .rs-picker-input-group:hover {
2802
+ border-color: #f44336;
2803
+ border-color: var(--rs-picker-state-error);
2798
2804
  }
2799
- .rs-picker-error > .rs-input-group:focus-within {
2800
- outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
2801
- outline: var(--rs-state-error-outline) !important;
2805
+ .rs-picker-error > .rs-picker-input-group:focus-within {
2806
+ border-color: #f44336;
2807
+ border-color: var(--rs-picker-state-error);
2808
+ outline: 3px solid rgb(from #f44336 r g b / 25%);
2809
+ outline: var(--rs-picker-state-error-outline);
2802
2810
  }
2803
2811
  .rs-picker-toggle {
2804
2812
  display: -webkit-inline-box;
@@ -132,6 +132,8 @@
132
132
  --rs-picker-value: var(--rs-primary-700);
133
133
  --rs-picker-count-bg: var(--rs-primary-500);
134
134
  --rs-picker-count-text: #fff;
135
+ --rs-picker-state-error: var(--rs-state-error);
136
+ --rs-picker-state-error-outline: var(--rs-state-error-outline);
135
137
  }
136
138
  @supports not (color: rgb(from white r g b)) {
137
139
  :root,
@@ -2792,13 +2794,19 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
2792
2794
  -ms-flex-align: center;
2793
2795
  align-items: center;
2794
2796
  }
2795
- .rs-picker-error > .rs-input-group {
2796
- border-color: #f44336 !important;
2797
- border-color: var(--rs-state-error) !important;
2797
+ .rs-picker-error > .rs-picker-input-group {
2798
+ border-color: #f44336;
2799
+ border-color: var(--rs-picker-state-error);
2800
+ }
2801
+ .rs-picker-error > .rs-picker-input-group:hover {
2802
+ border-color: #f44336;
2803
+ border-color: var(--rs-picker-state-error);
2798
2804
  }
2799
- .rs-picker-error > .rs-input-group:focus-within {
2800
- outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
2801
- outline: var(--rs-state-error-outline) !important;
2805
+ .rs-picker-error > .rs-picker-input-group:focus-within {
2806
+ border-color: #f44336;
2807
+ border-color: var(--rs-picker-state-error);
2808
+ outline: 3px solid rgb(from #f44336 r g b / 25%);
2809
+ outline: var(--rs-picker-state-error-outline);
2802
2810
  }
2803
2811
  .rs-picker-toggle {
2804
2812
  display: -webkit-inline-box;
@@ -1248,6 +1248,9 @@
1248
1248
  opacity: 0.3;
1249
1249
  cursor: not-allowed;
1250
1250
  }
1251
+ .rs-uploader-file-item-disabled:hover {
1252
+ background-color: transparent !important;
1253
+ }
1251
1254
  .rs-uploader-picture .rs-uploader-file-item-disabled .rs-uploader-file-item-status {
1252
1255
  cursor: not-allowed;
1253
1256
  }
@@ -18,6 +18,10 @@
18
18
  opacity: 0.3;
19
19
  cursor: not-allowed;
20
20
 
21
+ &:hover {
22
+ background-color: transparent !important;
23
+ }
24
+
21
25
  .rs-uploader-picture & .rs-uploader-file-item-status {
22
26
  cursor: not-allowed;
23
27
  }
@@ -0,0 +1,7 @@
1
+ {
2
+ "name": "rsuite/VStack",
3
+ "private": true,
4
+ "main": "../cjs/Stack/VStack.js",
5
+ "module": "../esm/Stack/VStack.js",
6
+ "types": "../esm/Stack/VStack.d.ts"
7
+ }
@@ -30,7 +30,7 @@ var _utils2 = require("./utils");
30
30
  var _useMonthView2 = _interopRequireDefault(require("./hooks/useMonthView"));
31
31
  var _useFocus2 = _interopRequireDefault(require("./hooks/useFocus"));
32
32
  var _useCustomizedInput2 = _interopRequireDefault(require("./hooks/useCustomizedInput"));
33
- var _templateObject;
33
+ var _templateObject, _templateObject2;
34
34
  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"];
35
35
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
36
36
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -508,9 +508,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
508
508
  inside: true,
509
509
  size: size,
510
510
  disabled: disabled,
511
+ className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["input-group"]))),
511
512
  onClick: handleClick
512
513
  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
513
- className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
514
+ className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
514
515
  id: id + "-label"
515
516
  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({
516
517
  "aria-haspopup": "dialog",
@@ -31,7 +31,7 @@ var _InputGroup = _interopRequireDefault(require("../InputGroup"));
31
31
  var _Header = _interopRequireDefault(require("./Header"));
32
32
  var _useDateDisabled = _interopRequireDefault(require("./hooks/useDateDisabled"));
33
33
  var _useCustomizedInput2 = _interopRequireDefault(require("../DatePicker/hooks/useCustomizedInput"));
34
- var _templateObject;
34
+ var _templateObject, _templateObject2;
35
35
  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"];
36
36
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
37
37
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -783,10 +783,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
783
783
  plaintext: plaintext
784
784
  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _date.calendarOnlyProps)), {
785
785
  inside: true,
786
+ className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["input-group"]))),
786
787
  disabled: disabled,
787
788
  size: size
788
789
  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
789
- className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
790
+ className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
790
791
  id: id + "-label"
791
792
  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({
792
793
  "aria-haspopup": "dialog",
@@ -12,9 +12,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _constants = require("../internals/constants");
13
13
  var _statusIcons = require("../internals/constants/statusIcons");
14
14
  var _hooks = require("../internals/hooks");
15
+ var _utils = require("../internals/utils");
15
16
  var _propTypes2 = require("../internals/propTypes");
16
17
  var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
17
- var _ToastContext = _interopRequireDefault(require("../toaster/ToastContext"));
18
+ var _useDelayedClosure2 = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
18
19
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
20
  var _excluded = ["as", "bordered", "centered", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"];
20
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -51,12 +52,15 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
51
52
  merge = _useClassNames.merge,
52
53
  prefix = _useClassNames.prefix;
53
54
  var isMounted = (0, _hooks.useIsMounted)();
54
- var _useContext = (0, _react.useContext)(_ToastContext.default),
55
- usedToaster = _useContext.usedToaster;
55
+ var targetRef = _react.default.useRef(null);
56
56
 
57
57
  // Timed close message
58
- var _useTimeout = (0, _hooks.useTimeout)(onClose, duration, usedToaster && duration > 0),
59
- clear = _useTimeout.clear;
58
+ var _useDelayedClosure = (0, _useDelayedClosure2.default)({
59
+ targetRef: targetRef,
60
+ onClose: onClose,
61
+ duration: duration
62
+ }),
63
+ clear = _useDelayedClosure.clear;
60
64
  var handleClose = (0, _hooks.useEventCallback)(function (event) {
61
65
  setDisplay('hiding');
62
66
  onClose === null || onClose === void 0 ? void 0 : onClose(event);
@@ -78,7 +82,7 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
78
82
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
79
83
  role: "alert"
80
84
  }, rest, {
81
- ref: ref,
85
+ ref: (0, _utils.mergeRefs)(targetRef, ref),
82
86
  className: classes
83
87
  }), /*#__PURE__*/_react.default.createElement("div", {
84
88
  className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["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
- /** Type of message */
21
- type?: MessageType;
22
- /** Callback after the message is removed */
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
  /**
@@ -13,7 +13,8 @@ var _statusIcons = require("../internals/constants/statusIcons");
13
13
  var _hooks = require("../internals/hooks");
14
14
  var _propTypes2 = require("../internals/propTypes");
15
15
  var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
16
- var _ToastContext = _interopRequireDefault(require("../toaster/ToastContext"));
16
+ var _utils = require("../internals/utils");
17
+ var _useDelayedClosure2 = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
17
18
  var _templateObject, _templateObject2;
18
19
  var _excluded = ["as", "classPrefix", "closable", "duration", "className", "type", "header", "children", "onClose"];
19
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -45,12 +46,15 @@ var Notification = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
45
46
  merge = _useClassNames.merge,
46
47
  prefix = _useClassNames.prefix;
47
48
  var isMounted = (0, _hooks.useIsMounted)();
48
- var _useContext = (0, _react.useContext)(_ToastContext.default),
49
- usedToaster = _useContext.usedToaster;
49
+ var targetRef = _react.default.useRef(null);
50
50
 
51
51
  // Timed close message
52
- var _useTimeout = (0, _hooks.useTimeout)(onClose, duration, usedToaster && duration > 0),
53
- clear = _useTimeout.clear;
52
+ var _useDelayedClosure = (0, _useDelayedClosure2.default)({
53
+ targetRef: targetRef,
54
+ onClose: onClose,
55
+ duration: duration
56
+ }),
57
+ clear = _useDelayedClosure.clear;
54
58
 
55
59
  // Click to trigger to close the message
56
60
  var handleClose = (0, _hooks.useEventCallback)(function (event) {
@@ -84,7 +88,7 @@ var Notification = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
84
88
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
85
89
  role: "alert"
86
90
  }, rest, {
87
- ref: ref,
91
+ ref: (0, _utils.mergeRefs)(targetRef, ref),
88
92
  className: classes
89
93
  }), /*#__PURE__*/_react.default.createElement("div", {
90
94
  className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["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,29 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _Stack = _interopRequireDefault(require("./Stack"));
11
+ var _excluded = ["reverse", "spacing", "childrenRenderMode"];
12
+ var HStack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
13
+ var reverse = props.reverse,
14
+ _props$spacing = props.spacing,
15
+ spacing = _props$spacing === void 0 ? 6 : _props$spacing,
16
+ _props$childrenRender = props.childrenRenderMode,
17
+ childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
18
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
19
+ var direction = reverse ? 'row-reverse' : 'row';
20
+ return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
21
+ spacing: spacing,
22
+ childrenRenderMode: childrenRenderMode
23
+ }, rest, {
24
+ direction: direction,
25
+ ref: ref
26
+ }));
27
+ });
28
+ HStack.displayName = 'HStack';
29
+ var _default = exports.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,32 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _Stack = _interopRequireDefault(require("./Stack"));
11
+ var _excluded = ["reverse", "spacing", "alignItems", "childrenRenderMode"];
12
+ var VStack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
13
+ var reverse = props.reverse,
14
+ _props$spacing = props.spacing,
15
+ spacing = _props$spacing === void 0 ? 6 : _props$spacing,
16
+ _props$alignItems = props.alignItems,
17
+ alignItems = _props$alignItems === void 0 ? 'flex-start' : _props$alignItems,
18
+ _props$childrenRender = props.childrenRenderMode,
19
+ childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
20
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
21
+ var direction = reverse ? 'column-reverse' : 'column';
22
+ return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
23
+ spacing: spacing,
24
+ childrenRenderMode: childrenRenderMode,
25
+ alignItems: alignItems
26
+ }, rest, {
27
+ direction: direction,
28
+ ref: ref
29
+ }));
30
+ });
31
+ VStack.displayName = 'VStack';
32
+ var _default = exports.default = VStack;
@@ -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;
@@ -3,6 +3,10 @@
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
5
  exports.__esModule = true;
6
- exports.default = void 0;
6
+ exports.default = exports.VStack = exports.HStack = void 0;
7
7
  var _Stack = _interopRequireDefault(require("./Stack"));
8
+ var _HStack = _interopRequireDefault(require("./HStack"));
9
+ exports.HStack = _HStack.default;
10
+ var _VStack = _interopRequireDefault(require("./VStack"));
11
+ exports.VStack = _VStack.default;
8
12
  var _default = exports.default = _Stack.default;
package/cjs/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/cjs/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
5
  exports.__esModule = true;
6
- exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = exports.Whisper = exports.VisuallyHidden = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
6
+ exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = exports.Whisper = exports.VisuallyHidden = exports.VStack = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.HStack = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
7
7
  var _Text = _interopRequireDefault(require("./Text"));
8
8
  exports.Text = _Text.default;
9
9
  var _Heading = _interopRequireDefault(require("./Heading"));
@@ -175,8 +175,10 @@ var _Footer = _interopRequireDefault(require("./Footer"));
175
175
  exports.Footer = _Footer.default;
176
176
  var _Divider = _interopRequireDefault(require("./Divider"));
177
177
  exports.Divider = _Divider.default;
178
- var _Stack = _interopRequireDefault(require("./Stack"));
178
+ var _Stack = _interopRequireWildcard(require("./Stack"));
179
179
  exports.Stack = _Stack.default;
180
+ exports.HStack = _Stack.HStack;
181
+ exports.VStack = _Stack.VStack;
180
182
  var _Schema = _interopRequireDefault(require("./Schema"));
181
183
  exports.Schema = _Schema.default;
182
184
  var _Animation = _interopRequireDefault(require("./Animation"));
@@ -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
- /** The number of milliseconds to wait before automatically closing a message. */
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;
@@ -30,13 +30,19 @@ var useMessages = function useMessages() {
30
30
  return key;
31
31
  }, [messages]);
32
32
  var push = (0, _react.useCallback)(function (message, options) {
33
+ var _ref = options || {},
34
+ duration = _ref.duration,
35
+ _ref$mouseReset = _ref.mouseReset,
36
+ mouseReset = _ref$mouseReset === void 0 ? true : _ref$mouseReset;
33
37
  var key = (0, _utils.guid)();
34
38
  setMessages(function (prevMessages) {
35
- return [].concat(prevMessages, [(0, _extends2.default)({
39
+ return [].concat(prevMessages, [{
36
40
  key: key,
37
41
  visible: true,
38
- node: message
39
- }, options)]);
42
+ node: message,
43
+ duration: duration,
44
+ mouseReset: mouseReset
45
+ }]);
40
46
  });
41
47
  return key;
42
48
  }, []);
@@ -107,8 +113,17 @@ var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref
107
113
  };
108
114
  });
109
115
  var elements = messages.map(function (item) {
110
- return /*#__PURE__*/_react.default.createElement(_Transition.default, {
111
- key: item.key,
116
+ var mouseReset = item.mouseReset,
117
+ duration = item.duration,
118
+ node = item.node;
119
+ return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {
120
+ value: {
121
+ usedToaster: true,
122
+ mouseReset: mouseReset,
123
+ duration: duration
124
+ },
125
+ key: item.key
126
+ }, /*#__PURE__*/_react.default.createElement(_Transition.default, {
112
127
  in: item.visible,
113
128
  exitedClassName: rootPrefix('toast-fade-exited'),
114
129
  exitingClassName: rootPrefix('toast-fade-exiting'),
@@ -116,31 +131,26 @@ var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref
116
131
  enteredClassName: rootPrefix('toast-fade-entered'),
117
132
  timeout: 300
118
133
  }, function (transitionProps, ref) {
119
- var _item$node, _item$node$props, _item$node2, _item$node2$props;
134
+ var _node$props, _node$props2;
120
135
  var transitionClassName = transitionProps.className,
121
136
  rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, _excluded2);
122
- return /*#__PURE__*/_react.default.cloneElement(item.node, (0, _extends2.default)({}, rest, {
137
+ return /*#__PURE__*/_react.default.cloneElement(node, (0, _extends2.default)({}, rest, {
123
138
  ref: ref,
124
- duration: item.duration,
125
- // Remove the message after the specified time.
126
- onClose: (0, _utils.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 () {
139
+ duration: duration,
140
+ onClose: (0, _utils.createChainedFunction)((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, function () {
127
141
  return remove(item.key);
128
142
  }),
129
- className: merge(rootPrefix('toast'), (_item$node2 = item.node) === null || _item$node2 === void 0 ? void 0 : (_item$node2$props = _item$node2.props) === null || _item$node2$props === void 0 ? void 0 : _item$node2$props.className, transitionClassName)
143
+ className: merge(rootPrefix('toast'), (_node$props2 = node.props) === null || _node$props2 === void 0 ? void 0 : _node$props2.className, transitionClassName)
130
144
  }));
131
- });
145
+ }));
132
146
  });
133
- return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {
134
- value: {
135
- usedToaster: true
136
- }
137
- }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
147
+ return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
138
148
  ref: function ref(selfRef) {
139
149
  rootRef.current = selfRef;
140
150
  callback === null || callback === void 0 ? void 0 : callback(selfRef);
141
151
  },
142
152
  className: classes
143
- }), elements));
153
+ }), elements);
144
154
  });
145
155
  ToastContainer.getInstance = function (props) {
146
156
  var container = props.container,
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  export interface ToastContextProps {
3
3
  usedToaster?: boolean;
4
+ duration?: number;
5
+ mouseReset?: boolean;
4
6
  }
5
7
  declare const ToastContext: React.Context<ToastContextProps>;
6
8
  export default ToastContext;
@@ -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,47 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _react = require("react");
8
+ var _on = _interopRequireDefault(require("dom-lib/on"));
9
+ var _hooks = require("../../internals/hooks");
10
+ var _ToastContext = _interopRequireDefault(require("../ToastContext"));
11
+ /**
12
+ * A hook that delays the closure of the message box.
13
+ */
14
+ function useDelayedClosure(props) {
15
+ var onClose = props.onClose,
16
+ durationProp = props.duration,
17
+ targetRef = props.targetRef;
18
+ var _useContext = (0, _react.useContext)(_ToastContext.default),
19
+ usedToaster = _useContext.usedToaster,
20
+ _useContext$duration = _useContext.duration,
21
+ duration = _useContext$duration === void 0 ? durationProp : _useContext$duration,
22
+ mouseReset = _useContext.mouseReset;
23
+ var mouseEnterRef = (0, _react.useRef)();
24
+ var mouseLeaveRef = (0, _react.useRef)();
25
+ var _useTimeout = (0, _hooks.useTimeout)(onClose, duration, usedToaster && duration > 0),
26
+ clear = _useTimeout.clear,
27
+ reset = _useTimeout.reset;
28
+ (0, _hooks.useMount)(function () {
29
+ if (targetRef !== null && targetRef !== void 0 && targetRef.current && mouseReset) {
30
+ if (mouseEnterRef.current || mouseLeaveRef.current) {
31
+ return;
32
+ }
33
+ mouseEnterRef.current = (0, _on.default)(targetRef.current, 'mouseenter', clear);
34
+ mouseLeaveRef.current = (0, _on.default)(targetRef.current, 'mouseleave', reset);
35
+ return function () {
36
+ var _mouseEnterRef$curren, _mouseLeaveRef$curren;
37
+ (_mouseEnterRef$curren = mouseEnterRef.current) === null || _mouseEnterRef$curren === void 0 ? void 0 : _mouseEnterRef$curren.off();
38
+ (_mouseLeaveRef$curren = mouseLeaveRef.current) === null || _mouseLeaveRef$curren === void 0 ? void 0 : _mouseLeaveRef$curren.off();
39
+ };
40
+ }
41
+ });
42
+ return {
43
+ clear: clear,
44
+ reset: reset
45
+ };
46
+ }
47
+ var _default = exports.default = useDelayedClosure;