@refinedev/antd 5.47.0 → 6.0.1

package/src/components/pages/auth/components/updatePassword/index.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import {
-  type UpdatePasswordPageProps,
-  type UpdatePasswordFormTypes,
-  useActiveAuthProvider,
+import type {
+  UpdatePasswordPageProps,
+  UpdatePasswordFormTypes,
 } from "@refinedev/core";
 import {
   Row,
@@ -27,7 +26,7 @@ import {
   headStyles,
   bodyStyles,
 } from "../styles";
-import { ThemedTitleV2 } from "@components";
+import { ThemedTitle } from "@components";
 
 type UpdatePasswordProps = UpdatePasswordPageProps<
   LayoutProps,
@@ -51,11 +50,8 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
   const { token } = theme.useToken();
   const [form] = Form.useForm<UpdatePasswordFormTypes>();
   const translate = useTranslate();
-  const authProvider = useActiveAuthProvider();
-  const { mutate: updatePassword, isLoading } =
-    useUpdatePassword<UpdatePasswordFormTypes>({
-      v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-    });
+  const { mutate: updatePassword, isPending } =
+    useUpdatePassword<UpdatePasswordFormTypes>();
 
   const PageTitle =
     title === false ? null : (
@@ -67,7 +63,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
           fontSize: "20px",
         }}
       >
-        {title ?? <ThemedTitleV2 collapsed={false} />}
+        {title ?? <ThemedTitle collapsed={false} />}
       </div>
     );
 
