@refinedev/antd 5.37.4 → 6.0.0

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

@@ -6,78 +6,78 @@ 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>
+  <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>
 );
 
 export const ThemedTitleV2: React.FC<RefineLayoutThemedTitleProps> = ({
-    collapsed,
-    icon = defaultIcon,
-    text = defaultText,
-    wrapperStyles,
+  collapsed,
+  icon = defaultIcon,
+  text = defaultText,
+  wrapperStyles,
 }) => {
-    const { token } = theme.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/themedLayoutV2/types.ts

@@ -1,17 +1,17 @@
 import type {
-    RefineThemedLayoutV2SiderProps as BaseRefineThemedLayoutV2SiderProps,
-    RefineThemedLayoutV2HeaderProps,
-    RefineThemedLayoutV2Props,
-    RefineLayoutThemedTitleProps,
+  RefineThemedLayoutV2SiderProps as BaseRefineThemedLayoutV2SiderProps,
+  RefineThemedLayoutV2HeaderProps,
+  RefineThemedLayoutV2Props,
+  RefineLayoutThemedTitleProps,
 } from "@refinedev/ui-types";
 
 type RefineThemedLayoutV2SiderProps = BaseRefineThemedLayoutV2SiderProps & {
-    fixed?: boolean;
+  fixed?: boolean;
 };
 
 export type {
-    RefineLayoutThemedTitleProps,
-    RefineThemedLayoutV2SiderProps,
-    RefineThemedLayoutV2HeaderProps,
-    RefineThemedLayoutV2Props,
+  RefineLayoutThemedTitleProps,
+  RefineThemedLayoutV2SiderProps,
+  RefineThemedLayoutV2HeaderProps,
+  RefineThemedLayoutV2Props,
 };

package/src/components/undoableNotification/index.tsx

@@ -4,39 +4,39 @@ import { OpenNotificationParams } from "@refinedev/core";
 import { UndoOutlined } from "@ant-design/icons";
 
 export type UndoableNotificationProps = {
-    notificationKey: OpenNotificationParams["key"];
-    message: OpenNotificationParams["message"];
-    cancelMutation: OpenNotificationParams["cancelMutation"];
-    undoableTimeout: OpenNotificationParams["undoableTimeout"];
+  notificationKey: OpenNotificationParams["key"];
+  message: OpenNotificationParams["message"];
+  cancelMutation: OpenNotificationParams["cancelMutation"];
+  undoableTimeout: OpenNotificationParams["undoableTimeout"];
 };
 
 export const UndoableNotification: React.FC<UndoableNotificationProps> = ({
-    message,
-    cancelMutation,
-    undoableTimeout,
+  message,
+  cancelMutation,
+  undoableTimeout,
 }) => (
-    <div
-        style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginTop: "-7px",
-        }}
-    >
-        <Progress
-            type="circle"
-            percent={(undoableTimeout ?? 0) * 20}
-            format={(time) => time && time / 20}
-            size={50}
-            strokeColor="#1890ff"
-            status="normal"
-        />
-        <span style={{ marginLeft: 8, width: "100%" }}>{message}</span>
-        <Button
-            style={{ flexShrink: 0 }}
-            onClick={cancelMutation}
-            disabled={undoableTimeout === 0}
-            icon={<UndoOutlined />}
-        ></Button>
-    </div>
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginTop: "-7px",
+    }}
+  >
+    <Progress
+      type="circle"
+      percent={(undoableTimeout ?? 0) * 20}
+      format={(time) => time && time / 20}
+      size={50}
+      strokeColor="#1890ff"
+      status="normal"
+    />
+    <span style={{ marginLeft: 8, width: "100%" }}>{message}</span>
+    <Button
+      style={{ flexShrink: 0 }}
+      onClick={cancelMutation}
+      disabled={undoableTimeout === 0}
+      icon={<UndoOutlined />}
+    />
+  </div>
 );

package/src/contexts/index.ts

@@ -1,4 +1,4 @@
 export {
-    ThemedLayoutContext,
-    ThemedLayoutContextProvider,
+  ThemedLayoutContext,
+  ThemedLayoutContextProvider,
 } from "./themedLayoutContext";

package/src/contexts/themedLayoutContext/IThemedLayoutContext.ts

