rsuite 5.71.0 → 5.73.0

package/esm/InlineEdit/renderChildren.js

@@ -4,12 +4,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["onBlur"];
 import React from 'react';
 import Input from "../Input/index.js";
+import { createChainedFunction } from "../internals/utils/index.js";
 export function defaultRenderInput(props, ref) {
   return /*#__PURE__*/React.createElement(Input, _extends({
     ref: ref
   }, props));
 }
-var pickers = ['DatePicker', 'DateRangePicker', 'InputPicker', 'TagPicker', 'Cascader', 'MultiCascader', 'SelectPicker', 'CheckPicker', 'CheckTreePicker', 'TreePicker'];
+var pickers = ['DatePicker', 'DateRangePicker', 'TimePicker', 'TimeRangePicker', 'InputPicker', 'TagPicker', 'Cascader', 'MultiCascader', 'SelectPicker', 'CheckPicker', 'CheckTreePicker', 'TreePicker'];
 function getDisplayName(Component) {
   var _Component$type;
   if (typeof (Component === null || Component === void 0 ? void 0 : Component.type) === 'string') {
@@ -24,10 +25,18 @@ export function renderChildren(children, props, ref) {
   if (pickers.includes(getDisplayName(children))) {
     var onBlur = props.onBlur,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
-
-    // if the children is a picker, we should pass the onBlur to the onClose
+    var _children$props = children.props,
+      onExit = _children$props.onExit,
+      onClean = _children$props.onClean;
     return /*#__PURE__*/React.cloneElement(children, _extends({}, rest, {
-      onClose: onBlur,
+      // Pass onBlur to the child component to automatically save or cancel after the focus event is processed.
+      // Special handling in the Picker component, call onBlur when onExit and onClean
+      onExit: createChainedFunction(function () {
+        return onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+      }, onExit),
+      onClean: createChainedFunction(function () {
+        return onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+      }, onClean),
       ref: ref
     }));
   }

package/esm/InlineEdit/useFocusEvent.d.ts

@@ -3,8 +3,8 @@ import { PickerHandle } from '../internals/Picker/types';
 interface FocusEventProps {
     isEditing: boolean;
     stateOnBlur?: 'save' | 'cancel';
-    onSave?: (event?: React.FocusEvent) => void;
-    onCancel?: (event?: React.FocusEvent) => void;
+    onSave?: (event?: React.FocusEvent | null) => void;
+    onCancel?: (event?: React.FocusEvent | null) => void;
 }
 declare const useFocusEvent: ({ isEditing, stateOnBlur, onSave, onCancel }: FocusEventProps) => {
     target: import("react").RefObject<HTMLInputElement | PickerHandle>;

package/esm/InlineEdit/useFocusEvent.js

@@ -15,12 +15,17 @@ var useFocusEvent = function useFocusEvent(_ref) {
   var focus = function focus() {
     if (isPicker) {
       setTimeout(function () {
-        var _ref$current2, _ref$current2$target, _ref$current2$target$;
-        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$target = _ref$current2.target) === null || _ref$current2$target === void 0 ? void 0 : (_ref$current2$target$ = _ref$current2$target.focus) === null || _ref$current2$target$ === void 0 ? void 0 : _ref$current2$target$.call(_ref$current2$target);
+        var _picker$target, _picker$target$focus, _picker$open;
+        var picker = ref.current;
+        // Auto focus the search input
+        picker === null || picker === void 0 ? void 0 : (_picker$target = picker.target) === null || _picker$target === void 0 ? void 0 : (_picker$target$focus = _picker$target.focus) === null || _picker$target$focus === void 0 ? void 0 : _picker$target$focus.call(_picker$target);
+
+        // Open the picker
+        picker === null || picker === void 0 ? void 0 : (_picker$open = picker.open) === null || _picker$open === void 0 ? void 0 : _picker$open.call(picker);
       }, 100);
     } else {
-      var _ref$current3, _ref$current3$focus;
-      (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : (_ref$current3$focus = _ref$current3.focus) === null || _ref$current3$focus === void 0 ? void 0 : _ref$current3$focus.call(_ref$current3);
+      var _ref$current2, _ref$current2$focus;
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$focus = _ref$current2.focus) === null || _ref$current2$focus === void 0 ? void 0 : _ref$current2$focus.call(_ref$current2);
     }
   };
   var handleBlur = useEventCallback(function (event) {

package/esm/MultiCascadeTree/TreeView.js

@@ -4,8 +4,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "columnWidth", "columnHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderTreeNode", "renderColumn", "onCheck", "onSelect"];
 import React from 'react';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
-import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
-import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
+import PagePreviousIcon from '@rsuite/icons/PagePrevious';
+import PageNextIcon from '@rsuite/icons/PageNext';
 import { useClassNames, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { shallowEqual } from "../internals/utils/index.js";
 import { ListCheckItem, useCombobox } from "../internals/Picker/index.js";
@@ -84,7 +84,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     // Use `value` in keys when If `value` is string or number
     var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
-    var Icon = node.loading ? SpinnerIcon : rtl ? AngleLeftIcon : AngleRightIcon;
+    var Icon = node.loading ? SpinnerIcon : rtl ? PagePreviousIcon : PageNextIcon;
     var active = value.some(function (v) {
       return v === nodeValue;
     });

package/esm/Nav/NavDropdownItem.d.ts

@@ -1,6 +1,6 @@
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import React from 'react';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface NavDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Active the current option */
     active?: boolean;

package/esm/Nav/NavDropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StandardProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface NavDropdownMenuProps<T = any> extends StandardProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;

package/esm/Nav/NavDropdownMenu.js

@@ -16,8 +16,8 @@ import MenuItem from "../internals/Menu/MenuItem.js";
 import { useClassNames, useCustom } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 import PropTypes from 'prop-types';
-import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
-import AngleRight from '@rsuite/icons/legacy/AngleRight';
+import PagePreviousIcon from '@rsuite/icons/PagePrevious';
+import PageNextIcon from '@rsuite/icons/PageNext';
 import NavContext from "./NavContext.js";
 import { deprecatePropType, oneOf } from "../internals/propTypes/index.js";
 /**
@@ -60,7 +60,7 @@ var NavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = _omit.className,
     disabled = _omit.disabled,
     menuProps = _objectWithoutPropertiesLoose(_omit, _excluded2);
-  var Icon = rtl ? AngleLeft : AngleRight;
+  var Icon = rtl ? PagePreviousIcon : PageNextIcon;
   return /*#__PURE__*/React.createElement(Menu, {
     openMenuOn: ['mouseover', 'click'],
     renderMenuButton: function renderMenuButton(_ref, buttonRef) {

package/esm/Nav/NavItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface NavItemProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Activation status */
     active?: boolean;

package/esm/Navbar/NavbarDropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import Button from '../Button';
 import NavDropdownItem from '../Nav/NavDropdownItem';
 import NavDropdownMenu from '../Nav/NavDropdownMenu';

package/esm/Navbar/NavbarDropdownItem.d.ts

@@ -1,6 +1,6 @@
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import React from 'react';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface NavbarDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Active the current option */
     active?: boolean;

package/esm/Navbar/NavbarDropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StandardProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface NavbarDropdownMenuProps<T = any> extends StandardProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;

package/esm/Navbar/NavbarDropdownMenu.js

@@ -11,8 +11,8 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import isNil from 'lodash/isNil';
-import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
-import AngleRight from '@rsuite/icons/legacy/AngleRight';
+import PagePreviousIcon from '@rsuite/icons/PagePrevious';
+import PageNextIcon from '@rsuite/icons/PageNext';
 import { mergeRefs } from "../internals/utils/index.js";
 import { useClassNames, useCustom } from "../internals/hooks/index.js";
 import { NavbarContext } from '.';
@@ -66,7 +66,7 @@ var NavbarDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = _omit.className,
     disabled = _omit.disabled,
     menuProps = _objectWithoutPropertiesLoose(_omit, _excluded2);
-  var Icon = rtl ? AngleLeft : AngleRight;
+  var Icon = rtl ? PagePreviousIcon : PageNextIcon;
   return /*#__PURE__*/React.createElement(Disclosure, {
     hideOnClickOutside: true,
     trigger: ['click', 'hover'],

package/esm/Navbar/NavbarItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 export interface NavbarItemProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Activation status */

package/esm/Pagination/Pagination.js

@@ -7,19 +7,19 @@ var _excluded = ["as", "className", "classPrefix", "disabled", "locale", "active
   _excluded2 = ["eventKey", "disabled"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import More from '@rsuite/icons/legacy/More';
-import PagePrevious from '@rsuite/icons/legacy/PagePrevious';
-import PageNext from '@rsuite/icons/legacy/PageNext';
-import PageTop from '@rsuite/icons/legacy/PageTop';
-import PageEnd from '@rsuite/icons/legacy/PageEnd';
+import MoreIcon from '@rsuite/icons/More';
+import PagePreviousIcon from '@rsuite/icons/PagePrevious';
+import PageTopIcon from '@rsuite/icons/PageTop';
+import PageNextIcon from '@rsuite/icons/PageNext';
+import PageEndIcon from '@rsuite/icons/PageEnd';
 import PaginationButton from "./PaginationButton.js";
 import { useClassNames, useCustom } from "../internals/hooks/index.js";
 var PAGINATION_ICONS = {
-  more: /*#__PURE__*/React.createElement(More, null),
-  prev: /*#__PURE__*/React.createElement(PagePrevious, null),
-  next: /*#__PURE__*/React.createElement(PageNext, null),
-  first: /*#__PURE__*/React.createElement(PageTop, null),
-  last: /*#__PURE__*/React.createElement(PageEnd, null)
+  more: /*#__PURE__*/React.createElement(MoreIcon, null),
+  prev: /*#__PURE__*/React.createElement(PagePreviousIcon, null),
+  next: /*#__PURE__*/React.createElement(PageNextIcon, null),
+  first: /*#__PURE__*/React.createElement(PageTopIcon, null),
+  last: /*#__PURE__*/React.createElement(PageEndIcon, null)
 };
 /**
  * Pagination component for displaying page numbers.

package/esm/Panel/AccordionButton.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject;
 var _excluded = ["classPrefix", "expanded", "id", "className", "controlId", "children", "disabled", "caretAs"];
 import React from 'react';
-import { Icon } from '@rsuite/icons';
+import Icon from '@rsuite/icons/Icon';
 import AngleDownIcon from '@rsuite/icons/legacy/AngleDown';
 import { useClassNames } from "../internals/hooks/index.js";
 var AccordionButton = function AccordionButton(props) {

package/esm/Sidenav/ExpandedSidenavDropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
     /** Define the title as a submenu */
     title?: React.ReactNode;

package/esm/Sidenav/ExpandedSidenavDropdownItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Active the current option */
     active?: boolean;

package/esm/Sidenav/ExpandedSidenavDropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface SidenavDropdownMenuProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLLIElement>, 'title' | 'onSelect'> {
     /** Primary content */
     children?: React.ReactNode;

package/esm/Sidenav/SidenavDropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import Button from '../Button';
 import NavDropdownItem from '../Nav/NavDropdownItem';
 import NavDropdownMenu from '../Nav/NavDropdownMenu';

package/esm/Sidenav/SidenavDropdownItem.d.ts

@@ -1,6 +1,6 @@
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import React from 'react';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Active the current option */
     active?: boolean;

package/esm/Sidenav/SidenavDropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StandardProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface SidenavDropdownMenuProps<T = any> extends StandardProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;

package/esm/Sidenav/SidenavItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface SidenavItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Activation status */
     active?: boolean;

package/esm/Sidenav/SidenavToggle.js

@@ -4,10 +4,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["as", "expanded", "className", "classPrefix", "onToggle"];
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import PagePreviousIcon from '@rsuite/icons/PagePrevious';
+import PageNextIcon from '@rsuite/icons/PageNext';
 import IconButton from "../IconButton/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
-import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
-import AngleRight from '@rsuite/icons/legacy/AngleRight';
 import { deprecatePropType } from "../internals/propTypes/index.js";
 import { SidenavContext } from "./Sidenav.js";
 var SidenavToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -33,7 +33,7 @@ var SidenavToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix({
     collapsed: !expanded
   }));
-  var Icon = expanded ? AngleLeft : AngleRight;
+  var Icon = expanded ? PagePreviousIcon : PageNextIcon;
   var handleToggle = function handleToggle(event) {
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded, event);
   };

package/esm/Steps/StepItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
 export interface StepItemProps extends WithAsProps {
     /** The width of each item. */

package/esm/TimePicker/TimePicker.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { RangeType } from '../DatePicker';
+import type { FormControlBaseProps, PickerBaseProps } from '../internals/types';
+import type { PickerComponent } from '../internals/Picker/types';
+import type { DatePickerLocale } from '../locales';
+export interface TimePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
+    /**
+     * Custom caret component
+     */
+    caretAs?: React.ElementType | null;
+    /**
+     * Calendar panel default presentation date and time
+     */
+    calendarDefaultDate?: Date;
+    /**
+     * Whether disabled the component
+     */
+    disabled?: boolean;
+    /**
+     * Rendered as an input, the date can be entered via the keyboard
+     */
+    editable?: boolean;
+    /**
+     * Format date string
+     */
+    format?: string;
+    /**
+     * A label displayed at the beginning of toggle button
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether to display a loading state indicator
+     */
+    loading?: boolean;
+    /**
+     * Whether plaintext the component
+     */
+    plaintext?: boolean;
+    /**
+     * Whether read only the component
+     */
+    readOnly?: boolean;
+    /**
+     * Meridiem format for 12-hour time
+     */
+    showMeridiem?: boolean;
+    /**
+     * Hide specific hour options
+     */
+    hideHours?: (hour: number, date: Date) => boolean;
+    /**
+     * Hide specific minute options
+     */
+    hideMinutes?: (minute: number, date: Date) => boolean;
+    /**
+     * Hide specific second options
+     */
+    hideSeconds?: (second: number, date: Date) => boolean;
+    /**
+     * Called when the option is selected
+     */
+    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
+    /**
+     * Called after clicking the OK button
+     */
+    onOk?: (date: Date, event: React.SyntheticEvent) => void;
+    /**
+     * Called after clicking the shortcut button
+     */
+    onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
+    /**
+     * Called when clean
+     */
+    onClean?: (event: React.MouseEvent) => void;
+    /**
+     * Custom rendering of the selected date.
+     */
+    renderValue?: (value: Date, format: string) => string;
+}
+declare const TimePicker: PickerComponent<TimePickerProps>;
+export default TimePicker;

package/esm/TimePicker/TimePicker.js

@@ -0,0 +1,24 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useMemo } from 'react';
+import DatePicker from "../DatePicker/index.js";
+import { useCustom } from "../internals/hooks/index.js";
+var TimePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale;
+  var defaultRanges = useMemo(function () {
+    return [{
+      label: locale.now,
+      value: function value() {
+        return new Date();
+      }
+    }];
+  }, [locale]);
+  return /*#__PURE__*/React.createElement(DatePicker, _extends({
+    ref: ref,
+    format: locale.shortTimeFormat,
+    ranges: defaultRanges
+  }, props));
+});
+TimePicker.displayName = 'TimePicker';
+export default TimePicker;

package/esm/TimePicker/index.d.ts

@@ -0,0 +1,3 @@
+import TimePicker from './TimePicker';
+export type { TimePickerProps } from './TimePicker';
+export default TimePicker;

package/esm/TimePicker/index.js

@@ -0,0 +1,3 @@
+'use client';
+import TimePicker from "./TimePicker.js";
+export default TimePicker;

package/esm/TimeRangePicker/TimeRangePicker.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import { RangeType, DateRange } from '../DateRangePicker';
+import type { FormControlBaseProps, PickerBaseProps } from '../internals/types';
+import type { PickerComponent } from '../internals/Picker/types';
+import type { DatePickerLocale } from '../locales';
+export interface TimeRangePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<DateRange | null> {
+    /**
+     * Custom caret component
+     */
+    caretAs?: React.ElementType | null;
+    /** Predefined date ranges */
+    ranges?: RangeType[];
+    /**
+     * Format of the date displayed in the input box
+     */
+    format?: string;
+    /**
+     * Rendered as an input, the date can be entered via the keyboard.
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * A label displayed at the beginning of toggle button
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether to display a loading state indicator
+     */
+    loading?: boolean;
+    /**
+     * Meridiem format for 12-hour time
+     */
+    showMeridiem?: boolean;
+    /**
+     * Whether to display the formatted date range at the header of the calendar
+     */
+    showHeader?: boolean;
+    /**
+     * The character that separates two dates
+     * @default ' ~ '
+     */
+    character?: string;
+    /**
+     * Hide specific hour options
+     */
+    hideHours?: (hour: number, date: Date) => boolean;
+    /**
+     * Hide specific minute options
+     */
+    hideMinutes?: (minute: number, date: Date) => boolean;
+    /**
+     * Hide specific second options
+     */
+    hideSeconds?: (second: number, date: Date) => boolean;
+    /**
+     * Called after clicking the OK button
+     */
+    onOk?: (date: DateRange, event: React.SyntheticEvent) => void;
+    /**
+     * Called after clicking the shortcut button
+     */
+    onShortcutClick?: (range: RangeType, event: React.MouseEvent) => void;
+    /**
+     * Called when the value is cleared
+     */
+    onClean?: (event: React.MouseEvent) => void;
+    /**
+     * Custom rendering of the selected date range.
+     */
+    renderValue?: (value: DateRange, format: string) => string;
+    /**
+     * Custom render for calendar title
+     */
+    renderTitle?: (date: Date) => React.ReactNode;
+}
+declare const TimeRangePicker: PickerComponent<TimeRangePickerProps>;
+export default TimeRangePicker;

package/esm/TimeRangePicker/TimeRangePicker.js

@@ -0,0 +1,18 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { useCustom } from "../internals/hooks/index.js";
+import DateRangePicker from "../DateRangePicker/index.js";
+var defaultRanges = [];
+var TimeRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale;
+  return /*#__PURE__*/React.createElement(DateRangePicker, _extends({
+    ref: ref,
+    showHeader: false,
+    format: locale.shortTimeFormat,
+    ranges: defaultRanges
+  }, props));
+});
+TimeRangePicker.displayName = 'TimeRangePicker';
+export default TimeRangePicker;

package/esm/TimeRangePicker/index.d.ts

@@ -0,0 +1,3 @@
+import TimeRangePicker from './TimeRangePicker';
+export type { TimeRangePickerProps } from './TimeRangePicker';
+export default TimeRangePicker;

package/esm/TimeRangePicker/index.js

@@ -0,0 +1,3 @@
+'use client';
+import TimeRangePicker from "./TimeRangePicker.js";
+export default TimeRangePicker;

package/esm/index.d.ts

@@ -105,10 +105,14 @@ export { default as DateInput } from './DateInput';
 export type { DateInputProps } from './DateInput';
 export { default as DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export { default as TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker';
 export { default as DateRangeInput } from './DateRangeInput';
 export type { DateRangeInputProps } from './DateRangeInput';
 export { default as DateRangePicker } from './DateRangePicker';
 export type { DateRangePickerProps } from './DateRangePicker';
+export { default as TimeRangePicker } from './TimeRangePicker';
+export type { TimeRangePickerProps } from './TimeRangePicker';
 export { default as AutoComplete } from './AutoComplete';
 export type { AutoCompleteProps } from './AutoComplete';
 export { default as Uploader } from './Uploader';

package/esm/index.js

@@ -69,8 +69,10 @@ export { default as Cascader } from "./Cascader/index.js";
 export { default as MultiCascader } from "./MultiCascader/index.js";
 export { default as DateInput } from "./DateInput/index.js";
 export { default as DatePicker } from "./DatePicker/index.js";
+export { default as TimePicker } from "./TimePicker/index.js";
 export { default as DateRangeInput } from "./DateRangeInput/index.js";
 export { default as DateRangePicker } from "./DateRangePicker/index.js";
+export { default as TimeRangePicker } from "./TimeRangePicker/index.js";
 export { default as AutoComplete } from "./AutoComplete/index.js";
 export { default as Uploader } from "./Uploader/index.js";
 export { default as Slider } from "./Slider/index.js";

package/esm/internals/Picker/ListItemGroup.js

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2;
 var _excluded = ["as", "classPrefix", "children", "className"];
 import React from 'react';
 import { useClassNames } from "../hooks/index.js";
-import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
+import ArrowDownIcon from '@rsuite/icons/ArrowDown';
 var ListItemGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -28,7 +28,7 @@ var ListItemGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["title"]))),
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement("span", null, children), /*#__PURE__*/React.createElement(ArrowDown, {
+  }, /*#__PURE__*/React.createElement("span", null, children), /*#__PURE__*/React.createElement(ArrowDownIcon, {
     "aria-hidden": true,
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["caret"])))
   })));

package/esm/internals/Picker/Listbox.js

@@ -69,7 +69,8 @@ var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
+    merge = _useClassNames.merge,
+    rootPrefix = _useClassNames.rootPrefix;
   var groupable = typeof groupBy !== 'undefined';
   var classes = merge(className, withClassPrefix('items', {
     grouped: groupable
@@ -230,7 +231,8 @@ var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
       height: height || maxHeight,
       itemCount: rowCount,
       itemData: filteredItems,
-      itemSize: getRowHeight.bind(_this, filteredItems)
+      itemSize: getRowHeight.bind(_this, filteredItems),
+      className: rootPrefix('virt-list')
     }, listProps), renderItem);
   }) : filteredItems.map(function (item, index) {
     return renderItem({