@@ -86,8 +82,10 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
   const CardContent = (
     <Card
       title={CardTitle}
-      headStyle={headStyles}
-      bodyStyle={bodyStyles}
+      styles={{
+        header: headStyles,
+        body: bodyStyles,
+      }}
       style={{
         ...containerStyles,
         backgroundColor: token.colorBgElevated,
@@ -166,7 +164,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
             type="primary"
             size="large"
             htmlType="submit"
-            loading={isLoading}
+            loading={isPending}
             block
           >
             {translate("pages.updatePassword.buttons.submit", "Update")}

package/src/components/pages/error/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { useGo, useResource, useRouterType } from "@refinedev/core";
+import { useGo, useResourceParams } from "@refinedev/core";
 import type { RefineErrorPageProps } from "@refinedev/ui-types";
 import { Button, Result, Typography, Space, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { useNavigation, useTranslate } from "@refinedev/core";
+import { useTranslate } from "@refinedev/core";
 
 /**
  * When the app is navigated to a non-existent route, refine shows a default error page.
@@ -14,11 +14,9 @@ import { useNavigation, useTranslate } from "@refinedev/core";
 export const ErrorComponent: React.FC<RefineErrorPageProps> = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
   const translate = useTranslate();
-  const { push } = useNavigation();
   const go = useGo();
-  const routerType = useRouterType();
 
-  const { resource, action } = useResource();
+  const { resource, action } = useResourceParams();
 
   useEffect(() => {
     if (resource) {
@@ -56,16 +54,7 @@ export const ErrorComponent: React.FC<RefineErrorPageProps> = () => {
               </Tooltip>
             )}
           </Space>
-          <Button
-            type="primary"
-            onClick={() => {
-              if (routerType === "legacy") {
-                push("/");
-              } else {
-                go({ to: "/" });
-              }
-            }}
-          >
+          <Button type="primary" onClick={() => go({ to: "/" })}>
             {translate("pages.error.backHome", "Back Home")}
           </Button>
         </Space>

package/src/components/pages/login/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { type LoginPageProps, useActiveAuthProvider } from "@refinedev/core";
+import type { LoginPageProps } from "@refinedev/core";
 import {
   Row,
   Col,
@@ -36,10 +36,7 @@ export const LoginPage: React.FC<LoginPageProps> = () => {
   const [form] = Form.useForm<ILoginForm>();
   const translate = useTranslate();
 
-  const authProvider = useActiveAuthProvider();
-  const { mutate: login, isLoading } = useLogin<ILoginForm>({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { mutate: login, isPending } = useLogin<ILoginForm>();
 
   const CardTitle = (
     <Typography.Title level={3} style={titleStyles}>
@@ -64,7 +61,12 @@ export const LoginPage: React.FC<LoginPageProps> = () => {
                 alt="Refine Logo"
               />
             </div>
-            <Card title={CardTitle} headStyle={{ borderBottom: 0 }}>
+            <Card
+              title={CardTitle}
+              styles={{
+                header: { borderBottom: 0 },
+              }}
+            >
               <Form<ILoginForm>
                 layout="vertical"
                 form={form}
@@ -122,7 +124,7 @@ export const LoginPage: React.FC<LoginPageProps> = () => {
                   type="primary"
                   size="large"
                   htmlType="submit"
-                  loading={isLoading}
+                  loading={isPending}
                   block
                 >
                   {translate("pages.login.signin", "Sign in")}

package/src/components/table/components/filterDropdown/index.tsx

@@ -12,7 +12,7 @@ export type MapValueEvent = "onChange" | "value";
 
 export type FilterDropdownProps = AntdFilterDropdownProps & {
   mapValue?: (selectedKeys: React.Key[], event: MapValueEvent) => any;
-  children: JSX.Element;
+  children: React.JSX.Element;
 };
 
 /**
@@ -74,7 +74,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
 
   const childrenWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
-      return React.cloneElement(child as React.ReactElement, {
+      return React.cloneElement(child as React.ReactElement<any>, {
         onChange,
         value: mapValue(selectedKeys, "value"),
       });

package/src/components/themedLayout/header/index.tsx

@@ -1,18 +1,14 @@
 import React from "react";
 import { Layout as AntdLayout, Typography, Avatar, Space, theme } from "antd";
-import { useActiveAuthProvider, useGetIdentity } from "@refinedev/core";
+import { useGetIdentity } from "@refinedev/core";
 import type { RefineThemedLayoutHeaderProps } from "../types";
 
-/**
- * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
- */
-export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = () => {
+export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = ({
+  sticky,
+}) => {
   const { token } = theme.useToken();
 
-  const authProvider = useActiveAuthProvider();
-  const { data: user } = useGetIdentity({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { data: user } = useGetIdentity();
 
   const shouldRenderHeader = user && (user.name || user.avatar);
 
@@ -20,17 +16,23 @@ export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = () => {
     return null;
   }
 
+  const headerStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgElevated,
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    padding: "0px 24px",
+    height: "64px",
+  };
+
+  if (sticky) {
+    headerStyles.position = "sticky";
+    headerStyles.top = 0;
+    headerStyles.zIndex = 1;
+  }
+
   return (
-    <AntdLayout.Header
-      style={{
-        backgroundColor: token.colorBgElevated,
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        padding: "0px 24px",
-        height: "64px",
-      }}
-    >
+    <AntdLayout.Header style={headerStyles}>
       <Space>
         <Space size="middle">
           {user?.name && <Typography.Text strong>{user.name}</Typography.Text>}

package/src/components/themedLayout/index.tsx

@@ -4,10 +4,8 @@ import { Grid, Layout as AntdLayout } from "antd";
 import { ThemedSider as DefaultSider } from "./sider";
 import { ThemedHeader as DefaultHeader } from "./header";
 import type { RefineThemedLayoutProps } from "./types";
+import { ThemedLayoutContextProvider } from "@contexts";
 
-/**
- * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
- */
 export const ThemedLayout: React.FC<RefineThemedLayoutProps> = ({
   children,
   Header,
@@ -15,30 +13,38 @@ export const ThemedLayout: React.FC<RefineThemedLayoutProps> = ({
   Title,
   Footer,
   OffLayoutArea,
+  initialSiderCollapsed,
+  onSiderCollapsed,
 }) => {
   const breakpoint = Grid.useBreakpoint();
   const SiderToRender = Sider ?? DefaultSider;
   const HeaderToRender = Header ?? DefaultHeader;
   const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
+  const hasSider = !!SiderToRender({ Title });
 
   return (
-    <AntdLayout style={{ minHeight: "100vh" }}>
-      <SiderToRender Title={Title} />
-      <AntdLayout>
-        <HeaderToRender />
-        <AntdLayout.Content>
-          <div
-            style={{
-              minHeight: 360,
-              padding: isSmall ? 24 : 12,
-            }}
-          >
-            {children}
-          </div>
-          {OffLayoutArea && <OffLayoutArea />}
-        </AntdLayout.Content>
-        {Footer && <Footer />}
+    <ThemedLayoutContextProvider
+      initialSiderCollapsed={initialSiderCollapsed}
+      onSiderCollapsed={onSiderCollapsed}
+    >
+      <AntdLayout style={{ minHeight: "100vh" }} hasSider={hasSider}>
+        <SiderToRender Title={Title} />
+        <AntdLayout>
+          <HeaderToRender />
+          <AntdLayout.Content>
+            <div
+              style={{
+                minHeight: 360,
+                padding: isSmall ? 24 : 12,
+              }}
+            >
+              {children}
+            </div>
+            {OffLayoutArea && <OffLayoutArea />}
+          </AntdLayout.Content>
+          {Footer && <Footer />}
+        </AntdLayout>
       </AntdLayout>
-    </AntdLayout>
+    </ThemedLayoutContextProvider>
   );
 };

package/src/components/themedLayout/sider/index.tsx

@@ -1,7 +1,14 @@
-import React, { useState } 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,
   UnorderedListOutlined,
   BarsOutlined,
@@ -9,72 +16,58 @@ import {
   RightOutlined,
 } from "@ant-design/icons";
 import {
+  type TreeMenuItem,
   useTranslate,
   useLogout,
-  useTitle,
   CanAccess,
-  type ITreeMenu,
   useIsExistAuthentication,
-  useRouterContext,
   useMenu,
-  useRefineContext,
   useLink,
-  useRouterType,
-  useActiveAuthProvider,
-  pickNotDeprecated,
   useWarnAboutChange,
 } from "@refinedev/core";
 
 import { drawerButtonStyles } from "./styles";
 import type { RefineThemedLayoutSiderProps } from "../types";
 import { ThemedTitle } from "@components";
+import { useThemedLayoutContext } from "@hooks";
 
-/**
- * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
- */
 export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
   Title: TitleFromProps,
   render,
   meta,
+  fixed,
+  activeItemDisabled = false,
+  siderItemsAreCollapsed = true,
 }) => {
   const { token } = theme.useToken();
+  const {
+    siderCollapsed,
+    setSiderCollapsed,
+    mobileSiderOpen,
+    setMobileSiderOpen,
+  } = useThemedLayoutContext();
 
-  const [collapsed, setCollapsed] = useState<boolean>(false);
-  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
   const isExistAuthentication = useIsExistAuthentication();
-  const routerType = useRouterType();
-  const NewLink = useLink();
+  const direction = useContext(ConfigProvider.ConfigContext)?.direction;
+  const Link = useLink();
   const { warnWhen, setWarnWhen } = useWarnAboutChange();
-  const { Link: LegacyLink } = useRouterContext();
-  const Link = routerType === "legacy" ? LegacyLink : NewLink;
-  const TitleFromContext = useTitle();
   const translate = useTranslate();
   const { menuItems, selectedKey, defaultOpenKeys } = useMenu({ meta });
   const breakpoint = Grid.useBreakpoint();
-  const { hasDashboard } = useRefineContext();
-  const authProvider = useActiveAuthProvider();
-  const { mutate: mutateLogout } = useLogout({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { mutate: mutateLogout } = useLogout();
 
   const isMobile =
     typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
 
-  const RenderToTitle = TitleFromProps ?? TitleFromContext ?? ThemedTitle;
+  const RenderToTitle = TitleFromProps ?? ThemedTitle;
 
-  const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
-    return tree.map((item: ITreeMenu) => {
-      const {
-        icon,
-        label,
-        route,
-        key,
-        name,
-        children,
-        parentName,
-        meta,
-        options,
-      } = item;
+  const renderTreeView = (tree: TreeMenuItem[], selectedKey?: string) => {
+    return tree.map((item: TreeMenuItem) => {
+      const { key, name, children, meta, list } = item;
+      const parentName = meta?.parent;
+      const label = item?.label ?? meta?.label ?? name;
+      const icon = meta?.icon;
+      const route = list;
 
       if (children.length > 0) {
         return (
@@ -97,10 +90,10 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
         );
       }
       const isSelected = key === selectedKey;
-      const isRoute = !(
-        pickNotDeprecated(meta?.parent, options?.parent, parentName) !==
-          undefined && children.length === 0
-      );
+      const isRoute = !(parentName !== undefined && children.length === 0);
+
+      const linkStyle: React.CSSProperties =
+        activeItemDisabled && isSelected ? { pointerEvents: "none" } : {};
 
       return (
         <CanAccess
@@ -114,9 +107,12 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           <Menu.Item
             key={item.key}
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
+            style={linkStyle}
           >
-            <Link to={route ?? ""}>{label}</Link>
-            {!collapsed && isSelected && (
+            <Link to={route ?? ""} style={linkStyle}>
+              {label}
+            </Link>
+            {!siderCollapsed && isSelected && (
               <div className="ant-menu-tree-arrow" />
             )}
           </Menu.Item>
@@ -153,56 +149,43 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     </Menu.Item>
   );
 
-  const dashboard = hasDashboard ? (
-    <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
-      <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
-      {!collapsed && selectedKey === "/" && (
-        <div className="ant-menu-tree-arrow" />
-      )}
-    </Menu.Item>
-  ) : null;
+  const defaultExpandMenuItems = (() => {
+    if (siderItemsAreCollapsed) return [];
+
+    return menuItems.map(({ key }) => key);
+  })();
 
   const items = renderTreeView(menuItems, selectedKey);
 
   const renderSider = () => {
     if (render) {
       return render({
-        dashboard,
         items,
         logout,
-        collapsed,
+        collapsed: siderCollapsed,
       });
     }
-    return (
-      <>
-        {dashboard}
-        {items}
-        {logout}
-      </>
-    );
+    return [...items, logout].filter(Boolean);
   };
 
   const renderMenu = () => {
     return (
-      <>
-        <Menu
-          selectedKeys={selectedKey ? [selectedKey] : []}
-          defaultOpenKeys={defaultOpenKeys}
-          mode="inline"
-          style={{
-            marginTop: "8px",
-            border: "none",
-          }}
-          onClick={() => {
-            setDrawerOpen(false);
-            if (!breakpoint.lg) {
-              setCollapsed(true);
-            }
-          }}
-        >
-          {renderSider()}
-        </Menu>
-      </>
+      <Menu
+        selectedKeys={selectedKey ? [selectedKey] : []}
+        defaultOpenKeys={[...defaultOpenKeys, ...defaultExpandMenuItems]}
+        mode="inline"
+        style={{
+          paddingTop: "8px",
+          border: "none",
+          overflow: "auto",
+          height: "calc(100% - 72px)",
+        }}
+        onClick={() => {
+          setMobileSiderOpen(false);
+        }}
+      >
+        {renderSider()}
+      </Menu>
     );
   };
 
@@ -210,13 +193,15 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     return (
       <>
         <Drawer
-          open={drawerOpen}
-          onClose={() => setDrawerOpen(false)}
-          placement="left"
+          open={mobileSiderOpen}
+          onClose={() => setMobileSiderOpen(false)}
+          placement={direction === "rtl" ? "right" : "left"}
           closable={false}
           width={200}
-          bodyStyle={{
-            padding: 0,
+          styles={{
+            body: {
+              padding: 0,
+            },
           }}
           maskClosable={true}
         >
@@ -224,7 +209,6 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
             <Layout.Sider
               style={{
                 height: "100vh",
-                overflow: "hidden",
                 backgroundColor: token.colorBgContainer,
                 borderRight: `1px solid ${token.colorBgElevated}`,
               }}
@@ -249,7 +233,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
         <Button
           style={drawerButtonStyles}
           size="large"
-          onClick={() => setDrawerOpen(true)}
+          onClick={() => setMobileSiderOpen(true)}
           icon={<BarsOutlined />}
         />
       </>
@@ -260,58 +244,77 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     return renderDrawerSider();
   }
 
+  const siderStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgContainer,
+    borderRight: `1px solid ${token.colorBgElevated}`,
+  };
+
+  if (fixed) {
+    siderStyles.position = "fixed";
+    siderStyles.top = 0;
+    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;
+
+    return <IconComponent {...iconProps} />;
+  };
+
   return (
-    <Layout.Sider
-      style={{
-        backgroundColor: token.colorBgContainer,
-        borderRight: `1px solid ${token.colorBgElevated}`,
-      }}
-      collapsible
-      collapsed={collapsed}
-      onCollapse={(collapsed) => setCollapsed(collapsed)}
-      collapsedWidth={80}
-      breakpoint="lg"
-      trigger={
-        <Button
-          type="text"
+    <>
+      {fixed && (
+        <div
           style={{
-            borderRadius: 0,
-            height: "100%",
-            width: "100%",
-            backgroundColor: token.colorBgElevated,
+            width: siderCollapsed ? "80px" : "200px",
+            transition: "all 0.2s",
           }}
-        >
-          {collapsed ? (
-            <RightOutlined
-              style={{
-                color: token.colorPrimary,
-              }}
-            />
-          ) : (
-            <LeftOutlined
-              style={{
-                color: token.colorPrimary,
-              }}
-            />
-          )}
-        </Button>
-      }
-    >
-      <div
-        style={{
-          width: collapsed ? "80px" : "200px",
-          padding: collapsed ? "0" : "0 16px",
-          display: "flex",
-          justifyContent: collapsed ? "center" : "flex-start",
-          alignItems: "center",
-          height: "64px",
-          backgroundColor: token.colorBgElevated,
-          fontSize: "14px",
+        />
+      )}
+      <Layout.Sider
+        style={siderStyles}
+        collapsible
+        collapsed={siderCollapsed}
+        onCollapse={(collapsed, type) => {
+          if (type === "clickTrigger") {
+            setSiderCollapsed(collapsed);
+          }
         }}
+        collapsedWidth={80}
+        breakpoint="lg"
+        trigger={
+          <Button
+            type="text"
+            style={{
+              borderRadius: 0,
+              height: "100%",
+              width: "100%",
+              backgroundColor: token.colorBgElevated,
+            }}
+          >
+            {renderClosingIcons()}
+          </Button>
+        }
       >
-        <RenderToTitle collapsed={collapsed} />
-      </div>
-      {renderMenu()}
-    </Layout.Sider>
+        <div
+          style={{
+            width: siderCollapsed ? "80px" : "200px",
+            padding: siderCollapsed ? "0" : "0 16px",
+            display: "flex",
+            justifyContent: siderCollapsed ? "center" : "flex-start",
+            alignItems: "center",
+            height: "64px",
+            backgroundColor: token.colorBgElevated,
+            fontSize: "14px",
+          }}
+        >
+          <RenderToTitle collapsed={siderCollapsed} />
+        </div>
+        {renderMenu()}
+      </Layout.Sider>
+    </>
   );
 };