Fix primefaces#5379: Accordion tab header passthrough errors

Fix primefaces#5546: AccordionTab Tailwind issues
melloware · Jan 9, 2024 · a09134d · a09134d
1 parent 4c1ff39
commit a09134d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
-import { DomHandler, classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils';
-import { AccordionBase, AccordionTabBase } from './AccordionBase';
-import { ChevronRightIcon } from '../icons/chevronright';
 import { ChevronDownIcon } from '../icons/chevrondown';
-import { PrimeReactContext, ariaLabel } from '../api/Api';
-import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
+import { AccordionBase, AccordionTabBase } from './AccordionBase';
 
 export const AccordionTab = () => {};
 
@@ -47,7 +47,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
             }
         };
 
-        return mergeProps(ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(tab.props, key, tabMetaData));
+        return mergeProps(ptm(`accordion.${key}`, { tab: tabMetaData }), ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
     };
 
     const getTabProp = (tab, name) => AccordionTabBase.getCProp(tab, name);
@@ -201,15 +201,16 @@ export const Accordion = React.forwardRef((inProps, ref) => {
         const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
         const headerTitleProps = mergeProps(
             {
-                className: cx('tab.headertitle')
+                className: cx('accordiontab.headertitle')
             },
             getTabPT(tab, 'headertitle', index)
         );
-        const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : <span {...headerTitleProps}>{getTabProp(tab, 'header')}</span>;
+        const tabCProps = AccordionTabBase.getCProps(tab);
+        const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : <span {...headerTitleProps}>{ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps)}</span>;
         const headerIconProps = mergeProps(
             {
                 'aria-hidden': 'true',
-                className: cx('tab.headericon')
+                className: cx('accordiontab.headericon')
             },
             getTabPT(tab, 'headericon', index)
         );
@@ -229,7 +230,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
             {
                 id: headerId,
                 href: '#' + ariaControls,
-                className: cx('tab.headeraction'),
+                className: cx('accordiontab.headeraction'),
                 role: 'button',
                 tabIndex,
                 onClick: (e) => onTabHeaderClick(e, tab, index),
@@ -260,7 +261,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
             {
                 id: contentId,
                 ref: contentRef,
-                className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('tab.toggleablecontent')),
+                className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('accordiontab.toggleablecontent')),
                 style,
                 role: 'region',
                 'aria-labelledby': ariaLabelledby
@@ -270,14 +271,14 @@ export const Accordion = React.forwardRef((inProps, ref) => {
 
         const contentProps = mergeProps(
             {
-                className: cx('tab.content')
+                className: cx('accordiontab.content')
             },
             getTabPT(tab, 'content', index)
         );
 
         const transitionProps = mergeProps(
             {
-                classNames: cx('tab.transition'),
+                classNames: cx('accordiontab.transition'),
                 timeout: { enter: 1000, exit: 450 },
                 in: selected,
                 unmountOnExit: true,
@@ -305,7 +306,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
             const rootProps = mergeProps(
                 {
                     key,
-                    className: cx('tab.root', { selected })
+                    className: cx('accordiontab.root', { selected })
                 },
                 AccordionTabBase.getCOtherProps(tab),
                 getTabPT(tab, 'root', index)

diff --git a/components/lib/accordion/AccordionBase.js b/components/lib/accordion/AccordionBase.js
@@ -3,7 +3,7 @@ import { ObjectUtils, classNames } from '../utils/Utils';
 
 const classes = {
     root: 'p-accordion p-component',
-    tab: {
+    accordiontab: {
         root: ({ selected }) =>
             classNames('p-accordion-tab', {
                 'p-accordion-tab-active': selected

diff --git a/components/lib/accordion/accordion.d.ts b/components/lib/accordion/accordion.d.ts
@@ -99,7 +99,7 @@ interface AccordionTabProps {
     /**
      * Used to define the header of the tab.
      */
-    header?: React.ReactNode | undefined;
+    header?: React.ReactNode | ((props: AccordionTabProps) => React.ReactNode) | undefined;
     /**
      * Style class of the tab header.
      */