@refinedev/antd 5.37.4 → 6.0.0

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { type ReactNode, useState } from "react";
 import { Button, Space } from "antd";
 import type { FilterDropdownProps as AntdFilterDropdownProps } from "antd/lib/table/interface";
 import dayjs from "dayjs";
@@ -6,8 +6,8 @@ import { FilterOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
 
 export type FilterDropdownProps = AntdFilterDropdownProps & {
-    mapValue?: (selectedKeys: React.Key[]) => any;
-    children: ReactNode;
+  mapValue?: (selectedKeys: React.Key[]) => any;
+  children: ReactNode;
 };
 
 /**
@@ -16,97 +16,94 @@ export type FilterDropdownProps = AntdFilterDropdownProps & {
  * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/filter-dropdown} for more details.
  */
 export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
-    const {
-        setSelectedKeys,
-        confirm,
-        clearFilters,
-        mapValue,
-        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()];
-        } else {
-            keys = _mappedValue;
-        }
-
-        setSelectedKeys(keys);
-
-        confirm?.();
-    };
-
-    const mappedValue = (value: any) => (mapValue ? mapValue(value) : value);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onChange = (e: any) => {
-        if (typeof e === "object") {
-            if (Array.isArray(e)) {
-                const _mappedValue = mappedValue(e);
-
-                setValue(_mappedValue);
-                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);
-            return;
-        }
-
+  const {
+    setSelectedKeys,
+    confirm,
+    clearFilters,
+    mapValue,
+    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()];
+    } else {
+      keys = _mappedValue;
+    }
+
+    setSelectedKeys(keys);
+
+    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);
-    };
-
-    const childrenWithProps = React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, {
-                onChange,
-                value: mappedValue(value),
-            });
-        }
-        return child;
-    });
-    return (
-        <div
-            style={{
-                padding: 10,
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "flex-end",
-            }}
-        >
-            <div style={{ marginBottom: 15 }}>{childrenWithProps}</div>
-            <Space>
-                <Button type="primary" size="small" onClick={() => onFilter()}>
-                    <FilterOutlined /> {translate("buttons.filter", "Filter")}
-                </Button>
-                <Button danger size="small" onClick={() => clearFilter()}>
-                    {translate("buttons.clear", "Clear")}
-                </Button>
-            </Space>
-        </div>
-    );
+        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);
+      return;
+    }
+
+    const _mappedValue = mappedValue(e);
+
+    setValue(_mappedValue);
+  };
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child as React.ReactElement, {
+        onChange,
+        value: mappedValue(value),
+      });
+    }
+    return child;
+  });
+  return (
+    <div
+      style={{
+        padding: 10,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+      }}
+    >
+      <div style={{ marginBottom: 15 }}>{childrenWithProps}</div>
+      <Space>
+        <Button type="primary" size="small" onClick={() => onFilter()}>
+          <FilterOutlined /> {translate("buttons.filter", "Filter")}
+        </Button>
+        <Button danger size="small" onClick={() => clearFilter()}>
+          {translate("buttons.clear", "Clear")}
+        </Button>
+      </Space>
+    </div>
+  );
 };

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

@@ -7,40 +7,36 @@ import { 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> = () => {
-    const { token } = theme.useToken();
+  const { token } = theme.useToken();
 
-    const authProvider = useActiveAuthProvider();
-    const { data: user } = useGetIdentity({
-        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-    });
+  const authProvider = useActiveAuthProvider();
+  const { data: user } = useGetIdentity({
+    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+  });
 
-    const shouldRenderHeader = user && (user.name || user.avatar);
+  const shouldRenderHeader = user && (user.name || user.avatar);
 
-    if (!shouldRenderHeader) {
-        return null;
-    }
+  if (!shouldRenderHeader) {
+    return null;
+  }
 
-    return (
-        <AntdLayout.Header
-            style={{
-                backgroundColor: token.colorBgElevated,
-                display: "flex",
-                justifyContent: "flex-end",
-                alignItems: "center",
-                padding: "0px 24px",
-                height: "64px",
-            }}
-        >
-            <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>
-    );
+  return (
+    <AntdLayout.Header
+      style={{
+        backgroundColor: token.colorBgElevated,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        padding: "0px 24px",
+        height: "64px",
+      }}
+    >
+      <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/themedLayout/index.tsx

@@ -9,36 +9,36 @@ import { 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
  */
 export const ThemedLayout: React.FC<RefineThemedLayoutProps> = ({
-    children,
-    Header,
-    Sider,
-    Title,
-    Footer,
-    OffLayoutArea,
+  children,
+  Header,
+  Sider,
+  Title,
+  Footer,
+  OffLayoutArea,
 }) => {
-    const breakpoint = Grid.useBreakpoint();
-    const SiderToRender = Sider ?? DefaultSider;
-    const HeaderToRender = Header ?? DefaultHeader;
-    const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
+  const breakpoint = Grid.useBreakpoint();
+  const SiderToRender = Sider ?? DefaultSider;
+  const HeaderToRender = Header ?? DefaultHeader;
+  const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
 
-    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 />}
-            </AntdLayout>
-        </AntdLayout>
-    );
+  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 />}
+      </AntdLayout>
+    </AntdLayout>
+  );
 };