@refinedev/antd 5.43.1 → 5.45.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.43.1",
+  "version": "5.45.1",
   "private": false,
-  "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
+  "description": "Ant Design UI support for Refine, offering enterprise-level UI components.",
   "repository": {
     "type": "git",
     "url": "https://github.com/refinedev/refine.git",
@@ -33,9 +33,9 @@
   "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@ant-design/icons": "5.0.1",
-    "@ant-design/pro-layout": "7.17.12",
-    "@refinedev/ui-types": "^1.22.9",
+    "@ant-design/icons": "^5.5.1",
+    "@ant-design/pro-layout": "^7.21.1",
+    "@refinedev/ui-types": "^1.23.1",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.17.0",
     "dayjs": "^1.10.7",
@@ -46,9 +46,9 @@
   },
   "devDependencies": {
     "@esbuild-plugins/node-resolve": "^0.1.4",
-    "@refinedev/cli": "^2.16.38",
-    "@refinedev/core": "^4.54.1",
-    "@refinedev/ui-tests": "^1.14.9",
+    "@refinedev/cli": "^2.16.42",
+    "@refinedev/core": "^4.57.1",
+    "@refinedev/ui-tests": "^1.15.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
@@ -64,7 +64,7 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "postcss": "^8.1.4",
-    "react-router-dom": "^6.8.1",
+    "react-router": "^7.0.2",
     "ts-jest": "^29.1.2",
     "tsup": "^6.7.0",
     "typescript": "^5.4.2"

package/src/components/autoSaveIndicator/index.tsx

@@ -19,7 +19,6 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
       <Message
         translationKey="autoSave.success"
         defaultMessage="saved"
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<CheckCircleOutlined />}
       />
     ),
@@ -27,7 +26,6 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
       <Message
         translationKey="autoSave.error"
         defaultMessage="auto save failure"
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<ExclamationCircleOutlined />}
       />
     ),
@@ -35,7 +33,6 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
       <Message
         translationKey="autoSave.loading"
         defaultMessage="saving..."
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<SyncOutlined />}
       />
     ),
@@ -43,7 +40,6 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
       <Message
         translationKey="autoSave.idle"
         defaultMessage="waiting for changes"
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<EllipsisOutlined />}
       />
     ),

package/src/components/breadcrumb/index.tsx

@@ -23,6 +23,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   showHome = true,
   hideIcons = false,
   meta,
+  minItems = 2,
 }) => {
   const routerType = useRouterType();
   const { breadcrumbs } = useBreadcrumb({
@@ -38,9 +39,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
 
   const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
-  if (breadcrumbs.length === 1) {
-    return null;
-  }
+  if (breadcrumbs.length < minItems) return null;
 
   const breadCrumbItems = breadcrumbs.map(({ label, icon, href }) => ({
     key: `breadcrumb-item-${label}`,
@@ -70,7 +69,6 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
           key: "breadcrumb-item-home",
           title: (
             <ActiveLink to="/">
-              {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
               {rootRouteResource?.resource?.meta?.icon ?? <HomeOutlined />}
             </ActiveLink>
           ),

package/src/components/buttons/clone/index.tsx

@@ -34,14 +34,17 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
     meta,
   });
 
-  if (hidden) return null;
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
 
   return (
     <LinkComponent
       to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (disabled) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -52,9 +55,8 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
       }}
     >
       <Button
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<PlusSquareOutlined />}
-        disabled={disabled}
+        disabled={isDisabled}
         title={title}
         data-testid={RefineButtonTestIds.CloneButton}
         className={RefineButtonClassNames.CloneButton}

package/src/components/buttons/create/index.tsx

@@ -29,19 +29,22 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
   const { hidden, disabled, label, title, LinkComponent, to } = useCreateButton(
     {
       resource: resourceNameFromProps ?? propResourceNameOrRouteName,
-      accessControl,
       meta,
+      accessControl,
     },
   );
 
-  if (hidden) return null;
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
 
   return (
     <LinkComponent
       to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (disabled) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -52,9 +55,8 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
       }}
     >
       <Button
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<PlusSquareOutlined />}
-        disabled={disabled}
+        disabled={isDisabled}
         title={title}
         data-testid={RefineButtonTestIds.CreateButton}
         className={RefineButtonClassNames.CreateButton}

package/src/components/buttons/delete/index.tsx

@@ -58,7 +58,10 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
     accessControl,
   });
 
