rsuite 5.45.0 → 5.46.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [5.46.0](https://github.com/rsuite/rsuite/compare/v5.45.0...v5.46.0) (2023-11-24)
+
+### Bug Fixes
+
+- **DatePicker:** improve DatePicker accessibility ([#3464](https://github.com/rsuite/rsuite/issues/3464)) ([63ac804](https://github.com/rsuite/rsuite/commit/63ac8048d9ed7ab3048d9b488a5a1ce306ea2f6d))
+- improve accessibility of picker related components ([#3463](https://github.com/rsuite/rsuite/issues/3463)) ([1cc5481](https://github.com/rsuite/rsuite/commit/1cc54812957b096273e0fa503b365da3c5eeba11))
+- **AutoComplete,Loader:** fix CSS relative colors causing test errors ([#3460](https://github.com/rsuite/rsuite/issues/3460)) ([f9b1244](https://github.com/rsuite/rsuite/commit/f9b124489d6c505d10b9c8a0324b5046022aef27))
+- **Cascader:** fix bug in value selection via Enter key ([#3461](https://github.com/rsuite/rsuite/issues/3461)) ([4266e79](https://github.com/rsuite/rsuite/commit/4266e79928ce75a4e856b68003510d1d12ee4b70))
+
+### Features
+
+- **CSS:** add compatibility for relative color syntax ([#3462](https://github.com/rsuite/rsuite/issues/3462)) ([a02eaa9](https://github.com/rsuite/rsuite/commit/a02eaa9b14dc374d503481a443051d413a9fd041))
+
 # [5.45.0](https://github.com/rsuite/rsuite/compare/v5.44.0...v5.45.0) (2023-11-17)
 
 ### Bug Fixes

package/DatePicker/styles/index.less

@@ -93,6 +93,21 @@
       width: unset;
     }
 
+    &-month-dropdown-cell:focus-visible {
+      .rs-calendar-month-dropdown-cell-content {
+        outline: 3px solid var(--rs-color-focus-ring);
+      }
+    }
+
+    &-table-cell {
+      &:focus-visible {
+        outline: none;
+        .rs-calendar-table-cell-content {
+          outline: 3px solid var(--rs-color-focus-ring);
+        }
+      }
+    }
+
     .rs-calendar-month-dropdown-cell-content,
     .rs-calendar-table-cell-content {
       width: @calendar-in-menu-content-side-length;

package/cjs/Calendar/MonthDropdown.js

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

package/cjs/Calendar/MonthDropdownItem.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _CalendarContext = require("./CalendarContext");
+var _utils2 = require("./utils");
 var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -27,19 +28,26 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
   var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
     date = _useCalendarContext.date,
     onSelect = _useCalendarContext.onChangeMonth;
-  var handleClick = (0, _react.useCallback)(function (event) {
-    if (disabled) {
-      return;
-    }
-    if (year && month && date) {
-      var nextMonth = (0, _utils.composeFunctions)(function (d) {
+  var _useCustom = (0, _utils.useCustom)('Calendar'),
+    locale = _useCustom.locale,
+    formatDate = _useCustom.formatDate;
+  var formatStr = locale.formattedMonthPattern;
+  var currentMonth = (0, _react.useMemo)(function () {
+    if (year && month) {
+      return (0, _utils.composeFunctions)(function (d) {
         return (0, _dateUtils.setYear)(d, year);
       }, function (d) {
         return (0, _dateUtils.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 = (0, _react.useCallback)(function (event) {
+    if (disabled) {
+      return;
+    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(currentMonth, event);
+  }, [currentMonth, disabled, onSelect]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -49,13 +57,18 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
   }), {
     disabled: disabled
   });
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  var ariaLabel = currentMonth ? (0, _utils2.getAriaLabel)(currentMonth, formatStr, formatDate) : '';
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    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.default.createElement("span", {
+    onClick: handleClick
+  }, rest), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('content')
   }, month));
 });

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

@@ -0,0 +1,72 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _partial = _interopRequireDefault(require("lodash/partial"));
+var _utils = require("../utils");
+var _dateUtils = require("../utils/dateUtils");
+var _CalendarContext = require("./CalendarContext");
+var _utils2 = require("./utils");
+var TableCell = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "disabled", "selected", "date", "onSelect", "unSameMonth", "rangeStart", "rangeEnd", "inRange"]);
+  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
+    onMouseMove = _useCalendarContext.onMouseMove,
+    cellClassName = _useCalendarContext.cellClassName,
+    renderCell = _useCalendarContext.renderCell,
+    overrideLocale = _useCalendarContext.locale;
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
+  var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
+    locale = _useCustom.locale,
+    formatDate = _useCustom.formatDate;
+  var formatStr = locale.formattedDayPattern;
+  var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);
+  var todayDate = new Date();
+  var isToday = (0, _dateUtils.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.default.createElement(Component, (0, _extends2.default)({
+    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 ? (0, _partial.default)(onSelect, date, disabled) : undefined
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('cell-content')
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('cell-day')
+  }, _utils.DateUtils.getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
+});
+TableCell.displayName = 'CalendarTableCell';
+var _default = TableCell;
+exports.default = _default;

package/cjs/Calendar/TableHeaderRow.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
 var _utils = require("../utils");
 var _CalendarContext = require("./CalendarContext");
 var weekKeys = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
@@ -45,7 +46,8 @@ var TableHeaderRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     return /*#__PURE__*/_react.default.createElement("div", {
       key: key,
       className: prefix('header-cell'),
-      role: "columnheader"
+      role: "columnheader",
+      "aria-label": (0, _upperFirst.default)(key)
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: prefix('header-cell-content')
     }, locale === null || locale === void 0 ? void 0 : locale[key]));

package/cjs/Calendar/TableRow.js

@@ -9,9 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _partial = _interopRequireDefault(require("lodash/partial"));
 var _utils = require("../utils");
+var _dateUtils = require("../utils/dateUtils");
 var _CalendarContext = require("./CalendarContext");
+var _TableCell = _interopRequireDefault(require("./TableCell"));
 var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -29,15 +30,8 @@ var TableRow = /*#__PURE__*/_react.default.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 = (0, _utils.useCustom)('Calendar', overrideLocale),
-    locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
@@ -48,7 +42,6 @@ var TableRow = /*#__PURE__*/_react.default.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],
@@ -57,64 +50,47 @@ var TableRow = /*#__PURE__*/_react.default.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 = _utils.DateUtils.addDays(weekendDate, i);
+      var thisDate = (0, _dateUtils.addDays)(weekendDate, i);
       var disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(thisDate, dateRange, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);
-      var isToday = _utils.DateUtils.isSameDay(thisDate, todayDate);
       var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
-      var isStartSelected = !unSameMonth && selectedStartDate && _utils.DateUtils.isSameDay(thisDate, selectedStartDate);
-      var isEndSelected = !unSameMonth && selectedEndDate && _utils.DateUtils.isSameDay(thisDate, selectedEndDate);
-      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.DateUtils.isSameDay(thisDate, selected);
+      var rangeStart = !unSameMonth && selectedStartDate && (0, _dateUtils.isSameDay)(thisDate, selectedStartDate);
+      var rangeEnd = !unSameMonth && selectedEndDate && (0, _dateUtils.isSameDay)(thisDate, selectedEndDate);
+      var isSelected = isRangeSelectionMode ? rangeStart || rangeEnd : (0, _dateUtils.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 (_utils.DateUtils.isBefore(thisDate, selectedEndDate) && _utils.DateUtils.isAfter(thisDate, selectedStartDate)) {
+        if ((0, _dateUtils.isBefore)(thisDate, selectedEndDate) && (0, _dateUtils.isAfter)(thisDate, selectedStartDate)) {
           inRange = true;
         }
-        if (_utils.DateUtils.isBefore(thisDate, selectedStartDate) && _utils.DateUtils.isAfter(thisDate, selectedEndDate)) {
+        if ((0, _dateUtils.isBefore)(thisDate, selectedStartDate) && (0, _dateUtils.isAfter)(thisDate, selectedEndDate)) {
           inRange = true;
         }
       }
 
       // for Hovering
       if (!isSelected && hoverStartDate && hoverEndDate) {
-        if (!_utils.DateUtils.isAfter(thisDate, hoverEndDate) && !_utils.DateUtils.isBefore(thisDate, hoverStartDate)) {
+        if (!(0, _dateUtils.isAfter)(thisDate, hoverEndDate) && !(0, _dateUtils.isBefore)(thisDate, hoverStartDate)) {
           inRange = true;
         }
-        if (!_utils.DateUtils.isAfter(thisDate, hoverStartDate) && !_utils.DateUtils.isBefore(thisDate, hoverEndDate)) {
+        if (!(0, _dateUtils.isAfter)(thisDate, hoverStartDate) && !(0, _dateUtils.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) : _utils.DateUtils.format(thisDate, formatStr);
-      days.push( /*#__PURE__*/_react.default.createElement("div", {
-        role: "gridcell",
-        key: title,
-        "aria-label": title,
-        "aria-selected": isSelected || undefined,
-        className: _classes
-      }, /*#__PURE__*/_react.default.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: (0, _partial.default)(handleSelect, thisDate, disabled)
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: prefix('cell-day')
-      }, _utils.DateUtils.getDate(thisDate)), renderCell && renderCell(thisDate))));
+      days.push( /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+        key: (0, _dateUtils.format)(thisDate, 'yyyy-MM-dd'),
+        date: thisDate,
+        disabled: disabled,
+        selected: isSelected,
+        onSelect: handleSelect,
+        unSameMonth: unSameMonth,
+        rangeStart: rangeStart,
+        rangeEnd: rangeEnd,
+        inRange: inRange
+      }));
     }
     return days;
   };
@@ -126,7 +102,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), showWeekNumbers && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('cell-week-number'),
     role: "rowheader"
-  }, _utils.DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
+  }, (0, _dateUtils.format)(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
 });
 TableRow.displayName = 'CalendarTableRow';
 TableRow.propTypes = {

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

@@ -0,0 +1,15 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.getAriaLabel = getAriaLabel;
+var _utils = require("../utils");
+/**
+ * Get aria-label for the date.
+ * @param date - The date.
+ * @param formatStr - The format string.
+ * @param format - The format function.
+ */
+function getAriaLabel(date, formatStr, format) {
+  return format ? format(date, formatStr) : _utils.DateUtils.format(date, formatStr);
+}

package/cjs/Cascader/Cascader.js

@@ -196,6 +196,10 @@ var Cascader = /*#__PURE__*/_react.default.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);
@@ -218,9 +222,12 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSearchKeyword('');
   }, [onClose]);
   var handleClose = (0, _react.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 = (0, _react.useCallback)(function (event) {
     if (disabled || !targetRef.current) {
       return;
@@ -350,6 +357,8 @@ var Cascader = /*#__PURE__*/_react.default.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);
@@ -364,7 +373,8 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var items = getSearchResult();
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('cascader-search-panel'),
-      "data-layer": 0
+      "data-layer": 0,
+      role: "listbox"
     }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('none')
     }, locale.noResultsText));