@@ -1,6 +1,6 @@
 export interface IThemedLayoutContext {
-    siderCollapsed: boolean;
-    setSiderCollapsed: (visible: boolean) => void;
-    mobileSiderOpen: boolean;
-    setMobileSiderOpen: (visible: boolean) => void;
+  siderCollapsed: boolean;
+  setSiderCollapsed: (visible: boolean) => void;
+  mobileSiderOpen: boolean;
+  setMobileSiderOpen: (visible: boolean) => void;
 }

package/src/contexts/themedLayoutContext/index.tsx

@@ -3,31 +3,31 @@ import React, { ReactNode, useState } from "react";
 import { IThemedLayoutContext } from "./IThemedLayoutContext";
 
 export const ThemedLayoutContext = React.createContext<IThemedLayoutContext>({
-    siderCollapsed: false,
-    mobileSiderOpen: false,
-    setSiderCollapsed: () => undefined,
-    setMobileSiderOpen: () => undefined,
+  siderCollapsed: false,
+  mobileSiderOpen: false,
+  setSiderCollapsed: () => undefined,
+  setMobileSiderOpen: () => undefined,
 });
 
 export const ThemedLayoutContextProvider: React.FC<{
-    children: ReactNode;
-    initialSiderCollapsed?: boolean;
+  children: ReactNode;
+  initialSiderCollapsed?: boolean;
 }> = ({ children, initialSiderCollapsed }) => {
-    const [siderCollapsed, setSiderCollapsed] = useState(
-        initialSiderCollapsed ?? false,
-    );
-    const [mobileSiderOpen, setMobileSiderOpen] = useState(false);
+  const [siderCollapsed, setSiderCollapsed] = useState(
+    initialSiderCollapsed ?? false,
+  );
+  const [mobileSiderOpen, setMobileSiderOpen] = useState(false);
 
-    return (
-        <ThemedLayoutContext.Provider
-            value={{
-                siderCollapsed,
-                mobileSiderOpen,
-                setSiderCollapsed,
-                setMobileSiderOpen,
-            }}
-        >
-            {children}
-        </ThemedLayoutContext.Provider>
-    );
+  return (
+    <ThemedLayoutContext.Provider
+      value={{
+        siderCollapsed,
+        mobileSiderOpen,
+        setSiderCollapsed,
+        setMobileSiderOpen,
+      }}
+    >
+      {children}
+    </ThemedLayoutContext.Provider>
+  );
 };

package/src/definitions/table/index.ts

@@ -1,113 +1,124 @@
 import {
-    CrudFilters,
-    CrudOperators,
-    CrudSorting,
-    CrudFilter,
-    getDefaultFilter as getDefaultFilterCore,
-    getDefaultSortOrder as getDefaultSortOrderCore,
-    ConditionalFilter,
-    LogicalFilter,
+  CrudFilters,
+  CrudOperators,
+  CrudSorting,
+  CrudFilter,
+  getDefaultFilter as getDefaultFilterCore,
+  getDefaultSortOrder as getDefaultSortOrderCore,
+  ConditionalFilter,
+  LogicalFilter,
 } from "@refinedev/core";