-  if (hidden) return null;
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
 
   return (
     <Popconfirm
@@ -69,17 +72,14 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
       title={confirmTitle ?? defaultConfirmTitle}
       okButtonProps={{ disabled: loading }}
       onConfirm={onConfirm}
-      disabled={
-        typeof rest?.disabled !== "undefined" ? rest.disabled : disabled
-      }
+      disabled={isDisabled}
     >
       <Button
         danger
         loading={loading}
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<DeleteOutlined />}
         title={title}
-        disabled={disabled}
+        disabled={isDisabled}
         data-testid={RefineButtonTestIds.DeleteButton}
         className={RefineButtonClassNames.DeleteButton}
         {...rest}

package/src/components/buttons/edit/index.tsx

@@ -34,14 +34,17 @@ export const EditButton: React.FC<EditButtonProps> = ({
     accessControl,
   });
 
-  if (hidden) return null;
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
 
   return (
     <LinkComponent
       to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (disabled) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -52,9 +55,8 @@ export const EditButton: React.FC<EditButtonProps> = ({
       }}
     >
       <Button
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<EditOutlined />}
-        disabled={disabled}
+        disabled={isDisabled}
         title={title}
         data-testid={RefineButtonTestIds.EditButton}
         className={RefineButtonClassNames.EditButton}

package/src/components/buttons/export/index.tsx

