Fixed #3786 - (2/2) Core: Deprecated defaultProps still used

components/lib/accordion/Accordion.js

@@ -3,18 +3,20 @@ import { ariaLabel } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
 import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
-import { AccordionDefaultProps, AccordionTabDefaultProps, getTabProp } from './AccordionBase';
+import { AccordionBase, AccordionTabBase } from './AccordionBase';
 
 export const AccordionTab = () => {};
 
 export const Accordion = React.forwardRef((inProps, ref) => {
-    const props = ObjectUtils.getProps(inProps, AccordionDefaultProps);
+    const props = AccordionBase.getProps(inProps);
 
     const [idState, setIdState] = React.useState(props.id);
     const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
     const elementRef = React.useRef(null);
     const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
 
+    const getTabProp = (tab, name) => AccordionTabBase.getCProp(tab, name);
+
     const onTabHeaderClick = (event, tab, index) => {
         if (!getTabProp(tab, 'disabled')) {
             const selected = isSelected(index);
@@ -78,7 +80,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
         const headerId = idState + '_header_' + index;
         const ariaControls = idState + '_content_' + index;
         const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
-        const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), { ...AccordionTabDefaultProps, ...tab.props }) : <span className="p-accordion-header-text">{getTabProp(tab, 'header')}</span>;
+        const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : <span className="p-accordion-header-text">{getTabProp(tab, 'header')}</span>;
         const icon = IconUtils.getJSXIcon(selected ? props.collapseIcon : props.expandIcon, { className: 'p-accordion-toggle-icon' }, { props, selected });
         const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
 
@@ -112,7 +114,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
         if (ObjectUtils.isValidChild(tab, 'AccordionTab')) {
             const key = idState + '_' + index;
             const selected = isSelected(index);
-            const otherProps = ObjectUtils.findDiffKeys(tab.props, AccordionTabDefaultProps);
+            const otherProps = AccordionTabBase.getCOtherProps(tab);
             const tabHeader = createTabHeader(tab, selected, index);
             const tabContent = createTabContent(tab, selected, index);
             const tabClassName = classNames('p-accordion-tab', {
@@ -134,7 +136,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
         return React.Children.map(props.children, createTab);
     };
 
-    const otherProps = ObjectUtils.findDiffKeys(props, AccordionDefaultProps);
+    const otherProps = AccordionBase.getOtherProps(props);
     const className = classNames('p-accordion p-component', props.className);
     const tabs = createTabs();
 

components/lib/accordion/AccordionBase.js

@@ -1,32 +1,41 @@
 import { ObjectUtils } from '../utils/Utils';
 
-export const AccordionDefaultProps = {
-    __TYPE: 'Accordion',
-    id: null,
-    activeIndex: null,
-    className: null,
-    style: null,
-    multiple: false,
-    expandIcon: 'pi pi-chevron-right',
-    collapseIcon: 'pi pi-chevron-down',
-    transitionOptions: null,
-    onTabOpen: null,
-    onTabClose: null,
-    onTabChange: null
+export const AccordionBase = {
+    defaultProps: {
+        __TYPE: 'Accordion',
+        id: null,
+        activeIndex: null,
+        className: null,
+        style: null,
+        multiple: false,
+        expandIcon: 'pi pi-chevron-right',
+        collapseIcon: 'pi pi-chevron-down',
+        transitionOptions: null,
+        onTabOpen: null,
+        onTabClose: null,
+        onTabChange: null,
+        children: undefined
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, AccordionBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, AccordionBase.defaultProps)
 };
 
-export const AccordionTabDefaultProps = {
-    __TYPE: 'AccordionTab',
-    className: null,
-    contentClassName: null,
-    contentStyle: null,
-    disabled: false,
-    header: null,
-    headerClassName: null,
-    headerStyle: null,
-    headerTemplate: null,
-    style: null,
-    tabIndex: 0
+export const AccordionTabBase = {
+    defaultProps: {
+        __TYPE: 'AccordionTab',
+        className: null,
+        contentClassName: null,
+        contentStyle: null,
+        disabled: false,
+        header: null,
+        headerClassName: null,
+        headerStyle: null,
+        headerTemplate: null,
+        style: null,
+        tabIndex: 0,
+        children: undefined
+    },
+    getCProp: (tab, name) => ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps),
+    getCProps: (tab) => ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps),
+    getCOtherProps: (tab) => ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps)
 };
-
-export const getTabProp = (tab, name) => ObjectUtils.getProp(tab, name, AccordionTabDefaultProps);

components/lib/autocomplete/AutoComplete.js

@@ -6,12 +6,12 @@ import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
-import { AutoCompleteDefaultProps } from './AutoCompleteBase';
+import { AutoCompleteBase } from './AutoCompleteBase';
 import { AutoCompletePanel } from './AutoCompletePanel';
 
 export const AutoComplete = React.memo(
     React.forwardRef((inProps, ref) => {
-        const props = ObjectUtils.getProps(inProps, AutoCompleteDefaultProps);
+        const props = AutoCompleteBase.getProps(inProps);
 
         const [idState, setIdState] = React.useState(props.id);
         const [searchingState, setSearchingState] = React.useState(false);
@@ -620,7 +620,7 @@ export const AutoComplete = React.memo(
 
         const listId = idState + '_list';
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-        const otherProps = ObjectUtils.findDiffKeys(props, AutoCompleteDefaultProps);
+        const otherProps = AutoCompleteBase.getOtherProps(props);
         const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-autocomplete p-component p-inputwrapper',

components/lib/autocomplete/AutoCompleteBase.js

@@ -1,65 +1,72 @@
-export const AutoCompleteDefaultProps = {
-    __TYPE: 'AutoComplete',
-    id: null,
-    appendTo: null,
-    autoFocus: false,
-    autoHighlight: false,
-    className: null,
-    completeMethod: null,
-    delay: 300,
-    disabled: false,
-    dropdown: false,
-    dropdownAriaLabel: null,
-    dropdownAutoFocus: true,
-    dropdownIcon: 'pi pi-chevron-down',
-    dropdownMode: 'blank',
-    emptyMessage: null,
-    field: null,
-    forceSelection: false,
-    inputClassName: null,
-    inputId: null,
-    inputRef: null,
-    inputStyle: null,
-    itemTemplate: null,
-    maxLength: null,
-    minLength: 1,
-    multiple: false,
-    name: null,
-    onBlur: null,
-    onChange: null,
-    onClear: null,
-    onClick: null,
-    onContextMenu: null,
-    onDblClick: null,
-    onDropdownClick: null,
-    onFocus: null,
-    onHide: null,
-    onKeyPress: null,
-    onKeyUp: null,
-    onMouseDown: null,
-    onSelect: null,
-    onShow: null,
-    onUnselect: null,
-    optionGroupChildren: null,
-    optionGroupLabel: null,
-    optionGroupTemplate: null,
-    panelClassName: null,
-    panelStyle: null,
-    placeholder: null,
-    readOnly: false,
-    removeIcon: 'pi pi-times-circle',
-    scrollHeight: '200px',
-    selectedItemTemplate: null,
-    selectionLimit: null,
-    showEmptyMessage: false,
-    size: null,
-    style: null,
-    suggestions: null,
-    tabIndex: null,
-    tooltip: null,
-    tooltipOptions: null,
-    transitionOptions: null,
-    type: 'text',
-    value: null,
-    virtualScrollerOptions: null
+import { ObjectUtils } from '../utils/Utils';
+
+export const AutoCompleteBase = {
+    defaultProps: {
+        __TYPE: 'AutoComplete',
+        id: null,
+        appendTo: null,
+        autoFocus: false,
+        autoHighlight: false,
+        className: null,
+        completeMethod: null,
+        delay: 300,
+        disabled: false,
+        dropdown: false,
+        dropdownAriaLabel: null,
+        dropdownAutoFocus: true,
+        dropdownIcon: 'pi pi-chevron-down',
+        dropdownMode: 'blank',
+        emptyMessage: null,
+        field: null,
+        forceSelection: false,
+        inputClassName: null,
+        inputId: null,
+        inputRef: null,
+        inputStyle: null,
+        itemTemplate: null,
+        maxLength: null,
+        minLength: 1,
+        multiple: false,
+        name: null,
+        onBlur: null,
+        onChange: null,
+        onClear: null,
+        onClick: null,
+        onContextMenu: null,
+        onDblClick: null,
+        onDropdownClick: null,
+        onFocus: null,
+        onHide: null,
+        onKeyPress: null,
+        onKeyUp: null,
+        onMouseDown: null,
+        onSelect: null,
+        onShow: null,
+        onUnselect: null,
+        optionGroupChildren: null,
+        optionGroupLabel: null,
+        optionGroupTemplate: null,
+        panelClassName: null,
+        panelStyle: null,
+        placeholder: null,
+        readOnly: false,
+        removeIcon: 'pi pi-times-circle',
+        scrollHeight: '200px',
+        selectedItemTemplate: null,
+        selectionLimit: null,
+        showEmptyMessage: false,
+        size: null,
+        style: null,
+        suggestions: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        transitionOptions: null,
+        type: 'text',
+        value: null,
+        virtualScrollerOptions: null,
+        children: undefined
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, AutoCompleteBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, AutoCompleteBase.defaultProps)
 };

components/lib/avatar/Avatar.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
-import { AvatarDefaultProps } from './AvatarBase';
+import { AvatarBase } from './AvatarBase';
 
 export const Avatar = React.forwardRef((inProps, ref) => {
-    const props = ObjectUtils.getProps(inProps, AvatarDefaultProps);
+    const props = AvatarBase.getProps(inProps);
 
     const elementRef = React.useRef(null);
     const [imageFailed, setImageFailed] = React.useState(false);
@@ -40,7 +40,7 @@ export const Avatar = React.forwardRef((inProps, ref) => {
         getElement: () => elementRef.current
     }));
 
-    const otherProps = ObjectUtils.findDiffKeys(props, AvatarDefaultProps);
+    const otherProps = AvatarBase.getOtherProps(props);
     const containerClassName = classNames(
         'p-avatar p-component',
         {

components/lib/avatar/AvatarBase.js

@@ -1,14 +1,21 @@
-export const AvatarDefaultProps = {
-    __TYPE: 'Avatar',
-    className: null,
-    icon: null,
-    image: null,
-    imageAlt: 'avatar',
-    imageFallback: 'default',
-    label: null,
-    onImageError: null,
-    shape: 'square',
-    size: 'normal',
-    style: null,
-    template: null
+import { ObjectUtils } from '../utils/Utils';
+
+export const AvatarBase = {
+    defaultProps: {
+        __TYPE: 'Avatar',
+        className: null,
+        icon: null,
+        image: null,
+        imageAlt: 'avatar',
+        imageFallback: 'default',
+        label: null,
+        onImageError: null,
+        shape: 'square',
+        size: 'normal',
+        style: null,
+        template: null,
+        children: undefined
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, AvatarBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, AvatarBase.defaultProps)
 };

components/lib/avatargroup/AvatarGroup.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { classNames, ObjectUtils } from '../utils/Utils';
-import { AvatarGroupDefaultProps } from './AvatarGroupBase';
+import { classNames } from '../utils/Utils';
+import { AvatarGroupBase } from './AvatarGroupBase';
 
 export const AvatarGroup = React.forwardRef((inProps, ref) => {
-    const props = ObjectUtils.getProps(inProps, AvatarGroupDefaultProps);
+    const props = AvatarGroupBase.getProps(inProps);
 
     const elementRef = React.useRef(null);
-    const otherProps = ObjectUtils.findDiffKeys(props, AvatarGroupDefaultProps);
+    const otherProps = AvatarGroupBase.getOtherProps(props);
     const className = classNames('p-avatar-group p-component', props.className);
 
     React.useImperativeHandle(ref, () => ({

components/lib/avatargroup/AvatarGroupBase.js

@@ -1,5 +1,12 @@
-export const AvatarGroupDefaultProps = {
-    __TYPE: 'AvatarGroup',
-    style: null,
-    className: null
+import { ObjectUtils } from '../utils/Utils';
+
+export const AvatarGroupBase = {
+    defaultProps: {
+        __TYPE: 'AvatarGroup',
+        style: null,
+        className: null,
+        children: undefined
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, AvatarGroupBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, AvatarGroupBase.defaultProps)
 };

components/lib/badge/Badge.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
-import { BadgeDefaultProps } from './BadgeBase';
+import { BadgeBase } from './BadgeBase';
 
 export const Badge = React.memo(
     React.forwardRef((inProps, ref) => {
-        const props = ObjectUtils.getProps(inProps, BadgeDefaultProps);
+        const props = BadgeBase.getProps(inProps);
 
         const elementRef = React.useRef(null);
-        const otherProps = ObjectUtils.findDiffKeys(props, BadgeDefaultProps);
+        const otherProps = BadgeBase.getOtherProps(props);
         const className = classNames(
             'p-badge p-component',
             {