rsuite 5.45.0 → 5.46.1

package/cjs/DatePicker/DatePicker.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
+var _delay = _interopRequireDefault(require("lodash/delay"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
@@ -22,9 +23,11 @@ var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _utils = require("../utils");
+var _dateUtils = require("../utils/dateUtils");
 var _Picker = require("../Picker");
 var _OverlayTrigger = require("../Overlay/OverlayTrigger");
 var _deprecatePropType = require("../utils/deprecatePropType");
+var _utils2 = require("../Calendar/utils");
 var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -98,12 +101,17 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     calendarDate = _useCalendarDate.calendarDate,
     setCalendarDate = _useCalendarDate.setCalendarDate,
     resetCalendarDate = _useCalendarDate.resetCalendarDate;
-  var _useState = (0, _react.useState)(),
-    inputState = _useState[0],
-    setInputState = _useState[1];
-  var _useState2 = (0, _react.useState)(false),
-    active = _useState2[0],
-    setActive = _useState2[1];
+  var _useState = (0, _react.useState)(false),
+    showMonthDropdown = _useState[0],
+    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);
+  var showMonth = onlyShowMonth || showMonthDropdown;
+  var _useState2 = (0, _react.useState)(),
+    inputState = _useState2[0],
+    setInputState = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    active = _useState3[0],
+    setActive = _useState3[1];
   var triggerRef = (0, _react.useRef)(null);
   var rootRef = (0, _react.useRef)(null);
   var targetRef = (0, _react.useRef)(null);
@@ -157,9 +165,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * The callback triggered when PM/AM is switched.
    */
   var handleToggleMeridian = (0, _react.useCallback)(function () {
-    var hours = _utils.DateUtils.getHours(calendarDate);
+    var hours = (0, _dateUtils.getHours)(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = _utils.DateUtils.setHours(calendarDate, nextHours);
+    var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);
     handleChangeTime(nextDate);
   }, [calendarDate, handleChangeTime]);
   var updateValue = (0, _react.useCallback)(function (event, nextPageDate, closeOverlay) {
@@ -189,13 +197,57 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);
   }, [handleDateChange, onShortcutClick, updateValue]);
 
