rsuite 5.45.0 → 5.46.0

package/esm/Calendar/MonthDropdown.js

@@ -74,8 +74,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: titleClassName,
       role: "rowheader"
     }, year), /*#__PURE__*/React.createElement("div", {
-      className: prefix('list'),
-      role: "gridcell"
+      className: prefix('list')
     }, monthMap.map(function (item, month) {
       return /*#__PURE__*/React.createElement(MonthDropdownItem, {
         disabled: isMonthDisabled(year, month),

package/esm/Calendar/MonthDropdownItem.js

@@ -1,11 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { composeFunctions, useClassNames } from '../utils';
+import { composeFunctions, useClassNames, useCustom } from '../utils';
 import { setMonth, setYear } from '../utils/dateUtils';
 import { useCalendarContext } from './CalendarContext';
+import { getAriaLabel } from './utils';
 var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -21,19 +22,26 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useCalendarContext = useCalendarContext(),
     date = _useCalendarContext.date,
     onSelect = _useCalendarContext.onChangeMonth;
-  var handleClick = useCallback(function (event) {
-    if (disabled) {
-      return;
-    }
-    if (year && month && date) {
-      var nextMonth = composeFunctions(function (d) {
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale,
+    formatDate = _useCustom.formatDate;
+  var formatStr = locale.formattedMonthPattern;
+  var currentMonth = useMemo(function () {
+    if (year && month) {
+      return composeFunctions(function (d) {
         return setYear(d, year);
       }, function (d) {
         return setMonth(d, month - 1);
       })(date);
-      onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextMonth, event);
     }
-  }, [date, disabled, month, onSelect, year]);
+    return date;
+  }, [date, month, year]);
+  var handleClick = useCallback(function (event) {
+    if (disabled) {
+      return;
+    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(currentMonth, event);
+  }, [currentMonth, disabled, onSelect]);
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -43,13 +51,18 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), {
     disabled: disabled
   });
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  var ariaLabel = currentMonth ? getAriaLabel(currentMonth, formatStr, formatDate) : '';
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    key: month,
+    role: "gridcell",
+    "aria-selected": active ? true : undefined,
+    "aria-disabled": disabled ? true : undefined,
+    "aria-label": ariaLabel,
+    tabIndex: active ? 0 : -1,
     ref: ref,
     className: classes,
-    onClick: handleClick,
-    key: month,
-    tabIndex: -1
-  }), /*#__PURE__*/React.createElement("span", {
+    onClick: handleClick
+  }, rest), /*#__PURE__*/React.createElement("span", {
     className: prefix('content')
   }, month));
 });

package/esm/Calendar/TableCell.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export interface TableCellProps extends WithAsProps {
+    date: Date;
+    disabled?: boolean;
+    selected?: boolean;
+    unSameMonth?: boolean;
+    rangeStart?: boolean;
+    rangeEnd?: boolean;
+    inRange?: boolean;
+    onSelect?: (date: Date, disabled: boolean | void, event: React.MouseEvent) => void;
+}
+declare const TableCell: RsRefForwardingComponent<'div', TableCellProps>;
+export default TableCell;

package/esm/Calendar/TableCell.js

@@ -0,0 +1,66 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import partial from 'lodash/partial';
+import { DateUtils, useClassNames, useCustom } from '../utils';
+import { isSameDay } from '../utils/dateUtils';
+import { useCalendarContext } from './CalendarContext';
+import { getAriaLabel } from './utils';
+var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'calendar-table' : _props$classPrefix,
+    disabled = props.disabled,
+    selected = props.selected,
+    date = props.date,
+    onSelect = props.onSelect,
+    unSameMonth = props.unSameMonth,
+    rangeStart = props.rangeStart,
+    rangeEnd = props.rangeEnd,
+    inRange = props.inRange,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "disabled", "selected", "date", "onSelect", "unSameMonth", "rangeStart", "rangeEnd", "inRange"]);
+  var _useCalendarContext = useCalendarContext(),
+    onMouseMove = _useCalendarContext.onMouseMove,
+    cellClassName = _useCalendarContext.cellClassName,
+    renderCell = _useCalendarContext.renderCell,
+    overrideLocale = _useCalendarContext.locale;
+  var _useClassNames = useClassNames(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
+  var _useCustom = useCustom('Calendar', overrideLocale),
+    locale = _useCustom.locale,
+    formatDate = _useCustom.formatDate;
+  var formatStr = locale.formattedDayPattern;
+  var ariaLabel = getAriaLabel(date, formatStr, formatDate);
+  var todayDate = new Date();
+  var isToday = isSameDay(date, todayDate);
+  var classes = merge(prefix('cell', {
+    'cell-un-same-month': unSameMonth,
+    'cell-is-today': isToday,
+    'cell-selected': selected,
+    'cell-selected-start': rangeStart,
+    'cell-selected-end': rangeEnd,
+    'cell-in-range': !unSameMonth && inRange,
+    'cell-disabled': disabled
+  }), cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(date));
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    role: "gridcell",
+    "aria-label": ariaLabel,
+    "aria-selected": selected || undefined,
+    "aria-disabled": disabled || undefined,
+    tabIndex: selected ? 0 : -1,
+    title: isToday ? ariaLabel + " (" + (locale === null || locale === void 0 ? void 0 : locale.today) + ")" : ariaLabel,
+    className: classes,
+    onMouseEnter: !disabled && onMouseMove ? onMouseMove.bind(null, date) : undefined,
+    onClick: onSelect ? partial(onSelect, date, disabled) : undefined
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: prefix('cell-content')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: prefix('cell-day')
+  }, DateUtils.getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
+});
+TableCell.displayName = 'CalendarTableCell';
+export default TableCell;

