#6329 - classnames not being set in unstyled mode

primefaces · Apr 9, 2024 · 6ac1fb6 · 6ac1fb6
1 parent 36f1358
commit 6ac1fb6
Show file tree

Hide file tree

Showing 30 changed files with 86 additions and 124 deletions.
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/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)
                 },

diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/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,

diff --git a/components/lib/chart/Chart.js b/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')

diff --git a/components/lib/chart/ChartBase.js b/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 }) =>

diff --git a/components/lib/colorpicker/ColorPicker.js b/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')

diff --git a/components/lib/colorpicker/ColorPickerBase.js b/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

diff --git a/components/lib/fileupload/FileUpload.js b/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),

diff --git a/components/lib/iconfield/IconField.js b/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')

diff --git a/components/lib/image/Image.js b/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')

diff --git a/components/lib/image/ImageBase.js b/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'

diff --git a/components/lib/inputtextarea/InputTextarea.js b/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,

diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/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 = `

diff --git a/components/lib/knob/Knob.js b/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')

diff --git a/components/lib/knob/KnobBase.js b/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 {

diff --git a/components/lib/mention/Mention.js b/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),

diff --git a/components/lib/mention/MentionBase.js b/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'
 };
 

diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
@@ -445,7 +445,7 @@ export const Password = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root', { isFilled, focusedState }),
+                className: classNames(props.className, cx('root', { isFilled, focusedState })),
                 style: props.style
             },
             ptm('root')

diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js
@@ -4,15 +4,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, isFilled, focusedState }) =>
-        classNames(
-            'p-password p-component p-inputwrapper',
-            {
-                'p-inputwrapper-filled': isFilled,
-                'p-inputwrapper-focus': focusedState,
-                'p-input-icon-right': props.toggleMask
-            },
-            props.className
-        ),
+        classNames('p-password p-component p-inputwrapper', {
+            'p-inputwrapper-filled': isFilled,
+            'p-inputwrapper-focus': focusedState,
+            'p-input-icon-right': props.toggleMask
+        }),
     input: ({ props }) => classNames('p-password-input', props.inputClassName),
     panel: ({ props, context }) =>
         classNames('p-password-panel p-component', props.panelClassName, {

diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
@@ -6,7 +6,7 @@ import { BanIcon } from '../icons/ban';
 import { StarIcon } from '../icons/star';
 import { StarFillIcon } from '../icons/starfill';
 import { Tooltip } from '../tooltip/Tooltip';
-import { IconUtils, ObjectUtils } from '../utils/Utils';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { RatingBase } from './RatingBase';
 
 export const Rating = React.memo(
@@ -198,7 +198,7 @@ export const Rating = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             RatingBase.getOtherProps(props),

diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js
@@ -7,14 +7,10 @@ const classes = {
     cancelIcon: 'p-rating-icon p-rating-cancel',
     cancelItem: 'p-rating-item p-rating-cancel-item',
     root: ({ props }) =>
-        classNames(
-            'p-rating',
-            {
-                'p-disabled': props.disabled,
-                'p-readonly': props.readOnly
-            },
-            props.className
-        )
+        classNames('p-rating', {
+            'p-disabled': props.disabled,
+            'p-readonly': props.readOnly
+        })
 };
 
 const styles = `

diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
 import { SelectButtonBase } from './SelectButtonBase';
 import { SelectButtonItem } from './SelectButtonItem';
 
@@ -140,7 +140,7 @@ export const SelectButton = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style,
                 role: 'group'
             },

diff --git a/components/lib/selectbutton/SelectButtonBase.js b/components/lib/selectbutton/SelectButtonBase.js
@@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-selectbutton p-button-group p-component', props.className, { 'p-invalid': props.invalid }),
+    root: ({ props }) => classNames('p-selectbutton p-button-group p-component', { 'p-invalid': props.invalid }),
     button: ({ itemProps: props, focusedState }) =>
         classNames('p-button p-component', {
             'p-highlight': props.selected,

diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
@@ -6,7 +6,7 @@ import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, use
 import { ChevronLeftIcon } from '../icons/chevronleft';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { SlideMenuBase } from './SlideMenuBase';
 import { SlideMenuSub } from './SlideMenuSub';
 
@@ -175,7 +175,7 @@ export const SlideMenu = React.memo(
                 {
                     ref: menuRef,
                     id: props.id,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style,
                     onClick: (e) => onPanelClick(e)
                 },

diff --git a/components/lib/slidemenu/SlideMenuBase.js b/components/lib/slidemenu/SlideMenuBase.js
@@ -9,13 +9,9 @@ const classes = {
             'p-slidemenu-separator': levelState > 0
         }),
     root: ({ props }) =>
-        classNames(
-            'p-slidemenu p-component',
-            {
-                'p-slidemenu-overlay': props.popup
-            },
-            props.className
-        ),
+        classNames('p-slidemenu p-component', {
+            'p-slidemenu-overlay': props.popup
+        }),
     wrapper: 'p-slidemenu-wrapper',
     content: 'p-slidemenu-content',
     separator: 'p-slidemenu-separator',