rsuite 5.64.1 → 5.65.0

package/esm/DatePicker/DatePicker.js

@@ -2,7 +2,7 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject;
+var _templateObject, _templateObject2;
 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"];
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -501,9 +501,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inside: true,
     size: size,
     disabled: disabled,
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["input-group"]))),
     onClick: handleClick
   }), /*#__PURE__*/React.createElement(PickerLabel, {
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["label"]))),
     id: id + "-label"
   }, label), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-haspopup": "dialog",

package/esm/DateRangePicker/DateRangePicker.js

@@ -2,7 +2,7 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject;
+var _templateObject, _templateObject2;
 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"];
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import isNil from 'lodash/isNil';
@@ -776,10 +776,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext
   }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
     inside: true,
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["input-group"]))),
     disabled: disabled,
     size: size
   }), /*#__PURE__*/React.createElement(PickerLabel, {
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["label"]))),
     id: id + "-label"
   }, label), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-haspopup": "dialog",

package/esm/Message/Message.js

@@ -4,14 +4,15 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var _excluded = ["as", "bordered", "centered", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"];
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { STATUS } from "../internals/constants/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
-import { useClassNames, useTimeout, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
+import { useClassNames, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
+import { mergeRefs } from "../internals/utils/index.js";
 import { oneOf } from "../internals/propTypes/index.js";
 import CloseButton from "../internals/CloseButton/index.js";
-import ToastContext from "../toaster/ToastContext.js";
+import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 /**
  * The `Message` component is used to display important messages to users.
  * @see https://rsuitejs.com/components/message
@@ -44,12 +45,15 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var isMounted = useIsMounted();
-  var _useContext = useContext(ToastContext),
-    usedToaster = _useContext.usedToaster;
+  var targetRef = React.useRef(null);
 
   // Timed close message
-  var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
-    clear = _useTimeout.clear;
+  var _useDelayedClosure = useDelayedClosure({
+      targetRef: targetRef,
+      onClose: onClose,
+      duration: duration
+    }),
+    clear = _useDelayedClosure.clear;
   var handleClose = useEventCallback(function (event) {
     setDisplay('hiding');
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
@@ -71,7 +75,7 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "alert"
   }, rest, {
-    ref: ref,
+    ref: mergeRefs(targetRef, ref),
     className: classes
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["container"])))

package/esm/Notification/Notification.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export type MessageType = 'info' | 'success' | 'warning' | 'error';
+import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../internals/types';
 export interface NotificationProps extends WithAsProps {
     /** Title of the message */
     header?: React.ReactNode;
@@ -11,15 +10,20 @@ export interface NotificationProps extends WithAsProps {
      *
      * @default 4500
      * @deprecated Use `toaster.push(<Notification />, { duration: 4500 })` instead.
+     * @internal
      */
     duration?: number;
     /**
      * The remove button is displayed.
      */
     closable?: boolean;
-    /** Type of message */
-    type?: MessageType;
-    /** Callback after the message is removed */
+    /**
+     * Type of message
+     */
+    type?: TypeAttributes.Status;
+    /**
+     * Callback after the message is removed
+     */
     onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**

package/esm/Notification/Notification.js

@@ -4,13 +4,14 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2;
 var _excluded = ["as", "classPrefix", "closable", "duration", "className", "type", "header", "children", "onClose"];
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
-import { useClassNames, useTimeout, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
+import { useClassNames, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 import { oneOf } from "../internals/propTypes/index.js";
 import CloseButton from "../internals/CloseButton/index.js";
-import ToastContext from "../toaster/ToastContext.js";
+import { mergeRefs } from "../internals/utils/index.js";
+import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 /**
  * The `Notification` component is used to display global messages and notifications.
  *
@@ -38,12 +39,15 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var isMounted = useIsMounted();
-  var _useContext = useContext(ToastContext),
-    usedToaster = _useContext.usedToaster;
+  var targetRef = React.useRef(null);
 
   // Timed close message
-  var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
-    clear = _useTimeout.clear;
+  var _useDelayedClosure = useDelayedClosure({
+      targetRef: targetRef,
+      onClose: onClose,
+      duration: duration
+    }),
+    clear = _useDelayedClosure.clear;
 
   // Click to trigger to close the message
   var handleClose = useEventCallback(function (event) {
@@ -77,7 +81,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "alert"
   }, rest, {
-    ref: ref,
+    ref: mergeRefs(targetRef, ref),
     className: classes
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["content"])))

package/esm/Panel/PanelBody.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["classPrefix", "children", "collapsible", "expanded", "bodyFill", "role", "id", "labelId", "scrollShadow", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onScroll"],
+var _excluded = ["classPrefix", "children", "collapsible", "expanded", "bodyFill", "role", "id", "labelId", "scrollShadow", "className", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onScroll"],
   _excluded2 = ["className"];
 import React from 'react';
 import Collapse from "../Animation/Collapse.js";
@@ -18,6 +18,7 @@ var PanelBody = function PanelBody(props) {
     id = props.id,
     labelId = props.labelId,
     scrollShadow = props.scrollShadow,
+    className = props.className,
     onEnter = props.onEnter,
     onEntering = props.onEntering,
     onEntered = props.onEntered,
@@ -30,9 +31,9 @@ var PanelBody = function PanelBody(props) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var bodyClasses = withClassPrefix({
+  var bodyClasses = merge(className, withClassPrefix({
     fill: bodyFill
-  });
+  }));
   var renderBody = function renderBody(bodyProps) {
     return /*#__PURE__*/React.createElement(ScrollView, _extends({}, rest, bodyProps, {
       customScrollbar: true,

package/esm/Stack/HStack.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StackProps } from './Stack';
+export interface HStackProps extends Omit<StackProps, 'direction'> {
+    /**
+     * Reverse the order of the children in the stack
+     */
+    reverse?: boolean;
+}
+declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<unknown>>;
+export default HStack;

package/esm/Stack/HStack.js

@@ -0,0 +1,24 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["reverse", "spacing", "childrenRenderMode"];
+import React from 'react';
+import Stack from "./Stack.js";
+var HStack = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var reverse = props.reverse,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 6 : _props$spacing,
+    _props$childrenRender = props.childrenRenderMode,
+    childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var direction = reverse ? 'row-reverse' : 'row';
+  return /*#__PURE__*/React.createElement(Stack, _extends({
+    spacing: spacing,
+    childrenRenderMode: childrenRenderMode
+  }, rest, {
+    direction: direction,
+    ref: ref
+  }));
+});
+HStack.displayName = 'HStack';
+export default HStack;

package/esm/Stack/VStack.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StackProps } from './Stack';
+export interface VStackProps extends Omit<StackProps, 'direction'> {
+    reverse?: boolean;
+}
+declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<unknown>>;
+export default VStack;

package/esm/Stack/VStack.js

@@ -0,0 +1,27 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["reverse", "spacing", "alignItems", "childrenRenderMode"];
+import React from 'react';
+import Stack from "./Stack.js";
+var VStack = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var reverse = props.reverse,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 6 : _props$spacing,
+    _props$alignItems = props.alignItems,
+    alignItems = _props$alignItems === void 0 ? 'flex-start' : _props$alignItems,
+    _props$childrenRender = props.childrenRenderMode,
+    childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var direction = reverse ? 'column-reverse' : 'column';
+  return /*#__PURE__*/React.createElement(Stack, _extends({
+    spacing: spacing,
+    childrenRenderMode: childrenRenderMode,
+    alignItems: alignItems
+  }, rest, {
+    direction: direction,
+    ref: ref
+  }));
+});
+VStack.displayName = 'VStack';
+export default VStack;

package/esm/Stack/index.d.ts

@@ -1,3 +1,7 @@
 import Stack from './Stack';
 export type { StackProps } from './Stack';
+export type { HStackProps } from './HStack';
+export type { VStackProps } from './VStack';
+export { default as HStack } from './HStack';
+export { default as VStack } from './VStack';
 export default Stack;

package/esm/Stack/index.js

@@ -1,3 +1,5 @@
 'use client';
 import Stack from "./Stack.js";
+export { default as HStack } from "./HStack.js";
+export { default as VStack } from "./VStack.js";
 export default Stack;

package/esm/index.d.ts

@@ -167,8 +167,8 @@ export { default as Footer } from './Footer';
 export type { FooterProps } from './Footer';
 export { default as Divider } from './Divider';
 export type { DividerProps } from './Divider';
-export { default as Stack } from './Stack';
-export type { StackProps } from './Stack';
+export { default as Stack, HStack, VStack } from './Stack';
+export type { StackProps, HStackProps, VStackProps } from './Stack';
 export { default as Schema } from './Schema';
 export { default as Animation } from './Animation';
 export type { TransitionProps, SlideProps, CollapseProps, FadeProps, BounceProps } from './Animation';

package/esm/index.js

@@ -104,7 +104,7 @@ export { default as Header } from "./Header/index.js";
 export { default as Sidebar } from "./Sidebar/index.js";
 export { default as Footer } from "./Footer/index.js";
 export { default as Divider } from "./Divider/index.js";
-export { default as Stack } from "./Stack/index.js";
+export { default as Stack, HStack, VStack } from "./Stack/index.js";
 // Utils
 // --------------------------------------------------------
 export { default as Schema } from "./Schema/index.js";

package/esm/internals/types/index.d.ts

@@ -172,6 +172,7 @@ export declare namespace TypeAttributes {
     type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
     type Placement = Placement4 | Placement8 | PlacementAuto;
     type CheckTrigger = 'change' | 'blur' | 'none' | null;
+    type DisplayState = 'show' | 'hide' | 'hiding';
 }
 export interface SVGIcon {
     viewBox: string;

package/esm/toaster/ToastContainer.d.ts

@@ -11,15 +11,24 @@ export interface ToastContainerProps extends WithAsProps {
     placement?: PlacementType;
     /**
      * Set the message to appear in the specified container
-     *
      */
     container?: HTMLElement | (() => HTMLElement);
-    /** The number of milliseconds to wait before automatically closing a message. */
+    /**
+     * The number of milliseconds to wait before automatically closing a message.
+     */
     duration?: number;
+    /**
+     * Reset the hide timer if the mouse moves over the message.
+     */
+    mouseReset?: boolean;
+    /**
+     * Callback fired when the component mounts
+     */
     callback?: (ref: React.RefObject<ToastContainerInstance>) => void;
 }
 interface PushOptions {
     duration?: number;
+    mouseReset?: boolean;
 }
 export interface ToastContainerInstance {
     root: HTMLElement;

package/esm/toaster/ToastContainer.js

@@ -23,13 +23,19 @@ var useMessages = function useMessages() {
     return key;
   }, [messages]);
   var push = useCallback(function (message, options) {
+    var _ref = options || {},
+      duration = _ref.duration,
+      _ref$mouseReset = _ref.mouseReset,
+      mouseReset = _ref$mouseReset === void 0 ? true : _ref$mouseReset;
     var key = guid();
     setMessages(function (prevMessages) {
-      return [].concat(prevMessages, [_extends({
+      return [].concat(prevMessages, [{
         key: key,
         visible: true,
-        node: message
-      }, options)]);
+        node: message,
+        duration: duration,
+        mouseReset: mouseReset
+      }]);
     });
     return key;
   }, []);
@@ -100,8 +106,17 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   });
   var elements = messages.map(function (item) {
-    return /*#__PURE__*/React.createElement(Transition, {
-      key: item.key,
+    var mouseReset = item.mouseReset,
+      duration = item.duration,
+      node = item.node;
+    return /*#__PURE__*/React.createElement(ToastContext.Provider, {
+      value: {
+        usedToaster: true,
+        mouseReset: mouseReset,
+        duration: duration
+      },
+      key: item.key
+    }, /*#__PURE__*/React.createElement(Transition, {
       in: item.visible,
       exitedClassName: rootPrefix('toast-fade-exited'),
       exitingClassName: rootPrefix('toast-fade-exiting'),
@@ -109,31 +124,26 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       enteredClassName: rootPrefix('toast-fade-entered'),
       timeout: 300
     }, function (transitionProps, ref) {
-      var _item$node, _item$node$props, _item$node2, _item$node2$props;
+      var _node$props, _node$props2;
       var transitionClassName = transitionProps.className,
         rest = _objectWithoutPropertiesLoose(transitionProps, _excluded2);
-      return /*#__PURE__*/React.cloneElement(item.node, _extends({}, rest, {
+      return /*#__PURE__*/React.cloneElement(node, _extends({}, rest, {
         ref: ref,
-        duration: item.duration,
-        // Remove the message after the specified time.
-        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 () {
+        duration: duration,
+        onClose: createChainedFunction((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, function () {
           return remove(item.key);
         }),
-        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)
+        className: merge(rootPrefix('toast'), (_node$props2 = node.props) === null || _node$props2 === void 0 ? void 0 : _node$props2.className, transitionClassName)
       }));
-    });
+    }));
   });
-  return /*#__PURE__*/React.createElement(ToastContext.Provider, {
-    value: {
-      usedToaster: true
-    }
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: function ref(selfRef) {
       rootRef.current = selfRef;
       callback === null || callback === void 0 ? void 0 : callback(selfRef);
     },
     className: classes
-  }), elements));
+  }), elements);
 });
 ToastContainer.getInstance = function (props) {
   var container = props.container,

package/esm/toaster/ToastContext.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export interface ToastContextProps {
     usedToaster?: boolean;
+    duration?: number;
+    mouseReset?: boolean;
 }
 declare const ToastContext: React.Context<ToastContextProps>;
 export default ToastContext;

package/esm/toaster/hooks/useDelayedClosure.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+interface UseDelayedClosureProps {
+    /**
+     * Callback function to be called when the closure is triggered.
+     */
+    onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The duration (in milliseconds) after which the closure should be triggered.
+     */
+    duration: number;
+    /**
+     * Optional reference to the target element.
+     */
+    targetRef?: React.RefObject<HTMLElement>;
+    /**
+     * Reset the hide timer if the mouse moves over the target element.
+     */
+    mouseReset?: boolean;
+}
+/**
+ * A hook that delays the closure of the message box.
+ */
+declare function useDelayedClosure(props: UseDelayedClosureProps): {
+    clear: () => void;
+    reset: () => void;
+};
+export default useDelayedClosure;

package/esm/toaster/hooks/useDelayedClosure.js

@@ -0,0 +1,42 @@
+'use client';
+import { useContext, useRef } from 'react';
+import on from 'dom-lib/on';
+import { useTimeout, useMount } from "../../internals/hooks/index.js";
+import ToastContext from "../ToastContext.js";
+/**
+ * A hook that delays the closure of the message box.
+ */
+function useDelayedClosure(props) {
+  var onClose = props.onClose,
+    durationProp = props.duration,
+    targetRef = props.targetRef;
+  var _useContext = useContext(ToastContext),
+    usedToaster = _useContext.usedToaster,
+    _useContext$duration = _useContext.duration,
+    duration = _useContext$duration === void 0 ? durationProp : _useContext$duration,
+    mouseReset = _useContext.mouseReset;
+  var mouseEnterRef = useRef();
+  var mouseLeaveRef = useRef();
+  var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
+    clear = _useTimeout.clear,
+    reset = _useTimeout.reset;
+  useMount(function () {
+    if (targetRef !== null && targetRef !== void 0 && targetRef.current && mouseReset) {
+      if (mouseEnterRef.current || mouseLeaveRef.current) {
+        return;
+      }
+      mouseEnterRef.current = on(targetRef.current, 'mouseenter', clear);
+      mouseLeaveRef.current = on(targetRef.current, 'mouseleave', reset);
+      return function () {
+        var _mouseEnterRef$curren, _mouseLeaveRef$curren;
+        (_mouseEnterRef$curren = mouseEnterRef.current) === null || _mouseEnterRef$curren === void 0 ? void 0 : _mouseEnterRef$curren.off();
+        (_mouseLeaveRef$curren = mouseLeaveRef.current) === null || _mouseLeaveRef$curren === void 0 ? void 0 : _mouseLeaveRef$curren.off();
+      };
+    }
+  });
+  return {
+    clear: clear,
+    reset: reset
+  };
+}
+export default useDelayedClosure;

package/internals/Picker/styles/index.less

@@ -44,7 +44,7 @@
       color: var(--rs-text-disabled) !important;
     }
 
