From f0c5e572f7fdf9dbbb088ae8fcc1587c43563ea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Sat, 2 Sep 2023 15:00:22 +0300
Subject: [PATCH] Related #4391, #4602 - For Menu components

---
 components/doc/menu/templatedoc.js           |   6 +-
 components/lib/dock/Dock.js                  |   6 +-
 components/lib/dock/DockBase.js              |  10 +-
 components/lib/megamenu/MegaMenu.js          | 106 +++++++++----------
 components/lib/megamenu/MegaMenuBase.js      |  49 ++++++---
 components/lib/megamenu/megamenu.d.ts        |   8 ++
 components/lib/menu/Menu.js                  |  18 ++--
 components/lib/menu/MenuBase.js              |  26 ++---
 components/lib/menubar/Menubar.js            |   4 +-
 components/lib/menubar/MenubarBase.js        |  21 ++--
 components/lib/menubar/MenubarSub.js         |  16 +--
 components/lib/messages/messages.d.ts        |   5 +
 components/lib/panelmenu/PanelMenu.js        |  20 ++--
 components/lib/panelmenu/PanelMenuBase.js    |   4 +-
 components/lib/panelmenu/PanelMenuSub.js     |   9 +-
 components/lib/passthrough/tailwind/index.js |  72 ++++++-------
 16 files changed, 197 insertions(+), 183 deletions(-)

