fix(calendar): rtl navigation

.changeset/cyan-deers-tap.md

@@ -0,0 +1,6 @@
+---
+"@heroui/calendar": patch
+"@heroui/theme": patch
+---
+
+Fixed reversed navigation behavior of nextButton and prevButton in the RTL calendar. The buttons now correctly navigate to the next and previous months, ensuring consistent behavior across all locales and layouts. (#4541)

packages/components/calendar/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "@heroui/system": ">=2.4.0",
-    "@heroui/theme": ">=2.4.0",
+    "@heroui/theme": ">=2.4.7",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"

packages/components/calendar/src/calendar-base.tsx

@@ -8,6 +8,7 @@ import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@heroui/button";
 import {chain, mergeProps} from "@react-aria/utils";
 import {AnimatePresence, LazyMotion, MotionConfig} from "framer-motion";
+import {useLocale} from "@react-aria/i18n";
 import {ResizablePanel} from "@heroui/framer-utils";
 
 import {ChevronLeftIcon} from "./chevron-left";
@@ -70,20 +71,26 @@ export function CalendarBase(props: CalendarBaseProps) {
 
   const [direction, setDirection] = useState<number>(0);
 
+  const {direction: localeDirection} = useLocale();
+
   const currentMonth = state.visibleRange.start;
 
   const headers: React.ReactNode[] = [];
   const calendars: React.ReactNode[] = [];
 
+  const isRTL = localeDirection === "rtl";
+
   for (let i = 0; i < visibleMonths; i++) {
     let d = currentMonth.add({months: i});
 
     headers.push(
       <Fragment key={`calendar-header-${i}`}>
         {i === 0 && (
           <Button
-            {...prevButtonProps}
-            onPress={chain(prevButtonProps.onPress, () => setDirection(-1))}
+            {...(isRTL ? nextButtonProps : prevButtonProps)}
+            onPress={chain(isRTL ? nextButtonProps.onPress : prevButtonProps.onPress, () =>
+              setDirection(-1),
+            )}
           >
             <ChevronLeftIcon />
           </Button>
@@ -96,8 +103,10 @@ export function CalendarBase(props: CalendarBaseProps) {
         />
         {i === visibleMonths - 1 && (
           <Button
-            {...nextButtonProps}
-            onPress={chain(nextButtonProps.onPress, () => setDirection(1))}
+            {...(isRTL ? prevButtonProps : nextButtonProps)}
+            onPress={chain(isRTL ? prevButtonProps.onPress : nextButtonProps.onPress, () =>
+              setDirection(1),
+            )}
           >
             <ChevronRightIcon />
           </Button>

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

@@ -188,7 +188,9 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
 
   const globalContext = useProviderContext();
 
-  const {locale} = useLocale();
+  const {locale, direction} = useLocale();
+
+  const isRTL = direction === "rtl";
 
   const calendarProp = createCalendar(new DateFormatter(locale).resolvedOptions().calendar);
 
@@ -261,6 +263,7 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
         isRange: !!originalProps.isRange,
         isHeaderWrapperExpanded: isHeaderExpanded,
         className,
+        isRTL,
       }),
     [objectToDeps(variantProps), showMonthAndYearPickers, isHeaderExpanded, className],
   );

packages/core/theme/src/components/calendar.ts

@@ -148,12 +148,20 @@ const calendar = tv({
         pickerItem: "transition-opacity",
       },
     },
+    isRTL: {
+      true: {
+        nextButton: "order-1",
+        prevButton: "order-3",
+      },
+      false: {},
+    },
   },
   defaultVariants: {
     color: "primary",
     showShadow: false,
     hideDisabledDates: false,
     showMonthAndYearPickers: false,
+    isRTL: false,
   },
   compoundVariants: [
     // !isRange & colors --> Calendar