package/esm/Calendar/TableHeaderRow.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
+import upperFirst from 'lodash/upperFirst';
 import { useClassNames } from '../utils';
 import { useCalendarContext } from './CalendarContext';
 var weekKeys = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
@@ -40,7 +41,8 @@ var TableHeaderRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: prefix('header-cell'),
-      role: "columnheader"
+      role: "columnheader",
+      "aria-label": upperFirst(key)
     }, /*#__PURE__*/React.createElement("span", {
       className: prefix('header-cell-content')
     }, locale === null || locale === void 0 ? void 0 : locale[key]));

package/esm/Calendar/TableRow.js

@@ -3,9 +3,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import partial from 'lodash/partial';
-import { DateUtils, useClassNames, DATERANGE_DISABLED_TARGET, useCustom } from '../utils';
+import { useClassNames, DATERANGE_DISABLED_TARGET } from '../utils';
+import { isSameDay, addDays, isBefore, isAfter, format } from '../utils/dateUtils';
 import { useCalendarContext } from './CalendarContext';
+import TableCell from './TableCell';
 var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -23,15 +24,8 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hoverRangeValue = _useCalendarContext.hoverRangeValue,
     inSameMonth = _useCalendarContext.inSameMonth,
     isoWeek = _useCalendarContext.isoWeek,
-    onMouseMove = _useCalendarContext.onMouseMove,
     onSelect = _useCalendarContext.onSelect,
-    cellClassName = _useCalendarContext.cellClassName,
-    renderCell = _useCalendarContext.renderCell,
-    overrideLocale = _useCalendarContext.locale,
     showWeekNumbers = _useCalendarContext.showWeekNumbers;
