rsuite 5.2.3 → 5.2.4

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [5.2.4](https://github.com/rsuite/rsuite/compare/v5.2.3...v5.2.4) (2021-12-03)
+
+### Bug Fixes
+
+- **Carousel:** make onSelect prop optional ([#2170](https://github.com/rsuite/rsuite/issues/2170)) ([c4d7a63](https://github.com/rsuite/rsuite/commit/c4d7a63f4ec71ebb05d92b04bd26ebe547609dd0))
+- **DateRangePicker:** fix DateRangePicker cannot switch am/pm ([#2171](https://github.com/rsuite/rsuite/issues/2171)) ([4c55db9](https://github.com/rsuite/rsuite/commit/4c55db9a3a96927589d4366ece1f329c011ccb0f))
+- **pickers:** fix custom input in Picker cannot be focused ([#2176](https://github.com/rsuite/rsuite/issues/2176)) ([8a94bd6](https://github.com/rsuite/rsuite/commit/8a94bd6f9640995e017716fe69b68912c55e4c86))
+- **Table:** fix the column of grouping cannot be centered ([#2168](https://github.com/rsuite/rsuite/issues/2168)) ([4fbe460](https://github.com/rsuite/rsuite/commit/4fbe460da4e9744eee8589233b305b7e15295e41))
+- **tree:** expose methods for tree that can scroll the list ([#2178](https://github.com/rsuite/rsuite/issues/2178)) ([0a6f9ee](https://github.com/rsuite/rsuite/commit/0a6f9ee57ed33477472f2ad41c06d5242d3d62d5))
+
 ## [5.2.3](https://github.com/rsuite/rsuite/compare/v5.2.2...v5.2.3) (2021-11-26)
 
 ### Bug Fixes

package/Table/styles/index.less

@@ -342,10 +342,6 @@
     &-cell {
       position: absolute;
       border-right: 1px solid var(--rs-border-secondary);
-
-      &-content {
-        display: table-cell;
-      }
     }
   }
 }

package/cjs/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/cjs/CheckTreePicker/CheckTreePicker.js

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

package/cjs/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/cjs/DateRangePicker/Calendar.js

@@ -21,6 +21,14 @@ var _Calendar = _interopRequireWildcard(require("../Calendar/Calendar"));
 
 var _utils = require("../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.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Calendar.default : _props$as,
@@ -34,10 +42,11 @@ var Calendar = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -56,6 +65,9 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
     onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
+  var handleToggleMeridian = (0, _react.useCallback)(function (event) {
+    onToggleMeridian(index, event);
+  }, [index, onToggleMeridian]);
   var toggleMonthDropdown = (0, _react.useCallback)(function () {
     setCalendarState(calendarState === _Calendar.CalendarState.DROP_MONTH ? undefined : _Calendar.CalendarState.DROP_MONTH);
   }, [calendarState]);
@@ -75,22 +87,30 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
   var disabledBackward = (0, _react.useCallback)(function () {
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1));
-
+    // Do not disable the Backward button on the first calendar.
     if (index === 0) {
       return false;
     }
 
+    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index]);
   var disabledForward = (0, _react.useCallback)(function () {
-    if (showOneCalendar) return false;
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.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 = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(omitTime(calendarDate[0]), 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
@@ -126,6 +146,7 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onToggleMonthDropdown: toggleMonthDropdown,
     onToggleTimeDropdown: toggleTimeDropdown,
+    onToggleMeridian: handleToggleMeridian,
     calendarDate: getCalendarDate(),
     ref: ref
   }));

package/cjs/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/cjs/DateRangePicker/DateRangePicker.js

@@ -78,6 +78,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       _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,
@@ -90,7 +91,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onOk = props.onOk,
       onOpen = props.onOpen,
       onSelect = props.onSelect,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -370,6 +371,24 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     handleChangeCalendarDate(index, date);
   }, [handleChangeCalendarDate]);
+  /**
+   * The callback triggered when PM/AM is switched.
+   */
+
+  var handleToggleMeridian = (0, _react.useCallback)(function (index) {
+    var next = Array.from(calendarDate);
+    var clonedDate = new Date(next[index].valueOf());
+
+    var hours = _utils.DateUtils.getHours(clonedDate);
+
+    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
+    next[index] = _utils.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
    */
@@ -535,10 +554,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showOneCalendar: showOneCalendar,
       showWeekNumbers: showWeekNumbers,
       value: selectValue,
+      showMeridian: showMeridian,
       onChangeCalendarDate: handleChangeCalendarDate,
       onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
-      onSelect: handleSelectValueChange
+      onSelect: handleSelectValueChange,
+      onToggleMeridian: handleToggleMeridian
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       className: classes,
@@ -634,11 +655,12 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   isoWeek: _propTypes.default.bool,
   oneTap: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
-  showWeekNumbers: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   onOk: _propTypes.default.func,
   disabledDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
+  showWeekNumbers: _propTypes.default.bool,
+  showMeridian: _propTypes.default.bool,
   showOneCalendar: _propTypes.default.bool
 });
 var _default = DateRangePicker;

package/cjs/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/cjs/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/cjs/Picker/utils.js

@@ -405,9 +405,15 @@ 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();
+        }
       }
     }
 
@@ -486,23 +492,14 @@ 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
  */
-function usePublicMethods(ref, _ref, disabled) {
-  var triggerRef = _ref.triggerRef,
-      overlayRef = _ref.overlayRef,
-      targetRef = _ref.targetRef,
-      rootRef = _ref.rootRef;
+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 = (0, _react.useCallback)(function () {
     var _triggerRef$current3;
 
@@ -518,10 +515,9 @@ 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
-    (0, _react.useImperativeHandle)(ref, function () {
+  (0, _react.useImperativeHandle)(ref, function () {
+    // Tree and CheckTree
+    if (inline) {
       return {
         get root() {
           var _triggerRef$current6;
@@ -529,18 +525,43 @@ 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/cjs/TreePicker/TreePicker.js

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

package/dist/rsuite-rtl.css

@@ -13880,9 +13880,6 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   border-left: 1px solid #f2f2f5;
   border-left: 1px solid var(--rs-border-secondary);
 }
-.rs-table-column-group-cell-content {
-  display: table-cell;
-}
 .rs-table-cell-expand-wrapper {
   margin-left: 10px;
   display: inline-block;