rsuite 5.51.0 → 5.53.0

package/styles/color-modes/high-contrast.less

@@ -382,4 +382,39 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900-high-contrast, 80%);
+    --rs-state-focus-outline: 3px solid fade(@H500-high-contrast, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050-high-contrast, 30);
+    --rs-loader-backdrop: fade(@B900-high-contrast, 83%);
+    --rs-loader-ring-inverse: fade(@B050-high-contrast, 80);
+    --rs-loader-backdrop-inverse: fade(@B000-high-contrast, 90);
+
+    // Dropdown
+    --rs-dropdown-item-bg-active: fade(@H900-high-contrast, 20);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-high-contrast, 25);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(@B600-high-contrast, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000-high-contrast, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H900-high-contrast, 20%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
+
+    // Placeholder
+    --rs-placeholder-active: lighten(@B600-high-contrast, 5%);
+  }
 }

package/styles/color-modes/light.less

@@ -140,19 +140,27 @@
   --rs-message-success-header: var(--rs-text-heading);
   --rs-message-success-text: var(--rs-text-primary);
   --rs-message-success-icon: var(--rs-color-green);
-  --rs-message-success-bg: var(--rs-green-50);
+  --rs-message-success-icon-border: var(--rs-green-200);
+  --rs-message-success-bg: rgb(from var(--rs-green-100) r g b / 60%);
+  --rs-message-success-border: var(--rs-color-green);
   --rs-message-info-header: var(--rs-text-heading);
   --rs-message-info-text: var(--rs-text-primary);
   --rs-message-info-icon: var(--rs-color-blue);
-  --rs-message-info-bg: var(--rs-blue-50);
+  --rs-message-info-icon-border: var(--rs-blue-200);
+  --rs-message-info-bg: rgb(from var(--rs-blue-100) r g b / 60%);
+  --rs-message-info-border: var(--rs-color-blue);
   --rs-message-warning-header: var(--rs-text-heading);
   --rs-message-warning-text: var(--rs-text-primary);
   --rs-message-warning-icon: var(--rs-color-yellow);
-  --rs-message-warning-bg: var(--rs-yellow-50);
+  --rs-message-warning-icon-border: var(--rs-yellow-200);
+  --rs-message-warning-bg: rgb(from var(--rs-yellow-100) r g b / 60%);
+  --rs-message-warning-border: var(--rs-color-yellow);
   --rs-message-error-header: var(--rs-text-heading);
   --rs-message-error-text: var(--rs-text-primary);
   --rs-message-error-icon: var(--rs-color-red);
-  --rs-message-error-bg: var(--rs-red-50);
+  --rs-message-error-icon-border: var(--rs-red-200);
+  --rs-message-error-bg: rgb(from var(--rs-red-100) r g b / 60%);
+  --rs-message-error-border: var(--rs-color-red);
 
   // Tooltip
   --rs-tooltip-bg: var(--rs-gray-900);
@@ -376,4 +384,56 @@
 
   // Popover
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900, 30%);
+    --rs-color-focus-ring: fade(@H500, 25%);
+    --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
+    --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050, 80);
+    --rs-loader-backdrop: fade(@B000, 90%);
+    --rs-loader-ring-inverse: fade(@B050, 30%);
+    --rs-loader-backdrop-inverse: fade(@B900, 83%);
+
+    // Message
+    --rs-message-success-bg: fade(@green-100, 60%);
+    --rs-message-info-bg: fade(@blue-100, 60%);
+    --rs-message-warning-bg: fade(@yellow-100, 60%);
+    --rs-message-error-bg: fade(@red-100, 60%);
+
+    // Dropdown
+    --rs-dropdown-item-bg-hover: fade(@H100, 50%);
+
+    // ARIA menu
+    --rs-menuitem-active-bg: fade(@H100, 50);
+
+    // ARIA Listboxes
+    --rs-listbox-option-hover-bg: fade(@H100, 50%);
+
+    // Toggle
+    --rs-toggle-loader-ring: fade(@B050, 30%);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25%);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(#fff, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H050, 50%);
+
+    // Table
+    --rs-table-scrollbar-vertical-track: fade(@B200, 40%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H100, 50%);
+  }
 }

package/styles/index.less

@@ -32,6 +32,8 @@
 @import '../FormGroup/styles/index';
 @import '../FormErrorMessage/styles/index';
 @import '../Grid/styles/index';
+@import '../Row/styles/index';
+@import '../Col/styles/index';
 @import '../Header/styles/index';
 @import '../FormHelpText/styles/index';
 @import '../IconButton/styles/index';
@@ -50,15 +52,12 @@
 @import '../Pagination/styles/index';
 @import '../Panel/styles/index';
 @import '../PanelGroup/styles/index';
-@import '../Picker/styles/index';
 @import '../Placeholder/styles/index';
 @import '../Popover/styles/index';
 @import '../Progress/styles/index';
 @import '../Radio/styles/index';
 @import '../RadioGroup/styles/index';
 @import '../RadioTile/styles/index';
