rsuite 5.76.3 → 5.77.1

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [5.77.1](https://github.com/rsuite/rsuite/compare/v5.77.0...v5.77.1) (2025-02-07)
+
+
+### Bug Fixes
+
+* **DateRangePicker:** allow ranges option value to be null ([#4141](https://github.com/rsuite/rsuite/issues/4141)) ([32017c4](https://github.com/rsuite/rsuite/commit/32017c4429d15e9d3ca881b0e59e9d63bb89427a))
+* **Dropdown:** prevent focus moving to first item when focusing on disabled item ([#4142](https://github.com/rsuite/rsuite/issues/4142)) ([caa4a9a](https://github.com/rsuite/rsuite/commit/caa4a9adad08f69fb09f226a99c17a6becb58041))
+* **Form:** validation for nested array fields ([#4139](https://github.com/rsuite/rsuite/issues/4139)) ([dbf15cb](https://github.com/rsuite/rsuite/commit/dbf15cb5232c25d54c691411884c2aad0583bedd))
+* prevent duplicate className in DatePicker and DateRangePicker components ([#4140](https://github.com/rsuite/rsuite/issues/4140)) ([fa3f40d](https://github.com/rsuite/rsuite/commit/fa3f40d30752a4af5a6d463c65d1df70adf9a74a))
+
+
+
+# [5.77.0](https://github.com/rsuite/rsuite/compare/v5.76.3...v5.77.0) (2025-01-21)
+
+
+### Bug Fixes
+
+* **Form:** support deeply nested object validation ([#4125](https://github.com/rsuite/rsuite/issues/4125)) ([2de3f90](https://github.com/rsuite/rsuite/commit/2de3f901970d982ac4a0a2329fd4e6af83962804))
+* **InputPicker:** do not trigger clean when clicking delete with search keyword ([#4124](https://github.com/rsuite/rsuite/issues/4124)) ([98a0019](https://github.com/rsuite/rsuite/commit/98a001908df884c8cd5a87959a9b9608d6bba37c))
+
+
+### Features
+
+* **DateRangePicker:** support custom render calendar cell content ([#4126](https://github.com/rsuite/rsuite/issues/4126)) ([74171d1](https://github.com/rsuite/rsuite/commit/74171d17f36aa611009e0048c1f490b6ac31fcea))
+
+
+
 ## [5.76.3](https://github.com/rsuite/rsuite/compare/v5.76.2...v5.76.3) (2025-01-10)
 
 

package/Dropdown/styles/index.css

@@ -1448,7 +1448,6 @@
   color: #717273;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
-  pointer-events: none;
 }
 .rs-dropdown-item-disabled .rs-text {
   color: #717273;

package/Dropdown/styles/index.less

@@ -173,7 +173,6 @@
   &-disabled {
     color: var(--rs-text-disabled);
     cursor: @cursor-disabled;
-    pointer-events: none;
 
     .rs-text {
       color: var(--rs-text-disabled);

package/Nav/styles/index.css

@@ -1491,7 +1491,6 @@
   color: #717273;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
-  pointer-events: none;
 }
 .rs-dropdown-item-disabled .rs-text {
   color: #717273;

package/Navbar/styles/index.css

@@ -1491,7 +1491,6 @@
   color: #717273;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
-  pointer-events: none;
 }
 .rs-dropdown-item-disabled .rs-text {
   color: #717273;

package/Tabs/styles/index.css

@@ -1491,7 +1491,6 @@
   color: #717273;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
-  pointer-events: none;
 }
 .rs-dropdown-item-disabled .rs-text {
   color: #717273;

package/cjs/DatePicker/DatePicker.js

@@ -436,6 +436,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
   var hasValue = (0, _date.isValid)(value);
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
+      className: className,
       classPrefix: classPrefix,
       name: 'date',
       appearance: appearance,
@@ -491,7 +492,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onExit: (0, _utils2.createChainedFunction)(events.onInactive, onExit),
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
-    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
+    className: merge(classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
     style: style,
     ref: root
   }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateInput.default, {

package/cjs/DatePicker/types.d.ts

@@ -3,11 +3,11 @@ export type ToolbarValue = Date | [Date?, Date?];
 export interface RangeType<T> {
     label: ReactNode;
     closeOverlay?: boolean;
-    value: T | ((value: T) => T);
+    value: T | ((value: T) => T) | null;
     placement?: 'bottom' | 'left';
 }
 export interface InnerRange<T> extends Omit<RangeType<T>, 'value'> {
-    value: T;
+    value: T | null;
 }
 export interface DeprecatedProps {
     /**

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -159,6 +159,12 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * Custom render for calendar title
      */
     renderTitle?: (date: Date) => React.ReactNode;
+    /**
+     * Custom rendering calendar cell content.
+     *
+     * @version 5.77.0
+     */
+    renderCell?: (date: Date) => React.ReactNode;
 }
 export interface DateRangePickerComponent extends PickerComponent<DateRangePickerProps> {
     /** Allow the maximum number of days specified, other dates are disabled */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -33,7 +33,7 @@ var _utils2 = require("../internals/utils");
 var _date = require("../internals/utils/date");
 var _CustomProvider = require("../CustomProvider");
 var _templateObject, _templateObject2;
-var _excluded = ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "calendarSnapping", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showMeridiem", "showHeader", "style", "size", "caretAs", "value", "monthDropdownProps", "hideHours", "hideMinutes", "hideSeconds", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"];
+var _excluded = ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "calendarSnapping", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showMeridiem", "showHeader", "style", "size", "caretAs", "value", "monthDropdownProps", "hideHours", "hideMinutes", "hideSeconds", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue", "renderCell"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -116,6 +116,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onShortcutClick = propsWithDefaults.onShortcutClick,
     renderTitle = propsWithDefaults.renderTitle,
     renderValue = propsWithDefaults.renderValue,
+    renderCell = propsWithDefaults.renderCell,
     restProps = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
   var id = (0, _hooks.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
@@ -591,6 +592,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (selectedDates === void 0) {
       selectedDates = [];
     }
+    if (selectedDates === null) {
+      return false;
+    }
     var _selectedDates = selectedDates,
       startDate = _selectedDates[0],
       endDate = _selectedDates[1];
@@ -673,7 +677,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onChangeCalendarMonth: onChangeCalendarMonth,
       onChangeCalendarTime: onChangeCalendarTime,
       onMouseMove: onMouseMove,
-      renderTitle: renderTitle
+      renderTitle: renderTitle,
+      renderCellOnPicker: renderCell
     };
     var getCalendars = function getCalendars() {
       if (showOneCalendar) {
@@ -745,6 +750,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var hasValue = !(0, _isNil.default)(value) && value.length > 1;
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
       classPrefix: classPrefix,
+      className: className,
       name: 'daterange',
       appearance: appearance,
       hasValue: hasValue,
@@ -816,7 +822,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
     ref: root,
-    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
+    className: merge(classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
     style: style
   }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {
     value: value,

package/cjs/DateRangePicker/types.d.ts

@@ -1,13 +1,8 @@
-import React from 'react';
 import { DATERANGE_DISABLED_TARGET } from '../internals/constants';
-export type ValueType = [Date?, Date?];
+import type { RangeType as DatePickerRangeType } from '../DatePicker/types';
+export type ValueType = [Date?, Date?] | null;
 export type DateRange = [Date, Date];
-export interface RangeType<T = DateRange> {
-    label: React.ReactNode;
-    value: T | ((value?: T) => T);
-    closeOverlay?: boolean;
-    placement?: 'bottom' | 'left';
-}
+export type RangeType<T = DateRange> = DatePickerRangeType<T>;
 export type DisabledDateFunction = (
 /**
  * Date used to determine if disabling is required.

package/cjs/FormControl/utils.d.ts

@@ -1 +1,9 @@
+/**
+ * Converts a field name to a path that can be used in a nested object.
+ * @example
+ * nameToPath('a.b.c') // 'a.object.b.object.c'
+ * nameToPath('items[0].name') // 'items.array[0].object.name'
+ * @param name the field name to convert
+ * @returns the converted path
+ */
 export declare function nameToPath(name: string): string;

package/cjs/FormControl/utils.js

@@ -3,6 +3,49 @@
 
 exports.__esModule = true;
 exports.nameToPath = nameToPath;
+/**
+ * Converts a field name to a path that can be used in a nested object.
+ * @example
+ * nameToPath('a.b.c') // 'a.object.b.object.c'
+ * nameToPath('items[0].name') // 'items.array[0].object.name'
+ * @param name the field name to convert
+ * @returns the converted path
+ */
 function nameToPath(name) {
-  return name.includes('.') ? name.replace('.', '.object.') : name;
+  if (!name.includes('.') && !name.includes('[')) {
+    return name;
+  }
+
+  // Split the path by dots and array accessors
+  var parts = name.split(/\.|\[|\]\.?/).filter(Boolean);
+  var result = [];
+  for (var i = 0; i < parts.length; i++) {
+    var part = parts[i];
+    var isLast = i === parts.length - 1;
+    if (part.match(/^\d+$/)) {
+      // If it's a number (array index), add array accessor
+      result.push("array[" + part + "]");
+      // If there's a next part and it's not an array index, add .object
+      if (!isLast && !parts[i + 1].match(/^\d+$/)) {
+        result.push('object');
+      }
+    } else {
+      // For regular property names
+      if (!isLast) {
+        // Not the last part, add .object unless next part is array index
+        var nextPart = parts[i + 1];
+        if (nextPart && nextPart.match(/^\d+$/)) {
+          // Next part is array index
+          result.push(part);
+        } else {
+          // Next part is object property
+          result.push(part + ".object");
+        }
+      } else {
+        // Last part, just add the name
+        result.push(part);
+      }
+    }
+  }
+  return result.join('.');
 }

package/cjs/InputPicker/InputPicker.js

@@ -396,7 +396,13 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     handleChange(val, event);
   });
   var handleClean = (0, _hooks.useEventCallback)(function (event) {
-    if (disabled || searchKeyword !== '') {
+    if (disabled) {
+      return;
+    }
+
+    // When there is a value in the search box and the user presses the delete key on the keyboard,
+    // do not trigger clearing
+    if (inputRef.current === event.target && searchKeyword !== '') {
       return;
     }
     setValue(null);

package/cjs/internals/Menu/Menubar.js

@@ -37,7 +37,10 @@ function Menubar(_ref) {
     if ((0, _utils.isFocusEntering)(event) &&
     // Skip if focus is moving to a focusable element within this menu
     !(event.target !== event.currentTarget && (0, _utils.isFocusableElement)(event.target))) {
-      if (activeItemIndex === null) {
+      var disabled = event.target.getAttribute('aria-disabled');
+
+      // Skip if the item is disabled
+      if (activeItemIndex === null && disabled !== 'true') {
         dispatch({
           type: _MenuContext.MenuActionTypes.MoveFocus,
           to: _MenuContext.MoveFocusTo.First

package/dist/rsuite-no-reset-rtl.css

@@ -5420,7 +5420,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   color: #717273;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
-  pointer-events: none;
 }
 .rs-dropdown-item-disabled .rs-text {
   color: #717273;