@@ -25,7 +25,6 @@ export const ExportButton: React.FC<ExportButtonProps> = ({
   return (
     <Button
       type="default"
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<ExportOutlined />}
       data-testid={RefineButtonTestIds.ExportButton}
       className={RefineButtonClassNames.ExportButton}

package/src/components/buttons/import/index.tsx

@@ -28,7 +28,6 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
   return (
     <Upload {...uploadProps}>
       <Button
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<ImportOutlined />}
         data-testid={RefineButtonTestIds.ImportButton}
         className={RefineButtonClassNames.ImportButton}

package/src/components/buttons/list/index.tsx

@@ -28,18 +28,21 @@ export const ListButton: React.FC<ListButtonProps> = ({
 }) => {
   const { to, label, title, hidden, disabled, LinkComponent } = useListButton({
     resource: resourceNameFromProps ?? propResourceNameOrRouteName,
-    accessControl,
     meta,
+    accessControl,
   });
 
-  if (hidden) return null;
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
 
   return (
     <LinkComponent
       to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (disabled) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -50,9 +53,8 @@ export const ListButton: React.FC<ListButtonProps> = ({
       }}
     >
       <Button
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<BarsOutlined />}
-        disabled={disabled}
+        disabled={isDisabled}
         title={title}
         data-testid={RefineButtonTestIds.ListButton}
         className={RefineButtonClassNames.ListButton}

package/src/components/buttons/refresh/index.tsx

@@ -35,7 +35,6 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({
   return (
     <Button
       onClick={onClick}
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<RedoOutlined spin={loading} />}
       data-testid={RefineButtonTestIds.RefreshButton}
       className={RefineButtonClassNames.RefreshButton}

package/src/components/buttons/save/index.tsx

@@ -25,7 +25,6 @@ export const SaveButton: React.FC<SaveButtonProps> = ({
   return (
     <Button
       type="primary"
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<SaveOutlined />}
       data-testid={RefineButtonTestIds.SaveButton}
       className={RefineButtonClassNames.SaveButton}

package/src/components/buttons/show/index.tsx

@@ -34,14 +34,17 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
     meta,
   });
 
-  if (hidden) return null;
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
 
   return (
     <LinkComponent
       to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (disabled) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -52,9 +55,8 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
       }}
     >
       <Button
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
+        disabled={isDisabled}
         icon={<EyeOutlined />}
-        disabled={disabled}
         title={title}
         data-testid={RefineButtonTestIds.ShowButton}
         className={RefineButtonClassNames.ShowButton}

package/src/components/crud/create/index.tsx

@@ -72,7 +72,6 @@ export const Create: React.FC<CreateProps> = ({
   return (
     <div {...(wrapperProps ?? {})}>
       <PageHeader
-        ghost={false}
         backIcon={goBackFromProps}
         onBack={
           action !== "list" || typeof action !== "undefined"

package/src/components/crud/edit/index.tsx

@@ -150,7 +150,6 @@ export const Edit: React.FC<EditProps> = ({
   return (
     <div {...(wrapperProps ?? {})}>
       <PageHeader
-        ghost={false}
         backIcon={goBackFromProps}
         onBack={
           action !== "list" && typeof action !== "undefined"

package/src/components/crud/list/index.tsx

@@ -69,7 +69,6 @@ export const List: React.FC<ListProps> = ({
   return (
     <div {...(wrapperProps ?? {})}>
       <PageHeader
-        ghost={false}
         title={
           title ??
           translate(

package/src/components/crud/show/index.tsx

@@ -133,7 +133,6 @@ export const Show: React.FC<ShowProps> = ({
   return (
     <div {...(wrapperProps ?? {})}>
       <PageHeader
-        ghost={false}
         backIcon={goBackFromProps}
         onBack={
           action !== "list" && typeof action !== "undefined"

package/src/components/fields/boolean/index.tsx

@@ -14,9 +14,7 @@ export const BooleanField: React.FC<BooleanFieldProps> = ({
   value,
   valueLabelTrue = "true",
   valueLabelFalse = "false",
-  // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
   trueIcon = <CheckOutlined />,
-  // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
   falseIcon = <CloseOutlined />,
   ...rest
 }) => {

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

@@ -82,7 +82,6 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
           >
             <Menu.SubMenu
               key={item.key}
-              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
               icon={icon ?? <UnorderedListOutlined />}
               title={label}
             >
@@ -110,7 +109,6 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
             style={{
               fontWeight: isSelected ? "bold" : "normal",
             }}
-            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
           >
             <Link to={route ?? ""}>{label}</Link>
@@ -142,7 +140,6 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
   };
 
   const logout = isExistAuthentication && (
-    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     <Menu.Item key="logout" onClick={handleLogout} icon={<LogoutOutlined />}>
       {translate("buttons.logout", "Logout")}
     </Menu.Item>
@@ -154,7 +151,6 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
       style={{
         fontWeight: selectedKey === "/" ? "bold" : "normal",
       }}
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<DashboardOutlined />}
     >
       <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
@@ -230,7 +226,6 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
           style={drawerButtonStyles}
           size="large"
           onClick={() => setDrawerOpen(true)}
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<BarsOutlined />}
         />
       </>

package/src/components/pageHeader/index.tsx

@@ -15,7 +15,6 @@ export const PageHeader: FC<AntdPageHeaderProps> = ({ children, ...props }) => {
     const BackIcon =
       direction === "rtl" ? ArrowRightOutlined : ArrowLeftOutlined;
 
-    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     return <Button type="text" icon={<BackIcon />} />;
   };
   const backIcon =

package/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -52,6 +52,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
   renderContent,
   formProps,
   title,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<ForgotPasswordFormTypes>();
@@ -104,7 +105,9 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
       <Form<ForgotPasswordFormTypes>
         layout="vertical"
         form={form}
-        onFinish={(values) => forgotPassword(values)}
+        onFinish={(values) =>
+          forgotPassword({ ...values, ...mutationVariables })
+        }
         requiredMark={false}
         {...formProps}
       >

package/src/components/pages/auth/components/login/index.tsx

@@ -50,6 +50,7 @@ export const LoginPage: React.FC<LoginProps> = ({
   formProps,
   title,
   hideForm,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<LoginFormTypes>();
@@ -111,6 +112,7 @@ export const LoginPage: React.FC<LoginProps> = ({
                 }}
                 onClick={() =>
                   login({
+                    ...mutationVariables,
                     providerName: provider.name,
                   })
                 }
@@ -152,7 +154,7 @@ export const LoginPage: React.FC<LoginProps> = ({
         <Form<LoginFormTypes>
           layout="vertical"
           form={form}
-          onFinish={(values) => login(values)}
+          onFinish={(values) => login({ ...values, ...mutationVariables })}
           requiredMark={false}
           initialValues={{
             remember: false,

package/src/components/pages/auth/components/register/index.tsx

@@ -47,6 +47,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
   formProps,
   title,
   hideForm,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<RegisterFormTypes>();
@@ -108,6 +109,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                 }}
                 onClick={() =>
                   register({
+                    ...mutationVariables,
                     providerName: provider.name,
                   })
                 }
@@ -152,7 +154,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
         <Form<RegisterFormTypes>
           layout="vertical"
           form={form}
-          onFinish={(values) => register(values)}
+          onFinish={(values) => register({ ...mutationVariables, ...values })}
           requiredMark={false}
           {...formProps}
         >

package/src/components/pages/auth/components/updatePassword/index.tsx

@@ -46,6 +46,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
   renderContent,
   formProps,
   title,
+  mutationVariables,
 }) => {
   const { token } = theme.useToken();
   const [form] = Form.useForm<UpdatePasswordFormTypes>();
@@ -96,7 +97,9 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
       <Form<UpdatePasswordFormTypes>
         layout="vertical"
         form={form}
-        onFinish={(values) => updatePassword(values)}
+        onFinish={(values) =>
+          updatePassword({ ...values, ...mutationVariables })
+        }
         requiredMark={false}
         {...formProps}
       >

package/src/components/pages/error/index.tsx

@@ -52,7 +52,6 @@ export const ErrorComponent: React.FC<RefineErrorPageProps> = () => {
             </Typography.Text>
             {errorMessage && (
               <Tooltip title={errorMessage}>
-                {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
                 <InfoCircleOutlined data-testid="error-component-tooltip" />
               </Tooltip>
             )}

package/src/components/pages/ready/index.tsx

@@ -62,7 +62,6 @@ export const ReadyPage: React.FC<RefineReadyPageProps> = () => {
           style={{ marginTop: "70px", justifyContent: "center" }}
         >
           <a href="https://refine.dev" target="_blank" rel="noreferrer">
-            {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <Button size="large" icon={<ReadOutlined />}>
               Documentation
             </Button>
@@ -72,13 +71,11 @@ export const ReadyPage: React.FC<RefineReadyPageProps> = () => {
             target="_blank"
             rel="noreferrer"
           >
-            {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <Button size="large" icon={<FolderOutlined />}>
               Examples
             </Button>
           </a>
           <a href="https://discord.gg/refine" target="_blank" rel="noreferrer">
-            {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
             <Button size="large" icon={<TeamOutlined />}>
               Community
             </Button>

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

@@ -94,7 +94,6 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
       <div style={{ marginBottom: 15 }}>{childrenWithProps}</div>
       <Space>
         <Button type="primary" size="small" onClick={() => onFilter()}>
-          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <FilterOutlined /> {translate("buttons.filter", "Filter")}
         </Button>
         <Button danger size="small" onClick={() => clearFilter()}>

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

@@ -88,7 +88,6 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           >
             <Menu.SubMenu
               key={item.key}
-              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
               icon={icon ?? <UnorderedListOutlined />}
               title={label}
             >
@@ -114,7 +113,6 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
         >
           <Menu.Item
             key={item.key}
-            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
           >
             <Link to={route ?? ""}>{label}</Link>
@@ -149,7 +147,6 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     <Menu.Item
       key="logout"
       onClick={() => handleLogout()}
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<LogoutOutlined />}
     >
       {translate("buttons.logout", "Logout")}
@@ -157,7 +154,6 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
   );
 
   const dashboard = hasDashboard ? (
-    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
       <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
       {!collapsed && selectedKey === "/" && (
@@ -254,7 +250,6 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           style={drawerButtonStyles}
           size="large"
           onClick={() => setDrawerOpen(true)}
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<BarsOutlined />}
         />
       </>
@@ -287,14 +282,12 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
           }}
         >
           {collapsed ? (
-            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             <RightOutlined
               style={{
                 color: token.colorPrimary,
               }}
             />
           ) : (
-            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             <LeftOutlined
               style={{
                 color: token.colorPrimary,

package/src/components/themedLayoutV2/index.tsx

@@ -14,6 +14,7 @@ export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
   Footer,
   OffLayoutArea,
   initialSiderCollapsed,
+  onSiderCollapsed,
 }) => {
   const breakpoint = Grid.useBreakpoint();
   const SiderToRender = Sider ?? DefaultSider;
@@ -22,7 +23,10 @@ export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
   const hasSider = !!SiderToRender({ Title });
 
   return (
-    <ThemedLayoutContextProvider initialSiderCollapsed={initialSiderCollapsed}>
+    <ThemedLayoutContextProvider
+      initialSiderCollapsed={initialSiderCollapsed}
+      onSiderCollapsed={onSiderCollapsed}
+    >
       <AntdLayout style={{ minHeight: "100vh" }} hasSider={hasSider}>
         <SiderToRender Title={Title} />
         <AntdLayout>