From 1f613e37e37f08b61d5f7af37659afe28e384f04 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Thu, 1 Feb 2024 08:30:20 -0500
Subject: [PATCH] Fix #5868: TieredMenu respect menuitem className (#5869)

---
 components/lib/tieredmenu/TieredMenuBase.js | 2 +-
 components/lib/tieredmenu/TieredMenuSub.js  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/lib/tieredmenu/TieredMenuBase.js b/components/lib/tieredmenu/TieredMenuBase.js
index 172d14fffb..0084886dbd 100644
--- a/components/lib/tieredmenu/TieredMenuBase.js
+++ b/components/lib/tieredmenu/TieredMenuBase.js
@@ -19,7 +19,7 @@ const classes = {
     label: 'p-menuitem-text',
     submenuIcon: 'p-submenu-icon',
     action: 'p-menuitem-link',
-    menuitem: ({ _className, active, focused, disabled }) => classNames('p-menuitem', { 'p-menuitem-active p-highlight': active, 'p-focus': focused, 'p-disabled': disabled }, _className),
+    menuitem: ({ itemClassName, active, focused, disabled }) => classNames('p-menuitem', { 'p-menuitem-active p-highlight': active, 'p-focus': focused, 'p-disabled': disabled }, itemClassName),
     menu: 'p-tieredmenu-root-list',
     submenu: 'p-submenu-list',
     transition: 'p-connected-overlay'
diff --git a/components/lib/tieredmenu/TieredMenuSub.js b/components/lib/tieredmenu/TieredMenuSub.js
index 36f7c33f9d..a7345669d4 100644
--- a/components/lib/tieredmenu/TieredMenuSub.js
+++ b/components/lib/tieredmenu/TieredMenuSub.js
@@ -163,6 +163,7 @@ export const TieredMenuSub = React.memo(
 
             const item = processedItem.item;
             const style = getItemProp(processedItem, 'style');
+            const itemClassName = getItemProp(processedItem, 'className');
             const _icon = getItemProp(processedItem, 'icon');
             const target = getItemProp(processedItem, 'target');
             const url = getItemProp(processedItem, 'url');
@@ -255,7 +256,7 @@ export const TieredMenuSub = React.memo(
                     'data-p-highlight': active,
                     'data-p-disabled': disabled,
                     'data-p-visited': focused,
-                    className: cx('menuitem', { className: item.className, active, focused, disabled }),
+                    className: cx('menuitem', { itemClassName, active, focused, disabled }),
                     style: style,
                     onMouseEnter: (event) => onItemMouseEnter(event, item),
                     role: 'menuitem'