fix(calendar): disable button picker in calendar if isDisabled is t…

…rue (#3358)

* fix(calendar): disable button picker in calendar if `isDisabled` is true

* feat(changeset): add changeset

* feat(calendar): add test to cover showMonthAndYearPickers with isDisabled

.changeset/friendly-pumas-brush.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/calendar": patch
+---
+
+disable button picker in calendar if `isDisabled` is true (#3357)

packages/components/calendar/__tests__/calendar.test.tsx

@@ -254,6 +254,16 @@ describe("Calendar", () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
+    it("should not open a month & year picker if isDisabled is true", () => {
+      const {container} = render(
+        <Calendar isDisabled showMonthAndYearPickers value={new CalendarDate(2024, 6, 29)} />,
+      );
+
+      const headerButtonPicker = container.querySelector("[data-slot='header']");
+
+      expect(headerButtonPicker).toHaveAttribute("disabled");
+    });
+
     it("should not select a date on click if isReadOnly", () => {
       let onChange = jest.fn();
       let {getByLabelText, getByText} = render(

packages/components/calendar/src/use-calendar.ts

@@ -8,7 +8,7 @@ import {useCalendar as useAriaCalendar} from "@react-aria/calendar";
 import {useCalendarState} from "@react-stately/calendar";
 import {createCalendar} from "@internationalized/date";
 import {clsx} from "@nextui-org/shared-utils";
-import {chain} from "@react-aria/utils";
+import {chain, mergeProps} from "@react-aria/utils";
 
 import {ContextType, useCalendarBase, UseCalendarBaseProps} from "./use-calendar-base";
 import {CalendarBaseProps} from "./calendar-base";
@@ -76,7 +76,7 @@ export function useCalendar<T extends DateValue>({
   const baseStyles = clsx(classNames?.base, className);
 
   const buttonPickerProps: ButtonProps = {
-    ...buttonPickerPropsProp,
+    ...mergeProps(buttonPickerPropsProp, {isDisabled: originalProps.isDisabled}),
     onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)),
   };