Tailwind Merge (#5755)

components/doc/passthrough/usepassthroughdoc.js

@@ -114,6 +114,10 @@ const CustomTailwind = usePassThrough(
                     The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and
                     <i>false</i> for <i>mergeProps</i>.
                 </p>
+                <p>
+                    Some CSS libraries, such as <i>Tailwind</i>, require that class names be merged in a non-conflicting manner. In order to support them a <i>classNameMergeFunction</i> may be passed as part of the <i>ptOptions</i> object to manually
+                    define how class names will be merged.
+                </p>
             </DocSectionText>
             <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
             <DocSectionCode code={code3} hideToggleCode import hideCodeSandbox hideStackBlitz />

components/doc/tailwind/unstyledmode/setupdoc.js

@@ -38,6 +38,21 @@ return(
     const code3 = {
         basic: `
 import { PrimeReactProvider } from "primereact/api";
+import { twMerge } from 'tailwind-merge';
+
+...
+return(
+    <PrimeReactProvider value={{ unstyled: true, pt: {}, ptOptions: { mergeSections: true, mergeProps: true, classNameMergeFunction: twMerge } }}>
+        <App />
+    </PrimeReactProvider>
+)
+ 
+`
+    };
+
+    const code4 = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
 
 export default function MyApp({ Component, pageProps }) {
     
@@ -124,12 +139,20 @@ export default function MyApp({ Component, pageProps }) {
                 <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
                 <p className="flex align-items-start gap-2">
                     <Badge value="3"></Badge>
+                    <span>
+                        <b>Optional:</b> specify the classNameMergeFunction as <i>twMerge</i> to resolve className conflicts via <a href="https://www.npmjs.com/package/tailwind-merge">tailwind-merge</a>. This will prevent classNames specified in the
+                        global pass through from overriding those specified via pass through in your application.
+                    </span>
+                </p>
+                <DocSectionCode code={code3} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <p className="flex align-items-start gap-2">
+                    <Badge value="4"></Badge>
                     <span>
                         At the final step, component styles are provided via a pass through configuration that utilizes Tailwind CSS. The default preset of each component is available at the Tailwind part under theming section of each component so
                         you'll able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;
                     </span>
                 </p>
-                <DocSectionCode code={code3} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code4} hideToggleCode import hideCodeSandbox hideStackBlitz />
                 <p>Voilà 💙, you now have 90+ awesome React UI components styled with Tailwind that will work in harmony with the rest of your application. Time to customize it to bring in your own style with Tailwind.</p>
             </DocSectionText>
         </>

components/lib/accordion/Accordion.js

@@ -2,15 +2,16 @@ 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 { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronRightIcon } from '../icons/chevronright';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { AccordionBase, AccordionTabBase } from './AccordionBase';
 
 export const AccordionTab = () => {};
 
 export const Accordion = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
     const context = React.useContext(PrimeReactContext);
     const props = AccordionBase.getProps(inProps, context);
     const [idState, setIdState] = React.useState(props.id);

components/lib/autocomplete/AutoComplete.js

@@ -2,19 +2,20 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { Button } from '../button/Button';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { SpinnerIcon } from '../icons/spinner';
 import { TimesCircleIcon } from '../icons/timescircle';
 import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { AutoCompleteBase } from './AutoCompleteBase';
 import { AutoCompletePanel } from './AutoCompletePanel';
 
 export const AutoComplete = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = AutoCompleteBase.getProps(inProps, context);
         const [idState, setIdState] = React.useState(props.id);

components/lib/autocomplete/AutoCompletePanel.js

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { localeOption, PrimeReactContext } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, mergeProps, ObjectUtils } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 import { VirtualScroller } from '../virtualscroller/VirtualScroller';
 
 export const AutoCompletePanel = React.memo(
     React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
         const { ptm, cx } = props;
         const context = React.useContext(PrimeReactContext);
 

components/lib/avatar/Avatar.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { useMergeProps } from '../hooks/Hooks';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { AvatarBase } from './AvatarBase';
 
 export const Avatar = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
     const context = React.useContext(PrimeReactContext);
     const props = AvatarBase.getProps(inProps, context);
 

components/lib/avatargroup/AvatarGroup.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { classNames, mergeProps } from '../utils/Utils';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { AvatarGroupBase } from './AvatarGroupBase';
 
 export const AvatarGroup = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
     const context = React.useContext(PrimeReactContext);
     const props = AvatarGroupBase.getProps(inProps, context);
 

components/lib/badge/Badge.js

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { classNames, mergeProps } from '../utils/Utils';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { BadgeBase } from './BadgeBase';
 
 export const Badge = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = BadgeBase.getProps(inProps, context);
 

components/lib/blockui/BlockUI.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
-import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { BlockUIBase } from './BlockUIBase';
 
 export const BlockUI = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
     const context = React.useContext(PrimeReactContext);
     const props = BlockUIBase.getProps(inProps, context);
 

components/lib/breadcrumb/BreadCrumb.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ChevronRightIcon } from '../icons/chevronright';
-import { IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 import { BreadCrumbBase } from './BreadCrumbBase';
 
 export const BreadCrumb = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = BreadCrumbBase.getProps(inProps, context);
         const [idState, setIdState] = React.useState(props.id);

components/lib/button/Button.js

@@ -2,14 +2,16 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { Badge } from '../badge/Badge';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
 import { SpinnerIcon } from '../icons/spinner';
 import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
-import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { ButtonBase } from './ButtonBase';
 
 export const Button = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = ButtonBase.getProps(inProps, context);
         const disabled = props.disabled || props.loading;

components/lib/calendar/Calendar.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext, localeOption, localeOptions } from '../api/Api';
 import { Button } from '../button/Button';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { CalendarIcon } from '../icons/calendar';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronLeftIcon } from '../icons/chevronleft';
@@ -11,12 +11,13 @@ import { ChevronUpIcon } from '../icons/chevronup';
 import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask } from '../utils/Utils';
 import { CalendarBase } from './CalendarBase';
 import { CalendarPanel } from './CalendarPanel';
 
 export const Calendar = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = CalendarBase.getProps(inProps, context);
         const [focusedState, setFocusedState] = React.useState(false);

components/lib/calendar/CalendarPanel.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
-import { mergeProps } from '../utils/Utils';
 
 export const CalendarPanel = React.forwardRef((props, ref) => {
     const cx = props.cx;
+    const mergeProps = useMergeProps();
 
     const createElement = () => {
         const panelProps = mergeProps(

components/lib/card/Card.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { ObjectUtils, mergeProps } from '../utils/Utils';
-import { CardBase } from './CardBase';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils } from '../utils/Utils';
+import { CardBase } from './CardBase';
 
 export const Card = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
     const context = React.useContext(PrimeReactContext);
     const props = CardBase.getProps(inProps, context);
 

components/lib/carousel/Carousel.js

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronLeftIcon } from '../icons/chevronleft';
 import { ChevronRightIcon } from '../icons/chevronright';
 import { ChevronUpIcon } from '../icons/chevronup';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { CarouselBase } from './CarouselBase';
 
 const CarouselItem = React.memo((props) => {
+    const mergeProps = useMergeProps();
     const { ptm, cx } = props;
     const key = props.className && props.className === 'p-carousel-item-cloned' ? 'itemCloned' : 'item';
     const content = props.template(props.item);

components/lib/cascadeselect/CascadeSelect.js

@@ -2,17 +2,18 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { SpinnerIcon } from '../icons/spinner';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
 import { CascadeSelectBase } from './CascadeSelectBase';
 import { CascadeSelectSub } from './CascadeSelectSub';
 
 export const CascadeSelect = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = CascadeSelectBase.getProps(inProps, context);
         const [focusedState, setFocusedState] = React.useState(false);

components/lib/cascadeselect/CascadeSelectSub.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { AngleRightIcon } from '../icons/angleright';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 export const CascadeSelectSub = React.memo((props) => {
+    const mergeProps = useMergeProps();
     const [activeOptionState, setActiveOptionState] = React.useState(null);
     const elementRef = React.useRef(null);
     const context = React.useContext(PrimeReactContext);

components/lib/chart/Chart.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { useUnmountEffect } from '../hooks/Hooks';
-import { mergeProps } from '../utils/Utils';
-import { ChartBase } from './ChartBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useUnmountEffect } from '../hooks/Hooks';
+import { ChartBase } from './ChartBase';
 
 // GitHub #3059 wrapper if loaded by script tag
 const ChartJS = (function () {
@@ -16,6 +15,7 @@ const ChartJS = (function () {
 
 const PrimeReactChart = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = ChartBase.getProps(inProps, context);
 

components/lib/checkbox/Checkbox.js

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { CheckboxBase } from './CheckboxBase';
 
 export const Checkbox = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = CheckboxBase.getProps(inProps, context);
         const [focusedState, setFocusedState] = React.useState(false);

components/lib/chip/Chip.js

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
 import { TimesCircleIcon } from '../icons/timescircle';
-import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 import { ChipBase } from './ChipBase';
 
 export const Chip = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = ChipBase.getProps(inProps, context);
         const elementRef = React.useRef(null);