rsuite 5.45.0 → 5.46.0

package/esm/DatePicker/DatePicker.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
+import delay from 'lodash/delay';
 import debounce from 'lodash/debounce';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
@@ -15,10 +16,12 @@ import { isEveryDateInMonth } from '../Calendar/MonthDropdown';
 import Toolbar from './Toolbar';
 import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
-import { composeFunctions, createChainedFunction, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
-import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
+import { composeFunctions, createChainedFunction, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
+import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, addMonths, addDays, setMinutes, getMinutes, setSeconds, getSeconds, isValid, format, getDateMask, disabledTime, isMatch, calendarOnlyProps } from '../utils/dateUtils';
+import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, onMenuKeyDown } from '../Picker';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
 import { deprecatePropTypeNew } from '../utils/deprecatePropType';
+import { getAriaLabel } from '../Calendar/utils';
 var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -92,12 +95,17 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     calendarDate = _useCalendarDate.calendarDate,
     setCalendarDate = _useCalendarDate.setCalendarDate,
     resetCalendarDate = _useCalendarDate.resetCalendarDate;
-  var _useState = useState(),
-    inputState = _useState[0],
-    setInputState = _useState[1];
-  var _useState2 = useState(false),
-    active = _useState2[0],
-    setActive = _useState2[1];
+  var _useState = useState(false),
+    showMonthDropdown = _useState[0],
+    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
+  var showMonth = onlyShowMonth || showMonthDropdown;
+  var _useState2 = useState(),
+    inputState = _useState2[0],
+    setInputState = _useState2[1];
+  var _useState3 = useState(false),
+    active = _useState3[0],
+    setActive = _useState3[1];
   var triggerRef = useRef(null);
   var rootRef = useRef(null);
   var targetRef = useRef(null);
