diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index fcf97a26f1..8bde6ec209 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -40995,6 +40995,14 @@ "default": "", "description": "Used to get the child elements of the component." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon used when a submenu is expanded." + }, { "name": "expandedKeys", "optional": true, @@ -41003,6 +41011,14 @@ "default": "", "description": "A map of keys to represent the expansion state in controlled mode." }, + { + "name": "expandIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon used when a submenu is collapsed." + }, { "name": "model", "optional": true, @@ -41035,14 +41051,6 @@ "default": "", "description": "Used to configure passthrough(pt) options of the component." }, - { - "name": "submenuIcon", - "optional": true, - "readonly": false, - "type": "IconType", - "default": "", - "description": "Icon of the submenu." - }, { "name": "transitionOptions", "optional": true, @@ -41175,11 +41183,18 @@ "description": "Uses to pass attributes to the header content's DOM element." }, { - "name": "submenuIcon", + "name": "expandIcon", + "optional": true, + "readonly": false, + "type": "PanelMenuPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the expand icon's DOM element." + }, + { + "name": "collapseIcon", "optional": true, "readonly": false, "type": "PanelMenuPassThroughType | SVGProps>", - "description": "Uses to pass attributes to the submenuIcon's DOM element." + "description": "Uses to pass attributes to the collapse icon's DOM element." }, { "name": "headerIcon", diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index d497fc6419..f393af6322 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -272,6 +272,7 @@ export const PanelMenu = React.memo( const key = item.id || idState + '_' + index; const active = isItemActive(item); + const iconClassName = classNames('p-menuitem-icon', item.icon); const headerIconProps = mergeProps( { @@ -279,7 +280,9 @@ export const PanelMenu = React.memo( }, getPTOptions(item, 'headerIcon', index) ); + const icon = IconUtils.getJSXIcon(item.icon, { ...headerIconProps }, { props }); + const submenuIconClassName = 'p-panelmenu-icon'; const headerSubmenuIconProps = mergeProps( { @@ -287,7 +290,13 @@ export const PanelMenu = React.memo( }, getPTOptions(item, 'headerSubmenuIcon', index) ); - const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || : props.submenuIcon || ); + + const submenuIcon = item.items && IconUtils.getJSXIcon( + active + ? (props.collapseIcon || ) + : (props.expandIcon || ) + ); + const headerLabelProps = mergeProps( { className: cx('headerLabel') diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js index 4ea25c7ecb..feb5ca99b7 100644 --- a/components/lib/panelmenu/PanelMenuBase.js +++ b/components/lib/panelmenu/PanelMenuBase.js @@ -75,7 +75,6 @@ export const PanelMenuBase = ComponentBase.extend({ id: null, model: null, style: null, - submenuIcon: null, expandedKeys: null, className: null, onExpandedKeysChange: null, @@ -83,6 +82,8 @@ export const PanelMenuBase = ComponentBase.extend({ onClose: null, multiple: false, transitionOptions: null, + expandIcon: null, + collapseIcon: null, children: undefined }, css: { diff --git a/components/lib/panelmenu/PanelMenuList.js b/components/lib/panelmenu/PanelMenuList.js index 53c9c3122b..eb92fdd904 100644 --- a/components/lib/panelmenu/PanelMenuList.js +++ b/components/lib/panelmenu/PanelMenuList.js @@ -429,7 +429,8 @@ export const PanelMenuList = React.memo((props) => { onItemToggle={onItemToggle} level={0} className={cx('submenu')} - submenuIcon={props.submenuIcon} + expandIcon={props.expandIcon} + collapseIcon={props.collapseIcon} root ptm={ptm} cx={cx} diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js index 82e3b0b80c..ad6036dc85 100644 --- a/components/lib/panelmenu/PanelMenuSub.js +++ b/components/lib/panelmenu/PanelMenuSub.js @@ -137,7 +137,8 @@ export const PanelMenuSub = React.memo( onItemToggle={onItemToggle} menuProps={props.menuProps} model={processedItem.items} - submenuIcon={props.submenuIcon} + expandIcon={props.expandIcon} + collapseIcon={props.collapseIcon} ptm={ptm} cx={cx} /> @@ -183,7 +184,13 @@ export const PanelMenuSub = React.memo( }, getPTOptions(processedItem, 'submenuicon', index) ); - const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || : props.submenuIcon || ); + + const submenuIcon = item.items && IconUtils.getJSXIcon( + active + ? (props.collapseIcon || ) + : (props.expandIcon || ) + ); + const submenu = createSubmenu(processedItem, active); const actionProps = mergeProps( { diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts index fce7e95600..2cc4b195de 100644 --- a/components/lib/panelmenu/panelmenu.d.ts +++ b/components/lib/panelmenu/panelmenu.d.ts @@ -53,9 +53,13 @@ export interface PanelMenuPassThroughOptions { */ headerContent?: PanelMenuPassThroughType>; /** - * Uses to pass attributes to the submenuIcon's DOM element. + * Uses to pass attributes to the expand icon's DOM element. */ - submenuIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; + expandIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the collapse icon's DOM element. + */ + collapseIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the header icon's DOM element. */ @@ -179,9 +183,13 @@ export interface PanelMenuProps extends Omit | undefined; + /** + * Icon used when a submenu is expanded. */ - submenuIcon?: IconType | undefined; + collapseIcon?: IconType | undefined; /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. */