From 090116c70841b1ed5e3174638778b50f90ab6e33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Mon, 18 Sep 2023 00:49:43 +0300 Subject: [PATCH] Related #4602 - Refactor for data-p- attributes --- components/lib/accordion/Accordion.js | 16 +++-- components/lib/accordion/AccordionBase.js | 27 +++------ components/lib/autocomplete/AutoComplete.js | 31 ++++++---- .../lib/autocomplete/AutoCompleteBase.js | 22 +++---- .../lib/autocomplete/AutoCompletePanel.js | 14 +++-- components/lib/blockui/BlockUI.js | 4 +- components/lib/blockui/BlockUIBase.js | 10 +--- components/lib/calendar/Calendar.js | 58 +++++++++++-------- components/lib/calendar/CalendarBase.js | 6 +- components/lib/carousel/Carousel.js | 10 +++- .../lib/cascadeselect/CascadeSelectSub.js | 4 +- components/lib/checkbox/Checkbox.js | 5 +- components/lib/chips/Chips.js | 11 ++-- components/lib/chips/ChipsBase.js | 14 ++--- components/lib/contextmenu/ContextMenu.js | 2 +- components/lib/contextmenu/ContextMenuBase.js | 4 +- components/lib/dropdown/Dropdown.js | 8 ++- components/lib/dropdown/DropdownBase.js | 38 +++++------- components/lib/dropdown/DropdownItem.js | 10 ++-- components/lib/dropdown/DropdownPanel.js | 2 +- components/lib/fileupload/FileUpload.js | 26 +++++---- components/lib/fileupload/FileUploadBase.js | 24 ++++---- components/lib/galleria/GalleriaItem.js | 9 ++- components/lib/galleria/GalleriaThumbnails.js | 12 +++- components/lib/megamenu/MegaMenu.js | 12 ++-- components/lib/megamenu/MegaMenuBase.js | 14 ++--- components/lib/menu/Menu.js | 6 +- components/lib/multiselect/MultiSelect.js | 4 +- components/lib/multiselect/MultiSelectBase.js | 40 +++++-------- components/lib/multiselect/MultiSelectItem.js | 4 +- .../lib/multiselect/MultiSelectPanel.js | 4 +- components/lib/orderlist/OrderList.js | 4 +- components/lib/orderlist/OrderListSubList.js | 5 +- 33 files changed, 238 insertions(+), 222 deletions(-) diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index 393b6b9eb5..9266c42458 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useMountEffect } from '../hooks/Hooks'; -import { IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils'; +import { classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { AccordionBase, AccordionTabBase } from './AccordionBase'; import { ChevronRightIcon } from '../icons/chevronright'; import { ChevronDownIcon } from '../icons/chevrondown'; @@ -101,6 +101,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { } const createTabHeader = (tab, selected, index) => { + const style = { ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'headerStyle') || {}) }; const headerId = idState + '_header_' + index; const ariaControls = idState + '_content_' + index; const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex'); @@ -122,8 +123,10 @@ export const Accordion = React.forwardRef((inProps, ref) => { const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'); const headerProps = mergeProps( { - className: cx('tab.header', { selected, getTabProp, tab }), - style: sx('tab.header', { getTabProp, tab }) + className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('tab.header', { selected, getTabProp, tab })), + style, + 'data-p-highlight': selected, + 'data-p-disabled': getTabProp(tab, 'disabled') }, getTabPT(tab, 'header', index) ); @@ -154,6 +157,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { }; const createTabContent = (tab, selected, index) => { + const style = { ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'contentStyle') || {}) }; const contentId = idState + '_content_' + index; const ariaLabelledby = idState + '_header_' + index; const contentRef = React.createRef(); @@ -161,8 +165,8 @@ export const Accordion = React.forwardRef((inProps, ref) => { { id: contentId, ref: contentRef, - className: cx('tab.toggleablecontent', { getTabProp, tab }), - style: sx('tab.toggleablecontent', { getTabProp, tab }), + className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('tab.toggleablecontent')), + style, role: 'region', 'aria-labelledby': ariaLabelledby }, @@ -219,7 +223,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const tabs = createTabs(); const rootProps = mergeProps( { - className: cx('root'), + className: classNames(props.className, cx('root')), style: props.style }, AccordionBase.getOtherProps(props), diff --git a/components/lib/accordion/AccordionBase.js b/components/lib/accordion/AccordionBase.js index a39d5b3146..9dd28e29c1 100644 --- a/components/lib/accordion/AccordionBase.js +++ b/components/lib/accordion/AccordionBase.js @@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { ObjectUtils, classNames } from '../utils/Utils'; const classes = { - root: ({ props }) => classNames('p-accordion p-component', props.className), + root: 'p-accordion p-component', tab: { root: ({ selected }) => classNames('p-accordion-tab', { @@ -10,26 +10,14 @@ const classes = { }), content: 'p-accordion-content', header: ({ selected, getTabProp, tab }) => - classNames( - 'p-accordion-header', - { - 'p-highlight': selected, - 'p-disabled': getTabProp(tab, 'disabled') - }, - getTabProp(tab, 'headerClassName'), - getTabProp(tab, 'className') - ), + classNames('p-accordion-header', { + 'p-highlight': selected, + 'p-disabled': getTabProp(tab, 'disabled') + }), headeraction: 'p-accordion-header-link', headericon: 'p-accordion-toggle-icon', headertitle: 'p-accordion-header-text', - toggleablecontent: ({ getTabProp, tab }) => classNames('p-toggleable-content', getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className')) - } -}; - -const inlineStyles = { - tab: { - toggleablecontent: ({ getTabProp, tab }) => ({ ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'contentStyle') || {}) }), - header: ({ getTabProp, tab }) => ({ ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'headerStyle') || {}) }) + toggleablecontent: 'p-toggleable-content' } }; @@ -70,8 +58,7 @@ export const AccordionBase = ComponentBase.extend({ }, css: { classes, - styles, - inlineStyles + styles } }); diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index f7004b369a..4ac217b24a 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -9,7 +9,7 @@ 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, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { AutoCompleteBase } from './AutoCompleteBase'; import { AutoCompletePanel } from './AutoCompletePanel'; @@ -201,7 +201,8 @@ export const AutoComplete = React.memo( if (props.autoHighlight && props.suggestions && props.suggestions.length) { const element = getScrollableElement().firstChild.firstChild; - DomHandler.addClass(element, 'p-highlight'); + !isUnstyled() && DomHandler.addClass(element, 'p-highlight'); + element.current.setAttribute('data-p-highlight', true); } }; @@ -274,7 +275,8 @@ export const AutoComplete = React.memo( let nextElement = findNextItem(highlightItem); if (nextElement) { - DomHandler.addClass(nextElement, 'p-highlight'); + !isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight'); + nextElement.setAttribute('data-p-highlight', true); DomHandler.removeClass(highlightItem, 'p-highlight'); DomHandler.scrollInView(getScrollableElement(), nextElement); } @@ -286,7 +288,8 @@ export const AutoComplete = React.memo( } if (highlightItem) { - DomHandler.addClass(highlightItem, 'p-highlight'); + !isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight'); + highlightItem.setAttribute('data-p-highlight', true); } } @@ -299,8 +302,10 @@ export const AutoComplete = React.memo( let previousElement = findPrevItem(highlightItem); if (previousElement) { - DomHandler.addClass(previousElement, 'p-highlight'); - DomHandler.removeClass(highlightItem, 'p-highlight'); + !isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight'); + previousElement.setAttribute('data-p-highlight', true); + !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight'); + highlightItem.setAttribute('data-p-highlight', false); DomHandler.scrollInView(getScrollableElement(), previousElement); } } @@ -433,12 +438,14 @@ export const AutoComplete = React.memo( const onMultiInputFocus = (event) => { onInputFocus(event); - DomHandler.addClass(multiContainerRef.current, 'p-focus'); + !isUnstyled() && DomHandler.addClass(multiContainerRef.current, 'p-focus'); + multiContainerRef.current.setAttribute('data-p-focus', true); }; const onMultiInputBlur = (event) => { onInputBlur(event); - DomHandler.removeClass(multiContainerRef.current, 'p-focus'); + !isUnstyled() && DomHandler.removeClass(multiContainerRef.current, 'p-focus'); + multiContainerRef.current.setAttribute('data-p-focus', false); }; const isSelected = (val) => { @@ -532,7 +539,7 @@ export const AutoComplete = React.memo( aria-controls={ariaControls} aria-haspopup="listbox" aria-expanded={overlayVisibleState} - className={cx('input')} + className={classNames(props.inputClassName, cx('input'))} style={props.inputStyle} autoComplete="off" readOnly={props.readOnly} @@ -654,7 +661,9 @@ export const AutoComplete = React.memo( onClick: allowMoreValues ? onMultiContainerClick : undefined, onContextMenu: props.onContextMenu, onMouseDown: props.onMouseDown, - onDoubleClick: props.onDblClick + onDoubleClick: props.onDblClick, + 'data-p-focus': focusedState, + 'data-p-disabled': props.disabled }, ptm('container') ); @@ -721,7 +730,7 @@ export const AutoComplete = React.memo( id: idState, ref: elementRef, style: props.style, - className: cx('root', { focusedState }) + className: classNames(props.className, cx('root', { focusedState })) }, otherProps, ptm('root') diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index 4c012112fa..0bbd0bc189 100644 --- a/components/lib/autocomplete/AutoCompleteBase.js +++ b/components/lib/autocomplete/AutoCompleteBase.js @@ -4,16 +4,12 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props, focusedState }) => - classNames( - 'p-autocomplete p-component p-inputwrapper', - { - 'p-autocomplete-dd': props.dropdown, - 'p-autocomplete-multiple': props.multiple, - 'p-inputwrapper-filled': props.value, - 'p-inputwrapper-focus': focusedState - }, - props.className - ), + classNames('p-autocomplete p-component p-inputwrapper', { + 'p-autocomplete-dd': props.dropdown, + 'p-autocomplete-multiple': props.multiple, + 'p-inputwrapper-filled': props.value, + 'p-inputwrapper-focus': focusedState + }), container: ({ props }) => classNames('p-autocomplete-multiple-container p-component p-inputtext', { 'p-disabled': props.disabled @@ -25,11 +21,11 @@ const classes = { tokenLabel: 'p-autocomplete-token-label', inputToken: 'p-autocomplete-input-token', input: ({ props }) => - classNames('p-autocomplete-input', props.inputClassName, { + classNames('p-autocomplete-input', { 'p-autocomplete-dd-input': props.dropdown }), - panel: ({ props, context }) => - classNames('p-autocomplete-panel p-component', props.panelClassName, { + panel: ({ context }) => + classNames('p-autocomplete-panel p-component', { 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js index 032c0587c8..ceae56e91d 100644 --- a/components/lib/autocomplete/AutoCompletePanel.js +++ b/components/lib/autocomplete/AutoCompletePanel.js @@ -3,7 +3,7 @@ import { localeOption, PrimeReactContext } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; export const AutoCompletePanel = React.memo( @@ -49,12 +49,13 @@ export const AutoCompletePanel = React.memo( const itemProps = mergeProps( { role: 'option', - 'aria-selected': selected, className: cx('item', { optionGroupLabel: props.optionGroupLabel, suggestion: item }), style, onClick: (e) => props.onItemClick(e, item), + 'aria-selected': selected, 'data-group': i, - 'data-index': j + 'data-index': j, + 'data-p-disabled': suggestion.disabled }, getPTOptions(item, 'item') ); @@ -93,12 +94,13 @@ export const AutoCompletePanel = React.memo( const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion; const itemProps = mergeProps( { + index, role: 'option', - 'aria-selected': props.selectedItem === suggestion, className: cx('item', { suggestion }), style, onClick: (e) => props.onItemClick(e, suggestion), - index + 'aria-selected': props.selectedItem === suggestion, + 'data-p-disabled': suggestion.disabled }, getPTOptions(suggestion, 'item') ); @@ -199,7 +201,7 @@ export const AutoCompletePanel = React.memo( const footer = createFooter(); const panelProps = mergeProps( { - className: cx('panel', context), + className: classNames(props.panelClassName, cx('panel', { context })), style, onClick: (e) => props.onClick(e) }, diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js index 19b1e5890a..1784c2fdac 100644 --- a/components/lib/blockui/BlockUI.js +++ b/components/lib/blockui/BlockUI.js @@ -3,7 +3,7 @@ import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { DomHandler, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { BlockUIBase } from './BlockUIBase'; export const BlockUI = React.forwardRef((inProps, ref) => { @@ -86,7 +86,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => { const appendTo = props.fullScreen ? document.body : 'self'; const maskProps = mergeProps( { - className: cx('mask'), + className: classNames(props.className, cx('mask')), style: { ...props.style, position: props.fullScreen ? 'fixed' : 'absolute', diff --git a/components/lib/blockui/BlockUIBase.js b/components/lib/blockui/BlockUIBase.js index f8fe26c6b0..a66e2d0cd9 100644 --- a/components/lib/blockui/BlockUIBase.js +++ b/components/lib/blockui/BlockUIBase.js @@ -4,13 +4,9 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props }) => classNames('p-blockui-container', props.containerClassName), mask: ({ props }) => - classNames( - 'p-blockui p-component-overlay p-component-overlay-enter', - { - 'p-blockui-document': props.fullScreen - }, - props.className - ) + classNames('p-blockui p-component-overlay p-component-overlay-enter', { + 'p-blockui-document': props.fullScreen + }) }; const styles = ` diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index ddeb323001..ea3dd0f97a 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -235,11 +235,11 @@ export const Calendar = React.memo( let cell; if (navigation.current.backward) { - let cells = DomHandler.find(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)'); /* @todo */ + let cells = DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])'); cell = cells[cells.length - 1]; } else { - cell = DomHandler.findSingle(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)'); + cell = DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])'); } if (cell) { @@ -258,18 +258,18 @@ export const Calendar = React.memo( let cell; if (props.view === 'month') { - const cells = DomHandler.find(overlayRef.current, '.p-monthpicker .p-monthpicker-month'); - const selectedCell = DomHandler.findSingle(overlayRef.current, '.p-monthpicker .p-monthpicker-month.p-highlight'); + const cells = DomHandler.find(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"]'); + const selectedCell = DomHandler.findSingle(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]'); cells.forEach((cell) => (cell.tabIndex = -1)); cell = selectedCell || cells[0]; } else { - cell = DomHandler.findSingle(overlayRef.current, 'span.p-highlight'); + cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]'); if (!cell) { const todayCell = DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)'); - cell = todayCell || DomHandler.findSingle(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)'); + cell = todayCell || DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])'); } } @@ -970,12 +970,14 @@ export const Calendar = React.memo( return; } - const navPrev = DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev'); - const navNext = DomHandler.findSingle(overlayRef.current, '.p-datepicker-next'); + const navPrev = DomHandler.findSingle(overlayRef.current, '[data-pc-section="previousbutton"]'); + const navNext = DomHandler.findSingle(overlayRef.current, '[data-pc-section="nextbutton"]'); if (props.disabled) { - DomHandler.addClass(navPrev, 'p-disabled'); - DomHandler.addClass(navNext, 'p-disabled'); + !isUnstyled() && DomHandler.addClass(navPrev, 'p-disabled'); + navPrev.setAttribute('data-p-disabled', true); + !isUnstyled() && DomHandler.addClass(navNext, 'p-disabled'); + navNext.setAttribute('data-p-disabled', true); return; } @@ -1158,7 +1160,7 @@ export const Calendar = React.memo( navBackward(event); } else { const prevMonthContainer = overlayRef.current.children[groupIndex - 1]; - const cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)'); + const cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"])'); const focusCell = cells[cells.length - 1]; focusCell.tabIndex = '0'; @@ -1170,7 +1172,7 @@ export const Calendar = React.memo( navForward(event); } else { const nextMonthContainer = overlayRef.current.children[groupIndex + 1]; - const focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)'); + const focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])'); focusCell.tabIndex = '0'; focusCell.focus(); @@ -1261,7 +1263,7 @@ export const Calendar = React.memo( return; } - DomHandler.find(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)').forEach((cell) => (cell.tabIndex = -1)); + DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])').forEach((cell) => (cell.tabIndex = -1)); event.currentTarget.focus(); if (isMultipleSelection()) { @@ -1550,7 +1552,7 @@ export const Calendar = React.memo( if (!touchUIMask.current) { touchUIMask.current = document.createElement('div'); touchUIMask.current.style.zIndex = String(ZIndexUtils.get(overlayRef.current) - 1); - DomHandler.addMultipleClasses(touchUIMask.current, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter'); + !isUnstyled() && DomHandler.addMultipleClasses(touchUIMask.current, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter'); touchUIMaskClickListener.current = () => { disableModality(); @@ -2904,7 +2906,8 @@ export const Calendar = React.memo( const weekHeaderProps = mergeProps( { scope: 'col', - className: cx('weekHeader') + className: cx('weekHeader'), + 'data-p-disabled': props.showWeek }, ptm('weekHeader', { context: { @@ -2934,7 +2937,9 @@ export const Calendar = React.memo( { className: cx('dayLabel', { className }), onClick: (e) => onDateSelect(e, date), - onKeyDown: (e) => onDateCellKeydown(e, date, groupIndex) + onKeyDown: (e) => onDateCellKeydown(e, date, groupIndex), + 'data-p-highlight': isSelected(date), + 'data-p-disabled': !date.selectable }, ptm('dayLabel', { context: { @@ -2959,7 +2964,9 @@ export const Calendar = React.memo( const content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex); const dayProps = mergeProps( { - className: cx('day', { date }) + className: cx('day', { date }), + 'data-p-today': date.today, + 'data-p-other-month': date.otherMonth }, ptm('day', { context: { @@ -2987,7 +2994,8 @@ export const Calendar = React.memo( const weekLabelContainerProps = mergeProps( { - className: cx('weekLabelContainer') + className: cx('weekLabelContainer'), + 'data-p-disabled': props.showWeek }, ptm('weekLabelContainer', { context: { @@ -3591,8 +3599,8 @@ export const Calendar = React.memo( return (
-
); } @@ -3632,7 +3640,9 @@ export const Calendar = React.memo( { className: cx('month', { isMonthSelected, isSelectable, i, currentYear }), onClick: (event) => onMonthSelect(event, i), - onKeyDown: (event) => onMonthCellKeydown(event, i) + onKeyDown: (event) => onMonthCellKeydown(event, i), + 'data-p-disabled': !m.selectable, + 'data-p-highlight': isMonthSelected(i) }, ptm('month', { context: { @@ -3672,7 +3682,9 @@ export const Calendar = React.memo( const yearProps = mergeProps( { className: cx('year', { isYearSelected, isSelectable, y }), - onClick: (event) => onYearSelect(event, y) + onClick: (event) => onYearSelect(event, y), + 'data-p-highlight': isYearSelected(y), + 'data-p-disabled': !isSelectable(0, -1, y) }, ptm('year', { context: { @@ -3718,7 +3730,7 @@ export const Calendar = React.memo( const rootProps = mergeProps( { id: props.id, - className: cx('root', { focusedState, isFilled }), + className: classNames(props.className, cx('root', { focusedState, isFilled })), style: props.style }, CalendarBase.getOtherProps(props), diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js index 4eb150a1cb..c754bebfd9 100644 --- a/components/lib/calendar/CalendarBase.js +++ b/components/lib/calendar/CalendarBase.js @@ -175,7 +175,7 @@ const styles = ` const classes = { root: ({ props, focusedState, isFilled }) => - classNames('p-calendar p-component p-inputwrapper', props.className, { + classNames('p-calendar p-component p-inputwrapper', { [`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon, 'p-calendar-disabled': props.disabled, 'p-calendar-timeonly': props.timeOnly, @@ -184,8 +184,8 @@ const classes = { }), dropdownButton: 'p-datepicker-trigger', buttonbar: 'p-datepicker-buttonbar', - todayButton: ({ props }) => classNames('p-button-text', props.todayButtonClassName), - clearButton: ({ props }) => classNames('p-button-text', props.clearButtonClassName), + todayButton: 'p-button-text', + clearButton: 'p-button-text', footer: 'p-datepicker-footer', yearPicker: 'p-yearpicker', year: ({ isYearSelected, isSelectable, y }) => classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': !isSelectable(0, -1, y) }), diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js index 9b8ec37305..9036cd5031 100644 --- a/components/lib/carousel/Carousel.js +++ b/components/lib/carousel/Carousel.js @@ -16,7 +16,10 @@ const CarouselItem = React.memo((props) => { const content = props.template(props.item); const itemClonedProps = mergeProps( { - className: cx(key, { itemProps: props }) + className: cx(key, { itemProps: props }), + 'data-p-carousel-item-active': props.active, + 'data-p-carousel-item-start': props.start, + 'data-p-carousel-item-end': props.end }, ptm(key) ); @@ -118,7 +121,7 @@ export const Carousel = React.memo( } if (itemsContainerRef.current) { - DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden'); + !isUnstyled() && DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden'); changePosition(totalShiftedItems); itemsContainerRef.current.style.transition = 'transform 500ms ease 0s'; } @@ -610,7 +613,8 @@ export const Carousel = React.memo( const indicatorProps = mergeProps( { key, - className: cx('indicator', { isActive }) + className: cx('indicator', { isActive }), + 'data-p-highlight': isActive }, getPTOptions('indicator') ); diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js index 7112f80139..5535e859ac 100644 --- a/components/lib/cascadeselect/CascadeSelectSub.js +++ b/components/lib/cascadeselect/CascadeSelectSub.js @@ -233,7 +233,9 @@ export const CascadeSelectSub = React.memo((props) => { { className: classNames(option.className, cx('item', { option, isOptionGroup, activeOptionState })), style: option.style, - role: 'none' + role: 'none', + 'data-p-item-group': isOptionGroup(option), + 'data-p-highlight': activeOptionState === option }, ptm('item') ); diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index 75fd83f6ad..e15b0f122a 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -166,7 +166,10 @@ export const Checkbox = React.memo( const inputProps = mergeProps( { - className: cx('input', { checked, focusedState }) + className: cx('input', { checked, focusedState }), + 'data-p-highlight': checked, + 'data-p-disabled': props.disabled, + 'data-p-focus': focusedState }, ptm('input') ); diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index 57f92466eb..fe5d0690dd 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -5,7 +5,7 @@ import { useMountEffect } from '../hooks/Hooks'; import { TimesCircleIcon } from '../icons/timescircle'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { ChipsBase } from './ChipsBase'; export const Chips = React.memo( @@ -257,7 +257,8 @@ export const Chips = React.memo( const tokenProps = mergeProps( { key: index, - className: cx('token') + className: cx('token'), + 'data-p-highlight': true }, ptm('token') ); @@ -314,7 +315,9 @@ export const Chips = React.memo( { ref: listRef, className: cx('container', { focusedState }), - onClick: (e) => onWrapperClick(e) + onClick: (e) => onWrapperClick(e), + 'data-p-disabled': props.disabled, + 'data-p-focus': focusedState }, ptm('container') ); @@ -335,7 +338,7 @@ export const Chips = React.memo( { id: props.id, ref: elementRef, - className: cx('root', { isFilled, focusedState }), + className: classNames(props.className, cx('root', { isFilled, focusedState })), style: props.style }, ptm('root') diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js index bdfc0e8cb2..39178ff2fd 100644 --- a/components/lib/chips/ChipsBase.js +++ b/components/lib/chips/ChipsBase.js @@ -82,15 +82,11 @@ const classes = { 'p-disabled': props.disabled, 'p-focus': focusedState }), - root: ({ props, isFilled, focusedState }) => - classNames( - 'p-chips p-component p-inputwrapper', - { - 'p-inputwrapper-filled': isFilled, - 'p-inputwrapper-focus': focusedState - }, - props.className - ) + root: ({ isFilled, focusedState }) => + classNames('p-chips p-component p-inputwrapper', { + 'p-inputwrapper-filled': isFilled, + 'p-inputwrapper-focus': focusedState + }) }; export const ChipsBase = ComponentBase.extend({ diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js index dba60c76bb..b2d0fe9754 100644 --- a/components/lib/contextmenu/ContextMenu.js +++ b/components/lib/contextmenu/ContextMenu.js @@ -259,7 +259,7 @@ export const ContextMenu = React.memo( const rootProps = mergeProps( { id: props.id, - className: cx('root', { context }), + className: classNames(props.className, cx('root', { context })), style: props.style, onClick: (e) => onMenuClick(e), onMouseEnter: (e) => onMenuMouseEnter(e) diff --git a/components/lib/contextmenu/ContextMenuBase.js b/components/lib/contextmenu/ContextMenuBase.js index b181e6c448..585ea79fde 100644 --- a/components/lib/contextmenu/ContextMenuBase.js +++ b/components/lib/contextmenu/ContextMenuBase.js @@ -47,8 +47,8 @@ const styles = ` `; const classes = { - root: ({ props, context }) => - classNames('p-contextmenu p-component', props.className, { + root: ({ context }) => + classNames('p-contextmenu p-component', { 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index 33ecd28183..af8807cb9c 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -6,7 +6,7 @@ import { ChevronDownIcon } from '../icons/chevrondown'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { DropdownBase } from './DropdownBase'; import { DropdownPanel } from './DropdownPanel'; @@ -846,11 +846,13 @@ export const Dropdown = React.memo( { id: props.id, ref: elementRef, - className: cx('root', { focusedState, overlayVisibleState }), + className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })), style: props.style, onClick: (e) => onClick(e), onMouseDown: props.onMouseDown, - onContextMenu: props.onContextMenu + onContextMenu: props.onContextMenu, + 'data-p-disabled': props.disabled, + 'data-p-focus': focusedState }, otherProps, ptm('root') diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index 458fa90e44..a961d9ce7c 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -4,17 +4,13 @@ import { ObjectUtils, classNames } from '../utils/Utils'; const classes = { root: ({ props, focusedState, overlayVisibleState }) => - classNames( - 'p-dropdown p-component p-inputwrapper', - { - 'p-disabled': props.disabled, - 'p-focus': focusedState, - 'p-dropdown-clearable': props.showClear && !props.disabled, - 'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value), - 'p-inputwrapper-focus': focusedState || overlayVisibleState - }, - props.className - ), + classNames('p-dropdown p-component p-inputwrapper', { + 'p-disabled': props.disabled, + 'p-focus': focusedState, + 'p-dropdown-clearable': props.showClear && !props.disabled, + 'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value), + 'p-inputwrapper-focus': focusedState || overlayVisibleState + }), input: ({ props, label }) => props.editable ? 'p-dropdown-label p-inputtext' @@ -30,22 +26,18 @@ const classes = { filterIcon: 'p-dropdown-filter-icon', filterContainer: ({ clearIcon }) => classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon }), filterInput: 'p-dropdown-filter p-inputtext p-component', - list: ({ options, virtualScrollerOptions }) => (virtualScrollerOptions ? classNames('p-dropdown-items', options.className) : 'p-dropdown-items'), - panel: ({ props, context }) => + list: ({ virtualScrollerOptions }) => (virtualScrollerOptions ? 'p-dropdown-items' : 'p-dropdown-items'), + panel: ({ context }) => classNames('p-dropdown-panel p-component', { 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), - item: ({ selected, disabled, label, option }) => - classNames( - 'p-dropdown-item', - { - 'p-highlight': selected, - 'p-disabled': disabled, - 'p-dropdown-item-empty': !label || label.length === 0 - }, - option && option.className - ), + item: ({ selected, disabled, label }) => + classNames('p-dropdown-item', { + 'p-highlight': selected, + 'p-disabled': disabled, + 'p-dropdown-item-empty': !label || label.length === 0 + }), wrapper: 'p-dropdown-items-wrapper', header: 'p-dropdown-header', footer: 'p-dropdown-footer' diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index 2980604a3c..fb0f3859e3 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; -import { mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; export const DropdownItem = React.memo((props) => { const { ptm, cx, selected, disabled, option, label } = props; @@ -26,13 +26,15 @@ export const DropdownItem = React.memo((props) => { const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label; const itemProps = mergeProps( { - className: cx('item'), + role: 'option', + key: props.label, + className: classNames(option.className, cx('item')), style: props.style, onClick: (e) => onClick(e), 'aria-label': label, - role: 'option', 'aria-selected': selected, - key: props.label + 'data-p-highlight': selected, + 'data-p-disabled': disabled }, getPTOptions('item', { selected, disabled, option, label }) ); diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index da0da6740c..7b6c38f279 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -231,7 +231,7 @@ export const DropdownPanel = React.memo( { ref: options.contentRef, style: options.style, - className: cx('list', { options, virtualScrollerProps: props.virtualScrollerOptions }), + className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })), role: 'listbox' }, ptm('list') diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index b450d3a352..ac4a8c0469 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -331,7 +331,8 @@ export const FileUpload = React.memo( const onDragOver = (event) => { if (!disabled) { event.dataTransfer.dropEffect = 'copy'; - DomHandler.addClass(contentRef.current, 'p-fileupload-highlight'); + !isUnstyled() && DomHandler.addClass(contentRef.current, 'p-fileupload-highlight'); + contentRef.current.setAttribute('data-p-highlight', true); event.stopPropagation(); event.preventDefault(); } @@ -340,7 +341,8 @@ export const FileUpload = React.memo( const onDragLeave = (event) => { if (!disabled) { event.dataTransfer.dropEffect = 'copy'; - DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight'); + !isUnstyled() && DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight'); + contentRef.current.setAttribute('data-p-highlight', false); } }; @@ -349,7 +351,8 @@ export const FileUpload = React.memo( return; } - DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight'); + !isUnstyled() && DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight'); + contentRef.current.setAttribute('data-p-highlight', false); event.stopPropagation(); event.preventDefault(); @@ -413,13 +416,15 @@ export const FileUpload = React.memo( const chooseIcon = IconUtils.getJSXIcon(icon, { ...chooseIconProps }, { props }); const chooseButtonProps = mergeProps( { - className: cx('chooseButton', { iconOnly, disabled, className, focusedState }), + className: classNames(className, cx('chooseButton', { iconOnly, disabled, className, focusedState })), style, onClick: choose, onKeyDown: (e) => onKeyDown(e), onFocus, onBlur, - tabIndex: 0 + tabIndex: 0, + 'data-p-disabled': disabled, + 'data-p-focus': focusedState }, ptm('chooseButton') ); @@ -616,7 +621,7 @@ export const FileUpload = React.memo( const buttonbarProps = mergeProps( { - className: cx('buttonbar'), + className: classNames(props.headerClassName, cx('buttonbar')), style: props.headerStyle }, ptm('buttonbar') @@ -656,12 +661,13 @@ export const FileUpload = React.memo( const contentProps = mergeProps( { ref: contentRef, - className: cx('content'), + className: classNames(props.contentClassName, cx('content')), style: props.contentStyle, onDragEnter: (e) => onDragEnter(e), onDragOver: (e) => onDragOver(e), onDragLeave: (e) => onDragLeave(e), - onDrop: (e) => onDrop(e) + onDrop: (e) => onDrop(e), + 'data-p-highlight': false }, ptm('content') ); @@ -712,7 +718,7 @@ export const FileUpload = React.memo( const input = !hasFiles && ; const rootProps = mergeProps( { - className: cx('root'), + className: classNames(props.className, cx('root')), style: props.style }, FileUploadBase.getOtherProps(props), @@ -721,7 +727,7 @@ export const FileUpload = React.memo( const basicButtonProps = mergeProps( { - className: cx('basicButton', { hasFiles, className: chooseOptions.className, disabled, focusedState }), + className: classNames(chooseOptions.className, cx('basicButton', { hasFiles, disabled, focusedState })), style: chooseOptions.style, tabIndex: 0, onMouseUp: onSimpleUploaderClick, diff --git a/components/lib/fileupload/FileUploadBase.js b/components/lib/fileupload/FileUploadBase.js index e306d236a9..e8e3e2d3fd 100644 --- a/components/lib/fileupload/FileUploadBase.js +++ b/components/lib/fileupload/FileUploadBase.js @@ -2,25 +2,21 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props }) => classNames(`p-fileupload p-fileupload-${props.mode} p-component`, props.className), - buttonbar: ({ props }) => classNames('p-fileupload-buttonbar', props.headerClassName), - content: ({ props }) => classNames('p-fileupload-content', props.contentClassName), - chooseButton: ({ iconOnly, disabled, className, focusedState }) => - classNames( - 'p-button p-fileupload-choose p-component', - { - 'p-disabled': disabled, - 'p-focus': focusedState, - 'p-button-icon-only': iconOnly - }, - className - ), + root: ({ props }) => classNames(`p-fileupload p-fileupload-${props.mode} p-component`), + buttonbar: 'p-fileupload-buttonbar', + content: 'p-fileupload-content', + chooseButton: ({ iconOnly, disabled, focusedState }) => + classNames('p-button p-fileupload-choose p-component', { + 'p-disabled': disabled, + 'p-focus': focusedState, + 'p-button-icon-only': iconOnly + }), label: 'p-button-label p-clickable', file: 'p-fileupload-row', fileName: 'p-fileupload-filename', thumbnail: 'p-fileupload-file-thumbnail', chooseButtonLabel: 'p-button-label p-clickable', - basicButton: ({ className, disabled, focusedState, hasFiles }) => classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': disabled, 'p-focus': focusedState }, className), + basicButton: ({ disabled, focusedState, hasFiles }) => classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': disabled, 'p-focus': focusedState }), chooseIcon: ({ props, iconOnly }) => (props.mode === 'basic' ? classNames('p-button-icon', { 'p-button-icon-left': !iconOnly }) : classNames('p-button-icon p-clickable', { 'p-button-icon-left': !iconOnly })), uploadIcon: ({ iconOnly }) => classNames('p-button-icon p-c', { 'p-button-icon-left': !iconOnly }), cancelIcon: ({ iconOnly }) => classNames('p-button-icon p-c', { 'p-button-icon-left': !iconOnly }) diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js index df1e662702..58fd22e27e 100644 --- a/components/lib/galleria/GalleriaItem.js +++ b/components/lib/galleria/GalleriaItem.js @@ -100,7 +100,8 @@ export const GalleriaItem = React.memo( type: 'button', className: cx('previousItemButton', { isDisabled }), onClick: navBackward, - disabled: isDisabled + disabled: isDisabled, + 'data-p-disabled': isDisabled }, ptm('previousItemButton') ); @@ -134,7 +135,8 @@ export const GalleriaItem = React.memo( type: 'button', className: cx('nextItemButton', { isDisabled }), onClick: navForward, - disabled: isDisabled + disabled: isDisabled, + 'data-p-disabled': isDisabled }, ptm('nextItemButton') ); @@ -179,7 +181,8 @@ export const GalleriaItem = React.memo( tabIndex: 0, onClick: () => onIndicatorClick(index), onMouseEnter: () => onIndicatorMouseEnter(index), - onKeyDown: (e) => onIndicatorKeyDown(e, index) + onKeyDown: (e) => onIndicatorKeyDown(e, index), + 'data-p-highlight': isActive }, ptm('indicator') ); diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js index b4eb0c778d..870311a2d4 100644 --- a/components/lib/galleria/GalleriaThumbnails.js +++ b/components/lib/galleria/GalleriaThumbnails.js @@ -32,7 +32,11 @@ const GalleriaThumbnailItem = React.memo((props) => { const thumbnailItemProps = mergeProps( { - className: classNames(props.className, cx('thumbnailItem', { subProps: props })) + className: classNames(props.className, cx('thumbnailItem', { subProps: props })), + 'data-p-galleria-thumbnail-item-current': subProps.current, + 'data-p-galleria-thumbnail-item-active': subProps.active, + 'data-p-galleria-thumbnail-item-start': subProps.start, + 'data-p-galleria-thumbnail-item-end': subProps.end }, ptm('thumbnailItem') ); @@ -352,7 +356,8 @@ export const GalleriaThumbnails = React.memo( { className: cx('previousThumbnailButton', { isDisabled }), onClick: navBackward, - disabled: isDisabled + disabled: isDisabled, + 'data-p-disabled': isDisabled }, ptm('previousThumbnailButton') ); @@ -385,7 +390,8 @@ export const GalleriaThumbnails = React.memo( { className: cx('nextThumbnailButton', { isDisabled }), onClick: navForward, - disabled: isDisabled + disabled: isDisabled, + 'data-p-disabled': isDisabled }, ptm('nextThumbnailButton') ); diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js index f0f2152834..5f8a474057 100644 --- a/components/lib/megamenu/MegaMenu.js +++ b/components/lib/megamenu/MegaMenu.js @@ -306,7 +306,7 @@ export const MegaMenu = React.memo( { key: key, id: item.id, - className: cx('submenuItem', { item }), + className: classNames(item.className, cx('submenuItem')), style: item.style, role: 'none' }, @@ -348,9 +348,10 @@ export const MegaMenu = React.memo( const submenuHeaderProps = mergeProps( { id: submenu.id, - className: cx('submenuHeader', { submenu }), + className: classNames(submenu.className, cx('submenuHeader', { submenu })), style: submenu.style, - role: 'presentation' + role: 'presentation', + 'data-p-disabled': submenu.disabled }, ptm('submenuHeader') ); @@ -570,7 +571,8 @@ export const MegaMenu = React.memo( onClick: (e) => onCategoryClick(e, category), onKeyDown: (e) => onCategoryKeyDown(e, category), role: 'menuitem', - 'aria-haspopup': category.items != null + 'aria-haspopup': category.items != null, + 'data-p-disabled': category.disabled }, getPTOptions(category, 'headerAction', index) ); @@ -579,7 +581,7 @@ export const MegaMenu = React.memo( { key: category.label + '_' + index, id: category.id, - className: cx('menuitem', { category, activeItemState }), + className: classNames(category.className, cx('menuitem', { category, activeItemState })), style: category.style, onMouseEnter: (e) => onCategoryMouseEnter(e, category), role: 'none', diff --git a/components/lib/megamenu/MegaMenuBase.js b/components/lib/megamenu/MegaMenuBase.js index 84df34ab6f..ef5d609c57 100644 --- a/components/lib/megamenu/MegaMenuBase.js +++ b/components/lib/megamenu/MegaMenuBase.js @@ -11,15 +11,11 @@ const classes = { separator: 'p-menu-separator', submenuIcon: 'p-submenu-icon', action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }), - submenuItem: ({ item }) => classNames('p-menuitem', item.className), + submenuItem: 'p-menuitem', submenuHeader: ({ submenu }) => - classNames( - 'p-megamenu-submenu-header', - { - 'p-disabled': submenu.disabled - }, - submenu.className - ), + classNames('p-megamenu-submenu-header', { + 'p-disabled': submenu.disabled + }), submenu: 'p-megamenu-submenu', panel: 'p-megamenu-panel', grid: 'p-megamenu-grid', @@ -55,7 +51,7 @@ const classes = { }, headerAction: ({ category }) => classNames('p-menuitem-link', { 'p-disabled': category.disabled }), menuButton: 'p-megamenu-button', - menuitem: ({ category, activeItemState }) => classNames('p-menuitem', { 'p-menuitem-active': category === activeItemState }, category.className), + menuitem: ({ category, activeItemState }) => classNames('p-menuitem', { 'p-menuitem-active': category === activeItemState }), menubar: 'p-megamenu-root-list', menu: 'p-megamenu-root-list', start: 'p-megamenu-start', diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index 0f162d83dd..b51abe22b6 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -158,9 +158,10 @@ export const Menu = React.memo( const items = submenu.items.map(createMenuItem); const submenuHeaderProps = mergeProps( { + role: 'presentation', className: classNames(submenu.className, cx('submenuHeader', { submenu })), style: sx('submenuHeader', { submenu }), - role: 'presentation' + 'data-p-disabled': submenu.disabled }, ptm('submenuHeader') ); @@ -219,7 +220,8 @@ export const Menu = React.memo( onClick: (event) => onItemClick(event, item), onKeyDown: (event) => onItemKeyDown(event, item), tabIndex: tabIndex, - 'aria-disabled': item.disabled + 'aria-disabled': item.disabled, + 'data-p-disabled': item.disabled }, ptm('action') ); diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 893f4d76c7..0b7ad4bfc2 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -7,7 +7,7 @@ import { TimesIcon } from '../icons/times'; import { TimesCircleIcon } from '../icons/timescircle'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { MultiSelectBase } from './MultiSelectBase'; import { MultiSelectPanel } from './MultiSelectPanel'; @@ -691,7 +691,7 @@ export const MultiSelect = React.memo( ref: elementRef, id: props.id, style: props.style, - className: cx('root', { focusedState, overlayVisibleState }), + className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })), ...otherProps, onClick: onClick }, diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js index eb72583b78..581c4b68d8 100644 --- a/components/lib/multiselect/MultiSelectBase.js +++ b/components/lib/multiselect/MultiSelectBase.js @@ -4,18 +4,14 @@ import { ObjectUtils, classNames } from '../utils/Utils'; const classes = { root: ({ props, focusedState, overlayVisibleState }) => - classNames( - 'p-multiselect p-component p-inputwrapper', - { - 'p-multiselect-chip': props.display === 'chip', - 'p-disabled': props.disabled, - 'p-multiselect-clearable': props.showClear && !props.disabled, - 'p-focus': focusedState, - 'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value), - 'p-inputwrapper-focus': focusedState || overlayVisibleState - }, - props.className - ), + classNames('p-multiselect p-component p-inputwrapper', { + 'p-multiselect-chip': props.display === 'chip', + 'p-disabled': props.disabled, + 'p-multiselect-clearable': props.showClear && !props.disabled, + 'p-focus': focusedState, + 'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value), + 'p-inputwrapper-focus': focusedState || overlayVisibleState + }), label: ({ props, empty }) => classNames('p-multiselect-label', { 'p-placeholder': empty && props.placeholder, @@ -23,18 +19,14 @@ const classes = { 'p-multiselect-items-label': !empty && props.display !== 'chip' && props.value.length > props.maxSelectedLabels }), panel: ({ panelProps: props, context, allowOptionSelect }) => - classNames( - 'p-multiselect-panel p-component', - { - 'p-multiselect-inline': props.inline, - 'p-multiselect-flex': props.flex, - 'p-multiselect-limited': !allowOptionSelect, - 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false - }, - props.panelClassName - ), - list: ({ virtualScrollerOptions }) => (virtualScrollerOptions ? classNames('p-multiselect-items p-component', options.className) : 'p-multiselect-items p-component'), + classNames('p-multiselect-panel p-component', { + 'p-multiselect-inline': props.inline, + 'p-multiselect-flex': props.flex, + 'p-multiselect-limited': !allowOptionSelect, + 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', + 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false + }), + list: ({ virtualScrollerOptions }) => (virtualScrollerOptions ? 'p-multiselect-items p-component' : 'p-multiselect-items p-component'), labelContainer: 'p-multiselect-label-container', triggerIcon: 'p-multiselect-trigger-icon p-c', trigger: 'p-multiselect-trigger', diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js index 88bcfa6ec5..cb79a6a245 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -56,7 +56,8 @@ export const MultiSelectItem = React.memo((props) => { const checkboxProps = mergeProps( { - className: cx('checkbox', { itemProps: props }) + className: cx('checkbox', { itemProps: props }), + 'data-p-highlight': props.selected }, getPTOptions('checkbox') ); @@ -70,6 +71,7 @@ export const MultiSelectItem = React.memo((props) => { onKeyDown: onKeyDown, role: 'option', 'aria-selected': props.selected, + 'data-p-highlight': props.selected, 'data-p-disabled': props.disabled }, getPTOptions('item') diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 6f9523d52f..42462b7c46 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -216,7 +216,7 @@ export const MultiSelectPanel = React.memo( { ref: options.contentRef, style: options.style, - className: cx('list', { virtualScrollerProps: props.virtualScrollerOptions, options }), + className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })), role: 'listbox', 'aria-multiselectable': true }, @@ -265,7 +265,7 @@ export const MultiSelectPanel = React.memo( const panelProps = mergeProps( { - className: cx('panel', { panelProps: props, context, allowOptionSelect }), + className: classNames(props.panelClassName, cx('panel', { panelProps: props, context, allowOptionSelect })), style: props.panelStyle, onClick: props.onClick }, diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js index cf3e53c219..d350411888 100644 --- a/components/lib/orderlist/OrderList.js +++ b/components/lib/orderlist/OrderList.js @@ -120,13 +120,13 @@ export const OrderList = React.memo( const findNextItem = (item) => { const nextItem = item.nextElementSibling; - return nextItem ? (!DomHandler.hasClass(nextItem, 'p-orderlist-item') ? findNextItem(nextItem) : nextItem) : null; + return nextItem ? (!DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item' ? findNextItem(nextItem) : nextItem) : null; }; const findPrevItem = (item) => { const prevItem = item.previousElementSibling; - return prevItem ? (!DomHandler.hasClass(prevItem, 'p-orderlist-item') ? findPrevItem(prevItem) : prevItem) : null; + return prevItem ? (!DomHandler.getAttribute(prevItem, 'data-pc-section') === 'item' ? findPrevItem(prevItem) : prevItem) : null; }; const onReorder = (event) => { diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js index 6db2562930..81dec28374 100644 --- a/components/lib/orderlist/OrderListSubList.js +++ b/components/lib/orderlist/OrderListSubList.js @@ -153,12 +153,13 @@ export const OrderListSubList = React.memo((props) => { } else { const itemProps = mergeProps( { + role: 'option', + tabIndex: props.tabIndex, className: classNames(props.className, cx('item', { item, isSelected })), onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }), onKeyDown: (e) => props.onItemKeyDown({ originalEvent: e, value: item, index: i }), - role: 'option', 'aria-selected': isSelected(item), - tabIndex: props.tabIndex + 'data-p-highlight': isSelected(item) }, getPTOptions(item, 'item') );