rsuite 5.37.3 → 5.38.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [5.38.0](https://github.com/rsuite/rsuite/compare/v5.37.4...v5.38.0) (2023-08-18)
+
+### Bug Fixes
+
+- **Calendar:** fix onMonthChange not fired when clicking on dates ([#3335](https://github.com/rsuite/rsuite/issues/3335)) ([035d287](https://github.com/rsuite/rsuite/commit/035d287c0f998e1f1aeed62dca7d2cfeded46167))
+- **InputPicker:** cursor should be text ([#3334](https://github.com/rsuite/rsuite/issues/3334)) ([eed2337](https://github.com/rsuite/rsuite/commit/eed2337546665878c51cf3d88d0801c8a37a908d))
+
+### Features
+
+- **Calendar:** add cellClassName prop ([#3336](https://github.com/rsuite/rsuite/issues/3336)) ([cb7c2ae](https://github.com/rsuite/rsuite/commit/cb7c2aee30985219cb0d29155a3ae3d2f739d1d2)), closes [#3333](https://github.com/rsuite/rsuite/issues/3333)
+
+## [5.37.4](https://github.com/rsuite/rsuite/compare/v5.37.3...v5.37.4) (2023-08-11)
+
+### Bug Fixes
+
+- **DatePicker,DateRangePicker:** fix calendar styles per design ([#3325](https://github.com/rsuite/rsuite/issues/3325)) ([a7d1c08](https://github.com/rsuite/rsuite/commit/a7d1c08c44c6169bcd10b32dcb4bb9ebcbb93677))
+- **InputGroup:** fix inside addon overlapping input text ([#3324](https://github.com/rsuite/rsuite/issues/3324)) ([8f1ff30](https://github.com/rsuite/rsuite/commit/8f1ff30634dbfcd20f05b63168e767723af5a968))
+- **InputPicker:** Fix InputPicker select bug ([#3329](https://github.com/rsuite/rsuite/issues/3329)) ([c52756b](https://github.com/rsuite/rsuite/commit/c52756b8596c20d275a9d5d2d41b7a81d355920f))
+- **OverlayTrigger:** fix handleClose will trigger twice ([#3286](https://github.com/rsuite/rsuite/issues/3286)) ([11b8eb8](https://github.com/rsuite/rsuite/commit/11b8eb8c6f43b46dcad5d1f800e6eb7a5374b0c2))
+- **Picker:** change color of caret on option group title ([#3323](https://github.com/rsuite/rsuite/issues/3323)) ([0d7be85](https://github.com/rsuite/rsuite/commit/0d7be85eec97063b162877ff8169209070fb1d4a))
+
 ## [5.37.3](https://github.com/rsuite/rsuite/compare/v5.37.2...v5.37.3) (2023-08-02)
 
 ### Bug Fixes

package/Calendar/styles/index.less

@@ -346,6 +346,7 @@
 }
 
 // Calendar Table
+// TODO-Doma Use CSS grid layout.
 .rs-calendar-table {
   display: table;
   table-layout: fixed;
@@ -438,7 +439,7 @@
 
 .rs-calendar-table-cell-week-number {
   display: table-cell;
-  width: 1%;
+  min-width: 30px;
   padding: @calendar-table-cell-padding;
   text-align: center;
   vertical-align: middle;
@@ -473,13 +474,13 @@
 
   &-row {
     position: relative;
-    padding-left: (40px + @calendar-picker-padding);
+    padding-left: @calendar-picker-padding + 38px; // 30px for the year label + 8px gap
     padding-right: @calendar-picker-padding;
     padding-top: 5px;
     padding-bottom: 5px;
 
     &:not(:last-child) {
-      border-bottom: 1px dotted var(--rs-border-primary);
+      border-bottom: 1px dashed var(--rs-border-primary);
     }
   }
 
@@ -495,13 +496,14 @@
 
   &-list {
     display: block;
+    min-width: 30px * 6 + 4px * 5;
     .clearfix();
   }
 
   &-cell {
     display: inline-block;
     float: left;
-    width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
+    // width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
     margin: 1px;
     text-align: center;
     vertical-align: middle;

package/DatePicker/styles/index.less

@@ -49,9 +49,11 @@
 
 // Calendar in DatePicker popup
 .rs-picker-menu {
-  @calendar-width: (
-    @datepicker-calendar-cell-gap-x * 6 + 30px * 7 + @datepicker-calendar-padding-x * 2
-  );
+  @calendar-width: 264px; // This is a fixed value per design.
+
+  @calendar-padding-x: 15px;
+  // The padding used when show week numbers.
+  @calendar-padding-x-condensed: 12px;
 
   .rs-picker-toolbar {
     max-width: 100%;
@@ -68,17 +70,25 @@
     margin: 0 auto;
 
     &-show-week-numbers {
-      @calendar-width: (
-        @datepicker-calendar-cell-gap-x * 7 + 30px * 8 + @datepicker-calendar-padding-x * 2
-      );
+      @calendar-width: 278px; // This is a fixed value per design.
 
       min-width: @calendar-width;
+
+      & .rs-calendar-body {
+        padding-left: @calendar-padding-x-condensed;
+        padding-right: @calendar-padding-x-condensed;
+      }
     }
 
     &-header {
       width: 100%;
     }
 
+    &-body {
+      padding-left: @calendar-padding-x;
+      padding-right: @calendar-padding-x;
+    }
+
     &-table {
       width: unset;
     }

package/Dropdown/styles/mixin.less

@@ -39,7 +39,6 @@
   padding-right: @dropdown-toggle-padding-right;
   // Fixed: Content is not centered when customizing renderTitle.
   display: inline-block;
-  cursor: pointer;
 }
 
 // Horizontal dividers

package/InputGroup/styles/index.less

@@ -129,12 +129,12 @@
       display: block;
       width: 100%;
       border: none;
+      outline: none;
       padding-right: @input-group-padding-for-add-on-base;
     }
 
     .rs-input-group-btn,
     .rs-input-group-addon {
-      position: absolute;
       z-index: @zindex-input-group-icon;
       flex: 0 0 auto;
       width: auto;
@@ -165,7 +165,7 @@
       top: 0;
       background: none;
       border: none;
-      padding: 10px 13px;
+      padding: 10px 12px;
 
       &.rs-input-group-btn {
         padding: 8px 13px;
@@ -178,7 +178,7 @@
     .rs-input-group-addon ~ .rs-auto-complete > input.rs-input,
     .rs-input-group-addon ~ .rs-form-control-wrapper > input.rs-input,
     .rs-input-group-btn ~ .rs-form-control-wrapper > input.rs-input {
-      padding-left: @input-group-padding-for-add-on-base;
+      padding-left: 0;
       padding-right: 12px;
     }
 

package/Picker/styles/mixin.less

@@ -41,6 +41,7 @@
       top: @padding-y;
       right: @padding-x;
       padding: 3px;
+      color: var(--rs-text-secondary);
     }
   }
 }

package/cjs/Calendar/Calendar.d.ts

@@ -17,12 +17,17 @@ export interface CalendarProps extends WithAsProps {
     locale?: CalendarLocale;
     /**  Callback fired before the value changed  */
     onChange?: (date: Date) => void;
-    /** Callback fired before the month changed */
+    /**
+     * Callback fired before the month changed
+     * @todo-Doma Change signature to `onMonthChange(year: number, month: number, reason: string)`?
+     */
     onMonthChange?: (date: Date) => void;
     /** Callback fired before the date selected */
     onSelect?: (date: Date) => void;
     /** Custom render calendar cells  */
     renderCell?: (date: Date) => React.ReactNode;
+    /** Custom cell classes base on it's date */
+    cellClassName?: (date: Date) => string | undefined;
 }
 declare const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps>;
 export default Calendar;

package/cjs/Calendar/Calendar.js

@@ -44,7 +44,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       renderCell = props.renderCell,
       value = props.value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value"]);
+      cellClassName = props.cellClassName,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value", "cellClassName"]);
 
   var _useCalendarDate = (0, _useCalendarDate2.default)(value, defaultValue),
       calendarDate = _useCalendarDate.calendarDate,
@@ -56,21 +57,18 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleChange = (0, _react.useCallback)(function (nextValue) {
     setCalendarDate(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [setCalendarDate, onChange]);
+
+    if (!(0, _isSameMonth.default)(nextValue, calendarDate)) {
+      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
+    }
+  }, [setCalendarDate, onChange, calendarDate, onMonthChange]);
   var handleClickToday = (0, _react.useCallback)(function () {
     handleChange(new Date());
   }, [handleChange]);
   var handleSelect = (0, _react.useCallback)(function (nextValue) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
     handleChange(nextValue);
-  }, [handleChange, onSelect]); // Trigger onMonthChange when the month changes
-
-  var handleMonthChange = (0, _react.useCallback)(function (nextValue) {
-    if (!(0, _isSameMonth.default)(nextValue, calendarDate)) {
-      handleChange(nextValue);
-      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
-    }
-  }, [calendarDate, handleChange, onMonthChange]);
+  }, [handleChange, onSelect]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
@@ -108,9 +106,10 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     },
     renderToolbar: renderToolbar,
     renderCell: customRenderCell,
-    onMoveForward: handleMonthChange,
-    onMoveBackward: handleMonthChange,
-    onChangeMonth: handleMonthChange,
+    cellClassName: cellClassName,
+    onMoveForward: handleChange,
+    onMoveBackward: handleChange,
+    onChangeMonth: handleChange,
     onSelect: handleSelect
   }));
 });

package/cjs/Calendar/CalendarContainer.d.ts

@@ -52,6 +52,8 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     /** Custom rendering cell*/
     renderCell?: (date: Date) => React.ReactNode;
+    /** Custom cell classes base on it's date */
+    cellClassName?: (date: Date) => string | undefined;
     /** Called when opening the month view */
     onToggleMonthDropdown?: (toggle: boolean) => void;
     /** Called when opening the time view */

package/cjs/Calendar/CalendarContainer.js

@@ -63,13 +63,14 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
       calendarDate = props.calendarDate,
+      cellClassName = props.cellClassName,
       renderCell = props.renderCell,
       renderTitle = props.renderTitle,
       renderToolbar = props.renderToolbar,
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -155,11 +156,12 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       onChangeTime: onChangeTime,
       onMouseMove: onMouseMove,
       onSelect: onSelect,
+      cellClassName: cellClassName,
       renderCell: renderCell,
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
   return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {

package/cjs/Calendar/TableRow.js

@@ -41,6 +41,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       isoWeek = _useCalendarContext.isoWeek,
       onMouseMove = _useCalendarContext.onMouseMove,
       onSelect = _useCalendarContext.onSelect,
+      cellClassName = _useCalendarContext.cellClassName,
       renderCell = _useCalendarContext.renderCell,
       overrideLocale = _useCalendarContext.locale,
       showWeekNumbers = _useCalendarContext.showWeekNumbers;
@@ -89,7 +90,9 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       var isEndSelected = !unSameMonth && selectedEndDate && _utils.DateUtils.isSameDay(thisDate, selectedEndDate);
 
-      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.DateUtils.isSameDay(thisDate, selected);
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.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) {
@@ -113,7 +116,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         }
       }
 
-      var _classes = prefix('cell', {
+      var _classes = merge(prefix('cell', {
         'cell-un-same-month': unSameMonth,
         'cell-is-today': isToday,
         'cell-selected': isSelected,
@@ -121,7 +124,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         '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", {

package/cjs/Calendar/types.d.ts

@@ -13,6 +13,7 @@ export interface CalendarInnerContextValue {
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     renderCell?: (date: Date) => React.ReactNode;
+    cellClassName?: (date: Date) => string | undefined;
     showWeekNumbers?: boolean;
     inline?: boolean;
 }

package/cjs/InputPicker/InputPicker.js

@@ -536,9 +536,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();
     }
   }, [readOnly]);
-  var handleBlur = (0, _react.useCallback)(function () {
-    setOpen(false);
-  }, []);
   var handleEnter = (0, _react.useCallback)(function () {
     focusInput();
     setOpen(true);
@@ -773,7 +770,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {
     tabIndex: tabIndex,
     readOnly: readOnly,
-    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),
+    onBlur: onBlur,
     onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),
     inputRef: inputRef,
     onChange: handleSearch,

package/cjs/Overlay/OverlayTrigger.js

@@ -252,7 +252,7 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }, [enterable, open, handleOpen]);
   var handleDelayedClose = (0, _react.useCallback)(function () {
     if (!enterable) {
-      handleClose();
+      return handleClose();
     }
 
     isOnTrigger.current = false;

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

@@ -2708,7 +2708,6 @@ tbody.rs-anim-collapse.rs-anim-in {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
 }
 .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle {
   cursor: not-allowed;
@@ -3211,7 +3210,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-table-cell-week-number {
   display: table-cell;
-  width: 1%;
+  min-width: 30px;
   padding: 1px;
   text-align: center;
   vertical-align: middle;
@@ -3246,14 +3245,14 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-month-dropdown-row {
   position: relative;
-  padding-right: 52px;
+  padding-right: 50px;
   padding-left: 12px;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 .rs-calendar-month-dropdown-row:not(:last-child) {
-  border-bottom: 1px dotted #e5e5ea;
-  border-bottom: 1px dotted var(--rs-border-primary);
+  border-bottom: 1px dashed #e5e5ea;
+  border-bottom: 1px dashed var(--rs-border-primary);
 }
 .rs-calendar-month-dropdown-year {
   position: absolute;
@@ -3266,6 +3265,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-month-dropdown-list {
   display: block;
+  min-width: 200px;
 }
 .rs-calendar-month-dropdown-list::before,
 .rs-calendar-month-dropdown-list::after {
@@ -3278,7 +3278,6 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: right;
-  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -4108,6 +4107,8 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   top: 8px;
   left: 12px;
   padding: 3px;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
 }
 .rs-picker-check-menu-items .rs-picker-menu-group.folded .rs-picker-menu-group-caret {
   -webkit-transform: rotate(-90deg);
@@ -4344,16 +4345,24 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   max-width: 400px;
 }
 .rs-picker-menu .rs-calendar {
-  min-width: 246px;
+  min-width: 264px;
   display: block;
   margin: 0 auto;
 }
 .rs-picker-menu .rs-calendar-show-week-numbers {
   min-width: 278px;
 }
+.rs-picker-menu .rs-calendar-show-week-numbers .rs-calendar-body {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .rs-picker-menu .rs-calendar-header {
   width: 100%;
 }
+.rs-picker-menu .rs-calendar-body {
+  padding-right: 15px;
+  padding-left: 15px;
+}
 .rs-picker-menu .rs-calendar-table {
   width: unset;
 }
@@ -4892,7 +4901,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
 }
 .rs-dropdown-toggle.rs-dropdown-toggle-no-caret {
   padding-left: 12px;
@@ -8026,11 +8034,11 @@ textarea.rs-input-sm {
   display: block;
   width: 100%;
   border: none;
+  outline: none;
   padding-left: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
-  position: absolute;
   z-index: 4;
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
@@ -8091,7 +8099,7 @@ textarea.rs-input-sm {
   top: 0;
   background: none;
   border: none;
-  padding: 10px 13px;
+  padding: 10px 12px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-addon.rs-input-group-btn {
   padding: 8px 13px;
@@ -8102,7 +8110,7 @@ textarea.rs-input-sm {
 .rs-input-group.rs-input-group-inside .rs-input-group-addon ~ .rs-auto-complete > input.rs-input,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon ~ .rs-form-control-wrapper > input.rs-input,
 .rs-input-group.rs-input-group-inside .rs-input-group-btn ~ .rs-form-control-wrapper > input.rs-input {
-  padding-right: 36px;
+  padding-right: 0;
   padding-left: 12px;
 }
 .rs-input-group.rs-input-group-inside input.rs-input ~ .rs-input-group-btn,
@@ -11492,7 +11500,6 @@ textarea.rs-picker-search-input {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
   color: #575757;
   color: var(--rs-text-primary);
   border: 1px solid #e5e5ea;
@@ -11511,7 +11518,6 @@ textarea.rs-picker-search-input {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
 }
 .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle {
   cursor: not-allowed;
@@ -12882,6 +12888,8 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   top: 8px;
   left: 12px;
   padding: 3px;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
 }
 .rs-picker-select-menu-items .rs-picker-menu-group.folded .rs-picker-menu-group-caret {
   -webkit-transform: rotate(-90deg);