Merge branch 'main' into main

src/Calendar/Calendar.tsx

@@ -31,7 +31,10 @@ 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 */
@@ -71,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(() => {
@@ -87,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(
@@ -130,9 +126,9 @@ const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps
         renderToolbar={renderToolbar}
         renderCell={customRenderCell}
         cellClassName={cellClassName}
-        onMoveForward={handleMonthChange}
-        onMoveBackward={handleMonthChange}
-        onChangeMonth={handleMonthChange}
+        onMoveForward={handleChange}
+        onMoveBackward={handleChange}
+        onChangeMonth={handleChange}
         onSelect={handleSelect}
       />
     );

src/Calendar/TableRow.tsx

@@ -67,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) {

src/Calendar/test/CalendarSpec.tsx

@@ -99,17 +99,21 @@ describe('Calendar', () => {
     expect(cells).to.deep.equal(['26', '27', '28', '29', '30', '31', '1', '2', '3', '4', '5', '6']);
   });
 
-  it('Should call `onMonthChange` callback', () => {
+  it('Should call `onMonthChange` callback when the display month changes', () => {
     const onMonthChangeSpy = sinon.spy();
 
-    render(<Calendar defaultValue={new Date('2023-01-01')} onMonthChange={onMonthChangeSpy} />);
+    const { rerender } = render(
+      <Calendar defaultValue={new Date(2023, 0, 1)} onMonthChange={onMonthChangeSpy} />
+    );
 
+    // Change month with Next/Previous month button
     fireEvent.click(screen.getByRole('button', { name: 'Next month' }));
     expect(onMonthChangeSpy).to.have.been.calledOnce;
 
     fireEvent.click(screen.getByRole('button', { name: 'Previous month' }));
     expect(onMonthChangeSpy).to.have.been.calledTwice;
 
+    // Change month with Month dropdown
     fireEvent.click(screen.getByRole('button', { name: 'Select month' }));
 
     fireEvent.click(
@@ -120,6 +124,22 @@ describe('Calendar', () => {
     );
 
     expect(onMonthChangeSpy).to.have.been.calledThrice;
+
+    // Change month by clicking on a date in a different month
+    rerender(<Calendar value={new Date(2023, 0, 1)} onMonthChange={onMonthChangeSpy} />);
+    fireEvent.click(screen.getByTitle('01 Feb 2023')); // TODO-Doma Add accessible name to the button via aria-label
+    expect(onMonthChangeSpy).to.have.callCount(4);
+    expect((onMonthChangeSpy.getCall(3).args[0] as Date).getFullYear()).to.equal(2023);
+    expect((onMonthChangeSpy.getCall(3).args[0] as Date).getMonth()).to.equal(1);
+
+    // Change month with "Today" button
+    const clock = sinon.useFakeTimers(new Date(2023, 0, 1));
+    rerender(<Calendar value={new Date(2023, 1, 1)} onMonthChange={onMonthChangeSpy} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Today' }));
+    expect(onMonthChangeSpy).to.have.callCount(5);
+    expect((onMonthChangeSpy.getCall(4).args[0] as Date).getFullYear()).to.equal(2023);
+    expect((onMonthChangeSpy.getCall(4).args[0] as Date).getMonth()).to.equal(0);
+    clock.restore();
   });
 
   it('Should  not call `onMonthChange` callback when same month is clicked', () => {

src/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

src/utils/test/useElementResizeSpec.ts

@@ -3,6 +3,10 @@ import { renderHook } from '@test/testUtils';
 import useElementResize from '../useElementResize';
 import { act, waitFor } from '@testing-library/react';
 
+afterEach(() => {
+  sinon.restore();
+});
+
 describe('[utils] useElementResize', () => {
   it('should be defined', () => {
     expect(useElementResize).to.be.exist;