-import { SortOrder, SorterResult } from "antd/lib/table/interface";
+import { TableProps } from "antd";
+
+export type FilterValue = Parameters<
+  NonNullable<TableProps["onChange"]>
+>[1][string];
+export type SortOrder = NonNullable<TableProps["sortDirections"]>[number];
+export type SorterResult = Exclude<
+  Parameters<NonNullable<TableProps["onChange"]>>[2],
+  any[]
+>;
 
 export const getDefaultSortOrder = (
-    columnName: string,
-    sorter?: CrudSorting,
+  columnName: string,
+  sorter?: CrudSorting,
 ): SortOrder | undefined => {
-    const sort = getDefaultSortOrderCore(columnName, sorter);
+  const sort = getDefaultSortOrderCore(columnName, sorter);
 
-    if (sort) {
-        return `${sort}end`;
-    }
+  if (sort) {
+    return `${sort}end`;
+  }
 
-    return undefined;
+  return undefined;
 };
 
 /**
  * @deprecated getDefaultFilter moved to `@refinedev/core`. Use from `@refinedev/core`
  */
 export const getDefaultFilter = (
-    columnName: string,
-    filters?: CrudFilters,
-    operatorType: CrudOperators = "eq",
+  columnName: string,
+  filters?: CrudFilters,
+  operatorType: CrudOperators = "eq",
 ): CrudFilter["value"] | undefined => {
-    return getDefaultFilterCore(columnName, filters, operatorType);
+  return getDefaultFilterCore(columnName, filters, operatorType);
 };
 
 export const mapAntdSorterToCrudSorting = (
-    sorter: SorterResult<any> | SorterResult<any>[],
+  sorter: SorterResult | SorterResult[],
 ): CrudSorting => {
-    const crudSorting: CrudSorting = [];
-    if (Array.isArray(sorter)) {
-        sorter
-            .sort((a, b) => {
-                return ((a.column?.sorter as { multiple?: number }).multiple ??
-                    0) <
-                    ((b.column?.sorter as { multiple?: number }).multiple ?? 0)
-                    ? -1
-                    : 0;
-            })
-            .map((item) => {
-                if (item.field && item.order) {
-                    const field = Array.isArray(item.field)
-                        ? item.field.join(".")
-                        : `${item.field}`;
-
-                    crudSorting.push({
-                        field: `${item.columnKey ?? field}`,
-                        order: item.order.replace("end", "") as "asc" | "desc",
-                    });
-                }
-            });
-    } else {
-        if (sorter.field && sorter.order) {
-            const field = Array.isArray(sorter.field)
-                ? sorter.field.join(".")
-                : `${sorter.field}`;
+  const crudSorting: CrudSorting = [];
+  if (Array.isArray(sorter)) {
+    sorter
+      .sort((a, b) => {
+        return ((a.column?.sorter as { multiple?: number }).multiple ?? 0) <
+          ((b.column?.sorter as { multiple?: number }).multiple ?? 0)
+          ? -1
+          : 0;
+      })
+      .map((item) => {
+        if (item.field && item.order) {
+          const field = Array.isArray(item.field)
+            ? item.field.join(".")
+            : `${item.field}`;
 
-            crudSorting.push({
-                field: `${sorter.columnKey ?? field}`,
-                order: sorter.order.replace("end", "") as "asc" | "desc",
-            });
+          crudSorting.push({
+            field: `${item.columnKey ?? field}`,
+            order: item.order.replace("end", "") as "asc" | "desc",
+          });
         }
+      });
+  } else {
+    if (sorter.field && sorter.order) {
+      const field = Array.isArray(sorter.field)
+        ? sorter.field.join(".")
+        : `${sorter.field}`;
+
+      crudSorting.push({
+        field: `${sorter.columnKey ?? field}`,
+        order: sorter.order.replace("end", "") as "asc" | "desc",
+      });
     }
+  }
 
-    return crudSorting;
+  return crudSorting;
 };
 
 export const mapAntdFilterToCrudFilter = (
-    tableFilters: Record<
-        string,
-        (string | number | boolean) | (string | number | boolean)[] | null
-    >,
-    prevFilters: CrudFilters,
-    initialFilters?: CrudFilters,
+  tableFilters: Record<
+    string,
+    | FilterValue
+    | (string | number | boolean)
+    | (string | number | boolean)[]
+    | null
+  >,
+  prevFilters: CrudFilters,
+  initialFilters?: CrudFilters,
 ): CrudFilters => {
-    const crudFilters: CrudFilters = [];
-    const mapInitialFilter: Record<string, CrudFilter> = (
-        initialFilters ?? []
-    ).reduce((acc, item) => {
-        const field =
-            (item as ConditionalFilter).key || (item as LogicalFilter).field;
-        return { ...acc, [field]: item };
-    }, {});
+  const crudFilters: CrudFilters = [];
+  const mapInitialFilter: Record<string, CrudFilter> = (
+    initialFilters ?? []
+  ).reduce((acc, item) => {
+    const field =
+      (item as ConditionalFilter).key || (item as LogicalFilter).field;
+    return { ...acc, [field]: item };
+  }, {});
 
-    Object.keys(tableFilters).map((field) => {
-        const value = tableFilters[field];
-        const operator =
-            prevFilters
-                .filter((i) => i.operator !== "or")
-                .find((p: any) => p.field === field)?.operator ||
-            mapInitialFilter[field]?.operator;
+  Object.keys(tableFilters).map((field) => {
+    const value = tableFilters[field];
+    const operator =
+      prevFilters
+        .filter((i) => i.operator !== "or")
+        .find((p: any) => p.field === field)?.operator ||
+      mapInitialFilter[field]?.operator;
 
-        if (operator !== "or" && operator !== "and") {
-            crudFilters.push({
-                field,
-                operator: operator ?? (Array.isArray(value) ? "in" : "eq"),
-                value,
-            });
-        }
-    });
+    if (operator !== "or" && operator !== "and") {
+      crudFilters.push({
+        field,
+        operator: operator ?? (Array.isArray(value) ? "in" : "eq"),
+        value,
+      });
+    }
+  });
 
-    return crudFilters;
+  return crudFilters;
 };

package/src/definitions/themes/index.ts

@@ -1,50 +1,50 @@
 import { ThemeConfig } from "antd";
 
 type ThemeNames =
-    | "Blue"
-    | "Purple"
-    | "Magenta"
-    | "Red"
-    | "Orange"
-    | "Yellow"
-    | "Green";
+  | "Blue"
+  | "Purple"
+  | "Magenta"
+  | "Red"
+  | "Orange"
+  | "Yellow"
+  | "Green";
 
 type RefineThemes = Record<ThemeNames, ThemeConfig>;
 
 export const RefineThemes: RefineThemes = {
-    Blue: {
-        token: {
-            colorPrimary: "#1677FF",
-        },
+  Blue: {
+    token: {
+      colorPrimary: "#1677FF",
     },
-    Purple: {
-        token: {
-            colorPrimary: "#722ED1",
-        },
+  },
+  Purple: {
+    token: {
+      colorPrimary: "#722ED1",
     },
-    Magenta: {
-        token: {
-            colorPrimary: "#EB2F96",
-        },
+  },
+  Magenta: {
+    token: {
+      colorPrimary: "#EB2F96",
     },
-    Red: {
-        token: {
-            colorPrimary: "#F5222D",
-        },
+  },
+  Red: {
+    token: {
+      colorPrimary: "#F5222D",
     },
-    Orange: {
-        token: {
-            colorPrimary: "#FA541C",
-        },
+  },
+  Orange: {
+    token: {
+      colorPrimary: "#FA541C",
     },
-    Yellow: {
-        token: {
-            colorPrimary: "#FAAD14",
-        },
+  },
+  Yellow: {
+    token: {
+      colorPrimary: "#FAAD14",
     },
-    Green: {
-        token: {
-            colorPrimary: "#52C41A",
-        },
+  },
+  Green: {
+    token: {
+      colorPrimary: "#52C41A",
     },
+  },
 };

package/src/definitions/upload/index.ts

@@ -1,29 +1,29 @@
 import type { UploadFile, UploadChangeParam } from "antd/lib/upload/interface";
 
 export const getValueFromEvent = (event: UploadChangeParam): UploadFile[] => {
-    const { fileList } = event;
+  const { fileList } = event;
 
-    return [...fileList];
+  return [...fileList];
 };
 
 export function file2Base64(file: UploadFile): Promise<string> {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
 
-        const resultHandler = () => {
-            if (reader.result) {
-                reader.removeEventListener("load", resultHandler, false);
+    const resultHandler = () => {
+      if (reader.result) {
+        reader.removeEventListener("load", resultHandler, false);
 
-                resolve(reader.result as string);
-            }
-        };
+        resolve(reader.result as string);
+      }
+    };
 
-        reader.addEventListener("load", resultHandler, false);
+    reader.addEventListener("load", resultHandler, false);
 
-        reader.readAsDataURL(file.originFileObj as Blob);
-        reader.onerror = (error) => {
-            reader.removeEventListener("load", resultHandler, false);
-            return reject(error);
-        };
-    });
+    reader.readAsDataURL(file.originFileObj as Blob);
+    reader.onerror = (error) => {
+      reader.removeEventListener("load", resultHandler, false);
+      return reject(error);
+    };
+  });
 }