-@import '../Ripple/styles/index';
-@import '../Row/styles/index';
 @import '../SelectPicker/styles/index';
 @import '../Sidebar/styles/index';
 @import '../Sidenav/styles/index';
@@ -66,6 +65,8 @@
 @import '../Steps/styles/index';
 @import '../Table/styles/index';
 @import '../Tag/styles/index';
+@import '../TagGroup/styles/index';
+@import '../Tabs/styles/index';
 @import '../TagPicker/styles/index';
 @import '../TagInput/styles/index';
 @import '../Timeline/styles/index';
@@ -75,5 +76,11 @@
 @import '../Uploader/styles/index';
 @import '../Rate/styles/index';
 @import '../toaster/styles/index';
-@import '../CloseButton/styles/index';
 @import '../Stack/styles/index';
+@import '../VisuallyHidden/styles/index';
+
+// Internal Components
+@import '../internals/Ripple/styles/index';
+@import '../internals/CloseButton/styles/index';
+@import '../internals/Picker/styles/index';
+@import '../internals/SearchBox/styles/index';

package/styles/mixins/listbox.less

@@ -38,14 +38,9 @@
 }
 
 // "-active" for aria-activedescendant
-.listbox-option-active(@multiselectable: false) {
+.listbox-option-active() {
   background-color: var(--rs-listbox-option-hover-bg);
-
-  // No need to change text color in multiselectable listboxes
-  // in favor of checkbox state changes
-  & when (@multiselectable = false) {
-    color: var(--rs-listbox-option-hover-text);
-  }
+  color: var(--rs-listbox-option-hover-text);
 
   .high-contrast-mode({
     .focus-ring(slim-inset);

package/styles/variables.less

@@ -571,7 +571,7 @@
 @message-title-size:          @font-size-base;
 @message-link-font-weight:    bold;
 
-@message-icon-size:           @font-size-small;
+@message-icon-size:           16px;
 @message-icon-large-size:     24px;
 @message-icon-margin-right:   10px;
 
@@ -713,7 +713,6 @@
 
 // Picker content width
 @picker-content-min-width:            200px;
-@picker-search-bar-icon-width:        @font-size-base;
 @picker-default-toggle-border-width:  1px;
 @picker-toggle-clean-width:           12px;
 @picker-toggle-clean-right:           30px;
@@ -863,6 +862,7 @@
 @zindex-popover:                              1060;
 @zindex-tooltip:                              1070;
 @zindex-notification:                         1080;
+@zindex-message-full:                         1090;
 
 //#==== Uploader
 @zindex-uploader-picture-preview:         1;

package/toaster/styles/index.css

@@ -0,0 +1,239 @@
+:root,
+.rs-theme-light {
+  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-dark {
+  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-high-contrast {
+  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+@-webkit-keyframes notificationMoveIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@keyframes notificationMoveIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@-webkit-keyframes notificationMoveInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@keyframes notificationMoveInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@-webkit-keyframes notificationMoveInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@keyframes notificationMoveInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@-webkit-keyframes notificationMoveOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    max-height: 100px;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+@keyframes notificationMoveOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    max-height: 100px;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+.rs-toast {
+  pointer-events: auto;
+}
+.rs-toast-container {
+  position: fixed;
+  z-index: 1080;
+  pointer-events: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.rs-toast-container .rs-toast:not(.rs-notification) {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: var(--rs-shadow-overlay);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: var(--rs-shadow-overlay);
+}
+.rs-toast-container .rs-toast-fade-entered,
+.rs-toast-container .rs-toast-fade-exiting {
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+.rs-toast-container .rs-toast-fade-entered {
+  -webkit-animation-duration: 0.4s;
+          animation-duration: 0.4s;
+  -webkit-animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+          animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+}
+.rs-toast-container .rs-toast-fade-exited,
+.rs-toast-container .rs-toast-fade-entering {
+  opacity: 0;
+}
+.rs-toast-container .rs-toast-fade-exited {
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+  -webkit-transform: scaleY(0.8);
+          transform: scaleY(0.8);
+  max-height: 0;
+  overflow: hidden;
+}
+.rs-toast-container-top-center,
+.rs-toast-container-bottom-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+.rs-toast-container-top-center .rs-toast-fade-entered,
+.rs-toast-container-bottom-center .rs-toast-fade-entered {
+  -webkit-animation-name: notificationMoveIn;
+          animation-name: notificationMoveIn;
+}
+.rs-toast-container-bottom-start,
+.rs-toast-container-top-start {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  left: 24px;
+}
+.rs-toast-container-bottom-start .rs-toast-fade-entered,
+.rs-toast-container-top-start .rs-toast-fade-entered {
+  -webkit-animation-name: notificationMoveInLeft;
+          animation-name: notificationMoveInLeft;
+}
+.rs-toast-container-bottom-end,
+.rs-toast-container-top-end {
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  right: 24px;
+}
+.rs-toast-container-bottom-end .rs-toast-fade-entered,
+.rs-toast-container-top-end .rs-toast-fade-entered {
+  margin-left: auto;
+  -webkit-animation-name: notificationMoveInRight;
+          animation-name: notificationMoveInRight;
+}
+.rs-toast-container-top-center,
+.rs-toast-container-top-start,
+.rs-toast-container-top-end {
+  top: 24px;
+}
+.rs-toast-container-bottom-center,
+.rs-toast-container-bottom-start,
+.rs-toast-container-bottom-end {
+  bottom: 24px;
+}
+.rs-toast-container .rs-toast-fade-exiting {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: cubic-bezier(0.64, 0.65, 0.57, 1.13);
+          animation-timing-function: cubic-bezier(0.64, 0.65, 0.57, 1.13);
+  -webkit-animation-name: notificationMoveOut;
+          animation-name: notificationMoveOut;
+}
+
+/*# sourceMappingURL=index.css.map */

package/CloseButton/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/CloseButton",
-  "private": true,
-  "main": "../cjs/CloseButton/index.js",
-  "module": "../esm/CloseButton/index.js",
-  "types": "../esm/CloseButton/index.d.ts"
-}

package/Disclosure/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Disclosure",
-  "private": true,
-  "main": "../cjs/Disclosure/index.js",
-  "module": "../esm/Disclosure/index.js",
-  "types": "../esm/Disclosure/index.d.ts"
-}

package/Menu/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Menu",
-  "private": true,
-  "main": "../cjs/Menu/index.js",
-  "module": "../esm/Menu/index.js",
-  "types": "../esm/Menu/index.d.ts"
-}

package/Overlay/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Overlay",
-  "private": true,
-  "main": "../cjs/Overlay/index.js",
-  "module": "../esm/Overlay/index.js",
-  "types": "../esm/Overlay/index.d.ts"
-}

package/Picker/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Picker",
-  "private": true,
-  "main": "../cjs/Picker/index.js",
-  "module": "../esm/Picker/index.js",
-  "types": "../esm/Picker/index.d.ts"
-}

package/Plaintext/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Plaintext",
-  "private": true,
-  "main": "../cjs/Plaintext/index.js",
-  "module": "../esm/Plaintext/index.js",
-  "types": "../esm/Plaintext/index.d.ts"
-}

package/Ripple/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Ripple",
-  "private": true,
-  "main": "../cjs/Ripple/index.js",
-  "module": "../esm/Ripple/index.js",
-  "types": "../esm/Ripple/index.d.ts"
-}

package/Windowing/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Windowing",
-  "private": true,
-  "main": "../cjs/Windowing/index.js",
-  "module": "../esm/Windowing/index.js",
-  "types": "../esm/Windowing/index.d.ts"
-}

package/cjs/Picker/SearchBar.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface SearchBarProps extends WithAsProps {
-    value?: string;
-    placeholder?: string;
-    className?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
-    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare const SearchBar: RsRefForwardingComponent<'div', SearchBarProps>;
-export default SearchBar;

package/esm/Picker/SearchBar.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface SearchBarProps extends WithAsProps {
-    value?: string;
-    placeholder?: string;
-    className?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
-    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare const SearchBar: RsRefForwardingComponent<'div', SearchBarProps>;
-export default SearchBar;

package/esm/Picker/SearchBar.js

@@ -1,53 +0,0 @@
-'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import PropTypes from 'prop-types';
-import Search from '@rsuite/icons/legacy/Search';
-import { useClassNames, useEventCallback } from '../utils';
-var SearchBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'picker-search-bar' : _props$classPrefix,
-    value = props.value,
-    children = props.children,
-    className = props.className,
-    placeholder = props.placeholder,
-    inputRef = props.inputRef,
-    onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "value", "children", "className", "placeholder", "inputRef", "onChange"]);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge,
-    prefix = _useClassNames.prefix;
-  var classes = merge(className, withClassPrefix());
-  var handleChange = useEventCallback(function (event) {
-    var _event$target;
-    onChange === null || onChange === void 0 ? void 0 : onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  });
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-    ref: ref,
-    className: classes
-  }), /*#__PURE__*/React.createElement("input", {
-    role: "searchbox",
-    className: prefix('input'),
-    value: value,
-    onChange: handleChange,
-    placeholder: placeholder,
-    ref: inputRef
-  }), /*#__PURE__*/React.createElement(Search, {
-    className: prefix('search-icon')
-  }), children);
-});
-SearchBar.displayName = 'SearchBar';
-SearchBar.propTypes = {
-  as: PropTypes.elementType,
-  classPrefix: PropTypes.string,
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  onChange: PropTypes.func
-};
-export default SearchBar;