+  /**
+   * Get the corresponding container based on date selection and month selection
+   */
+  var getOverlayContainer = (0, _react.useCallback)(function () {
+    var _overlayRef$current;
+    return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(showMonth ? '[role="menu"]' : '[role="grid"]');
+  }, [showMonth]);
+
+  /**
+   * Check whether the date is focusable
+   */
+  var checkFocusable = (0, _react.useCallback)(function (date) {
+    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
+    var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);
+    var container = getOverlayContainer();
+    var dateElement = container.querySelector("[aria-label=\"" + ariaLabel + "\"]");
+    if (dateElement !== null && dateElement !== void 0 && dateElement.hasAttribute('aria-disabled')) {
+      return false;
+    }
+    return true;
+  }, [formatDate, getOverlayContainer, locale, showMonth]);
+
+  /**
+   * Focus on the currently selected date element
+   */
+  var focusSelectedDate = (0, _react.useCallback)(function () {
+    (0, _delay.default)(function () {
+      var container = getOverlayContainer();
+      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected="true"]');
+      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();
+    }, 1);
+  }, [getOverlayContainer]);
+
+  /**
+   * Focus on the input element
+   */
+  var focusTargetButton = (0, _react.useCallback)(function () {
+    (0, _delay.default)(function () {
+      var _targetRef$current, _targetRef$current$qu;
+      (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$qu = _targetRef$current.querySelector('input')) === null || _targetRef$current$qu === void 0 ? void 0 : _targetRef$current$qu.focus();
+    }, 100);
+  }, []);
+
   /**
    * The callback triggered after clicking the OK button.
    */
   var handleOK = (0, _react.useCallback)(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
-  }, [updateValue, onOk, calendarDate]);
+    focusTargetButton();
+  }, [updateValue, onOk, calendarDate, focusTargetButton]);
 
   /**
    * Callback after clicking the clear button.
@@ -204,6 +256,54 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     updateValue(event, null);
     resetCalendarDate(null);
   }, [resetCalendarDate, updateValue]);
+  var handlePickerToggleKeyDown = (0, _react.useCallback)(function (event) {
+    var _event$target;
+    var tagName = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName;
+    if (tagName === 'INPUT') {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        focusSelectedDate();
+      } else if (event.key === 'Enter') {
+        var _triggerRef$current2, _triggerRef$current2$;
+        (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
+      }
+    }
+  }, [focusSelectedDate]);
+  var handlePickerOverlayKeyDown = (0, _react.useCallback)(function (event) {
+    var delta = 0;
+    var step = showMonth ? 6 : 7;
+    var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;
+    (0, _Picker.onMenuKeyDown)(event, {
+      down: function down() {
+        delta = step;
+      },
+      up: function up() {
+        delta = -step;
+      },
+      right: function right() {
+        delta = 1;
+      },
+      left: function left() {
+        delta = -1;
+      },
+      enter: function enter() {
+        handleOK(event);
+      }
+    });
+    var nextDate = changeDateFunc(calendarDate, delta);
+    if (checkFocusable(nextDate)) {
+      setCalendarDate(nextDate);
+      focusSelectedDate();
+    }
+  }, [showMonth, calendarDate, checkFocusable, handleOK, setCalendarDate, focusSelectedDate]);
+
+  /**
+   * The callback triggered after the month selection box is opened or closed.
+   */
+  var handleToggleMonthDropdown = (0, _react.useCallback)(function (toggle) {
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
+    setShowMonthDropdown(toggle);
+  }, [onToggleMonthDropdown]);
 
   /**
    * Handle keyboard events.
@@ -211,8 +311,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     triggerRef: triggerRef,
     targetRef: targetRef,
+    overlayRef: overlayRef,
     active: active,
-    onExit: handleClean
+    onExit: handleClean,
+    onKeyDown: handlePickerToggleKeyDown
   }, rest));
 
   /**
@@ -224,18 +326,18 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     setCalendarDate(
     // Determine whether the current value contains time, if not, use calendarDate.
-    _utils.DateUtils.shouldRenderTime(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {
-      return _utils.DateUtils.setHours(d, _utils.DateUtils.getHours(calendarDate));
+    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {
+      return (0, _dateUtils.setHours)(d, (0, _dateUtils.getHours)(calendarDate));
     }, function (d) {
-      return _utils.DateUtils.setMinutes(d, _utils.DateUtils.getMinutes(calendarDate));
+      return (0, _dateUtils.setMinutes)(d, (0, _dateUtils.getMinutes)(calendarDate));
     }, function (d) {
-      return _utils.DateUtils.setSeconds(d, _utils.DateUtils.getSeconds(calendarDate));
+      return (0, _dateUtils.setSeconds)(d, (0, _dateUtils.getSeconds)(calendarDate));
     })(nextValue));
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
     }
-  }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);
+  }, [setCalendarDate, formatStr, handleDateChange, oneTap, calendarDate, updateValue]);
 
   /**
    *  A callback triggered when the date on the calendar changes.
@@ -243,13 +345,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
-
-    // Show only the calendar month panel. formatStr = 'yyyy-MM'
-    var onlyShowMonth = _utils.DateUtils.shouldRenderMonth(formatStr) && !_utils.DateUtils.shouldRenderDate(formatStr);
+    focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
     }
-  }, [formatStr, handleDateChange, oneTap, setCalendarDate, updateValue]);
+  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);
   var isDateDisabled = (0, _react.useCallback)(function (date) {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date);
@@ -268,7 +368,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
-    if (!_utils.DateUtils.isMatch(value, formatStr, {
+    if (!(0, _dateUtils.isMatch)(value, formatStr, {
       locale: locale.dateLocale
     })) {
       setInputState('Error');
@@ -277,10 +377,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var date = parseDate(value, formatStr);
 
     // If only the time is included in the characters, it will default to today.
-    if (_utils.DateUtils.shouldOnlyRenderTime(formatStr)) {
-      date = new Date(_utils.DateUtils.format(new Date(), 'yyyy-MM-dd') + " " + value);
+    if ((0, _dateUtils.shouldOnlyRenderTime)(formatStr)) {
+      date = new Date((0, _dateUtils.format)(new Date(), 'yyyy-MM-dd') + " " + value);
     }
-    if (!_utils.DateUtils.isValid(date)) {
+    if (!(0, _dateUtils.isValid)(date)) {
       setInputState('Error');
       return;
     }
@@ -321,7 +421,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var disabledToolbarHandle = (0, _react.useCallback)(function (date) {
     var _DEPRECATED_disabledD;
     var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;
-    var allowTime = _utils.DateUtils.disabledTime(props, date);
+    var allowTime = (0, _dateUtils.disabledTime)(props, date);
     return allowDate || allowTime;
   }, [DEPRECATED_disabledDate, props]);
 
@@ -332,13 +432,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
   var isOKButtonDisabled = (0, _react.useCallback)(function (selectedDate) {
-    if (_utils.DateUtils.shouldRenderMonth(formatStr) && !_utils.DateUtils.shouldRenderDate(formatStr)) {
+    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {
       return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
     }
     return disabledToolbarHandle(selectedDate);
   }, [disabledToolbarHandle, formatStr]);
   var calendarProps = (0, _react.useMemo)(function () {
-    return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
+    return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
         var _disabledOrHiddenTime;
         return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;
@@ -361,15 +461,19 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onMoveBackward: handleMoveBackward,
     onSelect: handleSelect,
-    onToggleMonthDropdown: onToggleMonthDropdown,
+    onToggleMonthDropdown: handleToggleMonthDropdown,
     onToggleTimeDropdown: onToggleTimeDropdown,
     onChangeMonth: handleChangeMonth,
     onChangeTime: handleChangeTime,
     onToggleMeridian: handleToggleMeridian
   }));
+
+  // The shortcut option on the left side of the calendar panel
   var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
     return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
   })) || [];
+
+  // The shortcut option on the bottom of the calendar panel
   var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
     return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
   })) || [];
@@ -387,7 +491,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: classes,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       style: styles,
-      target: triggerRef
+      target: triggerRef,
+      onKeyDown: handlePickerOverlayKeyDown
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
@@ -428,20 +533,22 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
   var caretAs = (0, _react.useMemo)(function () {
-    return caretAsProp || (_utils.DateUtils.shouldOnlyRenderTime(formatStr) ? _ClockO.default : _Calendar.default);
+    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
   }, [caretAsProp, formatStr]);
+  var handleTriggerClose = (0, _react.useCallback)(function (cause) {
+    // Unless overlay is closing on user clicking "OK" button,
+    // reset the selected date on calendar panel
+    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
+      resetCalendarDate();
+    }
+    setShowMonthDropdown(false);
+  }, [resetCalendarDate]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: triggerRef,
     placement: placement,
-    onClose: function onClose(cause) {
-      // Unless overlay is closing on user clicking "OK" button,
-      // reset the selected date on calendar panel
-      if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
-        resetCalendarDate();
-      }
-    },
+    onClose: handleTriggerClose,
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderDropdownMenu
@@ -449,7 +556,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: merge(className, classes),
     style: style,
     ref: rootRef
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
     className: prefix({
       error: inputState === 'Error'
     }),
@@ -459,7 +566,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editable: editable,
     inputValue: value ? formatDate(value, formatStr) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
-    inputMask: _utils.DateUtils.getDateMask(formatStr),
+    inputMask: (0, _dateUtils.getDateMask)(formatStr),
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,

package/cjs/InputPicker/InputPicker.js

@@ -150,9 +150,12 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return multi ? (0, _clone.default)(value) || [] : value;
   }, [multi, value]);
   var handleClose = (0, _react.useCallback)(function () {
-    var _triggerRef$current;
+    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;
     triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
-  }, [triggerRef]);
+
+    // The focus is on the trigger button after closing
+    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
+  }, []);
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
@@ -658,7 +661,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     plaintext: plaintext,
     ref: targetRef,
     as: toggleAs,
-    tabIndex: undefined,
+    tabIndex: tabIndex,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
@@ -670,7 +673,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["tag-wrapper"])))
   }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {
-    tabIndex: tabIndex,
+    tabIndex: -1,
     readOnly: readOnly,
     onBlur: onBlur,
     onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),

package/cjs/Picker/PickerToggle.js

@@ -148,6 +148,8 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, [editable, onInputPressEnter, onInputBackspace]);
   var renderInput = (0, _react.useCallback)(function (ref, props) {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+      type: "text",
+      autoComplete: "off",
       ref: (0, _utils.mergeRefs)(inputRef, ref),
       name: name,
       style: {
@@ -197,6 +199,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     },
     "data-testid": "spinner"
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextMask.default, {
+    keepCharPositions: true,
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,

package/cjs/Picker/utils.js

@@ -194,6 +194,12 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
   var _useState3 = (0, _react.useState)([]),
     keys = _useState3[0],
     setKeys = _useState3[1];
+  var focusCallback = (0, _react.useCallback)(function (value, event) {
+    var menu = (0, _isFunction.default)(target) ? target() : target;
+    var focusElement = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-key=\"" + value + "\"]");
+    focusElement === null || focusElement === void 0 ? void 0 : focusElement.focus();
+    callback === null || callback === void 0 ? void 0 : callback(value, event);
+  }, [callback, target]);
   var getScrollContainer = (0, _react.useCallback)(function () {
     var menu = (0, _isFunction.default)(target) ? target() : target;
 
@@ -279,11 +285,11 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       var focusItem = items[nextIndex];
       if (!(0, _isUndefined.default)(focusItem)) {
         setFocusItemValue(focusItem[valueKey]);
-        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);
+        focusCallback(focusItem[valueKey], event);
         scrollListItem('bottom', focusItem[valueKey], willOverflow);
       }
     });
-  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);
+  }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
   var focusPrevMenuItem = (0, _react.useCallback)(function (event) {
     findFocusItemIndex(function (items, index) {
       var willOverflow = index === 0;
@@ -291,11 +297,11 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       var focusItem = items[nextIndex];
       if (!(0, _isUndefined.default)(focusItem)) {
         setFocusItemValue(focusItem[valueKey]);
-        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);
+        focusCallback(focusItem[valueKey], event);
         scrollListItem('top', focusItem[valueKey], willOverflow);
       }
     });
-  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);
+  }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
   var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {
     var menu = (0, _isFunction.default)(target) ? target() : target;
     var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
@@ -315,9 +321,9 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       setKeys(nextKeys);
       setLayer(nextLayer);
       setFocusItemValue(nextKeys[0]);
-      callback === null || callback === void 0 ? void 0 : callback(nextKeys[0], event);
+      focusCallback(nextKeys[0], event);
     }
-  }, [callback, getSubMenuKeys, layer]);
+  }, [focusCallback, getSubMenuKeys, layer]);
   var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {
     var nextLayer = layer - 1;
     var nextKeys = getSubMenuKeys(nextLayer);
@@ -331,10 +337,10 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];
       if (parentItemValue) {
         setFocusItemValue(parentItemValue);
-        callback === null || callback === void 0 ? void 0 : callback(parentItemValue, event);
+        focusCallback(parentItemValue, event);
       }
     }
-  }, [callback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);
+  }, [focusCallback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var _onMenuKeyDown;
     onMenuKeyDown(event, (_onMenuKeyDown = {
@@ -376,10 +382,13 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     onMenuPressEnter = props.onMenuPressEnter,
     onMenuPressBackspace = props.onMenuPressBackspace;
   var handleClose = (0, _react.useCallback)(function () {
-    var _triggerRef$current, _triggerRef$current$c;
+    var _triggerRef$current, _triggerRef$current$c, _targetRef$current, _targetRef$current$fo;
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
+
+    // The focus is on the trigger button after closing
+    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, triggerRef]);
+  }, [onClose, targetRef, triggerRef]);
   var handleOpen = (0, _react.useCallback)(function () {
     var _triggerRef$current2, _triggerRef$current2$;
     (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
@@ -541,8 +550,8 @@ function usePublicMethods(ref, parmas) {
         return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;
       },
       get target() {
-        var _targetRef$current;
-        return (_targetRef$current = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current !== void 0 ? _targetRef$current : null;
+        var _targetRef$current2;
+        return (_targetRef$current2 = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current2 !== void 0 ? _targetRef$current2 : null;
       },
       get list() {
         if (!(listRef !== null && listRef !== void 0 && listRef.current)) {

package/cjs/RangeSlider/RangeSlider.js

@@ -36,6 +36,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     progress = _props$progress === void 0 ? true : _props$progress,
     vertical = props.vertical,
     disabled = props.disabled,
+    readOnly = props.readOnly,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,
     _props$min = props.min,
@@ -55,7 +56,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     renderMark = props.renderMark,
     onChange = props.onChange,
     onChangeCommitted = props.onChangeCommitted,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "constraint", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "constraint", "defaultValue", "graduated", "progress", "vertical", "disabled", "readOnly", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
   var barRef = (0, _react.useRef)(null);
 
   // Define the parameter position of the handle
@@ -168,6 +169,9 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * Callback function that is fired when the mousemove is triggered
    */
   var handleDragMove = (0, _utils.useEventCallback)(function (event, dataset) {
+    if (disabled || readOnly) {
+      return;
+    }
     var nextValue = getNextValue(event, dataset);
     if (isRangeMatchingConstraint(nextValue)) {
       setValue(nextValue);
@@ -179,12 +183,15 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * Callback function that is fired when the mouseup is triggered
    */
   var handleChangeCommitted = (0, _react.useCallback)(function (event, dataset) {
+    if (disabled || readOnly) {
+      return;
+    }
     var nextValue = getNextValue(event, dataset);
     if (isRangeMatchingConstraint(nextValue)) {
       setValue(nextValue);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
     }
-  }, [getNextValue, onChangeCommitted, isRangeMatchingConstraint, setValue]);
+  }, [disabled, readOnly, getNextValue, isRangeMatchingConstraint, setValue, onChangeCommitted]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var _event$target;
     var _event$target$dataset = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target['dataset'],
@@ -225,8 +232,8 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     }
   }, [max, min, onChange, rtl, isRangeMatchingConstraint, setValue, step, value]);
