fix(rtl-customisation): changed the header back button orientations o…

.changeset/neat-lobsters-return.md

@@ -0,0 +1,24 @@
+---
+"@refinedev/antd": patch
+---
+
+fix(antd): use appropriate icons for RTL direction layouts
+
+Previously CRUD components and `<ThemedSiderV2 />` component used hardcoded icons which doesn't fit well for RTL layouts. This PR uses Ant Design's `ConfigProvider` context to use `direction` to determine the appropriate icons for RTL layouts.
+
+**Example**
+
+```tsx
+import { ConfigProvider } from 'antd';
+import { Refine } from '@refinedev/antd';
+
+const App = () => (
+  <ConfigProvider direction="rtl">
+    <Refine
+        {/* ... */}
+    />
+  </ConfigProvider>
+);
+```
+
+When any CRUD component or `<ThemedSiderV2 />` component is rendered, the icons will be rendered with respect to the `direction` prop of `ConfigProvider`.

packages/antd/src/components/pageHeader/index.spec.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { render, TestWrapper } from "@test";
+import { PageHeader } from "./";
+import { ConfigProvider } from "antd";
+
+describe("PageHeader", () => {
+  it("should render default back button with respect to direction from config", async () => {
+    const { rerender, queryByLabelText } = render(
+      <ConfigProvider>
+        <PageHeader onBack={() => 0} title="title">
+          content
+        </PageHeader>
+      </ConfigProvider>,
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+
+    expect(queryByLabelText("arrow-left")).toBeTruthy();
+    expect(queryByLabelText("arrow-right")).toBeFalsy();
+
+    rerender(
+      <ConfigProvider direction="rtl">
+        <PageHeader onBack={() => 0} title="title">
+          content
+        </PageHeader>
+      </ConfigProvider>,
+    );
+
+    expect(queryByLabelText("arrow-left")).toBeFalsy();
+    expect(queryByLabelText("arrow-right")).toBeTruthy();
+  });
+});

packages/antd/src/components/pageHeader/index.tsx

@@ -1,22 +1,25 @@
-import React, { type FC } from "react";
+import React, { useContext, type FC } from "react";
 import {
   PageHeader as AntdPageHeader,
   type PageHeaderProps as AntdPageHeaderProps,
 } from "@ant-design/pro-layout";
-import { Button, Typography } from "antd";
-import { ArrowLeftOutlined } from "@ant-design/icons";
+import { Button, ConfigProvider, Typography } from "antd";
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
 
 export type PageHeaderProps = AntdPageHeaderProps;
 
 export const PageHeader: FC<AntdPageHeaderProps> = ({ children, ...props }) => {
+  const direction = useContext(ConfigProvider.ConfigContext)?.direction;
+  const renderBackButton = () => {
+    const BackIcon =
+      direction === "rtl" ? ArrowRightOutlined : ArrowLeftOutlined;
+
+    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
+    return <Button type="text" icon={<BackIcon />} />;
+  };
   const backIcon =
-    typeof props.backIcon === "undefined" ? (
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
-      <Button type="text" icon={<ArrowLeftOutlined />} />
-    ) : (
-      props.backIcon
-    );
+    typeof props.backIcon === "undefined" ? renderBackButton() : props.backIcon;
 
   const title =
     typeof props.title === "string" ? (

packages/antd/src/components/themedLayoutV2/sider/index.spec.tsx

@@ -5,6 +5,7 @@ import type * as Grid from "antd/lib/grid";
 import { TestWrapper } from "@test/index";
 import { ThemedSiderV2 } from "./index";
 import { layoutSiderTests } from "@refinedev/ui-tests";
+import { ConfigProvider } from "antd";
 
 jest.mock("antd/lib/grid", () => {
   // Require the original module to not be mocked...
@@ -48,4 +49,43 @@ describe("Sider", () => {
       height: "100vh",
     });
   });
+
+  it("should render sider trigger with respect to direction from config", async () => {
+    const { rerender, container } = render(
+      <ConfigProvider>
+        <ThemedSiderV2 />
+      </ConfigProvider>,
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+
+    expect(
+      container.querySelector(
+        ".ant-layout-sider-trigger .anticon.anticon-left",
+      ),
+    ).toBeTruthy();
+    expect(
+      container.querySelector(
+        ".ant-layout-sider-trigger .anticon.anticon-right",
+      ),
+    ).toBeFalsy();
+
+    rerender(
+      <ConfigProvider direction="rtl">
+        <ThemedSiderV2 />
+      </ConfigProvider>,
+    );
+
+    expect(
+      container.querySelector(
+        ".ant-layout-sider-trigger .anticon.anticon-right",
+      ),
+    ).toBeTruthy();
+    expect(
+      container.querySelector(
+        ".ant-layout-sider-trigger .anticon.anticon-left",
+      ),
+    ).toBeFalsy();
+  });
 });

packages/antd/src/components/themedLayoutV2/sider/index.tsx

@@ -1,5 +1,13 @@
-import React from "react";
-import { Layout, Menu, Grid, Drawer, Button, theme } from "antd";
+import React, { useContext } from "react";
+import {
+  Layout,
+  Menu,
+  Grid,
+  Drawer,
+  Button,
+  theme,
+  ConfigProvider,
+} from "antd";
 import {
   DashboardOutlined,
   LogoutOutlined,
@@ -46,6 +54,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
   } = useThemedLayoutContext();
 
   const isExistAuthentication = useIsExistAuthentication();
+  const direction = useContext(ConfigProvider.ConfigContext)?.direction;
   const routerType = useRouterType();
   const NewLink = useLink();
   const { warnWhen, setWarnWhen } = useWarnAboutChange();
@@ -282,6 +291,15 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
     siderStyles.height = "100vh";
     siderStyles.zIndex = 999;
   }
+  const renderClosingIcons = () => {
+    const iconProps = { style: { color: token.colorPrimary } };
+    const OpenIcon = direction === "rtl" ? RightOutlined : LeftOutlined;
+    const CollapsedIcon = direction === "rtl" ? LeftOutlined : RightOutlined;
+    const IconComponent = siderCollapsed ? CollapsedIcon : OpenIcon;
+
+    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
+    return <IconComponent {...iconProps} />;
+  };
 
   return (
     <>
@@ -314,21 +332,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
               backgroundColor: token.colorBgElevated,
             }}
           >
-            {siderCollapsed ? (
-              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
-              <RightOutlined
-                style={{
-                  color: token.colorPrimary,
-                }}
-              />
-            ) : (
-              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
-              <LeftOutlined
-                style={{
-                  color: token.colorPrimary,
-                }}
-              />
-            )}
+            {renderClosingIcons()}
           </Button>
         }
       >