fix(calendar): arrows changing order when html has dir="rtl" (#3656)

* fix(calendar): #3641,#3642 add order and row-reverse to arrows for rtl layout support

* chore(changeset): patch @nextui-org/calendar

* chore(changeset): add missing package and revise changeset message

---------

Co-authored-by: WK Wong <[email protected]>

.changeset/slow-forks-nail.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/theme": patch
+---
+
+fixed arrow keys order when html has dir="rtl" (#3641, #3642)

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

@@ -5,7 +5,6 @@ import type {HTMLAttributes, ReactNode, RefObject} from "react";
 
 import {Fragment} from "react";
 import {useState} from "react";
-import {useLocale} from "@react-aria/i18n";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@nextui-org/button";
 import {chain, mergeProps} from "@react-aria/utils";
@@ -55,8 +54,6 @@ export function CalendarBase(props: CalendarBaseProps) {
 
   const [direction, setDirection] = useState<number>(0);
 
-  const {direction: rtlDirection} = useLocale();
-
   const currentMonth = state.visibleRange.start;
 
   const headers: React.ReactNode[] = [];
@@ -72,7 +69,7 @@ export function CalendarBase(props: CalendarBaseProps) {
             {...prevButtonProps}
             onPress={chain(prevButtonProps.onPress, () => setDirection(-1))}
           >
-            {rtlDirection === "rtl" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+            <ChevronLeftIcon />
           </Button>
         )}
         <CalendarHeader
@@ -86,7 +83,7 @@ export function CalendarBase(props: CalendarBaseProps) {
             {...nextButtonProps}
             onPress={chain(nextButtonProps.onPress, () => setDirection(1))}
           >
-            {rtlDirection === "rtl" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+            <ChevronRightIcon />
           </Button>
         )}
       </Fragment>,

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

@@ -10,18 +10,18 @@ const calendar = tv({
       "rounded-large overflow-x-auto bg-default-50 dark:bg-background",
       "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
     ],
-    prevButton: [],
-    nextButton: [],
+    prevButton: ["order-1"],
+    nextButton: ["order-3"],
     headerWrapper: [
-      "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden",
+      "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden rtl:flex-row-reverse",
       "[&_.chevron-icon]:flex-none",
       // month/year picker wrapper
       "after:content-['']",
       "after:bg-content1 origin-top",
       "after:w-full after:h-0",
       "after:absolute after:top-0 after:left-0",
     ],
-    header: "flex w-full items-center justify-center gap-2 z-10",
+    header: "flex w-full items-center justify-center gap-2 z-10 order-2",
     title: "text-default-500 text-small font-medium",
     content: "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
     gridWrapper: "flex max-w-full overflow-hidden pb-2 h-auto relative",