#6329 classnames not being set in unstyled mode

components/lib/blockui/BlockUI.js

@@ -124,7 +124,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: elementRef,
             style: props.containerStyle,
-            className: cx('root'),
+            className: classNames(props.containerClassName, cx('root')),
             'aria-busy': props.blocked
         },
         BlockUIBase.getOtherProps(props),

components/lib/blockui/BlockUIBase.js

@@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-blockui-container', props.containerClassName),
+    root: 'p-blockui-container',
     mask: ({ props }) =>
         classNames('p-blockui p-component-overlay p-component-overlay-enter', {
             'p-blockui-document': props.fullScreen

components/lib/breadcrumb/BreadCrumb.js

@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ChevronRightIcon } from '../icons/chevronright';
-import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { BreadCrumbBase } from './BreadCrumbBase';
 
 export const BreadCrumb = React.memo(
@@ -243,7 +243,7 @@ export const BreadCrumb = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             BreadCrumbBase.getOtherProps(props),

components/lib/breadcrumb/BreadCrumbBase.js

@@ -10,7 +10,7 @@ const classes = {
     separator: 'p-menuitem-separator',
     menuitem: ({ item }) => classNames('p-menuitem', item.className, { 'p-disabled': item.disabled }),
     menu: 'p-breadcrumb-list',
-    root: ({ props }) => classNames('p-breadcrumb p-component', props.className)
+    root: 'p-breadcrumb p-component'
 };
 
 const styles = `

components/lib/card/Card.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { ObjectUtils } from '../utils/Utils';
+import { ObjectUtils, classNames } from '../utils/Utils';
 import { CardBase } from './CardBase';
 
 export const Card = React.forwardRef((inProps, ref) => {
@@ -96,7 +96,7 @@ export const Card = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: elementRef,
             style: props.style,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         CardBase.getOtherProps(props),
         ptm('root')

components/lib/card/CardBase.js

@@ -1,8 +1,7 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-card p-component', props.className),
+    root: 'p-card p-component',
     header: 'p-card-header',
     title: 'p-card-title',
     subTitle: 'p-card-subtitle',

components/lib/cascadeselect/CascadeSelect.js

@@ -7,7 +7,7 @@ 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 } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { CascadeSelectBase } from './CascadeSelectBase';
 import { CascadeSelectSub } from './CascadeSelectSub';
 
@@ -471,7 +471,7 @@ export const CascadeSelect = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root', { focusedState, overlayVisibleState, context }),
+                    className: classNames(props.className, cx('root', { focusedState, overlayVisibleState, context })),
                     style: props.style,
                     onClick: (e) => onClick(e)
                 },

components/lib/cascadeselect/CascadeSelectBase.js

@@ -3,18 +3,14 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, focusedState, overlayVisibleState, context }) =>
-        classNames(
-            'p-cascadeselect p-component p-inputwrapper',
-            {
-                'p-disabled': props.disabled,
-                'p-invalid': props.invalid,
-                'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
-                'p-focus': focusedState,
-                'p-inputwrapper-filled': props.value,
-                'p-inputwrapper-focus': focusedState || overlayVisibleState
-            },
-            props.className
-        ),
+        classNames('p-cascadeselect p-component p-inputwrapper', {
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
+            'p-focus': focusedState,
+            'p-inputwrapper-filled': props.value,
+            'p-inputwrapper-focus': focusedState || overlayVisibleState
+        }),
     label: ({ props, label }) =>
         classNames('p-cascadeselect-label ', {
             'p-placeholder': label === props.placeholder,

components/lib/chart/Chart.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useUnmountEffect } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { ChartBase } from './ChartBase';
 
 // GitHub #3059 wrapper if loaded by script tag
@@ -96,7 +97,7 @@ const PrimeReactChart = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: sx('root'),
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             ChartBase.getOtherProps(props),
             ptm('root')

components/lib/chart/ChartBase.js

@@ -1,5 +1,4 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 export const ChartBase = ComponentBase.extend({
     defaultProps: {
@@ -17,7 +16,7 @@ export const ChartBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: ({ props }) => classNames('p-chart', props.className)
+            root: 'p-chart'
         },
         inlineStyles: {
             root: ({ props }) =>

components/lib/colorpicker/ColorPicker.js

@@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useEventListener, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { ColorPickerBase } from './ColorPickerBase';
 import { ColorPickerPanel } from './ColorPickerPanel';
 
@@ -650,7 +650,7 @@ export const ColorPicker = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             ColorPickerBase.getOtherProps(props),
             ptm('root')

components/lib/colorpicker/ColorPickerBase.js

@@ -4,13 +4,9 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props }) =>
-        classNames(
-            'p-colorpicker p-component',
-            {
-                'p-colorpicker-overlay': !props.inline
-            },
-            props.className
-        ),
+        classNames('p-colorpicker p-component', {
+            'p-colorpicker-overlay': !props.inline
+        }),
     input: ({ props }) =>
         classNames('p-colorpicker-preview p-inputtext', props.inputClassName, {
             'p-disabled': props.disabled

components/lib/confirmpopup/ConfirmPopup.js

@@ -353,7 +353,7 @@ export const ConfirmPopup = React.memo(
             {
                 ref: overlayRef,
                 id: getPropValue('id'),
-                className: cx('root', { context, getPropValue }),
+                className: classNames(props.className, cx('root', { context, getPropValue })),
                 style: getPropValue('style'),
                 onClick: onPanelClick
             },

components/lib/dialog/Dialog.js

@@ -8,7 +8,7 @@ import { WindowMaximizeIcon } from '../icons/windowmaximize';
 import { WindowMinimizeIcon } from '../icons/windowminimize';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { DialogBase } from './DialogBase';
 
 export const Dialog = React.forwardRef((inProps, ref) => {
@@ -714,7 +714,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
             {
                 ref: dialogRef,
                 id: idState,
-                className: cx('root', { props, maximized, context }),
+                className: classNames(props.className, cx('root', { props, maximized, context })),
                 style: props.style,
                 onClick: props.onClick,
                 role: 'dialog',

components/lib/dialog/DialogBase.js

@@ -29,7 +29,7 @@ const classes = {
         );
     },
     root: ({ props, maximized, context }) =>
-        classNames('p-dialog p-component', props.className, {
+        classNames('p-dialog p-component', {
             'p-dialog-rtl': props.rtl,
             'p-dialog-maximized': maximized,
             'p-dialog-default': !maximized,

components/lib/fileupload/FileUpload.js

@@ -646,7 +646,7 @@ export const FileUpload = React.memo(
             const rootProps = mergeProps(
                 {
                     id: props.id,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style
                 },
                 FileUploadBase.getOtherProps(props),

components/lib/iconfield/IconField.js

@@ -1,6 +1,7 @@
 import React, { useContext, useRef } from 'react';
-import { useMergeProps } from '../hooks/Hooks';
 import { PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { IconFieldBase } from './IconFieldBase';
 
 export const IconField = React.memo(
@@ -20,7 +21,7 @@ export const IconField = React.memo(
 
         const rootProps = mergeProps(
             {
-                className: cx('root', { iconPosition: props.iconPosition })
+                className: classNames(props.className, cx('root', { iconPosition: props.iconPosition }))
             },
             IconFieldBase.getOtherProps(props),
             ptm('root')

components/lib/image/Image.js

@@ -384,7 +384,7 @@ export const Image = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             ImageBase.getOtherProps(props),
             ptm('root')

components/lib/image/ImageBase.js

@@ -14,7 +14,7 @@ const classes = {
     preview: 'p-image-preview',
     icon: 'p-image-preview-icon',
     root: ({ props }) =>
-        classNames('p-image p-component', props.className, {
+        classNames('p-image p-component', {
             'p-image-preview-container': props.preview
         }),
     transition: 'p-image-preview'

components/lib/inputtextarea/InputTextarea.js

@@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
 import { InputTextareaBase } from './InputTextareaBase';
 
 export const InputTextarea = React.memo(
@@ -127,7 +127,7 @@ export const InputTextarea = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root', { context, isFilled }),
+                className: classNames(props.className, cx('root', { context, isFilled })),
                 onFocus: onFocus,
                 onBlur: onBlur,
                 onKeyUp: onKeyUp,

components/lib/inputtextarea/InputTextareaBase.js

@@ -3,17 +3,13 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, context, isFilled }) =>
-        classNames(
-            'p-inputtextarea p-inputtext p-component',
-            {
-                'p-disabled': props.disabled,
-                'p-filled': isFilled,
-                'p-inputtextarea-resizable': props.autoResize,
-                'p-invalid': props.invalid,
-                'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
-            },
-            props.className
-        )
+        classNames('p-inputtextarea p-inputtext p-component', {
+            'p-disabled': props.disabled,
+            'p-filled': isFilled,
+            'p-inputtextarea-resizable': props.autoResize,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
 };
 
 const styles = `

components/lib/knob/Knob.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useEventListener, useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
 import { KnobBase } from './KnobBase';
 
 const radius = 40;
@@ -243,7 +244,7 @@ export const Knob = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             ptm('root')

components/lib/knob/KnobBase.js

@@ -31,13 +31,9 @@ export const KnobBase = ComponentBase.extend({
             value: 'p-knob-value',
             label: 'p-knob-text',
             root: ({ props }) =>
-                classNames(
-                    'p-knob p-component',
-                    {
-                        'p-disabled': props.disabled
-                    },
-                    props.className
-                )
+                classNames('p-knob p-component', {
+                    'p-disabled': props.disabled
+                })
         },
         styles: `
         @keyframes dash-frame {

components/lib/mention/Mention.js

@@ -7,7 +7,7 @@ import { InputTextarea } from '../inputtextarea/InputTextarea';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { MentionBase } from './MentionBase';
 
 export const Mention = React.memo(
@@ -550,7 +550,7 @@ export const Mention = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root', { focusedState, isFilled }),
+                className: classNames(props.className, cx('root', { focusedState, isFilled })),
                 style: props.style
             },
             MentionBase.getOtherProps(props),

components/lib/mention/MentionBase.js

@@ -10,14 +10,10 @@ const classes = {
     panel: ({ props }) => classNames('p-mention-panel p-component', props.panelClassName),
     input: ({ props }) => classNames('p-mention-input', props.inputClassName),
     root: ({ props, isFilled, focusedState }) =>
-        classNames(
-            'p-mention p-component p-inputwrapper',
-            {
-                'p-inputwrapper-filled': isFilled,
-                'p-inputwrapper-focus': focusedState
-            },
-            props.className
-        ),
+        classNames('p-mention p-component p-inputwrapper', {
+            'p-inputwrapper-filled': isFilled,
+            'p-inputwrapper-focus': focusedState
+        }),
     transition: 'p-connected-overlay'
 };
 

components/lib/overlaypanel/OverlayPanel.js

@@ -7,7 +7,7 @@ import { TimesIcon } from '../icons/times';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { OverlayPanelBase } from './OverlayPanelBase';
 
 export const OverlayPanel = React.forwardRef((inProps, ref) => {
@@ -266,7 +266,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         const rootProps = mergeProps(
             {
                 id: props.id,
-                className: cx('root', { context }),
+                className: classNames(props.className, cx('root', { context })),
                 style: props.style,
                 onClick: (e) => onPanelClick(e)
             },