@refinedev/antd 5.13.1 → 5.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.13.1",
+  "version": "5.14.0",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "main": "dist/index.js",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@refinedev/cli": "^2.5.3",
     "@refinedev/ui-tests": "^1.3.2",
-    "@refinedev/core": "^4.13.0",
+    "@refinedev/core": "^4.14.1",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",

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

@@ -1,6 +1,10 @@
 import React from "react";
 import { Layout as AntdLayout, Typography, Avatar, Space, theme } from "antd";
-import { useActiveAuthProvider, useGetIdentity } from "@refinedev/core";
+import {
+    pickNotDeprecated,
+    useActiveAuthProvider,
+    useGetIdentity,
+} from "@refinedev/core";
 import { RefineThemedLayoutV2HeaderProps } from "../types";
 
 const { Text } = Typography;
@@ -8,6 +12,7 @@ const { useToken } = theme;
 
 export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = ({
     isSticky,
+    sticky,
 }) => {
     const { token } = useToken();
 
@@ -31,7 +36,7 @@ export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = ({
         height: "64px",
     };
 
-    if (isSticky) {
+    if (pickNotDeprecated(sticky, isSticky)) {
         headerStyles.position = "sticky";
         headerStyles.top = 0;
         headerStyles.zIndex = 1;

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

@@ -37,6 +37,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
     Title: TitleFromProps,
     render,
     meta,
+    fixed,
 }) => {
     const { token } = useToken();
     const {
@@ -189,25 +190,25 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
 
     const renderMenu = () => {
         return (
-            <>
-                <Menu
-                    selectedKeys={selectedKey ? [selectedKey] : []}
-                    defaultOpenKeys={defaultOpenKeys}
-                    mode="inline"
-                    style={{
-                        marginTop: "8px",
-                        border: "none",
-                    }}
-                    onClick={() => {
-                        setSiderVisible?.(false);
-                        if (!breakpoint.lg) {
-                            setDrawerSiderVisible?.(true);
-                        }
-                    }}
-                >
-                    {renderSider()}
-                </Menu>
-            </>
+            <Menu
+                selectedKeys={selectedKey ? [selectedKey] : []}
+                defaultOpenKeys={defaultOpenKeys}
+                mode="inline"
+                style={{
+                    paddingTop: "8px",
+                    border: "none",
+                    overflow: "auto",
+                    height: "calc(100% - 72px)",
+                }}
+                onClick={() => {
+                    setSiderVisible?.(false);
+                    if (!breakpoint.lg) {
+                        setDrawerSiderVisible?.(true);
+                    }
+                }}
+            >
+                {renderSider()}
+            </Menu>
         );
     };
 
@@ -229,7 +230,6 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                         <Layout.Sider
                             style={{
                                 height: "100vh",
-                                overflow: "hidden",
                                 backgroundColor: token.colorBgContainer,
                                 borderRight: `1px solid ${token.colorBgElevated}`,
                             }}
@@ -243,6 +243,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                                     alignItems: "center",
                                     height: "64px",
                                     backgroundColor: token.colorBgElevated,
+                                    borderBottom: `1px solid ${token.colorBorder}`,
                                 }}
                             >
                                 <RenderToTitle collapsed={false} />
@@ -265,64 +266,84 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
         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;
+    }
+
     return (
-        <Layout.Sider
-            style={{
-                backgroundColor: token.colorBgContainer,
-                borderRight: `1px solid ${token.colorBgElevated}`,
-            }}
-            collapsible
-            collapsed={drawerSiderVisible}
-            onCollapse={(collapsed, type) => {
-                if (type === "clickTrigger") {
-                    setDrawerSiderVisible?.(collapsed);
+        <>
+            {fixed && (
+                <div
+                    style={{
+                        width: drawerSiderVisible ? "80px" : "200px",
+                        transition: "all 0.2s",
+                    }}
+                />
+            )}
+            <Layout.Sider
+                style={siderStyles}
+                collapsible
+                collapsed={drawerSiderVisible}
+                onCollapse={(collapsed, type) => {
+                    if (type === "clickTrigger") {
+                        setDrawerSiderVisible?.(collapsed);
+                    }
+                }}
+                collapsedWidth={80}
+                breakpoint="lg"
+                trigger={
+                    <Button
+                        type="text"
+                        style={{
+                            borderRadius: 0,
+                            height: "100%",
+                            width: "100%",
+                            backgroundColor: token.colorBgElevated,
+                        }}
+                    >
+                        {drawerSiderVisible ? (
+                            <RightOutlined
+                                style={{
+                                    color: token.colorPrimary,
+                                }}
+                            />
+                        ) : (
+                            <LeftOutlined
+                                style={{
+                                    color: token.colorPrimary,
+                                }}
+                            />
+                        )}
+                    </Button>
                 }
-            }}
-            collapsedWidth={80}
-            breakpoint="lg"
-            trigger={
-                <Button
-                    type="text"
+            >
+                <div
                     style={{
-                        borderRadius: 0,
-                        height: "100%",
-                        width: "100%",
+                        width: drawerSiderVisible ? "80px" : "200px",
+                        padding: drawerSiderVisible ? "0" : "0 16px",
+                        display: "flex",
+                        justifyContent: drawerSiderVisible
+                            ? "center"
+                            : "flex-start",
+                        alignItems: "center",
+                        height: "64px",
                         backgroundColor: token.colorBgElevated,
+                        fontSize: "14px",
+                        borderBottom: `1px solid ${token.colorBorder}`,
                     }}
                 >
-                    {drawerSiderVisible ? (
-                        <RightOutlined
-                            style={{
-                                color: token.colorPrimary,
-                            }}
-                        />
-                    ) : (
-                        <LeftOutlined
-                            style={{
-                                color: token.colorPrimary,
-                            }}
-                        />
-                    )}
-                </Button>
-            }
-        >
-            <div
-                style={{
-                    width: drawerSiderVisible ? "80px" : "200px",
-                    padding: drawerSiderVisible ? "0" : "0 16px",
-                    display: "flex",
-                    justifyContent: drawerSiderVisible
-                        ? "center"
-                        : "flex-start",
-                    alignItems: "center",
-                    height: "64px",
-                    backgroundColor: token.colorBgElevated,
-                    fontSize: "14px",
-                }}
-            >
-                <RenderToTitle collapsed={drawerSiderVisible} />
-            </div>
-            {renderMenu()}
-        </Layout.Sider>
+                    <RenderToTitle collapsed={drawerSiderVisible} />
+                </div>
+                {renderMenu()}
+            </Layout.Sider>
+        </>
     );
 };

package/src/components/themedLayoutV2/types.ts

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

package/src/hooks/form/useDrawerForm/useDrawerForm.ts

@@ -208,21 +208,11 @@ export const useDrawerForm = <
 
     const { warnWhen, setWarnWhen } = useWarnAboutChange();
 
-    const submit = async () => {
-        await onFinish(form.getFieldsValue());
-
-        if (autoSubmitClose) {
-            close();
-        }
-
-        if (autoResetForm) {
-            form.resetFields();
-        }
-    };
-
     const saveButtonProps = {
         disabled: formLoading,
-        onClick: submit,
+        onClick: () => {
+            form.submit();
+        },
         loading: formLoading,
     };
 
@@ -278,7 +268,17 @@ export const useDrawerForm = <
             ...useFormProps.formProps,
             onValuesChange: formProps?.onValuesChange,
             onKeyUp: formProps?.onKeyUp,
-            onFinish: formProps.onFinish,
+            onFinish: async (values) => {
+                await onFinish(values);
+
+                if (autoSubmitClose) {
+                    close();
+                }
+
+                if (autoResetForm) {
+                    form.resetFields();
+                }
+            },
         },
         drawerProps: {
             width: "500px",

package/src/hooks/form/useModalForm/useModalForm.ts

@@ -1,9 +1,5 @@
 import React, { useCallback } from "react";
 import { FormInstance, FormProps, ModalProps } from "antd";
-import {
-    useModalForm as useModalFormSF,
-    UseModalFormConfig as UseModalFormConfigSF,
-} from "sunflower-antd";
 
 import {
     useTranslate,
@@ -20,6 +16,7 @@ import {
     useGo,
 } from "@refinedev/core";
 import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
+import { useModal } from "@hooks/modal";
 
 export type useModalFormFromSFReturnType<TResponse, TVariables> = {
     open: boolean;
@@ -85,10 +82,13 @@ export type UseModalFormProps<
         TResponse,
         TResponseError
     > &
-    UseModalFormConfigSF &
     useModalFormConfig &
     LiveModeProps &
-    FormWithSyncWithLocationParams;
+    FormWithSyncWithLocationParams & {
+        defaultVisible?: boolean;
+        autoSubmitClose?: boolean;
+        autoResetForm?: boolean;
+    };
 /**
  * `useModalForm` hook allows you to manage a form within a modal. It returns Ant Design {@link https://ant.design/components/form/ Form} and {@link https://ant.design/components/modal/ Modal} components props.
  *
@@ -109,6 +109,9 @@ export const useModalForm = <
     TResponseError extends HttpError = TError,
 >({
     syncWithLocation,
+    defaultVisible = false,
+    autoSubmitClose = true,
+    autoResetForm = true,
     ...rest
 }: UseModalFormProps<
     TQueryFnData,
@@ -161,18 +164,31 @@ export const useModalForm = <
 
     const { warnWhen, setWarnWhen } = useWarnAboutChange();
 
-    const sunflowerUseModal = useModalFormSF<TResponse, TVariables>({
-        ...rest,
-        form: form,
-        submit: onFinish as any,
+    const { show, close, modalProps } = useModal({
+        modalProps: {
+            open: defaultVisible,
+        },
     });
 
-    const {
-        visible,
-        show,
-        formProps: modalFormProps,
+    const visible = modalProps.open || false;
+    const sunflowerUseModal: useModalFormFromSFReturnType<
+        TResponse,
+        TVariables
+    > = {
         modalProps,
-    } = sunflowerUseModal;
+        form,
+        formLoading,
+        formProps,
+        formResult: undefined,
+        formValues: form.getFieldsValue,
+        defaultFormValuesLoading: false,
+        initialValues: {},
+        submit: onFinish as any,
+        close,
+        open: modalProps.open || false,
+        show,
+        visible,
+    };
 
     React.useEffect(() => {
         if (initiallySynced.current === false && syncWithLocationKey) {
@@ -227,6 +243,9 @@ export const useModalForm = <
     const saveButtonPropsSF = {
         disabled: formLoading,
         loading: formLoading,
+        onClick: () => {
+            form.submit();
+        },
     };
 
     const handleClose = useCallback(() => {
@@ -274,11 +293,21 @@ export const useModalForm = <
         close: handleClose,
         open: visible,
         formProps: {
-            ...modalFormProps,
+            ...formProps,
             ...useFormProps.formProps,
             onValuesChange: formProps?.onValuesChange,
             onKeyUp: formProps?.onKeyUp,
-            onFinish: formProps.onFinish,
+            onFinish: async (values) => {
+                await onFinish(values);
+
+                if (autoSubmitClose) {
+                    close();
+                }
+
+                if (autoResetForm) {
+                    form.resetFields();
+                }
+            },
         },
         modalProps: {
             ...newModalProps,

package/src/hooks/table/useEditableTable/useEditableTable.ts

@@ -35,7 +35,12 @@ type useEditableTableProps<
     useTableProps<TQueryFnData, TError, TSearchVariables, TData>,
     "successNotification" | "errorNotification"
 > &
-    UseFormProps<TQueryFnData, TError, TVariables>;
+    UseFormProps<TQueryFnData, TError, TVariables> & {
+        /**
+         * When true, row will be closed after successful submit.
+         */
+        autoSubmitClose?: boolean;
+    };
 
 /**
  * `useEditeableTable` allows you to implement edit feature on the table with ease,
@@ -58,15 +63,16 @@ export const useEditableTable = <
     TVariables = {},
     TSearchVariables = unknown,
     TData extends BaseRecord = TQueryFnData,
->(
-    props: useEditableTableProps<
-        TQueryFnData,
-        TError,
-        TVariables,
-        TSearchVariables,
-        TData
-    > = {},
-): useEditableTableReturnType<
+>({
+    autoSubmitClose = true,
+    ...props
+}: useEditableTableProps<
+    TQueryFnData,
+    TError,
+    TVariables,
+    TSearchVariables,
+    TData
+> = {}): useEditableTableReturnType<
     TQueryFnData,
     TError,
     TVariables,
@@ -103,6 +109,16 @@ export const useEditableTable = <
     return {
         ...table,
         ...edit,
+        formProps: {
+            ...edit.formProps,
+            onFinish: async (values) => {
+                const result = await edit.onFinish(values);
+                if (autoSubmitClose) {
+                    setId(undefined);
+                }
+                return result;
+            },
+        },
         saveButtonProps,
         cancelButtonProps,
         editButtonProps,