-  var _useCustom = useCustom('Calendar', overrideLocale),
-    locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
@@ -42,7 +36,6 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
   }, [onSelect]);
   var renderDays = function renderDays() {
-    var formatStr = locale.formattedDayPattern;
     var days = [];
     var _ref = dateRange || [],
       selectedStartDate = _ref[0],
@@ -51,64 +44,47 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hoverStartDate = _ref2[0],
       hoverEndDate = _ref2[1];
     var isRangeSelectionMode = typeof dateRange !== 'undefined';
-    var todayDate = new Date();
     for (var i = 0; i < 7; i += 1) {
-      var thisDate = DateUtils.addDays(weekendDate, i);
+      var thisDate = addDays(weekendDate, i);
       var disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(thisDate, dateRange, DATERANGE_DISABLED_TARGET.CALENDAR);
-      var isToday = DateUtils.isSameDay(thisDate, todayDate);
       var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
-      var isStartSelected = !unSameMonth && selectedStartDate && DateUtils.isSameDay(thisDate, selectedStartDate);
-      var isEndSelected = !unSameMonth && selectedEndDate && DateUtils.isSameDay(thisDate, selectedEndDate);
-      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected);
+      var rangeStart = !unSameMonth && selectedStartDate && isSameDay(thisDate, selectedStartDate);
+      var rangeEnd = !unSameMonth && selectedEndDate && isSameDay(thisDate, selectedEndDate);
+      var isSelected = isRangeSelectionMode ? rangeStart || rangeEnd : isSameDay(thisDate, selected);
 
       // TODO-Doma Move those logic that's for DatePicker/DateRangePicker to a separate component
       //           Calendar is not supposed to be reused this way
       var inRange = false;
       // for Selected
       if (selectedStartDate && selectedEndDate) {
-        if (DateUtils.isBefore(thisDate, selectedEndDate) && DateUtils.isAfter(thisDate, selectedStartDate)) {
+        if (isBefore(thisDate, selectedEndDate) && isAfter(thisDate, selectedStartDate)) {
           inRange = true;
         }
-        if (DateUtils.isBefore(thisDate, selectedStartDate) && DateUtils.isAfter(thisDate, selectedEndDate)) {
+        if (isBefore(thisDate, selectedStartDate) && isAfter(thisDate, selectedEndDate)) {
           inRange = true;
         }
       }
 
       // for Hovering
       if (!isSelected && hoverStartDate && hoverEndDate) {
-        if (!DateUtils.isAfter(thisDate, hoverEndDate) && !DateUtils.isBefore(thisDate, hoverStartDate)) {
+        if (!isAfter(thisDate, hoverEndDate) && !isBefore(thisDate, hoverStartDate)) {
           inRange = true;
         }
-        if (!DateUtils.isAfter(thisDate, hoverStartDate) && !DateUtils.isBefore(thisDate, hoverEndDate)) {
+        if (!isAfter(thisDate, hoverStartDate) && !isBefore(thisDate, hoverEndDate)) {
           inRange = true;
         }
       }
-      var _classes = merge(prefix('cell', {
-        'cell-un-same-month': unSameMonth,
-        'cell-is-today': isToday,
-        'cell-selected': isSelected,
-        'cell-selected-start': isStartSelected,
-        'cell-selected-end': isEndSelected,
-        'cell-in-range': !unSameMonth && inRange,
-        'cell-disabled': disabled
-      }), cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(thisDate));
-      var title = formatDate ? formatDate(thisDate, formatStr) : DateUtils.format(thisDate, formatStr);
-      days.push( /*#__PURE__*/React.createElement("div", {
-        role: "gridcell",
-        key: title,
-        "aria-label": title,
-        "aria-selected": isSelected || undefined,
-        className: _classes
-      }, /*#__PURE__*/React.createElement("div", {
-        role: "button",
-        className: prefix('cell-content'),
-        tabIndex: -1,
-        title: isToday ? title + " (" + (locale === null || locale === void 0 ? void 0 : locale.today) + ")" : title,
-        onMouseEnter: !disabled && onMouseMove ? onMouseMove.bind(null, thisDate) : undefined,
-        onClick: partial(handleSelect, thisDate, disabled)
-      }, /*#__PURE__*/React.createElement("span", {
-        className: prefix('cell-day')
-      }, DateUtils.getDate(thisDate)), renderCell && renderCell(thisDate))));
+      days.push( /*#__PURE__*/React.createElement(TableCell, {
+        key: format(thisDate, 'yyyy-MM-dd'),
+        date: thisDate,
+        disabled: disabled,
+        selected: isSelected,
+        onSelect: handleSelect,
+        unSameMonth: unSameMonth,
+        rangeStart: rangeStart,
+        rangeEnd: rangeEnd,
+        inRange: inRange
+      }));
     }
     return days;
   };
@@ -120,7 +96,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), showWeekNumbers && /*#__PURE__*/React.createElement("div", {
     className: prefix('cell-week-number'),
     role: "rowheader"
-  }, DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
+  }, format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
 });
 TableRow.displayName = 'CalendarTableRow';
 TableRow.propTypes = {

package/esm/Calendar/useCalendarDate.d.ts

@@ -1,6 +1,6 @@
 declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
     calendarDate: Date;
-    setCalendarDate: (date: Date | undefined) => void;
+    setCalendarDate: (date: React.SetStateAction<Date> | undefined) => void;
     resetCalendarDate: (nextValue?: any) => void;
 };
 export default useCalendarDate;

package/esm/Calendar/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Get aria-label for the date.
+ * @param date - The date.
+ * @param formatStr - The format string.
+ * @param format - The format function.
+ */
+export declare function getAriaLabel(date: Date, formatStr: string, format: (date: Date, formatStr: string) => string): string;

package/esm/Calendar/utils.js

@@ -0,0 +1,12 @@
+'use client';
+import { DateUtils } from '../utils';
+
+/**
+ * Get aria-label for the date.
+ * @param date - The date.
+ * @param formatStr - The format string.
+ * @param format - The format function.
+ */
+export function getAriaLabel(date, formatStr, format) {
+  return format ? format(date, formatStr) : DateUtils.format(date, formatStr);
+}

package/esm/Cascader/Cascader.js

@@ -190,6 +190,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var items = getSearchResult(value);
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+    if (!value || items.length === 0) {
+      setFocusItemValue(undefined);
+      return;
+    }
     if (items.length > 0) {
       setFocusItemValue(items[0][valueKey]);
       setLayer(0);
@@ -212,9 +216,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setSearchKeyword('');
   }, [onClose]);
   var handleClose = useCallback(function () {
-    var _triggerRef$current;
+    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;
     (_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);
+  }, []);
   var handleClean = useCallback(function (event) {
     if (disabled || !targetRef.current) {
       return;
@@ -344,6 +351,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       "aria-disabled": disabled,
       "data-key": item[valueKey],
       className: itemClasses,
+      tabIndex: -1,
+      role: "option",
       onClick: function onClick(event) {
         if (!disabled) {
           handleSearchRowSelect(item, nodes, event);
@@ -358,7 +367,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var items = getSearchResult();
     return /*#__PURE__*/React.createElement("div", {
       className: prefix('cascader-search-panel'),
-      "data-layer": 0
+      "data-layer": 0,
+      role: "listbox"
     }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/React.createElement("div", {
       className: prefix('none')
     }, locale.noResultsText));