rsuite 5.2.3 → 5.2.4

package/esm/Carousel/Carousel.d.ts

@@ -10,7 +10,7 @@ export interface CarouselProps extends WithAsProps {
     /** Button shape */
     shape?: 'dot' | 'bar';
     /** Callback fired when the active item changes */
-    onSelect: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition starts */
     onSlideStart?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition ends */

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -406,10 +406,13 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
   usePublicMethods(ref, {
+    rootRef: inline ? treeViewRef : null,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleClean = useCallback(function (event) {
     var target = event.target; // exclude searchBar
 
@@ -630,7 +633,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, style) : {};
     return /*#__PURE__*/React.createElement("div", {
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? mergeRefs(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       role: "tree",
       "aria-multiselectable": true,
       className: classes,

package/esm/DateRangePicker/Calendar.d.ts

@@ -3,7 +3,7 @@ import { CalendarProps as CalendarCoreProps } from '../Calendar/Calendar';
 import { ValueType } from './types';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 import { DatePickerLocale } from '../locales';
-declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate';
+declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'onToggleMeridian';
 export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, OmitCalendarCoreTypes> {
     calendarDate?: ValueType;
     disabledDate?: (date: Date, selectValue: ValueType, type: string) => boolean;
@@ -15,6 +15,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     locale?: DatePickerLocale;
     onChangeCalendarDate?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
+    onToggleMeridian: (index: number, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     showOneCalendar?: boolean;

package/esm/DateRangePicker/Calendar.js

@@ -5,6 +5,15 @@ import React, { useCallback, useState } from 'react';
 import { addMonths, isAfter, isSameMonth, setDate } from '../utils/dateUtils';
 import CalendarCore, { CalendarState } from '../Calendar/Calendar';
 import { DATERANGE_DISABLED_TARGET } from '../utils';
+
+/**
+ * Omit the time in the date, which is used to compare and judge the date.
+ * eg: isAfter/isBefore
+ */
+function omitTime(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? CalendarCore : _props$as,
@@ -18,10 +27,11 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
       onChangeCalendarTime = props.onChangeCalendarTime,
+      onToggleMeridian = props.onToggleMeridian,
       showOneCalendar = props.showOneCalendar,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
 
   var _useState = useState(),
       calendarState = _useState[0],
@@ -40,6 +50,9 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleChangePageTime = useCallback(function (nextPageDate) {
     onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
+  var handleToggleMeridian = useCallback(function (event) {
+    onToggleMeridian(index, event);
+  }, [index, onToggleMeridian]);
   var toggleMonthDropdown = useCallback(function () {
     setCalendarState(calendarState === CalendarState.DROP_MONTH ? undefined : CalendarState.DROP_MONTH);
   }, [calendarState]);
@@ -59,22 +72,30 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
   var disabledBackward = useCallback(function () {
-    var after = isAfter(setDate(calendarDate[1], 1), setDate(addMonths(calendarDate[0], 1), 1));
-
+    // Do not disable the Backward button on the first calendar.
     if (index === 0) {
       return false;
     }
 
+    var startDate = setDate(addMonths(calendarDate[0], 1), 1);
+    var endDate = setDate(omitTime(calendarDate[1]), 1);
+    var after = isAfter(endDate, startDate);
     return !after;
   }, [calendarDate, index]);
   var disabledForward = useCallback(function () {
-    if (showOneCalendar) return false;
-    var after = isAfter(setDate(calendarDate[1], 1), setDate(addMonths(calendarDate[0], 1), 1));
+    // If only one calendar is displayed, do not disable
+    if (showOneCalendar) {
+      return false;
+    } // Do not disable the Forward button on the second calendar.
+
 
     if (index === 1) {
       return false;
     }
 
+    var startDate = setDate(addMonths(omitTime(calendarDate[0]), 1), 1);
+    var endDate = setDate(omitTime(calendarDate[1]), 1);
+    var after = isAfter(endDate, startDate);
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = useCallback(function (date) {
@@ -110,6 +131,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onToggleMonthDropdown: toggleMonthDropdown,
     onToggleTimeDropdown: toggleTimeDropdown,
+    onToggleMeridian: handleToggleMeridian,
     calendarDate: getCalendarDate(),
     ref: ref
   }));

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -19,6 +19,8 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     showWeekNumbers?: boolean;
     /** Show only one calendar select */
     showOneCalendar?: boolean;
+    /** Meridian format */
+    showMeridian?: boolean;
     /** Set default date for calendar */
     defaultCalendarValue?: ValueType;
     /** The character that separates two dates */

package/esm/DateRangePicker/DateRangePicker.js

@@ -52,6 +52,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$showOneCalenda = props.showOneCalendar,
       showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
       showWeekNumbers = props.showWeekNumbers,
+      showMeridian = props.showMeridian,
       style = props.style,
       toggleAs = props.toggleAs,
       valueProp = props.value,
@@ -64,7 +65,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOk = props.onOk,
       onOpen = props.onOpen,
       onSelect = props.onSelect,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -344,6 +345,22 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     handleChangeCalendarDate(index, date);
   }, [handleChangeCalendarDate]);
+  /**
+   * The callback triggered when PM/AM is switched.
+   */
+
+  var handleToggleMeridian = useCallback(function (index) {
+    var next = Array.from(calendarDate);
+    var clonedDate = new Date(next[index].valueOf());
+    var hours = DateUtils.getHours(clonedDate);
+    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
+    next[index] = DateUtils.setHours(clonedDate, nextHours);
+    setCalendarDate(next); // If the value already exists, update the value again.
+
+    if (selectValue.length === 2) {
+      setSelectValue(next);
+    }
+  }, [calendarDate, selectValue]);
   /**
    * Toolbar operation callback function
    */
@@ -511,10 +528,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showOneCalendar: showOneCalendar,
       showWeekNumbers: showWeekNumbers,
       value: selectValue,
+      showMeridian: showMeridian,
       onChangeCalendarDate: handleChangeCalendarDate,
       onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
-      onSelect: handleSelectValueChange
+      onSelect: handleSelectValueChange,
+      onToggleMeridian: handleToggleMeridian
     };
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       className: classes,
@@ -609,11 +628,12 @@ DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
   isoWeek: PropTypes.bool,
   oneTap: PropTypes.bool,
   limitEndYear: PropTypes.number,
-  showWeekNumbers: PropTypes.bool,
   onChange: PropTypes.func,
   onOk: PropTypes.func,
   disabledDate: PropTypes.func,
   onSelect: PropTypes.func,
+  showWeekNumbers: PropTypes.bool,
+  showMeridian: PropTypes.bool,
   showOneCalendar: PropTypes.bool
 });
 export default DateRangePicker;

package/esm/Picker/VirtualizedList.d.ts

@@ -1,9 +1,36 @@
 import React from 'react';
 import { ListProps, ListRowProps } from 'react-virtualized/dist/commonjs/List';
 import { AutoSizerProps } from 'react-virtualized/dist/commonjs/AutoSizer';
+import type { Alignment } from 'react-virtualized';
 export interface ListInstance {
-    child: Element;
-    scrollToRow?: (index: number) => void;
+    /**
+     * Forcefully re-render the inner Grid component.
+     */
+    forceUpdateGrid(): void;
+    /**
+     * Gets offset for a given row and alignment.
+     */
+    getOffsetForRow(params: {
+        alignment?: Alignment;
+        index?: number;
+    }): number;
+    /**
+     * Pre-measure all rows in a List.
+     */
+    measureAllRows(): void;
+    /**
+     * Recompute row heights and offsets after the specified index (defaults to 0).
+     */
+    recomputeRowHeights(index?: number): void;
+    /**
+     * Scroll to the specified offset. Useful for animating position changes.
+     */
+    scrollToPosition(scrollTop?: number): void;
+    /**
+     * Ensure row is visible. This method can be used to safely scroll back to a cell
+     * that a user has scrolled away from even if it was previously scrolled to.
+     */
+    scrollToRow(index?: number): void;
 }
 export type { ListProps, AutoSizerProps, ListRowProps };
 export declare const List: React.ComponentType<ListProps>;

package/esm/Picker/utils.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { OverlayTriggerInstance } from './PickerToggleTrigger';
 import { TypeAttributes, ItemDataType } from '../@types/common';
+import { ListInstance } from './VirtualizedList';
 interface NodeKeys {
     valueKey: string;
     childrenKey: string;
@@ -103,25 +104,16 @@ export declare function useSearch(props: SearchProps): {
     checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
     handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
 };
-interface Refs {
+interface PickerDependentParameters {
     triggerRef?: React.RefObject<OverlayTriggerInstance>;
-    rootRef?: React.RefObject<HTMLElement>;
+    rootRef?: React.RefObject<any>;
     overlayRef?: React.RefObject<HTMLElement>;
     targetRef?: React.RefObject<HTMLElement>;
+    listRef?: React.RefObject<ListInstance>;
+    inline?: boolean;
 }
 /**
  * A hook of the exposed method of Picker
- *
- * {
- *   root: Element;
- *   overlay: Element;
- *   target?: Element;
- *   updatePosition:() => void;
- *   open:() => void;
- *   close:() => void;
- * }
- * @param ref
- * @param params
  */
-export declare function usePublicMethods(ref: any, { triggerRef, overlayRef, targetRef, rootRef }: Refs, disabled?: boolean): void;
+export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
 export {};

package/esm/Picker/utils.js

@@ -376,9 +376,15 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
 
       if (event.key.length === 1 && /\w/.test(event.key)) {
-        var _searchInputRef$curre;
+        var _event$target;
 
-        searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        // Exclude Input
+        // eg: <SelectPicker renderExtraFooter={() => <Input />} />
+        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {
+          var _searchInputRef$curre;
+
+          (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        }
       }
     }
 
@@ -455,23 +461,14 @@ export function useSearch(props) {
 
 /**
  * A hook of the exposed method of Picker
- *
- * {
- *   root: Element;
- *   overlay: Element;
- *   target?: Element;
- *   updatePosition:() => void;
- *   open:() => void;
- *   close:() => void;
- * }
- * @param ref
- * @param params
  */
-export function usePublicMethods(ref, _ref, disabled) {
-  var triggerRef = _ref.triggerRef,
-      overlayRef = _ref.overlayRef,
-      targetRef = _ref.targetRef,
-      rootRef = _ref.rootRef;
+export function usePublicMethods(ref, parmas) {
+  var triggerRef = parmas.triggerRef,
+      overlayRef = parmas.overlayRef,
+      targetRef = parmas.targetRef,
+      rootRef = parmas.rootRef,
+      listRef = parmas.listRef,
+      inline = parmas.inline;
   var handleOpen = useCallback(function () {
     var _triggerRef$current3;
 
@@ -487,10 +484,9 @@ export function usePublicMethods(ref, _ref, disabled) {
 
     (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
   }, [triggerRef]);
-
-  if (!disabled) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useImperativeHandle(ref, function () {
+  useImperativeHandle(ref, function () {
+    // Tree and CheckTree
+    if (inline) {
       return {
         get root() {
           var _triggerRef$current6;
@@ -498,18 +494,43 @@ export function usePublicMethods(ref, _ref, disabled) {
           return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
         },
 
-        get overlay() {
-          return overlayRef.current;
-        },
+        get list() {
+          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+            throw new Error('The list is not found, please set `virtualized` for the component.');
+          }
 
-        get target() {
-          return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-        },
+          return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+        }
 
-        updatePosition: handleUpdatePosition,
-        open: handleOpen,
-        close: handleClose
       };
-    });
-  }
+    }
+
+    return {
+      get root() {
+        var _triggerRef$current7;
+
+        return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root;
+      },
+
+      get overlay() {
+        return overlayRef.current;
+      },
+
+      get target() {
+        return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
+      },
+
+      get list() {
+        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+          throw new Error("\n            The list is not found.\n            1.Please set virtualized for the component.\n            2.Please confirm whether the picker is open.\n          ");
+        }
+
+        return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+      },
+
+      updatePosition: handleUpdatePosition,
+      open: handleOpen,
+      close: handleClose
+    };
+  });
 }

package/esm/TreePicker/TreePicker.js

@@ -412,10 +412,13 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
   }, [activeNode, setSearchKeyword, valueKey]);
   usePublicMethods(ref, {
+    rootRef: inline ? treeViewRef : null,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleFocusItem = useCallback(function (key) {
     var focusableItems = getFocusableItems(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -627,7 +630,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       role: "tree",
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? mergeRefs(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       className: classes,
       style: styles,
       onKeyDown: inline ? handleTreeKeyDown : undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,7 +37,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.2.1",
+    "rsuite-table": "^5.2.2",
     "schema-typed": "^2.0.2"
   },
   "peerDependencies": {