@refinedev/antd 5.18.2 → 5.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.18.2",
+  "version": "5.20.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.5.0",
-    "@refinedev/core": "^4.14.3",
+    "@refinedev/core": "^4.16.4",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
@@ -47,7 +47,7 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.0.1",
+    "@ant-design/icons": "5.0.1",
     "@ant-design/pro-layout": "7.8.3",
     "@refinedev/ui-types": "^1.16.0",
     "@tanstack/react-query": "^4.10.1",

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

@@ -28,7 +28,7 @@ import {
 import { drawerButtonStyles } from "./styles";
 import { RefineThemedLayoutV2SiderProps } from "../types";
 import { ThemedTitleV2 } from "@components";
-import { useSiderVisible } from "@hooks";
+import { useThemedLayoutContext } from "@hooks";
 
 const { SubMenu } = Menu;
 const { useToken } = theme;
@@ -41,11 +41,11 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
 }) => {
     const { token } = useToken();
     const {
-        siderVisible,
-        setSiderVisible,
-        drawerSiderVisible,
-        setDrawerSiderVisible,
-    } = useSiderVisible();
+        siderCollapsed,
+        setSiderCollapsed,
+        mobileSiderOpen,
+        setMobileSiderOpen,
+    } = useThemedLayoutContext();
 
     const isExistAuthentication = useIsExistAuthentication();
     const routerType = useRouterType();
@@ -122,7 +122,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                         icon={icon ?? (isRoute && <UnorderedListOutlined />)}
                     >
                         <Link to={route ?? ""}>{label}</Link>
-                        {!drawerSiderVisible && isSelected && (
+                        {!siderCollapsed && isSelected && (
                             <div className="ant-menu-tree-arrow" />
                         )}
                     </Menu.Item>
@@ -162,7 +162,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
     const dashboard = hasDashboard ? (
         <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
             <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
-            {!drawerSiderVisible && selectedKey === "/" && (
+            {!siderCollapsed && selectedKey === "/" && (
                 <div className="ant-menu-tree-arrow" />
             )}
         </Menu.Item>
@@ -176,7 +176,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                 dashboard,
                 items,
                 logout,
-                collapsed: drawerSiderVisible,
+                collapsed: siderCollapsed,
             });
         }
         return (
@@ -201,10 +201,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                     height: "calc(100% - 72px)",
                 }}
                 onClick={() => {
-                    setSiderVisible?.(false);
-                    if (!breakpoint.lg) {
-                        setDrawerSiderVisible?.(true);
-                    }
+                    setMobileSiderOpen(false);
                 }}
             >
                 {renderSider()}
@@ -216,8 +213,8 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
         return (
             <>
                 <Drawer
-                    open={siderVisible}
-                    onClose={() => setSiderVisible?.(false)}
+                    open={mobileSiderOpen}
+                    onClose={() => setMobileSiderOpen(false)}
                     placement="left"
                     closable={false}
                     width={200}
@@ -255,7 +252,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                 <Button
                     style={drawerButtonStyles}
                     size="large"
-                    onClick={() => setSiderVisible?.(true)}
+                    onClick={() => setMobileSiderOpen(true)}
                     icon={<BarsOutlined />}
                 ></Button>
             </>
@@ -283,7 +280,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
             {fixed && (
                 <div
                     style={{
-                        width: drawerSiderVisible ? "80px" : "200px",
+                        width: siderCollapsed ? "80px" : "200px",
                         transition: "all 0.2s",
                     }}
                 />
@@ -291,10 +288,10 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
             <Layout.Sider
                 style={siderStyles}
                 collapsible
-                collapsed={drawerSiderVisible}
+                collapsed={siderCollapsed}
                 onCollapse={(collapsed, type) => {
                     if (type === "clickTrigger") {
-                        setDrawerSiderVisible?.(collapsed);
+                        setSiderCollapsed(collapsed);
                     }
                 }}
                 collapsedWidth={80}
@@ -309,7 +306,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                             backgroundColor: token.colorBgElevated,
                         }}
                     >
-                        {drawerSiderVisible ? (
+                        {siderCollapsed ? (
                             <RightOutlined
                                 style={{
                                     color: token.colorPrimary,
@@ -327,10 +324,10 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
             >
                 <div
                     style={{
-                        width: drawerSiderVisible ? "80px" : "200px",
-                        padding: drawerSiderVisible ? "0" : "0 16px",
+                        width: siderCollapsed ? "80px" : "200px",
+                        padding: siderCollapsed ? "0" : "0 16px",
                         display: "flex",
-                        justifyContent: drawerSiderVisible
+                        justifyContent: siderCollapsed
                             ? "center"
                             : "flex-start",
                         alignItems: "center",
@@ -340,7 +337,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
                         borderBottom: `1px solid ${token.colorBorder}`,
                     }}
                 >
-                    <RenderToTitle collapsed={drawerSiderVisible} />
+                    <RenderToTitle collapsed={siderCollapsed} />
                 </div>
                 {renderMenu()}
             </Layout.Sider>

package/src/contexts/themedLayoutContext/IThemedLayoutContext.ts

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

package/src/contexts/themedLayoutContext/index.tsx

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

package/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from "./list";
 export * from "./useFileUploadState";
 export * from "./modal";
 export * from "./useSiderVisible";
+export * from "./useThemedLayoutContext";

package/src/hooks/useSiderVisible/index.ts

@@ -1,22 +1,29 @@
 import { useContext } from "react";
 
 import { ThemedLayoutContext } from "@contexts";
-import { IThemedLayoutContext } from "@contexts/themedLayoutContext/IThemedLayoutContext";
 
-export type UseSiderVisibleType = IThemedLayoutContext;
+export type UseSiderVisibleType = {
+    siderVisible: boolean;
+    drawerSiderVisible: boolean;
+    setSiderVisible: (visible: boolean) => void;
+    setDrawerSiderVisible: (visible: boolean) => void;
+};
 
+/**
+ * @deprecated Please use `useThemedLayoutContext` instead.
+ */
 export const useSiderVisible = (): UseSiderVisibleType => {
     const {
-        siderVisible,
-        setSiderVisible,
-        drawerSiderVisible,
-        setDrawerSiderVisible,
+        mobileSiderOpen,
+        siderCollapsed,
+        setMobileSiderOpen,
+        setSiderCollapsed,
     } = useContext(ThemedLayoutContext);
 
     return {
-        siderVisible,
-        setSiderVisible,
-        drawerSiderVisible,
-        setDrawerSiderVisible,
+        siderVisible: mobileSiderOpen,
+        setSiderVisible: setMobileSiderOpen,
+        drawerSiderVisible: siderCollapsed,
+        setDrawerSiderVisible: setSiderCollapsed,
     };
 };

package/src/hooks/useThemedLayoutContext/index.ts

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+
+import { ThemedLayoutContext } from "@contexts";
+import { IThemedLayoutContext } from "@contexts/themedLayoutContext/IThemedLayoutContext";
+
+export type UseThemedLayoutContextType = IThemedLayoutContext;
+
+export const useThemedLayoutContext = (): UseThemedLayoutContextType => {
+    const {
+        mobileSiderOpen,
+        siderCollapsed,
+        setMobileSiderOpen,
+        setSiderCollapsed,
+    } = useContext(ThemedLayoutContext);
+
+    return {
+        mobileSiderOpen,
+        siderCollapsed,
+        setMobileSiderOpen,
+        setSiderCollapsed,
+    };
+};