@refinedev/antd 5.37.3 → 5.37.5

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

@@ -3,86 +3,84 @@ import { useRouterContext, useRouterType, useLink } from "@refinedev/core";
 import { Typography, theme, Space } from "antd";
 import { RefineLayoutThemedTitleProps } from "../types";
 
-const { useToken } = theme;
-
 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>
+  <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>
 );
 
 /**
  * @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 ThemedTitle: React.FC<RefineLayoutThemedTitleProps> = ({
-    collapsed,
-    icon = defaultIcon,
-    text = defaultText,
-    wrapperStyles,
+  collapsed,
+  icon = defaultIcon,
+  text = defaultText,
+  wrapperStyles,
 }) => {
-    const { token } = useToken();
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
+  const { token } = theme.useToken();
+  const routerType = useRouterType();
+  const Link = useLink();
+  const { Link: LegacyLink } = useRouterContext();
 
-    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
-    return (
-        <ActiveLink
-            to="/"
-            style={{
-                display: "inline-block",
-                textDecoration: "none",
-            }}
+  return (
+    <ActiveLink
+      to="/"
+      style={{
+        display: "inline-block",
+        textDecoration: "none",
+      }}
+    >
+      <Space
+        style={{
+          display: "flex",
+          alignItems: "center",
+          fontSize: "inherit",
+          ...wrapperStyles,
+        }}
+      >
+        <div
+          style={{
+            height: "24px",
+            width: "24px",
+            color: token.colorPrimary,
+          }}
         >
-            <Space
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    fontSize: "inherit",
-                    ...wrapperStyles,
-                }}
-            >
-                <div
-                    style={{
-                        height: "24px",
-                        width: "24px",
-                        color: token.colorPrimary,
-                    }}
-                >
-                    {icon}
-                </div>
+          {icon}
+        </div>
 
-                {!collapsed && (
-                    <Typography.Title
-                        style={{
-                            fontSize: "inherit",
-                            marginBottom: 0,
-                            fontWeight: 700,
-                        }}
-                    >
-                        {text}
-                    </Typography.Title>
-                )}
-            </Space>
-        </ActiveLink>
-    );
+        {!collapsed && (
+          <Typography.Title
+            style={{
+              fontSize: "inherit",
+              marginBottom: 0,
+              fontWeight: 700,
+            }}
+          >
+            {text}
+          </Typography.Title>
+        )}
+      </Space>
+    </ActiveLink>
+  );
 };

package/src/components/themedLayout/types.ts

@@ -1,13 +1,13 @@
 import type {
-    RefineThemedLayoutSiderProps,
-    RefineThemedLayoutHeaderProps,
-    RefineThemedLayoutProps,
-    RefineLayoutThemedTitleProps,
+  RefineThemedLayoutSiderProps,
+  RefineThemedLayoutHeaderProps,
+  RefineThemedLayoutProps,
+  RefineLayoutThemedTitleProps,
 } from "@refinedev/ui-types";
 
 export type {
-    RefineLayoutThemedTitleProps,
-    RefineThemedLayoutSiderProps,
-    RefineThemedLayoutHeaderProps,
-    RefineThemedLayoutProps,
+  RefineLayoutThemedTitleProps,
+  RefineThemedLayoutSiderProps,
+  RefineThemedLayoutHeaderProps,
+  RefineThemedLayoutProps,
 };

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

@@ -1,57 +1,52 @@
 import React from "react";
 import { Layout as AntdLayout, Typography, Avatar, Space, theme } from "antd";
 import {
-    pickNotDeprecated,
-    useActiveAuthProvider,
-    useGetIdentity,
+  pickNotDeprecated,
+  useActiveAuthProvider,
+  useGetIdentity,
 } from "@refinedev/core";
 import { RefineThemedLayoutV2HeaderProps } from "../types";
 
-const { Text } = Typography;
-const { useToken } = theme;
-
 export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = ({
-    isSticky,
-    sticky,
+  isSticky,
+  sticky,
 }) => {
-    const { token } = useToken();
-
-    const authProvider = useActiveAuthProvider();
-    const { data: user } = useGetIdentity({
-        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-    });
-
-    const shouldRenderHeader = user && (user.name || user.avatar);
-
-    if (!shouldRenderHeader) {
-        return null;
-    }
-
-    const headerStyles: React.CSSProperties = {
-        backgroundColor: token.colorBgElevated,
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        padding: "0px 24px",
-        height: "64px",
-    };
-
-    if (pickNotDeprecated(sticky, isSticky)) {
-        headerStyles.position = "sticky";
-        headerStyles.top = 0;
-        headerStyles.zIndex = 1;
-    }
-
-    return (
-        <AntdLayout.Header style={headerStyles}>
-            <Space>
-                <Space size="middle">
-                    {user?.name && <Text strong>{user.name}</Text>}
-                    {user?.avatar && (
-                        <Avatar src={user?.avatar} alt={user?.name} />
-                    )}
-                </Space>
-            </Space>
-        </AntdLayout.Header>
-    );
+  const { token } = theme.useToken();
+
+  const authProvider = useActiveAuthProvider();
+  const { data: user } = useGetIdentity({
+    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+  });
+
+  const shouldRenderHeader = user && (user.name || user.avatar);
+
+  if (!shouldRenderHeader) {
+    return null;
+  }
+
+  const headerStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgElevated,
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    padding: "0px 24px",
+    height: "64px",
+  };
+
+  if (pickNotDeprecated(sticky, isSticky)) {
+    headerStyles.position = "sticky";
+    headerStyles.top = 0;
+    headerStyles.zIndex = 1;
+  }
+
+  return (
+    <AntdLayout.Header style={headerStyles}>
+      <Space>
+        <Space size="middle">
+          {user?.name && <Typography.Text strong>{user.name}</Typography.Text>}
+          {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
+        </Space>
+      </Space>
+    </AntdLayout.Header>
+  );
 };

package/src/components/themedLayoutV2/index.tsx

@@ -7,42 +7,40 @@ import { RefineThemedLayoutV2Props } from "./types";
 import { ThemedLayoutContextProvider } from "@contexts";
 
 export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
-    children,
-    Header,
-    Sider,
-    Title,
-    Footer,
-    OffLayoutArea,
-    initialSiderCollapsed,
+  children,
+  Header,
+  Sider,
+  Title,
+  Footer,
+  OffLayoutArea,
+  initialSiderCollapsed,
 }) => {
-    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 });
+  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 (
-        <ThemedLayoutContextProvider
-            initialSiderCollapsed={initialSiderCollapsed}
-        >
-            <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>
-        </ThemedLayoutContextProvider>
-    );
+  return (
+    <ThemedLayoutContextProvider initialSiderCollapsed={initialSiderCollapsed}>
+      <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>
+    </ThemedLayoutContextProvider>
+  );
 };