From b3c581d63e549e41e11f4d0c781343c336e09b8a Mon Sep 17 00:00:00 2001 From: Ben Weis Date: Wed, 1 Nov 2023 02:05:01 -0400 Subject: [PATCH] Added tailwind-merge support --- components/doc/common/apidoc/index.json | 19 +- .../doc/passthrough/usepassthroughdoc.js | 17 +- .../doc/tailwind/unstyledmode/setupdoc.js | 24 +- components/lib/accordion/Accordion.js | 149 ++-- components/lib/api/PrimeReactContext.js | 5 +- components/lib/api/api.d.ts | 5 + components/lib/autocomplete/AutoComplete.js | 160 ++-- .../lib/autocomplete/AutoCompletePanel.js | 187 ++-- components/lib/avatar/Avatar.js | 52 +- components/lib/avatargroup/AvatarGroup.js | 17 +- components/lib/badge/Badge.js | 17 +- components/lib/blockui/BlockUI.js | 46 +- components/lib/breadcrumb/BreadCrumb.js | 165 ++-- components/lib/button/Button.js | 69 +- components/lib/calendar/Calendar.js | 811 +++++++++++------- components/lib/calendar/CalendarPanel.js | 46 +- components/lib/card/Card.js | 85 +- components/lib/carousel/Carousel.js | 216 +++-- components/lib/cascadeselect/CascadeSelect.js | 161 ++-- .../lib/cascadeselect/CascadeSelectSub.js | 75 +- components/lib/chart/Chart.js | 38 +- components/lib/checkbox/Checkbox.js | 95 +- components/lib/chip/Chip.js | 77 +- components/lib/chips/Chips.js | 119 +-- components/lib/colorpicker/ColorPicker.js | 136 +-- .../lib/colorpicker/ColorPickerPanel.js | 42 +- components/lib/componentbase/ComponentBase.js | 6 +- components/lib/confirmdialog/ConfirmDialog.js | 78 +- components/lib/confirmpopup/ConfirmPopup.js | 148 ++-- components/lib/contextmenu/ContextMenu.js | 48 +- components/lib/contextmenu/ContextMenuSub.js | 128 +-- components/lib/datascroller/DataScroller.js | 78 +- components/lib/datatable/BodyCell.js | 188 ++-- components/lib/datatable/BodyRow.js | 57 +- components/lib/datatable/ColumnFilter.js | 267 +++--- components/lib/datatable/DataTable.js | 134 +-- components/lib/datatable/FooterCell.js | 25 +- components/lib/datatable/HeaderCell.js | 120 +-- components/lib/datatable/HeaderCheckbox.js | 51 +- components/lib/datatable/RowCheckbox.js | 53 +- components/lib/datatable/RowRadioButton.js | 79 +- components/lib/datatable/RowTogglerButton.js | 36 +- components/lib/datatable/TableBody.js | 128 +-- components/lib/datatable/TableFooter.js | 41 +- components/lib/datatable/TableHeader.js | 60 +- components/lib/dataview/DataView.js | 147 ++-- .../lib/deferredcontent/DeferredContent.js | 13 +- components/lib/dialog/Dialog.js | 204 +++-- components/lib/divider/Divider.js | 30 +- components/lib/dock/Dock.js | 114 ++- components/lib/dropdown/Dropdown.js | 203 +++-- components/lib/dropdown/DropdownItem.js | 29 +- components/lib/dropdown/DropdownPanel.js | 193 +++-- components/lib/editor/Editor.js | 45 +- components/lib/fieldset/Fieldset.js | 126 +-- components/lib/fileupload/FileUpload.js | 277 +++--- components/lib/galleria/Galleria.js | 122 +-- components/lib/galleria/GalleriaItem.js | 142 +-- components/lib/galleria/GalleriaThumbnails.js | 149 ++-- components/lib/image/Image.js | 269 +++--- components/lib/inplace/Inplace.js | 72 +- components/lib/inputnumber/InputNumber.js | 104 ++- components/lib/inputswitch/InputSwitch.js | 74 +- components/lib/inputtext/InputText.js | 21 +- components/lib/inputtextarea/InputTextarea.js | 29 +- components/lib/knob/Knob.js | 97 ++- components/lib/listbox/ListBox.js | 96 ++- components/lib/listbox/ListBoxHeader.js | 35 +- components/lib/listbox/ListBoxItem.js | 33 +- components/lib/megamenu/MegaMenu.js | 302 ++++--- components/lib/mention/Mention.js | 134 +-- components/lib/menu/Menu.js | 165 ++-- components/lib/menubar/Menubar.js | 62 +- components/lib/menubar/MenubarSub.js | 113 ++- components/lib/message/Message.js | 41 +- components/lib/messages/Messages.js | 34 +- components/lib/messages/UIMessage.js | 109 ++- components/lib/multiselect/MultiSelect.js | 165 ++-- .../lib/multiselect/MultiSelectHeader.js | 89 +- components/lib/multiselect/MultiSelectItem.js | 64 +- .../lib/multiselect/MultiSelectPanel.js | 124 +-- .../multistatecheckbox/MultiStateCheckbox.js | 72 +- components/lib/orderlist/OrderList.js | 19 +- components/lib/orderlist/OrderListControls.js | 113 +-- components/lib/orderlist/OrderListSubList.js | 179 ++-- .../organizationchart/OrganizationChart.js | 19 +- .../OrganizationChartNode.js | 183 ++-- components/lib/overlaypanel/OverlayPanel.js | 93 +- components/lib/paginator/CurrentPageReport.js | 11 +- components/lib/paginator/FirstPageLink.js | 30 +- components/lib/paginator/LastPageLink.js | 33 +- components/lib/paginator/NextPageLink.js | 30 +- components/lib/paginator/PageLinks.js | 30 +- components/lib/paginator/Paginator.js | 40 +- components/lib/paginator/PrevPageLink.js | 33 +- components/lib/panel/Panel.js | 139 +-- components/lib/panelmenu/PanelMenu.js | 148 ++-- components/lib/panelmenu/PanelMenuSub.js | 135 +-- components/lib/passthrough/index.d.ts | 1 + components/lib/passthrough/index.js | 10 +- components/lib/password/Password.js | 141 +-- components/lib/picklist/PickList.js | 19 +- components/lib/picklist/PickListControls.js | 13 +- components/lib/picklist/PickListItem.js | 23 +- components/lib/picklist/PickListSubList.js | 97 ++- .../lib/picklist/PickListTransferControls.js | 13 +- components/lib/progressbar/ProgressBar.js | 88 +- .../lib/progressspinner/ProgressSpinner.js | 59 +- components/lib/radiobutton/RadioButton.js | 79 +- components/lib/rating/Rating.js | 88 +- components/lib/ripple/Ripple.js | 11 +- components/lib/row/Row.js | 15 +- components/lib/scrollpanel/ScrollPanel.js | 75 +- components/lib/scrolltop/ScrollTop.js | 57 +- components/lib/selectbutton/SelectButton.js | 21 +- .../lib/selectbutton/SelectButtonItem.js | 40 +- components/lib/sidebar/Sidebar.js | 124 +-- components/lib/skeleton/Skeleton.js | 17 +- components/lib/slidemenu/SlideMenu.js | 102 ++- components/lib/slidemenu/SlideMenuSub.js | 101 ++- components/lib/slider/Slider.js | 76 +- components/lib/speeddial/SpeedDial.js | 129 +-- components/lib/splitbutton/SplitButton.js | 30 +- components/lib/splitbutton/SplitButtonItem.js | 71 +- .../lib/splitbutton/SplitButtonPanel.js | 61 +- components/lib/splitter/Splitter.js | 76 +- components/lib/steps/Steps.js | 107 ++- components/lib/tabmenu/TabMenu.js | 115 ++- components/lib/tabview/TabView.js | 221 +++-- components/lib/tag/Tag.js | 39 +- components/lib/terminal/Terminal.js | 103 ++- components/lib/tieredmenu/TieredMenu.js | 48 +- components/lib/tieredmenu/TieredMenuSub.js | 115 ++- components/lib/timeline/Timeline.js | 81 +- components/lib/toast/Toast.js | 40 +- components/lib/toast/ToastMessage.js | 130 +-- components/lib/togglebutton/ToggleButton.js | 55 +- components/lib/toolbar/Toolbar.js | 54 +- components/lib/tooltip/Tooltip.js | 49 +- components/lib/tree/Tree.js | 129 +-- components/lib/tree/UITreeNode.js | 188 ++-- components/lib/treeselect/TreeSelect.js | 249 +++--- components/lib/treeselect/TreeSelectPanel.js | 55 +- components/lib/treetable/TreeTable.js | 139 +-- components/lib/treetable/TreeTableBody.js | 36 +- components/lib/treetable/TreeTableBodyCell.js | 42 +- components/lib/treetable/TreeTableFooter.js | 38 +- components/lib/treetable/TreeTableHeader.js | 165 ++-- components/lib/treetable/TreeTableRow.js | 135 +-- .../lib/treetable/TreeTableScrollableView.js | 122 ++- .../lib/tristatecheckbox/TriStateCheckbox.js | 77 +- components/lib/utils/MergeProps.js | 15 +- components/lib/utils/utils.d.ts | 2 +- .../lib/virtualscroller/VirtualScroller.js | 73 +- package-lock.json | 13 + package.json | 1 + 156 files changed, 8470 insertions(+), 5694 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 884b97984c..c661328a8a 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -780,6 +780,13 @@ "type": "boolean", "description": "When enabled, it removes all of components styles in the core." }, + { + "name": "useTailwind", + "optional": true, + "readonly": false, + "type": "boolean", + "description": "When enabled, all className merges will use twMerge" + }, { "name": "setAppendTo", "optional": true, @@ -38490,6 +38497,12 @@ "optional": true, "readonly": false, "type": "boolean" + }, + { + "name": "useTailwind", + "optional": true, + "readonly": false, + "type": "boolean" } ], "callbacks": [] @@ -52786,8 +52799,12 @@ "name": "mergeProps", "parameters": [ { - "name": "args", + "name": "props", "type": "object[]" + }, + { + "name": "options", + "type": "object" } ], "returnType": "object | undefined" diff --git a/components/doc/passthrough/usepassthroughdoc.js b/components/doc/passthrough/usepassthroughdoc.js index b63e2ec029..8a6e7895a4 100644 --- a/components/doc/passthrough/usepassthroughdoc.js +++ b/components/doc/passthrough/usepassthroughdoc.js @@ -22,7 +22,8 @@ export default function UsePassThroughDemo() { }, { mergeSections: true, - mergeProps: false + mergeProps: false, + useTailwind: false } ); @@ -43,7 +44,7 @@ const CustomTailwind = usePassThrough( header: 'my_panel_header' } }, - { mergeSections: true, mergeProps: false } + { mergeSections: true, mergeProps: false, useTailwind: false } ); // Output: @@ -59,7 +60,7 @@ const CustomTailwind = usePassThrough( header: 'my_panel_header' } }, - { mergeSections: true, mergeProps: true } + { mergeSections: true, mergeProps: true, useTailwind: false } ); // Output: @@ -76,7 +77,7 @@ const CustomTailwind = usePassThrough( header: 'my_panel_header' } }, - { mergeSections: false, mergeProps: true } + { mergeSections: false, mergeProps: true, useTailwind: false } ); // Output: @@ -93,7 +94,7 @@ const CustomTailwind = usePassThrough( header: 'my_panel_header' } }, - { mergeSections: false, mergeProps: false } + { mergeSections: false, mergeProps: false, useTailwind: false } ); // Output: @@ -114,6 +115,12 @@ const CustomTailwind = usePassThrough( The mergeSections defines whether the sections from the main configuration gets added and the mergeProps controls whether to override or merge the defined props. Defaults are true for mergeSections and false for mergeProps.

+

+ The useTailwind option should be set to true if using Tailwind to prevent className conflicts between the default Tailwind theme and your custom theme. If useTailwind is set to true mergeProps{' '} + will be overridden to true. +
+ See tailwind-merge for more information. +