-    .rs-picker-value-count{
+    .rs-picker-value-count {
       opacity: 0.5;
     }
   }
@@ -110,11 +110,16 @@
     align-items: center;
   }
 
-  &-error > .rs-input-group {
-    border-color: var(--rs-state-error) !important;
+  &-error > .rs-picker-input-group {
+    border-color: var(--rs-picker-state-error);
+
+    &:hover {
+      border-color: var(--rs-picker-state-error);
+    }
 
     &:focus-within {
-      outline: var(--rs-state-error-outline) !important;
+      border-color: var(--rs-picker-state-error);
+      outline: var(--rs-picker-state-error-outline);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.64.1",
+  "version": "5.65.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -27,7 +27,6 @@
     "@babel/runtime": "^7.20.1",
     "@juggle/resize-observer": "^3.4.0",
     "@rsuite/icons": "^1.0.2",
-    "@types/chai": "^4.3.3",
     "@types/lodash": "^4.14.184",
     "@types/prop-types": "^15.7.5",
     "@types/react-window": "^1.8.5",
@@ -38,7 +37,6 @@
     "prop-types": "^15.8.1",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
-    "rsuite": "^5.64.0",
     "rsuite-table": "^5.18.3",
     "schema-typed": "^2.2.2"
   },

package/styles/color-modes/dark.less

@@ -342,6 +342,7 @@
   --rs-timeline-indicator-active-bg: var(--rs-primary-500);
 
   // Table
+  --rs-table-border-color: var(--rs-border-secondary);
   --rs-table-shadow: rgba(9, 9, 9, 0.99);
   --rs-table-sort: var(--rs-primary-500);
   --rs-table-resize: var(--rs-primary-500);

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

@@ -354,6 +354,7 @@
   --rs-timeline-indicator-active-bg: var(--rs-primary-500);
 
   // Table
+  --rs-table-border-color: var(--rs-border-secondary);
   --rs-table-shadow: rgba(9, 9, 9, 0.99);
   --rs-table-sort: var(--rs-primary-500);
   --rs-table-resize: var(--rs-primary-500);

package/styles/color-modes/light.less

@@ -364,6 +364,7 @@
   --rs-timeline-indicator-active-bg: var(--rs-primary-500);
 
   // Table
+  --rs-table-border-color: var(--rs-border-secondary);
   --rs-table-shadow: rgba(9, 9, 9, 0.08);
   --rs-table-sort: var(--rs-primary-500);
   --rs-table-resize: var(--rs-primary-500);
@@ -387,6 +388,8 @@
   --rs-picker-value: var(--rs-primary-700);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: #fff;
+  --rs-picker-state-error: var(--rs-state-error);
+  --rs-picker-state-error-outline: var(--rs-state-error-outline);
 
   // Calendar
   --rs-calendar-today-bg: var(--rs-primary-500);

package/styles/color-modes.less

@@ -11,7 +11,8 @@
   }
 }
 
-// TODO consider adding flag for high-contrast theme
-.rs-theme-high-contrast {
-  @import 'color-modes/high-contrast';
+& when (@enable-high-contrast = true) {
+  .rs-theme-high-contrast {
+    @import 'color-modes/high-contrast';
+  }
 }

package/styles/mixins/color-modes.less

@@ -8,7 +8,9 @@
 }
 
 .high-contrast-mode(@rules) {
-  .rs-theme-high-contrast & {
-    @rules();
+  & when (@enable-high-contrast = true) {
+    .rs-theme-high-contrast & {
+      @rules();
+    }
   }
 }

package/styles/variables.less

@@ -23,6 +23,9 @@
 // Whether include styles for dark mode
 @enable-dark-mode:      true;
 
+// Whether include styles for high-contrast mode
+@enable-high-contrast:  true;
+
 // Media queries breakpoints
 // Define the breakpoints at which your layout will change, adapting to different screen sizes.