diff --git a/components/doc/menu/templatedoc.js b/components/doc/menu/templatedoc.js
index f1015b745e..e33c54647d 100644
--- a/components/doc/menu/templatedoc.js
+++ b/components/doc/menu/templatedoc.js
@@ -18,7 +18,7 @@ export function TemplateDoc(props) {
             },
             template: (item, options) => {
                 return (
-                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center')}>
+                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround')}>
                         <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" shape="circle" />
                         <div className="flex flex-column align">
                             <span className="font-bold">Amy Elsner</span>
@@ -50,7 +50,7 @@ export default function TemplateDemo() {
             command: () => { toast.current.show({ severity: 'info', summary: 'Info', detail: 'Item Selected', life: 3000 }); },
             template: (item, options) => {
                 return (
-                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center')}>
+                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround')}>
                         <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" shape="circle" />
                         <div className="flex flex-column align">
                             <span className="font-bold">Amy Elsner</span>
@@ -86,7 +86,7 @@ export default function TemplateDemo() {
             command: () => { toast.current.show({ severity: 'info', summary: 'Info', detail: 'Item Selected', life: 3000 }); },
             template: (item, options) => {
                 return (
-                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center')}>
+                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround')}>
                         <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" shape="circle" />
                         <div className="flex flex-column align">
                             <span className="font-bold">Amy Elsner</span>
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index 80d568b4e2..0cf847ab04 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -165,9 +165,7 @@ export const Dock = React.memo(
         const footer = createFooter();
         const rootProps = mergeProps(
             {
-                id: props.id,
-                ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             DockBase.getOtherProps(props),
@@ -182,7 +180,7 @@ export const Dock = React.memo(
         );
 
         return (
-            <div {...rootProps}>
+            <div id={props.id} ref={elementRef} {...rootProps}>
                 <div {...containerProps}>
                     {header}
                     {list}
diff --git a/components/lib/dock/DockBase.js b/components/lib/dock/DockBase.js
index f97bc4a8a3..3cc0e3054f 100644
--- a/components/lib/dock/DockBase.js
+++ b/components/lib/dock/DockBase.js
@@ -16,13 +16,9 @@ const classes = {
     menu: 'p-dock-list',
     footer: 'p-dock-footer',
     root: ({ props }) =>
-        classNames(
-            `p-dock p-component p-dock-${props.position}`,
-            {
-                'p-dock-magnification': props.magnification
-            },
-            props.className
-        ),
+        classNames(`p-dock p-component p-dock-${props.position}`, {
+            'p-dock-magnification': props.magnification
+        }),
     container: 'p-dock-container'
 };
 
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index 1e478f58e2..f0f2152834 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -35,10 +35,12 @@ export const MegaMenu = React.memo(
 
         useHandleStyle(MegaMenuBase.css.styles, isUnstyled, { name: 'megamenu' });
 
-        const getPTOptions = (item, key) => {
+        const getPTOptions = (item, key, index) => {
             return ptm(key, {
                 context: {
-                    active: activeItemState === item
+                    active: activeItemState === item,
+                    item,
+                    index
                 }
             });
         };
@@ -174,13 +176,13 @@ export const MegaMenu = React.memo(
         const findNextItem = (item) => {
             const nextItem = item.nextElementSibling;
 
-            return nextItem ? (DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem) : null;
+            return nextItem ? (DomHandler.getAttribute(nextItem, '[data-p-disabled="true"]') || !DomHandler.getAttribute(nextItem, '[data-pc-section="menuitem"]') ? findNextItem(nextItem) : nextItem) : null;
         };
 
         const findPrevItem = (item) => {
             const prevItem = item.previousElementSibling;
 
-            return prevItem ? (DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem) : null;
+            return prevItem ? (DomHandler.getAttribute(prevItem, '[data-p-disabled="true"]') || !DomHandler.getAttribute(prevItem, '[data-pc-section="menuitem"]') ? findPrevItem(prevItem) : prevItem) : null;
         };
 
         const navigateToNextItem = (listItem) => {
@@ -199,35 +201,6 @@ export const MegaMenu = React.memo(
             return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target) || (menuButtonRef.current && menuButtonRef.current.contains(event.target)));
         };
 
-        const getColumnClassName = (category) => {
-            const length = category.items ? category.items.length : 0;
-            let columnClass;
-
-            switch (length) {
-                case 2:
-                    columnClass = 'p-megamenu-col-6';
-                    break;
-
-                case 3:
-                    columnClass = 'p-megamenu-col-4';
-                    break;
-
-                case 4:
-                    columnClass = 'p-megamenu-col-3';
-                    break;
-
-                case 6:
-                    columnClass = 'p-megamenu-col-2';
-                    break;
-
-                default:
-                    columnClass = 'p-megamenu-col-12';
-                    break;
-            }
-
-            return columnClass;
-        };
-
         React.useImperativeHandle(ref, () => ({
             props,
             getElement: () => elementRef.current
@@ -264,7 +237,7 @@ export const MegaMenu = React.memo(
             const separatorProps = mergeProps(
                 {
                     key,
-                    className: cx('separatorProps'),
+                    className: cx('separator'),
                     role: 'separator'
                 },
                 ptm('separator')
@@ -301,9 +274,21 @@ export const MegaMenu = React.memo(
             } else {
                 const key = item.label + '_' + index;
                 const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
+                const iconProps = mergeProps(
+                    {
+                        className: classNames(item.icon, cx('icon'))
+                    },
+                    ptm('icon')
+                );
+                const labelProps = mergeProps(
+                    {
+                        className: cx('label')
+                    },
+                    ptm('label')
+                );
                 const iconClassName = classNames(item.icon, 'p-menuitem-icon');
-                const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props });
-                const label = item.label && <span className="p-menuitem-text">{item.label}</span>;
+                const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
+                const label = item.label && <span {...labelProps}>{item.label}</span>;
 
                 const actionProps = mergeProps(
                     {
@@ -314,7 +299,7 @@ export const MegaMenu = React.memo(
                         role: 'menuitem',
                         'aria-disabled': item.disabled
                     },
-                    getPTOptions(item, 'action')
+                    getPTOptions(item, 'action', index)
                 );
 
                 const submenuItemProps = mergeProps(
@@ -325,7 +310,7 @@ export const MegaMenu = React.memo(
                         style: item.style,
                         role: 'none'
                     },
-                    getPTOptions(item, 'submenuItem')
+                    getPTOptions(item, 'submenuItem', index)
                 );
 
                 let content = (
@@ -382,14 +367,14 @@ export const MegaMenu = React.memo(
             return column.map(createSubmenu);
         };
 
-        const createColumn = (category, column, index, columnClassName) => {
+        const createColumn = (category, column, index) => {
             const key = category.label + '_column_' + index;
             const submenus = createSubmenus(column);
 
             const columnProps = mergeProps(
                 {
                     key: key,
-                    className: columnClassName
+                    className: cx('column', { category })
                 },
                 ptm('column')
             );
@@ -397,6 +382,7 @@ export const MegaMenu = React.memo(
             const submenuProps = mergeProps(
                 {
                     className: cx('submenu'),
+                    style: { display: activeItemState === category ? 'block' : 'none' },
                     role: 'menu'
                 },
                 ptm('submenu')
@@ -411,10 +397,8 @@ export const MegaMenu = React.memo(
 
         const createColumns = (category) => {
             if (category.items) {
-                const columnClassName = getColumnClassName(category);
-
                 return category.items.map((column, index) => {
-                    return createColumn(category, column, index, columnClassName);
+                    return createColumn(category, column, index);
                 });
             }
 
@@ -563,7 +547,7 @@ export const MegaMenu = React.memo(
                 {
                     className: cx('icon')
                 },
-                getPTOptions(category, 'icon')
+                getPTOptions(category, 'icon', index)
             );
             const icon = IconUtils.getJSXIcon(category.icon, { ...iconProps }, { props });
 
@@ -571,7 +555,7 @@ export const MegaMenu = React.memo(
                 {
                     className: cx('label')
                 },
-                getPTOptions(category, 'label')
+                getPTOptions(category, 'label', index)
             );
             const label = category.label && <span {...labelProps}>{category.label}</span>;
             const itemContent = category.template ? ObjectUtils.getJSXElement(category.template, category) : null;
@@ -588,7 +572,7 @@ export const MegaMenu = React.memo(
                     role: 'menuitem',
                     'aria-haspopup': category.items != null
                 },
-                getPTOptions(category, 'headerAction')
+                getPTOptions(category, 'headerAction', index)
             );
 
             const menuItemProps = mergeProps(
@@ -598,9 +582,10 @@ export const MegaMenu = React.memo(
                     className: cx('menuitem', { category, activeItemState }),
                     style: category.style,
                     onMouseEnter: (e) => onCategoryMouseEnter(e, category),
-                    role: 'none'
+                    role: 'none',
+                    'data-p-disabled': category.disabled || false
                 },
-                getPTOptions(category, 'menuitem')
+                getPTOptions(category, 'menuitem', index)
             );
 
             return (
@@ -678,11 +663,24 @@ export const MegaMenu = React.memo(
                 return null;
             }
 
-            const icon = props.menuIcon || <BarsIcon />;
-            const menuIcon = IconUtils.getJSXIcon(icon, undefined, { props });
+            const menuButtonProps = mergeProps(
+                {
+                    className: cx('menuButton'),
+                    href: '#',
+                    role: 'button',
+                    tabIndex: 0,
+                    onClick: (e) => toggle(e)
+                },
+                ptm('menuButton')
+            );
+
+            const menuButtonIconProps = mergeProps(ptm('menuButtonIcon'));
+
+            const icon = props.menuIcon || <BarsIcon {...menuButtonIconProps} />;
+            const menuIcon = IconUtils.getJSXIcon(icon, { ...menuButtonIconProps }, { props });
             /* eslint-disable */
             const button = (
-                <a ref={menuButtonRef} href={'#'} role="button" tabIndex={0} className="p-megamenu-button" onClick={toggle}>
+                <a ref={menuButtonRef} {...menuButtonProps}>
                     {menuIcon}
                 </a>
             );
@@ -693,9 +691,7 @@ export const MegaMenu = React.memo(
 
         const rootProps = mergeProps(
             {
-                ref: elementRef,
-                id: props.id,
-                className: cx('root', { mobileActiveState }),
+                className: classNames(props.className, cx('root', { mobileActiveState })),
                 style: props.style
             },
             MegaMenuBase.getOtherProps(props),
@@ -708,7 +704,7 @@ export const MegaMenu = React.memo(
         const menuButton = createMenuButton();
 
         return (
-            <div {...rootProps}>
+            <div id={props.id} ref={elementRef} {...rootProps}>
                 {start}
                 {menuButton}
                 {menu}
diff --git a/components/lib/megamenu/MegaMenuBase.js b/components/lib/megamenu/MegaMenuBase.js
index 385c96e774..84df34ab6f 100644
--- a/components/lib/megamenu/MegaMenuBase.js
+++ b/components/lib/megamenu/MegaMenuBase.js
@@ -2,7 +2,13 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    separatorProps: 'p-menu-separator',
+    root: ({ props, mobileActiveState }) =>
+        classNames('p-megamenu p-component', {
+            'p-megamenu-horizontal': props.orientation === 'horizontal',
+            'p-megamenu-vertical': props.orientation === 'vertical',
+            'p-megamenu-mobile-active': mobileActiveState
+        }),
+    separator: 'p-menu-separator',
     submenuIcon: 'p-submenu-icon',
     action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
     submenuItem: ({ item }) => classNames('p-menuitem', item.className),
@@ -19,22 +25,41 @@ const classes = {
     grid: 'p-megamenu-grid',
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text',
+    column: ({ category }) => {
+        const length = category.items ? category.items.length : 0;
+        let columnClass;
+
+        switch (length) {
+            case 2:
+                columnClass = 'p-megamenu-col-6';
+                break;
+
+            case 3:
+                columnClass = 'p-megamenu-col-4';
+                break;
+
+            case 4:
+                columnClass = 'p-megamenu-col-3';
+                break;
+
+            case 6:
+                columnClass = 'p-megamenu-col-2';
+                break;
+
+            default:
+                columnClass = 'p-megamenu-col-12';
+                break;
+        }
+
+        return columnClass;
+    },
     headerAction: ({ category }) => classNames('p-menuitem-link', { 'p-disabled': category.disabled }),
+    menuButton: 'p-megamenu-button',
     menuitem: ({ category, activeItemState }) => classNames('p-menuitem', { 'p-menuitem-active': category === activeItemState }, category.className),
     menubar: 'p-megamenu-root-list',
     menu: 'p-megamenu-root-list',
     start: 'p-megamenu-start',
-    end: 'p-megamenu-end',
-    root: ({ props, mobileActiveState }) =>
-        classNames(
-            'p-megamenu p-component',
-            {
-                'p-megamenu-horizontal': props.orientation === 'horizontal',
-                'p-megamenu-vertical': props.orientation === 'vertical',
-                'p-megamenu-mobile-active': mobileActiveState
-            },
-            props.className
-        )
+    end: 'p-megamenu-end'
 };
 
 const styles = `
diff --git a/components/lib/megamenu/megamenu.d.ts b/components/lib/megamenu/megamenu.d.ts
index 44f8b71309..b754f95388 100644
--- a/components/lib/megamenu/megamenu.d.ts
+++ b/components/lib/megamenu/megamenu.d.ts
@@ -35,6 +35,14 @@ export interface MegaMenuPassThroughOptions {
      * Uses to pass attributes to the list's DOM element.
      */
     menu?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the menu button's DOM element.
+     */
+    menuButton?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the menu icon's DOM element.
+     */
+    menuButtonIcon?: MegaMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the list item's DOM element.
      */
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index a49d200d54..0f162d83dd 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -94,13 +94,13 @@ export const Menu = React.memo(
         const findNextItem = (item) => {
             const nextItem = item.nextElementSibling;
 
-            return nextItem ? (DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem) : null;
+            return nextItem ? (DomHandler.getAttribute(nextItem, '[data-p-disabled="true"]') || !DomHandler.getAttribute(nextItem, '[data-pc-section="menuitem"]') ? findNextItem(nextItem) : nextItem) : null;
         };
 
         const findPrevItem = (item) => {
             const prevItem = item.previousElementSibling;
 
-            return prevItem ? (DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem) : null;
+            return prevItem ? (DomHandler.getAttribute(prevItem, '[data-p-disabled="true"]') || !DomHandler.getAttribute(prevItem, '[data-pc-section="menuitem"]') ? findPrevItem(prevItem) : prevItem) : null;
         };
 
         const toggle = (event) => {
@@ -122,6 +122,7 @@ export const Menu = React.memo(
         };
 
         const onEnter = () => {
+            DomHandler.addStyles(menuRef.current, { position: 'absolute', top: '0', left: '0' });
             ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
             DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
         };
@@ -157,7 +158,7 @@ export const Menu = React.memo(
             const items = submenu.items.map(createMenuItem);
             const submenuHeaderProps = mergeProps(
                 {
-                    className: cx('submenuHeader', { submenu }),
+                    className: classNames(submenu.className, cx('submenuHeader', { submenu })),
                     style: sx('submenuHeader', { submenu }),
                     role: 'presentation'
                 },
@@ -248,9 +249,10 @@ export const Menu = React.memo(
             const menuitemProps = mergeProps(
                 {
                     key,
-                    className: cx('menuitem', { item }),
+                    className: classNames(item.className, cx('menuitem')),
                     style: sx('menuitem', { item }),
-                    role: 'none'
+                    role: 'none',
+                    'data-p-disabled': item.disabled || false
                 },
                 ptm('menuitem')
             );
@@ -271,9 +273,7 @@ export const Menu = React.memo(
                 const menuitems = createMenu();
                 const rootProps = mergeProps(
                     {
-                        ref: menuRef,
-                        id: props.id,
-                        className: cx('root', { context }),
+                        className: classNames(props.className, cx('root', { context })),
                         style: props.style,
                         onClick: (e) => onPanelClick(e)
                     },
@@ -302,7 +302,7 @@ export const Menu = React.memo(
                         onExit={onExit}
                         onExited={onExited}
                     >
-                        <div {...rootProps}>
+                        <div id={props.id} ref={menuRef} {...rootProps}>
                             <ul {...menuProps}>{menuitems}</ul>
                         </div>
                     </CSSTransition>
diff --git a/components/lib/menu/MenuBase.js b/components/lib/menu/MenuBase.js
index f8b5404474..32c311351c 100644
--- a/components/lib/menu/MenuBase.js
+++ b/components/lib/menu/MenuBase.js
@@ -32,26 +32,18 @@ const styles = `
 
 const classes = {
     root: ({ props, context }) =>
-        classNames(
-            'p-menu p-component',
-            {
-                'p-menu-overlay': props.popup,
-                'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
-                'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
-            },
-            props.className
-        ),
+        classNames('p-menu p-component', {
+            'p-menu-overlay': props.popup,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
     menu: 'p-menu-list p-reset',
     action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
-    menuitem: ({ item }) => classNames('p-menuitem', item.className),
+    menuitem: 'p-menuitem',
     submenuHeader: ({ submenu }) =>
-        classNames(
-            'p-submenu-header',
-            {
-                'p-disabled': submenu.disabled
-            },
-            submenu.className
-        ),
+        classNames('p-submenu-header', {
+            'p-disabled': submenu.disabled
+        }),
     separator: 'p-menu-separator',
     label: 'p-menuitem-text',
     icon: 'p-menuitem-icon'
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index 0287ffea8b..ea7e5f7ae7 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -3,7 +3,7 @@ import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useEventListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { BarsIcon } from '../icons/bars';
-import { IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
+import { IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { MenubarBase } from './MenubarBase';
 import { MenubarSub } from './MenubarSub';
 
@@ -136,7 +136,7 @@ export const Menubar = React.memo(
         const rootProps = mergeProps(
             {
                 id: props.id,
-                className: cx('root', { mobileActiveState }),
+                className: classNames(props.className, cx('root', { mobileActiveState })),
                 style: props.style
             },
             MenubarBase.getOtherProps(props),
diff --git a/components/lib/menubar/MenubarBase.js b/components/lib/menubar/MenubarBase.js
index 62f17a21b6..f2ea931df6 100644
--- a/components/lib/menubar/MenubarBase.js
+++ b/components/lib/menubar/MenubarBase.js
@@ -5,24 +5,17 @@ const classes = {
     start: 'p-menubar-start',
     end: 'p-menubar-end',
     button: 'p-menubar-button',
-    root: ({ props, mobileActiveState }) =>
-        classNames(
-            'p-menubar p-component',
-            {
-                'p-menubar-mobile-active': mobileActiveState
-            },
-            props.className
-        ),
+    root: ({ mobileActiveState }) =>
+        classNames('p-menubar p-component', {
+            'p-menubar-mobile-active': mobileActiveState
+        }),
     separator: 'p-menu-separator',
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text',
     submenuIcon: 'p-submenu-icon',
-    menuitem: ({ item, activeItemState }) => classNames('p-menuitem', { 'p-menuitem-active': activeItemState === item }, item.className),
-    menu: ({ subProps: props }) =>
-        classNames({
-            'p-submenu-list': !props.root,
-            'p-menubar-root-list': props.root
-        }),
+    menuitem: ({ item, activeItemState }) => classNames('p-menuitem', { 'p-menuitem-active': activeItemState === item }),
+    menu: 'p-menubar-root-list',
+    submenu: 'p-submenu-list',
     action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled })
 };
 
diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
index aa526f25ee..0c5552368b 100644
--- a/components/lib/menubar/MenubarSub.js
+++ b/components/lib/menubar/MenubarSub.js
@@ -151,13 +151,13 @@ export const MenubarSub = React.memo(
         const findNextItem = (item) => {
             const nextItem = item.nextElementSibling;
 
-            return nextItem ? (DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem) : null;
+            return nextItem ? (DomHandler.getAttribute(nextItem, '[data-p-disabled="true"]') || !DomHandler.getAttribute(nextItem, '[data-pc-section="menuitem"]') ? findNextItem(nextItem) : nextItem) : null;
         };
 
         const findPrevItem = (item) => {
             const prevItem = item.previousElementSibling;
 
-            return prevItem ? (DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem) : null;
+            return prevItem ? (DomHandler.getAttribute(prevItem, '[data-p-disabled="true"]') || !DomHandler.getAttribute(prevItem, '[data-pc-section="menuitem"]') ? findPrevItem(prevItem) : prevItem) : null;
         };
 
         const onLeafClick = () => {
@@ -286,9 +286,9 @@ export const MenubarSub = React.memo(
                     key,
                     role: 'none',
                     id: item.id,
-                    className: cx('menuitem', { item, activeItemState }),
-                    style: item.style,
-                    onMouseEnter: (event) => onItemMouseEnter(event, item)
+                    className: classNames(item.className, cx('menuitem', { item, activeItemState })),
+                    onMouseEnter: (event) => onItemMouseEnter(event, item),
+                    'data-p-disabled': item.disabled || false
                 },
                 getPTOptions(item, 'menuitem')
             );
@@ -310,14 +310,16 @@ export const MenubarSub = React.memo(
         };
 
         const role = props.root ? 'menubar' : 'menu';
+        const ptKey = props.root ? 'menu' : 'submenu';
         const submenu = createMenu();
         const menuProps = mergeProps(
             {
                 ref,
-                className: cx('menu', { subProps: props }),
+                className: cx(ptKey),
+                style: !props.root && { display: props.parentActive ? 'block' : 'none' },
                 role
             },
-            ptm('menu')
+            ptm(ptKey)
         );
 
         return <ul {...menuProps}>{submenu}</ul>;
diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts
index 54de80ce8e..fca906f289 100644
--- a/components/lib/messages/messages.d.ts
+++ b/components/lib/messages/messages.d.ts
@@ -135,6 +135,11 @@ export interface MessagesProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MessagesPassThroughOptions}
+     */
+    pt?: MessagesPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 94121d64a6..192f9e651c 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -212,24 +212,22 @@ export const PanelMenu = React.memo(
                 getPTOptions(item, 'menuContent')
             );
 
-            const headerToggleableContentProps = mergeProps(
+            const toggleableContentProps = mergeProps(
                 {
-                    ref: menuContentRef,
-                    className: cx('headerToggleableContent', { active }),
+                    className: cx('toggleableContent', { active }),
                     role: 'region',
-                    id: contentId,
                     'aria-labelledby': headerId
                 },
-                getPTOptions(item, 'headerToggleableContent')
+                getPTOptions(item, 'toggleableContent')
             );
 
             return (
                 <div {...panelProps}>
                     <div {...headerProps}>{content}</div>
                     <CSSTransition nodeRef={menuContentRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} onEnter={onEnter} disabled={animationDisabled} in={active} unmountOnExit options={props.transitionOptions}>
-                        <div {...headerToggleableContentProps}>
+                        <div id={contentId} ref={menuContentRef} {...toggleableContentProps}>
                             <div {...menuContentProps}>
-                                <PanelMenuSub menuProps={props} model={item.items} className="p-panelmenu-root-submenu" multiple={props.multiple} submenuIcon={props.submenuIcon} ptm={ptm} cx={cx} />
+                                <PanelMenuSub menuProps={props} model={item.items} className="p-panelmenu-root-submenu" multiple={props.multiple} submenuIcon={props.submenuIcon} root ptm={ptm} cx={cx} />
                             </div>
                         </div>
                     </CSSTransition>
@@ -244,8 +242,6 @@ export const PanelMenu = React.memo(
         const panels = createPanels();
         const rootProps = mergeProps(
             {
-                id: props.id,
-                ref: elementRef,
                 className: cx('root'),
                 style: props.style
             },
@@ -253,7 +249,11 @@ export const PanelMenu = React.memo(
             ptm('root')
         );
 
-        return <div {...rootProps}>{panels}</div>;
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {panels}
+            </div>
+        );
     })
 );
 
diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
index 32e6389f98..c06d0459bc 100644
--- a/components/lib/panelmenu/PanelMenuBase.js
+++ b/components/lib/panelmenu/PanelMenuBase.js
@@ -9,7 +9,6 @@ const classes = {
     panel: ({ item }) => classNames('p-panelmenu-panel', item.className),
     header: ({ active, item }) => classNames('p-component p-panelmenu-header', { 'p-highlight': active, 'p-disabled': item.disabled }),
     menuContent: 'p-panelmenu-content',
-    headerToggleableContent: ({ active }) => classNames('p-toggleable-content', { 'p-toggleable-content-collapsed': !active }),
     root: ({ props }) => classNames('p-panelmenu p-component', props.className),
     separator: 'p-menu-separator',
     toggleableContent: ({ active }) =>
@@ -21,7 +20,8 @@ const classes = {
     submenuicon: 'p-panelmenu-icon',
     action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
     menuitem: ({ item }) => classNames('p-menuitem', item.className),
-    menu: ({ subProps: props }) => classNames('p-submenu-list', props.className)
+    menu: 'p-submenu-list',
+    submenu: 'p-submenu-list'
 };
 
 const styles = `
diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
index 8c6ddd0d10..ad32fece2a 100644
--- a/components/lib/panelmenu/PanelMenuSub.js
+++ b/components/lib/panelmenu/PanelMenuSub.js
@@ -99,7 +99,6 @@ export const PanelMenuSub = React.memo((props) => {
 
         const toggleableContentProps = mergeProps(
             {
-                ref: submenuRef,
                 className: cx('toggleableContent', { active })
             },
             ptm('toggleableContent')
@@ -108,7 +107,7 @@ export const PanelMenuSub = React.memo((props) => {
         if (item.items) {
             return (
                 <CSSTransition nodeRef={submenuRef} classNames="p-toggleable-content" timeout={{ enter: 1000, exit: 450 }} in={active} unmountOnExit>
-                    <div {...toggleableContentProps}>
+                    <div ref={submenuRef} {...toggleableContentProps}>
                         <PanelMenuSub menuProps={props.menuProps} model={item.items} multiple={props.multiple} submenuIcon={props.submenuIcon} ptm={ptm} cx={cx} />
                     </div>
                 </CSSTransition>
@@ -125,7 +124,6 @@ export const PanelMenuSub = React.memo((props) => {
 
         const key = item.label + '_' + index;
         const active = isItemActive(item);
-        const className = classNames('p-menuitem', item.className);
         const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
         const iconClassName = classNames('p-menuitem-icon', item.icon);
         const iconProps = mergeProps(
@@ -216,12 +214,13 @@ export const PanelMenuSub = React.memo((props) => {
 
     const menu = createMenu();
 
+    const ptKey = props.root ? 'menu' : 'submenu';
     const menuProps = mergeProps(
         {
-            className: cx('menu', { subProps: props }),
+            className: classNames(cx(ptKey), props.className),
             role: 'tree'
         },
-        ptm('menu')
+        ptm(ptKey)
     );
 
     return <ul {...menuProps}>{menu}</ul>;
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 360570f4bb..a3358cd485 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -1750,7 +1750,7 @@ const Tailwind = {
         root: {
             className: classNames('p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative')
         },
-        menu: ({ props }) => ({
+        menu: ({ state }) => ({
             className: classNames(
                 'm-0 sm:p-0 list-none',
                 'outline-none',
@@ -1758,22 +1758,19 @@ const Tailwind = {
                 'flex-col top-full left-0',
                 'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
                 {
-                    'hidden ': !props?.mobileActive,
-                    'flex ': props?.mobileActive
+                    'hidden ': !state?.mobileActive,
+                    'flex ': state?.mobileActive
                 }
             )
         }),
-        menuitem: 'sm:relative sm:w-auto w-full static',
-        content: ({ props, context }) => ({
+        menuitem: ({ props, context }) => ({
             className: classNames(
-                ' transition-shadow duration-200',
-                '',
+                'sm:relative sm:w-auto w-full static',
+                'transition-shadow duration-200',
                 { 'rounded-md': props.root },
                 {
-                    'text-gray-700 dark:text-white/80': !context.focused && !context.active,
-                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
-                    'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
-                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                    'text-gray-700 dark:text-white/80': !context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.active
                 },
                 {
                     'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
@@ -1796,7 +1793,7 @@ const Tailwind = {
         }),
         submenu: ({ props }) => ({
             className: classNames('py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', {
-                'sm:absolute sm:left-full sm:top-0': props.level > 1
+                'sm:absolute sm:left-full sm:top-0': !props.root
             })
         }),
         separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
@@ -1819,21 +1816,17 @@ const Tailwind = {
         menu: {
             className: classNames('m-0 sm:p-0 list-none relative', 'outline-none', 'flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto')
         },
-        menuitem: ({ props }) => ({
-            className: classNames('relative', {
-                'w-auto': props.horizontal,
-                'w-full': !props.horizontal
-            })
-        }),
-        content: ({ props, context }) => ({
+        menuitem: ({ props, context }) => ({
             className: classNames(
                 'transition-shadow duration-200',
-                { 'rounded-md': props.level < 1 && props.horizontal },
+                { 'rounded-md': props.orientation == 'horizontal' },
                 {
-                    'text-gray-700 dark:text-white/80': !context.focused && !context.active,
-                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
-                    'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
-                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                    'text-gray-700 dark:text-white/80': !context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.active
+                },
+                {
+                    'w-auto': props.orientation === 'horizontal',
+                    'w-full': props.orientation !== 'horizontal'
                 },
                 {
                     'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
@@ -1841,6 +1834,9 @@ const Tailwind = {
                 }
             )
         }),
+        headeraction: {
+            className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
+        },
         action: {
             className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
         },
@@ -1849,13 +1845,13 @@ const Tailwind = {
         },
         submenuicon: ({ props }) => ({
             className: classNames({
-                'ml-2': props.horizontal,
-                'ml-auto': !props.horizontal
+                'ml-2': props.orientation === 'horizontal',
+                'ml-auto': props.orientation !== 'horizontal'
             })
         }),
         panel: ({ props }) => ({
             className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto', 'absolute z-10', {
-                'left-full top-0': !props.horizontal
+                'left-full top-0': props.orientation !== 'horizontal'
             })
         }),
         grid: 'flex',
@@ -1891,15 +1887,19 @@ const Tailwind = {
         menu: {
             className: classNames('outline-none', 'm-0 p-0 list-none')
         },
-        content: ({ context }) => ({
-            className: classNames(
-                'text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none',
-                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80', // Hover
-                {
-                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
-                }
-            )
-        }),
+        menuitem: ({ context }) => {
+            console.log('context');
+
+            return {
+                className: classNames(
+                    'text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none',
+                    'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80', // Hover
+                    {
+                        'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
+                    }
+                )
+            };
+        },
         action: {
             className: classNames('text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden')
         },