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
{/* ... */}
; +}; +``` + +[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 & { + 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