@@ -151,9 +159,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * The callback triggered when PM/AM is switched.
    */
   var handleToggleMeridian = useCallback(function () {
-    var hours = DateUtils.getHours(calendarDate);
+    var hours = getHours(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = DateUtils.setHours(calendarDate, nextHours);
+    var nextDate = setHours(calendarDate, nextHours);
     handleChangeTime(nextDate);
   }, [calendarDate, handleChangeTime]);
   var updateValue = useCallback(function (event, nextPageDate, closeOverlay) {
@@ -183,13 +191,57 @@ var DatePicker = /*#__PURE__*/React.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 = 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 = useCallback(function (date) {
+    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
+    var ariaLabel = 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 = useCallback(function () {
+    delay(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 = useCallback(function () {
+    delay(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 = 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.
@@ -198,6 +250,54 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     updateValue(event, null);
     resetCalendarDate(null);
   }, [resetCalendarDate, updateValue]);
+  var handlePickerToggleKeyDown = 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 = useCallback(function (event) {
+    var delta = 0;
+    var step = showMonth ? 6 : 7;
+    var changeDateFunc = showMonth ? addMonths : addDays;
+    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 = useCallback(function (toggle) {
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
+    setShowMonthDropdown(toggle);
+  }, [onToggleMonthDropdown]);
 
   /**
    * Handle keyboard events.
@@ -205,8 +305,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
+    overlayRef: overlayRef,
     active: active,
-    onExit: handleClean
+    onExit: handleClean,
+    onKeyDown: handlePickerToggleKeyDown
   }, rest));
 
   /**
@@ -218,18 +320,18 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setCalendarDate(
     // Determine whether the current value contains time, if not, use calendarDate.
-    DateUtils.shouldRenderTime(formatStr) ? nextValue : composeFunctions(function (d) {
-      return DateUtils.setHours(d, DateUtils.getHours(calendarDate));
+    shouldRenderTime(formatStr) ? nextValue : composeFunctions(function (d) {
+      return setHours(d, getHours(calendarDate));
     }, function (d) {
-      return DateUtils.setMinutes(d, DateUtils.getMinutes(calendarDate));
+      return setMinutes(d, getMinutes(calendarDate));
     }, function (d) {
-      return DateUtils.setSeconds(d, DateUtils.getSeconds(calendarDate));
+      return setSeconds(d, 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.
@@ -237,13 +339,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleChangeMonth = useCallback(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
-
-    // Show only the calendar month panel. formatStr = 'yyyy-MM'
-    var onlyShowMonth = DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr);
+    focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
     }
-  }, [formatStr, handleDateChange, oneTap, setCalendarDate, updateValue]);
+  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);
   var isDateDisabled = useCallback(function (date) {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date);
@@ -262,7 +362,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
-    if (!DateUtils.isMatch(value, formatStr, {
+    if (!isMatch(value, formatStr, {
       locale: locale.dateLocale
     })) {
       setInputState('Error');
@@ -271,10 +371,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var date = parseDate(value, formatStr);
 
     // If only the time is included in the characters, it will default to today.
-    if (DateUtils.shouldOnlyRenderTime(formatStr)) {
-      date = new Date(DateUtils.format(new Date(), 'yyyy-MM-dd') + " " + value);
+    if (shouldOnlyRenderTime(formatStr)) {
+      date = new Date(format(new Date(), 'yyyy-MM-dd') + " " + value);
     }
-    if (!DateUtils.isValid(date)) {
+    if (!isValid(date)) {
       setInputState('Error');
       return;
     }
@@ -315,7 +415,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var disabledToolbarHandle = 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 = DateUtils.disabledTime(props, date);
+    var allowTime = disabledTime(props, date);
     return allowDate || allowTime;
   }, [DEPRECATED_disabledDate, props]);
 
@@ -326,13 +426,13 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
   var isOKButtonDisabled = useCallback(function (selectedDate) {
-    if (DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr)) {
+    if (shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr)) {
       return isEveryDateInMonth(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
     }
     return disabledToolbarHandle(selectedDate);
   }, [disabledToolbarHandle, formatStr]);
   var calendarProps = useMemo(function () {
-    return mapValues(pick(props, DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
+    return mapValues(pick(props, 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;
@@ -355,15 +455,19 @@ var DatePicker = /*#__PURE__*/React.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;
   })) || [];
@@ -381,7 +485,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: classes,
       ref: mergeRefs(overlayRef, speakerRef),
       style: styles,
-      target: triggerRef
+      target: triggerRef,
+      onKeyDown: handlePickerOverlayKeyDown
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
@@ -422,20 +527,22 @@ var DatePicker = /*#__PURE__*/React.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 = useMemo(function () {
-    return caretAsProp || (DateUtils.shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
+    return caretAsProp || (shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
   }, [caretAsProp, formatStr]);
+  var handleTriggerClose = useCallback(function (cause) {
+    // Unless overlay is closing on user clicking "OK" button,
+    // reset the selected date on calendar panel
+    if (cause !== OverlayCloseCause.ImperativeHandle) {
+      resetCalendarDate();
+    }
+    setShowMonthDropdown(false);
+  }, [resetCalendarDate]);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     pickerProps: pick(props, 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 !== OverlayCloseCause.ImperativeHandle) {
-        resetCalendarDate();
-      }
-    },
+    onClose: handleTriggerClose,
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
     speaker: renderDropdownMenu
@@ -443,7 +550,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: merge(className, classes),
     style: style,
     ref: rootRef
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, DateUtils.calendarOnlyProps)), {
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
     className: prefix({
       error: inputState === 'Error'
     }),
@@ -453,7 +560,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     editable: editable,
     inputValue: value ? formatDate(value, formatStr) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
-    inputMask: DateUtils.getDateMask(formatStr),
+    inputMask: getDateMask(formatStr),
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,

package/esm/InputPicker/InputPicker.js

@@ -143,9 +143,12 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return multi ? clone(value) || [] : value;
   }, [multi, value]);
   var handleClose = 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 = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
@@ -651,7 +654,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext,
     ref: targetRef,
     as: toggleAs,
-    tabIndex: undefined,
+    tabIndex: tabIndex,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
@@ -663,7 +666,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["tag-wrapper"])))
   }, tagElements, displaySearchInput && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
-    tabIndex: tabIndex,
+    tabIndex: -1,
     readOnly: readOnly,
     onBlur: onBlur,
     onFocus: createChainedFunction(handleFocus, onFocus),

package/esm/Picker/PickerToggle.js

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

package/esm/Picker/utils.js

@@ -182,6 +182,12 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
   var _useState3 = useState([]),
     keys = _useState3[0],
     setKeys = _useState3[1];
+  var focusCallback = useCallback(function (value, event) {
+    var menu = isFunction(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 = useCallback(function () {
     var menu = isFunction(target) ? target() : target;
 
@@ -267,11 +273,11 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       var focusItem = items[nextIndex];
       if (!isUndefined(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 = useCallback(function (event) {
     findFocusItemIndex(function (items, index) {
       var willOverflow = index === 0;
@@ -279,11 +285,11 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       var focusItem = items[nextIndex];
       if (!isUndefined(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 = useCallback(function (nextLayer) {
     var menu = isFunction(target) ? target() : target;
     var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
@@ -303,9 +309,9 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       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 = useCallback(function (event) {
     var nextLayer = layer - 1;
     var nextKeys = getSubMenuKeys(nextLayer);
@@ -319,10 +325,10 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       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 = useCallback(function (event) {
     var _onMenuKeyDown;
     onMenuKeyDown(event, (_onMenuKeyDown = {
@@ -363,10 +369,13 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     onMenuPressEnter = props.onMenuPressEnter,
     onMenuPressBackspace = props.onMenuPressBackspace;
   var handleClose = 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 = 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);
@@ -527,8 +536,8 @@ export 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/esm/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<never>, Key extends RowKeyType>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Cell: <Row_1 extends RowDataType<never>, 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<never>, 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.45.0",
+  "version": "5.46.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -38,7 +38,7 @@
     "prop-types": "^15.8.1",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
-    "rsuite-table": "^5.17.0",
+    "rsuite-table": "^5.18.1",
     "schema-typed": "^2.1.3"
   },
   "peerDependencies": {

package/styles/color-modes/dark.less

@@ -363,44 +363,4 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
-  // CSS relative color syntax is not supported
-  // https://developer.chrome.com/blog/css-relative-color-syntax/
-  @supports not (color: rgb(from white r g b)) {
-    // Misc
-    --rs-bg-backdrop: fade(@B900-dark, 80%);
-    --rs-color-focus-ring: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-shadow: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-outline: 3px solid fade(@H500-dark, 25%);
-
-    // Loader
-    --rs-loader-ring: fade(@B050-dark, 30);
-    --rs-loader-backdrop: fade(@B900-dark, 83%);
-    --rs-loader-ring-inverse: fade(@B050-dark, 80);
-    --rs-loader-backdrop-inverse: fade(@B000-dark, 90);
-
-    // Dropdown
-    --rs-dropdown-item-bg-active: fade(@H900-dark, 20);
-
-    // ARIA Listboxes
-    --rs-listbox-option-selected-bg: fade(@H900-dark, 20%);
-
-    // Slider
-    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-dark, 25);
-
-    // Uploader
-    --rs-uploader-overlay-bg: fade(@B600-dark, 80);
-
-    // Carousel
-    --rs-carousel-indicator: fade(@B000-dark, 40);
-
-    // List
-    --rs-list-placeholder-bg: fade(@H900-dark, 20%);
-
-    // Calendar
-    --rs-calendar-range-bg: fade(@H900-dark, 50%);
-
-    // Placeholder
-    --rs-placeholder-active: lighten(@B600-dark, 5%);
-  }
 }

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

@@ -379,39 +379,4 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
-  // CSS relative color syntax is not supported
-  // https://developer.chrome.com/blog/css-relative-color-syntax/
-  @supports not (color: rgb(from white r g b)) {
-    // Misc
-    --rs-bg-backdrop: fade(@B900-high-contrast, 80%);
-    --rs-state-focus-outline: 3px solid fade(@H500-high-contrast, 25%);
-
-    // Loader
-    --rs-loader-ring: fade(@B050-high-contrast, 30);
-    --rs-loader-backdrop: fade(@B900-high-contrast, 83%);
-    --rs-loader-ring-inverse: fade(@B050-high-contrast, 80);
-    --rs-loader-backdrop-inverse: fade(@B000-high-contrast, 90);
-
-    // Dropdown
-    --rs-dropdown-item-bg-active: fade(@H900-high-contrast, 20);
-
-    // Slider
-    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-high-contrast, 25);
-
-    // Uploader
-    --rs-uploader-overlay-bg: fade(@B600-high-contrast, 80);
-
-    // Carousel
-    --rs-carousel-indicator: fade(@B000-high-contrast, 40);
-
-    // List
-    --rs-list-placeholder-bg: fade(@H900-high-contrast, 20%);
-
-    // Calendar
-    --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
-
-    // Placeholder
-    --rs-placeholder-active: lighten(@B600-high-contrast, 5%);
-  }
 }