@refinedev/antd 5.38.1 → 5.40.0

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

@@ -11,7 +11,7 @@ import {
   useLogout,
   useTitle,
   CanAccess,
-  ITreeMenu,
+  type ITreeMenu,
   useIsExistAuthentication,
   useRouterContext,
   useMenu,
@@ -26,7 +26,7 @@ import {
 import { Title as DefaultTitle } from "@components";
 
 import { drawerButtonStyles } from "./styles";
-import { RefineLayoutSiderProps } from "../types";
+import type { RefineLayoutSiderProps } from "../types";
 
 export const Sider: React.FC<RefineLayoutSiderProps> = ({
   Title: TitleFromProps,
@@ -82,6 +82,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
           >
             <Menu.SubMenu
               key={item.key}
+              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
               icon={icon ?? <UnorderedListOutlined />}
               title={label}
             >
@@ -109,6 +110,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
             style={{
               fontWeight: isSelected ? "bold" : "normal",
             }}
+            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
           >
             <Link to={route ?? ""}>{label}</Link>
@@ -140,6 +142,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
   };
 
   const logout = isExistAuthentication && (
+    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     <Menu.Item key="logout" onClick={handleLogout} icon={<LogoutOutlined />}>
       {translate("buttons.logout", "Logout")}
     </Menu.Item>
@@ -151,6 +154,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
       style={{
         fontWeight: selectedKey === "/" ? "bold" : "normal",
       }}
+      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<DashboardOutlined />}
     >
       <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
@@ -226,6 +230,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
           style={drawerButtonStyles}
           size="large"
           onClick={() => setDrawerOpen(true)}
+          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<BarsOutlined />}
         />
       </>

package/src/components/layout/sider/styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
 export const drawerButtonStyles: CSSProperties = {
   borderTopLeftRadius: 0,

package/src/components/layout/title/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  TitleProps,
+  type TitleProps,
   useRouterContext,
   useRouterType,
   useLink,

package/src/components/pageHeader/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
+import React, { type FC } from "react";
 import {
   PageHeader as AntdPageHeader,
-  PageHeaderProps as AntdPageHeaderProps,
+  type PageHeaderProps as AntdPageHeaderProps,
 } from "@ant-design/pro-layout";
 import { Button, Typography } from "antd";
 import { ArrowLeftOutlined } from "@ant-design/icons";
@@ -12,6 +12,7 @@ export type PageHeaderProps = AntdPageHeaderProps;
 export const PageHeader: FC<AntdPageHeaderProps> = ({ children, ...props }) => {
   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

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

@@ -1,7 +1,7 @@
 import React from "react";
 import {
-  ForgotPasswordPageProps,
-  ForgotPasswordFormTypes,
+  type ForgotPasswordPageProps,
+  type ForgotPasswordFormTypes,
   useRouterType,
   useLink,
 } from "@refinedev/core";
@@ -14,9 +14,9 @@ import {
   Form,
   Input,
   Button,
-  LayoutProps,
-  CardProps,
-  FormProps,
+  type LayoutProps,
+  type CardProps,
+  type FormProps,
   theme,
 } from "antd";
 import {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import {
-  LoginPageProps,
-  LoginFormTypes,
+  type LoginPageProps,
+  type LoginFormTypes,
   useLink,
   useRouterType,
   useActiveAuthProvider,
@@ -16,10 +16,10 @@ import {
   Input,
   Button,
   Checkbox,
-  CardProps,
-  LayoutProps,
+  type CardProps,
+  type LayoutProps,
   Divider,
-  FormProps,
+  type FormProps,
   theme,
 } from "antd";
 import { useLogin, useTranslate, useRouterContext } from "@refinedev/core";

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

@@ -1,7 +1,7 @@
 import React from "react";
 import {
-  RegisterPageProps,
-  RegisterFormTypes,
+  type RegisterPageProps,
+  type RegisterFormTypes,
   useRouterType,
   useLink,
   useActiveAuthProvider,
@@ -15,9 +15,9 @@ import {
   Form,
   Input,
   Button,
-  LayoutProps,
-  CardProps,
-  FormProps,
+  type LayoutProps,
+  type CardProps,
+  type FormProps,
   Divider,
   theme,
 } from "antd";

package/src/components/pages/auth/components/styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
 export const layoutStyles: CSSProperties = {};
 

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

@@ -1,7 +1,7 @@
 import React from "react";
 import {
-  UpdatePasswordPageProps,
-  UpdatePasswordFormTypes,
+  type UpdatePasswordPageProps,
+  type UpdatePasswordFormTypes,
   useActiveAuthProvider,
 } from "@refinedev/core";
 import {
@@ -13,9 +13,9 @@ import {
   Form,
   Input,
   Button,
-  LayoutProps,
-  CardProps,
-  FormProps,
+  type LayoutProps,
+  type CardProps,
+  type FormProps,
   theme,
 } from "antd";
 import { useTranslate, useUpdatePassword } from "@refinedev/core";

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { CardProps, FormProps, LayoutProps } from "antd";
-import { AuthPageProps } from "@refinedev/core";
+import type { CardProps, FormProps, LayoutProps } from "antd";
+import type { AuthPageProps } from "@refinedev/core";
 
 import {
   LoginPage,

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useGo, useResource, useRouterType } from "@refinedev/core";
-import { RefineErrorPageProps } from "@refinedev/ui-types";
+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";
@@ -52,6 +52,7 @@ export const ErrorComponent: React.FC<RefineErrorPageProps> = () => {
             </Typography.Text>
             {errorMessage && (
               <Tooltip title={errorMessage}>
+                {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
                 <InfoCircleOutlined data-testid="error-component-tooltip" />
               </Tooltip>
             )}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { LoginPageProps, useActiveAuthProvider } from "@refinedev/core";
+import { type LoginPageProps, useActiveAuthProvider } from "@refinedev/core";
 import {
   Row,
   Col,

package/src/components/pages/login/styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
 export const layoutStyles: CSSProperties = {
   background: "radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)",

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { RefineReadyPageProps } from "@refinedev/ui-types";
+import type { RefineReadyPageProps } from "@refinedev/ui-types";
 import { Row, Col, Typography, Space, Button } from "antd";
 import { ReadOutlined, FolderOutlined, TeamOutlined } from "@ant-design/icons";
 
@@ -62,6 +62,7 @@ export const ReadyPage: React.FC<RefineReadyPageProps> = () => {
           style={{ marginTop: "70px", justifyContent: "center" }}
         >
           <a href="https://refine.dev" target="_blank" rel="noreferrer">
+            {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <Button size="large" icon={<ReadOutlined />}>
               Documentation
             </Button>
@@ -71,11 +72,13 @@ export const ReadyPage: React.FC<RefineReadyPageProps> = () => {
             target="_blank"
             rel="noreferrer"
           >
+            {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <Button size="large" icon={<FolderOutlined />}>
               Examples
             </Button>
           </a>
           <a href="https://discord.gg/refine" target="_blank" rel="noreferrer">
+            {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <Button size="large" icon={<TeamOutlined />}>
               Community
             </Button>

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

@@ -1,13 +1,18 @@
-import React, { type ReactNode, useState } from "react";
-import { Button, Space } from "antd";
-import type { FilterDropdownProps as AntdFilterDropdownProps } from "antd/lib/table/interface";
+import React, { type ReactNode } from "react";
+import { Button, Space, type TableColumnProps } from "antd";
 import dayjs from "dayjs";
 import { FilterOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
 
+type AntdFilterDropdownProps = React.ComponentProps<
+  Exclude<TableColumnProps<any>["filterDropdown"], ReactNode>
+>;
+
+export type MapValueEvent = "onChange" | "value";
+
 export type FilterDropdownProps = AntdFilterDropdownProps & {
-  mapValue?: (selectedKeys: React.Key[]) => any;
-  children: ReactNode;
+  mapValue?: (selectedKeys: React.Key[], event: MapValueEvent) => any;
+  children: JSX.Element;
 };
 
 /**
@@ -20,72 +25,63 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
     setSelectedKeys,
     confirm,
     clearFilters,
-    mapValue,
+    mapValue = (value) => value,
     selectedKeys,
     children,
   } = props;
 
-  const [value, setValue] = useState<any[] | undefined>(selectedKeys);
   const translate = useTranslate();
 
   const clearFilter = () => {
     if (clearFilters) {
-      setValue([]);
       clearFilters();
     }
   };
 
   const onFilter = () => {
-    const _mappedValue = mappedValue(value);
-
     let keys;
-    if (typeof _mappedValue === "number") {
-      keys = `${_mappedValue}`;
-    } else if (dayjs.isDayjs(_mappedValue)) {
-      keys = [_mappedValue.toISOString()];
+    if (typeof selectedKeys === "number") {
+      keys = `${selectedKeys}`;
+    } else if (dayjs.isDayjs(selectedKeys)) {
+      keys = [selectedKeys.toISOString()];
     } else {
-      keys = _mappedValue;
+      keys = selectedKeys;
     }
 
-    setSelectedKeys(keys);
-
+    setSelectedKeys(keys as any);
     confirm?.();
   };
 
-  const mappedValue = (value: any) => (mapValue ? mapValue(value) : value);
-
   const onChange = (e: any) => {
     if (typeof e === "object") {
       if (Array.isArray(e)) {
-        const _mappedValue = mappedValue(e);
-
-        setValue(_mappedValue);
-        return setSelectedKeys(_mappedValue);
+        const mappedValue = mapValue(e, "onChange");
+        return setSelectedKeys(mappedValue);
       }
 
       const changeEvent =
         !e || !e.target || dayjs.isDayjs(e) ? { target: { value: e } } : e;
 
       const { target }: React.ChangeEvent<HTMLInputElement> = changeEvent;
-      const _mappedValue = mappedValue(target.value);
-      setValue(_mappedValue);
+      const mappedValue = mapValue(target.value as any, "onChange");
+      setSelectedKeys(mappedValue);
       return;
     }
 
-    const _mappedValue = mappedValue(e);
-
-    setValue(_mappedValue);
+    const mappedValue = mapValue(e, "onChange");
+    setSelectedKeys(mappedValue);
   };
 
   const childrenWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       return React.cloneElement(child as React.ReactElement, {
         onChange,
-        value: mappedValue(value),
+        value: mapValue(selectedKeys, "value"),
       });
     }
     return child;
   });
+
   return (
     <div
       style={{
@@ -98,6 +94,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
       <div style={{ marginBottom: 15 }}>{childrenWithProps}</div>
       <Space>
         <Button type="primary" size="small" onClick={() => onFilter()}>
+          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <FilterOutlined /> {translate("buttons.filter", "Filter")}
         </Button>
         <Button danger size="small" onClick={() => clearFilter()}>

package/src/components/table/components/index.ts

@@ -1 +1,2 @@
 export { FilterDropdown } from "./filterDropdown";
+export type { FilterDropdownProps, MapValueEvent } from "./filterDropdown";

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Layout as AntdLayout, Typography, Avatar, Space, theme } from "antd";
 import { useActiveAuthProvider, useGetIdentity } from "@refinedev/core";
-import { RefineThemedLayoutHeaderProps } from "../types";
+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

package/src/components/themedLayout/index.tsx

@@ -3,7 +3,7 @@ import { Grid, Layout as AntdLayout } from "antd";
 
 import { ThemedSider as DefaultSider } from "./sider";
 import { ThemedHeader as DefaultHeader } from "./header";
-import { RefineThemedLayoutProps } from "./types";
+import type { RefineThemedLayoutProps } 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

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

@@ -13,7 +13,7 @@ import {
   useLogout,
   useTitle,
   CanAccess,
-  ITreeMenu,
+  type ITreeMenu,
   useIsExistAuthentication,
   useRouterContext,
   useMenu,
@@ -26,7 +26,7 @@ import {
 } from "@refinedev/core";
 
 import { drawerButtonStyles } from "./styles";
-import { RefineThemedLayoutSiderProps } from "../types";
+import type { RefineThemedLayoutSiderProps } from "../types";
 import { ThemedTitle } from "@components";
 
 /**
@@ -88,6 +88,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           >
             <Menu.SubMenu
               key={item.key}
+              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
               icon={icon ?? <UnorderedListOutlined />}
               title={label}
             >
@@ -113,6 +114,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
         >
           <Menu.Item
             key={item.key}
+            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
           >
             <Link to={route ?? ""}>{label}</Link>
@@ -147,6 +149,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     <Menu.Item
       key="logout"
       onClick={() => handleLogout()}
+      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<LogoutOutlined />}
     >
       {translate("buttons.logout", "Logout")}
@@ -154,6 +157,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
   );
 
   const dashboard = hasDashboard ? (
+    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
       <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
       {!collapsed && selectedKey === "/" && (
@@ -250,6 +254,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           style={drawerButtonStyles}
           size="large"
           onClick={() => setDrawerOpen(true)}
+          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<BarsOutlined />}
         />
       </>
@@ -282,12 +287,14 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           }}
         >
           {collapsed ? (
+            // @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,

package/src/components/themedLayout/sider/styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
 export const drawerButtonStyles: CSSProperties = {
   borderTopLeftRadius: 0,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useRouterContext, useRouterType, useLink } from "@refinedev/core";
 import { Typography, theme, Space } from "antd";
-import { RefineLayoutThemedTitleProps } from "../types";
+import type { RefineLayoutThemedTitleProps } from "../types";
 
 const defaultText = "Refine Project";
 

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

@@ -5,7 +5,7 @@ import {
   useActiveAuthProvider,
   useGetIdentity,
 } from "@refinedev/core";
-import { RefineThemedLayoutV2HeaderProps } from "../types";
+import type { RefineThemedLayoutV2HeaderProps } from "../types";
 
 export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   isSticky,

package/src/components/themedLayoutV2/index.tsx

@@ -3,7 +3,7 @@ import { Grid, Layout as AntdLayout } from "antd";
 
 import { ThemedSiderV2 as DefaultSider } from "./sider";
 import { ThemedHeaderV2 as DefaultHeader } from "./header";
-import { RefineThemedLayoutV2Props } from "./types";
+import type { RefineThemedLayoutV2Props } from "./types";
 import { ThemedLayoutContextProvider } from "@contexts";
 
 export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({

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

@@ -13,7 +13,7 @@ import {
   useLogout,
   useTitle,
   CanAccess,
-  ITreeMenu,
+  type ITreeMenu,
   useIsExistAuthentication,
   useRouterContext,
   useMenu,
@@ -26,7 +26,7 @@ import {
 } from "@refinedev/core";
 
 import { drawerButtonStyles } from "./styles";
-import { RefineThemedLayoutV2SiderProps } from "../types";
+import type { RefineThemedLayoutV2SiderProps } from "../types";
 import { ThemedTitleV2 } from "@components";
 import { useThemedLayoutContext } from "@hooks";
 
@@ -92,6 +92,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
           >
             <Menu.SubMenu
               key={item.key}
+              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
               icon={icon ?? <UnorderedListOutlined />}
               title={label}
             >
@@ -120,6 +121,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
         >
           <Menu.Item
             key={item.key}
+            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
             style={linkStyle}
           >
@@ -157,6 +159,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
     <Menu.Item
       key="logout"
       onClick={() => handleLogout()}
+      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<LogoutOutlined />}
     >
       {translate("buttons.logout", "Logout")}
@@ -164,6 +167,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
   );
 
   const dashboard = hasDashboard ? (
+    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
       <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
       {!siderCollapsed && selectedKey === "/" && (
@@ -256,6 +260,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
           style={drawerButtonStyles}
           size="large"
           onClick={() => setMobileSiderOpen(true)}
+          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<BarsOutlined />}
         />
       </>
@@ -310,12 +315,14 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
             }}
           >
             {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,

package/src/components/themedLayoutV2/sider/styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
 export const drawerButtonStyles: CSSProperties = {
   borderTopLeftRadius: 0,

package/src/components/themedLayoutV2/title/index.tsx

@@ -1,38 +1,26 @@
 import React from "react";
-import { useRouterContext, useRouterType, useLink } from "@refinedev/core";
+import {
+  useRouterContext,
+  useRouterType,
+  useLink,
+  useRefineOptions,
+} from "@refinedev/core";
 import { Typography, theme, Space } from "antd";
-import { RefineLayoutThemedTitleProps } from "../types";
-
-const defaultText = "Refine Project";
-
-const defaultIcon = (
-  <svg
-    width={24}
-    height={24}
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    data-testid="refine-logo"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M13.7889 0.422291C12.6627 -0.140764 11.3373 -0.140764 10.2111 0.422291L2.21115 4.42229C0.85601 5.09986 0 6.48491 0 8V16C0 17.5151 0.85601 18.9001 2.21115 19.5777L10.2111 23.5777C11.3373 24.1408 12.6627 24.1408 13.7889 23.5777L21.7889 19.5777C23.144 18.9001 24 17.5151 24 16V8C24 6.48491 23.144 5.09986 21.7889 4.42229L13.7889 0.422291ZM8 8C8 5.79086 9.79086 4 12 4C14.2091 4 16 5.79086 16 8V16C16 18.2091 14.2091 20 12 20C9.79086 20 8 18.2091 8 16V8Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14 8C14 9.10457 13.1046 10 12 10C10.8954 10 10 9.10457 10 8C10 6.89543 10.8954 6 12 6C13.1046 6 14 6.89543 14 8Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+import type { RefineLayoutThemedTitleProps } from "../types";
 
 export const ThemedTitleV2: React.FC<RefineLayoutThemedTitleProps> = ({
   collapsed,
-  icon = defaultIcon,
-  text = defaultText,
+  icon: iconFromProps,
+  text: textFromProps,
   wrapperStyles,
 }) => {
+  const {
+    title: { icon: defaultIcon, text: defaultText } = {},
+  } = useRefineOptions();
+  const icon =
+    typeof iconFromProps === "undefined" ? defaultIcon : iconFromProps;
+  const text =
+    typeof textFromProps === "undefined" ? defaultText : textFromProps;
   const { token } = theme.useToken();
   const routerType = useRouterType();
   const Link = useLink();