@refinedev/antd 6.0.0 → 6.0.1

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

@@ -1,13 +1,18 @@
-import React, { type ReactNode, useState } from "react";
-import { Button, Space } from "antd";
-import type { FilterDropdownProps as AntdFilterDropdownProps } from "antd/lib/table/interface";
+import React, { type ReactNode } from "react";
+import { Button, Space, type TableColumnProps } from "antd";
 import dayjs from "dayjs";
 import { FilterOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
 
+type AntdFilterDropdownProps = React.ComponentProps<
+  Exclude<TableColumnProps<any>["filterDropdown"], ReactNode>
+>;
+
+export type MapValueEvent = "onChange" | "value";
+
 export type FilterDropdownProps = AntdFilterDropdownProps & {
-  mapValue?: (selectedKeys: React.Key[]) => any;
-  children: ReactNode;
+  mapValue?: (selectedKeys: React.Key[], event: MapValueEvent) => any;
+  children: React.JSX.Element;
 };
 
 /**
@@ -20,72 +25,63 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
     setSelectedKeys,
     confirm,
     clearFilters,
-    mapValue,
+    mapValue = (value) => value,
     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()];
+    if (typeof selectedKeys === "number") {
+      keys = `${selectedKeys}`;
+    } else if (dayjs.isDayjs(selectedKeys)) {
+      keys = [selectedKeys.toISOString()];
     } else {
-      keys = _mappedValue;
+      keys = selectedKeys;
     }
 
-    setSelectedKeys(keys);
-
+    setSelectedKeys(keys as any);
     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);
-        return setSelectedKeys(_mappedValue);
+        const mappedValue = mapValue(e, "onChange");
+        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);
+      const mappedValue = mapValue(target.value as any, "onChange");
+      setSelectedKeys(mappedValue);
       return;
     }
 
-    const _mappedValue = mappedValue(e);
-
-    setValue(_mappedValue);
+    const mappedValue = mapValue(e, "onChange");
+    setSelectedKeys(mappedValue);
   };
 
   const childrenWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
-      return React.cloneElement(child as React.ReactElement, {
+      return React.cloneElement(child as React.ReactElement<any>, {
         onChange,
-        value: mappedValue(value),
+        value: mapValue(selectedKeys, "value"),
       });
     }
     return child;
   });
+
   return (
     <div
       style={{

package/src/components/table/components/index.ts

@@ -1 +1,2 @@
 export { FilterDropdown } from "./filterDropdown";
+export type { FilterDropdownProps, MapValueEvent } from "./filterDropdown";

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

@@ -1,18 +1,14 @@
 import React from "react";
 import { Layout as AntdLayout, Typography, Avatar, Space, theme } from "antd";
-import { useActiveAuthProvider, useGetIdentity } from "@refinedev/core";
-import { RefineThemedLayoutHeaderProps } from "../types";
+import { useGetIdentity } from "@refinedev/core";
+import type { 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> = () => {
+export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = ({
+  sticky,
+}) => {
   const { token } = theme.useToken();
 
-  const authProvider = useActiveAuthProvider();
-  const { data: user } = useGetIdentity({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { data: user } = useGetIdentity();
 
   const shouldRenderHeader = user && (user.name || user.avatar);
 
@@ -20,17 +16,23 @@ export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = () => {
     return null;
   }
 
+  const headerStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgElevated,
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    padding: "0px 24px",
+    height: "64px",
+  };
+
+  if (sticky) {
+    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 && <Typography.Text strong>{user.name}</Typography.Text>}

package/src/components/themedLayout/index.tsx

@@ -3,11 +3,9 @@ import { Grid, Layout as AntdLayout } from "antd";
 
 import { ThemedSider as DefaultSider } from "./sider";
 import { ThemedHeader as DefaultHeader } from "./header";
-import { RefineThemedLayoutProps } from "./types";
+import type { RefineThemedLayoutProps } from "./types";
+import { ThemedLayoutContextProvider } from "@contexts";
 
-/**
- * @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,
@@ -15,30 +13,38 @@ export const ThemedLayout: React.FC<RefineThemedLayoutProps> = ({
   Title,
   Footer,
   OffLayoutArea,
+  initialSiderCollapsed,
+  onSiderCollapsed,
 }) => {
   const breakpoint = Grid.useBreakpoint();
   const SiderToRender = Sider ?? DefaultSider;
   const HeaderToRender = Header ?? DefaultHeader;
   const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
+  const hasSider = !!SiderToRender({ Title });
 
   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 />}
+    <ThemedLayoutContextProvider
+      initialSiderCollapsed={initialSiderCollapsed}
+      onSiderCollapsed={onSiderCollapsed}
+    >
+      <AntdLayout style={{ minHeight: "100vh" }} hasSider={hasSider}>
+        <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>
-    </AntdLayout>
+    </ThemedLayoutContextProvider>
   );
 };

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

@@ -1,7 +1,14 @@
-import React, { useState } from "react";
-import { Layout, Menu, Grid, Drawer, Button, theme } from "antd";
+import React, { useContext } from "react";
+import {
+  Layout,
+  Menu,
+  Grid,
+  Drawer,
+  Button,
+  theme,
+  ConfigProvider,
+} from "antd";
 import {
-  DashboardOutlined,
   LogoutOutlined,
   UnorderedListOutlined,
   BarsOutlined,
@@ -9,78 +16,64 @@ import {
   RightOutlined,
 } from "@ant-design/icons";
 import {
+  type TreeMenuItem,
   useTranslate,
   useLogout,
-  useTitle,
   CanAccess,
-  ITreeMenu,
   useIsExistAuthentication,
-  useRouterContext,
   useMenu,
-  useRefineContext,
   useLink,
-  useRouterType,
-  useActiveAuthProvider,
-  pickNotDeprecated,
   useWarnAboutChange,
 } from "@refinedev/core";
 
 import { drawerButtonStyles } from "./styles";
-import { RefineThemedLayoutSiderProps } from "../types";
+import type { RefineThemedLayoutSiderProps } from "../types";
 import { ThemedTitle } from "@components";
+import { useThemedLayoutContext } from "@hooks";
 
-/**
- * @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 ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
   Title: TitleFromProps,
   render,
   meta,
+  fixed,
+  activeItemDisabled = false,
+  siderItemsAreCollapsed = true,
 }) => {
   const { token } = theme.useToken();
+  const {
+    siderCollapsed,
+    setSiderCollapsed,
+    mobileSiderOpen,
+    setMobileSiderOpen,
+  } = useThemedLayoutContext();
 
-  const [collapsed, setCollapsed] = useState<boolean>(false);
-  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
   const isExistAuthentication = useIsExistAuthentication();
-  const routerType = useRouterType();
-  const NewLink = useLink();
+  const direction = useContext(ConfigProvider.ConfigContext)?.direction;
+  const Link = useLink();
   const { warnWhen, setWarnWhen } = useWarnAboutChange();
-  const { Link: LegacyLink } = useRouterContext();
-  const Link = routerType === "legacy" ? LegacyLink : NewLink;
-  const TitleFromContext = useTitle();
   const translate = useTranslate();
   const { menuItems, selectedKey, defaultOpenKeys } = useMenu({ meta });
   const breakpoint = Grid.useBreakpoint();
-  const { hasDashboard } = useRefineContext();
-  const authProvider = useActiveAuthProvider();
-  const { mutate: mutateLogout } = useLogout({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { mutate: mutateLogout } = useLogout();
 
   const isMobile =
     typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
 
-  const RenderToTitle = TitleFromProps ?? TitleFromContext ?? ThemedTitle;
+  const RenderToTitle = TitleFromProps ?? ThemedTitle;
 
-  const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
-    return tree.map((item: ITreeMenu) => {
-      const {
-        icon,
-        label,
-        route,
-        key,
-        name,
-        children,
-        parentName,
-        meta,
-        options,
-      } = item;
+  const renderTreeView = (tree: TreeMenuItem[], selectedKey?: string) => {
+    return tree.map((item: TreeMenuItem) => {
+      const { key, name, children, meta, list } = item;
+      const parentName = meta?.parent;
+      const label = item?.label ?? meta?.label ?? name;
+      const icon = meta?.icon;
+      const route = list;
 
       if (children.length > 0) {
         return (
           <CanAccess
             key={item.key}
-            resource={name.toLowerCase()}
+            resource={name}
             action="list"
             params={{
               resource: item,
@@ -97,15 +90,15 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
         );
       }
       const isSelected = key === selectedKey;
-      const isRoute = !(
-        pickNotDeprecated(meta?.parent, options?.parent, parentName) !==
-          undefined && children.length === 0
-      );
+      const isRoute = !(parentName !== undefined && children.length === 0);
+
+      const linkStyle: React.CSSProperties =
+        activeItemDisabled && isSelected ? { pointerEvents: "none" } : {};
 
       return (
         <CanAccess
           key={item.key}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{
             resource: item,
@@ -114,9 +107,12 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           <Menu.Item
             key={item.key}
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
+            style={linkStyle}
           >
-            <Link to={route ?? ""}>{label}</Link>
-            {!collapsed && isSelected && (
+            <Link to={route ?? ""} style={linkStyle}>
+              {label}
+            </Link>
+            {!siderCollapsed && isSelected && (
               <div className="ant-menu-tree-arrow" />
             )}
           </Menu.Item>
@@ -153,56 +149,43 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     </Menu.Item>
   );
 
-  const dashboard = hasDashboard ? (
-    <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
-      <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
-      {!collapsed && selectedKey === "/" && (
-        <div className="ant-menu-tree-arrow" />
-      )}
-    </Menu.Item>
-  ) : null;
+  const defaultExpandMenuItems = (() => {
+    if (siderItemsAreCollapsed) return [];
+
+    return menuItems.map(({ key }) => key);
+  })();
 
   const items = renderTreeView(menuItems, selectedKey);
 
   const renderSider = () => {
     if (render) {
       return render({
-        dashboard,
         items,
         logout,
-        collapsed,
+        collapsed: siderCollapsed,
       });
     }
-    return (
-      <>
-        {dashboard}
-        {items}
-        {logout}
-      </>
-    );
+    return [...items, logout].filter(Boolean);
   };
 
   const renderMenu = () => {
     return (
-      <>
-        <Menu
-          selectedKeys={selectedKey ? [selectedKey] : []}
-          defaultOpenKeys={defaultOpenKeys}
-          mode="inline"
-          style={{
-            marginTop: "8px",
-            border: "none",
-          }}
-          onClick={() => {
-            setDrawerOpen(false);
-            if (!breakpoint.lg) {
-              setCollapsed(true);
-            }
-          }}
-        >
-          {renderSider()}
-        </Menu>
-      </>
+      <Menu
+        selectedKeys={selectedKey ? [selectedKey] : []}
+        defaultOpenKeys={[...defaultOpenKeys, ...defaultExpandMenuItems]}
+        mode="inline"
+        style={{
+          paddingTop: "8px",
+          border: "none",
+          overflow: "auto",
+          height: "calc(100% - 72px)",
+        }}
+        onClick={() => {
+          setMobileSiderOpen(false);
+        }}
+      >
+        {renderSider()}
+      </Menu>
     );
   };
 
@@ -210,13 +193,15 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     return (
       <>
         <Drawer
-          open={drawerOpen}
-          onClose={() => setDrawerOpen(false)}
-          placement="left"
+          open={mobileSiderOpen}
+          onClose={() => setMobileSiderOpen(false)}
+          placement={direction === "rtl" ? "right" : "left"}
           closable={false}
           width={200}
-          bodyStyle={{
-            padding: 0,
+          styles={{
+            body: {
+              padding: 0,
+            },
           }}
           maskClosable={true}
         >
@@ -224,7 +209,6 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
             <Layout.Sider
               style={{
                 height: "100vh",
-                overflow: "hidden",
                 backgroundColor: token.colorBgContainer,
                 borderRight: `1px solid ${token.colorBgElevated}`,
               }}
@@ -249,7 +233,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
         <Button
           style={drawerButtonStyles}
           size="large"
-          onClick={() => setDrawerOpen(true)}
+          onClick={() => setMobileSiderOpen(true)}
           icon={<BarsOutlined />}
         />
       </>
@@ -260,58 +244,77 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     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;
+  }
+  const renderClosingIcons = () => {
+    const iconProps = { style: { color: token.colorPrimary } };
+    const OpenIcon = direction === "rtl" ? RightOutlined : LeftOutlined;
+    const CollapsedIcon = direction === "rtl" ? LeftOutlined : RightOutlined;
+    const IconComponent = siderCollapsed ? CollapsedIcon : OpenIcon;
+
+    return <IconComponent {...iconProps} />;
+  };
+
   return (
-    <Layout.Sider
-      style={{
-        backgroundColor: token.colorBgContainer,
-        borderRight: `1px solid ${token.colorBgElevated}`,
-      }}
-      collapsible
-      collapsed={collapsed}
-      onCollapse={(collapsed) => setCollapsed(collapsed)}
-      collapsedWidth={80}
-      breakpoint="lg"
-      trigger={
-        <Button
-          type="text"
+    <>
+      {fixed && (
+        <div
           style={{
-            borderRadius: 0,
-            height: "100%",
-            width: "100%",
-            backgroundColor: token.colorBgElevated,
+            width: siderCollapsed ? "80px" : "200px",
+            transition: "all 0.2s",
           }}
-        >
-          {collapsed ? (
-            <RightOutlined
-              style={{
-                color: token.colorPrimary,
-              }}
-            />
-          ) : (
-            <LeftOutlined
-              style={{
-                color: token.colorPrimary,
-              }}
-            />
-          )}
-        </Button>
-      }
-    >
-      <div
-        style={{
-          width: collapsed ? "80px" : "200px",
-          padding: collapsed ? "0" : "0 16px",
-          display: "flex",
-          justifyContent: collapsed ? "center" : "flex-start",
-          alignItems: "center",
-          height: "64px",
-          backgroundColor: token.colorBgElevated,
-          fontSize: "14px",
+        />
+      )}
+      <Layout.Sider
+        style={siderStyles}
+        collapsible
+        collapsed={siderCollapsed}
+        onCollapse={(collapsed, type) => {
+          if (type === "clickTrigger") {
+            setSiderCollapsed(collapsed);
+          }
         }}
+        collapsedWidth={80}
+        breakpoint="lg"
+        trigger={
+          <Button
+            type="text"
+            style={{
+              borderRadius: 0,
+              height: "100%",
+              width: "100%",
+              backgroundColor: token.colorBgElevated,
+            }}
+          >
+            {renderClosingIcons()}
+          </Button>
+        }
       >
-        <RenderToTitle collapsed={collapsed} />
-      </div>
-      {renderMenu()}
-    </Layout.Sider>
+        <div
+          style={{
+            width: siderCollapsed ? "80px" : "200px",
+            padding: siderCollapsed ? "0" : "0 16px",
+            display: "flex",
+            justifyContent: siderCollapsed ? "center" : "flex-start",
+            alignItems: "center",
+            height: "64px",
+            backgroundColor: token.colorBgElevated,
+            fontSize: "14px",
+          }}
+        >
+          <RenderToTitle collapsed={siderCollapsed} />
+        </div>
+        {renderMenu()}
+      </Layout.Sider>
+    </>
   );
 };

package/src/components/themedLayout/sider/styles.ts

@@ -1,8 +1,8 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
 export const drawerButtonStyles: CSSProperties = {
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
+  borderStartStartRadius: 0,
+  borderEndStartRadius: 0,
   position: "fixed",
   top: 64,
   zIndex: 999,