Merge branch 'main' into refactor/SelectPicker-grouped-options-elemen…

…t-hierarchy
rsuite · Aug 21, 2023 · b5a10da · b5a10da
2 parents 8f49f79 + b4cb5f9
commit b5a10da
Show file tree

Hide file tree

Showing 35 changed files with 412 additions and 288 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,38 @@
+# [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
+
+- **SelectPicker:** fix display options not updating when data prop is updated ([#3319](https://github.com/rsuite/rsuite/issues/3319)) ([06c9cce](https://github.com/rsuite/rsuite/commit/06c9cce64ea27a756f87aa74a0af0287afdf106a))
+
+## [5.37.2](https://github.com/rsuite/rsuite/compare/v5.37.1...v5.37.2) (2023-07-28)
+
+### Bug Fixes
+
+- **CheckPicker:** wrong padding of grouped options ([#3306](https://github.com/rsuite/rsuite/issues/3306)) ([03ca6bf](https://github.com/rsuite/rsuite/commit/03ca6bff626146d44b1dd9ca1f931a984ad3103a))
+- **Overlay:** type error on OverlayTriggerProps ([#3307](https://github.com/rsuite/rsuite/issues/3307)) ([4a2e28e](https://github.com/rsuite/rsuite/commit/4a2e28e2412a6ffebcb9ad03a99a808f4d9ee3ee))
+- **RadioGroup:** unexpected wrapped text in picker appearance ([#3303](https://github.com/rsuite/rsuite/issues/3303)) ([c5aa81a](https://github.com/rsuite/rsuite/commit/c5aa81affab3333e6a29189d69c071d9208fbba8))
+
 ## [5.37.1](https://github.com/rsuite/rsuite/compare/v5.37.0...v5.37.1) (2023-07-21)
 
 ### Bug Fixes

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "5.37.1",
+  "version": "5.38.0",
   "private": true,
   "scripts": {
     "check:type": "tsc",
@@ -43,7 +43,7 @@
     "react-icons": "^4.2.0",
     "react-json-tree": "^0.17.0",
     "react-select": "^5.5.9",
-    "rsuite": "^5.37.1",
+    "rsuite": "^5.38.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo": "^2.3.1",
     "svgo-loader": "^3.0.3",

diff --git a/docs/pages/components/calendar/en-US/index.md b/docs/pages/components/calendar/en-US/index.md
@@ -20,14 +20,17 @@ A component that displays data by calendar
 
 ### `<Calendar>`
 
-| Property     | Type`(Default)`                             | Description                                                                          |
-| ------------ | ------------------------------------------- | ------------------------------------------------------------------------------------ |
-| bordered     | boolean                                     | Show border                                                                          |
-| compact      | boolean                                     | Display a compact calendar                                                           |
-| defaultValue | Date                                        | Default value                                                                        |
-| isoWeek      | boolean                                     | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day |
-| locale       | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text                                                                          |
-| onChange     | (date:Date) => void                         | Callback fired before the value changed                                              |
-| onSelect     | (date:Date) => void                         | Callback fired before the date selected                                              |
-| renderCell   | (date: Date) => ReactNode                   | Custom render calendar cells                                                         |
-| value        | Date                                        | Controlled value                                                                     |
+<!-- prettier-sort-markdown-table -->
+
+| Property      | Type`(Default)`                             | Description                                                                          |
+| ------------- | ------------------------------------------- | ------------------------------------------------------------------------------------ |
+| bordered      | boolean                                     | Show border                                                                          |
+| cellClassName | (date: Date) => string \| undefined         | Custom cell classes base on it's date                                                |
+| compact       | boolean                                     | Display a compact calendar                                                           |
+| defaultValue  | Date                                        | Default value                                                                        |
+| isoWeek       | boolean                                     | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day |
+| locale        | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text                                                                          |
+| onChange      | (date:Date) => void                         | Callback fired before the value changed                                              |
+| onSelect      | (date:Date) => void                         | Callback fired before the date selected                                              |
+| renderCell    | (date: Date) => ReactNode                   | Custom render calendar cells                                                         |
+| value         | Date                                        | Controlled value                                                                     |
diff --git a/docs/pages/components/calendar/zh-CN/index.md b/docs/pages/components/calendar/zh-CN/index.md
@@ -20,14 +20,17 @@
 
 ### `<Calendar>`
 
-| 属性名称     | 类型`(默认值)`                                 | 描述                                                      |
-| ------------ | ---------------------------------------------- | --------------------------------------------------------- |
-| bordered     | boolean                                        | 显示边框                                                  |
-| compact      | boolean                                        | 紧凑型显示                                                |
-| defaultValue | Date                                           | 默认值                                                    |
-| isoWeek      | boolean                                        | ISO 8601 标准， 每个日历星期从星期一开始，星期日为第 7 天 |
-| locale       | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本                                              |
-| onChange     | (date:Date) => void                            | 值改变后的回调函数                                        |
-| onSelect     | (date:Date) => void                            | 选择日期后的回调函数                                      |
-| renderCell   | (date: Date) => ReactNode                      | 自定义渲染日历单元格                                      |
-| value        | Date                                           | 值 (`受控`)                                               |
+<!-- prettier-sort-markdown-table -->
+
+| 属性名称      | 类型`(默认值)`                                 | 描述                                                      |
+| ------------- | ---------------------------------------------- | --------------------------------------------------------- |
+| bordered      | boolean                                        | 显示边框                                                  |
+| cellClassName | (date: Date) => string \| undefined            | 根据单元格日期自定义 class                                |
+| compact       | boolean                                        | 紧凑型显示                                                |
+| defaultValue  | Date                                           | 默认值                                                    |
+| isoWeek       | boolean                                        | ISO 8601 标准， 每个日历星期从星期一开始，星期日为第 7 天 |
+| locale        | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本                                              |
+| onChange      | (date:Date) => void                            | 值改变后的回调函数                                        |
+| onSelect      | (date:Date) => void                            | 选择日期后的回调函数                                      |
+| renderCell    | (date: Date) => ReactNode                      | 自定义渲染日历单元格                                      |
+| value         | Date                                           | 值 (`受控`)                                               |
diff --git a/docs/pages/components/input/fragments/input-group-inside.md b/docs/pages/components/input/fragments/input-group-inside.md
@@ -29,6 +29,11 @@ const App = () => (
       </InputGroup.Button>
     </InputGroup>
 
+    <InputGroup inside style={styles}>
+      <InputGroup.Addon>https://</InputGroup.Addon>
+      <Input defaultValue="www." />
+    </InputGroup>
+
     <InputGroup inside style={styles}>
       <Input />
       <InputGroup.Addon>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.37.1",
+  "version": "5.38.0",
   "description": "A suite of react components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

diff --git a/src/Calendar/Calendar.tsx b/src/Calendar/Calendar.tsx
@@ -31,14 +31,20 @@ export interface CalendarProps extends WithAsProps {
   /**  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;
 }
 
 const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps> =
@@ -57,6 +63,7 @@ const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps
       onSelect,
       renderCell,
       value,
+      cellClassName,
       ...rest
     } = props;
 
@@ -67,8 +74,12 @@ const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps
       (nextValue: Date) => {
         setCalendarDate(nextValue);
         onChange?.(nextValue);
+
+        if (!isSameMonth(nextValue, calendarDate)) {
+          onMonthChange?.(nextValue);
+        }
       },
-      [setCalendarDate, onChange]
+      [setCalendarDate, onChange, calendarDate, onMonthChange]
     );
 
     const handleClickToday = useCallback(() => {
@@ -83,17 +94,6 @@ const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps
       [handleChange, onSelect]
     );
 
-    // Trigger onMonthChange when the month changes
-    const handleMonthChange = useCallback(
-      (nextValue: Date) => {
-        if (!isSameMonth(nextValue, calendarDate)) {
-          handleChange(nextValue);
-          onMonthChange?.(nextValue);
-        }
-      },
-      [calendarDate, handleChange, onMonthChange]
-    );
-
     const { prefix, merge, withClassPrefix } = useClassNames(classPrefix);
 
     const renderToolbar = useCallback(
@@ -125,9 +125,10 @@ const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps
         )}
         renderToolbar={renderToolbar}
         renderCell={customRenderCell}
-        onMoveForward={handleMonthChange}
-        onMoveBackward={handleMonthChange}
-        onChangeMonth={handleMonthChange}
+        cellClassName={cellClassName}
+        onMoveForward={handleChange}
+        onMoveBackward={handleChange}
+        onChangeMonth={handleChange}
         onSelect={handleSelect}
       />
     );

diff --git a/src/Calendar/CalendarContainer.tsx b/src/Calendar/CalendarContainer.tsx
@@ -99,6 +99,9 @@ export interface CalendarProps
   /** 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;
 
@@ -133,6 +136,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
       onToggleMonthDropdown,
       onToggleTimeDropdown,
       calendarDate,
+      cellClassName,
       renderCell,
       renderTitle,
       renderToolbar,
@@ -228,6 +232,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
         onChangeTime,
         onMouseMove,
         onSelect,
+        cellClassName,
         renderCell,
         showWeekNumbers,
         inline
@@ -246,6 +251,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
         onChangeTime,
         onMouseMove,
         onSelect,
+        cellClassName,
         renderCell,
         showWeekNumbers
       ]

diff --git a/src/Calendar/TableRow.tsx b/src/Calendar/TableRow.tsx
@@ -27,6 +27,7 @@ const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRe
       isoWeek,
       onMouseMove,
       onSelect,
+      cellClassName,
       renderCell,
       locale: overrideLocale,
       showWeekNumbers
@@ -66,6 +67,8 @@ const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRe
           ? isStartSelected || isEndSelected
           : 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
         let inRange = false;
         // for Selected
         if (selectedStartDate && selectedEndDate) {
@@ -99,15 +102,18 @@ const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRe
           }
         }
 
-        const classes = 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
-        });
+        const 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?.(thisDate)
+        );
 
         const title = formatDate
           ? formatDate(thisDate, formatStr)