diff --git a/components/doc/passthrough/usepassthroughdoc.js b/components/doc/passthrough/usepassthroughdoc.js index 989e03c5f8..555efc9c91 100644 --- a/components/doc/passthrough/usepassthroughdoc.js +++ b/components/doc/passthrough/usepassthroughdoc.js @@ -114,6 +114,10 @@ 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.

+

+ Some CSS libraries, such as Tailwind, require that class names be merged in a non-conflicting manner. In order to support them a classNameMergeFunction may be passed as part of the ptOptions object to manually + define how class names will be merged. +

diff --git a/components/doc/tailwind/unstyledmode/setupdoc.js b/components/doc/tailwind/unstyledmode/setupdoc.js index 937137ba40..a297019ba3 100644 --- a/components/doc/tailwind/unstyledmode/setupdoc.js +++ b/components/doc/tailwind/unstyledmode/setupdoc.js @@ -38,6 +38,21 @@ return( const code3 = { basic: ` import { PrimeReactProvider } from "primereact/api"; +import { twMerge } from 'tailwind-merge'; + +... +return( + + + +) + +` + }; + + const code4 = { + basic: ` +import { PrimeReactProvider } from "primereact/api"; export default function MyApp({ Component, pageProps }) { @@ -124,12 +139,20 @@ export default function MyApp({ Component, pageProps }) {

+ + Optional: specify the classNameMergeFunction as twMerge 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 6572df2596..9f5eec7ab8 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -2,15 +2,16 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { AccordionBase, AccordionTabBase } from './AccordionBase'; export const AccordionTab = () => {}; export const Accordion = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = AccordionBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index 0a1cdaef12..a5d41e56b8 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -2,19 +2,20 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { SpinnerIcon } from '../icons/spinner'; import { TimesCircleIcon } from '../icons/timescircle'; import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { AutoCompleteBase } from './AutoCompleteBase'; import { AutoCompletePanel } from './AutoCompletePanel'; export const AutoComplete = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = AutoCompleteBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js index d7b9170895..3f96d6f383 100644 --- a/components/lib/autocomplete/AutoCompletePanel.js +++ b/components/lib/autocomplete/AutoCompletePanel.js @@ -1,13 +1,15 @@ import * as React from 'react'; import { localeOption, PrimeReactContext } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; export const AutoCompletePanel = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const { ptm, cx } = props; const context = React.useContext(PrimeReactContext); diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js index 10703d22dd..8b5c3b63b5 100644 --- a/components/lib/avatar/Avatar.js +++ b/components/lib/avatar/Avatar.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { AvatarBase } from './AvatarBase'; export const Avatar = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = AvatarBase.getProps(inProps, context); diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js index a714d0de05..995b30072e 100644 --- a/components/lib/avatargroup/AvatarGroup.js +++ b/components/lib/avatargroup/AvatarGroup.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { AvatarGroupBase } from './AvatarGroupBase'; export const AvatarGroup = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = AvatarGroupBase.getProps(inProps, context); diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js index 27cfa02f50..736a91f7bd 100644 --- a/components/lib/badge/Badge.js +++ b/components/lib/badge/Badge.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { BadgeBase } from './BadgeBase'; export const Badge = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = BadgeBase.getProps(inProps, context); diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js index 589157e4f8..3017dc1c07 100644 --- a/components/lib/blockui/BlockUI.js +++ b/components/lib/blockui/BlockUI.js @@ -1,12 +1,13 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { BlockUIBase } from './BlockUIBase'; export const BlockUI = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = BlockUIBase.getProps(inProps, context); diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index cb36a70e4c..d13e5b8b42 100644 --- a/components/lib/breadcrumb/BreadCrumb.js +++ b/components/lib/breadcrumb/BreadCrumb.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { ChevronRightIcon } from '../icons/chevronright'; -import { IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils'; +import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { BreadCrumbBase } from './BreadCrumbBase'; export const BreadCrumb = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = BreadCrumbBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js index 79147c129d..0c34e43e69 100644 --- a/components/lib/button/Button.js +++ b/components/lib/button/Button.js @@ -2,14 +2,16 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { Badge } from '../badge/Badge'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { SpinnerIcon } from '../icons/spinner'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; -import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { ButtonBase } from './ButtonBase'; export const Button = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ButtonBase.getProps(inProps, context); const disabled = props.disabled || props.loading; diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 148fe65aa0..d06e23d557 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption, localeOptions } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { CalendarIcon } from '../icons/calendar'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronLeftIcon } from '../icons/chevronleft'; @@ -11,12 +11,13 @@ import { ChevronUpIcon } from '../icons/chevronup'; import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask } from '../utils/Utils'; import { CalendarBase } from './CalendarBase'; import { CalendarPanel } from './CalendarPanel'; export const Calendar = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = CalendarBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); diff --git a/components/lib/calendar/CalendarPanel.js b/components/lib/calendar/CalendarPanel.js index ff3759a6ae..f969242a44 100644 --- a/components/lib/calendar/CalendarPanel.js +++ b/components/lib/calendar/CalendarPanel.js @@ -1,10 +1,11 @@ import * as React from 'react'; import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { mergeProps } from '../utils/Utils'; export const CalendarPanel = React.forwardRef((props, ref) => { const cx = props.cx; + const mergeProps = useMergeProps(); const createElement = () => { const panelProps = mergeProps( diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js index 38a869f7dd..5762d3da0e 100644 --- a/components/lib/card/Card.js +++ b/components/lib/card/Card.js @@ -1,10 +1,12 @@ import * as React from 'react'; -import { ObjectUtils, mergeProps } from '../utils/Utils'; -import { CardBase } from './CardBase'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; +import { ObjectUtils } from '../utils/Utils'; +import { CardBase } from './CardBase'; export const Card = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = CardBase.getProps(inProps, context); diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js index e128a777a6..76ab5de297 100644 --- a/components/lib/carousel/Carousel.js +++ b/components/lib/carousel/Carousel.js @@ -1,16 +1,17 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronLeftIcon } from '../icons/chevronleft'; import { ChevronRightIcon } from '../icons/chevronright'; import { ChevronUpIcon } from '../icons/chevronup'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { CarouselBase } from './CarouselBase'; const CarouselItem = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, cx } = props; const key = props.className && props.className === 'p-carousel-item-cloned' ? 'itemCloned' : 'item'; const content = props.template(props.item); diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js index 21af0ceca2..911af5f8db 100644 --- a/components/lib/cascadeselect/CascadeSelect.js +++ b/components/lib/cascadeselect/CascadeSelect.js @@ -2,17 +2,18 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { SpinnerIcon } from '../icons/spinner'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { CascadeSelectBase } from './CascadeSelectBase'; import { CascadeSelectSub } from './CascadeSelectSub'; export const CascadeSelect = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = CascadeSelectBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js index 7dc45c32b6..0772b5aec0 100644 --- a/components/lib/cascadeselect/CascadeSelectSub.js +++ b/components/lib/cascadeselect/CascadeSelectSub.js @@ -1,10 +1,11 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; -import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; export const CascadeSelectSub = React.memo((props) => { + const mergeProps = useMergeProps(); const [activeOptionState, setActiveOptionState] = React.useState(null); const elementRef = React.useRef(null); const context = React.useContext(PrimeReactContext); diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js index b7c088291e..63cc531674 100644 --- a/components/lib/chart/Chart.js +++ b/components/lib/chart/Chart.js @@ -1,9 +1,8 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; -import { useUnmountEffect } from '../hooks/Hooks'; -import { mergeProps } from '../utils/Utils'; -import { ChartBase } from './ChartBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps, useUnmountEffect } from '../hooks/Hooks'; +import { ChartBase } from './ChartBase'; // GitHub #3059 wrapper if loaded by script tag const ChartJS = (function () { @@ -16,6 +15,7 @@ const ChartJS = (function () { const PrimeReactChart = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ChartBase.getProps(inProps, context); diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index dfee79bf72..bf0461f092 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -1,14 +1,15 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { CheckboxBase } from './CheckboxBase'; export const Checkbox = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = CheckboxBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js index 29fb9af7a1..6a0f347438 100644 --- a/components/lib/chip/Chip.js +++ b/components/lib/chip/Chip.js @@ -1,12 +1,14 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { TimesCircleIcon } from '../icons/timescircle'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { ChipBase } from './ChipBase'; export const Chip = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ChipBase.getProps(inProps, context); const elementRef = React.useRef(null); diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index 5b8c8fd2bc..2fe2e19f91 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -1,15 +1,16 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { TimesCircleIcon } from '../icons/timescircle'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { ChipsBase } from './ChipsBase'; export const Chips = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ChipsBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js index 7b55225377..4d4635a64b 100644 --- a/components/lib/colorpicker/ColorPicker.js +++ b/components/lib/colorpicker/ColorPicker.js @@ -1,15 +1,16 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useEventListener, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; import { ColorPickerBase } from './ColorPickerBase'; import { ColorPickerPanel } from './ColorPickerPanel'; export const ColorPicker = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ColorPickerBase.getProps(inProps, context); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index aeb24e2ed6..f76533d689 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -1,7 +1,6 @@ import PrimeReact from '../api/Api'; import { useMountEffect, useStyle, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { mergeProps } from '../utils/MergeProps'; -import { ObjectUtils, classNames } from '../utils/Utils'; +import { ObjectUtils, _mergeProps, classNames } from '../utils/Utils'; const baseStyle = ` .p-hidden-accessible { @@ -540,7 +539,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 : {}], { classNameMergeFunction: ComponentBase.context.ptOptions?.classNameMergeFunction }) : { ...globalPT, ...self, ...(Object.keys(datasetProps).length ? datasetProps : {}) } : { ...self, ...(Object.keys(datasetProps).length ? datasetProps : {}) }; }; @@ -563,7 +562,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], { classNameMergeFunction: ComponentBase.context.ptOptions?.classNameMergeFunction }); } return undefined; @@ -613,7 +612,7 @@ const _usePT = (pt, callback, key, params) => { const fn = (value) => callback(value, key, params); if (pt?.hasOwnProperty('_usept')) { - const { mergeSections = true, mergeProps: useMergeProps = false } = pt['_usept'] || ComponentBase.context.ptOptions || {}; + const { mergeSections = true, mergeProps: useMergeProps = false, classNameMergeFunction } = pt['_usept'] || ComponentBase.context.ptOptions || {}; const originalValue = fn(pt.originalValue); const value = fn(pt.value); @@ -621,7 +620,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], { classNameMergeFunction }) : { ...originalValue, ...value }) : value; } return fn(pt); diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js index 101a64ae0e..82e94bcd37 100644 --- a/components/lib/confirmdialog/ConfirmDialog.js +++ b/components/lib/confirmdialog/ConfirmDialog.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { PrimeReactContext, localeOption } from '../api/Api'; import { Button } from '../button/Button'; import { Dialog } from '../dialog/Dialog'; -import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { ConfirmDialogBase } from './ConfirmDialogBase'; export const confirmDialog = (props = {}) => { @@ -25,6 +25,7 @@ export const confirmDialog = (props = {}) => { export const ConfirmDialog = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ConfirmDialogBase.getProps(inProps, context); diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js index 76c0ea8a9f..1405a59b92 100644 --- a/components/lib/confirmpopup/ConfirmPopup.js +++ b/components/lib/confirmpopup/ConfirmPopup.js @@ -3,10 +3,10 @@ import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { ConfirmPopupBase } from './ConfirmPopupBase'; export const confirmPopup = (props = {}) => { @@ -26,6 +26,7 @@ export const confirmPopup = (props = {}) => { export const ConfirmPopup = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ConfirmPopupBase.getProps(inProps, context); diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js index bfdb3fe9f0..878abd7250 100644 --- a/components/lib/contextmenu/ContextMenu.js +++ b/components/lib/contextmenu/ContextMenu.js @@ -2,14 +2,15 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useEventListener, useMatchMedia, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { DomHandler, UniqueComponentId, ZIndexUtils, classNames, mergeProps, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { ContextMenuBase } from './ContextMenuBase'; import { ContextMenuSub } from './ContextMenuSub'; export const ContextMenu = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ContextMenuBase.getProps(inProps, context); diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js index 900517ae80..858450f87b 100644 --- a/components/lib/contextmenu/ContextMenuSub.js +++ b/components/lib/contextmenu/ContextMenuSub.js @@ -1,12 +1,13 @@ import * as React from 'react'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useUpdateEffect } from '../hooks/Hooks'; import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; export const ContextMenuSub = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const submenuRef = React.useRef(null); const active = props.root || !props.resetMenu; const { ptm, cx } = props; diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js index f306ec81f3..c77791ace0 100644 --- a/components/lib/datascroller/DataScroller.js +++ b/components/lib/datascroller/DataScroller.js @@ -1,12 +1,13 @@ import * as React from 'react'; import { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ObjectUtils, classNames } from '../utils/Utils'; import { DataScrollerBase } from './DataScrollerBase'; export const DataScroller = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = DataScrollerBase.getProps(inProps, context); diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 196027c7cb..f7a1e33ee8 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; -import { useEventListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useEventListener, useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { BarsIcon } from '../icons/bars'; import { CheckIcon } from '../icons/check'; import { ChevronDownIcon } from '../icons/chevrondown'; @@ -10,11 +10,12 @@ import { PencilIcon } from '../icons/pencil'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { RowCheckbox } from './RowCheckbox'; import { RowRadioButton } from './RowRadioButton'; export const BodyCell = React.memo((props) => { + const mergeProps = useMergeProps(); const [editingState, setEditingState] = React.useState(props.editing); const [editingRowDataState, setEditingRowDataState] = React.useState(props.rowData); const [styleObjectState, setStyleObjectState] = React.useState({}); diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index 4d79c835fd..207164643b 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 { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; import { BodyCell } from './BodyCell'; export const BodyRow = React.memo((props) => { + const mergeProps = useMergeProps(); const [editingState, setEditingState] = React.useState(false); const editing = props.onRowEditChange ? props.editing : editingState; const { ptm, cx } = props.ptCallbacks; diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js index e3399c8d6e..50e3e27a21 100644 --- a/components/lib/datatable/ColumnFilter.js +++ b/components/lib/datatable/ColumnFilter.js @@ -4,7 +4,7 @@ import { Button } from '../button/Button'; import { ColumnBase } from '../column/ColumnBase'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Dropdown } from '../dropdown/Dropdown'; -import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { FilterIcon } from '../icons/filter'; import { FilterSlashIcon } from '../icons/filterslash'; import { PlusIcon } from '../icons/plus'; @@ -13,7 +13,7 @@ import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; export const ColumnFilter = React.memo((props) => { const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -21,6 +21,7 @@ export const ColumnFilter = React.memo((props) => { const iconRef = React.useRef(null); const selfClick = React.useRef(false); const overlayEventListener = React.useRef(null); + const mergeProps = useMergeProps(); const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); const getColumnProps = () => ColumnBase.getCProps(props.column); const context = React.useContext(PrimeReactContext); diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index f1dd60809b..2213e44620 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -2,12 +2,12 @@ import * as React from 'react'; import PrimeReact, { FilterMatchMode, FilterOperator, FilterService, PrimeReactContext } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useEventListener, useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ArrowDownIcon } from '../icons/arrowdown'; import { ArrowUpIcon } from '../icons/arrowup'; import { SpinnerIcon } from '../icons/spinner'; import { Paginator } from '../paginator/Paginator'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { DataTableBase } from './DataTableBase'; import { TableBody } from './TableBody'; @@ -16,6 +16,7 @@ import { TableHeader } from './TableHeader'; export const DataTable = React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); + const mergeProps = useMergeProps(); const props = DataTableBase.getProps(inProps, context); const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); diff --git a/components/lib/datatable/FooterCell.js b/components/lib/datatable/FooterCell.js index 7960ca1223..ada6c85516 100644 --- a/components/lib/datatable/FooterCell.js +++ b/components/lib/datatable/FooterCell.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; -import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; export const FooterCell = React.memo((props) => { const [styleObjectState, setStyleObjectState] = React.useState({}); const elementRef = React.useRef(null); + const mergeProps = useMergeProps(); const getColumnProps = () => ColumnBase.getCProps(props.column); const { ptm, ptmo, cx } = props.ptCallbacks; diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 8e313c88b2..84bd622cc9 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; -import { usePrevious } from '../hooks/Hooks'; +import { useMergeProps, usePrevious } from '../hooks/Hooks'; import { SortAltIcon } from '../icons/sortalt'; import { SortAmountDownIcon } from '../icons/sortamountdown'; import { SortAmountUpAltIcon } from '../icons/sortamountupalt'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { ColumnFilter } from './ColumnFilter'; import { HeaderCheckbox } from './HeaderCheckbox'; @@ -13,6 +13,7 @@ export const HeaderCell = React.memo((props) => { const [styleObjectState, setStyleObjectState] = React.useState({}); const elementRef = React.useRef(null); const prevColumn = usePrevious(props.column); + const mergeProps = useMergeProps(); const { metaData: parentMetaData, ptCallbacks, index } = props; const { ptm, ptmo, cx } = props.ptCallbacks; diff --git a/components/lib/datatable/HeaderCheckbox.js b/components/lib/datatable/HeaderCheckbox.js index ce7f92ebb1..4c8d37019e 100644 --- a/components/lib/datatable/HeaderCheckbox.js +++ b/components/lib/datatable/HeaderCheckbox.js @@ -1,10 +1,12 @@ import * as React from 'react'; -import { IconUtils, mergeProps } from '../utils/Utils'; -import { CheckIcon } from '../icons/check'; import { ColumnBase } from '../column/ColumnBase'; +import { useMergeProps } from '../hooks/Hooks'; +import { CheckIcon } from '../icons/check'; +import { IconUtils } from '../utils/Utils'; export const HeaderCheckbox = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); + const mergeProps = useMergeProps(); const getColumnProps = () => ColumnBase.getCProps(props.column); const { ptm, ptmo, cx } = props.ptCallbacks; diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js index 323d4b3802..b177566fc2 100644 --- a/components/lib/datatable/RowCheckbox.js +++ b/components/lib/datatable/RowCheckbox.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; +import { useMergeProps } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; -import { IconUtils, mergeProps } from '../utils/Utils'; +import { IconUtils } from '../utils/Utils'; export const RowCheckbox = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); + const mergeProps = useMergeProps(); const getColumnProps = () => ColumnBase.getCProps(props.column); const { ptm, ptmo, cx } = props.ptCallbacks; diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js index 539e1e12e4..b69987eee9 100644 --- a/components/lib/datatable/RowRadioButton.js +++ b/components/lib/datatable/RowRadioButton.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; -import { DomHandler, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { DomHandler } from '../utils/Utils'; export const RowRadioButton = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); const inputRef = React.useRef(null); + const mergeProps = useMergeProps(); const getColumnProps = () => ColumnBase.getCProps(props.column); const { ptm, ptmo, cx } = props.ptCallbacks; diff --git a/components/lib/datatable/RowTogglerButton.js b/components/lib/datatable/RowTogglerButton.js index c6fb851a0a..d6a07f0268 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 { IconUtils, mergeProps } from '../utils/Utils'; +import { ColumnBase } from '../column/ColumnBase'; +import { useMergeProps } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; -import { ColumnBase } from '../column/ColumnBase'; +import { Ripple } from '../ripple/Ripple'; +import { IconUtils } from '../utils/Utils'; export const RowTogglerButton = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, ptmo, cx } = props.ptCallbacks; const onClick = (event) => { diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 0a43916d7a..17ec880027 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; -import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils'; +import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; import { BodyRow } from './BodyRow'; import { RowTogglerButton } from './RowTogglerButton'; export const TableBody = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const { ptm, ptmo, cx, isUnsyled } = props.ptCallbacks; const [rowGroupHeaderStyleObjectState, setRowGroupHeaderStyleObjectState] = React.useState({}); const getColumnProps = (column) => ColumnBase.getCProps(column); diff --git a/components/lib/datatable/TableFooter.js b/components/lib/datatable/TableFooter.js index a40a077027..a5602eca80 100644 --- a/components/lib/datatable/TableFooter.js +++ b/components/lib/datatable/TableFooter.js @@ -1,12 +1,13 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; +import { useMergeProps } from '../hooks/Hooks'; import { RowBase } from '../row/RowBase'; import { FooterCell } from './FooterCell'; -import { mergeProps } from '../utils/Utils'; export const TableFooter = React.memo((props) => { const { ptm, ptmo, cx } = props.ptCallbacks; + const mergeProps = useMergeProps(); const getRowProps = (row) => ColumnGroupBase.getCProps(row); const getColumnGroupProps = () => { diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index dfa6d5cc3f..570f797b0b 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { RowBase } from '../row/RowBase'; -import { classNames, mergeProps } from '../utils/Utils'; +import { classNames } from '../utils/Utils'; import { ColumnFilter } from './ColumnFilter'; import { HeaderCell } from './HeaderCell'; import { HeaderCheckbox } from './HeaderCheckbox'; @@ -11,6 +11,7 @@ import { HeaderCheckbox } from './HeaderCheckbox'; export const TableHeader = React.memo((props) => { const [sortableDisabledFieldsState, setSortableDisabledFieldsState] = React.useState([]); const [allSortableDisabledState, setAllSortableDisabledState] = React.useState(false); + const mergeProps = useMergeProps(); const isSingleSort = props.sortMode === 'single'; const isMultipleSort = props.sortMode === 'multiple'; const isAllSortableDisabled = isSingleSort && allSortableDisabledState; diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js index d378d70a27..7529868a1c 100644 --- a/components/lib/dataview/DataView.js +++ b/components/lib/dataview/DataView.js @@ -1,15 +1,17 @@ import * as React from 'react'; import PrimeReact, { localeOption, PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { BarsIcon } from '../icons/bars'; import { SpinnerIcon } from '../icons/spinner'; import { ThLargeIcon } from '../icons/thlarge'; import { Paginator } from '../paginator/Paginator'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { DataViewBase, DataViewLayoutOptionsBase } from './DataViewBase'; export const DataViewLayoutOptions = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = DataViewLayoutOptionsBase.getProps(inProps, context); const { ptm, cx } = DataViewLayoutOptionsBase.setMetaData({ diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js index bcb6d8d1b9..d0227770f7 100644 --- a/components/lib/deferredcontent/DeferredContent.js +++ b/components/lib/deferredcontent/DeferredContent.js @@ -1,10 +1,10 @@ import * as React from 'react'; -import { useEventListener, useMountEffect } from '../hooks/Hooks'; -import { DeferredContentBase } from './DeferredContentBase'; -import { mergeProps } from '../utils/Utils'; import { PrimeReactContext } from '../api/Api'; +import { useEventListener, useMergeProps, useMountEffect } from '../hooks/Hooks'; +import { DeferredContentBase } from './DeferredContentBase'; export const DeferredContent = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = DeferredContentBase.getProps(inProps, context); diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index 9b49ad603a..d5a7f27611 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -2,16 +2,17 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { TimesIcon } from '../icons/times'; import { WindowMaximizeIcon } from '../icons/windowmaximize'; import { WindowMinimizeIcon } from '../icons/windowminimize'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { DialogBase } from './DialogBase'; export const Dialog = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = DialogBase.getProps(inProps, context); diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js index 6f23eef283..bcf5ef6049 100644 --- a/components/lib/divider/Divider.js +++ b/components/lib/divider/Divider.js @@ -1,10 +1,11 @@ import * as React from 'react'; -import { mergeProps } from '../utils/Utils'; -import { DividerBase } from './DividerBase'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; +import { DividerBase } from './DividerBase'; export const Divider = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = DividerBase.getProps(inProps, context); diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js index 282f60274e..9abf680f42 100644 --- a/components/lib/dock/Dock.js +++ b/components/lib/dock/Dock.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId, DomHandler } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { DockBase } from './DockBase'; export const Dock = React.memo( @@ -11,6 +11,7 @@ export const Dock = React.memo( const [currentIndexState, setCurrentIndexState] = React.useState(-3); const [focused, setFocused] = React.useState(false); const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1); + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = DockBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index bb42a54dcb..7726b11e4a 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -1,18 +1,19 @@ import * as React from 'react'; import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { SpinnerIcon } from '../icons/spinner'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { DropdownBase } from './DropdownBase'; import { DropdownPanel } from './DropdownPanel'; export const Dropdown = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = DropdownBase.getProps(inProps, context); const [filterState, setFilterState] = React.useState(''); diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index 3379bb42ff..3411df8cb6 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -1,8 +1,10 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, ObjectUtils } from '../utils/Utils'; export const DropdownItem = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, cx, selected, disabled, option, label } = props; const getPTOptions = (key) => { diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 7e0f9da89a..32baf68614 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -1,15 +1,17 @@ import * as React from 'react'; import { localeOption, PrimeReactContext } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps } from '../hooks/Hooks'; import { SearchIcon } from '../icons/search'; import { TimesIcon } from '../icons/times'; import { Portal } from '../portal/Portal'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { DropdownItem } from './DropdownItem'; export const DropdownPanel = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const { ptm, cx, sx } = props; const context = React.useContext(PrimeReactContext); const virtualScrollerRef = React.useRef(null); diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js index bbb70db7f2..a4f70e836e 100644 --- a/components/lib/editor/Editor.js +++ b/components/lib/editor/Editor.js @@ -1,10 +1,9 @@ import * as React from 'react'; -import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, mergeProps } from '../utils/Utils'; -import { EditorBase } from './EditorBase'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { classNames } from '../utils/Utils'; +import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { DomHandler, classNames } from '../utils/Utils'; +import { EditorBase } from './EditorBase'; const QuillJS = (function () { try { @@ -16,6 +15,7 @@ const QuillJS = (function () { export const Editor = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = EditorBase.getProps(inProps, context); const { ptm, cx, isUnstyled } = EditorBase.setMetaData({ diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js index 42b7c8e4bd..1215b8fac1 100644 --- a/components/lib/fieldset/Fieldset.js +++ b/components/lib/fieldset/Fieldset.js @@ -2,14 +2,15 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { MinusIcon } from '../icons/minus'; import { PlusIcon } from '../icons/plus'; import { Ripple } from '../ripple/Ripple'; -import { IconUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { FieldsetBase } from './FieldsetBase'; export const Fieldset = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = FieldsetBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index 69c484cf85..b4cbcccd32 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -3,17 +3,19 @@ import { localeOption, PrimeReactContext } from '../api/Api'; import { Badge } from '../badge/Badge'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { PlusIcon } from '../icons/plus'; import { TimesIcon } from '../icons/times'; import { UploadIcon } from '../icons/upload'; import { Messages } from '../messages/Messages'; import { ProgressBar } from '../progressbar/ProgressBar'; import { Ripple } from '../ripple/Ripple'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { FileUploadBase } from './FileUploadBase'; export const FileUpload = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = FileUploadBase.getProps(inProps, context); const [uploadedFilesState, setUploadedFilesState] = React.useState([]); diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js index ec06370172..1a0a50abc5 100644 --- a/components/lib/galleria/Galleria.js +++ b/components/lib/galleria/Galleria.js @@ -2,17 +2,18 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useInterval, useUnmountEffect } from '../hooks/Hooks'; +import { useInterval, useMergeProps, useUnmountEffect } from '../hooks/Hooks'; import { TimesIcon } from '../icons/times'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { GalleriaBase } from './GalleriaBase'; import { GalleriaItem } from './GalleriaItem'; import { GalleriaThumbnails } from './GalleriaThumbnails'; export const Galleria = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = GalleriaBase.getProps(inProps, context); diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js index 5889625b6d..fae40c0b93 100644 --- a/components/lib/galleria/GalleriaItem.js +++ b/components/lib/galleria/GalleriaItem.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { ChevronLeftIcon } from '../icons/chevronleft'; import { ChevronRightIcon } from '../icons/chevronright'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, classNames } from '../utils/Utils'; export const GalleriaItem = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const indicatorContent = React.useRef(null); const { ptm, cx } = props; diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js index 68b13f1d7a..be1a009543 100644 --- a/components/lib/galleria/GalleriaThumbnails.js +++ b/components/lib/galleria/GalleriaThumbnails.js @@ -1,14 +1,15 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; -import { useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronLeftIcon } from '../icons/chevronleft'; import { ChevronRightIcon } from '../icons/chevronright'; import { ChevronUpIcon } from '../icons/chevronup'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; const GalleriaThumbnailItem = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, cx } = props; const getPTOptions = (key, options) => { diff --git a/components/lib/hooks/Hooks.js b/components/lib/hooks/Hooks.js index d4ee76fa8e..5458bfc113 100644 --- a/components/lib/hooks/Hooks.js +++ b/components/lib/hooks/Hooks.js @@ -8,6 +8,7 @@ import { ESC_KEY_HANDLING_PRIORITIES, useGlobalOnEscapeKey } from './useGlobalOn import { useIntersectionObserver } from './useIntersectionObserver'; import { useInterval } from './useInterval'; import { useMatchMedia } from './useMatchMedia'; +import { useMergeProps } from './useMergeProps'; import { useMountEffect } from './useMountEffect'; import { useMouse } from './useMouse'; import { useMove } from './useMove'; @@ -34,6 +35,7 @@ export { useInterval, useLocalStorage, useMatchMedia, + useMergeProps, useMountEffect, useMouse, useMove, diff --git a/components/lib/hooks/hooks.d.ts b/components/lib/hooks/hooks.d.ts index ec3228ccbf..d973390b68 100644 --- a/components/lib/hooks/hooks.d.ts +++ b/components/lib/hooks/hooks.d.ts @@ -301,3 +301,7 @@ export declare function useGlobalOnEscapeKey(props: { callback: (event: Keyboard * @param {boolean} [isVisible] */ export declare function useDisplayOrder(group: string, isVisible?: boolean): number | undefined; +/** + * Custom hook to return a function for merging properties. + */ +export declare function useMergeProps(): (args: object[], options?: any) => object | undefined; diff --git a/components/lib/hooks/useMergeProps.js b/components/lib/hooks/useMergeProps.js new file mode 100644 index 0000000000..59865247f5 --- /dev/null +++ b/components/lib/hooks/useMergeProps.js @@ -0,0 +1,18 @@ +import { useContext } from 'react'; +import { PrimeReactContext } from '../api/Api'; +import { _mergeProps } from '../utils/Utils'; + +/** + * Hook to merge properties including custom merge function for things like Tailwind merge. + */ +export const useMergeProps = () => { + const context = useContext(PrimeReactContext); + + return (...props) => { + const options = { + ...(context?.ptOptions?.classNameMergeFunction && { classNameMergeFunction: context.classNameMergeFunction }) + }; + + return _mergeProps(props, options); + }; +}; diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js index 45236ee0c9..df70c0e8cc 100644 --- a/components/lib/image/Image.js +++ b/components/lib/image/Image.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useGlobalOnEscapeKey, useUnmountEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useGlobalOnEscapeKey, useMergeProps, useUnmountEffect } from '../hooks/Hooks'; import { DownloadIcon } from '../icons/download'; import { EyeIcon } from '../icons/eye'; import { RefreshIcon } from '../icons/refresh'; @@ -11,11 +11,12 @@ import { SearchPlusIcon } from '../icons/searchplus'; import { TimesIcon } from '../icons/times'; import { UndoIcon } from '../icons/undo'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { ImageBase } from './ImageBase'; export const Image = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ImageBase.getProps(inProps, context); diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js index 27739e3b2e..9bc041b290 100644 --- a/components/lib/inplace/Inplace.js +++ b/components/lib/inplace/Inplace.js @@ -2,15 +2,16 @@ import * as React from 'react'; import { localeOption, PrimeReactContext } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useUpdateEffect } from '../hooks/Hooks'; import { TimesIcon } from '../icons/times'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { InplaceBase } from './InplaceBase'; export const InplaceDisplay = (props) => props.children; export const InplaceContent = (props) => props.children; export const Inplace = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = InplaceBase.getProps(inProps, context); diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 683e940286..cdbe60c02f 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1,17 +1,18 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { AngleDownIcon } from '../icons/angledown'; import { AngleUpIcon } from '../icons/angleup'; import { InputText } from '../inputtext/InputText'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { InputNumberBase } from './InputNumberBase'; export const InputNumber = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = InputNumberBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index 9aa8849354..45ad2de977 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { InputSwitchBase } from './InputSwitchBase'; export const InputSwitch = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = InputSwitchBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js index 2456ca7dd3..ab704e504d 100644 --- a/components/lib/inputtext/InputText.js +++ b/components/lib/inputtext/InputText.js @@ -1,13 +1,15 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { InputTextBase } from './InputTextBase'; export const InputText = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = InputTextBase.getProps(inProps, context); diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js index ae45442177..445041031a 100644 --- a/components/lib/inputtextarea/InputTextarea.js +++ b/components/lib/inputtextarea/InputTextarea.js @@ -1,13 +1,15 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; import { InputTextareaBase } from './InputTextareaBase'; export const InputTextarea = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = InputTextareaBase.getProps(inProps, context); diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js index 25b35cbc45..294d05315c 100644 --- a/components/lib/knob/Knob.js +++ b/components/lib/knob/Knob.js @@ -1,9 +1,8 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; -import { useEventListener } from '../hooks/Hooks'; -import { mergeProps } from '../utils/Utils'; -import { KnobBase } from './KnobBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useEventListener, useMergeProps } from '../hooks/Hooks'; +import { KnobBase } from './KnobBase'; const radius = 40; const midX = 50; @@ -13,6 +12,7 @@ const maxRadians = -Math.PI / 3; export const Knob = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = KnobBase.getProps(inProps, context); diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index 4e658c9d1e..07f8d56966 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { FilterService, PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { ListBoxBase } from './ListBoxBase'; import { ListBoxHeader } from './ListBoxHeader'; @@ -11,6 +11,7 @@ import { ListBoxItem } from './ListBoxItem'; export const ListBox = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ListBoxBase.getProps(inProps, context); diff --git a/components/lib/listbox/ListBoxHeader.js b/components/lib/listbox/ListBoxHeader.js index e36b8e7b90..76063bcd1e 100644 --- a/components/lib/listbox/ListBoxHeader.js +++ b/components/lib/listbox/ListBoxHeader.js @@ -1,9 +1,11 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { SearchIcon } from '../icons/search'; import { InputText } from '../inputtext/InputText'; -import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils } from '../utils/Utils'; export const ListBoxHeader = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptCallbacks: { ptm, cx } } = props; diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js index b5fdabb0cc..80f580246f 100644 --- a/components/lib/listbox/ListBoxItem.js +++ b/components/lib/listbox/ListBoxItem.js @@ -1,9 +1,11 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; export const ListBoxItem = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); + const mergeProps = useMergeProps(); const { ptCallbacks: { ptm, cx } } = props; diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js index df2015d575..5a4186e1eb 100644 --- a/components/lib/megamenu/MegaMenu.js +++ b/components/lib/megamenu/MegaMenu.js @@ -1,16 +1,17 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener, useMatchMedia, useMountEffect, useResizeListener, useUpdateEffect } from '../hooks/Hooks'; +import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUpdateEffect } from '../hooks/Hooks'; import { AngleDownIcon } from '../icons/angledown'; import { AngleRightIcon } from '../icons/angleright'; import { BarsIcon } from '../icons/bars'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { MegaMenuBase } from './MegaMenuBase'; export const MegaMenu = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MegaMenuBase.getProps(inProps, context); diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js index 460634ca39..0fdc4045aa 100644 --- a/components/lib/mention/Mention.js +++ b/components/lib/mention/Mention.js @@ -2,16 +2,17 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { InputTextarea } from '../inputtextarea/InputTextarea'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; import { MentionBase } from './MentionBase'; export const Mention = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MentionBase.getProps(inProps, context); diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index ec217e110e..caa6613277 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -2,14 +2,15 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { MenuBase } from './MenuBase'; export const Menu = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MenuBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js index 781ec79086..0eea77f06f 100644 --- a/components/lib/menubar/Menubar.js +++ b/components/lib/menubar/Menubar.js @@ -1,14 +1,15 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener, useResizeListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useEventListener, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { BarsIcon } from '../icons/bars'; -import { IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps, DomHandler } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { MenubarBase } from './MenubarBase'; import { MenubarSub } from './MenubarSub'; export const Menubar = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MenubarBase.getProps(inProps, context); diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js index d20d814b83..2be4bef0b9 100644 --- a/components/lib/menubar/MenubarSub.js +++ b/components/lib/menubar/MenubarSub.js @@ -1,11 +1,13 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleDownIcon } from '../icons/angledown'; import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; -import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; export const MenubarSub = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const { ptm, cx } = props; const getPTOptions = (processedItem, key, index) => { diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js index bbdcb8af9f..4eb220bef1 100644 --- a/components/lib/message/Message.js +++ b/components/lib/message/Message.js @@ -1,15 +1,17 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { ExclamationTriangleIcon } from '../icons/exclamationtriangle'; import { InfoCircleIcon } from '../icons/infocircle'; import { TimesCircleIcon } from '../icons/timescircle'; -import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { MessageBase } from './MessageBase'; export const Message = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MessageBase.getProps(inProps, context); diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js index 7cc046c078..05b26c61af 100644 --- a/components/lib/messages/Messages.js +++ b/components/lib/messages/Messages.js @@ -3,7 +3,8 @@ import { TransitionGroup } from 'react-transition-group'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ObjectUtils, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { ObjectUtils } from '../utils/Utils'; import { MessagesBase } from './MessagesBase'; import { UIMessage } from './UIMessage'; @@ -11,6 +12,7 @@ let messageIdx = 0; export const Messages = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MessagesBase.getProps(inProps, context); const [messagesState, setMessagesState] = React.useState([]); diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 491557ffd0..a4ad7751ff 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -1,19 +1,20 @@ import * as React from 'react'; import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; +import { SpinnerIcon } from '../icons/spinner'; import { TimesIcon } from '../icons/times'; import { TimesCircleIcon } from '../icons/timescircle'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { MultiSelectBase } from './MultiSelectBase'; import { MultiSelectPanel } from './MultiSelectPanel'; -import { SpinnerIcon } from '../icons/spinner'; export const MultiSelect = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MultiSelectBase.getProps(inProps, context); diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js index 9145c7738f..efa45499e6 100644 --- a/components/lib/multiselect/MultiSelectHeader.js +++ b/components/lib/multiselect/MultiSelectHeader.js @@ -1,14 +1,16 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; import { Checkbox } from '../checkbox/Checkbox'; +import { useMergeProps } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { SearchIcon } from '../icons/search'; import { TimesIcon } from '../icons/times'; import { InputText } from '../inputtext/InputText'; import { Ripple } from '../ripple/Ripple'; -import { IconUtils, ObjectUtils, UniqueComponentId, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils'; export const MultiSelectHeader = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, cx, isUnstyled } = props; const filterOptions = { filter: (e) => onFilter(e), diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js index 1ee1abe6f2..8d9464e66c 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -1,10 +1,12 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { Ripple } from '../ripple/Ripple'; -import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; export const MultiSelectItem = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); + const mergeProps = useMergeProps(); const { ptm, cx } = props; const getPTOptions = (key) => { diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 36275b17fa..7c475a01e3 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -1,8 +1,9 @@ import * as React from 'react'; import { localeOption, PrimeReactContext } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { MultiSelectHeader } from './MultiSelectHeader'; import { MultiSelectItem } from './MultiSelectItem'; @@ -11,6 +12,7 @@ export const MultiSelectPanel = React.memo( React.forwardRef((props, ref) => { const virtualScrollerRef = React.useRef(null); const filterInputRef = React.useRef(null); + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const { ptm, cx, sx, isUnstyled } = props; diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js index 37b107e258..431760db11 100644 --- a/components/lib/multistatecheckbox/MultiStateCheckbox.js +++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { ariaLabel, PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { MultiStateCheckboxBase } from './MultiStateCheckboxBase'; export const MultiStateCheckbox = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MultiStateCheckboxBase.getProps(inProps, context); diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js index 523338b927..a1a397d784 100644 --- a/components/lib/orderlist/OrderList.js +++ b/components/lib/orderlist/OrderList.js @@ -1,14 +1,15 @@ import * as React from 'react'; import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { DomHandler, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { OrderListBase } from './OrderListBase'; import { OrderListControls } from './OrderListControls'; import { OrderListSubList } from './OrderListSubList'; export const OrderList = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = OrderListBase.getProps(inProps, context); diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js index 5e6ce4ce1f..d1c6edbdfd 100644 --- a/components/lib/orderlist/OrderListControls.js +++ b/components/lib/orderlist/OrderListControls.js @@ -1,13 +1,15 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Button } from '../button/Button'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleDoubleDownIcon } from '../icons/angledoubledown'; import { AngleDoubleUpIcon } from '../icons/angledoubleup'; import { AngleDownIcon } from '../icons/angledown'; import { AngleUpIcon } from '../icons/angleup'; -import { ObjectUtils, mergeProps } from '../utils/Utils'; +import { ObjectUtils } from '../utils/Utils'; export const OrderListControls = React.memo((props) => { + const mergeProps = useMergeProps(); const moveUpIcon = props.moveUpIcon || ; const moveTopIcon = props.moveTopIcon || ; const moveDownIcon = props.moveDownIcon || ; diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js index de7caa9ad4..06f7acdf17 100644 --- a/components/lib/orderlist/OrderListSubList.js +++ b/components/lib/orderlist/OrderListSubList.js @@ -1,10 +1,12 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { SearchIcon } from '../icons/search'; import { Ripple } from '../ripple/Ripple'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; export const OrderListSubList = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const { ptm, cx } = props; const _ptm = (key, options) => { diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js index 1489bf2eb6..990826802f 100644 --- a/components/lib/organizationchart/OrganizationChart.js +++ b/components/lib/organizationchart/OrganizationChart.js @@ -1,12 +1,14 @@ import * as React from 'react'; -import { classNames, DomHandler, mergeProps } from '../utils/Utils'; -import { OrganizationChartBase } from './OrganizationChartBase'; -import { OrganizationChartNode } from './OrganizationChartNode'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames, DomHandler } from '../utils/Utils'; +import { OrganizationChartBase } from './OrganizationChartBase'; +import { OrganizationChartNode } from './OrganizationChartNode'; export const OrganizationChart = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = OrganizationChartBase.getProps(inProps, context); const { ptm, cx, sx, isUnstyled } = OrganizationChartBase.setMetaData({ diff --git a/components/lib/organizationchart/OrganizationChartNode.js b/components/lib/organizationchart/OrganizationChartNode.js index dd80df10ea..2d317e49f5 100644 --- a/components/lib/organizationchart/OrganizationChartNode.js +++ b/components/lib/organizationchart/OrganizationChartNode.js @@ -1,9 +1,11 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronUpIcon } from '../icons/chevronup'; -import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils } from '../utils/Utils'; export const OrganizationChartNode = React.memo((props) => { + const mergeProps = useMergeProps(); const node = props.node; const [expandedState, setExpandedState] = React.useState(node.expanded); const leaf = node.leaf === false ? false : !(node.children && node.children.length); diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js index 1095f52377..4bce56f114 100644 --- a/components/lib/overlaypanel/OverlayPanel.js +++ b/components/lib/overlaypanel/OverlayPanel.js @@ -2,15 +2,16 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { OverlayPanelBase } from './OverlayPanelBase'; export const OverlayPanel = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = OverlayPanelBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(false); diff --git a/components/lib/paginator/CurrentPageReport.js b/components/lib/paginator/CurrentPageReport.js index c1f8a2ff22..1ed54325f6 100644 --- a/components/lib/paginator/CurrentPageReport.js +++ b/components/lib/paginator/CurrentPageReport.js @@ -1,52 +1,54 @@ import * as React from 'react'; -import { ObjectUtils, mergeProps } from '../utils/Utils'; -import { CurrentPageReportBase } from './PaginatorBase'; import { PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; +import { ObjectUtils } from '../utils/Utils'; +import { CurrentPageReportBase } from './PaginatorBase'; export const CurrentPageReport = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = CurrentPageReportBase.getProps(inProps, context); - const report = { - currentPage: props.page + 1, - totalPages: props.pageCount, - first: Math.min(props.first + 1, props.totalRecords), - last: Math.min(props.first + props.rows, props.totalRecords), - rows: props.rows, - totalRecords: props.totalRecords + const report = { + currentPage: props.page + 1, + totalPages: props.pageCount, + first: Math.min(props.first + 1, props.totalRecords), + last: Math.min(props.first + props.rows, props.totalRecords), + rows: props.rows, + totalRecords: props.totalRecords + }; + + const text = props.reportTemplate + .replace('{currentPage}', report.currentPage) + .replace('{totalPages}', report.totalPages) + .replace('{first}', report.first) + .replace('{last}', report.last) + .replace('{rows}', report.rows) + .replace('{totalRecords}', report.totalRecords); + + const currentProps = mergeProps( + { + 'aria-live': 'polite', + className: 'p-paginator-current' + }, + props.ptm('current', { hostName: props.hostName }) + ); + + const element = {text}; + + if (props.template) { + const defaultOptions = { + ...report, + ...{ + ariaLive: 'polite', + className: 'p-paginator-current', + element, + props + } }; - const text = props.reportTemplate - .replace('{currentPage}', report.currentPage) - .replace('{totalPages}', report.totalPages) - .replace('{first}', report.first) - .replace('{last}', report.last) - .replace('{rows}', report.rows) - .replace('{totalRecords}', report.totalRecords); - - const currentProps = mergeProps( - { - 'aria-live': 'polite', - className: 'p-paginator-current' - }, - props.ptm('current', { hostName: props.hostName }) - ); - - const element = {text}; - - if (props.template) { - const defaultOptions = { - ...report, - ...{ - ariaLive: 'polite', - className: 'p-paginator-current', - element, - props - } - }; - - return ObjectUtils.getJSXElement(props.template, defaultOptions); - } + return ObjectUtils.getJSXElement(props.template, defaultOptions); + } return element; }); diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js index 3c6df867a8..d6f87ae1dc 100644 --- a/components/lib/paginator/FirstPageLink.js +++ b/components/lib/paginator/FirstPageLink.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import { ariaLabel } from '../api/Api'; +import { ariaLabel, PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleDoubleLeftIcon } from '../icons/angledoubleleft'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { FirstPageLinkBase } from './PaginatorBase'; -import { PrimeReactContext } from '../api/Api'; export const FirstPageLink = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = FirstPageLinkBase.getProps(inProps, context); const { ptm, cx } = props; diff --git a/components/lib/paginator/JumpToPageInput.js b/components/lib/paginator/JumpToPageInput.js index 5a5b7b449f..14a9705861 100644 --- a/components/lib/paginator/JumpToPageInput.js +++ b/components/lib/paginator/JumpToPageInput.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; import { InputNumber } from '../inputnumber/InputNumber'; import { ObjectUtils } from '../utils/Utils'; import { JumpToPageInputBase } from './PaginatorBase'; export const JumpToPageInput = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = JumpToPageInputBase.getProps(inProps, context); const ariaLabelValue = ariaLabel('jumpToPageInputLabel'); diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js index 8300f95967..8629a618b6 100644 --- a/components/lib/paginator/LastPageLink.js +++ b/components/lib/paginator/LastPageLink.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import { ariaLabel } from '../api/Api'; +import { ariaLabel, PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleDoubleRightIcon } from '../icons/angledoubleright'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { LastPageLinkBase } from './PaginatorBase'; -import { PrimeReactContext } from '../api/Api'; export const LastPageLink = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = LastPageLinkBase.getProps(inProps, context); const { ptm, cx } = props; diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js index 1caaeeb4f2..ade841d5e8 100644 --- a/components/lib/paginator/NextPageLink.js +++ b/components/lib/paginator/NextPageLink.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import { ariaLabel } from '../api/Api'; +import { ariaLabel, PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { NextPageLinkBase } from './PaginatorBase'; -import { PrimeReactContext } from '../api/Api'; export const NextPageLink = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = NextPageLinkBase.getProps(inProps, context); const { ptm, cx } = props; diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js index f912a23f95..0fbe09d72f 100644 --- a/components/lib/paginator/PageLinks.js +++ b/components/lib/paginator/PageLinks.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { ariaLabel, PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, ObjectUtils } from '../utils/Utils'; import { PageLinksBase } from './PaginatorBase'; export const PageLinks = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = PageLinksBase.getProps(inProps, context); const { ptm, cx } = props; diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js index 947a3ed709..7525a2cda7 100644 --- a/components/lib/paginator/Paginator.js +++ b/components/lib/paginator/Paginator.js @@ -1,8 +1,8 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useUpdateEffect } from '../hooks/Hooks'; -import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; +import { useMergeProps, useUpdateEffect } from '../hooks/Hooks'; +import { classNames, ObjectUtils } from '../utils/Utils'; import { CurrentPageReport } from './CurrentPageReport'; import { FirstPageLink } from './FirstPageLink'; import { JumpToPageInput } from './JumpToPageInput'; @@ -15,6 +15,7 @@ import { RowsPerPageDropdown } from './RowsPerPageDropdown'; export const Paginator = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = PaginatorBase.getProps(inProps, context); const metaData = { diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js index d883c84093..7901c7717e 100644 --- a/components/lib/paginator/PrevPageLink.js +++ b/components/lib/paginator/PrevPageLink.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import { ariaLabel } from '../api/Api'; +import { ariaLabel, PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleLeftIcon } from '../icons/angleleft'; import { Ripple } from '../ripple/Ripple'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; import { PrevPageLinkBase } from './PaginatorBase'; -import { PrimeReactContext } from '../api/Api'; export const PrevPageLink = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = PrevPageLinkBase.getProps(inProps, context); const { ptm, cx } = props; diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js index c6585eceb9..842b9bd57c 100644 --- a/components/lib/paginator/RowsPerPageDropdown.js +++ b/components/lib/paginator/RowsPerPageDropdown.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { PrimeReactContext, localeOption } from '../api/Api'; import { Dropdown } from '../dropdown/Dropdown'; +import { useMergeProps } from '../hooks/Hooks'; import { ObjectUtils } from '../utils/Utils'; import { RowsPerPageDropdownBase } from './PaginatorBase'; import { ariaLabel } from '../api/Locale'; export const RowsPerPageDropdown = React.memo((inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = RowsPerPageDropdownBase.getProps(inProps, context); diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js index dbf232920b..3e787a35e9 100644 --- a/components/lib/panel/Panel.js +++ b/components/lib/panel/Panel.js @@ -2,14 +2,15 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { MinusIcon } from '../icons/minus'; import { PlusIcon } from '../icons/plus'; import { Ripple } from '../ripple/Ripple'; -import { IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { PanelBase } from './PanelBase'; export const Panel = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = PanelBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index 90c4756892..61f4bd6233 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -2,16 +2,17 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { useUpdateEffect } from '../hooks/useUpdateEffect'; -import { useMountEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; -import { IconUtils, ObjectUtils, DomHandler, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { PanelMenuBase } from './PanelMenuBase'; import { PanelMenuList } from './PanelMenuList'; export const PanelMenu = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = PanelMenuBase.getProps(inProps, context); diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js index bff684d14c..439d5fe3ff 100644 --- a/components/lib/panelmenu/PanelMenuSub.js +++ b/components/lib/panelmenu/PanelMenuSub.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; -import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; export const PanelMenuSub = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const { ptm, cx } = props; const elementRef = React.useRef(null); diff --git a/components/lib/passthrough/index.d.ts b/components/lib/passthrough/index.d.ts index 04ad096c12..92cffa3794 100644 --- a/components/lib/passthrough/index.d.ts +++ b/components/lib/passthrough/index.d.ts @@ -1,6 +1,7 @@ export interface PassThroughOptions { mergeSections?: boolean | undefined; mergeProps?: boolean | undefined; + classNameMergeFunction?: (className1: string, className2: string) => string | undefined; } export declare function usePassThrough(pt1: object, pt2: object, options?: PassThroughOptions): object; diff --git a/components/lib/passthrough/index.js b/components/lib/passthrough/index.js index 9f4c049008..473cd677fc 100644 --- a/components/lib/passthrough/index.js +++ b/components/lib/passthrough/index.js @@ -2,14 +2,15 @@ * @todo: Add dynamic params support; * * Exp; - * usePassThrough(pt1, pt2, pt3, pt*, { mergeSections: true }); + * usePassThrough(pt1, pt2, { mergeSections: true }); * usePassThrough(pt1, { mergeSections: true }); */ -export const usePassThrough = (pt1 = {}, pt2 = {}, { mergeSections = true, mergeProps = false } = {}) => { +export const usePassThrough = (pt1 = {}, pt2 = {}, { mergeSections = true, mergeProps = false, classNameMergeFunction } = {}) => { return { _usept: { mergeSections, - mergeProps + mergeProps, + classNameMergeFunction }, originalValue: pt1, value: { ...pt1, ...pt2 } diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index 171d7ef498..fe0cfa1b84 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -2,17 +2,18 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; import { EyeIcon } from '../icons/eye'; import { EyeSlashIcon } from '../icons/eyeslash'; import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { PasswordBase } from './PasswordBase'; export const Password = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = PasswordBase.getProps(inProps, context); diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js index 3ccdd9f7f4..92554e1033 100644 --- a/components/lib/picklist/PickList.js +++ b/components/lib/picklist/PickList.js @@ -1,8 +1,8 @@ import * as React from 'react'; import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps, useUpdateEffect } from '../hooks/Hooks'; +import { DomHandler, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { PickListBase } from './PickListBase'; import { PickListControls } from './PickListControls'; import { PickListSubList } from './PickListSubList'; @@ -10,6 +10,7 @@ import { PickListTransferControls } from './PickListTransferControls'; export const PickList = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = PickListBase.getProps(inProps, context); diff --git a/components/lib/picklist/PickListControls.js b/components/lib/picklist/PickListControls.js index 56133b4bf9..59d0e92ad2 100644 --- a/components/lib/picklist/PickListControls.js +++ b/components/lib/picklist/PickListControls.js @@ -1,13 +1,15 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Button } from '../button/Button'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleDoubleDownIcon } from '../icons/angledoubledown'; import { AngleDoubleUpIcon } from '../icons/angledoubleup'; import { AngleDownIcon } from '../icons/angledown'; import { AngleUpIcon } from '../icons/angleup'; -import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, ObjectUtils } from '../utils/Utils'; export const PickListControls = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, cx, unstyled } = props; const moveUpIcon = props.moveUpIcon || ; diff --git a/components/lib/picklist/PickListItem.js b/components/lib/picklist/PickListItem.js index 4ad4d29cfe..4acdf8a178 100644 --- a/components/lib/picklist/PickListItem.js +++ b/components/lib/picklist/PickListItem.js @@ -1,8 +1,10 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { classNames, mergeProps } from '../utils/Utils'; +import { classNames } from '../utils/Utils'; export const PickListItem = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, cx } = props; const getPTOptions = (key) => { diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js index 0c1341b971..eba6e2b85a 100644 --- a/components/lib/picklist/PickListSubList.js +++ b/components/lib/picklist/PickListSubList.js @@ -1,10 +1,12 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { SearchIcon } from '../icons/search'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { PickListItem } from './PickListItem'; export const PickListSubList = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const listElementRef = React.useRef(null); const { ptm, cx } = props; diff --git a/components/lib/picklist/PickListTransferControls.js b/components/lib/picklist/PickListTransferControls.js index 8e9da62aac..8ddb77ce9c 100644 --- a/components/lib/picklist/PickListTransferControls.js +++ b/components/lib/picklist/PickListTransferControls.js @@ -1,6 +1,7 @@ import * as React from 'react'; +import { ariaLabel } from '../api/Locale'; import { Button } from '../button/Button'; -import { useMatchMedia } from '../hooks/Hooks'; +import { useMatchMedia, useMergeProps } from '../hooks/Hooks'; import { AngleDoubleDownIcon } from '../icons/angledoubledown'; import { AngleDoubleLeftIcon } from '../icons/angledoubleleft'; import { AngleDoubleRightIcon } from '../icons/angledoubleright'; @@ -9,10 +10,10 @@ import { AngleDownIcon } from '../icons/angledown'; import { AngleLeftIcon } from '../icons/angleleft'; import { AngleRightIcon } from '../icons/angleright'; import { AngleUpIcon } from '../icons/angleup'; -import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; -import { ariaLabel } from '../api/Locale'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; export const PickListTransferControls = React.memo((props) => { + const mergeProps = useMergeProps(); const viewChanged = useMatchMedia(`(max-width: ${props.breakpoint})`, props.breakpoint); const { ptm, cx, unstyled } = props; diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js index f775bd1c17..b2f16e1956 100644 --- a/components/lib/progressbar/ProgressBar.js +++ b/components/lib/progressbar/ProgressBar.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { ProgressBarBase } from './ProgressBarBase'; export const ProgressBar = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ProgressBarBase.getProps(inProps, context); const { ptm, cx, isUnstyled } = ProgressBarBase.setMetaData({ diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js index 92af3af221..b47c7b3ad3 100644 --- a/components/lib/progressspinner/ProgressSpinner.js +++ b/components/lib/progressspinner/ProgressSpinner.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { ProgressSpinnerBase } from './ProgressSpinnerBase'; export const ProgressSpinner = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ProgressSpinnerBase.getProps(inProps, context); diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index db8b1c0da7..79511b725a 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { RadioButtonBase } from './RadioButtonBase'; export const RadioButton = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = RadioButtonBase.getProps(inProps, context); diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index f697e77552..97380e26a9 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -1,15 +1,17 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; +import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { BanIcon } from '../icons/ban'; import { StarIcon } from '../icons/star'; import { StarFillIcon } from '../icons/starfill'; import { Tooltip } from '../tooltip/Tooltip'; -import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { IconUtils, ObjectUtils } from '../utils/Utils'; import { RatingBase } from './RatingBase'; -import { useHandleStyle } from '../componentbase/ComponentBase'; export const Rating = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = RatingBase.getProps(inProps, context); diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js index 01bfa89b8f..0ce0432ccd 100644 --- a/components/lib/ripple/Ripple.js +++ b/components/lib/ripple/Ripple.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; -import { useMountEffect, useStyle, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps, useMountEffect, useStyle, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { DomHandler, classNames } from '../utils/Utils'; import { RippleBase } from './RippleBase'; export const Ripple = React.memo( @@ -9,6 +9,7 @@ export const Ripple = React.memo( const [isMounted, setMounted] = React.useState(false); const inkRef = React.useRef(null); const targetRef = React.useRef(null); + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = RippleBase.getProps(inProps, context); const isRippleActive = (context && context.ripple) || PrimeReact.ripple; diff --git a/components/lib/row/Row.js b/components/lib/row/Row.js index c6d16edd42..455d7115cd 100644 --- a/components/lib/row/Row.js +++ b/components/lib/row/Row.js @@ -1,9 +1,10 @@ import * as React from 'react'; -import { RowBase } from './RowBase'; -import { mergeProps } from '../utils/Utils'; import { PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; +import { RowBase } from './RowBase'; export const Row = (inProps) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = RowBase.getProps(inProps, context); //@todo Pass Parent MetaData diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js index c5451021c1..38d774d8ff 100644 --- a/components/lib/scrollpanel/ScrollPanel.js +++ b/components/lib/scrollpanel/ScrollPanel.js @@ -1,11 +1,12 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; -import { useMountEffect, useUnmountEffect } from '../hooks/Hooks'; -import { DomHandler, mergeProps, UniqueComponentId } from '../utils/Utils'; -import { ScrollPanelBase } from './ScrollPanelBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps, useMountEffect, useUnmountEffect } from '../hooks/Hooks'; +import { DomHandler, UniqueComponentId } from '../utils/Utils'; +import { ScrollPanelBase } from './ScrollPanelBase'; export const ScrollPanel = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ScrollPanelBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js index db706a8a39..043c5110bc 100644 --- a/components/lib/scrolltop/ScrollTop.js +++ b/components/lib/scrolltop/ScrollTop.js @@ -2,15 +2,16 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useEventListener, useUnmountEffect } from '../hooks/Hooks'; +import { useEventListener, useMergeProps, useUnmountEffect } from '../hooks/Hooks'; import { ChevronUpIcon } from '../icons/chevronup'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { ScrollTopBase } from './ScrollTopBase'; export const ScrollTop = React.memo( React.forwardRef((inProps, ref) => { const [visibleState, setVisibleState] = React.useState(false); + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ScrollTopBase.getProps(inProps, context); const { ptm, cx, isUnstyled } = ScrollTopBase.setMetaData({ diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js index 98c092d519..1440ca31a5 100644 --- a/components/lib/selectbutton/SelectButton.js +++ b/components/lib/selectbutton/SelectButton.js @@ -1,12 +1,14 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; import { SelectButtonBase } from './SelectButtonBase'; import { SelectButtonItem } from './SelectButtonItem'; export const SelectButton = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SelectButtonBase.getProps(inProps, context); diff --git a/components/lib/selectbutton/SelectButtonItem.js b/components/lib/selectbutton/SelectButtonItem.js index d6350af23e..51ef4ec890 100644 --- a/components/lib/selectbutton/SelectButtonItem.js +++ b/components/lib/selectbutton/SelectButtonItem.js @@ -1,9 +1,11 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, ObjectUtils } from '../utils/Utils'; export const SelectButtonItem = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); + const mergeProps = useMergeProps(); const { ptm, cx } = props; const getPTOptions = (key) => { diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js index 0a09b627bb..447e38a737 100644 --- a/components/lib/sidebar/Sidebar.js +++ b/components/lib/sidebar/Sidebar.js @@ -2,14 +2,15 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { TimesIcon } from '../icons/times'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; import { SidebarBase } from './SidebarBase'; export const Sidebar = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SidebarBase.getProps(inProps, context); diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js index 5d965b5f1a..e356dceffc 100644 --- a/components/lib/skeleton/Skeleton.js +++ b/components/lib/skeleton/Skeleton.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { SkeletonBase } from './SkeletonBase'; export const Skeleton = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SkeletonBase.getProps(inProps, context); const { ptm, cx, sx, isUnstyled } = SkeletonBase.setMetaData({ diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js index f59ad4056c..2ed57ef029 100644 --- a/components/lib/slidemenu/SlideMenu.js +++ b/components/lib/slidemenu/SlideMenu.js @@ -2,16 +2,17 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronLeftIcon } from '../icons/chevronleft'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { SlideMenuBase } from './SlideMenuBase'; import { SlideMenuSub } from './SlideMenuSub'; export const SlideMenu = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SlideMenuBase.getProps(inProps, context); diff --git a/components/lib/slidemenu/SlideMenuSub.js b/components/lib/slidemenu/SlideMenuSub.js index cda49c7a0d..5aa722edcf 100644 --- a/components/lib/slidemenu/SlideMenuSub.js +++ b/components/lib/slidemenu/SlideMenuSub.js @@ -1,10 +1,12 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { AngleRightIcon } from '../icons/angleright'; -import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; export const SlideMenuSub = React.memo((props) => { const [activeItemState, setActiveItemState] = React.useState(null); const [renderSubMenu, setRenderSubMenu] = React.useState({}); + const mergeProps = useMergeProps(); const { ptm, cx, sx } = props; const getPTOptions = (item, key) => { diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js index ea5506d0bc..f21d2a4959 100644 --- a/components/lib/slider/Slider.js +++ b/components/lib/slider/Slider.js @@ -1,12 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils'; +import { useEventListener, useMergeProps } from '../hooks/Hooks'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; import { SliderBase } from './SliderBase'; export const Slider = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SliderBase.getProps(inProps, context); diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js index acd01457cc..a880e25a25 100644 --- a/components/lib/speeddial/SpeedDial.js +++ b/components/lib/speeddial/SpeedDial.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { MinusIcon } from '../icons/minus'; import { PlusIcon } from '../icons/plus'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { SpeedDialBase } from './SpeedDialBase'; export const SpeedDial = React.memo( @@ -18,6 +18,7 @@ export const SpeedDial = React.memo( const isItemClicked = React.useRef(false); const elementRef = React.useRef(null); const listRef = React.useRef(null); + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SpeedDialBase.getProps(inProps, context); const visible = props.onVisibleChange ? props.visible : visibleState; diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js index 77940871cd..59a5370ade 100644 --- a/components/lib/splitbutton/SplitButton.js +++ b/components/lib/splitbutton/SplitButton.js @@ -2,16 +2,17 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMountEffect, useUnmountEffect } from '../hooks/Hooks'; +import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUnmountEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { OverlayService } from '../overlayservice/OverlayService'; import { TieredMenu } from '../tieredmenu/TieredMenu'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { SplitButtonBase } from './SplitButtonBase'; export const SplitButton = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SplitButtonBase.getProps(inProps, context); diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js index 5877a1b524..628463512d 100644 --- a/components/lib/splitter/Splitter.js +++ b/components/lib/splitter/Splitter.js @@ -1,14 +1,15 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { useEventListener, useMergeProps } from '../hooks/Hooks'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { SplitterBase, SplitterPanelBase } from './SplitterBase'; export const SplitterPanel = () => {}; export const Splitter = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = SplitterBase.getProps(inProps, context); diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js index 09ae679165..5900a9baf9 100644 --- a/components/lib/steps/Steps.js +++ b/components/lib/steps/Steps.js @@ -1,12 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; -import { IconUtils, DomHandler, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { StepsBase } from './StepsBase'; export const Steps = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = StepsBase.getProps(inProps, context); diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js index b5623336e3..5b53168195 100644 --- a/components/lib/tabmenu/TabMenu.js +++ b/components/lib/tabmenu/TabMenu.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; import { TabMenuBase } from './TabMenuBase'; export const TabMenu = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TabMenuBase.getProps(inProps, context); diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js index 2c44f0a39f..9850b748c4 100644 --- a/components/lib/tabview/TabView.js +++ b/components/lib/tabview/TabView.js @@ -1,17 +1,18 @@ import * as React from 'react'; import { PrimeReactContext, ariaLabel } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronLeftIcon } from '../icons/chevronleft'; import { ChevronRightIcon } from '../icons/chevronright'; import { TimesIcon } from '../icons/times'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { TabPanelBase, TabViewBase } from './TabViewBase'; export const TabPanel = () => {}; export const TabView = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TabViewBase.getProps(inProps, context); diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js index 8c32154b80..d24c55b0f2 100644 --- a/components/lib/tag/Tag.js +++ b/components/lib/tag/Tag.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { IconUtils, classNames, mergeProps } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { IconUtils, classNames } from '../utils/Utils'; import { TagBase } from './TagBase'; export const Tag = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TagBase.getProps(inProps, context); const { ptm, cx, isUnstyled } = TagBase.setMetaData({ diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js index dc80c27b96..29cb420a79 100644 --- a/components/lib/terminal/Terminal.js +++ b/components/lib/terminal/Terminal.js @@ -1,12 +1,14 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; import { TerminalService } from '../terminalservice/TerminalService'; -import { DomHandler, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, classNames } from '../utils/Utils'; import { TerminalBase } from './TerminalBase'; export const Terminal = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TerminalBase.getProps(inProps, context); diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js index dbd8bf0480..b6d1cb6506 100644 --- a/components/lib/tieredmenu/TieredMenu.js +++ b/components/lib/tieredmenu/TieredMenu.js @@ -2,15 +2,16 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useMatchMedia, useMountEffect, useEventListener, useUnmountEffect, useUpdateEffect, useResizeListener } from '../hooks/Hooks'; +import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { TieredMenuBase } from './TieredMenuBase'; import { TieredMenuSub } from './TieredMenuSub'; export const TieredMenu = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TieredMenuBase.getProps(inProps, context); diff --git a/components/lib/tieredmenu/TieredMenuSub.js b/components/lib/tieredmenu/TieredMenuSub.js index fec1ee2a8a..36f7c33f9d 100644 --- a/components/lib/tieredmenu/TieredMenuSub.js +++ b/components/lib/tieredmenu/TieredMenuSub.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import { useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useUpdateEffect } from '../hooks/Hooks'; import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; export const TieredMenuSub = React.memo( React.forwardRef((props, ref) => { const elementRef = React.useRef(null); + const mergeProps = useMergeProps(); const { ptm, cx, sx } = props; const getPTOptions = (item, key) => { diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js index 001cf40135..0aa175de3e 100644 --- a/components/lib/timeline/Timeline.js +++ b/components/lib/timeline/Timeline.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; -import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; -import { TimelineBase } from './TimelineBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames, ObjectUtils } from '../utils/Utils'; +import { TimelineBase } from './TimelineBase'; export const Timeline = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TimelineBase.getProps(inProps, context); const { ptm, cx, isUnstyled } = TimelineBase.setMetaData({ diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js index 76644a54c0..db8c6f80b9 100644 --- a/components/lib/toast/Toast.js +++ b/components/lib/toast/Toast.js @@ -3,9 +3,9 @@ import { TransitionGroup } from 'react-transition-group'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { ObjectUtils, ZIndexUtils } from '../utils/Utils'; import { ToastBase } from './ToastBase'; import { ToastMessage } from './ToastMessage'; @@ -13,6 +13,7 @@ let messageIdx = 0; export const Toast = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ToastBase.getProps(inProps, context); diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js index a021f84157..7c7f4f24a8 100644 --- a/components/lib/toast/ToastMessage.js +++ b/components/lib/toast/ToastMessage.js @@ -1,16 +1,17 @@ import * as React from 'react'; import { localeOption } from '../api/Locale'; -import { useTimeout } from '../hooks/Hooks'; +import { useMergeProps, useTimeout } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { ExclamationTriangleIcon } from '../icons/exclamationtriangle'; import { InfoCircleIcon } from '../icons/infocircle'; import { TimesIcon } from '../icons/times'; import { TimesCircleIcon } from '../icons/timescircle'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; export const ToastMessage = React.memo( React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const { messageInfo, metaData: parentMetaData, diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js index b1e18a2645..abc680a496 100644 --- a/components/lib/togglebutton/ToggleButton.js +++ b/components/lib/togglebutton/ToggleButton.js @@ -1,15 +1,16 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { ToggleButtonBase } from './ToggleButtonBase'; export const ToggleButton = React.memo( React.forwardRef((inProps, ref) => { const [focusedState, setFocusedState] = React.useState(false); + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ToggleButtonBase.getProps(inProps, context); const elementRef = React.useRef(null); diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js index 988db19d54..293d4feb45 100644 --- a/components/lib/toolbar/Toolbar.js +++ b/components/lib/toolbar/Toolbar.js @@ -1,11 +1,13 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; -import { ObjectUtils, mergeProps } from '../utils/Utils'; -import { ToolbarBase } from './ToolbarBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; +import { ObjectUtils } from '../utils/Utils'; +import { ToolbarBase } from './ToolbarBase'; export const Toolbar = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ToolbarBase.getProps(inProps, context); const elementRef = React.useRef(null); diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index fe83adec1d..d2d2e18de9 100644 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -1,13 +1,14 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { TooltipBase } from './TooltipBase'; export const Tooltip = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TooltipBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(false); diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index 20b13edd05..707caad40f 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -1,15 +1,17 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; +import { useMergeProps } from '../hooks/Hooks'; +import { useUpdateEffect } from '../hooks/useUpdateEffect'; import { SearchIcon } from '../icons/search'; import { SpinnerIcon } from '../icons/spinner'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { TreeBase } from './TreeBase'; import { UITreeNode } from './UITreeNode'; -import { useUpdateEffect } from '../hooks/useUpdateEffect'; export const Tree = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TreeBase.getProps(inProps, context); diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index 12378ade11..4e9b417e50 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -1,15 +1,17 @@ import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; import { MinusIcon } from '../icons/minus'; import { Ripple } from '../ripple/Ripple'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; export const UITreeNode = React.memo((props) => { const contentRef = React.useRef(null); const elementRef = React.useRef(null); const nodeTouched = React.useRef(false); + const mergeProps = useMergeProps(); const isLeaf = props.isNodeLeaf(props.node); const label = props.node.label; const expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || props.node.expanded; diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js index 0a3bec8790..67b49859e1 100644 --- a/components/lib/treeselect/TreeSelect.js +++ b/components/lib/treeselect/TreeSelect.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { SearchIcon } from '../icons/search'; import { TimesIcon } from '../icons/times'; @@ -9,12 +9,13 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { Tree } from '../tree/Tree'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { TreeSelectBase } from './TreeSelectBase'; import { TreeSelectPanel } from './TreeSelectPanel'; export const TreeSelect = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TreeSelectBase.getProps(inProps, context); diff --git a/components/lib/treeselect/TreeSelectPanel.js b/components/lib/treeselect/TreeSelectPanel.js index 67e3534713..bf7242e25f 100644 --- a/components/lib/treeselect/TreeSelectPanel.js +++ b/components/lib/treeselect/TreeSelectPanel.js @@ -1,10 +1,11 @@ import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { mergeProps } from '../utils/Utils'; -import { PrimeReactContext } from '../api/Api'; export const TreeSelectPanel = React.forwardRef((props, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const { ptm, cx } = props; diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js index 0ceadb882f..de05ea963e 100644 --- a/components/lib/treetable/TreeTable.js +++ b/components/lib/treetable/TreeTable.js @@ -2,12 +2,12 @@ import * as React from 'react'; import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener } from '../hooks/Hooks'; +import { useEventListener, useMergeProps } from '../hooks/Hooks'; import { ArrowDownIcon } from '../icons/arrowdown'; import { ArrowUpIcon } from '../icons/arrowup'; import { SpinnerIcon } from '../icons/spinner'; import { Paginator } from '../paginator/Paginator'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { TreeTableBase } from './TreeTableBase'; import { TreeTableBody } from './TreeTableBody'; import { TreeTableFooter } from './TreeTableFooter'; @@ -15,6 +15,7 @@ import { TreeTableHeader } from './TreeTableHeader'; import { TreeTableScrollableView } from './TreeTableScrollableView'; export const TreeTable = React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TreeTableBase.getProps(inProps, context); const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys); diff --git a/components/lib/treetable/TreeTableBody.js b/components/lib/treetable/TreeTableBody.js index aa59e93380..7e2fa374dc 100644 --- a/components/lib/treetable/TreeTableBody.js +++ b/components/lib/treetable/TreeTableBody.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; -import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { useMergeProps } from '../hooks/Hooks'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; import { TreeTableRow } from './TreeTableRow'; export const TreeTableBody = React.memo((props) => { + const mergeProps = useMergeProps(); const isSingleSelectionMode = props.selectionMode === 'single'; const isMultipleSelectionMode = props.selectionMode === 'multiple'; const { ptm, cx } = props.ptCallbacks; diff --git a/components/lib/treetable/TreeTableBodyCell.js b/components/lib/treetable/TreeTableBodyCell.js index da69fa285c..8a51d28621 100644 --- a/components/lib/treetable/TreeTableBodyCell.js +++ b/components/lib/treetable/TreeTableBodyCell.js @@ -1,8 +1,8 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; -import { useEventListener, useUnmountEffect } from '../hooks/Hooks'; +import { useEventListener, useMergeProps, useUnmountEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; -import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; export const TreeTableBodyCell = (props) => { const [editingState, setEditingState] = React.useState(false); @@ -11,6 +11,7 @@ export const TreeTableBodyCell = (props) => { const selfClick = React.useRef(false); const overlayEventListener = React.useRef(null); const tabIndexTimeout = React.useRef(null); + const mergeProps = useMergeProps(); const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); const getColumnProps = (column) => ColumnBase.getCProps(column); const { ptm, ptmo, cx } = props.ptCallbacks; diff --git a/components/lib/treetable/TreeTableFooter.js b/components/lib/treetable/TreeTableFooter.js index 38f855ea2e..1b1c1203cc 100644 --- a/components/lib/treetable/TreeTableFooter.js +++ b/components/lib/treetable/TreeTableFooter.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; +import { useMergeProps } from '../hooks/Hooks'; import { RowBase } from '../row/RowBase'; -import { mergeProps, ObjectUtils } from '../utils/Utils'; +import { ObjectUtils } from '../utils/Utils'; export const TreeTableFooter = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, ptmo, cx } = props.ptCallbacks; const getColumnProp = (column, name) => { diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js index e415b6e4ec..350422bbf5 100644 --- a/components/lib/treetable/TreeTableHeader.js +++ b/components/lib/treetable/TreeTableHeader.js @@ -1,15 +1,17 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; +import { useMergeProps } from '../hooks/Hooks'; import { SortAltIcon } from '../icons/sortalt'; import { SortAmountDownIcon } from '../icons/sortamountdown'; import { SortAmountUpAltIcon } from '../icons/sortamountupalt'; import { InputText } from '../inputtext/InputText'; import { RowBase } from '../row/RowBase'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; export const TreeTableHeader = React.memo((props) => { + const mergeProps = useMergeProps(); const { ptm, ptmo, cx } = props.ptCallbacks; const filterTimeout = React.useRef(null); diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js index 9daab4ad94..201d51ba65 100644 --- a/components/lib/treetable/TreeTableRow.js +++ b/components/lib/treetable/TreeTableRow.js @@ -1,12 +1,13 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; +import { useMergeProps } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; import { MinusIcon } from '../icons/minus'; import { Ripple } from '../ripple/Ripple'; -import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { TreeTableBodyCell } from './TreeTableBodyCell'; export const TreeTableRow = React.memo((props) => { @@ -14,6 +15,7 @@ export const TreeTableRow = React.memo((props) => { const checkboxRef = React.useRef(null); const checkboxBoxRef = React.useRef(null); const nodeTouched = React.useRef(false); + const mergeProps = useMergeProps(); const expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false; const getColumnProp = (column, name) => { diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js index 9c2efd8cc9..37848351d6 100644 --- a/components/lib/treetable/TreeTableScrollableView.js +++ b/components/lib/treetable/TreeTableScrollableView.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import { useMountEffect } from '../hooks/Hooks'; -import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; +import { DomHandler, ObjectUtils } from '../utils/Utils'; export const TreeTableScrollableView = React.memo((props) => { const elementRef = React.useRef(null); @@ -10,6 +10,7 @@ export const TreeTableScrollableView = React.memo((props) => { const scrollTableRef = React.useRef(null); const scrollFooterRef = React.useRef(null); const scrollFooterBoxRef = React.useRef(null); + const mergeProps = useMergeProps(); const { ptm, cx, sx } = props.ptCallbacks; const getPTOptions = (key, options) => { diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index 62aa6c993d..ad668bd615 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -1,15 +1,16 @@ import * as React from 'react'; import { PrimeReactContext, ariaLabel } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMountEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { CheckIcon } from '../icons/check'; import { TimesIcon } from '../icons/times'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { TriStateCheckboxBase } from './TriStateCheckboxBase'; export const TriStateCheckbox = React.memo( React.forwardRef((inProps, ref) => { + const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = TriStateCheckboxBase.getProps(inProps, context); diff --git a/components/lib/utils/MergeProps.js b/components/lib/utils/MergeProps.js index c22dbcfd8b..22b53f8b50 100644 --- a/components/lib/utils/MergeProps.js +++ b/components/lib/utils/MergeProps.js @@ -1,5 +1,6 @@ -export function mergeProps(...props) { +export function _mergeProps(props, options = {}) { if (props) { + const { classNameMergeFunction } = options; const isFn = (o) => !!(o && o.constructor && o.call && o.apply); return props.reduce((merged, ps) => { @@ -9,7 +10,14 @@ export function mergeProps(...props) { if (key === 'style') { merged['style'] = { ...merged['style'], ...ps['style'] }; } else if (key === 'className') { - let newClassname = [merged['className'], ps['className']].join(' ').trim(); + let newClassname = ''; + + if (classNameMergeFunction && classNameMergeFunction instanceof Function) { + newClassname = classNameMergeFunction(merged['className'], ps['className']); + } else { + newClassname = [merged['className'], ps['className']].join(' ').trim(); + } + const isEmpty = newClassname === null || newClassname === undefined || newClassname === ''; merged['className'] = isEmpty ? undefined : newClassname; diff --git a/components/lib/utils/Utils.js b/components/lib/utils/Utils.js index 1870e37861..aa1014d807 100644 --- a/components/lib/utils/Utils.js +++ b/components/lib/utils/Utils.js @@ -3,9 +3,9 @@ import DomHandler from './DomHandler'; import EventBus from './EventBus'; import IconUtils from './IconUtils'; import { mask } from './Mask'; -import { mergeProps } from './MergeProps'; +import { _mergeProps } from './MergeProps'; import ObjectUtils from './ObjectUtils'; import UniqueComponentId from './UniqueComponentId'; import { ZIndexUtils } from './ZIndexUtils'; -export { DomHandler, EventBus, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask, mergeProps }; +export { DomHandler, EventBus, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, _mergeProps, classNames, mask }; diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts index 803e34ed51..ff0e6b4a8d 100644 --- a/components/lib/utils/utils.d.ts +++ b/components/lib/utils/utils.d.ts @@ -9,7 +9,7 @@ import * as React from 'react'; export declare function classNames(...args: any[]): string | undefined; -export declare function mergeProps(...args: object[]): object | undefined; +export declare function _mergeProps(args: object[], options?: any): object | undefined; export declare class DomHandler { static innerWidth(el: HTMLElement): number;