-  var handleClick = (0, _react.useCallback)(function (event) {
-    if (disabled) {
+  var handleBarClick = (0, _react.useCallback)(function (event) {
+    if (disabled || readOnly) {
       return;
     }
     var start = value[0],
@@ -245,8 +252,9 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (isRangeMatchingConstraint(nextValue)) {
       setValue(nextValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
     }
-  }, [disabled, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, setValue, value]);
+  }, [disabled, readOnly, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, onChangeCommitted, setValue, value]);
   var handleProps = (0, _react.useMemo)(function () {
     return [{
       value: value[0],
@@ -287,7 +295,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: merge(barClassName, prefix('bar')),
     ref: barRef,
-    onClick: handleClick
+    onClick: handleBarClick
   }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     rtl: rtl,
     vertical: vertical,

package/cjs/Slider/Slider.js

@@ -90,9 +90,9 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix({
     vertical: vertical,
     disabled: disabled,
-    readOnly: readOnly,
     graduated: graduated,
-    'with-mark': renderMark
+    'with-mark': renderMark,
+    readonly: readOnly
   }));
   var max = (0, _react.useMemo)(function () {
     return (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min);
@@ -166,6 +166,10 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var nextValue = getValidValue(getValueByPosition(event));
     onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
   }, [disabled, getValidValue, getValueByPosition, onChangeCommitted, readOnly]);
+  var handleClickBar = (0, _react.useCallback)(function (event) {
+    handleChangeValue(event);
+    handleChangeCommitted(event);
+  }, [handleChangeCommitted, handleChangeValue]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var nextValue;
     var increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';
@@ -207,7 +211,7 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
-    onClick: handleChangeValue
+    onClick: handleClickBar
   }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     rtl: rtl,
     vertical: vertical,

package/cjs/Table/Table.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Column, TableProps, RowDataType, TableInstance, CellProps as TableCellProps } from 'rsuite-table';
-export interface CellProps<T = any> extends Omit<TableCellProps, 'rowData' | 'dataKey'> {
+import { Column, TableProps, RowDataType, TableInstance, CellProps as TableCellProps, RowKeyType } from 'rsuite-table';
+export interface CellProps<Row extends RowDataType> extends Omit<TableCellProps<Row>, 'rowData' | 'dataKey'> {
     /** Data binding key, but also a sort of key */
-    dataKey?: string | keyof T;
+    dataKey?: string | keyof Row;
     /** Row Data */
-    rowData?: T;
+    rowData?: Row;
 }
-declare const _default: (<Row extends RowDataType<never>, Key>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
-    Cell: React.ForwardRefExoticComponent<import("rsuite-table/lib/Cell").InnerCellProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: (<Row extends RowDataType<any>, Key extends RowKeyType>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Cell: <Row_1 extends RowDataType<any>, Key_1 extends RowKeyType>(props: import("rsuite-table/lib/Cell").InnerCellProps<Row_1, Key_1> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     Column: typeof Column;
-    HeaderCell: React.ForwardRefExoticComponent<import("rsuite-table").HeaderCellProps & React.RefAttributes<HTMLDivElement>>;
+    HeaderCell: <Row_2 extends RowDataType<any>, Key_2 extends RowKeyType>(props: import("rsuite-table").HeaderCellProps<Row_2, Key_2> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     ColumnGroup: React.ForwardRefExoticComponent<import("rsuite-table").ColumnGroupProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;