@refinedev/antd 5.11.0 → 5.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.11.0",
+  "version": "5.13.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",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@ant-design/pro-layout": "7.8.3",
-    "@refinedev/ui-types": "^1.10.0",
+    "@refinedev/ui-types": "^1.12.0",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.0.5",
     "dayjs": "^1.10.7",

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

@@ -6,7 +6,9 @@ import { RefineThemedLayoutV2HeaderProps } from "../types";
 const { Text } = Typography;
 const { useToken } = theme;
 
-export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = () => {
+export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = ({
+    isSticky,
+}) => {
     const { token } = useToken();
 
     const authProvider = useActiveAuthProvider();
@@ -20,17 +22,23 @@ export const ThemedHeaderV2: React.FC<RefineThemedLayoutV2HeaderProps> = () => {
         return null;
     }
 
+    const headerStyles: React.CSSProperties = {
+        backgroundColor: token.colorBgElevated,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        padding: "0px 24px",
+        height: "64px",
+    };
+
+    if (isSticky) {
+        headerStyles.position = "sticky";
+        headerStyles.top = 0;
+        headerStyles.zIndex = 1;
+    }
+
     return (
-        <AntdLayout.Header
-            style={{
-                backgroundColor: token.colorBgElevated,
-                display: "flex",
-                justifyContent: "flex-end",
-                alignItems: "center",
-                padding: "0px 24px",
-                height: "64px",
-            }}
-        >
+        <AntdLayout.Header style={headerStyles}>
             <Space>
                 <Space size="middle">
                     {user?.name && <Text strong>{user.name}</Text>}

package/src/components/themedLayoutV2/index.tsx

@@ -13,6 +13,7 @@ export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
     Title,
     Footer,
     OffLayoutArea,
+    initialSiderCollapsed,
 }) => {
     const breakpoint = Grid.useBreakpoint();
     const SiderToRender = Sider ?? DefaultSider;
@@ -20,7 +21,9 @@ export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
     const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
 
     return (
-        <ThemedLayoutContextProvider>
+        <ThemedLayoutContextProvider
+            initialSiderCollapsed={initialSiderCollapsed}
+        >
             <AntdLayout style={{ minHeight: "100vh" }}>
                 <SiderToRender Title={Title} />
                 <AntdLayout>

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

@@ -273,7 +273,11 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
             }}
             collapsible
             collapsed={drawerSiderVisible}
-            onCollapse={(collapsed) => setDrawerSiderVisible?.(collapsed)}
+            onCollapse={(collapsed, type) => {
+                if (type === "clickTrigger") {
+                    setDrawerSiderVisible?.(collapsed);
+                }
+            }}
             collapsedWidth={80}
             breakpoint="lg"
             trigger={

package/src/contexts/themedLayoutContext/index.tsx

@@ -4,14 +4,17 @@ import { IThemedLayoutContext } from "./IThemedLayoutContext";
 
 export const ThemedLayoutContext = React.createContext<IThemedLayoutContext>({
     siderVisible: false,
-    drawerSiderVisible: true,
+    drawerSiderVisible: false,
 });
 
-export const ThemedLayoutContextProvider: React.FC<{ children: ReactNode }> = ({
-    children,
-}) => {
+export const ThemedLayoutContextProvider: React.FC<{
+    children: ReactNode;
+    initialSiderCollapsed?: boolean;
+}> = ({ children, initialSiderCollapsed }) => {
     const [siderVisible, setSiderVisible] = useState(false);
-    const [drawerSiderVisible, setDrawerSiderVisible] = useState(true);
+    const [drawerSiderVisible, setDrawerSiderVisible] = useState(
+        initialSiderCollapsed ?? false,
+    );
 
     return (
         <ThemedLayoutContext.Provider