From a0f2d7bbef3093e11c3024bb7fa2a0ffc3ce9e10 Mon Sep 17 00:00:00 2001
From: Alican Erdurmaz <alicanerdurmaz@gmail.com>
Date: Mon, 23 Sep 2024 14:58:27 +0300
Subject: [PATCH] fix(core): `label` and `route` fields of  `useMenu.menuItems`
 shouldn't be deprecated (#6353) (resolves #6352)

---
 .changeset/fifty-moons-flash.md          | 25 ++++++++++++++++++++++++
 packages/core/src/hooks/menu/useMenu.tsx | 18 ++++++++++-------
 2 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fifty-moons-flash.md

diff --git a/.changeset/fifty-moons-flash.md b/.changeset/fifty-moons-flash.md
new file mode 100644
index 000000000000..fd3696bf6ee7
--- /dev/null
+++ b/.changeset/fifty-moons-flash.md
@@ -0,0 +1,25 @@
+---
+"@refinedev/core": patch
+---
+
+fix: The `label` and `route` fields in `useMenu().menuItems` were marked as deprecated, but they are not actually deprecated. This issue was caused by `menuItems` extending from `IResourceItem`, however, `menuItems` populates these fields and handles deprecation of these fields internally. This change removes the deprecation warning for these fields.
+
+```tsx
+export const Sider = () => {
+  const { menuItems } = useMenu();
+  menuItems.map((item) => {
+    // these are safe to use
+    console.log(item.label);
+    console.log(item.route);
+    item.children.map((child) => {
+      // these are safe to use
+      console.log(child.label);
+      console.log(child.route);
+    });
+  });
+
+  return <div>{/* ... */}</div>;
+};
+```
+
+[Fixes #6352](https://github.com/refinedev/refine/issues/6352)
diff --git a/packages/core/src/hooks/menu/useMenu.tsx b/packages/core/src/hooks/menu/useMenu.tsx
index 4e0c79c8959a..36bf16d9b1af 100644
--- a/packages/core/src/hooks/menu/useMenu.tsx
+++ b/packages/core/src/hooks/menu/useMenu.tsx
@@ -23,12 +23,14 @@ export type UseMenuProps = {
   hideOnMissingParameter?: boolean;
 };
 
-export type TreeMenuItem = FlatTreeItem & {
-  route?: string;
-  icon?: React.ReactNode;
-  label?: string;
-  children: TreeMenuItem[];
-};
+export type TreeMenuItem =
+  // Omitted because `label` and `route` are deprecated in `resource` but not in `menuItems`. These are populated in `prepareItem` for ease of use.
+  Omit<FlatTreeItem, "label" | "route" | "children"> & {
+    route?: string;
+    icon?: React.ReactNode;
+    label?: string;
+    children: TreeMenuItem[];
+  };
 
 const getCleanPath = (pathname: string) => {
   return pathname
@@ -86,7 +88,9 @@ export const useMenu = (
 
   const prepareItem = React.useCallback(
     (item: FlatTreeItem): TreeMenuItem | undefined => {
-      if (item?.meta?.hide ?? item?.options?.hide) return undefined;
+      if (pickNotDeprecated(item?.meta?.hide, item?.options?.hide)) {
+        return undefined;
+      }
       if (!item?.list && item.children.length === 0) return undefined;
 
       const composed = item.list