diff --git a/components/doc/tailwind/unstyledmode/setupdoc.js b/components/doc/tailwind/unstyledmode/setupdoc.js index 718294c3ac..2a677b9e95 100644 --- a/components/doc/tailwind/unstyledmode/setupdoc.js +++ b/components/doc/tailwind/unstyledmode/setupdoc.js @@ -39,6 +39,20 @@ return( basic: ` import { PrimeReactProvider } from "primereact/api"; +... +return( + + + +) + +` + }; + + const code4 = { + basic: ` +import { PrimeReactProvider } from "primereact/api"; + export default function MyApp({ Component, pageProps }) { //My Design System with Tailwind @@ -124,12 +138,20 @@ export default function MyApp({ Component, pageProps }) {

+ + Optional: enable useTailwind to resolve className conflicts via tailwind-merge. This will prevent classNames specified in the global pass through from + overriding those specified via pass through in your application. + +

+ +

+ 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;

- +

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.

diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index 4f5be820cf..8cd1d84672 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -48,7 +48,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { } }; - return mergeProps(ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(tab.props, key, tabMetaData)); + return mergeProps([ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(tab.props, key, tabMetaData)], { useTailwind: context.useTailwind }); }; const getTabProp = (tab, name) => AccordionTabBase.getCProp(tab, name); @@ -108,44 +108,56 @@ export const Accordion = React.forwardRef((inProps, ref) => { const ariaControls = idState + '_content_' + index; const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex'); const headerTitleProps = mergeProps( - { - className: cx('tab.headertitle') - }, - getTabPT(tab, 'headertitle', index) + [ + { + className: cx('tab.headertitle') + }, + getTabPT(tab, 'headertitle', index) + ], + { useTailwind: context.useTailwind } ); const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : {getTabProp(tab, 'header')}; const headerIconProps = mergeProps( - { - className: cx('tab.headericon') - }, - getTabPT(tab, 'headericon', index) + [ + { + className: cx('tab.headericon') + }, + getTabPT(tab, 'headericon', index) + ], + { useTailwind: context.useTailwind } ); const icon = selected ? props.collapseIcon || : props.expandIcon || ; const toggleIcon = IconUtils.getJSXIcon(icon, { ...headerIconProps }, { props, selected }); const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'); const headerProps = mergeProps( - { - 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) + [ + { + 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) + ], + { useTailwind: context.useTailwind } ); const headerActionProps = mergeProps( - { - id: headerId, - href: '#' + ariaControls, - className: cx('tab.headeraction'), - role: 'tab', - tabIndex, - onClick: (e) => onTabHeaderClick(e, tab, index), - 'aria-label': label, - 'aria-controls': ariaControls, - 'aria-expanded': selected - }, - getTabPT(tab, 'headeraction', index) + [ + { + id: headerId, + href: '#' + ariaControls, + className: cx('tab.headeraction'), + role: 'tab', + tabIndex, + onClick: (e) => onTabHeaderClick(e, tab, index), + 'aria-label': label, + 'aria-controls': ariaControls, + 'aria-expanded': selected + }, + getTabPT(tab, 'headeraction', index) + ], + { useTailwind: context.useTailwind } ); return ( @@ -164,33 +176,42 @@ export const Accordion = React.forwardRef((inProps, ref) => { const ariaLabelledby = idState + '_header_' + index; const contentRef = React.createRef(); const toggleableContentProps = mergeProps( - { - id: contentId, - ref: contentRef, - className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('tab.toggleablecontent')), - style, - role: 'region', - 'aria-labelledby': ariaLabelledby - }, - getTabPT(tab, 'toggleablecontent', index) + [ + { + id: contentId, + ref: contentRef, + className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('tab.toggleablecontent')), + style, + role: 'region', + 'aria-labelledby': ariaLabelledby + }, + getTabPT(tab, 'toggleablecontent', index) + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - className: cx('tab.content') - }, - getTabPT(tab, 'content', index) + [ + { + className: cx('tab.content') + }, + getTabPT(tab, 'content', index) + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('tab.transition'), - timeout: { enter: 1000, exit: 450 }, - in: selected, - unmountOnExit: true, - options: props.transitionOptions - }, - getTabPT(tab, 'transition', index) + [ + { + classNames: cx('tab.transition'), + timeout: { enter: 1000, exit: 450 }, + in: selected, + unmountOnExit: true, + options: props.transitionOptions + }, + getTabPT(tab, 'transition', index) + ], + { useTailwind: context.useTailwind } ); return ( @@ -210,12 +231,15 @@ export const Accordion = React.forwardRef((inProps, ref) => { const tabContent = createTabContent(tab, selected, index); const rootProps = mergeProps( - { - key, - className: cx('tab.root', { selected }) - }, - AccordionTabBase.getCOtherProps(tab), - getTabPT(tab, 'root', index) + [ + { + key, + className: cx('tab.root', { selected }) + }, + AccordionTabBase.getCOtherProps(tab), + getTabPT(tab, 'root', index) + ], + { useTailwind: context.useTailwind } ); return ( @@ -235,12 +259,15 @@ export const Accordion = React.forwardRef((inProps, ref) => { const tabs = createTabs(); const rootProps = mergeProps( - { - className: classNames(props.className, cx('root')), - style: props.style - }, - AccordionBase.getOtherProps(props), - ptm('root') + [ + { + className: classNames(props.className, cx('root')), + style: props.style + }, + AccordionBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/api/PrimeReactContext.js b/components/lib/api/PrimeReactContext.js index f04439bc28..7609d490cd 100644 --- a/components/lib/api/PrimeReactContext.js +++ b/components/lib/api/PrimeReactContext.js @@ -32,6 +32,7 @@ export const PrimeReactProvider = (props) => { ); const [pt, setPt] = useState(propsValue.pt || undefined); const [unstyled, setUnstyled] = useState(propsValue.unstyled || false); + const [useTailwind, setUseTailwind] = useState(propsValue.useTailwind || false); const [filterMatchModeOptions, setFilterMatchModeOptions] = useState( propsValue.filterMatchModeOptions || { text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS], @@ -87,7 +88,9 @@ export const PrimeReactProvider = (props) => { filterMatchModeOptions, setFilterMatchModeOptions, unstyled, - setUnstyled + setUnstyled, + useTailwind, + setUseTailwind }; return {props.children}; diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 7108b391fa..adc1fd224e 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -217,6 +217,11 @@ export interface APIOptions { * @defaultValue false */ unstyled?: boolean; + /** + * When enabled, all className merges will use twMerge + * @defaultValue false + */ + useTailwind?: boolean; /** * This method is used to change the theme dynamically. * @param {string} theme - The name of the theme to be applied. diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index d8c5930124..1845ac2b26 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -574,25 +574,34 @@ export const AutoComplete = React.memo( return props.value.map((val, index) => { const key = index + 'multi-item'; const removeTokenIconProps = mergeProps( - { - className: cx('removeTokenIcon'), - onClick: (e) => removeItem(e, index) - }, - ptm('removeTokenIcon') + [ + { + className: cx('removeTokenIcon'), + onClick: (e) => removeItem(e, index) + }, + ptm('removeTokenIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.removeTokenIcon || ; const removeTokenIcon = !props.disabled && IconUtils.getJSXIcon(icon, { ...removeTokenIconProps }, { props }); const tokenProps = mergeProps( - { - className: cx('token') - }, - ptm('token') + [ + { + className: cx('token') + }, + ptm('token') + ], + { useTailwind: context.useTailwind } ); const tokenLabelProps = mergeProps( - { - className: cx('tokenLabel') - }, - ptm('tokenLabel') + [ + { + className: cx('tokenLabel') + }, + ptm('tokenLabel') + ], + { useTailwind: context.useTailwind } ); return ( @@ -610,40 +619,46 @@ export const AutoComplete = React.memo( const createMultiInput = (allowMoreValues) => { const ariaControls = overlayVisibleState ? idState + '_list' : null; const inputTokenProps = mergeProps( - { - className: cx('inputToken') - }, - ptm('inputToken') + [ + { + className: cx('inputToken') + }, + ptm('inputToken') + ], + { useTailwind: context.useTailwind } ); const inputProps = mergeProps( - { - id: props.inputId, - ref: inputRef, - 'aria-autocomplete': 'list', - 'aria-controls': ariaControls, - 'aria-expanded': overlayVisibleState, - 'aria-haspopup': 'listbox', - autoComplete: 'off', - className: props.inputClassName, - disabled: props.disabled, - maxLength: props.maxLength, - name: props.name, - onBlur: onMultiInputBlur, - onChange: allowMoreValues ? onInputChange : undefined, - onFocus: onMultiInputFocus, - onKeyDown: allowMoreValues ? onInputKeyDown : undefined, - onKeyPress: props.onKeyPress, - onKeyUp: props.onKeyUp, - placeholder: allowMoreValues ? props.placeholder : undefined, - readOnly: props.readOnly || !allowMoreValues, - required: props.required, - role: 'combobox', - style: props.inputStyle, - tabIndex: props.tabIndex, - type: props.type, - ...ariaProps - }, - ptm('input') + [ + { + id: props.inputId, + ref: inputRef, + 'aria-autocomplete': 'list', + 'aria-controls': ariaControls, + 'aria-expanded': overlayVisibleState, + 'aria-haspopup': 'listbox', + autoComplete: 'off', + className: props.inputClassName, + disabled: props.disabled, + maxLength: props.maxLength, + name: props.name, + onBlur: onMultiInputBlur, + onChange: allowMoreValues ? onInputChange : undefined, + onFocus: onMultiInputFocus, + onKeyDown: allowMoreValues ? onInputKeyDown : undefined, + onKeyPress: props.onKeyPress, + onKeyUp: props.onKeyUp, + placeholder: allowMoreValues ? props.placeholder : undefined, + readOnly: props.readOnly || !allowMoreValues, + required: props.required, + role: 'combobox', + style: props.inputStyle, + tabIndex: props.tabIndex, + type: props.type, + ...ariaProps + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ( @@ -658,17 +673,20 @@ export const AutoComplete = React.memo( const tokens = createChips(); const input = createMultiInput(allowMoreValues); const containerProps = mergeProps( - { - ref: multiContainerRef, - className: cx('container'), - onClick: allowMoreValues ? onMultiContainerClick : undefined, - onContextMenu: props.onContextMenu, - onMouseDown: props.onMouseDown, - onDoubleClick: props.onDblClick, - 'data-p-focus': focusedState, - 'data-p-disabled': props.disabled - }, - ptm('container') + [ + { + ref: multiContainerRef, + className: cx('container'), + onClick: allowMoreValues ? onMultiContainerClick : undefined, + onContextMenu: props.onContextMenu, + onMouseDown: props.onMouseDown, + onDoubleClick: props.onDblClick, + 'data-p-focus': focusedState, + 'data-p-disabled': props.disabled + }, + ptm('container') + ], + { useTailwind: context.useTailwind } ); return ( @@ -703,10 +721,13 @@ export const AutoComplete = React.memo( const createLoader = () => { if (searchingState) { const loadingIconProps = mergeProps( - { - className: cx('loadingIcon') - }, - ptm('loadingIcon') + [ + { + className: cx('loadingIcon') + }, + ptm('loadingIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.loadingIcon || ; const loaderIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props }); @@ -729,14 +750,17 @@ export const AutoComplete = React.memo( const input = createInput(); const dropdown = createDropdown(); const rootProps = mergeProps( - { - id: idState, - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root', { focusedState })) - }, - otherProps, - ptm('root') + [ + { + id: idState, + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root', { focusedState })) + }, + otherProps, + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js index 4bdf8653c9..fb1f219645 100644 --- a/components/lib/autocomplete/AutoCompletePanel.js +++ b/components/lib/autocomplete/AutoCompletePanel.js @@ -34,10 +34,13 @@ export const AutoCompletePanel = React.memo( if (props.panelFooterTemplate) { const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide); const footerProps = mergeProps( - { - className: cx('footer') - }, - _ptm('footer') + [ + { + className: cx('footer') + }, + _ptm('footer') + ], + { useTailwind: context.useTailwind } ); return
{content}
; @@ -54,17 +57,20 @@ export const AutoCompletePanel = React.memo( const selected = props.selectedItem === item; const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, item, j) : props.field ? ObjectUtils.resolveFieldData(item, props.field) : item; const itemProps = mergeProps( - { - role: 'option', - 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-p-disabled': item.disabled - }, - getPTOptions(item, 'item') + [ + { + role: 'option', + 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-p-disabled': item.disabled + }, + getPTOptions(item, 'item') + ], + { useTailwind: context.useTailwind } ); return ( @@ -84,12 +90,15 @@ export const AutoCompletePanel = React.memo( const childrenContent = createGroupChildren(suggestion, index, style); const key = index + '_' + getOptionGroupRenderKey(suggestion); const itemGroupProps = mergeProps( - { - className: cx('itemGroup'), - style, - 'data-p-highlight': false - }, - _ptm('itemGroup') + [ + { + className: cx('itemGroup'), + style, + 'data-p-highlight': false + }, + _ptm('itemGroup') + ], + { useTailwind: context.useTailwind } ); return ( @@ -101,16 +110,19 @@ export const AutoCompletePanel = React.memo( } else { const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion; const itemProps = mergeProps( - { - index, - role: 'option', - className: cx('item', { suggestion }), - style, - onClick: (e) => props.onItemClick(e, suggestion), - 'aria-selected': props.selectedItem === suggestion, - 'data-p-disabled': suggestion.disabled - }, - getPTOptions(suggestion, 'item') + [ + { + index, + role: 'option', + className: cx('item', { suggestion }), + style, + onClick: (e) => props.onItemClick(e, suggestion), + 'aria-selected': props.selectedItem === suggestion, + 'data-p-disabled': suggestion.disabled + }, + getPTOptions(suggestion, 'item') + ], + { useTailwind: context.useTailwind } ); return ( @@ -130,17 +142,23 @@ export const AutoCompletePanel = React.memo( if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) { const emptyMessage = props.emptyMessage || localeOption('emptyMessage'); const emptyMessageProps = mergeProps( - { - className: cx('emptyMessage') - }, - _ptm('emptyMesage') + [ + { + className: cx('emptyMessage') + }, + _ptm('emptyMesage') + ], + { useTailwind: context.useTailwind } ); const listProps = mergeProps( - { - className: cx('list') - }, - _ptm('list') + [ + { + className: cx('list') + }, + _ptm('list') + ], + { useTailwind: context.useTailwind } ); return ( @@ -160,14 +178,17 @@ export const AutoCompletePanel = React.memo( itemTemplate: (item, options) => item && createItem(item, options.index, options), contentTemplate: (options) => { const listProps = mergeProps( - { - id: props.listId, - ref: options.contentRef, - style: options.style, - className: cx('list', { virtualScrollerProps, options }), - role: 'listbox' - }, - _ptm('list') + [ + { + id: props.listId, + ref: options.contentRef, + style: options.style, + className: cx('list', { virtualScrollerProps, options }), + role: 'listbox' + }, + _ptm('list') + ], + { useTailwind: context.useTailwind } ); return
    {options.children}
; @@ -179,20 +200,26 @@ export const AutoCompletePanel = React.memo( } else { const items = createItems(); const listProps = mergeProps( - { - id: props.listId, - className: cx('list'), - role: 'listbox' - }, - _ptm('list') + [ + { + id: props.listId, + className: cx('list'), + role: 'listbox' + }, + _ptm('list') + ], + { useTailwind: context.useTailwind } ); const listWrapperProps = mergeProps( - { - className: cx('listWrapper'), - style: { maxHeight: props.scrollHeight || 'auto' } - }, - _ptm('listWrapper') + [ + { + className: cx('listWrapper'), + style: { maxHeight: props.scrollHeight || 'auto' } + }, + _ptm('listWrapper') + ], + { useTailwind: context.useTailwind } ); return ( @@ -208,28 +235,34 @@ export const AutoCompletePanel = React.memo( const content = createContent(); const footer = createFooter(); const panelProps = mergeProps( - { - className: classNames(props.panelClassName, cx('panel', { context })), - style, - onClick: (e) => props.onClick(e) - }, - _ptm('panel') + [ + { + className: classNames(props.panelClassName, cx('panel', { context })), + style, + onClick: (e) => props.onClick(e) + }, + _ptm('panel') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: props.in, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: props.onEnter, - onEntering: props.onEntering, - onEntered: props.onEntered, - onExit: props.onExit, - onExited: props.onExited - }, - _ptm('transition') + [ + { + classNames: cx('transition'), + in: props.in, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: props.onEnter, + onEntering: props.onEntering, + onEntered: props.onEntered, + onExit: props.onExit, + onExited: props.onExited + }, + _ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js index 10703d22dd..6bb68da23a 100644 --- a/components/lib/avatar/Avatar.js +++ b/components/lib/avatar/Avatar.js @@ -25,29 +25,38 @@ export const Avatar = React.forwardRef((inProps, ref) => { const createContent = () => { if (ObjectUtils.isNotEmpty(props.image) && !imageFailed) { const imageProps = mergeProps( - { - src: props.image, - onError: onImageError - }, - ptm('image') + [ + { + src: props.image, + onError: onImageError + }, + ptm('image') + ], + { useTailwind: context.useTailwind } ); return {props.imageAlt}; } else if (props.label) { const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); return {props.label}; } else if (props.icon) { const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); return IconUtils.getJSXIcon(props.icon, { ...iconProps }, { props }); @@ -83,13 +92,16 @@ export const Avatar = React.forwardRef((inProps, ref) => { })); const rootProps = mergeProps( - { - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root', { imageFailed })) - }, - AvatarBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root', { imageFailed })) + }, + AvatarBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent(); diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js index a714d0de05..6a60c78130 100644 --- a/components/lib/avatargroup/AvatarGroup.js +++ b/components/lib/avatargroup/AvatarGroup.js @@ -22,13 +22,16 @@ export const AvatarGroup = React.forwardRef((inProps, ref) => { })); const rootProps = mergeProps( - { - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root')) - }, - AvatarGroupBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root')) + }, + AvatarGroupBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return
{props.children}
; diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js index 27cfa02f50..2478e595cc 100644 --- a/components/lib/badge/Badge.js +++ b/components/lib/badge/Badge.js @@ -24,13 +24,16 @@ export const Badge = React.memo( })); const rootProps = mergeProps( - { - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root')) - }, - BadgeBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root')) + }, + BadgeBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return {props.value}; diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js index 64aa69a7a4..176457af3f 100644 --- a/components/lib/blockui/BlockUI.js +++ b/components/lib/blockui/BlockUI.js @@ -85,18 +85,21 @@ export const BlockUI = React.forwardRef((inProps, ref) => { if (visibleState) { const appendTo = props.fullScreen ? document.body : 'self'; const maskProps = mergeProps( - { - className: classNames(props.className, cx('mask')), - style: { - ...props.style, - position: props.fullScreen ? 'fixed' : 'absolute', - top: '0', - left: '0', - width: '100%', - height: '100%' - } - }, - ptm('mask') + [ + { + className: classNames(props.className, cx('mask')), + style: { + ...props.style, + position: props.fullScreen ? 'fixed' : 'absolute', + top: '0', + left: '0', + width: '100%', + height: '100%' + } + }, + ptm('mask') + ], + { useTailwind: context.useTailwind } ); const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : null; const mask = ( @@ -114,14 +117,17 @@ export const BlockUI = React.forwardRef((inProps, ref) => { const mask = createMask(); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - style: props.containerStyle, - className: cx('root') - }, - BlockUIBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + style: props.containerStyle, + className: cx('root') + }, + BlockUIBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index 88d682bf11..48ec3f23dc 100644 --- a/components/lib/breadcrumb/BreadCrumb.js +++ b/components/lib/breadcrumb/BreadCrumb.js @@ -50,28 +50,37 @@ export const BreadCrumb = React.memo( const { icon: _icon, target, url, disabled, style, className: _className, template, label: _label } = home; const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(_icon, { ...iconProps }, { props }); const actionProps = mergeProps( - { - href: url || '#', - className: cx('action'), - 'aria-disabled': disabled, - target, - onClick: (event) => itemClick(event, home) - }, - ptm('action') + [ + { + href: url || '#', + className: cx('action'), + 'aria-disabled': disabled, + target, + onClick: (event) => itemClick(event, home) + }, + ptm('action') + ], + { useTailwind: context.useTailwind } ); const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); const label = _label && {_label}; let content = ( @@ -95,13 +104,16 @@ export const BreadCrumb = React.memo( const key = idState + '_home'; const menuitemProps = mergeProps( - { - id: key, - key, - className: cx('home', { _className, disabled }), - style - }, - ptm('home') + [ + { + id: key, + key, + className: cx('home', { _className, disabled }), + style + }, + ptm('home') + ], + { useTailwind: context.useTailwind } ); return
  • {content}
    • ; @@ -113,21 +125,27 @@ export const BreadCrumb = React.memo( const createSeparator = (index) => { const key = idState + '_sep_' + index; const separatorIconProps = mergeProps( - { - className: cx('separatorIcon') - }, - ptm('separatorIcon') + [ + { + className: cx('separatorIcon') + }, + ptm('separatorIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.separatorIcon || ; const separatorIcon = IconUtils.getJSXIcon(icon, { ...separatorIconProps }, { props }); const separatorProps = mergeProps( - { - id: key, - key, - className: cx('separator'), - role: 'separator' - }, - ptm('separator') + [ + { + id: key, + key, + className: cx('separator'), + role: 'separator' + }, + ptm('separator') + ], + { useTailwind: context.useTailwind } ); return
  • {separatorIcon}
    • ; @@ -139,21 +157,27 @@ export const BreadCrumb = React.memo( } const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); const label = item.label && {item.label}; const actionProps = mergeProps( - { - href: item.url || '#', - className: cx('action'), - target: item.target, - onClick: (event) => itemClick(event, item), - 'aria-disabled': item.disabled - }, - ptm('action') + [ + { + href: item.url || '#', + className: cx('action'), + target: item.target, + onClick: (event) => itemClick(event, item), + 'aria-disabled': item.disabled + }, + ptm('action') + ], + { useTailwind: context.useTailwind } ); let content = {label}; @@ -171,13 +195,16 @@ export const BreadCrumb = React.memo( const key = item.id || idState + '_' + index; const menuitemProps = mergeProps( - { - id: key, - key, - className: cx('menuitem', { item }), - style: item.style - }, - ptm('menuitem') + [ + { + id: key, + key, + className: cx('menuitem', { item }), + style: item.style + }, + ptm('menuitem') + ], + { useTailwind: context.useTailwind } ); return
  • {content}
    • ; @@ -223,21 +250,27 @@ export const BreadCrumb = React.memo( const items = createMenuitems(); const separator = createSeparator('home'); const menuProps = mergeProps( - { - className: cx('menu') - }, - ptm('menu') + [ + { + className: cx('menu') + }, + ptm('menu') + ], + { useTailwind: context.useTailwind } ); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - className: cx('root'), - style: props.style, - 'aria-label': 'Breadcrumb' - }, - BreadCrumbBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + className: cx('root'), + style: props.style, + 'aria-label': 'Breadcrumb' + }, + BreadCrumbBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js index 79147c129d..add065a7e1 100644 --- a/components/lib/button/Button.js +++ b/components/lib/button/Button.js @@ -42,10 +42,13 @@ export const Button = React.memo( }); const iconsProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); className = classNames(className, { @@ -53,10 +56,13 @@ export const Button = React.memo( }); const loadingIconProps = mergeProps( - { - className: cx('loadingIcon', { className }) - }, - ptm('loadingIcon') + [ + { + className: cx('loadingIcon', { className }) + }, + ptm('loadingIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.loading ? props.loadingIcon || : props.icon; @@ -66,10 +72,13 @@ export const Button = React.memo( const createLabel = () => { const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); if (props.label) { @@ -82,13 +91,16 @@ export const Button = React.memo( const createBadge = () => { if (props.badge) { const badgeProps = mergeProps( - { - className: classNames(props.badgeClassName), - value: props.badge, - unstyled: props.unstyled, - __parentMetadata: { parent: metaData } - }, - ptm('badge') + [ + { + className: classNames(props.badgeClassName), + value: props.badge, + unstyled: props.unstyled, + __parentMetadata: { parent: metaData } + }, + ptm('badge') + ], + { useTailwind: context.useTailwind } ); return {props.badge}; @@ -111,14 +123,17 @@ export const Button = React.memo( const defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label']; const rootProps = mergeProps( - { - ref: elementRef, - 'aria-label': defaultAriaLabel, - className: classNames(props.className, cx('root', { size, disabled })), - disabled: disabled - }, - ButtonBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + 'aria-label': defaultAriaLabel, + className: classNames(props.className, cx('root', { size, disabled })), + disabled: disabled + }, + ButtonBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 9538a1fd8f..60869ef105 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -2655,20 +2655,26 @@ export const Calendar = React.memo( const createBackwardNavigator = (isVisible) => { const navigatorProps = isVisible ? { onClick: onPrevButtonClick, onKeyDown: (e) => onContainerButtonKeydown(e) } : { style: { visibility: 'hidden' } }; const previousIconProps = mergeProps( - { - className: cx('previousIcon') - }, - ptm('previousIcon') + [ + { + className: cx('previousIcon') + }, + ptm('previousIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.prevIcon || ; const backwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...previousIconProps }, { props }); const previousButtonProps = mergeProps( - { - type: 'button', - className: cx('previousButton'), - ...navigatorProps - }, - ptm('previousButton') + [ + { + type: 'button', + className: cx('previousButton'), + ...navigatorProps + }, + ptm('previousButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -2682,20 +2688,26 @@ export const Calendar = React.memo( const createForwardNavigator = (isVisible) => { const navigatorProps = isVisible ? { onClick: onNextButtonClick, onKeyDown: (e) => onContainerButtonKeydown(e) } : { style: { visibility: 'hidden' } }; const nextIconProps = mergeProps( - { - className: cx('nextIcon') - }, - ptm('nextIcon') + [ + { + className: cx('nextIcon') + }, + ptm('nextIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.nextIcon || ; const forwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...nextIconProps }, { props }); const nextButtonProps = mergeProps( - { - type: 'button', - className: cx('nextButton'), - ...navigatorProps - }, - ptm('nextButton') + [ + { + type: 'button', + className: cx('nextButton'), + ...navigatorProps + }, + ptm('nextButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -2717,21 +2729,27 @@ export const Calendar = React.memo( .filter((option) => !!option); const displayedMonthNames = displayedMonthOptions.map((option) => option.label); const selectProps = mergeProps( - { - className: cx('select'), - onChange: (e) => onMonthDropdownChange(e, e.target.value), - value: viewMonth - }, - ptm('select') + [ + { + className: cx('select'), + onChange: (e) => onMonthDropdownChange(e, e.target.value), + value: viewMonth + }, + ptm('select') + ], + { useTailwind: context.useTailwind } ); const content = ( {displayedYearNames.map((year) => { const optionProps = mergeProps( - { - value: year - }, - ptm('option') + [ + { + value: year + }, + ptm('option') + ], + { useTailwind: context.useTailwind } ); return ( @@ -2834,12 +2861,15 @@ export const Calendar = React.memo( const displayYear = props.numberOfMonths > 1 ? metaYear : currentYear; const yearTitleProps = mergeProps( - { - className: cx('yearTitle'), - onClick: (e) => switchToYearView(e), - disabled: switchViewButtonDisabled() - }, - ptm('yearTitle') + [ + { + className: cx('yearTitle'), + onClick: (e) => switchToYearView(e), + disabled: switchViewButtonDisabled() + }, + ptm('yearTitle') + ], + { useTailwind: context.useTailwind } ); return currentView !== 'year' && ; @@ -2848,14 +2878,17 @@ export const Calendar = React.memo( const createTitleDecadeElement = () => { const years = yearPickerValues(); const decadeTitleProps = mergeProps( - { - className: cx('decadeTitle') - }, - ptm('decadeTitle') + [ + { + className: cx('decadeTitle') + }, + ptm('decadeTitle') + ], + { useTailwind: context.useTailwind } ); if (currentView === 'year') { - const decadeTitleTextProps = mergeProps(ptm('decadeTitleText')); + const decadeTitleTextProps = mergeProps([ptm('decadeTitleText')], { useTailwind: context.useTailwind }); return {props.decadeTemplate ? props.decadeTemplate(years) : {`${yearPickerValues()[0]} - ${yearPickerValues()[yearPickerValues().length - 1]}`}}; } @@ -2868,10 +2901,13 @@ export const Calendar = React.memo( const year = createTitleYearElement(monthMetaData.year); const decade = createTitleDecadeElement(); const titleProps = mergeProps( - { - className: cx('title') - }, - ptm('title') + [ + { + className: cx('title') + }, + ptm('title') + ], + { useTailwind: context.useTailwind } ); const showMonthAfterYear = localeOption('showMonthAfterYear', props.locale); @@ -2885,12 +2921,15 @@ export const Calendar = React.memo( }; const createDayNames = (weekDays) => { - const weekDayProps = mergeProps(ptm('weekDay')); + const weekDayProps = mergeProps([ptm('weekDay')], { useTailwind: context.useTailwind }); const tableHeaderCellProps = mergeProps( - { - scope: 'col' - }, - ptm('tableHeaderCell') + [ + { + scope: 'col' + }, + ptm('tableHeaderCell') + ], + { useTailwind: context.useTailwind } ); const dayNames = weekDays.map((weekDay, index) => ( @@ -2900,19 +2939,22 @@ export const Calendar = React.memo( if (props.showWeek) { const weekHeaderProps = mergeProps( - { - scope: 'col', - className: cx('weekHeader'), - 'data-p-disabled': props.showWeek - }, - ptm('weekHeader', { - context: { - disabled: props.showWeek - } - }) + [ + { + scope: 'col', + className: cx('weekHeader'), + 'data-p-disabled': props.showWeek + }, + ptm('weekHeader', { + context: { + disabled: props.showWeek + } + }) + ], + { useTailwind: context.useTailwind } ); - const weekLabel = mergeProps(ptm('weekLabel')); + const weekLabel = mergeProps([ptm('weekLabel')], { useTailwind: context.useTailwind }); const weekHeader = ( @@ -2930,19 +2972,22 @@ export const Calendar = React.memo( const content = props.dateTemplate ? props.dateTemplate(date) : date.day; const dayLabelProps = mergeProps( - { - className: cx('dayLabel', { className }), - onClick: (e) => onDateSelect(e, date), - onKeyDown: (e) => onDateCellKeydown(e, date, groupIndex), - 'data-p-highlight': isSelected(date), - 'data-p-disabled': !date.selectable - }, - ptm('dayLabel', { - context: { - selected: isSelected(date), - disabled: !date.selectable - } - }) + [ + { + className: cx('dayLabel', { className }), + onClick: (e) => onDateSelect(e, date), + onKeyDown: (e) => onDateCellKeydown(e, date, groupIndex), + 'data-p-highlight': isSelected(date), + 'data-p-disabled': !date.selectable + }, + ptm('dayLabel', { + context: { + selected: isSelected(date), + disabled: !date.selectable + } + }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -2959,18 +3004,21 @@ export const Calendar = React.memo( const dateClassName = classNames({ 'p-highlight': selected, 'p-disabled': !date.selectable }); const content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex); const dayProps = mergeProps( - { - className: cx('day', { date }), - 'data-p-today': date.today, - 'data-p-other-month': date.otherMonth - }, - ptm('day', { - context: { - date, - today: date.today, - otherMonth: date.otherMonth - } - }) + [ + { + className: cx('day', { date }), + 'data-p-today': date.today, + 'data-p-other-month': date.otherMonth + }, + ptm('day', { + context: { + date, + today: date.today, + otherMonth: date.otherMonth + } + }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -2982,22 +3030,28 @@ export const Calendar = React.memo( if (props.showWeek) { const weekNumberProps = mergeProps( - { - className: cx('weekNumber') - }, - ptm('weekNumber') + [ + { + className: cx('weekNumber') + }, + ptm('weekNumber') + ], + { useTailwind: context.useTailwind } ); const weekLabelContainerProps = mergeProps( - { - className: cx('weekLabelContainer'), - 'data-p-disabled': props.showWeek - }, - ptm('weekLabelContainer', { - context: { - disabled: props.showWeek - } - }) + [ + { + className: cx('weekLabelContainer'), + 'data-p-disabled': props.showWeek + }, + ptm('weekLabelContainer', { + context: { + disabled: props.showWeek + } + }) + ], + { useTailwind: context.useTailwind } ); const weekNumberCell = ( @@ -3013,7 +3067,7 @@ export const Calendar = React.memo( }; const createDates = (monthMetaData, groupIndex) => { - const tableBodyRowProps = mergeProps(ptm('tableBodyRowProps')); + const tableBodyRowProps = mergeProps([ptm('tableBodyRowProps')], { useTailwind: context.useTailwind }); return monthMetaData.dates.map((weekDates, index) => ( @@ -3026,21 +3080,27 @@ export const Calendar = React.memo( const dayNames = createDayNames(weekDays); const dates = createDates(monthMetaData, groupIndex); const containerProps = mergeProps( - { - className: cx('container'), - key: UniqueComponentId('calendar_container_') - }, - ptm('container') + [ + { + className: cx('container'), + key: UniqueComponentId('calendar_container_') + }, + ptm('container') + ], + { useTailwind: context.useTailwind } ); const tableProps = mergeProps( - { - className: cx('table') - }, - ptm('table') + [ + { + className: cx('table') + }, + ptm('table') + ], + { useTailwind: context.useTailwind } ); - const tableHeaderProps = mergeProps(ptm('tableHeader')); - const tableHeaderRowProps = mergeProps(ptm('tableHeaderRow')); - const tableBodyProps = mergeProps(ptm('tableBody')); + const tableHeaderProps = mergeProps([ptm('tableHeader')], { useTailwind: context.useTailwind }); + const tableHeaderRowProps = mergeProps([ptm('tableHeaderRow')], { useTailwind: context.useTailwind }); + const tableBodyProps = mergeProps([ptm('tableBody')], { useTailwind: context.useTailwind }); return ( currentView === 'date' && ( @@ -3066,18 +3126,24 @@ export const Calendar = React.memo( const header = props.headerTemplate ? props.headerTemplate() : null; const monthKey = monthMetaData.month + '-' + monthMetaData.year; const groupProps = mergeProps( - { - className: cx('group') - }, - ptm('group') + [ + { + className: cx('group') + }, + ptm('group') + ], + { useTailwind: context.useTailwind } ); const headerProps = mergeProps( - { - className: cx('header'), - key: index - }, - ptm('header') + [ + { + className: cx('header'), + key: index + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3097,10 +3163,13 @@ export const Calendar = React.memo( const groups = monthsMetaData.map(createMonth); const groupContainerProps = mergeProps( - { - className: cx('groupContainer') - }, - ptm('groupContainer') + [ + { + className: cx('groupContainer') + }, + ptm('groupContainer') + ], + { useTailwind: context.useTailwind } ); return
    {groups}
    ; @@ -3142,31 +3211,43 @@ export const Calendar = React.memo( const yearElement = createTitleYearElement(getViewDate().getFullYear()); const decade = createTitleDecadeElement(); const groupContainerProps = mergeProps( - { - className: cx('groupContainer') - }, - ptm('groupContainer') + [ + { + className: cx('groupContainer') + }, + ptm('groupContainer') + ], + { useTailwind: context.useTailwind } ); const groupProps = mergeProps( - { - className: cx('group') - }, - ptm('group') + [ + { + className: cx('group') + }, + ptm('group') + ], + { useTailwind: context.useTailwind } ); const headerProps = mergeProps( - { - className: cx('header') - }, - ptm('header') + [ + { + className: cx('header') + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); const titleProps = mergeProps( - { - className: cx('title') - }, - ptm('title') + [ + { + className: cx('title') + }, + ptm('title') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3199,8 +3280,8 @@ export const Calendar = React.memo( return null; }; - const incrementIconProps = mergeProps(ptm('incrementIcon')); - const decrementIconProps = mergeProps(ptm('decrementIcon')); + const incrementIconProps = mergeProps([ptm('incrementIcon')], { useTailwind: context.useTailwind }); + const decrementIconProps = mergeProps([ptm('decrementIcon')], { useTailwind: context.useTailwind }); const incrementIcon = IconUtils.getJSXIcon(props.incrementIcon || , { ...incrementIconProps }, { props }); const decrementIcon = IconUtils.getJSXIcon(props.decrementIcon || , { ...decrementIconProps }, { props }); @@ -3217,37 +3298,46 @@ export const Calendar = React.memo( else if (hour > 11 && hour !== 12) hour = hour - 12; } - const hourProps = mergeProps(ptm('hour')); + const hourProps = mergeProps([ptm('hour')], { useTailwind: context.useTailwind }); const hourDisplay = hour < 10 ? '0' + hour : hour; const hourPickerProps = mergeProps( - { - className: cx('hourPicker') - }, - ptm('hourPicker') + [ + { + className: cx('hourPicker') + }, + ptm('hourPicker') + ], + { useTailwind: context.useTailwind } ); const incrementButtonProps = mergeProps( - { - type: 'button', - className: cx('incrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 0, 1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('incrementButton') + [ + { + type: 'button', + className: cx('incrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 0, 1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('incrementButton') + ], + { useTailwind: context.useTailwind } ); const decrementButtonProps = mergeProps( - { - type: 'button', - className: cx('decrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 0, -1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('decrementButton') + [ + { + type: 'button', + className: cx('decrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 0, -1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('decrementButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3270,37 +3360,46 @@ export const Calendar = React.memo( let minute = doStepMinute(currentTime.getMinutes()); minute = minute > 59 ? minute - 60 : minute; - const minuteProps = mergeProps(ptm('minute')); + const minuteProps = mergeProps([ptm('minute')], { useTailwind: context.useTailwind }); const minuteDisplay = minute < 10 ? '0' + minute : minute; const minutePickerProps = mergeProps( - { - className: cx('minutePicker') - }, - ptm('minutePicker') + [ + { + className: cx('minutePicker') + }, + ptm('minutePicker') + ], + { useTailwind: context.useTailwind } ); const incrementButtonProps = mergeProps( - { - type: 'button', - className: cx('incrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 1, 1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('incrementButton') + [ + { + type: 'button', + className: cx('incrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 1, 1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('incrementButton') + ], + { useTailwind: context.useTailwind } ); const decrementButtonProps = mergeProps( - { - type: 'button', - className: cx('decrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 1, -1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('decrementButton') + [ + { + type: 'button', + className: cx('decrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 1, -1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('decrementButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3321,38 +3420,47 @@ export const Calendar = React.memo( const createSecondPicker = () => { if (props.showSeconds) { const currentTime = getCurrentDateTime(); - const secondProps = mergeProps(ptm('second')); + const secondProps = mergeProps([ptm('second')], { useTailwind: context.useTailwind }); const second = currentTime.getSeconds(); const secondDisplay = second < 10 ? '0' + second : second; const secondPickerProps = mergeProps( - { - className: cx('secondPicker') - }, - ptm('secondPicker') + [ + { + className: cx('secondPicker') + }, + ptm('secondPicker') + ], + { useTailwind: context.useTailwind } ); const incrementButtonProps = mergeProps( - { - type: 'button', - className: cx('incrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 2, 1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('incrementButton') + [ + { + type: 'button', + className: cx('incrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 2, 1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('incrementButton') + ], + { useTailwind: context.useTailwind } ); const decrementButtonProps = mergeProps( - { - type: 'button', - className: cx('decrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 2, -1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('decrementButton') + [ + { + type: 'button', + className: cx('decrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 2, -1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('decrementButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3376,38 +3484,47 @@ export const Calendar = React.memo( const createMiliSecondPicker = () => { if (props.showMillisec) { const currentTime = getCurrentDateTime(); - const millisecondProps = mergeProps(ptm('millisecond')); + const millisecondProps = mergeProps([ptm('millisecond')], { useTailwind: context.useTailwind }); const millisecond = currentTime.getMilliseconds(); const millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond; const millisecondPickerProps = mergeProps( - { - className: cx('millisecondPicker') - }, - ptm('millisecondPicker') + [ + { + className: cx('millisecondPicker') + }, + ptm('millisecondPicker') + ], + { useTailwind: context.useTailwind } ); const incrementButtonProps = mergeProps( - { - type: 'button', - className: cx('incrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 3, 1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('incrementButton') + [ + { + type: 'button', + className: cx('incrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 3, 1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('incrementButton') + ], + { useTailwind: context.useTailwind } ); const decrementButtonProps = mergeProps( - { - type: 'button', - className: cx('decrementButton'), - onMouseDown: (e) => onTimePickerElementMouseDown(e, 3, -1), - onMouseUp: onTimePickerElementMouseUp, - onMouseLeave: onTimePickerElementMouseLeave, - onKeyDown: (e) => onContainerButtonKeydown(e) - }, - ptm('decrementButton') + [ + { + type: 'button', + className: cx('decrementButton'), + onMouseDown: (e) => onTimePickerElementMouseDown(e, 3, -1), + onMouseUp: onTimePickerElementMouseUp, + onMouseLeave: onTimePickerElementMouseLeave, + onKeyDown: (e) => onContainerButtonKeydown(e) + }, + ptm('decrementButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3433,30 +3550,39 @@ export const Calendar = React.memo( const currentTime = getCurrentDateTime(); const hour = currentTime.getHours(); const display = hour > 11 ? 'PM' : 'AM'; - const ampmProps = mergeProps(ptm('ampm')); + const ampmProps = mergeProps([ptm('ampm')], { useTailwind: context.useTailwind }); const ampmPickerProps = mergeProps( - { - className: cx('ampmPicker') - }, - ptm('ampmPicker') + [ + { + className: cx('ampmPicker') + }, + ptm('ampmPicker') + ], + { useTailwind: context.useTailwind } ); const incrementButtonProps = mergeProps( - { - type: 'button', - className: cx('incrementButton'), - onClick: (e) => toggleAmPm(e) - }, - ptm('incrementButton') + [ + { + type: 'button', + className: cx('incrementButton'), + onClick: (e) => toggleAmPm(e) + }, + ptm('incrementButton') + ], + { useTailwind: context.useTailwind } ); const decrementButtonProps = mergeProps( - { - type: 'button', - className: cx('decrementButton'), - onClick: (e) => toggleAmPm(e) - }, - ptm('decrementButton') + [ + { + type: 'button', + className: cx('decrementButton'), + onClick: (e) => toggleAmPm(e) + }, + ptm('decrementButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3479,13 +3605,16 @@ export const Calendar = React.memo( const createSeparator = (separator) => { const separatorContainerProps = mergeProps( - { - className: cx('separatorContainer') - }, - ptm('separatorContainer') + [ + { + className: cx('separatorContainer') + }, + ptm('separatorContainer') + ], + { useTailwind: context.useTailwind } ); - const separatorProps = mergeProps(ptm('separator')); + const separatorProps = mergeProps([ptm('separator')], { useTailwind: context.useTailwind }); return (
    @@ -3497,10 +3626,13 @@ export const Calendar = React.memo( const createTimePicker = () => { if ((props.showTime || props.timeOnly) && currentView === 'date') { const timePickerProps = mergeProps( - { - className: cx('timePicker') - }, - ptm('timePicker') + [ + { + className: cx('timePicker') + }, + ptm('timePicker') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3587,10 +3719,13 @@ export const Calendar = React.memo( if (props.showButtonBar) { const { today, clear } = localeOptions(props.locale); const buttonbarProps = mergeProps( - { - className: cx('buttonbar') - }, - ptm('buttonbar') + [ + { + className: cx('buttonbar') + }, + ptm('buttonbar') + ], + { useTailwind: context.useTailwind } ); return ( @@ -3608,10 +3743,13 @@ export const Calendar = React.memo( if (props.footerTemplate) { const content = props.footerTemplate(); const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -3623,31 +3761,37 @@ export const Calendar = React.memo( const createMonthPicker = () => { if (currentView === 'month') { const monthPickerProps = mergeProps( - { - className: cx('monthPicker') - }, - ptm('monthPicker') + [ + { + className: cx('monthPicker') + }, + ptm('monthPicker') + ], + { useTailwind: context.useTailwind } ); return (
    {monthPickerValues().map((m, i) => { const monthProps = mergeProps( - { - className: cx('month', { isMonthSelected, isSelectable, i, currentYear }), - onClick: (event) => onMonthSelect(event, i), - onKeyDown: (event) => onMonthCellKeydown(event, i), - 'data-p-disabled': !m.selectable, - 'data-p-highlight': isMonthSelected(i) - }, - ptm('month', { - context: { - month: m, - monthIndex: i, - selected: isMonthSelected(i), - disabled: !m.selectable - } - }) + [ + { + className: cx('month', { isMonthSelected, isSelectable, i, currentYear }), + onClick: (event) => onMonthSelect(event, i), + onKeyDown: (event) => onMonthCellKeydown(event, i), + 'data-p-disabled': !m.selectable, + 'data-p-highlight': isMonthSelected(i) + }, + ptm('month', { + context: { + month: m, + monthIndex: i, + selected: isMonthSelected(i), + disabled: !m.selectable + } + }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -3666,30 +3810,36 @@ export const Calendar = React.memo( const createYearPicker = () => { if (currentView === 'year') { const yearPickerProps = mergeProps( - { - className: cx('yearPicker') - }, - ptm('yearPicker') + [ + { + className: cx('yearPicker') + }, + ptm('yearPicker') + ], + { useTailwind: context.useTailwind } ); return (
    {yearPickerValues().map((y, i) => { const yearProps = mergeProps( - { - className: cx('year', { isYearSelected, isSelectable, y }), - onClick: (event) => onYearSelect(event, y), - 'data-p-highlight': isYearSelected(y), - 'data-p-disabled': !isSelectable(0, -1, y) - }, - ptm('year', { - context: { - year: y, - yearIndex: i, - selected: isYearSelected(i), - disabled: !y.selectable - } - }) + [ + { + className: cx('year', { isYearSelected, isSelectable, y }), + onClick: (event) => onYearSelect(event, y), + 'data-p-highlight': isYearSelected(y), + 'data-p-disabled': !isSelectable(0, -1, y) + }, + ptm('year', { + context: { + year: y, + yearIndex: i, + selected: isYearSelected(i), + disabled: !y.selectable + } + }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -3724,13 +3874,16 @@ export const Calendar = React.memo( const yearPicker = createYearPicker(); const isFilled = DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== ''; const rootProps = mergeProps( - { - id: props.id, - className: classNames(props.className, cx('root', { focusedState, isFilled })), - style: props.style - }, - CalendarBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + className: classNames(props.className, cx('root', { focusedState, isFilled })), + style: props.style + }, + CalendarBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/calendar/CalendarPanel.js b/components/lib/calendar/CalendarPanel.js index ff3759a6ae..127f381f37 100644 --- a/components/lib/calendar/CalendarPanel.js +++ b/components/lib/calendar/CalendarPanel.js @@ -2,34 +2,42 @@ import * as React from 'react'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Portal } from '../portal/Portal'; import { mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/Api'; export const CalendarPanel = React.forwardRef((props, ref) => { const cx = props.cx; + const context = React.useContext(PrimeReactContext); const createElement = () => { const panelProps = mergeProps( - { - className: cx('panel', { panelClassName: props.className }), - style: props.style, - onClick: props.onClick, - onMouseUp: props.onMouseUp - }, - props.ptm('panel', { hostName: props.hostName }) + [ + { + className: cx('panel', { panelClassName: props.className }), + style: props.style, + onClick: props.onClick, + onMouseUp: props.onMouseUp + }, + props.ptm('panel', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: props.in, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: props.onEnter, - onEntered: props.onEntered, - onExit: props.onExit, - onExited: props.onExited - }, - props.ptm('transition', { hostName: props.hostName }) + [ + { + classNames: cx('transition'), + in: props.in, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: props.onEnter, + onEntered: props.onEntered, + onExit: props.onExit, + onExited: props.onExited + }, + props.ptm('transition', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js index 38a869f7dd..e61d3daca9 100644 --- a/components/lib/card/Card.js +++ b/components/lib/card/Card.js @@ -18,10 +18,13 @@ export const Card = React.forwardRef((inProps, ref) => { const createHeader = () => { const headerProps = mergeProps( - { - className: cx('header') - }, - ptm('header') + [ + { + className: cx('header') + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); if (props.header) { @@ -33,46 +36,61 @@ export const Card = React.forwardRef((inProps, ref) => { const createBody = () => { const titleProps = mergeProps( - { - className: cx('title') - }, - ptm('title') + [ + { + className: cx('title') + }, + ptm('title') + ], + { useTailwind: context.useTailwind } ); const title = props.title &&
    {ObjectUtils.getJSXElement(props.title, props)}
    ; const subTitleProps = mergeProps( - { - className: cx('subTitle') - }, - ptm('subTitle') + [ + { + className: cx('subTitle') + }, + ptm('subTitle') + ], + { useTailwind: context.useTailwind } ); const subTitle = props.subTitle &&
    {ObjectUtils.getJSXElement(props.subTitle, props)}
    ; const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); const children = props.children &&
    {props.children}
    ; const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); const footer = props.footer &&
    {ObjectUtils.getJSXElement(props.footer, props)}
    ; const bodyProps = mergeProps( - { - className: cx('body') - }, - ptm('body') + [ + { + className: cx('body') + }, + ptm('body') + ], + { useTailwind: context.useTailwind } ); return ( @@ -90,14 +108,17 @@ export const Card = React.forwardRef((inProps, ref) => { }, [elementRef, ref]); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - style: props.style, - className: cx('root') - }, - CardBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + style: props.style, + className: cx('root') + }, + CardBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const header = createHeader(); diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js index d7ad68a2b7..ee9be0d82c 100644 --- a/components/lib/carousel/Carousel.js +++ b/components/lib/carousel/Carousel.js @@ -12,16 +12,20 @@ import { CarouselBase } from './CarouselBase'; const CarouselItem = React.memo((props) => { const { ptm, cx } = props; + const context = React.useContext(PrimeReactContext); const key = props.className && props.className === 'p-carousel-item-cloned' ? 'itemCloned' : 'item'; const content = props.template(props.item); const itemClonedProps = mergeProps( - { - 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) + [ + { + 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) + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -462,10 +466,13 @@ export const Carousel = React.memo( const createHeader = () => { if (props.header) { const headerProps = mergeProps( - { - className: cx('header') - }, - ptm('header') + [ + { + className: cx('header') + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); return
    {props.header}
    ; @@ -477,10 +484,13 @@ export const Carousel = React.memo( const createFooter = () => { if (props.footer) { const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); return
    {props.footer}
    ; @@ -495,29 +505,38 @@ export const Carousel = React.memo( const backwardNavigator = createBackwardNavigator(); const forwardNavigator = createForwardNavigator(); const itemsContentProps = mergeProps( - { - className: cx('itemsContent'), - style: sx('itemsContent', { height }), - onTouchStart: (e) => onTouchStart(e), - onTouchMove: (e) => onTouchMove(e), - onTouchEnd: (e) => onTouchEnd(e) - }, - ptm('itemsContent') + [ + { + className: cx('itemsContent'), + style: sx('itemsContent', { height }), + onTouchStart: (e) => onTouchStart(e), + onTouchMove: (e) => onTouchMove(e), + onTouchEnd: (e) => onTouchEnd(e) + }, + ptm('itemsContent') + ], + { useTailwind: context.useTailwind } ); const containerProps = mergeProps( - { - className: classNames(props.containerClassName, cx('container')) - }, - ptm('container') + [ + { + className: classNames(props.containerClassName, cx('container')) + }, + ptm('container') + ], + { useTailwind: context.useTailwind } ); const itemsContainerProps = mergeProps( - { - className: cx('itemsContainer'), - onTransitionEnd: onTransitionEnd - }, - ptm('itemsContainer') + [ + { + className: cx('itemsContainer'), + onTransitionEnd: onTransitionEnd + }, + ptm('itemsContainer') + ], + { useTailwind: context.useTailwind } ); return ( @@ -537,22 +556,28 @@ export const Carousel = React.memo( if (props.showNavigators) { const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && currentPage === 0; const previousButtonIconProps = mergeProps( - { - className: cx('previousButtonIcon') - }, - ptm('previousButtonIcon') + [ + { + className: cx('previousButtonIcon') + }, + ptm('previousButtonIcon') + ], + { useTailwind: context.useTailwind } ); const icon = isVertical ? props.prevIcon || : props.prevIcon || ; const backwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...previousButtonIconProps }, { props }); const previousButtonProps = mergeProps( - { - type: 'button', - className: cx('previousButton', { isDisabled }), - onClick: (e) => navBackward(e), - disabled: isDisabled, - 'aria-label': ariaLabel('previousPageLabel') - }, - ptm('previousButton') + [ + { + type: 'button', + className: cx('previousButton', { isDisabled }), + onClick: (e) => navBackward(e), + disabled: isDisabled, + 'aria-label': ariaLabel('previousPageLabel') + }, + ptm('previousButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -570,22 +595,28 @@ export const Carousel = React.memo( if (props.showNavigators) { const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && (currentPage === totalIndicators - 1 || totalIndicators === 0); const nextButtonIconProps = mergeProps( - { - className: cx('nextButtonIcon') - }, - ptm('nextButtonIcon') + [ + { + className: cx('nextButtonIcon') + }, + ptm('nextButtonIcon') + ], + { useTailwind: context.useTailwind } ); const icon = isVertical ? props.nextIcon || : props.nextIcon || ; const forwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...nextButtonIconProps }, { props }); const nextButtonProps = mergeProps( - { - type: 'button', - className: cx('nextButton', { isDisabled }), - onClick: (e) => navForward(e), - disabled: isDisabled, - 'aria-label': ariaLabel('nextPageLabel') - }, - ptm('nextButton') + [ + { + type: 'button', + className: cx('nextButton', { isDisabled }), + onClick: (e) => navForward(e), + disabled: isDisabled, + 'aria-label': ariaLabel('nextPageLabel') + }, + ptm('nextButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -612,21 +643,27 @@ export const Carousel = React.memo( const key = 'carousel-indicator-' + index; const indicatorProps = mergeProps( - { - key, - className: cx('indicator', { isActive }), - 'data-p-highlight': isActive - }, - getPTOptions('indicator') + [ + { + key, + className: cx('indicator', { isActive }), + 'data-p-highlight': isActive + }, + getPTOptions('indicator') + ], + { useTailwind: context.useTailwind } ); const indicatorButtonProps = mergeProps( - { - type: 'button', - className: cx('indicatorButton'), - onClick: (e) => onDotClick(e, index), - 'aria-label': `${ariaLabel('pageLabel')} ${index + 1}` - }, - getPTOptions('indicatorButton') + [ + { + type: 'button', + className: cx('indicatorButton'), + onClick: (e) => onDotClick(e, index), + 'aria-label': `${ariaLabel('pageLabel')} ${index + 1}` + }, + getPTOptions('indicatorButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -647,10 +684,13 @@ export const Carousel = React.memo( } const indicatorsProps = mergeProps( - { - className: classNames(props.indicatorsContentClassName, cx('indicators')) - }, - ptm('indicators') + [ + { + className: classNames(props.indicatorsContentClassName, cx('indicators')) + }, + ptm('indicators') + ], + { useTailwind: context.useTailwind } ); return
      {indicators}
    ; @@ -664,21 +704,27 @@ export const Carousel = React.memo( const header = createHeader(); const footer = createFooter(); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - className: classNames(props.className, cx('root', { isVertical })), - style: props.style - }, - CarouselBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + className: classNames(props.className, cx('root', { isVertical })), + style: props.style + }, + CarouselBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - className: classNames(props.contentClassName, cx('content')) - }, - ptm('content') + [ + { + className: classNames(props.contentClassName, cx('content')) + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js index c88f7272b8..9844f17565 100644 --- a/components/lib/cascadeselect/CascadeSelect.js +++ b/components/lib/cascadeselect/CascadeSelect.js @@ -287,29 +287,35 @@ export const CascadeSelect = React.memo( const createKeyboardHelper = () => { const value = props.value ? getOptionLabel(props.value) : undefined; const hiddenSelectedMessageProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenSelectedMessage') + [ + { + className: 'p-hidden-accessible' + }, + ptm('hiddenSelectedMessage') + ], + { useTailwind: context.useTailwind } ); const inputProps = mergeProps( - { - ref: inputRef, - type: 'text', - id: props.inputId, - name: props.name, - defaultValue: value, - readOnly: true, - disabled: props.disabled, - onFocus: onInputFocus, - onBlur: onInputBlur, - onKeyDown: (e) => onInputKeyDown(e), - tabIndex: props.tabIndex, - 'aria-haspopup': 'listbox', - ...ariaProps - }, - ptm('input') + [ + { + ref: inputRef, + type: 'text', + id: props.inputId, + name: props.name, + defaultValue: value, + readOnly: true, + disabled: props.disabled, + onFocus: onInputFocus, + onBlur: onInputBlur, + onKeyDown: (e) => onInputKeyDown(e), + tabIndex: props.tabIndex, + 'aria-haspopup': 'listbox', + ...ariaProps + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ( @@ -323,11 +329,14 @@ export const CascadeSelect = React.memo( const label = props.value ? getOptionLabel(props.value) : props.placeholder || 'p-emptylabel'; const labelProps = mergeProps( - { - ref: labelRef, - className: cx('label', { label }) - }, - ptm('label') + [ + { + ref: labelRef, + className: cx('label', { label }) + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); return {label}; @@ -335,56 +344,71 @@ export const CascadeSelect = React.memo( const createDropdownIcon = () => { const dropdownIconProps = mergeProps( - { - className: cx('dropdownIcon') - }, - ptm('dropdownIcon') + [ + { + className: cx('dropdownIcon') + }, + ptm('dropdownIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.dropdownIcon || ; const dropdownIcon = IconUtils.getJSXIcon(icon, { ...dropdownIconProps }, { props }); const dropdownButtonProps = mergeProps( - { - className: cx('dropdownButton'), - role: 'button', - 'aria-haspopup': 'listbox', - 'aria-expanded': overlayVisibleState - }, - ptm('dropdownButton') + [ + { + className: cx('dropdownButton'), + role: 'button', + 'aria-haspopup': 'listbox', + 'aria-expanded': overlayVisibleState + }, + ptm('dropdownButton') + ], + { useTailwind: context.useTailwind } ); return
    {dropdownIcon}
    ; }; const wrapperProps = mergeProps( - { - className: cx('wrapper') - }, - ptm('wrapper') + [ + { + className: cx('wrapper') + }, + ptm('wrapper') + ], + { useTailwind: context.useTailwind } ); const panelProps = mergeProps( - { - ref: overlayRef, - className: cx('panel'), - onClick: (e) => onPanelClick(e) - }, - ptm('panel') + [ + { + ref: overlayRef, + className: cx('panel'), + onClick: (e) => onPanelClick(e) + }, + ptm('panel') + ], + { useTailwind: context.useTailwind } ); const createOverlay = () => { const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: overlayVisibleState, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: onOverlayEnter, - onEntered: onOverlayEntered, - onExit: onOverlayExit, - onExited: onOverlayExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: overlayVisibleState, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: onOverlayEnter, + onEntered: onOverlayEntered, + onExit: onOverlayExit, + onExited: onOverlayExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); const overlay = ( @@ -423,15 +447,18 @@ export const CascadeSelect = React.memo( const dropdownIcon = createDropdownIcon(); const overlay = createOverlay(); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - className: cx('root', { focusedState, overlayVisibleState }), - style: props.style, - onClick: (e) => onClick(e) - }, - otherProps, - ptm('root') + [ + { + id: props.id, + ref: elementRef, + className: cx('root', { focusedState, overlayVisibleState }), + style: props.style, + onClick: (e) => onClick(e) + }, + otherProps, + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js index 803e691cdf..601124b17d 100644 --- a/components/lib/cascadeselect/CascadeSelectSub.js +++ b/components/lib/cascadeselect/CascadeSelectSub.js @@ -211,40 +211,52 @@ export const CascadeSelectSub = React.memo((props) => { const createOption = (option, index) => { const submenu = createSubmenu(option); const textProps = mergeProps( - { - className: cx('text') - }, - getPTOptions('text') + [ + { + className: cx('text') + }, + getPTOptions('text') + ], + { useTailwind: context.useTailwind } ); const content = props.template ? ObjectUtils.getJSXElement(props.template, getOptionValue(option)) : {getOptionLabelToRender(option)}; const optionGroupIconProps = mergeProps( - { - className: cx('optionGroupIcon') - }, - getPTOptions('optionGroupIcon') + [ + { + className: cx('optionGroupIcon') + }, + getPTOptions('optionGroupIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.optionGroupIcon || ; const optionGroup = isOptionGroup(option) && IconUtils.getJSXIcon(icon, { ...optionGroupIconProps }, { props }); const key = getOptionLabelToRender(option) + '_' + index; const contentProps = mergeProps( - { - className: cx('content'), - onClick: (event) => onOptionClick(event, option), - tabIndex: 0, - onKeyDown: (event) => onKeyDown(event, option) - }, - getPTOptions('content') + [ + { + className: cx('content'), + onClick: (event) => onOptionClick(event, option), + tabIndex: 0, + onKeyDown: (event) => onKeyDown(event, option) + }, + getPTOptions('content') + ], + { useTailwind: context.useTailwind } ); const itemProps = mergeProps( - { - className: classNames(option.className, cx('item', { option, isOptionGroup, activeOptionState })), - style: option.style, - role: 'none', - 'data-p-item-group': isOptionGroup(option), - 'data-p-highlight': activeOptionState === option - }, - getPTOptions('item') + [ + { + className: classNames(option.className, cx('item', { option, isOptionGroup, activeOptionState })), + style: option.style, + role: 'none', + 'data-p-item-group': isOptionGroup(option), + 'data-p-highlight': activeOptionState === option + }, + getPTOptions('item') + ], + { useTailwind: context.useTailwind } ); return ( @@ -265,13 +277,16 @@ export const CascadeSelectSub = React.memo((props) => { const submenu = createMenu(); const listProps = mergeProps( - { - ref: elementRef, - className: cx(props.level === 0 ? 'list' : 'sublist', { context }), - role: 'listbox', - 'aria-orientation': 'horizontal' - }, - props.level === 0 ? getPTOptions('list') : getPTOptions('sublist') + [ + { + ref: elementRef, + className: cx(props.level === 0 ? 'list' : 'sublist', { context }), + role: 'listbox', + 'aria-orientation': 'horizontal' + }, + props.level === 0 ? getPTOptions('list') : getPTOptions('sublist') + ], + { useTailwind: context.useTailwind } ); return
      {submenu}
    ; diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js index b7c088291e..768de2fb02 100644 --- a/components/lib/chart/Chart.js +++ b/components/lib/chart/Chart.js @@ -92,24 +92,30 @@ const PrimeReactChart = React.memo( const title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text; const ariaLabel = props.ariaLabel || title; const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - style: sx('root'), - className: cx('root') - }, - ChartBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + style: sx('root'), + className: cx('root') + }, + ChartBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const canvasProps = mergeProps( - { - ref: canvasRef, - width: props.width, - height: props.height, - role: 'img', - 'aria-label': ariaLabel - }, - ptm('canvas') + [ + { + ref: canvasRef, + width: props.width, + height: props.height, + role: 'img', + 'aria-label': ariaLabel + }, + ptm('canvas') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index e15b0f122a..d8c8e0af59 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -119,59 +119,74 @@ export const Checkbox = React.memo( const otherProps = CheckboxBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const icon = checked ? props.icon || : null; const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked }); const rootProps = mergeProps( - { - id: props.id, - className: classNames(props.className, cx('root', { checked, focusedState })), - style: props.style, - onClick: (e) => onClick(e), - onContextMenu: props.onContextMenu, - onMouseDown: props.onMouseDown - }, - otherProps, - ptm('root') + [ + { + id: props.id, + className: classNames(props.className, cx('root', { checked, focusedState })), + style: props.style, + onClick: (e) => onClick(e), + onContextMenu: props.onContextMenu, + onMouseDown: props.onMouseDown + }, + otherProps, + ptm('root') + ], + { useTailwind: context.useTailwind } ); const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') + [ + { + className: 'p-hidden-accessible' + }, + ptm('hiddenInputWrapper') + ], + { useTailwind: context.useTailwind } ); const hiddenInputProps = mergeProps( - { - id: props.inputId, - type: 'checkbox', - name: props.name, - tabIndex: props.tabIndex, - defaultChecked: checked, - onFocus: (e) => onFocus(e), - onBlur: (e) => onBlur(e), - onKeyDown: (e) => onKeyDown(e), - disabled: props.disabled, - readOnly: props.readOnly, - required: props.required, - ...ariaProps - }, - ptm('hiddenInput') + [ + { + id: props.inputId, + type: 'checkbox', + name: props.name, + tabIndex: props.tabIndex, + defaultChecked: checked, + onFocus: (e) => onFocus(e), + onBlur: (e) => onBlur(e), + onKeyDown: (e) => onKeyDown(e), + disabled: props.disabled, + readOnly: props.readOnly, + required: props.required, + ...ariaProps + }, + ptm('hiddenInput') + ], + { useTailwind: context.useTailwind } ); const inputProps = mergeProps( - { - className: cx('input', { checked, focusedState }), - 'data-p-highlight': checked, - 'data-p-disabled': props.disabled, - 'data-p-focus': focusedState - }, - ptm('input') + [ + { + className: cx('input', { checked, focusedState }), + 'data-p-highlight': checked, + 'data-p-disabled': props.disabled, + 'data-p-focus': focusedState + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js index 7be3b92dbe..14972534aa 100644 --- a/components/lib/chip/Chip.js +++ b/components/lib/chip/Chip.js @@ -36,36 +36,45 @@ export const Chip = React.memo( let content = []; const removeIconProps = mergeProps( - { - key: 'removeIcon', - tabIndex: 0, - className: cx('removeIcon'), - onClick: close, - onKeyDown - }, - ptm('removeIcon') + [ + { + key: 'removeIcon', + tabIndex: 0, + className: cx('removeIcon'), + onClick: close, + onKeyDown + }, + ptm('removeIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.removeIcon || ; if (props.image) { const imageProps = mergeProps( - { - key: 'image', - src: props.image, - onError: props.onImageError - }, - ptm('image') + [ + { + key: 'image', + src: props.image, + onError: props.onImageError + }, + ptm('image') + ], + { useTailwind: context.useTailwind } ); content.push({props.imageAlt}); } else if (props.icon) { const chipIconProps = mergeProps( - { - key: 'icon', - className: cx('icon') - }, - ptm('icon') + [ + { + key: 'icon', + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); content.push(IconUtils.getJSXIcon(props.icon, { ...chipIconProps }, { props })); @@ -73,11 +82,14 @@ export const Chip = React.memo( if (props.label) { const labelProps = mergeProps( - { - key: 'label', - className: cx('label') - }, - ptm('label') + [ + { + key: 'label', + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); content.push({props.label}); @@ -94,13 +106,16 @@ export const Chip = React.memo( const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent(); const rootProps = mergeProps( - { - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root')) - }, - ChipBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root')) + }, + ChipBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index fe5d0690dd..041f583c6c 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -228,11 +228,14 @@ export const Chips = React.memo( const createRemoveIcon = (value, index) => { const iconProps = mergeProps( - { - className: cx('removeTokenIcon'), - onClick: (event) => removeItem(event, index) - }, - ptm('removeTokenIcon') + [ + { + className: cx('removeTokenIcon'), + onClick: (event) => removeItem(event, index) + }, + ptm('removeTokenIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.removeIcon || ; const removeIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props }); @@ -247,20 +250,26 @@ export const Chips = React.memo( const createItem = (value, index) => { const content = props.itemTemplate ? props.itemTemplate(value) : value; const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); const label = {content}; const icon = createRemoveIcon(value, index); const tokenProps = mergeProps( - { - key: index, - className: cx('token'), - 'data-p-highlight': true - }, - ptm('token') + [ + { + key: index, + className: cx('token'), + 'data-p-highlight': true + }, + ptm('token') + ], + { useTailwind: context.useTailwind } ); return ( @@ -273,28 +282,34 @@ export const Chips = React.memo( const createInput = () => { const inputTokenProps = mergeProps( - { - className: cx('inputToken') - }, - ptm('inputToken') + [ + { + className: cx('inputToken') + }, + ptm('inputToken') + ], + { useTailwind: context.useTailwind } ); const inputProps = mergeProps( - { - id: props.inputId, - ref: inputRef, - placeholder: props.placeholder, - type: 'text', - name: props.name, - disabled: props.disabled || isMaxedOut(), - onKeyDown: (e) => onKeyDown(e), - onPaste: (e) => onPaste(e), - onFocus: (e) => onFocus(e), - onBlur: (e) => onBlur(e), - readOnly: props.readOnly, - ...ariaProps - }, - ptm('input') + [ + { + id: props.inputId, + ref: inputRef, + placeholder: props.placeholder, + type: 'text', + name: props.name, + disabled: props.disabled || isMaxedOut(), + onKeyDown: (e) => onKeyDown(e), + onPaste: (e) => onPaste(e), + onFocus: (e) => onFocus(e), + onBlur: (e) => onBlur(e), + readOnly: props.readOnly, + ...ariaProps + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ( @@ -312,14 +327,17 @@ export const Chips = React.memo( const items = createItems(); const input = createInput(); const containerProps = mergeProps( - { - ref: listRef, - className: cx('container', { focusedState }), - onClick: (e) => onWrapperClick(e), - 'data-p-disabled': props.disabled, - 'data-p-focus': focusedState - }, - ptm('container') + [ + { + ref: listRef, + className: cx('container', { focusedState }), + onClick: (e) => onWrapperClick(e), + 'data-p-disabled': props.disabled, + 'data-p-focus': focusedState + }, + ptm('container') + ], + { useTailwind: context.useTailwind } ); return ( @@ -335,13 +353,16 @@ export const Chips = React.memo( const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const list = createList(); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - className: classNames(props.className, cx('root', { isFilled, focusedState })), - style: props.style - }, - ptm('root') + [ + { + id: props.id, + ref: elementRef, + className: classNames(props.className, cx('root', { isFilled, focusedState })), + style: props.style + }, + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js index 10c3f6e861..003a04834e 100644 --- a/components/lib/colorpicker/ColorPicker.js +++ b/components/lib/colorpicker/ColorPicker.js @@ -533,30 +533,39 @@ export const ColorPicker = React.memo( const createColorSelector = () => { const selectorProps = mergeProps( - { - ref: colorSelectorRef, - className: cx('selector'), - onMouseDown: (e) => onColorMousedown(e), - onTouchStart: (e) => onColorDragStart(e), - onTouchMove: (e) => onDrag(e), - onTouchEnd: onDragEnd - }, - ptm('selector') + [ + { + ref: colorSelectorRef, + className: cx('selector'), + onMouseDown: (e) => onColorMousedown(e), + onTouchStart: (e) => onColorDragStart(e), + onTouchMove: (e) => onDrag(e), + onTouchEnd: onDragEnd + }, + ptm('selector') + ], + { useTailwind: context.useTailwind } ); const colorProps = mergeProps( - { - className: cx('color') - }, - ptm('color') + [ + { + className: cx('color') + }, + ptm('color') + ], + { useTailwind: context.useTailwind } ); const colorHandlerProps = mergeProps( - { - ref: colorHandleRef, - className: cx('colorHandle') - }, - ptm('colorHandle') + [ + { + ref: colorHandleRef, + className: cx('colorHandle') + }, + ptm('colorHandle') + ], + { useTailwind: context.useTailwind } ); return ( @@ -570,21 +579,27 @@ export const ColorPicker = React.memo( const createHue = () => { const hueProps = mergeProps( - { - className: cx('hue'), - onMouseDown: (e) => onHueMousedown(e), - onTouchStart: (e) => onHueDragStart(e), - onTouchMove: (e) => onDrag(e), - onTouchEnd: onDragEnd - }, - ptm('hue') + [ + { + className: cx('hue'), + onMouseDown: (e) => onHueMousedown(e), + onTouchStart: (e) => onHueDragStart(e), + onTouchMove: (e) => onDrag(e), + onTouchEnd: onDragEnd + }, + ptm('hue') + ], + { useTailwind: context.useTailwind } ); const hueHandlerProps = mergeProps( - { - className: cx('hueHandle') - }, - ptm('hueHandle') + [ + { + className: cx('hueHandle') + }, + ptm('hueHandle') + ], + { useTailwind: context.useTailwind } ); return ( @@ -598,10 +613,13 @@ export const ColorPicker = React.memo( const colorSelector = createColorSelector(); const hue = createHue(); const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return ( @@ -616,20 +634,23 @@ export const ColorPicker = React.memo( if (!props.inline) { const inputProps = ColorPickerBase.getOtherProps(props); const _inputProps = mergeProps( - { - ref: inputRef, - type: 'text', - readOnly: true, - className: cx('input'), - style: props.inputStyle, - id: props.inputId, - tabIndex: props.tabIndex, - disabled: props.disabled, - onClick: onInputClick, - onKeyDown: onInputKeydown, - ...inputProps - }, - ptm('input') + [ + { + ref: inputRef, + type: 'text', + readOnly: true, + className: cx('input'), + style: props.inputStyle, + id: props.inputId, + tabIndex: props.tabIndex, + disabled: props.disabled, + onClick: onInputClick, + onKeyDown: onInputKeydown, + ...inputProps + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ; @@ -642,14 +663,17 @@ export const ColorPicker = React.memo( const content = createContent(); const input = createInput(); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - style: props.style, - className: cx('root') - }, - ColorPickerBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + style: props.style, + className: cx('root') + }, + ColorPickerBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/colorpicker/ColorPickerPanel.js b/components/lib/colorpicker/ColorPickerPanel.js index c8b9edd08a..82bf5ba5c2 100644 --- a/components/lib/colorpicker/ColorPickerPanel.js +++ b/components/lib/colorpicker/ColorPickerPanel.js @@ -10,27 +10,33 @@ export const ColorPickerPanel = React.forwardRef((props, ref) => { const createElement = () => { const panelProps = mergeProps( - { - className: cx('panel', { panelProps: props, context }), - style: props.panelStyle, - onClick: props.onClick - }, - ptm('panel', { hostName: props.hostName }) + [ + { + className: cx('panel', { panelProps: props, context }), + style: props.panelStyle, + onClick: props.onClick + }, + ptm('panel', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: props.in, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: props.onEnter, - onEntered: props.onEntered, - onExit: props.onExit, - onExited: props.onExited - }, - ptm('transition', { hostName: props.hostName }) + [ + { + classNames: cx('transition'), + in: props.in, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: props.onEnter, + onEntered: props.onEntered, + onExit: props.onExit, + onExited: props.onExited + }, + ptm('transition', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index 61f1154138..7e5be71e48 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -532,7 +532,7 @@ export const ComponentBase = { return mergeSections || (!mergeSections && self) ? useMergeProps - ? mergeProps(globalPT, self, Object.keys(datasetProps).length ? datasetProps : {}) + ? mergeProps([globalPT, self, Object.keys(datasetProps).length ? datasetProps : {}], { useTailwind: ComponentBase.context.useTailwind }) : { ...globalPT, ...self, ...(Object.keys(datasetProps).length ? datasetProps : {}) } : { ...self, ...(Object.keys(datasetProps).length ? datasetProps : {}) }; }; @@ -555,7 +555,7 @@ export const ComponentBase = { const self = getOptionValue(css && css.inlineStyles, key, { props, state, ...params }); const base = getOptionValue(inlineStyles, key, { props, state, ...params }); - return mergeProps(base, self); + return mergeProps([base, self], { useTailwind: ComponentBase.context.useTailwind }); } return undefined; @@ -613,7 +613,7 @@ const _usePT = (pt, callback, key, params) => { else if (ObjectUtils.isString(value)) return value; else if (ObjectUtils.isString(originalValue)) return originalValue; - return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value; + return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps([originalValue, value], { useTailwind: ComponentBase.context.useTailwind }) : { ...originalValue, ...value }) : value; } return fn(pt); diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js index 98db4a645a..2d9b6730ca 100644 --- a/components/lib/confirmdialog/ConfirmDialog.js +++ b/components/lib/confirmdialog/ConfirmDialog.js @@ -148,17 +148,20 @@ export const ConfirmDialog = React.memo( }; const acceptButtonProps = mergeProps( - { - label: acceptLabel, - icon: getPropValue('acceptIcon'), - className: classNames(getPropValue('acceptClassName'), cx('acceptButton')), - onClick: accept, - unstyled: props.unstyled, - __parentMetadata: { - parent: metaData - } - }, - ptm('acceptButton') + [ + { + label: acceptLabel, + icon: getPropValue('acceptIcon'), + className: classNames(getPropValue('acceptClassName'), cx('acceptButton')), + onClick: accept, + unstyled: props.unstyled, + __parentMetadata: { + parent: metaData + } + }, + ptm('acceptButton') + ], + { useTailwind: context.useTailwind } ); const content = ( @@ -191,37 +194,46 @@ export const ConfirmDialog = React.memo( const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps); const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(getPropValue('icon'), { ...iconProps }, { props: currentProps }); const footer = createFooter(); const messageProps = mergeProps( - { - className: cx('message') - }, - ptm('message') + [ + { + className: cx('message') + }, + ptm('message') + ], + { useTailwind: context.useTailwind } ); const rootProps = mergeProps( - { - visible: visibleState, - className: classNames(getPropValue('className'), cx('root')), - footer, - onHide: hide, - breakpoints: getPropValue('breakpoints'), - pt: currentProps.pt, - unstyled: props.unstyled, - appendTo: getPropValue('appendTo'), - __parentMetadata: { - parent: metaData - } - }, - ConfirmDialogBase.getOtherProps(currentProps) + [ + { + visible: visibleState, + className: classNames(getPropValue('className'), cx('root')), + footer, + onHide: hide, + breakpoints: getPropValue('breakpoints'), + pt: currentProps.pt, + unstyled: props.unstyled, + appendTo: getPropValue('appendTo'), + __parentMetadata: { + parent: metaData + } + }, + ConfirmDialogBase.getOtherProps(currentProps) + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js index 67b6c4463b..114c0ebce2 100644 --- a/components/lib/confirmpopup/ConfirmPopup.js +++ b/components/lib/confirmpopup/ConfirmPopup.js @@ -233,25 +233,34 @@ export const ConfirmPopup = React.memo( const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps); const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(getPropValue('icon'), { ...iconProps }, { props: currentProps }); const messageProps = mergeProps( - { - className: cx('message') - }, - ptm('message') + [ + { + className: cx('message') + }, + ptm('message') + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return ( @@ -273,36 +282,49 @@ export const ConfirmPopup = React.memo( ); const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); - const rejectButtonProps = mergeProps({ - label: rejectLabel, - icon: getPropValue('rejectIcon'), - className: cx('rejectButton', { getPropValue }), - onClick: reject, - pt: ptm('rejectButton'), - unstyled: props.unstyled, - __parentMetadata: { - parent: metaData - } - }); + const rejectButtonProps = mergeProps( + [ + { + label: rejectLabel, + icon: getPropValue('rejectIcon'), + className: cx('rejectButton', { getPropValue }), + onClick: reject, + pt: ptm('rejectButton'), + unstyled: props.unstyled, + __parentMetadata: { + parent: metaData + } + } + ], + { useTailwind: context.useTailwind } + ); - const acceptButtonProps = mergeProps({ - ref: acceptBtnRef, - label: acceptLabel, - icon: getPropValue('acceptIcon'), - className: cx('acceptButton', { getPropValue }), - onClick: accept, - pt: ptm('acceptButton'), - unstyled: props.unstyled, - __parentMetadata: { - parent: metaData - } - }); + const acceptButtonProps = mergeProps( + [ + { + ref: acceptBtnRef, + label: acceptLabel, + icon: getPropValue('acceptIcon'), + className: cx('acceptButton', { getPropValue }), + onClick: accept, + pt: ptm('acceptButton'), + unstyled: props.unstyled, + __parentMetadata: { + parent: metaData + } + } + ], + { useTailwind: context.useTailwind } + ); const content = (
    @@ -335,30 +357,36 @@ export const ConfirmPopup = React.memo( const footer = createFooter(); const rootProps = mergeProps( - { - ref: overlayRef, - id: getPropValue('id'), - className: cx('root', { context, getPropValue }), - style: getPropValue('style'), - onClick: onPanelClick - }, - ConfirmPopupBase.getOtherProps(props), - ptm('root') + [ + { + ref: overlayRef, + id: getPropValue('id'), + className: cx('root', { context, getPropValue }), + style: getPropValue('style'), + onClick: onPanelClick + }, + ConfirmPopupBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: visibleState, - timeout: { enter: 120, exit: 100 }, - options: getPropValue('transitionOptions'), - unmountOnExit: true, - onEnter, - onEntered, - onExit, - onExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: visibleState, + timeout: { enter: 120, exit: 100 }, + options: getPropValue('transitionOptions'), + unmountOnExit: true, + onEnter, + onEntered, + onExit, + onExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js index b275832ca5..08995d18f7 100644 --- a/components/lib/contextmenu/ContextMenu.js +++ b/components/lib/contextmenu/ContextMenu.js @@ -267,30 +267,36 @@ export const ContextMenu = React.memo( const createContextMenu = () => { const rootProps = mergeProps( - { - id: props.id, - className: classNames(props.className, cx('root', { context })), - style: props.style, - onClick: (e) => onMenuClick(e), - onMouseEnter: (e) => onMenuMouseEnter(e) - }, - ContextMenuBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + className: classNames(props.className, cx('root', { context })), + style: props.style, + onClick: (e) => onMenuClick(e), + onMouseEnter: (e) => onMenuMouseEnter(e) + }, + ContextMenuBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: visibleState, - timeout: { enter: 250, exit: 0 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: onEnter, - onEntered: onEntered, - onExit: onExit, - onExited: onExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: visibleState, + timeout: { enter: 250, exit: 0 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: onEnter, + onEntered: onEntered, + onExit: onExit, + onExited: onExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js index dad7563886..c5baa5c969 100644 --- a/components/lib/contextmenu/ContextMenuSub.js +++ b/components/lib/contextmenu/ContextMenuSub.js @@ -3,9 +3,11 @@ import { CSSTransition } from '../csstransition/CSSTransition'; import { useUpdateEffect } from '../hooks/Hooks'; import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; export const ContextMenuSub = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [activeItemState, setActiveItemState] = React.useState(null); const submenuRef = React.useRef(null); const active = props.root || !props.resetMenu; @@ -96,13 +98,16 @@ export const ContextMenuSub = React.memo((props) => { const createSeparator = (index) => { const key = props.id + '_separator_' + index; const separatorProps = mergeProps( - { - id: key, - key, - className: cx('separator'), - role: 'separator' - }, - ptm('separator', { hostName: props.hostName }) + [ + { + id: key, + key, + className: cx('separator'), + role: 'separator' + }, + ptm('separator', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return
  • ; @@ -137,39 +142,51 @@ export const ContextMenuSub = React.memo((props) => { const active = activeItemState === item; const key = item.id || props.id + '_' + index; const iconProps = mergeProps( - { - className: cx('icon') - }, - getPTOptions(item, 'icon') + [ + { + className: cx('icon') + }, + getPTOptions(item, 'icon') + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps }); const submenuIconProps = mergeProps( - { - className: cx('submenuIcon') - }, - getPTOptions(item, 'submenuIcon') + [ + { + className: cx('submenuIcon') + }, + getPTOptions(item, 'submenuIcon') + ], + { useTailwind: context.useTailwind } ); const labelProps = mergeProps( - { - className: cx('label') - }, - getPTOptions(item, 'label') + [ + { + className: cx('label') + }, + getPTOptions(item, 'label') + ], + { useTailwind: context.useTailwind } ); const submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || , { ...submenuIconProps }, { props: props.menuProps }); const label = item.label && {item.label}; const submenu = createSubmenu(item, index); const actionProps = mergeProps( - { - href: item.url || '#', - className: cx('action', { item }), - target: item.target, - onClick: (event) => onItemClick(event, item, index), - role: 'menuitem', - 'aria-haspopup': item.items != null, - 'aria-disabled': item.disabled - }, - getPTOptions(item, 'action') + [ + { + href: item.url || '#', + className: cx('action', { item }), + target: item.target, + onClick: (event) => onItemClick(event, item, index), + role: 'menuitem', + 'aria-haspopup': item.items != null, + 'aria-disabled': item.disabled + }, + getPTOptions(item, 'action') + ], + { useTailwind: context.useTailwind } ); let content = ( @@ -197,16 +214,19 @@ export const ContextMenuSub = React.memo((props) => { } const menuitemProps = mergeProps( - { - id: key, - key, - role: 'none', - className: cx('menuitem', { item, active }), - style: item.style, - key, - onMouseEnter: (event) => onItemMouseEnter(event, item) - }, - getPTOptions(item, 'menuitem') + [ + { + id: key, + key, + role: 'none', + className: cx('menuitem', { item, active }), + style: item.style, + key, + onMouseEnter: (event) => onItemMouseEnter(event, item) + }, + getPTOptions(item, 'menuitem') + ], + { useTailwind: context.useTailwind } ); return ( @@ -227,21 +247,27 @@ export const ContextMenuSub = React.memo((props) => { const submenu = createMenu(); const menuProps = mergeProps( - { - className: cx('menu', { menuProps: props }) - }, - ptm('menu', { hostName: props.hostName }) + [ + { + className: cx('menu', { menuProps: props }) + }, + ptm('menu', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('submenuTransition'), - in: active, - timeout: { enter: 0, exit: 0 }, - unmountOnExit: true, - onEnter - }, - ptm('menu.transition', { hostName: props.hostName }) + [ + { + classNames: cx('submenuTransition'), + in: active, + timeout: { enter: 0, exit: 0 }, + unmountOnExit: true, + onEnter + }, + ptm('menu.transition', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js index f306ec81f3..97ebefbcdc 100644 --- a/components/lib/datascroller/DataScroller.js +++ b/components/lib/datascroller/DataScroller.js @@ -162,10 +162,13 @@ export const DataScroller = React.memo( const createHeader = () => { const headerProps = mergeProps( - { - className: cx('header') - }, - ptm('header') + [ + { + className: cx('header') + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); if (props.header) { @@ -177,10 +180,13 @@ export const DataScroller = React.memo( const createFooter = () => { const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); if (props.footer) { @@ -192,10 +198,13 @@ export const DataScroller = React.memo( const createItem = (_value, index) => { const itemProps = mergeProps( - { - key: index + '_datascrollitem' - }, - ptm('item') + [ + { + key: index + '_datascrollitem' + }, + ptm('item') + ], + { useTailwind: context.useTailwind } ); const content = props.itemTemplate ? props.itemTemplate(_value) : _value; @@ -203,7 +212,7 @@ export const DataScroller = React.memo( }; const createEmptyMessage = () => { - const emptyMessageProps = mergeProps(ptm('emptyMessage')); + const emptyMessageProps = mergeProps([ptm('emptyMessage')], { useTailwind: context.useTailwind }); const content = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage'); @@ -212,18 +221,24 @@ export const DataScroller = React.memo( const createContent = () => { const contentProps = mergeProps( - { - ref: contentRef, - className: cx('content'), - style: sx('content') - }, - ptm('content') + [ + { + ref: contentRef, + className: cx('content'), + style: sx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); const listProps = mergeProps( - { - className: cx('list') - }, - ptm('list') + [ + { + className: cx('list') + }, + ptm('list') + ], + { useTailwind: context.useTailwind } ); const content = ObjectUtils.isNotEmpty(dataToRenderState) ? dataToRenderState.map(createItem) : createEmptyMessage(); @@ -239,13 +254,16 @@ export const DataScroller = React.memo( const content = createContent(); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - className: classNames(props.className, cx('root')) - }, - DataScrollerBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + className: classNames(props.className, cx('root')) + }, + DataScrollerBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 02d7514119..78d86afe72 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ariaLabel } from '../api/Api'; +import { ariaLabel, PrimeReactContext } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { useEventListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { BarsIcon } from '../icons/bars'; @@ -15,6 +15,7 @@ import { RowCheckbox } from './RowCheckbox'; import { RowRadioButton } from './RowRadioButton'; export const BodyCell = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [editingState, setEditingState] = React.useState(props.editing); const [editingRowDataState, setEditingRowDataState] = React.useState(props.rowData); const [styleObjectState, setStyleObjectState] = React.useState({}); @@ -48,7 +49,7 @@ export const BodyCell = React.memo((props) => { } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)], { useTailwind: context.useTailwind }); }; const field = getColumnProp('field') || `field_${props.index}`; @@ -546,7 +547,7 @@ export const BodyCell = React.memo((props) => { field: field }); const content = ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options); - const bodyCellProps = mergeProps(getColumnPTOptions('bodyCell')); + const bodyCellProps = mergeProps([getColumnPTOptions('bodyCell')], { useTailwind: context.useTailwind }); return {content}; }; @@ -571,10 +572,13 @@ export const BodyCell = React.memo((props) => { const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions); const style = getStyle(); const columnTitleProps = mergeProps( - { - className: cx('columnTitle') - }, - getColumnPTOptions('columnTitle') + [ + { + className: cx('columnTitle') + }, + getColumnPTOptions('columnTitle') + ], + { useTailwind: context.useTailwind } ); const title = props.responsiveLayout === 'stack' && {ObjectUtils.getJSXElement(header, { props: props.tableProps })}; @@ -625,21 +629,27 @@ export const BodyCell = React.memo((props) => { } else if (rowReorder) { const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true; const rowReorderIconProps = mergeProps( - { - className: cx('rowReorderIcon') - }, - getColumnPTOptions('rowReorderIcon') + [ + { + className: cx('rowReorderIcon') + }, + getColumnPTOptions('rowReorderIcon') + ], + { useTailwind: context.useTailwind } ); const rowReorderIcon = getColumnProp('rowReorderIcon') || ; content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, { ...rowReorderIconProps }, { props }) : null; } else if (expander) { const rowTogglerIconProps = mergeProps( - { - className: cx('rowTogglerIcon'), - 'aria-hidden': true - }, - getColumnPTOptions('rowTogglerIcon') + [ + { + className: cx('rowTogglerIcon'), + 'aria-hidden': true + }, + getColumnPTOptions('rowTogglerIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.expanded ? props.expandedRowIcon || : props.collapsedRowIcon || ; const togglerIcon = IconUtils.getJSXIcon(icon, { ...rowTogglerIconProps }, { props }); @@ -652,15 +662,18 @@ export const BodyCell = React.memo((props) => { className: cx('rowToggler') }; const rowTogglerProps = mergeProps( - { - ...expanderProps, - type: 'button', - 'aria-expanded': props.expanded, - 'aria-controls': ariaControls, - tabIndex: props.tabIndex, - 'aria-label': label - }, - getColumnPTOptions('rowToggler') + [ + { + ...expanderProps, + type: 'button', + 'aria-expanded': props.expanded, + 'aria-controls': ariaControls, + tabIndex: props.tabIndex, + 'aria-label': label + }, + getColumnPTOptions('rowToggler') + ], + { useTailwind: context.useTailwind } ); content = ( @@ -676,9 +689,9 @@ export const BodyCell = React.memo((props) => { } } else if (isRowEditor && rowEditor) { let rowEditorProps = {}; - const rowEditorSaveIconProps = mergeProps({ className: cx('rowEditorSaveIcon') }, getColumnPTOptions('rowEditorSaveIcon')); - const rowEditorCancelIconProps = mergeProps({ className: cx('rowEditorCancelIcon') }, getColumnPTOptions('rowEditorCancelIcon')); - const rowEditorInitIconProps = mergeProps({ className: cx('rowEditorInitIcon') }, getColumnPTOptions('rowEditorInitIcon')); + const rowEditorSaveIconProps = mergeProps([{ className: cx('rowEditorSaveIcon') }, getColumnPTOptions('rowEditorSaveIcon')], { useTailwind: context.useTailwind }); + const rowEditorCancelIconProps = mergeProps([{ className: cx('rowEditorCancelIcon') }, getColumnPTOptions('rowEditorCancelIcon')], { useTailwind: context.useTailwind }); + const rowEditorInitIconProps = mergeProps([{ className: cx('rowEditorInitIcon') }, getColumnPTOptions('rowEditorInitIcon')], { useTailwind: context.useTailwind }); const rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || , { ...rowEditorSaveIconProps }, { props }); const rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || , { ...rowEditorCancelIconProps }, { props }); const rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || , { ...rowEditorInitIconProps }, { props }); @@ -693,26 +706,32 @@ export const BodyCell = React.memo((props) => { }; const rowEditorSaveButtonProps = mergeProps( - { - type: 'button', - name: 'row-save', - onClick: rowEditorProps.onSaveClick, - className: rowEditorProps.saveClassName, - tabIndex: props.tabIndex, - 'data-p-row-editor-save': true - }, - getColumnPTOptions('rowEditorSaveButton') + [ + { + type: 'button', + name: 'row-save', + onClick: rowEditorProps.onSaveClick, + className: rowEditorProps.saveClassName, + tabIndex: props.tabIndex, + 'data-p-row-editor-save': true + }, + getColumnPTOptions('rowEditorSaveButton') + ], + { useTailwind: context.useTailwind } ); const rowEditorCancelButtonProps = mergeProps( - { - type: 'button', - name: 'row-cancel', - onClick: rowEditorProps.onCancelClick, - className: rowEditorProps.cancelClassName, - tabIndex: props.tabIndex - }, - getColumnPTOptions('rowEditorCancelButton') + [ + { + type: 'button', + name: 'row-cancel', + onClick: rowEditorProps.onCancelClick, + className: rowEditorProps.cancelClassName, + tabIndex: props.tabIndex + }, + getColumnPTOptions('rowEditorCancelButton') + ], + { useTailwind: context.useTailwind } ); content = ( @@ -735,15 +754,18 @@ export const BodyCell = React.memo((props) => { }; const rowEditorInitButtonProps = mergeProps( - { - type: 'button', - name: 'row-edit', - onClick: rowEditorProps.onInitClick, - className: rowEditorProps.initClassName, - tabIndex: props.tabIndex, - 'data-p-row-editor-init': true - }, - getColumnPTOptions('rowEditorInitButton') + [ + { + type: 'button', + name: 'row-edit', + onClick: rowEditorProps.onInitClick, + className: rowEditorProps.initClassName, + tabIndex: props.tabIndex, + 'data-p-row-editor-init': true + }, + getColumnPTOptions('rowEditorInitButton') + ], + { useTailwind: context.useTailwind } ); content = ( @@ -779,15 +801,18 @@ export const BodyCell = React.memo((props) => { if (!isRowEditor && editor) { const editorKeyHelperProps = mergeProps( - { - tabIndex: '0', - className: 'p-cell-editor-key-helper p-hidden-accessible', - onFocus: (e) => onEditorFocus(e) - }, - getColumnPTOptions('editorKeyHelperLabel') + [ + { + tabIndex: '0', + className: 'p-cell-editor-key-helper p-hidden-accessible', + onFocus: (e) => onEditorFocus(e) + }, + getColumnPTOptions('editorKeyHelperLabel') + ], + { useTailwind: context.useTailwind } ); - const editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper')); + const editorKeyHelperLabelProps = mergeProps([getColumnPTOptions('editorKeyHelper')], { useTailwind: context.useTailwind }); /* eslint-disable */ editorKeyHelper = ( @@ -798,25 +823,28 @@ export const BodyCell = React.memo((props) => { } const bodyCellProps = mergeProps( - { - style, - className: classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', { selectionMode, editor, editingState, frozen, cellSelected, align, bodyProps: props, getCellParams })), - rowSpan: props.rowSpan, - tabIndex, - role: 'cell', - onClick: (e) => onClick(e), - onKeyDown: (e) => onKeyDown(e), - onBlur: (e) => onBlur(e), - onMouseDown: (e) => onMouseDown(e), - onMouseUp: (e) => onMouseUp(e), - 'data-p-selectable-cell': props.allowCellSelection && props.isSelectable({ data: getCellParams(), index: props.rowIndex }), - 'data-p-selection-column': getColumnProp('selectionMode') != null, - 'data-p-editable-column': isEditable() != null, - 'data-p-cell-editing': editingState, - 'data-p-frozen-column': frozen - }, - getColumnPTOptions('root'), - getColumnPTOptions('bodyCell') + [ + { + style, + className: classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', { selectionMode, editor, editingState, frozen, cellSelected, align, bodyProps: props, getCellParams })), + rowSpan: props.rowSpan, + tabIndex, + role: 'cell', + onClick: (e) => onClick(e), + onKeyDown: (e) => onKeyDown(e), + onBlur: (e) => onBlur(e), + onMouseDown: (e) => onMouseDown(e), + onMouseUp: (e) => onMouseUp(e), + 'data-p-selectable-cell': props.allowCellSelection && props.isSelectable({ data: getCellParams(), index: props.rowIndex }), + 'data-p-selection-column': getColumnProp('selectionMode') != null, + 'data-p-editable-column': isEditable() != null, + 'data-p-cell-editing': editingState, + 'data-p-frozen-column': frozen + }, + getColumnPTOptions('root'), + getColumnPTOptions('bodyCell') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index df179c5171..758ffb1dbc 100644 --- a/components/lib/datatable/BodyRow.js +++ b/components/lib/datatable/BodyRow.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; +import { PrimeReactContext } from '../api/Api'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { BodyCell } from './BodyCell'; export const BodyRow = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [editingState, setEditingState] = React.useState(false); const editing = props.onRowEditChange ? props.editing : editingState; const { ptm, cx } = props.ptCallbacks; @@ -388,32 +390,35 @@ export const BodyRow = React.memo((props) => { const content = createContent(); const tabIndex = getTabIndex(); const rowProps = mergeProps( - { - role: 'row', - tabIndex: tabIndex, - className: classNames(rowClassName, cx('bodyRow', { rowProps: props })), - style: style, - onMouseDown: (e) => onMouseDown(e), - onMouseUp: (e) => onMouseUp(e), - onMouseEnter: (e) => onMouseEnter(e), - onMouseLeave: (e) => onMouseLeave(e), - onClick: (e) => onClick(e), - onDoubleClick: (e) => onDoubleClick(e), - onPointerDown: (e) => onPointerDown(e), - onPointerUp: (e) => onPointerUp(e), - onContextMenu: (e) => onRightClick(e), - onTouchEnd: (e) => onTouchEnd(e), - onKeyDown: (e) => onKeyDown(e), - onDragStart: (e) => onDragStart(e), - onDragOver: (e) => onDragOver(e), - onDragLeave: (e) => onDragLeave(e), - onDragEnd: (e) => onDragEnd(e), - onDrop: (e) => onDrop(e), - 'data-p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }), - 'data-p-highlight': props.selected, - 'data-p-highlight-contextmenu': props.contextMenuSelected - }, - getBodyRowPTOptions('bodyRow') + [ + { + role: 'row', + tabIndex: tabIndex, + className: classNames(rowClassName, cx('bodyRow', { rowProps: props })), + style: style, + onMouseDown: (e) => onMouseDown(e), + onMouseUp: (e) => onMouseUp(e), + onMouseEnter: (e) => onMouseEnter(e), + onMouseLeave: (e) => onMouseLeave(e), + onClick: (e) => onClick(e), + onDoubleClick: (e) => onDoubleClick(e), + onPointerDown: (e) => onPointerDown(e), + onPointerUp: (e) => onPointerUp(e), + onContextMenu: (e) => onRightClick(e), + onTouchEnd: (e) => onTouchEnd(e), + onKeyDown: (e) => onKeyDown(e), + onDragStart: (e) => onDragStart(e), + onDragOver: (e) => onDragOver(e), + onDragLeave: (e) => onDragLeave(e), + onDragEnd: (e) => onDragEnd(e), + onDrop: (e) => onDrop(e), + 'data-p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }), + 'data-p-highlight': props.selected, + 'data-p-highlight-contextmenu': props.contextMenuSelected + }, + getBodyRowPTOptions('bodyRow') + ], + { useTailwind: context.useTailwind } ); return {content}; diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js index e3399c8d6e..5c125e0377 100644 --- a/components/lib/datatable/ColumnFilter.js +++ b/components/lib/datatable/ColumnFilter.js @@ -39,7 +39,7 @@ export const ColumnFilter = React.memo((props) => { ...params }; - return mergeProps(ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata)); + return mergeProps([ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata)], { useTailwind: context.useTailwind }); }; const field = getColumnProp('filterField') || getColumnProp('field'); @@ -505,10 +505,13 @@ export const ColumnFilter = React.memo((props) => { if (props.display === 'row') { const content = createFilterElement(filterModel, 0); const filterInputProps = mergeProps( - { - className: cx('filterInput') - }, - getColumnPTOptions('filterInput') + [ + { + className: cx('filterInput') + }, + getColumnPTOptions('filterInput') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -527,30 +530,36 @@ export const ColumnFilter = React.memo((props) => { } const filterIconProps = mergeProps( - { - 'aria-hidden': true - }, - getColumnPTOptions('filterIcon') + [ + { + 'aria-hidden': true + }, + getColumnPTOptions('filterIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.filterIcon || ; const columnFilterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props }); const label = filterLabel(); const filterMenuButtonProps = mergeProps( - { - type: 'button', - className: cx('filterMenuButton', { overlayVisibleState, hasFilter }), - 'aria-haspopup': true, - 'aria-expanded': overlayVisibleState, - onClick: (e) => toggleMenu(e), - onKeyDown: (e) => onToggleButtonKeyDown(e), - 'aria-label': label - }, - getColumnPTOptions('filterMenuButton', { - context: { - active: hasFilter() - } - }) + [ + { + type: 'button', + className: cx('filterMenuButton', { overlayVisibleState, hasFilter }), + 'aria-haspopup': true, + 'aria-expanded': overlayVisibleState, + onClick: (e) => toggleMenu(e), + onKeyDown: (e) => onToggleButtonKeyDown(e), + 'aria-label': label + }, + getColumnPTOptions('filterMenuButton', { + context: { + active: hasFilter() + } + }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -567,10 +576,13 @@ export const ColumnFilter = React.memo((props) => { } const filterClearIconProps = mergeProps( - { - 'aria-hidden': true - }, - getColumnPTOptions('filterClearIcon') + [ + { + 'aria-hidden': true + }, + getColumnPTOptions('filterClearIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.filterClearIcon || ; const filterClearIcon = IconUtils.getJSXIcon(icon, { ...filterClearIconProps }, { props }); @@ -578,17 +590,20 @@ export const ColumnFilter = React.memo((props) => { if (getColumnProp('showClearButton') && props.display === 'row') { const clearLabel = clearButtonLabel(); const headerFilterClearButtonProps = mergeProps( - { - className: cx('headerFilterClearButton', { hasRowFilter }), - type: 'button', - onClick: (e) => clearFilter(e), - 'aria-label': clearLabel - }, - getColumnPTOptions('headerFilterClearButton', { - context: { - hidden: hasRowFilter() - } - }) + [ + { + className: cx('headerFilterClearButton', { hasRowFilter }), + type: 'button', + onClick: (e) => clearFilter(e), + 'aria-label': clearLabel + }, + getColumnPTOptions('headerFilterClearButton', { + context: { + hidden: hasRowFilter() + } + }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -607,27 +622,36 @@ export const ColumnFilter = React.memo((props) => { const _matchModes = matchModes(); const _noFilterLabel = noFilterLabel(); const filterSeparatorProps = mergeProps( - { - className: cx('filterSeparator'), - 'data-p-column-filter-separator': true - }, - getColumnPTOptions('filterSeparator') + [ + { + className: cx('filterSeparator'), + 'data-p-column-filter-separator': true + }, + getColumnPTOptions('filterSeparator') + ], + { useTailwind: context.useTailwind } ); const filterRowItemProps = mergeProps( - { - className: cx('filterRowItem', { isRowMatchModeSelected, isShowMatchModes }), - onClick: (e) => clearFilter(e), - onKeyDown: (e) => onRowMatchModeKeyDown(e, null, true) - }, - getColumnPTOptions('filterRowItem') + [ + { + className: cx('filterRowItem', { isRowMatchModeSelected, isShowMatchModes }), + onClick: (e) => clearFilter(e), + onKeyDown: (e) => onRowMatchModeKeyDown(e, null, true) + }, + getColumnPTOptions('filterRowItem') + ], + { useTailwind: context.useTailwind } ); const filterRowItemsProps = mergeProps( - { - className: cx('filterRowItems') - }, - getColumnPTOptions('filterRowItems') + [ + { + className: cx('filterRowItems') + }, + getColumnPTOptions('filterRowItems') + ], + { useTailwind: context.useTailwind } ); return ( @@ -636,17 +660,20 @@ export const ColumnFilter = React.memo((props) => { const { value, label } = matchMode; const tabIndex = i === 0 ? 0 : null; const filterRowItemProps = mergeProps( - { - className: cx('filterRowItem', { isRowMatchModeSelected, isShowMatchModes, value }), - onClick: () => onRowMatchModeChange(value), - onKeyDown: (e) => onRowMatchModeKeyDown(e, matchMode), - tabIndex - }, - getColumnPTOptions('filterRowItem', { - context: { - highlighted: matchMode && isRowMatchModeSelected(value) - } - }) + [ + { + className: cx('filterRowItem', { isRowMatchModeSelected, isShowMatchModes, value }), + onClick: () => onRowMatchModeChange(value), + onKeyDown: (e) => onRowMatchModeKeyDown(e, matchMode), + tabIndex + }, + getColumnPTOptions('filterRowItem', { + context: { + highlighted: matchMode && isRowMatchModeSelected(value) + } + }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -669,10 +696,13 @@ export const ColumnFilter = React.memo((props) => { const options = operatorOptions(); const value = operator(); const filterOperatorProps = mergeProps( - { - className: cx('filterOperator') - }, - getColumnPTOptions('filterOperator') + [ + { + className: cx('filterOperator') + }, + getColumnPTOptions('filterOperator') + ], + { useTailwind: context.useTailwind } ); return ( @@ -737,17 +767,23 @@ export const ColumnFilter = React.memo((props) => { const createConstraints = () => { const _fieldConstraints = fieldConstraints(); const filterConstraintsProps = mergeProps( - { - className: cx('filterConstraints') - }, - getColumnPTOptions('filterConstraints') + [ + { + className: cx('filterConstraints') + }, + getColumnPTOptions('filterConstraints') + ], + { useTailwind: context.useTailwind } ); const filterConstraintProps = mergeProps( - { - className: cx('filterConstraint') - }, - getColumnPTOptions('filterConstraint') + [ + { + className: cx('filterConstraint') + }, + getColumnPTOptions('filterConstraint') + ], + { useTailwind: context.useTailwind } ); return ( @@ -756,7 +792,7 @@ export const ColumnFilter = React.memo((props) => { const matchModeDropdown = createMatchModeDropdown(fieldConstraint, i); const menuFilterElement = createMenuFilterElement(fieldConstraint, i); const removeButton = createRemoveButton(i); - const filterRemoveProps = mergeProps(getColumnPTOptions('filterRemove')); + const filterRemoveProps = mergeProps([getColumnPTOptions('filterRemove')], { useTailwind: context.useTailwind }); return (
    @@ -774,10 +810,13 @@ export const ColumnFilter = React.memo((props) => { if (isShowAddConstraint()) { const addRuleLabel = addRuleButtonLabel(); const filterAddRuleProps = mergeProps( - { - className: cx('filterAddRule') - }, - getColumnPTOptions('filterAddRule') + [ + { + className: cx('filterAddRule') + }, + getColumnPTOptions('filterAddRule') + ], + { useTailwind: context.useTailwind } ); return ( @@ -831,10 +870,13 @@ export const ColumnFilter = React.memo((props) => { const clearButton = createFilterClearButton(); const applyButton = createFilterApplyButton(); const filterButtonbarProps = mergeProps( - { - className: cx('filterButtonBar') - }, - getColumnPTOptions('filterButtonBar') + [ + { + className: cx('filterButtonBar') + }, + getColumnPTOptions('filterButtonBar') + ], + { useTailwind: context.useTailwind } ); return ( @@ -867,28 +909,34 @@ export const ColumnFilter = React.memo((props) => { const filterFooter = ObjectUtils.getJSXElement(getColumnProp('filterFooter'), { field, filterModel, filterApplyCallback }); const items = props.display === 'row' ? createRowItems() : createItems(); const filterOverlayProps = mergeProps( - { - style, - className: cx('filterOverlay', { columnFilterProps: props, context, getColumnProp }), - onKeyDown: (e) => onContentKeyDown(e), - onClick: (e) => onContentClick(e), - onMouseDown: (e) => onContentMouseDown(e) - }, - getColumnPTOptions('filterOverlay') + [ + { + style, + className: cx('filterOverlay', { columnFilterProps: props, context, getColumnProp }), + onKeyDown: (e) => onContentKeyDown(e), + onClick: (e) => onContentClick(e), + onMouseDown: (e) => onContentMouseDown(e) + }, + getColumnPTOptions('filterOverlay') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: overlayVisibleState, - timeout: { enter: 120, exit: 100 }, - unmountOnExit: true, - onEnter: onOverlayEnter, - onEntered: onOverlayEntered, - onExit: onOverlayExit, - onExited: onOverlayExited - }, - getColumnPTOptions('transition') + [ + { + classNames: cx('transition'), + in: overlayVisibleState, + timeout: { enter: 120, exit: 100 }, + unmountOnExit: true, + onEnter: onOverlayEnter, + onEntered: onOverlayEntered, + onExit: onOverlayExit, + onExited: onOverlayExited + }, + getColumnPTOptions('transition') + ], + { useTailwind: context.useTailwind } ); return ( @@ -909,10 +957,13 @@ export const ColumnFilter = React.memo((props) => { const clearButton = createClearButton(); const overlay = createOverlay(); const columnFilter = mergeProps( - { - className: cx('columnFilter', { columnFilterProps: props }) - }, - getColumnPTOptions('columnFilter') + [ + { + className: cx('columnFilter', { columnFilterProps: props }) + }, + getColumnPTOptions('columnFilter') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index e977075b8b..21153fc06f 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -1493,18 +1493,24 @@ export const DataTable = React.forwardRef((inProps, ref) => { const createLoader = () => { if (props.loading) { const loadingIconProps = mergeProps( - { - className: ptCallbacks.cx('loadingIcon') - }, - ptCallbacks.ptm('loadingIcon') + [ + { + className: ptCallbacks.cx('loadingIcon') + }, + ptCallbacks.ptm('loadingIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.loadingIcon || ; const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props }); const loadingOverlayProps = mergeProps( - { - className: ptCallbacks.cx('loadingOverlay') - }, - ptCallbacks.ptm('loadingOverlay') + [ + { + className: ptCallbacks.cx('loadingOverlay') + }, + ptCallbacks.ptm('loadingOverlay') + ], + { useTailwind: context.useTailwind } ); return
    {loadingIcon}
    ; @@ -1517,10 +1523,13 @@ export const DataTable = React.forwardRef((inProps, ref) => { if (props.header) { const content = ObjectUtils.getJSXElement(props.header, { props }); const headerProps = mergeProps( - { - className: ptCallbacks.cx('header') - }, - ptCallbacks.ptm('header') + [ + { + className: ptCallbacks.cx('header') + }, + ptCallbacks.ptm('header') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -1781,11 +1790,14 @@ export const DataTable = React.forwardRef((inProps, ref) => { const _isVirtualScrollerDisabled = isVirtualScrollerDisabled(); const virtualScrollerOptions = props.virtualScrollerOptions || {}; const wrapperProps = mergeProps( - { - className: ptCallbacks.cx('wrapper'), - style: { ...ptCallbacks.sx('wrapper'), maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null } - }, - ptCallbacks.ptm('wrapper') + [ + { + className: ptCallbacks.cx('wrapper'), + style: { ...ptCallbacks.sx('wrapper'), maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null } + }, + ptCallbacks.ptm('wrapper') + ], + { useTailwind: context.useTailwind } ); return ( @@ -1814,12 +1826,15 @@ export const DataTable = React.forwardRef((inProps, ref) => { const tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled); const tableFooter = createTableFooter(options); const tableProps = mergeProps( - { - className: classNames(props.tableClassName, ptCallbacks.cx('table')), - style: props.tableStyle, - role: 'table' - }, - ptCallbacks.ptm('table') + [ + { + className: classNames(props.tableClassName, ptCallbacks.cx('table')), + style: props.tableStyle, + role: 'table' + }, + ptCallbacks.ptm('table') + ], + { useTailwind: context.useTailwind } ); return ( @@ -1839,10 +1854,13 @@ export const DataTable = React.forwardRef((inProps, ref) => { if (props.footer) { const content = ObjectUtils.getJSXElement(props.footer, { props }); const footerProps = mergeProps( - { - className: ptCallbacks.cx('footer') - }, - ptCallbacks.ptm('footer') + [ + { + className: ptCallbacks.cx('footer') + }, + ptCallbacks.ptm('footer') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -1893,11 +1911,14 @@ export const DataTable = React.forwardRef((inProps, ref) => { const createResizeHelper = () => { if (props.resizableColumns) { const resizeHelperProps = mergeProps( - { - className: ptCallbacks.cx('resizeHelper'), - style: ptCallbacks.sx('resizeHelper') - }, - ptCallbacks.ptm('resizeHelper') + [ + { + className: ptCallbacks.cx('resizeHelper'), + style: ptCallbacks.sx('resizeHelper') + }, + ptCallbacks.ptm('resizeHelper') + ], + { useTailwind: context.useTailwind } ); return
    ; @@ -1910,22 +1931,28 @@ export const DataTable = React.forwardRef((inProps, ref) => { if (props.reorderableColumns) { const style = { position: 'absolute', display: 'none' }; const reorderIndicatorUpProps = mergeProps( - { - className: ptCallbacks.cx('reorderIndicatorUp'), - style: ptCallbacks.sx('reorderIndicatorUp', { style }) - }, - ptCallbacks.ptm('reorderIndicatorUp') + [ + { + className: ptCallbacks.cx('reorderIndicatorUp'), + style: ptCallbacks.sx('reorderIndicatorUp', { style }) + }, + ptCallbacks.ptm('reorderIndicatorUp') + ], + { useTailwind: context.useTailwind } ); - const reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon')); + const reorderIndicatorUpIconProps = mergeProps([ptCallbacks.ptm('reorderIndicatorUpIcon')], { useTailwind: context.useTailwind }); const reorderIndicatorUpIcon = IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || , { ...reorderIndicatorUpIconProps }, { props }); const reorderIndicatorDownProps = mergeProps( - { - className: ptCallbacks.cx('reorderIndicatorDown'), - style: ptCallbacks.sx('reorderIndicatorDown', { style }) - }, - ptCallbacks.ptm('reorderIndicatorDown') + [ + { + className: ptCallbacks.cx('reorderIndicatorDown'), + style: ptCallbacks.sx('reorderIndicatorDown', { style }) + }, + ptCallbacks.ptm('reorderIndicatorDown') + ], + { useTailwind: context.useTailwind } ); - const reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon')); + const reorderIndicatorDownIconProps = mergeProps([ptCallbacks.ptm('reorderIndicatorDownIcon')], { useTailwind: context.useTailwind }); const reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || , { ...reorderIndicatorDownIconProps }, { props }); return ( @@ -1959,14 +1986,17 @@ export const DataTable = React.forwardRef((inProps, ref) => { const resizeHelper = createResizeHelper(); const reorderIndicators = createReorderIndicators(); const rootProps = mergeProps( - { - id: props.id, - className: classNames(props.className, ptCallbacks.cx('root', { selectable })), - style: props.style, - 'data-scrollselectors': '.p-datatable-wrapper' - }, - DataTableBase.getOtherProps(props), - ptCallbacks.ptm('root') + [ + { + id: props.id, + className: classNames(props.className, ptCallbacks.cx('root', { selectable })), + style: props.style, + 'data-scrollselectors': '.p-datatable-wrapper' + }, + DataTableBase.getOtherProps(props), + ptCallbacks.ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/FooterCell.js b/components/lib/datatable/FooterCell.js index 7960ca1223..12f026aa36 100644 --- a/components/lib/datatable/FooterCell.js +++ b/components/lib/datatable/FooterCell.js @@ -1,8 +1,10 @@ import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; export const FooterCell = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [styleObjectState, setStyleObjectState] = React.useState({}); const elementRef = React.useRef(null); const getColumnProps = () => ColumnBase.getCProps(props.column); @@ -24,7 +26,7 @@ export const FooterCell = React.memo((props) => { } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)], { useTailwind: context.useTailwind }); }; const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); @@ -79,15 +81,18 @@ export const FooterCell = React.memo((props) => { const rowSpan = getColumnProp('rowSpan'); const content = ObjectUtils.getJSXElement(getColumnProp('footer'), { props: props.tableProps }); const footerCellProps = mergeProps( - { - style, - className: classNames(getColumnProp('footerClassName'), getColumnProp('className'), cx('footerCell', { getColumnProp, align })), - role: 'cell', - colSpan, - rowSpan - }, - getColumnPTOptions('root'), - getColumnPTOptions('footerCell') + [ + { + style, + className: classNames(getColumnProp('footerClassName'), getColumnProp('className'), cx('footerCell', { getColumnProp, align })), + role: 'cell', + colSpan, + rowSpan + }, + getColumnPTOptions('root'), + getColumnPTOptions('footerCell') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 8e313c88b2..78f60514e8 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -5,11 +5,13 @@ import { SortAltIcon } from '../icons/sortalt'; import { SortAmountDownIcon } from '../icons/sortamountdown'; import { SortAmountUpAltIcon } from '../icons/sortamountupalt'; import { Tooltip } from '../tooltip/Tooltip'; +import { PrimeReactContext } from '../api/Api'; import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { ColumnFilter } from './ColumnFilter'; import { HeaderCheckbox } from './HeaderCheckbox'; export const HeaderCell = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [styleObjectState, setStyleObjectState] = React.useState({}); const elementRef = React.useRef(null); const prevColumn = usePrevious(props.column); @@ -38,7 +40,7 @@ export const HeaderCell = React.memo((props) => { } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)], { useTailwind: context.useTailwind }); }; const isBadgeVisible = () => { @@ -230,13 +232,16 @@ export const HeaderCell = React.memo((props) => { const createResizer = () => { if (props.resizableColumns && !getColumnProp('frozen')) { const columnResizerProps = mergeProps( - { - className: cx('columnResizer'), - onMouseDown: (e) => onResizerMouseDown(e), - onClick: (e) => onResizerClick(e), - onDoubleClick: (e) => onResizerDoubleClick(e) - }, - getColumnPTOptions('columnResizer') + [ + { + className: cx('columnResizer'), + onMouseDown: (e) => onResizerMouseDown(e), + onClick: (e) => onResizerClick(e), + onDoubleClick: (e) => onResizerDoubleClick(e) + }, + getColumnPTOptions('columnResizer') + ], + { useTailwind: context.useTailwind } ); return ; @@ -248,10 +253,13 @@ export const HeaderCell = React.memo((props) => { const createTitle = () => { const title = ObjectUtils.getJSXElement(getColumnProp('header'), { props: props.tableProps }); const headerTitleProps = mergeProps( - { - className: cx('headerTitle') - }, - getColumnPTOptions('headerTitle') + [ + { + className: cx('headerTitle') + }, + getColumnPTOptions('headerTitle') + ], + { useTailwind: context.useTailwind } ); return {title}; @@ -260,13 +268,16 @@ export const HeaderCell = React.memo((props) => { const createSortIcon = ({ sorted, sortOrder }) => { if (getColumnProp('sortable')) { const sortIconProps = mergeProps( - { - className: cx('sortIcon') - }, - getColumnPTOptions('sortIcon') + [ + { + className: cx('sortIcon') + }, + getColumnPTOptions('sortIcon') + ], + { useTailwind: context.useTailwind } ); - const sortProps = mergeProps(getColumnPTOptions('sort')); + const sortProps = mergeProps([getColumnPTOptions('sort')], { useTailwind: context.useTailwind }); let icon = sorted ? sortOrder < 0 ? : : ; let sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, { ...sortIconProps }, { props, sorted, sortOrder }); @@ -281,11 +292,14 @@ export const HeaderCell = React.memo((props) => { if (metaIndex !== -1 && isBadgeVisible()) { const value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1; const sortBadgeProps = mergeProps( - { - className: cx('sortBadge') - }, - getColumnPTOptions('root'), - getColumnPTOptions('sortBadge') + [ + { + className: cx('sortBadge') + }, + getColumnPTOptions('root'), + getColumnPTOptions('sortBadge') + ], + { useTailwind: context.useTailwind } ); return {value}; @@ -334,10 +348,13 @@ export const HeaderCell = React.memo((props) => { const checkbox = createCheckbox(); const filter = createFilter(); const headerContentProps = mergeProps( - { - className: cx('headerContent') - }, - getColumnPTOptions('headerContent') + [ + { + className: cx('headerContent') + }, + getColumnPTOptions('headerContent') + ], + { useTailwind: context.useTailwind } ); return ( @@ -369,30 +386,33 @@ export const HeaderCell = React.memo((props) => { const resizer = createResizer(); const header = createHeader(sortMeta); const headerCellProps = mergeProps( - { - className: classNames(headerClassName, cx('headerCell', { headerProps: props, frozen, sortMeta, align, _isSortableDisabled, getColumnProp })), - style, - role: 'columnheader', - onClick: (e) => onClick(e), - onKeyDown: (e) => onKeyDown(e), - onMouseDown: (e) => onMouseDown(e), - onDragStart: (e) => onDragStart(e), - onDragOver: (e) => onDragOver(e), - onDragLeave: (e) => onDragLeave(e), - onDrop: (e) => onDrop(e), - tabIndex, - colSpan, - rowSpan, - 'aria-sort': ariaSort, - 'data-p-sortable-column': getColumnProp('sortable'), - 'data-p-resizable-column': props.resizableColumns, - 'data-p-highlight': sortMeta.sorted, - 'data-p-filter-column': !props.metaData.props.headerColumnGroup && props.filterDisplay === 'row', - 'data-p-frozen-column': getColumnProp('frozen'), - 'data-p-reorderable-column': props.reorderableColumns - }, - getColumnPTOptions('root'), - getColumnPTOptions('headerCell') + [ + { + className: classNames(headerClassName, cx('headerCell', { headerProps: props, frozen, sortMeta, align, _isSortableDisabled, getColumnProp })), + style, + role: 'columnheader', + onClick: (e) => onClick(e), + onKeyDown: (e) => onKeyDown(e), + onMouseDown: (e) => onMouseDown(e), + onDragStart: (e) => onDragStart(e), + onDragOver: (e) => onDragOver(e), + onDragLeave: (e) => onDragLeave(e), + onDrop: (e) => onDrop(e), + tabIndex, + colSpan, + rowSpan, + 'aria-sort': ariaSort, + 'data-p-sortable-column': getColumnProp('sortable'), + 'data-p-resizable-column': props.resizableColumns, + 'data-p-highlight': sortMeta.sorted, + 'data-p-filter-column': !props.metaData.props.headerColumnGroup && props.filterDisplay === 'row', + 'data-p-frozen-column': getColumnProp('frozen'), + 'data-p-reorderable-column': props.reorderableColumns + }, + getColumnPTOptions('root'), + getColumnPTOptions('headerCell') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/HeaderCheckbox.js b/components/lib/datatable/HeaderCheckbox.js index ce7f92ebb1..be14018b39 100644 --- a/components/lib/datatable/HeaderCheckbox.js +++ b/components/lib/datatable/HeaderCheckbox.js @@ -1,9 +1,11 @@ import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, mergeProps } from '../utils/Utils'; import { CheckIcon } from '../icons/check'; import { ColumnBase } from '../column/ColumnBase'; export const HeaderCheckbox = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [focusedState, setFocusedState] = React.useState(false); const getColumnProps = () => ColumnBase.getCProps(props.column); const { ptm, ptmo, cx } = props.ptCallbacks; @@ -24,7 +26,7 @@ export const HeaderCheckbox = React.memo((props) => { } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)], { useTailwind: context.useTailwind }); }; const onFocus = () => { @@ -55,33 +57,42 @@ export const HeaderCheckbox = React.memo((props) => { }; const headerCheckboxIconProps = mergeProps( - { - className: cx('headerCheckboxIcon') - }, - getColumnPTOptions('headerCheckboxIcon') + [ + { + className: cx('headerCheckboxIcon') + }, + getColumnPTOptions('headerCheckboxIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.checked ? props.checkIcon || : null; const checkIcon = IconUtils.getJSXIcon(icon, { ...headerCheckboxIconProps }, { props }); const tabIndex = props.disabled ? null : 0; const headerCheckboxWrapperProps = mergeProps( - { - className: cx('headerCheckboxWrapper'), - onClick: (e) => onClick(e) - }, - getColumnPTOptions('headerCheckboxWrapper') + [ + { + className: cx('headerCheckboxWrapper'), + onClick: (e) => onClick(e) + }, + getColumnPTOptions('headerCheckboxWrapper') + ], + { useTailwind: context.useTailwind } ); const headerCheckboxProps = mergeProps( - { - className: cx('headerCheckbox', { headerProps: props, focusedState }), - role: 'checkbox', - 'aria-checked': props.checked, - tabIndex: tabIndex, - onFocus: (e) => onFocus(e), - onBlur: (e) => onBlur(e), - onKeyDown: (e) => onKeyDown(e) - }, - getColumnPTOptions('headerCheckbox') + [ + { + className: cx('headerCheckbox', { headerProps: props, focusedState }), + role: 'checkbox', + 'aria-checked': props.checked, + tabIndex: tabIndex, + onFocus: (e) => onFocus(e), + onBlur: (e) => onBlur(e), + onKeyDown: (e) => onKeyDown(e) + }, + getColumnPTOptions('headerCheckbox') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js index 323d4b3802..12e62d3e6d 100644 --- a/components/lib/datatable/RowCheckbox.js +++ b/components/lib/datatable/RowCheckbox.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; import { CheckIcon } from '../icons/check'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, mergeProps } from '../utils/Utils'; export const RowCheckbox = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [focusedState, setFocusedState] = React.useState(false); const getColumnProps = () => ColumnBase.getCProps(props.column); const { ptm, ptmo, cx } = props.ptCallbacks; @@ -23,7 +25,7 @@ export const RowCheckbox = React.memo((props) => { } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData)], { useTailwind: context.useTailwind }); }; const onFocus = () => { @@ -52,34 +54,43 @@ export const RowCheckbox = React.memo((props) => { }; const checkboxIconProps = mergeProps( - { - className: cx('checkboxIcon') - }, - getColumnPTOptions('checkboxIcon') + [ + { + className: cx('checkboxIcon') + }, + getColumnPTOptions('checkboxIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.checked ? props.checkIcon || : null; const checkIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, { props }); const tabIndex = props.disabled ? null : '0'; const checkboxWrapperProps = mergeProps( - { - className: cx('checkboxWrapper', { rowProps: props, focusedState }), - onClick: (e) => onClick(e) - }, - getColumnPTOptions('checkboxWrapper') + [ + { + className: cx('checkboxWrapper', { rowProps: props, focusedState }), + onClick: (e) => onClick(e) + }, + getColumnPTOptions('checkboxWrapper') + ], + { useTailwind: context.useTailwind } ); const checkboxProps = mergeProps( - { - className: cx('checkbox', { rowProps: props, focusedState }), - role: 'checkbox', - 'aria-checked': props.checked, - tabIndex: tabIndex, - onKeyDown: (e) => onKeyDown(e), - onFocus: (e) => onFocus(e), - onBlur: (e) => onBlur(e), - 'aria-label': props.ariaLabel - }, - getColumnPTOptions('checkbox') + [ + { + className: cx('checkbox', { rowProps: props, focusedState }), + role: 'checkbox', + 'aria-checked': props.checked, + tabIndex: tabIndex, + onKeyDown: (e) => onKeyDown(e), + onFocus: (e) => onFocus(e), + onBlur: (e) => onBlur(e), + 'aria-label': props.ariaLabel + }, + getColumnPTOptions('checkbox') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js index 539e1e12e4..a9acb6c66e 100644 --- a/components/lib/datatable/RowRadioButton.js +++ b/components/lib/datatable/RowRadioButton.js @@ -1,8 +1,10 @@ import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { DomHandler, mergeProps } from '../utils/Utils'; export const RowRadioButton = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [focusedState, setFocusedState] = React.useState(false); const inputRef = React.useRef(null); const getColumnProps = () => ColumnBase.getCProps(props.column); @@ -23,7 +25,7 @@ export const RowRadioButton = React.memo((props) => { } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData)], { useTailwind: context.useTailwind }); }; const onFocus = () => { @@ -56,47 +58,62 @@ export const RowRadioButton = React.memo((props) => { const name = `${props.tableSelector}_dt_radio`; const radiobuttonWrapperProps = mergeProps( - { - className: cx('radiobuttonWrapper', { rowProps: props, focusedState }) - }, - getColumnPTOptions('radiobuttonWrapper') + [ + { + className: cx('radiobuttonWrapper', { rowProps: props, focusedState }) + }, + getColumnPTOptions('radiobuttonWrapper') + ], + { useTailwind: context.useTailwind } ); const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - getColumnPTOptions('hiddenInputWrapper') + [ + { + className: 'p-hidden-accessible' + }, + getColumnPTOptions('hiddenInputWrapper') + ], + { useTailwind: context.useTailwind } ); const hiddenInputProps = mergeProps( - { - name, - type: 'radio', - checked: props.checked, - onFocus: (e) => onFocus(e), - onBlur: (e) => onBlur(e), - onChange: (e) => onChange(e), - onKeyDown: (e) => onKeyDown(e), - 'aria-label': props.ariaLabel - }, - getColumnPTOptions('hiddenInput') + [ + { + name, + type: 'radio', + checked: props.checked, + onFocus: (e) => onFocus(e), + onBlur: (e) => onBlur(e), + onChange: (e) => onChange(e), + onKeyDown: (e) => onKeyDown(e), + 'aria-label': props.ariaLabel + }, + getColumnPTOptions('hiddenInput') + ], + { useTailwind: context.useTailwind } ); const radiobuttonProps = mergeProps( - { - className: cx('radiobutton', { rowProps: props, focusedState }), - onClick: (e) => onClick(e), - role: 'radio', - 'aria-checked': props.checked - }, - getColumnPTOptions('radiobutton') + [ + { + className: cx('radiobutton', { rowProps: props, focusedState }), + onClick: (e) => onClick(e), + role: 'radio', + 'aria-checked': props.checked + }, + getColumnPTOptions('radiobutton') + ], + { useTailwind: context.useTailwind } ); const radiobuttonIconProps = mergeProps( - { - className: cx('radiobuttonIcon') - }, - getColumnPTOptions('radiobuttonIcon') + [ + { + className: cx('radiobuttonIcon') + }, + getColumnPTOptions('radiobuttonIcon') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/RowTogglerButton.js b/components/lib/datatable/RowTogglerButton.js index c6fb851a0a..a366b7f6cc 100644 --- a/components/lib/datatable/RowTogglerButton.js +++ b/components/lib/datatable/RowTogglerButton.js @@ -1,12 +1,14 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, mergeProps } from '../utils/Utils'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; import { ColumnBase } from '../column/ColumnBase'; export const RowTogglerButton = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const { ptm, ptmo, cx } = props.ptCallbacks; const onClick = (event) => { @@ -26,28 +28,34 @@ export const RowTogglerButton = React.memo((props) => { hostName: props.hostName }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)], { useTailwind: context.useTailwind }); }; const rowGroupTogglerIconProps = mergeProps( - { - className: cx('rowGroupTogglerIcon'), - 'aria-hidden': true - }, - getColumnPTOptions('rowGroupTogglerIcon') + [ + { + className: cx('rowGroupTogglerIcon'), + 'aria-hidden': true + }, + getColumnPTOptions('rowGroupTogglerIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.expanded ? props.expandedRowIcon || : props.collapsedRowIcon || ; const togglerIcon = IconUtils.getJSXIcon(icon, { ...rowGroupTogglerIconProps }, { props }); const label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'); const rowGroupTogglerProps = mergeProps( - { - type: 'button', - onClick: (e) => onClick(e), - className: cx('rowGroupToggler'), - tabIndex: props.tabIndex, - 'aria-label': label - }, - getColumnPTOptions('rowGroupToggler') + [ + { + type: 'button', + onClick: (e) => onClick(e), + className: cx('rowGroupToggler'), + tabIndex: props.tabIndex, + 'aria-label': label + }, + getColumnPTOptions('rowGroupToggler') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 427c7c8f7e..5f1d79a1c6 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -2,12 +2,15 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { PrimeReactContext } from '../api/Api'; + import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils'; import { BodyRow } from './BodyRow'; import { RowTogglerButton } from './RowTogglerButton'; export const TableBody = React.memo( React.forwardRef((props, ref) => { + const context = React.useContext(PrimeReactContext); const { ptm, ptmo, cx, isUnsyled } = props.ptCallbacks; const [rowGroupHeaderStyleObjectState, setRowGroupHeaderStyleObjectState] = React.useState({}); const getColumnProps = (column) => ColumnBase.getCProps(column); @@ -23,7 +26,7 @@ export const TableBody = React.memo( } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)], { useTailwind: context.useTailwind }); }; const elementRef = React.useRef(null); @@ -867,20 +870,26 @@ export const TableBody = React.memo( const colSpan = getColumnsLength(); const content = ObjectUtils.getJSXElement(props.emptyMessage, { props: props.tableProps, frozen: props.frozenRow }) || localeOption('emptyMessage'); const emptyMessageProps = mergeProps( - { - className: cx('emptyMessage'), - role: 'row' - }, - getColumnPTOptions('emptyMessage') + [ + { + className: cx('emptyMessage'), + role: 'row' + }, + getColumnPTOptions('emptyMessage') + ], + { useTailwind: context.useTailwind } ); const bodyCellProps = mergeProps( - { - colSpan, - role: 'cell' - }, - getColumnPTOptions('root'), - getColumnPTOptions('bodyCell') + [ + { + colSpan, + role: 'cell' + }, + getColumnPTOptions('root'), + getColumnPTOptions('bodyCell') + ], + { useTailwind: context.useTailwind } ); return ( @@ -914,18 +923,24 @@ export const TableBody = React.memo( // check if the user wants complete control of the rendering if (!options.customRendering) { const bodyCellProps = mergeProps( - { - colSpan - }, - getColumnPTOptions('root'), - getColumnPTOptions('bodyCell') + [ + { + colSpan + }, + getColumnPTOptions('root'), + getColumnPTOptions('bodyCell') + ], + { useTailwind: context.useTailwind } ); const rowGroupHeaderNameProps = mergeProps( - { - className: cx('rowGroupHeaderName') - }, - getColumnPTOptions('rowGroupHeaderName') + [ + { + className: cx('rowGroupHeaderName') + }, + getColumnPTOptions('rowGroupHeaderName') + ], + { useTailwind: context.useTailwind } ); content = ( @@ -937,12 +952,15 @@ export const TableBody = React.memo( } const rowGroupHeaderProps = mergeProps( - { - className: cx('rowGroupHeader'), - style, - role: 'row' - }, - getColumnPTOptions('rowGroupHeader') + [ + { + className: cx('rowGroupHeader'), + style, + role: 'row' + }, + getColumnPTOptions('rowGroupHeader') + ], + { useTailwind: context.useTailwind } ); return {content}; @@ -1045,24 +1063,30 @@ export const TableBody = React.memo( // check if the user wants complete control of the rendering if (!options.customRendering) { const bodyCellProps = mergeProps( - { - colSpan, - role: 'cell' - }, - getColumnPTOptions('root'), - getColumnPTOptions('bodyCell') + [ + { + colSpan, + role: 'cell' + }, + getColumnPTOptions('root'), + getColumnPTOptions('bodyCell') + ], + { useTailwind: context.useTailwind } ); content = {content}; } const rowExpansionProps = mergeProps( - { - id, - className: cx('rowExpansion'), - role: 'row' - }, - getColumnPTOptions('rowExpansion') + [ + { + id, + className: cx('rowExpansion'), + role: 'row' + }, + getColumnPTOptions('rowExpansion') + ], + { useTailwind: context.useTailwind } ); return {content}; @@ -1075,11 +1099,14 @@ export const TableBody = React.memo( if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) { const content = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, { index: rowIndex, colSpan, props: props.tableProps }); const rowGroupFooterProps = mergeProps( - { - className: cx('rowGroupFooter'), - role: 'row' - }, - getColumnPTOptions('rowGroupFooter') + [ + { + className: cx('rowGroupFooter'), + role: 'row' + }, + getColumnPTOptions('rowGroupFooter') + ], + { useTailwind: context.useTailwind } ); return {content}; @@ -1117,11 +1144,14 @@ export const TableBody = React.memo( const content = props.empty ? createEmptyContent() : createContent(); const ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody'; const tbodyProps = mergeProps( - { - style: props.style, - className: cx(ptKey, { className: props.className }) - }, - ptm(ptKey, { hostName: props.hostName }) + [ + { + style: props.style, + className: cx(ptKey, { className: props.className }) + }, + ptm(ptKey, { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/datatable/TableFooter.js b/components/lib/datatable/TableFooter.js index a40a077027..625fa40138 100644 --- a/components/lib/datatable/TableFooter.js +++ b/components/lib/datatable/TableFooter.js @@ -3,9 +3,11 @@ import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { RowBase } from '../row/RowBase'; import { FooterCell } from './FooterCell'; +import { PrimeReactContext } from '../api/Api'; import { mergeProps } from '../utils/Utils'; export const TableFooter = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const { ptm, ptmo, cx } = props.ptCallbacks; const getRowProps = (row) => ColumnGroupBase.getCProps(row); @@ -21,7 +23,7 @@ export const TableFooter = React.memo((props) => { hostName: props.hostName }; - return mergeProps(ptm(`row.${key}`, { row: rowMetaData }), ptm(`row.${key}`, rowMetaData), ptmo(rProps, key, rowMetaData)); + return mergeProps([ptm(`row.${key}`, { row: rowMetaData }), ptm(`row.${key}`, rowMetaData), ptmo(rProps, key, rowMetaData)], { useTailwind: context.useTailwind }); }; const getColumnGroupPTOptions = (key) => { @@ -32,7 +34,7 @@ export const TableFooter = React.memo((props) => { hostName: props.hostName }; - return mergeProps(ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ptm(`columnGroup.${key}`, columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData)); + return mergeProps([ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ptm(`columnGroup.${key}`, columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData)], { useTailwind: context.useTailwind }); }; const hasFooter = () => { @@ -64,10 +66,13 @@ export const TableFooter = React.memo((props) => { return rows.map((row, i) => { const rootProps = mergeProps( - { - role: 'row' - }, - getRowPTOptions(row, 'root') + [ + { + role: 'row' + }, + getRowPTOptions(row, 'root') + ], + { useTailwind: context.useTailwind } ); return ( @@ -79,10 +84,13 @@ export const TableFooter = React.memo((props) => { } const footerRowProps = mergeProps( - { - role: 'row' - }, - ptm('footerRow', { hostName: props.hostName }) + [ + { + role: 'row' + }, + ptm('footerRow', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return {createFooterCells(props.columns)}; @@ -91,11 +99,14 @@ export const TableFooter = React.memo((props) => { if (hasFooter()) { const content = createContent(); const tfootProps = mergeProps( - { - className: cx('tfoot') - }, - getColumnGroupPTOptions('root'), - ptm('tfoot', { hostName: props.hostName }) + [ + { + className: cx('tfoot') + }, + getColumnGroupPTOptions('root'), + ptm('tfoot', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return {content}; diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index dfa6d5cc3f..d393678b29 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -3,12 +3,14 @@ import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { useMountEffect } from '../hooks/Hooks'; import { RowBase } from '../row/RowBase'; +import { PrimeReactContext } from '../api/Api'; import { classNames, mergeProps } from '../utils/Utils'; import { ColumnFilter } from './ColumnFilter'; import { HeaderCell } from './HeaderCell'; import { HeaderCheckbox } from './HeaderCheckbox'; export const TableHeader = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const [sortableDisabledFieldsState, setSortableDisabledFieldsState] = React.useState([]); const [allSortableDisabledState, setAllSortableDisabledState] = React.useState(false); const isSingleSort = props.sortMode === 'single'; @@ -40,7 +42,7 @@ export const TableHeader = React.memo((props) => { } }; - return mergeProps(ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ptm(`columnGroup.${key}`, columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData)); + return mergeProps([ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ptm(`columnGroup.${key}`, columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData)], { useTailwind: context.useTailwind }); }; const getColumnPTOptions = (column, key) => { @@ -55,7 +57,7 @@ export const TableHeader = React.memo((props) => { } }; - return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)); + return mergeProps([ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData)], { useTailwind: context.useTailwind }); }; const getRowPTOptions = (row, key) => { @@ -66,7 +68,7 @@ export const TableHeader = React.memo((props) => { hostName: props.hostName }; - return mergeProps(ptm(`row.${key}`, { row: rowMetaData }), ptm(`row.${key}`, rowMetaData), ptmo(rProps, key, rowMetaData)); + return mergeProps([ptm(`row.${key}`, { row: rowMetaData }), ptm(`row.${key}`, rowMetaData), ptmo(rProps, key, rowMetaData)], { useTailwind: context.useTailwind }); }; const isColumnSorted = (column) => { @@ -211,13 +213,16 @@ export const TableHeader = React.memo((props) => { const checkbox = createCheckbox(selectionMode); const filterRow = createFilter(col, filter); const headerCellProps = mergeProps( - { - style: colStyle, - className: classNames(filterHeaderClassName, className, cx('headerCell', { frozen, column: col })), - key: colKey - }, - getColumnPTOptions(col, 'root'), - getColumnPTOptions(col, 'headerCell') + [ + { + style: colStyle, + className: classNames(filterHeaderClassName, className, cx('headerCell', { frozen, column: col })), + key: colKey + }, + getColumnPTOptions(col, 'root'), + getColumnPTOptions(col, 'headerCell') + ], + { useTailwind: context.useTailwind } ); return ( @@ -238,10 +243,13 @@ export const TableHeader = React.memo((props) => { return rows.map((row, i) => { const headerRowProps = mergeProps( - { - role: 'row' - }, - getRowPTOptions(row, 'root') + [ + { + role: 'row' + }, + getRowPTOptions(row, 'root') + ], + { useTailwind: context.useTailwind } ); return ( @@ -252,10 +260,13 @@ export const TableHeader = React.memo((props) => { }); } else { const headerRowProps = mergeProps( - { - role: 'row' - }, - ptm('headerRow', { hostName: props.hostName }) + [ + { + role: 'row' + }, + ptm('headerRow', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const headerRow = {createHeaderCells(props.columns)}; const filterRow = props.filterDisplay === 'row' && {createFilterCells()}; @@ -271,11 +282,14 @@ export const TableHeader = React.memo((props) => { const content = createContent(); const theadProps = mergeProps( - { - className: cx('thead') - }, - getColumnGroupPTOptions('root'), - ptm('thead', { hostName: props.hostName }) + [ + { + className: cx('thead') + }, + getColumnGroupPTOptions('root'), + ptm('thead', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return {content}; diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js index d378d70a27..b7a9510994 100644 --- a/components/lib/dataview/DataView.js +++ b/components/lib/dataview/DataView.js @@ -24,36 +24,45 @@ export const DataViewLayoutOptions = React.memo((inProps) => { event.preventDefault(); }; - const listIconProps = mergeProps(ptm('list')); - const gridIconProps = mergeProps(ptm('grid')); + const listIconProps = mergeProps([ptm('list')], { useTailwind: context.useTailwind }); + const gridIconProps = mergeProps([ptm('grid')], { useTailwind: context.useTailwind }); const listIcon = IconUtils.getJSXIcon(props.listIcon || , { ...listIconProps }, { props }); const gridIcon = IconUtils.getJSXIcon(props.gridIcon || , { ...gridIconProps }, { props }); const rootProps = mergeProps( - { - id: props.id, - style: props.style, - className: classNames(props.className, cx('root')) - }, - DataViewLayoutOptionsBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + style: props.style, + className: classNames(props.className, cx('root')) + }, + DataViewLayoutOptionsBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const listButtonProps = mergeProps( - { - type: 'button', - className: cx('listButton'), - onClick: (event) => changeLayout(event, 'list') - }, - ptm('listButton') + [ + { + type: 'button', + className: cx('listButton'), + onClick: (event) => changeLayout(event, 'list') + }, + ptm('listButton') + ], + { useTailwind: context.useTailwind } ); const gridButtonProps = mergeProps( - { - type: 'button', - className: cx('gridButton'), - onClick: (event) => changeLayout(event, 'grid') - }, - ptm('gridButton') + [ + { + type: 'button', + className: cx('gridButton'), + onClick: (event) => changeLayout(event, 'grid') + }, + ptm('gridButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -165,18 +174,24 @@ export const DataView = React.memo( const createLoader = () => { if (props.loading) { const loadingIconProps = mergeProps( - { - className: cx('loadingIcon') - }, - ptm('loadingIcon') + [ + { + className: cx('loadingIcon') + }, + ptm('loadingIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.loadingIcon || ; const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props }); const loadingOverlayProps = mergeProps( - { - className: cx('loadingOverlay') - }, - ptm('loadingOverlay') + [ + { + className: cx('loadingOverlay') + }, + ptm('loadingOverlay') + ], + { useTailwind: context.useTailwind } ); return
    {loadingIcon}
    ; @@ -205,10 +220,13 @@ export const DataView = React.memo( if (!props.loading) { const content = props.emptyMessage || localeOption('emptyMessage'); const emptyMessageProps = mergeProps( - { - className: cx('emptyMessage') - }, - ptm('emptyMessage') + [ + { + className: cx('emptyMessage') + }, + ptm('emptyMessage') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -220,10 +238,13 @@ export const DataView = React.memo( const createHeader = () => { if (props.header) { const headerProps = mergeProps( - { - className: cx('header') - }, - ptm('header') + [ + { + className: cx('header') + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); return
    {props.header}
    ; @@ -235,10 +256,13 @@ export const DataView = React.memo( const createFooter = () => { if (props.footer) { const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); return
    {props.footer}
    ; @@ -276,17 +300,23 @@ export const DataView = React.memo( const items = createItems(value); const gridProps = mergeProps( - { - className: cx('grid') - }, - ptm('grid') + [ + { + className: cx('grid') + }, + ptm('grid') + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return ( @@ -319,14 +349,17 @@ export const DataView = React.memo( const footer = createFooter(); const content = createContent(data); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root')) - }, - DataViewBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root')) + }, + DataViewBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js index bcb6d8d1b9..9c642db962 100644 --- a/components/lib/deferredcontent/DeferredContent.js +++ b/components/lib/deferredcontent/DeferredContent.js @@ -57,11 +57,14 @@ export const DeferredContent = React.forwardRef((inProps, ref) => { }); const rootProps = mergeProps( - { - ref: elementRef - }, - DeferredContentBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef + }, + DeferredContentBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return
    {loadedState && props.children}
    ; diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index fbba92abcb..48024a149e 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -465,25 +465,31 @@ export const Dialog = React.forwardRef((inProps, ref) => { const ariaLabel = props.ariaCloseIconLabel || localeOption('close'); const closeButtonIconProps = mergeProps( - { - className: cx('closeButtonIcon'), - 'aria-hidden': true - }, - ptm('closeButtonIcon') + [ + { + className: cx('closeButtonIcon'), + 'aria-hidden': true + }, + ptm('closeButtonIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.closeIcon || ; const headerCloseIcon = IconUtils.getJSXIcon(icon, { ...closeButtonIconProps }, { props }); const closeButtonProps = mergeProps( - { - ref: closeRef, - type: 'button', - className: cx('closeButton'), - 'aria-label': ariaLabel, - onClick: onClose - }, - ptm('closeButton') + [ + { + ref: closeRef, + type: 'button', + className: cx('closeButton'), + 'aria-label': ariaLabel, + onClick: onClose + }, + ptm('closeButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -500,10 +506,13 @@ export const Dialog = React.forwardRef((inProps, ref) => { const createMaximizeIcon = () => { let icon; const maximizableIconProps = mergeProps( - { - className: cx('maximizableIcon') - }, - ptm('maximizableIcon') + [ + { + className: cx('maximizableIcon') + }, + ptm('maximizableIcon') + ], + { useTailwind: context.useTailwind } ); if (!maximized) { @@ -516,12 +525,15 @@ export const Dialog = React.forwardRef((inProps, ref) => { if (props.maximizable) { const maximizableButtonProps = mergeProps( - { - type: 'button', - className: cx('maximizableButton'), - onClick: toggleMaximize - }, - ptm('maximizableButton') + [ + { + type: 'button', + className: cx('maximizableButton'), + onClick: toggleMaximize + }, + ptm('maximizableButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -544,28 +556,37 @@ export const Dialog = React.forwardRef((inProps, ref) => { const headerId = idState + '_header'; const headerProps = mergeProps( - { - ref: headerRef, - style: props.headerStyle, - className: cx('header'), - onMouseDown: onDragStart - }, - ptm('header') + [ + { + ref: headerRef, + style: props.headerStyle, + className: cx('header'), + onMouseDown: onDragStart + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); const headerTitleProps = mergeProps( - { - id: headerId, - className: cx('headerTitle') - }, - ptm('headerTitle') + [ + { + id: headerId, + className: cx('headerTitle') + }, + ptm('headerTitle') + ], + { useTailwind: context.useTailwind } ); const headerIconsProps = mergeProps( - { - className: cx('headerIcons') - }, - ptm('headerIcons') + [ + { + className: cx('headerIcons') + }, + ptm('headerIcons') + ], + { useTailwind: context.useTailwind } ); return ( @@ -587,13 +608,16 @@ export const Dialog = React.forwardRef((inProps, ref) => { const contentId = idState + '_content'; const contentProps = mergeProps( - { - id: contentId, - ref: contentRef, - style: props.contentStyle, - className: cx('content') - }, - ptm('content') + [ + { + id: contentId, + ref: contentRef, + style: props.contentStyle, + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return
    {props.children}
    ; @@ -603,11 +627,14 @@ export const Dialog = React.forwardRef((inProps, ref) => { const footer = ObjectUtils.getJSXElement(props.footer, props); const footerProps = mergeProps( - { - ref: footerRef, - className: cx('footer') - }, - ptm('footer') + [ + { + ref: footerRef, + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); return footer &&
    {footer}
    ; @@ -635,45 +662,54 @@ export const Dialog = React.forwardRef((inProps, ref) => { }; const maskProps = mergeProps( - { - ref: maskRef, - style: sx('mask'), - className: cx('mask', { maskVisibleState }), - onPointerUp: onMaskPointerUp - }, - ptm('mask') + [ + { + ref: maskRef, + style: sx('mask'), + className: cx('mask', { maskVisibleState }), + onPointerUp: onMaskPointerUp + }, + ptm('mask') + ], + { useTailwind: context.useTailwind } ); const rootProps = mergeProps( - { - ref: dialogRef, - id: idState, - className: cx('root', { props, maximized, context }), - style: props.style, - onClick: props.onClick, - role: 'dialog', - 'aria-labelledby': headerId, - 'aria-describedby': contentId, - 'aria-modal': props.modal, - onPointerDown: onDialogPointerDown - }, - DialogBase.getOtherProps(props), - ptm('root') + [ + { + ref: dialogRef, + id: idState, + className: cx('root', { props, maximized, context }), + style: props.style, + onClick: props.onClick, + role: 'dialog', + 'aria-labelledby': headerId, + 'aria-describedby': contentId, + 'aria-modal': props.modal, + onPointerDown: onDialogPointerDown + }, + DialogBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - timeout: transitionTimeout, - in: visibleState, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: onEnter, - onEntered: onEntered, - onExiting: onExiting, - onExited: onExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + timeout: transitionTimeout, + in: visibleState, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: onEnter, + onEntered: onEntered, + onExiting: onExiting, + onExited: onExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js index 9e4641289e..06330d1e37 100644 --- a/components/lib/divider/Divider.js +++ b/components/lib/divider/Divider.js @@ -24,21 +24,27 @@ export const Divider = React.forwardRef((inProps, ref) => { })); const rootProps = mergeProps( - { - ref: elementRef, - style: sx('root'), - className: cx('root', { horizontal, vertical }), - role: 'separator' - }, - DividerBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + style: sx('root'), + className: cx('root', { horizontal, vertical }), + role: 'separator' + }, + DividerBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js index 3206c389b5..213b5f58c3 100644 --- a/components/lib/dock/Dock.js +++ b/components/lib/dock/Dock.js @@ -58,22 +58,28 @@ export const Dock = React.memo( const contentClassName = classNames('p-dock-action', { 'p-disabled': disabled }); const iconClassName = classNames('p-dock-action-icon', _icon); const iconProps = mergeProps( - { - className: cx('icon') - }, - getPTOptions('icon', item, index) + [ + { + className: cx('icon') + }, + getPTOptions('icon', item, index) + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(_icon, { ...iconProps }, { props }); const actionProps = mergeProps( - { - href: url || '#', - role: 'menuitem', - className: cx('action', { disabled }), - target, - 'data-pr-tooltip': label, - onClick: (e) => onItemClick(e, item) - }, - getPTOptions('action', item, index) + [ + { + href: url || '#', + role: 'menuitem', + className: cx('action', { disabled }), + target, + 'data-pr-tooltip': label, + onClick: (e) => onItemClick(e, item) + }, + getPTOptions('action', item, index) + ], + { useTailwind: context.useTailwind } ); let content = ( @@ -97,14 +103,17 @@ export const Dock = React.memo( } const menuitemProps = mergeProps( - { - id: key, - key, - className: cx('menuitem', { currentIndexState, index }), - role: 'none', - onMouseEnter: () => onItemMouseEnter(index) - }, - getPTOptions('menuitem', item, index) + [ + { + id: key, + key, + className: cx('menuitem', { currentIndexState, index }), + role: 'none', + onMouseEnter: () => onItemMouseEnter(index) + }, + getPTOptions('menuitem', item, index) + ], + { useTailwind: context.useTailwind } ); return
  • {content}
    • ; @@ -118,10 +127,13 @@ export const Dock = React.memo( if (props.header) { const header = ObjectUtils.getJSXElement(props.header, { props }); const headerProps = mergeProps( - { - className: cx('header') - }, - ptm('header') + [ + { + className: cx('header') + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); return
    {header}
    ; @@ -133,12 +145,15 @@ export const Dock = React.memo( const createList = () => { const items = createItems(); const menuProps = mergeProps( - { - className: cx('menu'), - role: 'menu', - onMouseLeave: onListMouseLeave - }, - ptm('menu') + [ + { + className: cx('menu'), + role: 'menu', + onMouseLeave: onListMouseLeave + }, + ptm('menu') + ], + { useTailwind: context.useTailwind } ); return
      {items}
    ; @@ -148,10 +163,13 @@ export const Dock = React.memo( if (props.footer) { const footer = ObjectUtils.getJSXElement(props.footer, { props }); const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); return
    {footer}
    ; @@ -175,19 +193,25 @@ export const Dock = React.memo( const list = createList(); const footer = createFooter(); const rootProps = mergeProps( - { - className: classNames(props.className, cx('root')), - style: props.style - }, - DockBase.getOtherProps(props), - ptm('root') + [ + { + className: classNames(props.className, cx('root')), + style: props.style + }, + DockBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const containerProps = mergeProps( - { - className: cx('container') - }, - ptm('container') + [ + { + className: cx('container') + }, + ptm('container') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index 44570f8da3..fdc3fa79a5 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -685,29 +685,38 @@ export const Dropdown = React.memo( } const hiddenSelectedMessageProps = mergeProps( - { - className: 'p-hidden-accessible p-dropdown-hidden-select' - }, - ptm('hiddenSelectedMessage') + [ + { + className: 'p-hidden-accessible p-dropdown-hidden-select' + }, + ptm('hiddenSelectedMessage') + ], + { useTailwind: context.useTailwind } ); const selectProps = mergeProps( - { - ref: inputRef, - required: props.required, - defaultValue: option.value, - name: props.name, - tabIndex: -1, - 'aria-hidden': 'true' - }, - ptm('select') + [ + { + ref: inputRef, + required: props.required, + defaultValue: option.value, + name: props.name, + tabIndex: -1, + 'aria-hidden': 'true' + }, + ptm('select') + ], + { useTailwind: context.useTailwind } ); const optionProps = mergeProps( - { - value: option.value - }, - ptm('option') + [ + { + value: option.value + }, + ptm('option') + ], + { useTailwind: context.useTailwind } ); return ( @@ -721,27 +730,33 @@ export const Dropdown = React.memo( const createKeyboardHelper = () => { const hiddenSelectedMessageProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenSelectedMessage') + [ + { + className: 'p-hidden-accessible' + }, + ptm('hiddenSelectedMessage') + ], + { useTailwind: context.useTailwind } ); const inputProps = mergeProps( - { - ref: focusInputRef, - id: props.inputId, - type: 'text', - readOnly: true, - 'aria-haspopup': 'listbox', - onFocus: onInputFocus, - onBlur: onInputBlur, - onKeyDown: onInputKeyDown, - disabled: props.disabled, - tabIndex: props.tabIndex, - ...ariaProps - }, - ptm('input') + [ + { + ref: focusInputRef, + id: props.inputId, + type: 'text', + readOnly: true, + 'aria-haspopup': 'listbox', + onFocus: onInputFocus, + onBlur: onInputBlur, + onKeyDown: onInputKeyDown, + disabled: props.disabled, + tabIndex: props.tabIndex, + ...ariaProps + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ( @@ -757,32 +772,38 @@ export const Dropdown = React.memo( if (props.editable) { const value = label || props.value || ''; const inputProps = mergeProps( - { - ref: inputRef, - type: 'text', - defaultValue: value, - className: cx('input', { label }), - disabled: props.disabled, - placeholder: props.placeholder, - maxLength: props.maxLength, - onInput: onEditableInputChange, - onFocus: onEditableInputFocus, - onBlur: onInputBlur, - 'aria-haspopup': 'listbox', - ...ariaProps - }, - ptm('input') + [ + { + ref: inputRef, + type: 'text', + defaultValue: value, + className: cx('input', { label }), + disabled: props.disabled, + placeholder: props.placeholder, + maxLength: props.maxLength, + onInput: onEditableInputChange, + onFocus: onEditableInputFocus, + onBlur: onInputBlur, + 'aria-haspopup': 'listbox', + ...ariaProps + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ; } else { const content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty'; const inputProps = mergeProps( - { - ref: inputRef, - className: cx('input', { label }) - }, - ptm('input') + [ + { + ref: inputRef, + className: cx('input', { label }) + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return {content}; @@ -792,11 +813,14 @@ export const Dropdown = React.memo( const createClearIcon = () => { if (props.value != null && props.showClear && !props.disabled) { const clearIconProps = mergeProps( - { - className: cx('clearIcon'), - onPointerUp: clear - }, - ptm('clearIcon') + [ + { + className: cx('clearIcon'), + onPointerUp: clear + }, + ptm('clearIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.clearIcon || ; @@ -808,24 +832,30 @@ export const Dropdown = React.memo( const createDropdownIcon = () => { const dropdownIconProps = mergeProps( - { - className: cx('dropdownIcon') - }, - ptm('dropdownIcon') + [ + { + className: cx('dropdownIcon') + }, + ptm('dropdownIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.dropdownIcon || ; const dropdownIcon = IconUtils.getJSXIcon(icon, { ...dropdownIconProps }, { props }); const ariaLabel = props.placeholder || props.ariaLabel; const triggerProps = mergeProps( - { - className: cx('trigger'), - role: 'button', - 'aria-haspopup': 'listbox', - 'aria-expanded': overlayVisibleState, - 'aria-label': ariaLabel - }, - ptm('trigger') + [ + { + className: cx('trigger'), + role: 'button', + 'aria-haspopup': 'listbox', + 'aria-expanded': overlayVisibleState, + 'aria-label': ariaLabel + }, + ptm('trigger') + ], + { useTailwind: context.useTailwind } ); return
    {dropdownIcon}
    ; @@ -843,19 +873,22 @@ export const Dropdown = React.memo( const dropdownIcon = createDropdownIcon(); const clearIcon = createClearIcon(); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })), - style: props.style, - onClick: (e) => onClick(e), - onMouseDown: props.onMouseDown, - onContextMenu: props.onContextMenu, - 'data-p-disabled': props.disabled, - 'data-p-focus': focusedState - }, - otherProps, - ptm('root') + [ + { + id: props.id, + ref: elementRef, + className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })), + style: props.style, + onClick: (e) => onClick(e), + onMouseDown: props.onMouseDown, + onContextMenu: props.onContextMenu, + 'data-p-disabled': props.disabled, + 'data-p-focus': focusedState + }, + otherProps, + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index 3379bb42ff..d567ae7cf0 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; export const DropdownItem = React.memo((props) => { const { ptm, cx, selected, disabled, option, label } = props; + const context = React.useContext(PrimeReactContext); const getPTOptions = (key) => { return ptm(key, { @@ -25,18 +27,21 @@ export const DropdownItem = React.memo((props) => { const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label; const itemProps = mergeProps( - { - role: 'option', - key: props.label, - className: classNames(option.className, cx('item', { selected, disabled, label })), - style: props.style, - onClick: (e) => onClick(e), - 'aria-label': label, - 'aria-selected': selected, - 'data-p-highlight': selected, - 'data-p-disabled': disabled - }, - getPTOptions('item', { selected, disabled, option, label }) + [ + { + role: 'option', + key: props.label, + className: classNames(option.className, cx('item', { selected, disabled, label })), + style: props.style, + onClick: (e) => onClick(e), + 'aria-label': label, + 'aria-selected': selected, + 'data-p-highlight': selected, + 'data-p-disabled': disabled + }, + getPTOptions('item', { selected, disabled, option, label }) + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 0009205c5f..b05465e3bc 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -56,10 +56,13 @@ export const DropdownPanel = React.memo( if (props.panelFooterTemplate) { const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide); const footerProps = mergeProps( - { - className: cx('footer') - }, - getPTOptions('footer') + [ + { + className: cx('footer') + }, + getPTOptions('footer') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -83,10 +86,13 @@ export const DropdownPanel = React.memo( const createEmptyMessage = (emptyMessage, isFilter) => { const message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage'); const emptyMessageProps = mergeProps( - { - className: cx('emptyMessage') - }, - getPTOptions('emptyMessage') + [ + { + className: cx('emptyMessage') + }, + getPTOptions('emptyMessage') + ], + { useTailwind: context.useTailwind } ); return
  • {message}
    • ; @@ -103,11 +109,14 @@ export const DropdownPanel = React.memo( const groupChildrenContent = createGroupChildren(option, style); const key = index + '_' + props.getOptionGroupRenderKey(option); const itemGroupProps = mergeProps( - { - className: cx('itemGroup', { optionGroupLabel }), - style - }, - getPTOptions('itemGroup') + [ + { + className: cx('itemGroup', { optionGroupLabel }), + style + }, + getPTOptions('itemGroup') + ], + { useTailwind: context.useTailwind } ); return ( @@ -139,12 +148,15 @@ export const DropdownPanel = React.memo( if (props.showFilterClear && props.filterValue) { const ariaLabel = localeOption('clear'); const clearIconProps = mergeProps( - { - className: cx('clearIcon'), - 'aria-label': ariaLabel, - onClick: () => props.onFilterClearIconClick(() => DomHandler.focus(filterInputRef.current)) - }, - getPTOptions('clearIcon') + [ + { + className: cx('clearIcon'), + 'aria-label': ariaLabel, + onClick: () => props.onFilterClearIconClick(() => DomHandler.focus(filterInputRef.current)) + }, + getPTOptions('clearIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.filterClearIcon || ; const filterClearIcon = IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props }); @@ -159,31 +171,40 @@ export const DropdownPanel = React.memo( if (props.filter) { const clearIcon = createFilterClearIcon(); const filterIconProps = mergeProps( - { - className: cx('filterIcon') - }, - getPTOptions('filterIcon') + [ + { + className: cx('filterIcon') + }, + getPTOptions('filterIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.filterIcon || ; const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props }); const filterContainerProps = mergeProps( - { - className: cx('filterContainer', { clearIcon }) - }, - getPTOptions('filterContainer') + [ + { + className: cx('filterContainer', { clearIcon }) + }, + getPTOptions('filterContainer') + ], + { useTailwind: context.useTailwind } ); const filterInputProps = mergeProps( - { - ref: filterInputRef, - type: 'text', - autoComplete: 'off', - className: cx('filterInput'), - placeholder: props.filterPlaceholder, - onKeyDown: props.onFilterInputKeyDown, - onChange: (e) => onFilterInputChange(e), - value: props.filterValue - }, - getPTOptions('filterInput') + [ + { + ref: filterInputRef, + type: 'text', + autoComplete: 'off', + className: cx('filterInput'), + placeholder: props.filterPlaceholder, + onKeyDown: props.onFilterInputKeyDown, + onChange: (e) => onFilterInputChange(e), + value: props.filterValue + }, + getPTOptions('filterInput') + ], + { useTailwind: context.useTailwind } ); let content = (
    @@ -209,10 +230,13 @@ export const DropdownPanel = React.memo( } const headerProps = mergeProps( - { - className: cx('header') - }, - getPTOptions('header') + [ + { + className: cx('header') + }, + getPTOptions('header') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -236,13 +260,16 @@ export const DropdownPanel = React.memo( const emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage; const content = isEmptyFilter ? createEmptyMessage(emptyMessage) : options.children; const listProps = mergeProps( - { - ref: options.contentRef, - style: options.style, - className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })), - role: 'listbox' - }, - getPTOptions('list') + [ + { + ref: options.contentRef, + style: options.style, + className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })), + role: 'listbox' + }, + getPTOptions('list') + ], + { useTailwind: context.useTailwind } ); return
      {content}
    ; @@ -254,19 +281,25 @@ export const DropdownPanel = React.memo( } else { const items = createItems(); const wrapperProps = mergeProps( - { - className: cx('wrapper'), - style: sx('wrapper') - }, - getPTOptions('wrapper') + [ + { + className: cx('wrapper'), + style: sx('wrapper') + }, + getPTOptions('wrapper') + ], + { useTailwind: context.useTailwind } ); const listProps = mergeProps( - { - className: cx('list'), - role: 'listbox' - }, - getPTOptions('list') + [ + { + className: cx('list'), + role: 'listbox' + }, + getPTOptions('list') + ], + { useTailwind: context.useTailwind } ); return ( @@ -282,27 +315,33 @@ export const DropdownPanel = React.memo( const content = createContent(); const footer = createFooter(); const panelProps = mergeProps( - { - className: classNames(props.panelClassName, cx('panel', { context })), - style: sx('panel'), - onClick: props.onClick - }, - getPTOptions('panel') + [ + { + className: classNames(props.panelClassName, cx('panel', { context })), + style: sx('panel'), + onClick: props.onClick + }, + getPTOptions('panel') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: props.in, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: onEnter, - onEntered: onEntered, - onExit: props.onExit, - onExited: props.onExited - }, - getPTOptions('transition') + [ + { + classNames: cx('transition'), + in: props.in, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: onEnter, + onEntered: onEntered, + onExit: props.onExit, + onExited: props.onExited + }, + getPTOptions('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js index bbb70db7f2..ee99703fe7 100644 --- a/components/lib/editor/Editor.js +++ b/components/lib/editor/Editor.js @@ -148,11 +148,14 @@ export const Editor = React.memo( const createToolbarHeader = () => { const toolbarProps = mergeProps( - { - ref: toolbarRef, - className: cx('toolbar') - }, - ptm('toolbar') + [ + { + ref: toolbarRef, + className: cx('toolbar') + }, + ptm('toolbar') + ], + { useTailwind: context.useTailwind } ); if (props.showHeader === false) { @@ -160,9 +163,9 @@ export const Editor = React.memo( } else if (props.headerTemplate) { return
    {props.headerTemplate}
    ; } else { - const getMergeProps = (params, key) => mergeProps(params && { ...params }, ptm(key)); + const getMergeProps = (params, key) => mergeProps([params && { ...params }, ptm(key)], { useTailwind: context.useTailwind }); - const formatsProps = mergeProps({ className: 'ql-formats' }, ptm('formats')); + const formatsProps = mergeProps([{ className: 'ql-formats' }, ptm('formats')], { useTailwind: context.useTailwind }); return (
    @@ -212,20 +215,26 @@ export const Editor = React.memo( const header = createToolbarHeader(); const contentProps = mergeProps( - { - ref: contentRef, - className: cx('content'), - style: props.style - }, - ptm('content') + [ + { + ref: contentRef, + className: cx('content'), + style: props.style + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); const content =
    ; const rootProps = mergeProps( - { - className: classNames(props.className, cx('root')) - }, - EditorBase.getOtherProps(props), - ptm('root') + [ + { + className: classNames(props.className, cx('root')) + }, + EditorBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js index f41a5251a1..1dd433c415 100644 --- a/components/lib/fieldset/Fieldset.js +++ b/components/lib/fieldset/Fieldset.js @@ -69,33 +69,42 @@ export const Fieldset = React.forwardRef((inProps, ref) => { const createContent = () => { const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); const toggleableProps = mergeProps( - { - ref: contentRef, - id: contentId, - 'aria-hidden': collapsed, - role: 'region', - 'aria-labelledby': headerId, - className: cx('toggleableContent') - }, - ptm('toggleableContent') + [ + { + ref: contentRef, + id: contentId, + 'aria-hidden': collapsed, + role: 'region', + 'aria-labelledby': headerId, + className: cx('toggleableContent') + }, + ptm('toggleableContent') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - timeout: { enter: 1000, exit: 450 }, - in: !collapsed, - unmountOnExit: true, - options: props.transitionOptions - }, - ptm('transition') + [ + { + classNames: cx('transition'), + timeout: { enter: 1000, exit: 450 }, + in: !collapsed, + unmountOnExit: true, + options: props.transitionOptions + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( @@ -110,10 +119,13 @@ export const Fieldset = React.forwardRef((inProps, ref) => { const createToggleIcon = () => { if (props.toggleable) { const togglerIconProps = mergeProps( - { - className: cx('togglericon') - }, - ptm('togglericon') + [ + { + className: cx('togglericon') + }, + ptm('togglericon') + ], + { useTailwind: context.useTailwind } ); const icon = collapsed ? props.expandIcon || : props.collapseIcon || ; @@ -127,21 +139,27 @@ export const Fieldset = React.forwardRef((inProps, ref) => { const createLegendContent = () => { const legendTextProps = mergeProps( - { - className: cx('legendTitle') - }, - ptm('legendTitle') + [ + { + className: cx('legendTitle') + }, + ptm('legendTitle') + ], + { useTailwind: context.useTailwind } ); const togglerProps = mergeProps( - { - id: headerId, - 'aria-expanded': !collapsed, - 'aria-controls': contentId, - href: '#' + contentId, - tabIndex: props.toggleable ? null : -1 - }, - ptm('toggler') + [ + { + id: headerId, + 'aria-expanded': !collapsed, + 'aria-controls': contentId, + href: '#' + contentId, + tabIndex: props.toggleable ? null : -1 + }, + ptm('toggler') + ], + { useTailwind: context.useTailwind } ); if (props.toggleable) { @@ -165,12 +183,15 @@ export const Fieldset = React.forwardRef((inProps, ref) => { const createLegend = () => { const legendProps = mergeProps( - { - className: cx('legend'), - onClick: toggle - }, + [ + { + className: cx('legend'), + onClick: toggle + }, - ptm('legend') + ptm('legend') + ], + { useTailwind: context.useTailwind } ); if (props.legend != null || props.toggleable) { @@ -187,15 +208,18 @@ export const Fieldset = React.forwardRef((inProps, ref) => { })); const rootProps = mergeProps( - { - id: idState, - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root')), - onClick: props.onClick - }, - FieldsetBase.getOtherProps(props), - ptm('root') + [ + { + id: idState, + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root')), + onClick: props.onClick + }, + FieldsetBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const legend = createLegend(); diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index 57bc7447e1..5b5ff87aaa 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -366,45 +366,57 @@ export const FileUpload = React.memo( const createChooseButton = () => { const { className, style, icon: _icon, iconOnly } = props.chooseOptions; const chooseButtonLabelProps = mergeProps( - { - className: cx('chooseButtonLabel') - }, - ptm('chooseButtonLabel') + [ + { + className: cx('chooseButtonLabel') + }, + ptm('chooseButtonLabel') + ], + { useTailwind: context.useTailwind } ); const label = iconOnly ? : {chooseButtonLabel}; const inputProps = mergeProps( - { - ref: fileInputRef, - type: 'file', - onChange: (e) => onFileSelect(e), - multiple: props.multiple, - accept: props.accept, - disabled: chooseDisabled - }, - ptm('input') + [ + { + ref: fileInputRef, + type: 'file', + onChange: (e) => onFileSelect(e), + multiple: props.multiple, + accept: props.accept, + disabled: chooseDisabled + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); const input = ; const chooseIconProps = mergeProps( - { - className: cx('chooseIcon', { iconOnly }) - }, - ptm('chooseIcon') + [ + { + className: cx('chooseIcon', { iconOnly }) + }, + ptm('chooseIcon') + ], + { useTailwind: context.useTailwind } ); const icon = _icon || ; const chooseIcon = IconUtils.getJSXIcon(icon, { ...chooseIconProps }, { props }); const chooseButtonProps = mergeProps( - { - className: classNames(className, cx('chooseButton', { iconOnly, disabled, className, focusedState })), - style, - onClick: choose, - onKeyDown: (e) => onKeyDown(e), - onFocus, - onBlur, - tabIndex: 0, - 'data-p-disabled': disabled, - 'data-p-focus': focusedState - }, - ptm('chooseButton') + [ + { + className: classNames(className, cx('chooseButton', { iconOnly, disabled, className, focusedState })), + style, + onClick: choose, + onKeyDown: (e) => onKeyDown(e), + onFocus, + onBlur, + tabIndex: 0, + 'data-p-disabled': disabled, + 'data-p-focus': focusedState + }, + ptm('chooseButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -425,24 +437,30 @@ export const FileUpload = React.memo( const createFile = (file, index, badgeOptions) => { const key = file.name + file.type + file.size; const thumbnailProps = mergeProps( - { - role: 'presentation', - className: cx('thumbnail'), - src: file.objectURL, - width: props.previewWidth - }, - ptm('thumbnail') + [ + { + role: 'presentation', + className: cx('thumbnail'), + src: file.objectURL, + width: props.previewWidth + }, + ptm('thumbnail') + ], + { useTailwind: context.useTailwind } ); const preview = isImage(file) ? {file.name} : null; - const detailsProps = mergeProps(ptm('details')); - const fileSizeProps = mergeProps(ptm('fileSize')); + const detailsProps = mergeProps([ptm('details')], { useTailwind: context.useTailwind }); + const fileSizeProps = mergeProps([ptm('fileSize')], { useTailwind: context.useTailwind }); const fileNameProps = mergeProps( - { - className: cx('fileName') - }, - ptm('fileName') + [ + { + className: cx('fileName') + }, + ptm('fileName') + ], + { useTailwind: context.useTailwind } ); - const actionsProps = mergeProps(ptm('actions')); + const actionsProps = mergeProps([ptm('actions')], { useTailwind: context.useTailwind }); const fileName =
    {file.name}
    ; const size =
    {formatSize(file.size)}
    ; @@ -493,11 +511,14 @@ export const FileUpload = React.memo( } const fileProps = mergeProps( - { - key, - className: cx('file') - }, - ptm('file') + [ + { + key, + className: cx('file') + }, + ptm('file') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -546,17 +567,23 @@ export const FileUpload = React.memo( const uploadLabel = !uploadOptions.iconOnly ? uploadButtonLabel : ''; const cancelLabel = !cancelOptions.iconOnly ? cancelButtonLabel : ''; const uploadIconProps = mergeProps( - { - className: cx('uploadIcon', { iconOnly: uploadOptions.iconOnly }) - }, - ptm('uploadIcon') + [ + { + className: cx('uploadIcon', { iconOnly: uploadOptions.iconOnly }) + }, + ptm('uploadIcon') + ], + { useTailwind: context.useTailwind } ); const uploadIcon = IconUtils.getJSXIcon(uploadOptions.icon || , { ...uploadIconProps }, { props }); const cancelIconProps = mergeProps( - { - className: cx('cancelIcon', { iconOnly: cancelOptions.iconOnly }) - }, - ptm('cancelIcon') + [ + { + className: cx('cancelIcon', { iconOnly: cancelOptions.iconOnly }) + }, + ptm('cancelIcon') + ], + { useTailwind: context.useTailwind } ); const cancelIcon = IconUtils.getJSXIcon(cancelOptions.icon || , { ...cancelIconProps }, { props }); @@ -598,11 +625,14 @@ export const FileUpload = React.memo( } const buttonbarProps = mergeProps( - { - className: classNames(props.headerClassName, cx('buttonbar')), - style: props.headerStyle - }, - ptm('buttonbar') + [ + { + className: classNames(props.headerClassName, cx('buttonbar')), + style: props.headerStyle + }, + ptm('buttonbar') + ], + { useTailwind: context.useTailwind } ); let header = ( @@ -627,27 +657,33 @@ export const FileUpload = React.memo( } const rootProps = mergeProps( - { - id: props.id, - className: cx('root'), - style: props.style - }, - FileUploadBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + className: cx('root'), + style: props.style + }, + FileUploadBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - ref: contentRef, - 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), - 'data-p-highlight': false - }, - ptm('content') + [ + { + ref: contentRef, + 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), + 'data-p-highlight': false + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return ( @@ -667,54 +703,69 @@ export const FileUpload = React.memo( const createBasic = () => { const chooseOptions = props.chooseOptions; const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); const chooseLabel = chooseOptions.iconOnly ? : {chooseButtonLabel}; const label = props.auto ? chooseLabel : {hasFiles ? filesState[0].name : chooseLabel}; const chooseIconProps = mergeProps( - { - className: cx('chooseIcon', { iconOnly: chooseOptions.iconOnly }) - }, - ptm('chooseIcon') + [ + { + className: cx('chooseIcon', { iconOnly: chooseOptions.iconOnly }) + }, + ptm('chooseIcon') + ], + { useTailwind: context.useTailwind } ); const icon = chooseOptions.icon ? chooseOptions.icon : !chooseOptions.icon && (!hasFiles || props.auto) ? : !chooseOptions.icon && hasFiles && !props.auto && ; const chooseIcon = IconUtils.getJSXIcon(icon, { ...chooseIconProps }, { props, hasFiles }); const inputProps = mergeProps( - { - ref: fileInputRef, - type: 'file', - onChange: (e) => onFileSelect(e), - multiple: props.multiple, - accept: props.accept, - disabled: disabled - }, - ptm('input') + [ + { + ref: fileInputRef, + type: 'file', + onChange: (e) => onFileSelect(e), + multiple: props.multiple, + accept: props.accept, + disabled: disabled + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); const input = !hasFiles && ; const rootProps = mergeProps( - { - className: classNames(props.className, cx('root')), - style: props.style - }, - FileUploadBase.getOtherProps(props), - ptm('root') + [ + { + className: classNames(props.className, cx('root')), + style: props.style + }, + FileUploadBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const basicButtonProps = mergeProps( - { - className: classNames(chooseOptions.className, cx('basicButton', { hasFiles, disabled, focusedState })), - style: chooseOptions.style, - tabIndex: 0, - onClick: onSimpleUploaderClick, - onKeyDown: (e) => onKeyDown(e), - onFocus, - onBlur - }, - FileUploadBase.getOtherProps(props), - ptm('basicButton') + [ + { + className: classNames(chooseOptions.className, cx('basicButton', { hasFiles, disabled, focusedState })), + style: chooseOptions.style, + tabIndex: 0, + onClick: onSimpleUploaderClick, + onKeyDown: (e) => onKeyDown(e), + onFocus, + onBlur + }, + FileUploadBase.getOtherProps(props), + ptm('basicButton') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js index ca73fb5cda..0d9e9619d6 100644 --- a/components/lib/galleria/Galleria.js +++ b/components/lib/galleria/Galleria.js @@ -143,10 +143,13 @@ export const Galleria = React.memo( const createHeader = () => { const headerProps = mergeProps( - { - className: cx('header') - }, - ptm('header') + [ + { + className: cx('header') + }, + ptm('header') + ], + { useTailwind: context.useTailwind } ); if (props.header) { @@ -158,10 +161,13 @@ export const Galleria = React.memo( const createFooter = () => { const footerProps = mergeProps( - { - className: cx('footer') - }, - ptm('footer') + [ + { + className: cx('footer') + }, + ptm('footer') + ], + { useTailwind: context.useTailwind } ); if (props.footer) { @@ -176,23 +182,29 @@ export const Galleria = React.memo( const indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition); const closeIconProps = mergeProps( - { - className: cx('closeIcon'), - 'aria-hidden': true - }, - ptm('closeIcon') + [ + { + className: cx('closeIcon'), + 'aria-hidden': true + }, + ptm('closeIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.closeIcon || ; const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props }); const closeButtonProps = mergeProps( - { - type: 'button', - className: cx('closeButton'), - 'aria-label': localeOption('close'), - onClick: hide - }, - ptm('closeButton') + [ + { + type: 'button', + className: cx('closeButton'), + 'aria-label': localeOption('close'), + onClick: hide + }, + ptm('closeButton') + ], + { useTailwind: context.useTailwind } ); const closeButton = props.fullScreen && ( @@ -206,21 +218,27 @@ export const Galleria = React.memo( const footer = createFooter(); const rootProps = mergeProps( - { - ref: elementRef, - id: props.id, - className: classNames(props.className, cx('root', { context, thumbnailsPosClassName, indicatorPosClassName })), - style: props.style - }, - GalleriaBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + id: props.id, + className: classNames(props.className, cx('root', { context, thumbnailsPosClassName, indicatorPosClassName })), + style: props.style + }, + GalleriaBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); const element = ( @@ -288,26 +306,32 @@ export const Galleria = React.memo( if (props.fullScreen) { const maskProps = mergeProps( - { - className: cx('mask', { visibleState }) - }, - ptm('mask') + [ + { + className: cx('mask', { visibleState }) + }, + ptm('mask') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: visibleState, - timeout: { enter: 150, exit: 150 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter, - onEntering, - onEntered, - onExit, - onExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: visibleState, + timeout: { enter: 150, exit: 150 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter, + onEntering, + onEntered, + onExit, + onExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); const galleriaWrapper = ( diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js index 20e1b5b271..cd366408e7 100644 --- a/components/lib/galleria/GalleriaItem.js +++ b/components/lib/galleria/GalleriaItem.js @@ -3,10 +3,12 @@ import { useMountEffect } from '../hooks/Hooks'; import { ChevronLeftIcon } from '../icons/chevronleft'; import { ChevronRightIcon } from '../icons/chevronright'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, classNames, mergeProps } from '../utils/Utils'; export const GalleriaItem = React.memo( React.forwardRef((props, ref) => { + const context = React.useContext(PrimeReactContext); const { ptm, cx } = props; const getPTOptions = (key, options) => { @@ -94,23 +96,29 @@ export const GalleriaItem = React.memo( const isDisabled = !props.circular && props.activeItemIndex === 0; const previousItemIconProps = mergeProps( - { - className: cx('previousItemIcon') - }, - getPTOptions('previousItemIcon') + [ + { + className: cx('previousItemIcon') + }, + getPTOptions('previousItemIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.itemPrevIcon || ; const itemPrevIcon = IconUtils.getJSXIcon(icon, { ...previousItemIconProps }, { props }); const previousItemButtonProps = mergeProps( - { - type: 'button', - className: cx('previousItemButton', { isDisabled }), - onClick: navBackward, - disabled: isDisabled, - 'data-p-disabled': isDisabled - }, - getPTOptions('previousItemButton') + [ + { + type: 'button', + className: cx('previousItemButton', { isDisabled }), + onClick: navBackward, + disabled: isDisabled, + 'data-p-disabled': isDisabled + }, + getPTOptions('previousItemButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -129,23 +137,29 @@ export const GalleriaItem = React.memo( const isDisabled = !props.circular && props.activeItemIndex === props.value.length - 1; const nextItemIconProps = mergeProps( - { - className: cx('nextItemIcon') - }, - getPTOptions('nextItemIcon') + [ + { + className: cx('nextItemIcon') + }, + getPTOptions('nextItemIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.itemNextIcon || ; const itemNextIcon = IconUtils.getJSXIcon(icon, { ...nextItemIconProps }, { props }); const nextItemButtonProps = mergeProps( - { - type: 'button', - className: cx('nextItemButton', { isDisabled }), - onClick: navForward, - disabled: isDisabled, - 'data-p-disabled': isDisabled - }, - getPTOptions('nextItemButton') + [ + { + type: 'button', + className: cx('nextItemButton', { isDisabled }), + onClick: navForward, + disabled: isDisabled, + 'data-p-disabled': isDisabled + }, + getPTOptions('nextItemButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -161,10 +175,13 @@ export const GalleriaItem = React.memo( const createCaption = () => { const captionProps = mergeProps( - { - className: cx('caption') - }, - getPTOptions('caption') + [ + { + className: cx('caption') + }, + getPTOptions('caption') + ], + { useTailwind: context.useTailwind } ); if (props.caption) { @@ -182,16 +199,19 @@ export const GalleriaItem = React.memo( let indicator = props.indicator && props.indicator(index); const indicatorProps = mergeProps( - { - className: cx('indicator', { isActive }), - key: key, - tabIndex: 0, - onClick: () => onIndicatorClick(index), - onMouseEnter: () => onIndicatorMouseEnter(index), - onKeyDown: (e) => onIndicatorKeyDown(e, index), - 'data-p-highlight': isActive - }, - getPTOptions('indicator') + [ + { + className: cx('indicator', { isActive }), + key: key, + tabIndex: 0, + onClick: () => onIndicatorClick(index), + onMouseEnter: () => onIndicatorMouseEnter(index), + onKeyDown: (e) => onIndicatorKeyDown(e, index), + 'data-p-highlight': isActive + }, + getPTOptions('indicator') + ], + { useTailwind: context.useTailwind } ); if (!indicator) { @@ -209,10 +229,13 @@ export const GalleriaItem = React.memo( if (props.showIndicators) { let indicators = []; const indicatorsProps = mergeProps( - { - className: classNames(props.indicatorsContentClassName, cx('indicators')) - }, - getPTOptions('indicators') + [ + { + className: classNames(props.indicatorsContentClassName, cx('indicators')) + }, + getPTOptions('indicators') + ], + { useTailwind: context.useTailwind } ); for (let i = 0; i < props.value.length; i++) { @@ -232,25 +255,34 @@ export const GalleriaItem = React.memo( const indicators = createIndicators(); const itemWrapperProps = mergeProps( - { - ref: ref, - className: cx('itemWrapper') - }, - getPTOptions('itemWrapper') + [ + { + ref: ref, + className: cx('itemWrapper') + }, + getPTOptions('itemWrapper') + ], + { useTailwind: context.useTailwind } ); const itemContainerProps = mergeProps( - { - className: cx('itemContainer') - }, - getPTOptions('itemContainer') + [ + { + className: cx('itemContainer') + }, + getPTOptions('itemContainer') + ], + { useTailwind: context.useTailwind } ); const itemProps = mergeProps( - { - className: cx('item') - }, - getPTOptions('item') + [ + { + className: cx('item') + }, + getPTOptions('item') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js index 99ac811180..f6dbfdb9b2 100644 --- a/components/lib/galleria/GalleriaThumbnails.js +++ b/components/lib/galleria/GalleriaThumbnails.js @@ -10,6 +10,7 @@ import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, merg const GalleriaThumbnailItem = React.memo((props) => { const { ptm, cx } = props; + const context = React.useContext(PrimeReactContext); const getPTOptions = (key, options) => { return ptm(key, { @@ -38,24 +39,30 @@ const GalleriaThumbnailItem = React.memo((props) => { const content = props.template && props.template(props.item); const thumbnailItemProps = mergeProps( - { - className: classNames(props.className, cx('thumbnailItem', { subProps: props })), - 'data-p-galleria-thumbnail-item-current': props.current, - 'data-p-galleria-thumbnail-item-active': props.active, - 'data-p-galleria-thumbnail-item-start': props.start, - 'data-p-galleria-thumbnail-item-end': props.end - }, - getPTOptions('thumbnailItem') + [ + { + className: classNames(props.className, cx('thumbnailItem', { subProps: props })), + 'data-p-galleria-thumbnail-item-current': props.current, + 'data-p-galleria-thumbnail-item-active': props.active, + 'data-p-galleria-thumbnail-item-start': props.start, + 'data-p-galleria-thumbnail-item-end': props.end + }, + getPTOptions('thumbnailItem') + ], + { useTailwind: context.useTailwind } ); const thumbnailItemContentProps = mergeProps( - { - className: cx('thumbnailItemContent'), - tabIndex: tabIndex, - onClick: onItemClick, - onKeyDown: onItemKeyDown - }, - getPTOptions('thumbnailItemContent') + [ + { + className: cx('thumbnailItemContent'), + tabIndex: tabIndex, + onClick: onItemClick, + onKeyDown: onItemKeyDown + }, + getPTOptions('thumbnailItemContent') + ], + { useTailwind: context.useTailwind } ); return ( @@ -365,21 +372,27 @@ export const GalleriaThumbnails = React.memo( let isDisabled = (!props.circular && props.activeItemIndex === 0) || props.value.length <= numVisibleState; const previousThumbnailIconProps = mergeProps( - { - className: cx('previousThumbnailIcon') - }, - getPTOptions('previousThumbnailIcon') + [ + { + className: cx('previousThumbnailIcon') + }, + getPTOptions('previousThumbnailIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.isVertical ? props.prevThumbnailIcon || : props.prevThumbnailIcon || ; const prevThumbnailIcon = IconUtils.getJSXIcon(icon, { ...previousThumbnailIconProps }, { props }); const previousThumbnailButtonProps = mergeProps( - { - className: cx('previousThumbnailButton', { isDisabled }), - onClick: navBackward, - disabled: isDisabled, - 'data-p-disabled': isDisabled - }, - getPTOptions('previousThumbnailButton') + [ + { + className: cx('previousThumbnailButton', { isDisabled }), + onClick: navBackward, + disabled: isDisabled, + 'data-p-disabled': isDisabled + }, + getPTOptions('previousThumbnailButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -398,22 +411,28 @@ export const GalleriaThumbnails = React.memo( const isDisabled = (!props.circular && props.activeItemIndex === props.value.length - 1) || props.value.length <= numVisibleState; const nextThumbnailIconProps = mergeProps( - { - className: cx('nextThumbnailIcon') - }, - getPTOptions('nextThumbnailIcon') + [ + { + className: cx('nextThumbnailIcon') + }, + getPTOptions('nextThumbnailIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.isVertical ? props.nextThumbnailIcon || : props.nextThumbnailIcon || ; const nextThumbnailIcon = IconUtils.getJSXIcon(icon, { ...nextThumbnailIconProps }, { props }); const nextThumbnailButtonProps = mergeProps( - { - className: cx('nextThumbnailButton', { isDisabled }), - onClick: navForward, - disabled: isDisabled, - 'data-p-disabled': isDisabled - }, - getPTOptions('nextThumbnailButton') + [ + { + className: cx('nextThumbnailButton', { isDisabled }), + onClick: navForward, + disabled: isDisabled, + 'data-p-disabled': isDisabled + }, + getPTOptions('nextThumbnailButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -434,30 +453,39 @@ export const GalleriaThumbnails = React.memo( const forwardNavigator = createForwardNavigator(); const thumbnailContainerProps = mergeProps( - { - className: cx('thumbnailContainer') - }, - getPTOptions('thumbnailContainer') + [ + { + className: cx('thumbnailContainer') + }, + getPTOptions('thumbnailContainer') + ], + { useTailwind: context.useTailwind } ); const thumbnailItemsContainerProps = mergeProps( - { - className: cx('thumbnailItemsContainer'), - style: sx('thumbnailItemsContainer', { height }) - }, - getPTOptions('thumbnailItemsContainer') + [ + { + className: cx('thumbnailItemsContainer'), + style: sx('thumbnailItemsContainer', { height }) + }, + getPTOptions('thumbnailItemsContainer') + ], + { useTailwind: context.useTailwind } ); const thumbnailItemsProps = mergeProps( - { - ref: itemsContainerRef, - className: cx('thumbnailItems'), - onTransitionEnd: onTransitionEnd, - onTouchStart: onTouchStart, - onTouchMove: onTouchMove, - onTouchEnd: onTouchEnd - }, - getPTOptions('thumbnailItems') + [ + { + ref: itemsContainerRef, + className: cx('thumbnailItems'), + onTransitionEnd: onTransitionEnd, + onTouchStart: onTouchStart, + onTouchMove: onTouchMove, + onTouchEnd: onTouchEnd + }, + getPTOptions('thumbnailItems') + ], + { useTailwind: context.useTailwind } ); return ( @@ -474,10 +502,13 @@ export const GalleriaThumbnails = React.memo( const content = createContent(); const thumbnailWrapperProps = mergeProps( - { - className: cx('thumbnailWrapper') - }, - getPTOptions('thumbnailWrapper') + [ + { + className: cx('thumbnailWrapper') + }, + getPTOptions('thumbnailWrapper') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js index 0fd0fc9fa4..3169a137b2 100644 --- a/components/lib/image/Image.js +++ b/components/lib/image/Image.js @@ -125,11 +125,14 @@ export const Image = React.memo( const createPreview = () => { const buttonProps = mergeProps( - { - className: cx('button'), - onClick: show - }, - ptm('button') + [ + { + className: cx('button'), + onClick: show + }, + ptm('button') + ], + { useTailwind: context.useTailwind } ); if (props.preview) { @@ -143,12 +146,12 @@ export const Image = React.memo( const { downloadable, alt, crossOrigin, referrerPolicy, useMap, loading } = props; const zoomOutDisabled = scaleState <= 0.5; const zoomInDisabled = scaleState >= 1.5; - const downloadIconProps = mergeProps(ptm('downloadIcon')); - const rotateRightIconProps = mergeProps(ptm('rotateRightIcon')); - const rotateLeftIconProps = mergeProps(ptm('rotateLeftIcon')); - const zoomOutIconProps = mergeProps(ptm('zoomOutIcon')); - const zoomInIconProps = mergeProps(ptm('zoomInIcon')); - const closeIconProps = mergeProps(ptm('closeIcon')); + const downloadIconProps = mergeProps([ptm('downloadIcon')], { useTailwind: context.useTailwind }); + const rotateRightIconProps = mergeProps([ptm('rotateRightIcon')], { useTailwind: context.useTailwind }); + const rotateLeftIconProps = mergeProps([ptm('rotateLeftIcon')], { useTailwind: context.useTailwind }); + const zoomOutIconProps = mergeProps([ptm('zoomOutIcon')], { useTailwind: context.useTailwind }); + const zoomInIconProps = mergeProps([ptm('zoomInIcon')], { useTailwind: context.useTailwind }); + const closeIconProps = mergeProps([ptm('closeIcon')], { useTailwind: context.useTailwind }); const downloadIcon = IconUtils.getJSXIcon(props.downloadIcon || , { ...downloadIconProps }, { props }); const rotateRightIcon = IconUtils.getJSXIcon(props.rotateRightIcon || , { ...rotateRightIconProps }, { props }); const rotateLeftIcon = IconUtils.getJSXIcon(props.rotateLeftIcon || , { ...rotateLeftIconProps }, { props }); @@ -157,112 +160,145 @@ export const Image = React.memo( const closeIcon = IconUtils.getJSXIcon(props.closeIcon || , { ...closeIconProps }, { props }); const maskProps = mergeProps( - { - ref: maskRef, - className: cx('mask'), - onPointerUp: hide - }, - ptm('mask') + [ + { + ref: maskRef, + className: cx('mask'), + onPointerUp: hide + }, + ptm('mask') + ], + { useTailwind: context.useTailwind } ); const toolbarProps = mergeProps( - { - className: cx('toolbar') - }, - ptm('toolbar') + [ + { + className: cx('toolbar') + }, + ptm('toolbar') + ], + { useTailwind: context.useTailwind } ); const downloadButtonProps = mergeProps( - { - className: cx('downloadButton'), - onPointerUp: onDownload, - type: 'button' - }, - ptm('downloadButton') + [ + { + className: cx('downloadButton'), + onPointerUp: onDownload, + type: 'button' + }, + ptm('downloadButton') + ], + { useTailwind: context.useTailwind } ); const rotateRightButtonProps = mergeProps( - { - className: cx('rotateRightButton'), - onPointerUp: rotateRight, - type: 'button' - }, - ptm('rotateRightButton') + [ + { + className: cx('rotateRightButton'), + onPointerUp: rotateRight, + type: 'button' + }, + ptm('rotateRightButton') + ], + { useTailwind: context.useTailwind } ); const rotateLeftButtonProps = mergeProps( - { - className: cx('rotateLeftButton'), - onPointerUp: rotateLeft, - type: 'button' - }, - ptm('rotateLeftButton') + [ + { + className: cx('rotateLeftButton'), + onPointerUp: rotateLeft, + type: 'button' + }, + ptm('rotateLeftButton') + ], + { useTailwind: context.useTailwind } ); const zoomOutButtonProps = mergeProps( - { - className: classNames(cx('zoomOutButton'), { 'p-disabled': zoomOutDisabled }), - style: { pointerEvents: 'auto' }, - onPointerUp: zoomOut, - type: 'button', - disabled: zoomOutDisabled - }, - ptm('zoomOutButton') + [ + { + className: classNames(cx('zoomOutButton'), { 'p-disabled': zoomOutDisabled }), + style: { pointerEvents: 'auto' }, + onPointerUp: zoomOut, + type: 'button', + disabled: zoomOutDisabled + }, + ptm('zoomOutButton') + ], + { useTailwind: context.useTailwind } ); const zoomInButtonProps = mergeProps( - { - className: classNames(cx('zoomInButton'), { 'p-disabled': zoomInDisabled }), - style: { pointerEvents: 'auto' }, - onPointerUp: zoomIn, - type: 'button', - disabled: zoomInDisabled - }, - ptm('zoomInButton') + [ + { + className: classNames(cx('zoomInButton'), { 'p-disabled': zoomInDisabled }), + style: { pointerEvents: 'auto' }, + onPointerUp: zoomIn, + type: 'button', + disabled: zoomInDisabled + }, + ptm('zoomInButton') + ], + { useTailwind: context.useTailwind } ); const closeButtonProps = mergeProps( - { - className: cx('closeButton'), - type: 'button', - 'aria-label': localeOption('close') - }, - ptm('closeButton') + [ + { + className: cx('closeButton'), + type: 'button', + 'aria-label': localeOption('close') + }, + ptm('closeButton') + ], + { useTailwind: context.useTailwind } ); const previewProps = mergeProps( - { - src: props.zoomSrc || props.src, - className: cx('preview'), - style: sx('preview', { rotateState, scaleState }), - onPointerUp: onPreviewImageClick, - crossOrigin: crossOrigin, - referrerPolicy: referrerPolicy, - useMap: useMap, - loading: loading - }, - ptm('preview') + [ + { + src: props.zoomSrc || props.src, + className: cx('preview'), + style: sx('preview', { rotateState, scaleState }), + onPointerUp: onPreviewImageClick, + crossOrigin: crossOrigin, + referrerPolicy: referrerPolicy, + useMap: useMap, + loading: loading + }, + ptm('preview') + ], + { useTailwind: context.useTailwind } ); const previewContainerProps = mergeProps( - { - ref: previewRef - }, - ptm('previewContainer') + [ + { + ref: previewRef + }, + ptm('previewContainer') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: previewVisibleState, - timeout: { enter: 150, exit: 150 }, - unmountOnExit: true, - onEntering: onEntering, - onEntered: onEntered, - onExit: onExit, - onExiting: onExiting, - onExited: onExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: previewVisibleState, + timeout: { enter: 150, exit: 150 }, + unmountOnExit: true, + onEntering: onEntering, + onEntered: onEntered, + onExit: onExit, + onExiting: onExiting, + onExited: onExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( @@ -295,40 +331,49 @@ export const Image = React.memo( const { src, alt, width, height, crossOrigin, referrerPolicy, useMap, loading } = props; const element = createElement(); const iconProp = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const icon = props.indicatorIcon || ; const indicatorIcon = IconUtils.getJSXIcon(icon, { ...iconProp }, { props }); const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : indicatorIcon; const preview = createPreview(); const imageProp = mergeProps( - { - ref: imageRef, - src: src, - className: props.imageClassName, - width: width, - height: height, - crossOrigin: crossOrigin, - referrerPolicy: referrerPolicy, - useMap: useMap, - loading: loading, - style: props.imageStyle, - onError: props.onError - }, - ptm('image') + [ + { + ref: imageRef, + src: src, + className: props.imageClassName, + width: width, + height: height, + crossOrigin: crossOrigin, + referrerPolicy: referrerPolicy, + useMap: useMap, + loading: loading, + style: props.imageStyle, + onError: props.onError + }, + ptm('image') + ], + { useTailwind: context.useTailwind } ); const image = props.src && {alt}; const rootProps = mergeProps( - { - ref: elementRef, - className: cx('root') - }, - ImageBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + className: cx('root') + }, + ImageBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js index 0fe743bae9..482cc09ed6 100644 --- a/components/lib/inplace/Inplace.js +++ b/components/lib/inplace/Inplace.js @@ -65,14 +65,17 @@ export const Inplace = React.forwardRef((inProps, ref) => { const createDisplay = (content) => { const displayProps = mergeProps( - { - onClick: open, - className: cx('display'), - onKeyDown: onDisplayKeyDown, - tabIndex: props.tabIndex, - 'aria-label': props.ariaLabel - }, - ptm('display') + [ + { + onClick: open, + className: cx('display'), + onKeyDown: onDisplayKeyDown, + tabIndex: props.tabIndex, + 'aria-label': props.ariaLabel + }, + ptm('display') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -84,17 +87,22 @@ export const Inplace = React.forwardRef((inProps, ref) => { const ariaLabel = localeOption('close'); if (props.closable) { - const closeButtonProps = mergeProps({ - className: cx('closeButton'), - icon: closeIcon, - type: 'button', - onClick: close, - 'aria-label': ariaLabel, - pt: ptm('closeButton'), - __parentMetadata: { - parent: metaData - } - }); + const closeButtonProps = mergeProps( + [ + { + className: cx('closeButton'), + icon: closeIcon, + type: 'button', + onClick: close, + 'aria-label': ariaLabel, + pt: ptm('closeButton'), + __parentMetadata: { + parent: metaData + } + } + ], + { useTailwind: context.useTailwind } + ); return ; } @@ -106,10 +114,13 @@ export const Inplace = React.forwardRef((inProps, ref) => { const closeButton = createCloseButton(); const contentProps = mergeProps( - { - className: cx('content') - }, - ptm('content') + [ + { + className: cx('content') + }, + ptm('content') + ], + { useTailwind: context.useTailwind } ); return ( @@ -140,12 +151,15 @@ export const Inplace = React.forwardRef((inProps, ref) => { const children = createChildren(); const rootProps = mergeProps( - { - ref: elementRef, - className: classNames(props.className, cx('root')) - }, - InplaceBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + className: classNames(props.className, cx('root')) + }, + InplaceBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return
    {children}
    ; diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 941c25fa83..89863fa64c 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1072,26 +1072,32 @@ export const InputNumber = React.memo( const createUpButton = () => { const incrementIconProps = mergeProps( - { - className: cx('incrementIcon') - }, - ptm('incrementIcon') + [ + { + className: cx('incrementIcon') + }, + ptm('incrementIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.incrementButtonIcon || ; const upButton = IconUtils.getJSXIcon(icon, { ...incrementIconProps }, { props }); const incrementButtonProps = mergeProps( - { - type: 'button', - className: classNames(props.incrementButtonClassName, cx('incrementButton')), - onPointerLeave: onUpButtonMouseLeave, - onPointerDown: (e) => onUpButtonMouseDown(e), - onPointerUp: onUpButtonMouseUp, - onKeyDown: (e) => onUpButtonKeyDown(e), - onKeyUp: onUpButtonKeyUp, - disabled: props.disabled, - tabIndex: -1 - }, - ptm('incrementButton') + [ + { + type: 'button', + className: classNames(props.incrementButtonClassName, cx('incrementButton')), + onPointerLeave: onUpButtonMouseLeave, + onPointerDown: (e) => onUpButtonMouseDown(e), + onPointerUp: onUpButtonMouseUp, + onKeyDown: (e) => onUpButtonKeyDown(e), + onKeyUp: onUpButtonKeyUp, + disabled: props.disabled, + tabIndex: -1 + }, + ptm('incrementButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -1104,26 +1110,32 @@ export const InputNumber = React.memo( const createDownButton = () => { const decrementIconProps = mergeProps( - { - className: cx('decrementIcon') - }, - ptm('decrementIcon') + [ + { + className: cx('decrementIcon') + }, + ptm('decrementIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.decrementButtonIcon || ; const downButton = IconUtils.getJSXIcon(icon, { ...decrementIconProps }, { props }); const decrementButtonProps = mergeProps( - { - type: 'button', - className: classNames(props.decrementButtonClassName, cx('decrementButton')), - onPointerLeave: onDownButtonMouseLeave, - onPointerDown: (e) => onDownButtonMouseDown(e), - onPointerUp: onDownButtonMouseUp, - onKeyDown: (e) => onDownButtonKeyDown(e), - onKeyUp: onDownButtonKeyUp, - disabled: props.disabled, - tabIndex: -1 - }, - ptm('decrementButton') + [ + { + type: 'button', + className: classNames(props.decrementButtonClassName, cx('decrementButton')), + onPointerLeave: onDownButtonMouseLeave, + onPointerDown: (e) => onDownButtonMouseDown(e), + onPointerUp: onDownButtonMouseUp, + onKeyDown: (e) => onDownButtonKeyDown(e), + onKeyUp: onDownButtonKeyUp, + disabled: props.disabled, + tabIndex: -1 + }, + ptm('decrementButton') + ], + { useTailwind: context.useTailwind } ); return ( @@ -1138,10 +1150,13 @@ export const InputNumber = React.memo( const upButton = props.showButtons && createUpButton(); const downButton = props.showButtons && createDownButton(); const buttonGroupProps = mergeProps( - { - className: cx('buttonGroup') - }, - ptm('buttonGroup') + [ + { + className: cx('buttonGroup') + }, + ptm('buttonGroup') + ], + { useTailwind: context.useTailwind } ); if (stacked) { @@ -1168,13 +1183,16 @@ export const InputNumber = React.memo( const inputElement = createInputElement(); const buttonGroup = createButtonGroup(); const rootProps = mergeProps( - { - id: props.id, - className: classNames(props.className, cx('root', { focusedState, stacked, horizontal, vertical })), - style: props.style - }, - otherProps, - ptm('root') + [ + { + id: props.id, + className: classNames(props.className, cx('root', { focusedState, stacked, horizontal, vertical })), + style: props.style + }, + otherProps, + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index 85cc44a969..1b6c493438 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -88,45 +88,57 @@ export const InputSwitch = React.memo( const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const rootProps = mergeProps( - { - className: classNames(props.className, cx('root', { focusedState, checked })), - style: props.style, - onClick, - role: 'checkbox', - 'aria-checked': checked - }, - ptm('root') + [ + { + className: classNames(props.className, cx('root', { focusedState, checked })), + style: props.style, + onClick, + role: 'checkbox', + 'aria-checked': checked + }, + ptm('root') + ], + { useTailwind: context.useTailwind } ); const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') + [ + { + className: 'p-hidden-accessible' + }, + ptm('hiddenInputWrapper') + ], + { useTailwind: context.useTailwind } ); const hiddenInputProps = mergeProps( - { - type: 'checkbox', - id: props.inputId, - name: props.name, - checked: checked, - onChange: toggle, - onFocus: onFocus, - onBlur: onBlur, - disabled: props.disabled, - role: 'switch', - tabIndex: props.tabIndex, - 'aria-checked': checked, - ...ariaProps - }, - ptm('hiddenInput') + [ + { + type: 'checkbox', + id: props.inputId, + name: props.name, + checked: checked, + onChange: toggle, + onFocus: onFocus, + onBlur: onBlur, + disabled: props.disabled, + role: 'switch', + tabIndex: props.tabIndex, + 'aria-checked': checked, + ...ariaProps + }, + ptm('hiddenInput') + ], + { useTailwind: context.useTailwind } ); const sliderProps = mergeProps( - { - className: cx('slider') - }, - ptm('slider') + [ + { + className: cx('slider') + }, + ptm('slider') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js index f571759ba6..fb9b7bae27 100644 --- a/components/lib/inputtext/InputText.js +++ b/components/lib/inputtext/InputText.js @@ -68,15 +68,18 @@ export const InputText = React.memo( const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); const rootProps = mergeProps( - { - className: cx('root', { isFilled }), - onBeforeInput: onBeforeInput, - onInput: onInput, - onKeyDown: onKeyDown, - onPaste: onPaste - }, - InputTextBase.getOtherProps(props), - ptm('root') + [ + { + className: cx('root', { isFilled }), + onBeforeInput: onBeforeInput, + onInput: onInput, + onKeyDown: onKeyDown, + onPaste: onPaste + }, + InputTextBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js index ae45442177..39723dd0f8 100644 --- a/components/lib/inputtextarea/InputTextarea.js +++ b/components/lib/inputtextarea/InputTextarea.js @@ -123,19 +123,22 @@ export const InputTextarea = React.memo( const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); const rootProps = mergeProps( - { - ref: elementRef, - className: cx('root', { isFilled }), - onFocus: onFocus, - onBlur: onBlur, - onKeyUp: onKeyUp, - onKeyDown: onKeyDown, - onBeforeInput: onBeforeInput, - onInput: onInput, - onPaste: onPaste - }, - InputTextareaBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + className: cx('root', { isFilled }), + onFocus: onFocus, + onBlur: onBlur, + onKeyUp: onKeyUp, + onKeyDown: onKeyDown, + onBeforeInput: onBeforeInput, + onInput: onInput, + onPaste: onPaste + }, + InputTextareaBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js index 25b35cbc45..acc2679c56 100644 --- a/components/lib/knob/Knob.js +++ b/components/lib/knob/Knob.js @@ -160,61 +160,76 @@ export const Knob = React.memo( })); const labelProps = mergeProps( - { - x: 50, - y: 57, - textAnchor: 'middle', - fill: props.textColor, - className: cx('label'), - name: props.name - }, - ptm('label') + [ + { + x: 50, + y: 57, + textAnchor: 'middle', + fill: props.textColor, + className: cx('label'), + name: props.name + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); const text = props.showValue && {valueToDisplay()}; const rootProps = mergeProps( - { - ref: elementRef, - id: props.id, - className: cx('root'), - style: props.style - }, - ptm('root') + [ + { + ref: elementRef, + id: props.id, + className: cx('root'), + style: props.style + }, + ptm('root') + ], + { useTailwind: context.useTailwind } ); const svgProps = mergeProps( - { - viewBox: '0 0 100 100', - width: props.size, - height: props.size, - onClick: (e) => onClick(e), - onMouseDown: (e) => onMouseDown(e), - onMouseUp: (e) => onMouseUp(e), - onTouchStart: (e) => onTouchStart(e), - onTouchEnd: (e) => onTouchEnd(e) - }, - ptm('svg') + [ + { + viewBox: '0 0 100 100', + width: props.size, + height: props.size, + onClick: (e) => onClick(e), + onMouseDown: (e) => onMouseDown(e), + onMouseUp: (e) => onMouseUp(e), + onTouchStart: (e) => onTouchStart(e), + onTouchEnd: (e) => onTouchEnd(e) + }, + ptm('svg') + ], + { useTailwind: context.useTailwind } ); const rangeProps = mergeProps( - { - d: rangePath, - strokeWidth: props.strokeWidth, - stroke: props.rangeColor, - className: cx('range') - }, - ptm('range') + [ + { + d: rangePath, + strokeWidth: props.strokeWidth, + stroke: props.rangeColor, + className: cx('range') + }, + ptm('range') + ], + { useTailwind: context.useTailwind } ); const valueProps = mergeProps( - { - d: valuePath, - strokeWidth: props.strokeWidth, - stroke: props.valueColor, - className: cx('value') - }, - ptm('value') + [ + { + d: valuePath, + strokeWidth: props.strokeWidth, + stroke: props.valueColor, + className: cx('value') + }, + ptm('value') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index 4e658c9d1e..d467260721 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -344,12 +344,15 @@ export const ListBox = React.memo( const key = index + '_' + getOptionGroupRenderKey(option); const itemGroupProps = mergeProps( - { - className: ptCallbacks.cx('itemGroup'), - style: ptCallbacks.sx('itemGroup', { scrollerOptions }), - role: 'group' - }, - ptCallbacks.ptm('itemGroup') + [ + { + className: ptCallbacks.cx('itemGroup'), + style: ptCallbacks.sx('itemGroup', { scrollerOptions }), + role: 'group' + }, + ptCallbacks.ptm('itemGroup') + ], + { useTailwind: context.useTailwind } ); return ( @@ -396,10 +399,13 @@ export const ListBox = React.memo( const createEmptyMessage = (emptyMessage, isFilter) => { const emptyMessageProps = mergeProps( - { - className: ptCallbacks.cx('emptyMessage') - }, - ptCallbacks.ptm('emptyMessage') + [ + { + className: ptCallbacks.cx('emptyMessage') + }, + ptCallbacks.ptm('emptyMessage') + ], + { useTailwind: context.useTailwind } ); const message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage'); @@ -417,15 +423,18 @@ export const ListBox = React.memo( itemTemplate: (item, options) => item && createItem(item, options.index, options), contentTemplate: (options) => { const listProps = mergeProps( - { - ref: options.contentRef, - style: ptCallbacks.sx('list', { options }), - className: ptCallbacks.cx('list', { options }), - role: 'listbox', - 'aria-multiselectable': props.multiple, - ...ariaProps - }, - ptCallbacks.ptm('list') + [ + { + ref: options.contentRef, + style: ptCallbacks.sx('list', { options }), + className: ptCallbacks.cx('list', { options }), + role: 'listbox', + 'aria-multiselectable': props.multiple, + ...ariaProps + }, + ptCallbacks.ptm('list') + ], + { useTailwind: context.useTailwind } ); return
      {options.children}
    ; @@ -438,13 +447,16 @@ export const ListBox = React.memo( const items = createItems(); const listProps = mergeProps( - { - className: ptCallbacks.cx('list'), - role: 'listbox', - 'aria-multiselectable': props.multiple, - ...ariaProps - }, - ptCallbacks.ptm('list') + [ + { + className: ptCallbacks.cx('list'), + role: 'listbox', + 'aria-multiselectable': props.multiple, + ...ariaProps + }, + ptCallbacks.ptm('list') + ], + { useTailwind: context.useTailwind } ); return
      {items}
    ; @@ -460,22 +472,28 @@ export const ListBox = React.memo( const header = createHeader(); const wrapperProps = mergeProps( - { - className: ptCallbacks.cx('wrapper'), - style: props.listStyle - }, - ptCallbacks.ptm('wrapper') + [ + { + className: ptCallbacks.cx('wrapper'), + style: props.listStyle + }, + ptCallbacks.ptm('wrapper') + ], + { useTailwind: context.useTailwind } ); const rootProps = mergeProps( - { - ref: elementRef, - id: props.id, - className: ptCallbacks.cx('root'), - style: props.style - }, - ListBoxBase.getOtherProps(props), - ptCallbacks.ptm('root') + [ + { + ref: elementRef, + id: props.id, + className: ptCallbacks.cx('root'), + style: props.style + }, + ListBoxBase.getOtherProps(props), + ptCallbacks.ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/listbox/ListBoxHeader.js b/components/lib/listbox/ListBoxHeader.js index e36b8e7b90..df785ba03a 100644 --- a/components/lib/listbox/ListBoxHeader.js +++ b/components/lib/listbox/ListBoxHeader.js @@ -1,12 +1,14 @@ import * as React from 'react'; import { SearchIcon } from '../icons/search'; import { InputText } from '../inputtext/InputText'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; export const ListBoxHeader = React.memo((props) => { const { ptCallbacks: { ptm, cx } } = props; + const context = React.useContext(PrimeReactContext); const getPTOptions = (key, options) => { return ptm(key, { @@ -31,27 +33,36 @@ export const ListBoxHeader = React.memo((props) => { const createHeader = () => { const filterIconProps = mergeProps( - { - className: cx('filterIcon') - }, - getPTOptions('filterIcon') + [ + { + className: cx('filterIcon') + }, + getPTOptions('filterIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.filterIcon || ; const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props }); const headerProps = mergeProps( - { - className: cx('header') - }, - getPTOptions('header') + [ + { + className: cx('header') + }, + getPTOptions('header') + ], + { useTailwind: context.useTailwind } ); const filterContainerProps = mergeProps( - { - className: cx('filterContainer') - }, - getPTOptions('filterContainer') + [ + { + className: cx('filterContainer') + }, + getPTOptions('filterContainer') + ], + { useTailwind: context.useTailwind } ); let content = ( diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js index da2f667340..9fe4087c46 100644 --- a/components/lib/listbox/ListBoxItem.js +++ b/components/lib/listbox/ListBoxItem.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; export const ListBoxItem = React.memo((props) => { const { ptCallbacks: { ptm, cx } } = props; + const context = React.useContext(PrimeReactContext); const getPTOptions = (key) => { return ptm(key, { @@ -85,20 +87,23 @@ export const ListBoxItem = React.memo((props) => { const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label; const itemProps = mergeProps( - { - className: cx('item', { props }), - style: props.style, - onClick: onClick, - onTouchEnd: onTouchEnd, - onKeyDown: onKeyDown, - tabIndex: '-1', - 'aria-label': props.label, - key: props.label, - role: 'option', - 'aria-selected': props.selected, - 'aria-disabled': props.disabled - }, - getPTOptions('item') + [ + { + className: cx('item', { props }), + style: props.style, + onClick: onClick, + onTouchEnd: onTouchEnd, + onKeyDown: onKeyDown, + tabIndex: '-1', + 'aria-label': props.label, + key: props.label, + role: 'option', + 'aria-selected': props.selected, + 'aria-disabled': props.disabled + }, + getPTOptions('item') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js index 000c1a867c..31368f0492 100644 --- a/components/lib/megamenu/MegaMenu.js +++ b/components/lib/megamenu/MegaMenu.js @@ -241,13 +241,16 @@ export const MegaMenu = React.memo( const key = idState + '_separator__' + index; const separatorProps = mergeProps( - { - id: key, - key, - className: cx('separator'), - role: 'separator' - }, - ptm('separator') + [ + { + id: key, + key, + className: cx('separator'), + role: 'separator' + }, + ptm('separator') + ], + { useTailwind: context.useTailwind } ); return
  • ; @@ -256,10 +259,13 @@ export const MegaMenu = React.memo( const createSubmenuIcon = (item) => { if (item.items) { const submenuIconProps = mergeProps( - { - className: cx('submenuIcon') - }, - ptm('submenuIcon') + [ + { + className: cx('submenuIcon') + }, + ptm('submenuIcon') + ], + { useTailwind: context.useTailwind } ); const icon = vertical ? props.submenuIcon || : props.submenuIcon || ; @@ -282,42 +288,54 @@ export const MegaMenu = React.memo( const key = item.id || idState + '_' + index; const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled }); const iconProps = mergeProps( - { - className: classNames(item.icon, cx('icon')) - }, - ptm('icon') + [ + { + className: classNames(item.icon, cx('icon')) + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); const iconClassName = classNames(item.icon, 'p-menuitem-icon'); const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props }); const label = item.label && {item.label}; const actionProps = mergeProps( - { - href: item.url || '#', - className: cx('action', { item }), - target: item.target, - onClick: (event) => onLeafClick(event, item), - role: 'menuitem', - 'aria-disabled': item.disabled - }, - getPTOptions(item, 'action', index) + [ + { + href: item.url || '#', + className: cx('action', { item }), + target: item.target, + onClick: (event) => onLeafClick(event, item), + role: 'menuitem', + 'aria-disabled': item.disabled + }, + getPTOptions(item, 'action', index) + ], + { useTailwind: context.useTailwind } ); const submenuItemProps = mergeProps( - { - key, - id: key, - className: classNames(item.className, cx('submenuItem')), - style: item.style, - role: 'none' - }, - getPTOptions(item, 'submenuItem', index) + [ + { + key, + id: key, + className: classNames(item.className, cx('submenuItem')), + style: item.style, + role: 'none' + }, + getPTOptions(item, 'submenuItem', index) + ], + { useTailwind: context.useTailwind } ); let content = ( @@ -354,15 +372,18 @@ export const MegaMenu = React.memo( const key = submenu.id || idState + '_sub_' + index; const submenuHeaderProps = mergeProps( - { - id: key, - key, - className: classNames(submenu.className, cx('submenuHeader', { submenu })), - style: submenu.style, - role: 'presentation', - 'data-p-disabled': submenu.disabled - }, - ptm('submenuHeader') + [ + { + id: key, + key, + className: classNames(submenu.className, cx('submenuHeader', { submenu })), + style: submenu.style, + role: 'presentation', + 'data-p-disabled': submenu.disabled + }, + ptm('submenuHeader') + ], + { useTailwind: context.useTailwind } ); return ( @@ -382,20 +403,26 @@ export const MegaMenu = React.memo( const submenus = createSubmenus(column); const columnProps = mergeProps( - { - key: key, - className: cx('column', { category }) - }, - ptm('column') + [ + { + key: key, + className: cx('column', { category }) + }, + ptm('column') + ], + { useTailwind: context.useTailwind } ); const submenuProps = mergeProps( - { - className: cx('submenu'), - style: { display: activeItemState === category ? 'block' : 'none' }, - role: 'menu' - }, - ptm('submenu') + [ + { + className: cx('submenu'), + style: { display: activeItemState === category ? 'block' : 'none' }, + role: 'menu' + }, + ptm('submenu') + ], + { useTailwind: context.useTailwind } ); return ( @@ -420,17 +447,23 @@ export const MegaMenu = React.memo( const columns = createColumns(category); const panelProps = mergeProps( - { - className: cx('panel') - }, - ptm('panel') + [ + { + className: cx('panel') + }, + ptm('panel') + ], + { useTailwind: context.useTailwind } ); const gridProps = mergeProps( - { - className: cx('grid') - }, - ptm('grid') + [ + { + className: cx('grid') + }, + ptm('grid') + ], + { useTailwind: context.useTailwind } ); return ( @@ -554,18 +587,24 @@ export const MegaMenu = React.memo( const createCategory = (category, index) => { const iconProps = mergeProps( - { - className: cx('icon') - }, - getPTOptions(category, 'icon', index) + [ + { + className: cx('icon') + }, + getPTOptions(category, 'icon', index) + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(category.icon, { ...iconProps }, { props }); const labelProps = mergeProps( - { - className: cx('label') - }, - getPTOptions(category, 'label', index) + [ + { + className: cx('label') + }, + getPTOptions(category, 'label', index) + ], + { useTailwind: context.useTailwind } ); const label = category.label && {category.label}; const itemContent = category.template ? ObjectUtils.getJSXElement(category.template, category) : null; @@ -573,31 +612,37 @@ export const MegaMenu = React.memo( const panel = createCategoryPanel(category); const headerActionProps = mergeProps( - { - href: category.url || '#', - className: cx('headerAction', { category }), - target: category.target, - onClick: (e) => onCategoryClick(e, category), - onKeyDown: (e) => onCategoryKeyDown(e, category), - role: 'menuitem', - 'aria-haspopup': category.items != null, - 'data-p-disabled': category.disabled - }, - getPTOptions(category, 'headerAction', index) + [ + { + href: category.url || '#', + className: cx('headerAction', { category }), + target: category.target, + onClick: (e) => onCategoryClick(e, category), + onKeyDown: (e) => onCategoryKeyDown(e, category), + role: 'menuitem', + 'aria-haspopup': category.items != null, + 'data-p-disabled': category.disabled + }, + getPTOptions(category, 'headerAction', index) + ], + { useTailwind: context.useTailwind } ); const key = category.id || idState + '_cat_' + index; const menuItemProps = mergeProps( - { - key, - id: key, - className: classNames(category.className, cx('menuitem', { category, activeItemState })), - style: category.style, - onMouseEnter: (e) => onCategoryMouseEnter(e, category), - role: 'none', - 'data-p-disabled': category.disabled || false - }, - getPTOptions(category, 'menuitem', index) + [ + { + key, + id: key, + className: classNames(category.className, cx('menuitem', { category, activeItemState })), + style: category.style, + onMouseEnter: (e) => onCategoryMouseEnter(e, category), + role: 'none', + 'data-p-disabled': category.disabled || false + }, + getPTOptions(category, 'menuitem', index) + ], + { useTailwind: context.useTailwind } ); return ( @@ -616,11 +661,14 @@ export const MegaMenu = React.memo( const createMenu = () => { const menuProps = mergeProps( - { - className: cx('menu'), - role: 'menubar' - }, - ptm('menu') + [ + { + className: cx('menu'), + role: 'menubar' + }, + ptm('menu') + ], + { useTailwind: context.useTailwind } ); if (props.model) { @@ -638,10 +686,13 @@ export const MegaMenu = React.memo( const createStartContent = () => { const startProps = mergeProps( - { - className: cx('start') - }, - ptm('start') + [ + { + className: cx('start') + }, + ptm('start') + ], + { useTailwind: context.useTailwind } ); if (props.start) { @@ -655,10 +706,13 @@ export const MegaMenu = React.memo( const createEndContent = () => { const endProps = mergeProps( - { - className: cx('end') - }, - ptm('end') + [ + { + className: cx('end') + }, + ptm('end') + ], + { useTailwind: context.useTailwind } ); if (props.end) { @@ -676,17 +730,20 @@ export const MegaMenu = React.memo( } const menuButtonProps = mergeProps( - { - className: cx('menuButton'), - href: '#', - role: 'button', - tabIndex: 0, - onClick: (e) => toggle(e) - }, - ptm('menuButton') + [ + { + className: cx('menuButton'), + href: '#', + role: 'button', + tabIndex: 0, + onClick: (e) => toggle(e) + }, + ptm('menuButton') + ], + { useTailwind: context.useTailwind } ); - const menuButtonIconProps = mergeProps(ptm('menuButtonIcon')); + const menuButtonIconProps = mergeProps([ptm('menuButtonIcon')], { useTailwind: context.useTailwind }); const icon = props.menuIcon || ; const menuIcon = IconUtils.getJSXIcon(icon, { ...menuButtonIconProps }, { props }); @@ -702,12 +759,15 @@ export const MegaMenu = React.memo( }; const rootProps = mergeProps( - { - className: classNames(props.className, cx('root', { mobileActiveState })), - style: props.style - }, - MegaMenuBase.getOtherProps(props), - ptm('root') + [ + { + className: classNames(props.className, cx('root', { mobileActiveState })), + style: props.style + }, + MegaMenuBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const menu = createMenu(); diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js index 3fb21179ee..f9cd52bf63 100644 --- a/components/lib/mention/Mention.js +++ b/components/lib/mention/Mention.js @@ -375,12 +375,15 @@ export const Mention = React.memo( const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, { trigger: triggerState ? triggerState.key : '', index }) : formatValue(suggestion); const itemProps = mergeProps( - { - key: key, - className: cx('item'), - onClick: (e) => onItemClick(e, suggestion) - }, - getPTOptions(suggestion, 'item') + [ + { + key: key, + className: cx('item'), + onClick: (e) => onItemClick(e, suggestion) + }, + getPTOptions(suggestion, 'item') + ], + { useTailwind: context.useTailwind } ); return ( @@ -393,11 +396,14 @@ export const Mention = React.memo( const createList = () => { const itemsProps = mergeProps( - { - ref: listRef, - className: cx('items') - }, - ptm('items') + [ + { + ref: listRef, + className: cx('items') + }, + ptm('items') + ], + { useTailwind: context.useTailwind } ); if (props.suggestions) { @@ -415,32 +421,38 @@ export const Mention = React.memo( const list = createList(); const panelProps = mergeProps( - { - ref: overlayRef, - className: cx('panel'), - style: { - maxHeight: props.scrollHeight, - ...props.panelStyle + [ + { + ref: overlayRef, + className: cx('panel'), + style: { + maxHeight: props.scrollHeight, + ...props.panelStyle + }, + onClick: onPanelClick }, - onClick: onPanelClick - }, - ptm('panel') + ptm('panel') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: overlayVisibleState, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: onOverlayEnter, - onEntering: onOverlayEntering, - onEntered: onOverlayEntered, - onExit: onOverlayExit, - onExited: onOverlayExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: overlayVisibleState, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: onOverlayEnter, + onEntering: onOverlayEntering, + onEntered: onOverlayEntered, + onExit: onOverlayExit, + onExited: onOverlayExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); const panel = ( @@ -460,34 +472,40 @@ export const Mention = React.memo( const panel = createPanel(); const inputMentionProps = mergeProps( - { - ref: inputRef, - id: props.inputId, - className: cx('input'), - style: props.inputStyle, - ...inputProps, - onFocus: onFocus, - onBlur: onBlur, - onKeyDown: onKeyDown, - onInput: onInput, - onKeyUp: onKeyUp, - onChange: onChange, - __parentMetadata: { - parent: metaData - } - }, - ptm('input') + [ + { + ref: inputRef, + id: props.inputId, + className: cx('input'), + style: props.inputStyle, + ...inputProps, + onFocus: onFocus, + onBlur: onBlur, + onKeyDown: onKeyDown, + onInput: onInput, + onKeyUp: onKeyUp, + onChange: onChange, + __parentMetadata: { + parent: metaData + } + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); const rootProps = mergeProps( - { - ref: elementRef, - id: props.id, - className: cx('root', { focusedState, isFilled }), - style: props.style - }, - MentionBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + id: props.id, + className: cx('root', { focusedState, isFilled }), + style: props.style + }, + MentionBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index 8a81d6d5e4..5709832e4d 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -169,15 +169,18 @@ export const Menu = React.memo( const key = idState + '_sub_' + index; const items = submenu.items.map(createMenuItem); const submenuHeaderProps = mergeProps( - { - id: key, - key, - role: 'presentation', - className: classNames(submenu.className, cx('submenuHeader', { submenu })), - style: sx('submenuHeader', { submenu }), - 'data-p-disabled': submenu.disabled - }, - ptm('submenuHeader') + [ + { + id: key, + key, + role: 'presentation', + className: classNames(submenu.className, cx('submenuHeader', { submenu })), + style: sx('submenuHeader', { submenu }), + 'data-p-disabled': submenu.disabled + }, + ptm('submenuHeader') + ], + { useTailwind: context.useTailwind } ); return ( @@ -191,13 +194,16 @@ export const Menu = React.memo( const createSeparator = (index) => { const key = idState + '_separator_' + index; const separatorProps = mergeProps( - { - id: key, - key, - className: cx('separator'), - role: 'separator' - }, - ptm('separator') + [ + { + id: key, + key, + className: cx('separator'), + role: 'separator' + }, + ptm('separator') + ], + { useTailwind: context.useTailwind } ); return
  • ; @@ -211,34 +217,43 @@ export const Menu = React.memo( const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled }); const iconClassName = classNames('p-menuitem-icon', item.icon); const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props }); const labelProps = mergeProps( - { - className: cx('label') - }, - ptm('label') + [ + { + className: cx('label') + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); const label = item.label && {item.label}; const tabIndex = item.disabled ? null : 0; const key = item.id || idState + '_' + index; const actionProps = mergeProps( - { - href: item.url || '#', - className: cx('action', { item }), - role: 'menuitem', - target: item.target, - onClick: (event) => onItemClick(event, item), - onKeyDown: (event) => onItemKeyDown(event, item), - tabIndex: tabIndex, - 'aria-disabled': item.disabled, - 'data-p-disabled': item.disabled - }, - ptm('action') + [ + { + href: item.url || '#', + className: cx('action', { item }), + role: 'menuitem', + target: item.target, + onClick: (event) => onItemClick(event, item), + onKeyDown: (event) => onItemKeyDown(event, item), + tabIndex: tabIndex, + 'aria-disabled': item.disabled, + 'data-p-disabled': item.disabled + }, + ptm('action') + ], + { useTailwind: context.useTailwind } ); let content = ( @@ -264,15 +279,18 @@ export const Menu = React.memo( } const menuitemProps = mergeProps( - { - id: key, - key, - className: classNames(item.className, cx('menuitem')), - style: sx('menuitem', { item }), - role: 'none', - 'data-p-disabled': item.disabled || false - }, - ptm('menuitem') + [ + { + id: key, + key, + className: classNames(item.className, cx('menuitem')), + style: sx('menuitem', { item }), + role: 'none', + 'data-p-disabled': item.disabled || false + }, + ptm('menuitem') + ], + { useTailwind: context.useTailwind } ); return
  • {content}
    • ; @@ -290,36 +308,45 @@ export const Menu = React.memo( if (props.model) { const menuitems = createMenu(); const rootProps = mergeProps( - { - className: classNames(props.className, cx('root', { context })), - style: props.style, - onClick: (e) => onPanelClick(e) - }, - MenuBase.getOtherProps(props), - ptm('root') + [ + { + className: classNames(props.className, cx('root', { context })), + style: props.style, + onClick: (e) => onPanelClick(e) + }, + MenuBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const menuProps = mergeProps( - { - className: cx('menu'), - role: 'menu' - }, - ptm('menu') + [ + { + className: cx('menu'), + role: 'menu' + }, + ptm('menu') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: visibleState, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter, - onEntered, - onExit, - onExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: visibleState, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter, + onEntered, + onExit, + onExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js index 454a104600..4707c36abf 100644 --- a/components/lib/menubar/Menubar.js +++ b/components/lib/menubar/Menubar.js @@ -82,10 +82,13 @@ export const Menubar = React.memo( if (props.start) { const start = ObjectUtils.getJSXElement(props.start, props); const startProps = mergeProps( - { - className: cx('start') - }, - ptm('start') + [ + { + className: cx('start') + }, + ptm('start') + ], + { useTailwind: context.useTailwind } ); return
    {start}
    ; @@ -98,10 +101,13 @@ export const Menubar = React.memo( if (props.end) { const end = ObjectUtils.getJSXElement(props.end, props); const endProps = mergeProps( - { - className: cx('end') - }, - ptm('end') + [ + { + className: cx('end') + }, + ptm('end') + ], + { useTailwind: context.useTailwind } ); return
    {end}
    ; @@ -116,17 +122,20 @@ export const Menubar = React.memo( } const buttonProps = mergeProps( - { - ref: menuButtonRef, - href: '#', - role: 'button', - tabIndex: 0, - className: cx('button'), - onClick: (e) => toggle(e) - }, - ptm('button') + [ + { + ref: menuButtonRef, + href: '#', + role: 'button', + tabIndex: 0, + className: cx('button'), + onClick: (e) => toggle(e) + }, + ptm('button') + ], + { useTailwind: context.useTailwind } ); - const popupIconProps = mergeProps(ptm('popupIcon')); + const popupIconProps = mergeProps([ptm('popupIcon')], { useTailwind: context.useTailwind }); const icon = props.menuIcon || ; const menuIcon = IconUtils.getJSXIcon(icon, { ...popupIconProps }, { props }); @@ -142,13 +151,16 @@ export const Menubar = React.memo( const menuButton = createMenuButton(); const submenu = ; const rootProps = mergeProps( - { - id: props.id, - className: classNames(props.className, cx('root', { mobileActiveState })), - style: props.style - }, - MenubarBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + className: classNames(props.className, cx('root', { mobileActiveState })), + style: props.style + }, + MenubarBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js index 981b9456b8..6e90c799e4 100644 --- a/components/lib/menubar/MenubarSub.js +++ b/components/lib/menubar/MenubarSub.js @@ -3,10 +3,12 @@ import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hook import { AngleDownIcon } from '../icons/angledown'; import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; export const MenubarSub = React.memo( React.forwardRef((props, ref) => { + const context = React.useContext(PrimeReactContext); const [activeItemState, setActiveItemState] = React.useState(null); const { ptm, cx } = props; @@ -178,13 +180,16 @@ export const MenubarSub = React.memo( const createSeparator = (index) => { const key = props.id + '_separator_' + index; const separatorProps = mergeProps( - { - id: key, - key, - className: cx('separator'), - role: 'separator' - }, - ptm('separator', { hostName: props.hostName }) + [ + { + id: key, + key, + className: cx('separator'), + role: 'separator' + }, + ptm('separator', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return
  • ; @@ -221,25 +226,34 @@ export const MenubarSub = React.memo( const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled }); const iconClassName = classNames('p-menuitem-icon', item.icon); const iconProps = mergeProps( - { - className: cx('icon') - }, - getPTOptions(item, 'icon') + [ + { + className: cx('icon') + }, + getPTOptions(item, 'icon') + ], + { useTailwind: context.useTailwind } ); const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps }); const labelProps = mergeProps( - { - className: cx('label') - }, - getPTOptions(item, 'label') + [ + { + className: cx('label') + }, + getPTOptions(item, 'label') + ], + { useTailwind: context.useTailwind } ); const label = item.label && {item.label}; const submenuIconClassName = 'p-submenu-icon'; const submenuIconProps = mergeProps( - { - className: cx('submenuIcon') - }, - getPTOptions(item, 'submenuIcon') + [ + { + className: cx('submenuIcon') + }, + getPTOptions(item, 'submenuIcon') + ], + { useTailwind: context.useTailwind } ); const submenuIcon = item.items && @@ -250,16 +264,19 @@ export const MenubarSub = React.memo( ); const submenu = createSubmenu(item, index); const actionProps = mergeProps( - { - href: item.url || '#', - role: 'menuitem', - className: cx('action', { item }), - target: item.target, - 'aria-haspopup': item.items != null, - onClick: (event) => onItemClick(event, item), - onKeyDown: (event) => onItemKeyDown(event, item) - }, - getPTOptions(item, 'action') + [ + { + href: item.url || '#', + role: 'menuitem', + className: cx('action', { item }), + target: item.target, + 'aria-haspopup': item.items != null, + onClick: (event) => onItemClick(event, item), + onKeyDown: (event) => onItemKeyDown(event, item) + }, + getPTOptions(item, 'action') + ], + { useTailwind: context.useTailwind } ); let content = ( @@ -287,15 +304,18 @@ export const MenubarSub = React.memo( } const menuitemProps = mergeProps( - { - id: key, - key, - role: 'none', - className: classNames(item.className, cx('menuitem', { item, activeItemState })), - onMouseEnter: (event) => onItemMouseEnter(event, item), - 'data-p-disabled': item.disabled || false - }, - getPTOptions(item, 'menuitem') + [ + { + id: key, + key, + role: 'none', + className: classNames(item.className, cx('menuitem', { item, activeItemState })), + onMouseEnter: (event) => onItemMouseEnter(event, item), + 'data-p-disabled': item.disabled || false + }, + getPTOptions(item, 'menuitem') + ], + { useTailwind: context.useTailwind } ); return ( @@ -318,13 +338,16 @@ export const MenubarSub = React.memo( const ptKey = props.root ? 'menu' : 'submenu'; const submenu = createMenu(); const menuProps = mergeProps( - { - ref, - className: cx(ptKey), - style: !props.root && { display: props.parentActive ? 'block' : 'none' }, - role - }, - ptm(ptKey) + [ + { + ref, + className: cx(ptKey), + style: !props.root && { display: props.parentActive ? 'block' : 'none' }, + role + }, + ptm(ptKey) + ], + { useTailwind: context.useTailwind } ); return
      {submenu}
    ; diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js index 6830974abd..aa74ccb561 100644 --- a/components/lib/message/Message.js +++ b/components/lib/message/Message.js @@ -29,10 +29,13 @@ export const Message = React.memo( const text = ObjectUtils.getJSXElement(props.text, props); const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') + [ + { + className: cx('icon') + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); let icon = props.icon; @@ -59,10 +62,13 @@ export const Message = React.memo( const messageIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props }); const textProps = mergeProps( - { - className: cx('text') - }, - ptm('text') + [ + { + className: cx('text') + }, + ptm('text') + ], + { useTailwind: context.useTailwind } ); return ( @@ -81,14 +87,17 @@ export const Message = React.memo( const content = createContent(); const rootProps = mergeProps( - { - className: classNames(props.className, cx('root')), - style: props.style, - role: 'alert', - 'aria-live': 'polite' - }, - MessageBase.getOtherProps(props), - ptm('root') + [ + { + className: classNames(props.className, cx('root')), + style: props.style, + role: 'alert', + 'aria-live': 'polite' + }, + MessageBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js index 41e4874357..0408810788 100644 --- a/components/lib/messages/Messages.js +++ b/components/lib/messages/Messages.js @@ -92,23 +92,29 @@ export const Messages = React.memo( })); const rootProps = mergeProps( - { - id: props.id, - className: props.className, - style: props.style - }, - MessagesBase.getOtherProps(props), - ptCallbacks.ptm('root') + [ + { + id: props.id, + className: props.className, + style: props.style + }, + MessagesBase.getOtherProps(props), + ptCallbacks.ptm('root') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: ptCallbacks.cx('transition'), - unmountOnExit: true, - timeout: { enter: 300, exit: 300 }, - options: props.transitionOptions - }, - ptCallbacks.ptm('transition') + [ + { + classNames: ptCallbacks.cx('transition'), + unmountOnExit: true, + timeout: { enter: 300, exit: 300 }, + options: props.transitionOptions + }, + ptCallbacks.ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js index 9c58d3b004..4ac86996ba 100644 --- a/components/lib/messages/UIMessage.js +++ b/components/lib/messages/UIMessage.js @@ -7,10 +7,12 @@ import { InfoCircleIcon } from '../icons/infocircle'; import { TimesIcon } from '../icons/times'; import { TimesCircleIcon } from '../icons/timescircle'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { classNames, IconUtils, mergeProps } from '../utils/Utils'; export const UIMessage = React.memo( React.forwardRef((props, ref) => { + const context = React.useContext(PrimeReactContext); const { message: messageInfo, metaData: parentMetaData, @@ -54,26 +56,32 @@ export const UIMessage = React.memo( const ariaLabel = localeOption('close'); const buttonIconProps = mergeProps( - { - className: cx('uimessage.buttonicon'), - 'aria-hidden': true - }, - getPTOptions('buttonicon', parentParams), - ptmo(pt, 'buttonicon', { ...params, hostName: props.hostName }) + [ + { + className: cx('uimessage.buttonicon'), + 'aria-hidden': true + }, + getPTOptions('buttonicon', parentParams), + ptmo(pt, 'buttonicon', { ...params, hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const icon = _closeIcon || ; const closeIcon = IconUtils.getJSXIcon(icon, { ...buttonIconProps }, { props }); const buttonProps = mergeProps( - { - type: 'button', - className: cx('uimessage.button'), - 'aria-label': ariaLabel, - onClick: onClose - }, - getPTOptions('button', parentParams), - ptmo(pt, 'button', { ...params, hostName: props.hostName }) + [ + { + type: 'button', + className: cx('uimessage.button'), + 'aria-label': ariaLabel, + onClick: onClose + }, + getPTOptions('button', parentParams), + ptmo(pt, 'button', { ...params, hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -90,11 +98,14 @@ export const UIMessage = React.memo( const createMessage = () => { if (props.message) { const iconProps = mergeProps( - { - className: cx('uimessage.icon') - }, - getPTOptions('icon', parentParams), - ptmo(pt, 'icon', { ...params, hostName: props.hostName }) + [ + { + className: cx('uimessage.icon') + }, + getPTOptions('icon', parentParams), + ptmo(pt, 'icon', { ...params, hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); let icon = _icon; @@ -121,19 +132,25 @@ export const UIMessage = React.memo( const iconContent = IconUtils.getJSXIcon(icon, { ...iconProps }, { props }); const summaryProps = mergeProps( - { - className: cx('uimessage.summary') - }, - getPTOptions('summary', parentParams), - ptmo(pt, 'summary', { ...params, hostName: props.hostName }) + [ + { + className: cx('uimessage.summary') + }, + getPTOptions('summary', parentParams), + ptmo(pt, 'summary', { ...params, hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const detailProps = mergeProps( - { - className: cx('uimessage.detail') - }, - getPTOptions('detail', parentParams), - ptmo(pt, 'detail', { ...params, hostName: props.hostName }) + [ + { + className: cx('uimessage.detail') + }, + getPTOptions('detail', parentParams), + ptmo(pt, 'detail', { ...params, hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return ( @@ -154,23 +171,29 @@ export const UIMessage = React.memo( const message = createMessage(); const wrapperProps = mergeProps( - { - className: classNames(_contentClassName, cx('uimessage.wrapper')), - style: contentStyle - }, - getPTOptions('wrapper', parentParams), - ptmo(pt, 'wrapper', { ...params, hostName: props.hostName }) + [ + { + className: classNames(_contentClassName, cx('uimessage.wrapper')), + style: contentStyle + }, + getPTOptions('wrapper', parentParams), + ptmo(pt, 'wrapper', { ...params, hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const rootProps = mergeProps( - { - ref, - className: classNames(_className, cx('uimessage.root', { severity })), - style, - onClick - }, - getPTOptions('root', parentParams), - ptmo(pt, 'root', { ...params, hostName: props.hostName }) + [ + { + ref, + className: classNames(_className, cx('uimessage.root', { severity })), + style, + onClick + }, + getPTOptions('root', parentParams), + ptmo(pt, 'root', { ...params, hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index ee8135e809..7fc488270f 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -534,28 +534,37 @@ export const MultiSelect = React.memo( return value.map((val, i) => { const label = getLabelByValue(val); const iconProps = mergeProps( - { - key: i, - className: cx('removeTokenIcon'), - onClick: (e) => removeChip(e, val) - }, - ptm('removeTokenIcon') + [ + { + key: i, + className: cx('removeTokenIcon'), + onClick: (e) => removeChip(e, val) + }, + ptm('removeTokenIcon') + ], + { useTailwind: context.useTailwind } ); const icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, { ...iconProps }, { props }) : ); const tokenProps = mergeProps( - { - className: cx('token') - }, - ptm('token') + [ + { + className: cx('token') + }, + ptm('token') + ], + { useTailwind: context.useTailwind } ); const tokenLabelProps = mergeProps( - { - key: label + i, - className: cx('tokenLabel') - }, - ptm('tokenLabel') + [ + { + key: label + i, + className: cx('tokenLabel') + }, + ptm('tokenLabel') + ], + { useTailwind: context.useTailwind } ); return ( @@ -628,11 +637,14 @@ export const MultiSelect = React.memo( const createClearIcon = () => { const clearIconProps = mergeProps( - { - className: cx('clearIcon'), - onClick: (e) => updateModel(e, [], []) - }, - ptm('clearIcon') + [ + { + className: cx('clearIcon'), + onClick: (e) => updateModel(e, [], []) + }, + ptm('clearIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.clearIcon || ; @@ -649,18 +661,24 @@ export const MultiSelect = React.memo( const content = getLabelContent(); const labelContainerProps = mergeProps( - { - ref: labelRef, - className: cx('labelContainer') - }, - ptm('labelContainer') + [ + { + ref: labelRef, + className: cx('labelContainer') + }, + ptm('labelContainer') + ], + { useTailwind: context.useTailwind } ); const labelProps = mergeProps( - { - className: cx('label', { empty }) - }, - ptm('label') + [ + { + className: cx('label', { empty }) + }, + ptm('label') + ], + { useTailwind: context.useTailwind } ); return ( @@ -677,17 +695,23 @@ export const MultiSelect = React.memo( const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const triggerIconProps = mergeProps( - { - className: cx('triggerIcon') - }, - ptm('triggerIcon') + [ + { + className: cx('triggerIcon') + }, + ptm('triggerIcon') + ], + { useTailwind: context.useTailwind } ); const triggerProps = mergeProps( - { - className: cx('trigger') - }, - ptm('trigger') + [ + { + className: cx('trigger') + }, + ptm('trigger') + ], + { useTailwind: context.useTailwind } ); const dropdownIcon =
    {props.dropdownIcon ? IconUtils.getJSXIcon(props.dropdownIcon, { ...triggerIconProps }, { props }) : }
    ; @@ -695,41 +719,50 @@ export const MultiSelect = React.memo( const clearIcon = !props.inline && createClearIcon(); const rootProps = mergeProps( - { - ref: elementRef, - id: props.id, - style: { ...props.style, ...sx('root') }, - className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })), - ...otherProps, - onClick: onClick - }, - MultiSelectBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + id: props.id, + style: { ...props.style, ...sx('root') }, + className: classNames(props.className, cx('root', { focusedState, overlayVisibleState })), + ...otherProps, + onClick: onClick + }, + MultiSelectBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') + [ + { + className: 'p-hidden-accessible' + }, + ptm('hiddenInputWrapper') + ], + { useTailwind: context.useTailwind } ); const inputProps = mergeProps( - { - ref: inputRef, - id: props.inputId, - name: props.name, - type: 'text', - onFocus: onFocus, - onBlur: onBlur, - onKeyDown: onKeyDown, - role: 'listbox', - 'aria-expanded': overlayVisibleState, - disabled: props.disabled, - tabIndex: props.tabIndex, - ...ariaProps - }, - ptm('input') + [ + { + ref: inputRef, + id: props.inputId, + name: props.name, + type: 'text', + onFocus: onFocus, + onBlur: onBlur, + onKeyDown: onKeyDown, + role: 'listbox', + 'aria-expanded': overlayVisibleState, + disabled: props.disabled, + tabIndex: props.tabIndex, + ...ariaProps + }, + ptm('input') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js index 3921b27679..cbd8b533ba 100644 --- a/components/lib/multiselect/MultiSelectHeader.js +++ b/components/lib/multiselect/MultiSelectHeader.js @@ -6,10 +6,12 @@ import { SearchIcon } from '../icons/search'; import { TimesIcon } from '../icons/times'; import { InputText } from '../inputtext/InputText'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, ObjectUtils, UniqueComponentId, mergeProps } from '../utils/Utils'; export const MultiSelectHeader = React.memo((props) => { const { ptm, cx, isUnstyled } = props; + const context = React.useContext(PrimeReactContext); const filterOptions = { filter: (e) => onFilter(e), reset: () => props.resetFilter() @@ -45,10 +47,13 @@ export const MultiSelectHeader = React.memo((props) => { const createFilterElement = () => { const filterIconProps = mergeProps( - { - className: cx('filterIcon') - }, - getPTOptions('filterIcon') + [ + { + className: cx('filterIcon') + }, + getPTOptions('filterIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.filterIcon || ; @@ -56,10 +61,13 @@ export const MultiSelectHeader = React.memo((props) => { if (props.filter) { const filterContainerProps = mergeProps( - { - className: cx('filterContainer') - }, - getPTOptions('filterContainer') + [ + { + className: cx('filterContainer') + }, + getPTOptions('filterContainer') + ], + { useTailwind: context.useTailwind } ); let content = ( @@ -102,18 +110,24 @@ export const MultiSelectHeader = React.memo((props) => { const selectAllId = props.id ? props.id + '_selectall' : UniqueComponentId(); const headerSelectAllLabelProps = mergeProps( - { - htmlFor: selectAllId, - className: cx('headerSelectAllLabel') - }, - getPTOptions('headerSelectAllLabel') + [ + { + htmlFor: selectAllId, + className: cx('headerSelectAllLabel') + }, + getPTOptions('headerSelectAllLabel') + ], + { useTailwind: context.useTailwind } ); const headerCheckboxIconProps = mergeProps( - { - className: cx('headerCheckboxIcon') - }, - getPTOptions('headerCheckboxIcon') + [ + { + className: cx('headerCheckboxIcon') + }, + getPTOptions('headerCheckboxIcon') + ], + { useTailwind: context.useTailwind } ); const checkedIcon = props.itemCheckboxIcon || ; @@ -127,30 +141,39 @@ export const MultiSelectHeader = React.memo((props) => { ); const iconProps = mergeProps( - { - className: cx('closeIcon'), - 'aria-hidden': true - }, - getPTOptions('closeIcon') + [ + { + className: cx('closeIcon'), + 'aria-hidden': true + }, + getPTOptions('closeIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.closeIcon || ; const closeIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props }); const headerProps = mergeProps( - { - className: cx('header') - }, - getPTOptions('header') + [ + { + className: cx('header') + }, + getPTOptions('header') + ], + { useTailwind: context.useTailwind } ); const closeButtonProps = mergeProps( - { - type: 'button', - className: cx('closeButton'), - 'aria-label': localeOption('close'), - onClick: props.onClose - }, - getPTOptions('closeButton') + [ + { + type: 'button', + className: cx('closeButton'), + 'aria-label': localeOption('close'), + onClick: props.onClose + }, + getPTOptions('closeButton') + ], + { useTailwind: context.useTailwind } ); const closeElement = ( diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js index 44222435e1..0329e3ca41 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { CheckIcon } from '../icons/check'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; export const MultiSelectItem = React.memo((props) => { const { ptm, cx } = props; + const context = React.useContext(PrimeReactContext); const getPTOptions = (key) => { return ptm(key, { @@ -36,10 +38,13 @@ export const MultiSelectItem = React.memo((props) => { }; const checkboxIconProps = mergeProps( - { - className: cx('checkboxIcon') - }, - getPTOptions('checkboxIcon') + [ + { + className: cx('checkboxIcon') + }, + getPTOptions('checkboxIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.checkboxIcon || ; @@ -49,33 +54,42 @@ export const MultiSelectItem = React.memo((props) => { const tabIndex = props.disabled ? null : props.tabIndex || 0; const checkboxContainerProps = mergeProps( - { - className: cx('checkboxContainer') - }, - getPTOptions('checkboxContainer') + [ + { + className: cx('checkboxContainer') + }, + getPTOptions('checkboxContainer') + ], + { useTailwind: context.useTailwind } ); const checkboxProps = mergeProps( - { - className: cx('checkbox', { itemProps: props }), - 'data-p-highlight': props.selected - }, - getPTOptions('checkbox') + [ + { + className: cx('checkbox', { itemProps: props }), + 'data-p-highlight': props.selected + }, + getPTOptions('checkbox') + ], + { useTailwind: context.useTailwind } ); const itemProps = mergeProps( - { - className: classNames(props.className, props.option.className, cx('item', { itemProps: props })), - style: props.style, - onClick: onClick, - tabIndex: tabIndex, - onKeyDown: onKeyDown, - role: 'option', - 'aria-selected': props.selected, - 'data-p-highlight': props.selected, - 'data-p-disabled': props.disabled - }, - getPTOptions('item') + [ + { + className: classNames(props.className, props.option.className, cx('item', { itemProps: props })), + style: props.style, + onClick: onClick, + tabIndex: tabIndex, + onKeyDown: onKeyDown, + role: 'option', + 'aria-selected': props.selected, + 'data-p-highlight': props.selected, + 'data-p-disabled': props.disabled + }, + getPTOptions('item') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 36275b17fa..67ac2818d3 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -128,10 +128,13 @@ export const MultiSelectPanel = React.memo( const emptyFilterMessage = ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || localeOption('emptyFilterMessage'); const emptyMessageProps = mergeProps( - { - className: cx('emptyMessage') - }, - getPTOptions('emptyMessage') + [ + { + className: cx('emptyMessage') + }, + getPTOptions('emptyMessage') + ], + { useTailwind: context.useTailwind } ); return
  • {emptyFilterMessage}
    • ; @@ -141,10 +144,13 @@ export const MultiSelectPanel = React.memo( const emptyMessage = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage'); const emptyMessageProps = mergeProps( - { - className: cx('emptyMessage') - }, - getPTOptions('emptyMessage') + [ + { + className: cx('emptyMessage') + }, + getPTOptions('emptyMessage') + ], + { useTailwind: context.useTailwind } ); return
  • {emptyMessage}
    • ; @@ -158,11 +164,14 @@ export const MultiSelectPanel = React.memo( const groupChildrenContent = createGroupChildren(option, style); const key = index + '_' + props.getOptionGroupRenderKey(option); const itemGroupProps = mergeProps( - { - className: cx('itemGroup'), - style: sx('itemGroup', { scrollerOptions }) - }, - getPTOptions('itemGroup') + [ + { + className: cx('itemGroup'), + style: sx('itemGroup', { scrollerOptions }) + }, + getPTOptions('itemGroup') + ], + { useTailwind: context.useTailwind } ); return ( @@ -223,14 +232,17 @@ export const MultiSelectPanel = React.memo( const content = isEmptyFilter() ? createEmptyFilter() : options.children; const listProps = mergeProps( - { - ref: options.contentRef, - style: options.style, - className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })), - role: 'listbox', - 'aria-multiselectable': true - }, - getPTOptions('list') + [ + { + ref: options.contentRef, + style: options.style, + className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })), + role: 'listbox', + 'aria-multiselectable': true + }, + getPTOptions('list') + ], + { useTailwind: context.useTailwind } ); return
      {content}
    ; @@ -243,20 +255,26 @@ export const MultiSelectPanel = React.memo( const items = createItems(); const wrapperProps = mergeProps( - { - className: cx('wrapper'), - style: { maxHeight: props.scrollHeight } - }, - getPTOptions('wrapper') + [ + { + className: cx('wrapper'), + style: { maxHeight: props.scrollHeight } + }, + getPTOptions('wrapper') + ], + { useTailwind: context.useTailwind } ); const listProps = mergeProps( - { - className: cx('list'), - role: 'listbox', - 'aria-multiselectable': true - }, - getPTOptions('list') + [ + { + className: cx('list'), + role: 'listbox', + 'aria-multiselectable': true + }, + getPTOptions('list') + ], + { useTailwind: context.useTailwind } ); return ( @@ -274,12 +292,15 @@ export const MultiSelectPanel = React.memo( const footer = createFooter(); const panelProps = mergeProps( - { - className: classNames(props.panelClassName, cx('panel', { panelProps: props, context, allowOptionSelect })), - style: props.panelStyle, - onClick: props.onClick - }, - getPTOptions('panel') + [ + { + className: classNames(props.panelClassName, cx('panel', { panelProps: props, context, allowOptionSelect })), + style: props.panelStyle, + onClick: props.onClick + }, + getPTOptions('panel') + ], + { useTailwind: context.useTailwind } ); if (props.inline) { @@ -292,18 +313,21 @@ export const MultiSelectPanel = React.memo( } const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: props.in, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter, - onEntered, - onExit: props.onExit, - onExited: props.onExited - }, - getPTOptions('transition') + [ + { + classNames: cx('transition'), + in: props.in, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter, + onEntered, + onExit: props.onExit, + onExited: props.onExited + }, + getPTOptions('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js index 37b107e258..ac6af44189 100644 --- a/components/lib/multistatecheckbox/MultiStateCheckbox.js +++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js @@ -122,10 +122,13 @@ export const MultiStateCheckbox = React.memo( [`${icon}`]: true }); const iconProps = mergeProps( - { - className: cx('icon', { icon }) - }, - ptm('icon') + [ + { + className: cx('icon', { icon }) + }, + ptm('icon') + ], + { useTailwind: context.useTailwind } ); const content = IconUtils.getJSXIcon(icon, { ...iconProps }, { props }); @@ -154,38 +157,47 @@ export const MultiStateCheckbox = React.memo( const ariaChecked = !!selectedOption ? 'true' : 'false'; const rootProps = mergeProps( - { - ref: elementRef, - id: props.id, - className: cx('root'), - style: props.style, - onClick: onClick - }, - MultiStateCheckboxBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + id: props.id, + className: cx('root'), + style: props.style, + onClick: onClick + }, + MultiStateCheckboxBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const checkboxProps = mergeProps( - { - className: cx('checkbox', { focusedState, selectedOption }), - style: sx('checkbox', { selectedOption }), - tabIndex: props.tabIndex, - onFocus: onFocus, - onBlur: onBlur, - onKeyDown: onKeyDown, - role: 'checkbox', - 'aria-checked': ariaChecked, - ...ariaProps - }, - ptm('checkbox') + [ + { + className: cx('checkbox', { focusedState, selectedOption }), + style: sx('checkbox', { selectedOption }), + tabIndex: props.tabIndex, + onFocus: onFocus, + onBlur: onBlur, + onKeyDown: onKeyDown, + role: 'checkbox', + 'aria-checked': ariaChecked, + ...ariaProps + }, + ptm('checkbox') + ], + { useTailwind: context.useTailwind } ); const srOnlyAriaProps = mergeProps( - { - className: 'p-sr-only p-hidden-accessible', - 'aria-live': 'polite' - }, - ptm('srOnlyAria') + [ + { + className: 'p-sr-only p-hidden-accessible', + 'aria-live': 'polite' + }, + ptm('srOnlyAria') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js index 77530d769d..eabaa1a8df 100644 --- a/components/lib/orderlist/OrderList.js +++ b/components/lib/orderlist/OrderList.js @@ -233,14 +233,17 @@ export const OrderList = React.memo( const visibleList = getVisibleList(); const rootProps = mergeProps( - { - ref: elementRef, - id: props.id, - className: classNames(props.className, cx('root')), - style: props.style - }, - OrderListBase.getOtherProps(props), - ptm('root') + [ + { + ref: elementRef, + id: props.id, + className: classNames(props.className, cx('root')), + style: props.style + }, + OrderListBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js index fa4b4cbb69..1c0a4eb2bd 100644 --- a/components/lib/orderlist/OrderListControls.js +++ b/components/lib/orderlist/OrderListControls.js @@ -5,9 +5,11 @@ import { AngleDoubleDownIcon } from '../icons/angledoubledown'; import { AngleDoubleUpIcon } from '../icons/angledoubleup'; import { AngleDownIcon } from '../icons/angledown'; import { AngleUpIcon } from '../icons/angleup'; +import { PrimeReactContext } from '../api/Api'; import { ObjectUtils, mergeProps } from '../utils/Utils'; export const OrderListControls = React.memo((props) => { + const context = React.useContext(PrimeReactContext); const moveUpIcon = props.moveUpIcon || ; const moveTopIcon = props.moveTopIcon || ; const moveDownIcon = props.moveDownIcon || ; @@ -127,66 +129,81 @@ export const OrderListControls = React.memo((props) => { }; const controlsProps = mergeProps( - { - className: cx('controls') - }, - ptm('controls', { hostName: props.hostName }) + [ + { + className: cx('controls') + }, + ptm('controls', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const moveUpButtonProps = mergeProps( - { - type: 'button', - unstyled: unstyled, - icon: moveUpIcon, - onClick: moveUp, - 'aria-label': ariaLabel('moveUp'), - __parentMetadata: { - parent: props.metaData - } - }, - ptm('moveUpButton') + [ + { + type: 'button', + unstyled: unstyled, + icon: moveUpIcon, + onClick: moveUp, + 'aria-label': ariaLabel('moveUp'), + __parentMetadata: { + parent: props.metaData + } + }, + ptm('moveUpButton') + ], + { useTailwind: context.useTailwind } ); const moveTopButtonProps = mergeProps( - { - type: 'button', - unstyled: unstyled, - icon: moveTopIcon, - onClick: moveTop, - 'aria-label': ariaLabel('moveTop'), - __parentMetadata: { - parent: props.metaData - } - }, - ptm('moveTopButton') + [ + { + type: 'button', + unstyled: unstyled, + icon: moveTopIcon, + onClick: moveTop, + 'aria-label': ariaLabel('moveTop'), + __parentMetadata: { + parent: props.metaData + } + }, + ptm('moveTopButton') + ], + { useTailwind: context.useTailwind } ); const moveDownButtonProps = mergeProps( - { - type: 'button', - unstyled: unstyled, - icon: moveDownIcon, - onClick: moveDown, - 'aria-label': ariaLabel('moveDown'), - __parentMetadata: { - parent: props.metaData - } - }, - ptm('moveDownButton') + [ + { + type: 'button', + unstyled: unstyled, + icon: moveDownIcon, + onClick: moveDown, + 'aria-label': ariaLabel('moveDown'), + __parentMetadata: { + parent: props.metaData + } + }, + ptm('moveDownButton') + ], + { useTailwind: context.useTailwind } ); const moveBottomButtonProps = mergeProps( - { - type: 'button', - unstyled: unstyled, - icon: moveBottomIcon, - onClick: moveBottom, - 'aria-label': ariaLabel('moveBottom'), - __parentMetadata: { - parent: props.metaData - } - }, - ptm('moveBottomButton') + [ + { + type: 'button', + unstyled: unstyled, + icon: moveBottomIcon, + onClick: moveBottom, + 'aria-label': ariaLabel('moveBottom'), + __parentMetadata: { + parent: props.metaData + } + }, + ptm('moveBottomButton') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js index 4350d75a31..1e7f22edc8 100644 --- a/components/lib/orderlist/OrderListSubList.js +++ b/components/lib/orderlist/OrderListSubList.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { SearchIcon } from '../icons/search'; import { Ripple } from '../ripple/Ripple'; +import { PrimeReactContext } from '../api/Api'; import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; export const OrderListSubList = React.memo((props) => { const { ptm, cx } = props; + const context = React.useContext(PrimeReactContext); const _ptm = (key, options) => { return ptm(key, { @@ -96,13 +98,16 @@ export const OrderListSubList = React.memo((props) => { const createDropPoint = (index, key) => { const droppointProps = mergeProps( - { - className: cx('droppoint'), - onDragOver: (e) => onDragOver(e, index + 1), - onDragLeave: onDragLeave, - onDrop: onDrop - }, - _ptm('droppoint') + [ + { + className: cx('droppoint'), + onDragOver: (e) => onDragOver(e, index + 1), + onDragLeave: onDragLeave, + onDrop: onDrop + }, + _ptm('droppoint') + ], + { useTailwind: context.useTailwind } ); return
  • ; @@ -110,10 +115,13 @@ export const OrderListSubList = React.memo((props) => { const createHeader = () => { const headerProps = mergeProps( - { - className: cx('header') - }, - _ptm('header') + [ + { + className: cx('header') + }, + _ptm('header') + ], + { useTailwind: context.useTailwind } ); return props.header ?
    {props.header}
    : null; @@ -127,19 +135,22 @@ export const OrderListSubList = React.memo((props) => { if (props.dragdrop) { const itemProps = mergeProps( - { - 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), - draggable: 'true', - onDragStart: (e) => onDragStart(e, i), - onDragEnd: onDragEnd, - tabIndex: props.tabIndex, - 'data-p-highlight': isSelected(item) - }, - getPTOptions(item, 'item') + [ + { + 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), + draggable: 'true', + onDragStart: (e) => onDragStart(e, i), + onDragEnd: onDragEnd, + tabIndex: props.tabIndex, + 'data-p-highlight': isSelected(item) + }, + getPTOptions(item, 'item') + ], + { useTailwind: context.useTailwind } ); let items = []; @@ -160,16 +171,19 @@ export const OrderListSubList = React.memo((props) => { return items; } 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 }), - 'aria-selected': isSelected(item), - 'data-p-highlight': isSelected(item) - }, - getPTOptions(item, 'item') + [ + { + 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 }), + 'aria-selected': isSelected(item), + 'data-p-highlight': isSelected(item) + }, + getPTOptions(item, 'item') + ], + { useTailwind: context.useTailwind } ); return ( @@ -188,15 +202,18 @@ export const OrderListSubList = React.memo((props) => { const createList = () => { const items = createItems(); const listProps = mergeProps( - { - ref: listElementRef, - className: cx('list'), - style: props.listStyle, - onDragOver: onListMouseMove, - role: 'listbox', - 'aria-multiselectable': true - }, - _ptm('list') + [ + { + ref: listElementRef, + className: cx('list'), + style: props.listStyle, + onDragOver: onListMouseMove, + role: 'listbox', + 'aria-multiselectable': true + }, + _ptm('list') + ], + { useTailwind: context.useTailwind } ); return
      {items}
    ; @@ -204,39 +221,51 @@ export const OrderListSubList = React.memo((props) => { const createFilter = () => { const searchIconProps = mergeProps( - { - className: cx('icon') - }, - _ptm('icon') + [ + { + className: cx('icon') + }, + _ptm('icon') + ], + { useTailwind: context.useTailwind } ); const icon = props.filterIcon || ; const filterIcon = IconUtils.getJSXIcon(icon, { ...searchIconProps }, { props }); if (props.filter) { const filterProps = mergeProps( - { - className: cx('filter') - }, - _ptm('filter') + [ + { + className: cx('filter') + }, + _ptm('filter') + ], + { useTailwind: context.useTailwind } ); const filterInputProps = mergeProps( - { - type: 'text', - value: props.filterValue, - onChange: props.onFilter, - onKeyDown: onFilterInputKeyDown, - placeholder: props.placeholder, - className: cx('filterInput') - }, - _ptm('filterInput') + [ + { + type: 'text', + value: props.filterValue, + onChange: props.onFilter, + onKeyDown: onFilterInputKeyDown, + placeholder: props.placeholder, + className: cx('filterInput') + }, + _ptm('filterInput') + ], + { useTailwind: context.useTailwind } ); const filterIconProps = mergeProps( - { - className: cx('filterIcon') - }, - _ptm('filterIcon') + [ + { + className: cx('filterIcon') + }, + _ptm('filterIcon') + ], + { useTailwind: context.useTailwind } ); let content = ( @@ -264,10 +293,13 @@ export const OrderListSubList = React.memo((props) => { } const filterContainerProps = mergeProps( - { - className: cx('filterContainer') - }, - _ptm('filterContainer') + [ + { + className: cx('filterContainer') + }, + _ptm('filterContainer') + ], + { useTailwind: context.useTailwind } ); return
    {content}
    ; @@ -281,10 +313,13 @@ export const OrderListSubList = React.memo((props) => { const list = createList(); const containerProps = mergeProps( - { - className: cx('container') - }, - _ptm('container') + [ + { + className: cx('container') + }, + _ptm('container') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js index 1489bf2eb6..2706dd9ada 100644 --- a/components/lib/organizationchart/OrganizationChart.js +++ b/components/lib/organizationchart/OrganizationChart.js @@ -75,14 +75,17 @@ export const OrganizationChart = React.memo( })); const rootProps = mergeProps( - { - id: props.id, - ref: elementRef, - style: props.style, - className: classNames(props.className, cx('root')) - }, - OrganizationChartBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + ref: elementRef, + style: props.style, + className: classNames(props.className, cx('root')) + }, + OrganizationChartBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/organizationchart/OrganizationChartNode.js b/components/lib/organizationchart/OrganizationChartNode.js index 823011e7a0..bfdf75eb8b 100644 --- a/components/lib/organizationchart/OrganizationChartNode.js +++ b/components/lib/organizationchart/OrganizationChartNode.js @@ -1,6 +1,7 @@ import * as React from 'react'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronUpIcon } from '../icons/chevronup'; +import { PrimeReactContext } from '../api/Api'; import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; export const OrganizationChartNode = React.memo((props) => { @@ -11,6 +12,7 @@ export const OrganizationChartNode = React.memo((props) => { const selected = props.isSelected(node); const visibility = !leaf && expandedState ? 'inherit' : 'hidden'; const { ptm, cx, sx } = props; + const context = React.useContext(PrimeReactContext); const _ptm = (key, options) => { return ptm(key, { @@ -49,17 +51,23 @@ export const OrganizationChartNode = React.memo((props) => { const createChildNodes = () => { const nodesProps = mergeProps( - { - className: cx('nodes'), - style: { visibility } - }, - _ptm('nodes') + [ + { + className: cx('nodes'), + style: { visibility } + }, + _ptm('nodes') + ], + { useTailwind: context.useTailwind } ); const nodeCellProps = mergeProps( - { - colSpan: '2' - }, - _ptm('nodeCell') + [ + { + colSpan: '2' + }, + _ptm('nodeCell') + ], + { useTailwind: context.useTailwind } ); return ( @@ -89,23 +97,32 @@ export const OrganizationChartNode = React.memo((props) => { const createLinesMiddle = () => { const nodeChildLength = node.children && node.children.length; const linesProps = mergeProps( - { - className: cx('lines'), - style: { visibility } - }, - _ptm('lines') + [ + { + className: cx('lines'), + style: { visibility } + }, + _ptm('lines') + ], + { useTailwind: context.useTailwind } ); const lineCellProps = mergeProps( - { - colSpan: colspan - }, - _ptm('lineCell') + [ + { + colSpan: colspan + }, + _ptm('lineCell') + ], + { useTailwind: context.useTailwind } ); const lineDownProps = mergeProps( - { - className: cx('lineDown') - }, - _ptm('lineDown') + [ + { + className: cx('lineDown') + }, + _ptm('lineDown') + ], + { useTailwind: context.useTailwind } ); return ( @@ -119,16 +136,22 @@ export const OrganizationChartNode = React.memo((props) => { node.children.length > 1 && node.children.map((_, index) => { const lineLeftProps = mergeProps( - { - className: cx('lineLeft', { index }) - }, - getNodePTOptions(index !== 0, 'lineLeft') + [ + { + className: cx('lineLeft', { index }) + }, + getNodePTOptions(index !== 0, 'lineLeft') + ], + { useTailwind: context.useTailwind } ); const lineRightProps = mergeProps( - { - className: cx('lineRight', { index, nodeChildLength }) - }, - getNodePTOptions(index !== nodeChildLength - 1, 'lineRight') + [ + { + className: cx('lineRight', { index, nodeChildLength }) + }, + getNodePTOptions(index !== nodeChildLength - 1, 'lineRight') + ], + { useTailwind: context.useTailwind } ); return [ @@ -146,25 +169,34 @@ export const OrganizationChartNode = React.memo((props) => { const createLinesDown = () => { const linesProps = mergeProps( - { - className: cx('lines'), - style: { visibility } - }, - _ptm('lines') + [ + { + className: cx('lines'), + style: { visibility } + }, + _ptm('lines') + ], + { useTailwind: context.useTailwind } ); const lineCellProps = mergeProps( - { - colSpan: colspan - }, - _ptm('lineCell') + [ + { + colSpan: colspan + }, + _ptm('lineCell') + ], + { useTailwind: context.useTailwind } ); const lineDownProps = mergeProps( - { - className: cx('lineDown') - }, - _ptm('lineDown') + [ + { + className: cx('lineDown') + }, + _ptm('lineDown') + ], + { useTailwind: context.useTailwind } ); return ( @@ -179,10 +211,13 @@ export const OrganizationChartNode = React.memo((props) => { const createToggler = () => { if (!leaf) { const nodeTogglerIconProps = mergeProps( - { - className: cx('nodeTogglerIcon') - }, - _ptm('nodeTogglerIcon') + [ + { + className: cx('nodeTogglerIcon') + }, + _ptm('nodeTogglerIcon') + ], + { useTailwind: context.useTailwind } ); let icon; @@ -196,12 +231,15 @@ export const OrganizationChartNode = React.memo((props) => { const togglerIcon = IconUtils.getJSXIcon(icon, { ...nodeTogglerIconProps }, { props }); const nodeTogglerProps = mergeProps( - { - className: cx('nodeToggler'), - onClick: (e) => toggleNode(e, node), - href: '#' - }, - getPTOptions('nodeToggler') + [ + { + className: cx('nodeToggler'), + onClick: (e) => toggleNode(e, node), + href: '#' + }, + getPTOptions('nodeToggler') + ], + { useTailwind: context.useTailwind } ); return ( @@ -227,22 +265,28 @@ export const OrganizationChartNode = React.memo((props) => { const toggler = createToggler(); const cellProps = mergeProps( - { - colSpan: colspan - }, - _ptm('cell') + [ + { + colSpan: colspan + }, + _ptm('cell') + ], + { useTailwind: context.useTailwind } ); const nodeProps = mergeProps( - { - className: cx('node', { selected, node, nodeProps: props }), - style: node.style, - onClick: (e) => onNodeClick(e, node) - }, - getPTOptions('node') + [ + { + className: cx('node', { selected, node, nodeProps: props }), + style: node.style, + onClick: (e) => onNodeClick(e, node) + }, + getPTOptions('node') + ], + { useTailwind: context.useTailwind } ); - const rowProps = mergeProps(_ptm('row')); + const rowProps = mergeProps([_ptm('row')], { useTailwind: context.useTailwind }); return ( @@ -262,10 +306,13 @@ export const OrganizationChartNode = React.memo((props) => { const childNodes = createChildNodes(); const tableProps = mergeProps( - { - className: cx('table') - }, - _ptm('table') + [ + { + className: cx('table') + }, + _ptm('table') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js index 7cd7756f4a..159b3cba55 100644 --- a/components/lib/overlaypanel/OverlayPanel.js +++ b/components/lib/overlaypanel/OverlayPanel.js @@ -221,23 +221,29 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { const createCloseIcon = () => { const closeIconProps = mergeProps( - { - className: cx('closeIcon'), - 'aria-hidden': true - }, - ptm('closeIcon') + [ + { + className: cx('closeIcon'), + 'aria-hidden': true + }, + ptm('closeIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.closeIcon || ; const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props }); const ariaLabel = props.ariaCloseLabel || localeOption('close'); const closeButtonProps = mergeProps( - { - type: 'button', - className: cx('closeButton'), - onClick: (e) => onCloseClick(e), - 'aria-label': ariaLabel - }, - ptm('closeButton') + [ + { + type: 'button', + className: cx('closeButton'), + onClick: (e) => onCloseClick(e), + 'aria-label': ariaLabel + }, + ptm('closeButton') + ], + { useTailwind: context.useTailwind } ); if (props.showCloseIcon) { @@ -255,39 +261,48 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { const createElement = () => { const closeIcon = createCloseIcon(); const rootProps = mergeProps( - { - id: props.id, - className: cx('root', { context }), - style: props.style, - onClick: (e) => onPanelClick(e) - }, - OverlayPanelBase.getOtherProps(props), - ptm('root') + [ + { + id: props.id, + className: cx('root', { context }), + style: props.style, + onClick: (e) => onPanelClick(e) + }, + OverlayPanelBase.getOtherProps(props), + ptm('root') + ], + { useTailwind: context.useTailwind } ); const contentProps = mergeProps( - { - className: cx('content'), - onClick: (e) => onContentClick(e), - onMouseDown: onContentClick - }, - OverlayPanelBase.getOtherProps(props), - ptm('content') + [ + { + className: cx('content'), + onClick: (e) => onContentClick(e), + onMouseDown: onContentClick + }, + OverlayPanelBase.getOtherProps(props), + ptm('content') + ], + { useTailwind: context.useTailwind } ); const transitionProps = mergeProps( - { - classNames: cx('transition'), - in: visibleState, - timeout: { enter: 120, exit: 100 }, - options: props.transitionOptions, - unmountOnExit: true, - onEnter: onEnter, - onEntered: onEntered, - onExit: onExit, - onExited: onExited - }, - ptm('transition') + [ + { + classNames: cx('transition'), + in: visibleState, + timeout: { enter: 120, exit: 100 }, + options: props.transitionOptions, + unmountOnExit: true, + onEnter: onEnter, + onEntered: onEntered, + onExit: onExit, + onExited: onExited + }, + ptm('transition') + ], + { useTailwind: context.useTailwind } ); return ( diff --git a/components/lib/paginator/CurrentPageReport.js b/components/lib/paginator/CurrentPageReport.js index 798ccb4856..147d97a52e 100644 --- a/components/lib/paginator/CurrentPageReport.js +++ b/components/lib/paginator/CurrentPageReport.js @@ -25,10 +25,13 @@ export const CurrentPageReport = React.memo((inProps) => { .replace('{totalRecords}', report.totalRecords); const currentProps = mergeProps( - { - className: 'p-paginator-current' - }, - props.ptm('current', { hostName: props.hostName }) + [ + { + className: 'p-paginator-current' + }, + props.ptm('current', { hostName: props.hostName }) + ], + { useTailwind: context.useTailwind } ); const element = {text}; diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js index 3c6df867a8..0e15e785dc 100644 --- a/components/lib/paginator/FirstPageLink.js +++ b/components/lib/paginator/FirstPageLink.js @@ -23,22 +23,28 @@ export const FirstPageLink = React.memo((inProps) => { const className = classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': props.disabled }); const iconClassName = 'p-paginator-icon'; const firstPageIconProps = mergeProps( - { - className: cx('firstPageIcon') - }, - getPTOptions('firstPageIcon') + [ + { + className: cx('firstPageIcon') + }, + getPTOptions('firstPageIcon') + ], + { useTailwind: context.useTailwind } ); const icon = props.firstPageLinkIcon || ; const firstPageLinkIcon = IconUtils.getJSXIcon(icon, { ...firstPageIconProps }, { props }); const firstPageButtonProps = mergeProps( - { - type: 'button', - className: cx('firstPageButton', { disabled: props.disabled }), - onClick: props.onClick, - disabled: props.disabled, - 'aria-label': ariaLabel('firstPageLabel') - }, - getPTOptions('firstPageButton') + [ + { + type: 'button', + className: cx('firstPageButton', { disabled: props.disabled }), + onClick: props.onClick, + disabled: props.disabled, + 'aria-label': ariaLabel('firstPageLabel') + }, + getPTOptions('firstPageButton') + ], + { useTailwind: context.useTailwind } ); const element = (