@refinedev/antd 5.44.0 → 5.45.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.44.0",
+  "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",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
     "@ant-design/pro-layout": "^7.21.1",
-    "@refinedev/ui-types": "^1.22.9",
+    "@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.56.0",
-    "@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/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}`,

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;
         }
@@ -53,7 +56,7 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
     >
       <Button
         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;
         }
@@ -53,7 +56,7 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
     >
       <Button
         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,16 +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}
         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;
         }
@@ -53,7 +56,7 @@ export const EditButton: React.FC<EditButtonProps> = ({
     >
       <Button
         icon={<EditOutlined />}
-        disabled={disabled}
+        disabled={isDisabled}
         title={title}
         data-testid={RefineButtonTestIds.EditButton}
         className={RefineButtonClassNames.EditButton}

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;
         }
@@ -51,7 +54,7 @@ export const ListButton: React.FC<ListButtonProps> = ({
     >
       <Button
         icon={<BarsOutlined />}
-        disabled={disabled}
+        disabled={isDisabled}
         title={title}
         data-testid={RefineButtonTestIds.ListButton}
         className={RefineButtonClassNames.ListButton}

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,8 +55,8 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
       }}
     >
       <Button
+        disabled={isDisabled}
         icon={<EyeOutlined />}
-        disabled={disabled}
         title={title}
         data-testid={RefineButtonTestIds.ShowButton}
         className={RefineButtonClassNames.ShowButton}

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>

package/src/contexts/themedLayoutContext/IThemedLayoutContext.ts

@@ -3,4 +3,5 @@ export interface IThemedLayoutContext {
   setSiderCollapsed: (visible: boolean) => void;
   mobileSiderOpen: boolean;
   setMobileSiderOpen: (visible: boolean) => void;
+  onSiderCollapsed?: (collapsed: boolean) => void;
 }

package/src/contexts/themedLayoutContext/index.tsx

@@ -12,12 +12,20 @@ export const ThemedLayoutContext = React.createContext<IThemedLayoutContext>({
 export const ThemedLayoutContextProvider: React.FC<{
   children: ReactNode;
   initialSiderCollapsed?: boolean;
-}> = ({ children, initialSiderCollapsed }) => {
-  const [siderCollapsed, setSiderCollapsed] = useState(
+  onSiderCollapsed?: (collapsed: boolean) => void;
+}> = ({ children, initialSiderCollapsed, onSiderCollapsed }) => {
+  const [siderCollapsed, setSiderCollapsedState] = useState(
     initialSiderCollapsed ?? false,
   );
   const [mobileSiderOpen, setMobileSiderOpen] = useState(false);
 
+  const setSiderCollapsed = (collapsed: boolean) => {
+    setSiderCollapsedState(collapsed);
+    if (onSiderCollapsed) {
+      onSiderCollapsed(collapsed);
+    }
+  };
+
   return (
     <ThemedLayoutContext.Provider
       value={{