diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index 445f5a97c5..f7004b369a 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -21,7 +21,8 @@ export const AutoComplete = React.memo( const [searchingState, setSearchingState] = React.useState(false); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); - const { ptm, cx, sx, isUnstyled } = AutoCompleteBase.setMetaData({ + + const metaData = { props, state: { id: idState, @@ -29,7 +30,9 @@ export const AutoComplete = React.memo( focused: focusedState, overlayVisible: overlayVisibleState } - }); + }; + + const { ptm, cx, sx, isUnstyled } = AutoCompleteBase.setMetaData(metaData); useHandleStyle(AutoCompleteBase.css.styles, isUnstyled, { name: 'autocomplete' }); const elementRef = React.useRef(null); @@ -551,6 +554,7 @@ export const AutoComplete = React.memo( onDoubleClick={props.onDblClick} pt={ptm('input')} {...ariaProps} + __parentMetadata={{ parent: metaData }} /> ); }; @@ -667,7 +671,18 @@ export const AutoComplete = React.memo( if (props.dropdown) { const ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose'); - return ; diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js index cade99df89..04568f0086 100644 --- a/components/lib/inputmask/InputMask.js +++ b/components/lib/inputmask/InputMask.js @@ -23,6 +23,9 @@ export const InputMask = React.memo( const defaultBuffer = React.useRef(null); const caretTimeoutId = React.useRef(null); const androidChrome = React.useRef(false); + const metaData = { + props + }; const caret = (first, last) => { let range, begin, end; @@ -610,6 +613,7 @@ export const InputMask = React.memo( tooltipOptions={props.tooltipOptions} pt={props.pt} unstyled={props.unstyled} + __parentMetadata={{ parent: metaData }} /> ); }) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index f4af542c93..672c1b927e 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -15,12 +15,14 @@ export const InputNumber = React.memo( const context = React.useContext(PrimeReactContext); const props = InputNumberBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); - const { ptm, cx, isUnstyled } = InputNumberBase.setMetaData({ + const metaData = { props, + ...props.__parentMetadata, state: { focused: focusedState } - }); + }; + const { ptm, cx, isUnstyled } = InputNumberBase.setMetaData(metaData); useHandleStyle(InputNumberBase.css.styles, isUnstyled, { name: 'inputnumber' }); const elementRef = React.useRef(null); @@ -1057,6 +1059,7 @@ export const InputNumber = React.memo( {...ariaProps} {...dataProps} pt={ptm('input')} + __parentMetadata={{ parent: metaData }} /> ); }; diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js index c32e043a62..95d74996f1 100644 --- a/components/lib/inputnumber/InputNumberBase.js +++ b/components/lib/inputnumber/InputNumberBase.js @@ -129,6 +129,7 @@ const styles = ` export const InputNumberBase = ComponentBase.extend({ defaultProps: { __TYPE: 'InputNumber', + __parentMetadata: null, allowEmpty: true, ariaLabelledBy: null, autoFocus: false, diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js index c80df46eb6..9d3f79ab59 100644 --- a/components/lib/inputtext/InputText.js +++ b/components/lib/inputtext/InputText.js @@ -10,8 +10,10 @@ export const InputText = React.memo( React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); const props = InputTextBase.getProps(inProps, context); + const { ptm, cx, isUnstyled } = InputTextBase.setMetaData({ props, + ...props.__parentMetadata, context: { disabled: props.disabled } diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js index 05fc2d6be5..258079b8db 100644 --- a/components/lib/inputtext/InputTextBase.js +++ b/components/lib/inputtext/InputTextBase.js @@ -16,6 +16,7 @@ const classes = { export const InputTextBase = ComponentBase.extend({ defaultProps: { __TYPE: 'InputText', + __parentMetadata: null, keyfilter: null, validateOnly: false, tooltip: null, diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js index 59fe55976d..ae45442177 100644 --- a/components/lib/inputtextarea/InputTextarea.js +++ b/components/lib/inputtextarea/InputTextarea.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; +import { useHandleStyle } from '../componentbase/ComponentBase'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { InputTextareaBase } from './InputTextareaBase'; -import { useHandleStyle } from '../componentbase/ComponentBase'; export const InputTextarea = React.memo( React.forwardRef((inProps, ref) => { @@ -16,6 +16,7 @@ export const InputTextarea = React.memo( const { ptm, cx, isUnstyled } = InputTextareaBase.setMetaData({ props, + ...props.__parentMetadata, context: { disabled: props.disabled } diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js index 30d17aa3df..6fccf868b9 100644 --- a/components/lib/inputtextarea/InputTextareaBase.js +++ b/components/lib/inputtextarea/InputTextareaBase.js @@ -28,6 +28,7 @@ const styles = ` export const InputTextareaBase = ComponentBase.extend({ defaultProps: { __TYPE: 'InputTextarea', + __parentMetadata: null, autoResize: false, keyfilter: null, onBlur: null, diff --git a/components/lib/listbox/ListBoxHeader.js b/components/lib/listbox/ListBoxHeader.js index cfe737c5f5..793f8031a1 100644 --- a/components/lib/listbox/ListBoxHeader.js +++ b/components/lib/listbox/ListBoxHeader.js @@ -59,6 +59,7 @@ export const ListBoxHeader = React.memo((props) => { {...props.filterInputProps} pt={ptm('filterInput')} unstyled={props.unstyled} + __parentMetadata={{ parent: props.metaData }} /> {filterIcon} diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js index 45d38e9cc8..6648996d85 100644 --- a/components/lib/mention/Mention.js +++ b/components/lib/mention/Mention.js @@ -1,5 +1,6 @@ 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 { InputTextarea } from '../inputtextarea/InputTextarea'; @@ -8,7 +9,6 @@ import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; import { MentionBase } from './MentionBase'; -import { useHandleStyle } from '../componentbase/ComponentBase'; export const Mention = React.memo( React.forwardRef((inProps, ref) => { @@ -24,8 +24,7 @@ export const Mention = React.memo( const inputRef = React.useRef(props.inputRef); const listRef = React.useRef(null); const timeout = React.useRef(null); - - const { ptm, cx, sx, isUnstyled } = MentionBase.setMetaData({ + const metaData = { props, state: { overlayVisible: overlayVisibleState, @@ -33,7 +32,8 @@ export const Mention = React.memo( searching: searchingState, trigger: triggerState } - }); + }; + const { ptm, cx, sx, isUnstyled } = MentionBase.setMetaData(metaData); useHandleStyle(MentionBase.css.styles, isUnstyled, { name: 'mention' }); @@ -463,7 +463,10 @@ export const Mention = React.memo( onKeyDown: onKeyDown, onInput: onInput, onKeyUp: onKeyUp, - onChange: onChange + onChange: onChange, + __parentMetadata: { + parent: metaData + } }, ptm('input') ); diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js index e5bad88586..0a270f6914 100644 --- a/components/lib/messages/Messages.js +++ b/components/lib/messages/Messages.js @@ -17,6 +17,7 @@ export const Messages = React.memo( const elementRef = React.useRef(null); const metaData = { props, + ...props.__parentMetadata, state: { messages: messagesState } diff --git a/components/lib/messages/MessagesBase.js b/components/lib/messages/MessagesBase.js index c7dcbb651b..5ffb3c08b2 100644 --- a/components/lib/messages/MessagesBase.js +++ b/components/lib/messages/MessagesBase.js @@ -64,6 +64,7 @@ const classes = { export const MessagesBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Messages', + __parentMetadata: null, id: null, className: null, style: null, diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index d5d53b3583..893f4d76c7 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -1,15 +1,15 @@ import * as React from 'react'; import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api'; +import { useHandleStyle } from '../componentbase/ComponentBase'; import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; 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, mergeProps } from '../utils/Utils'; import { MultiSelectBase } from './MultiSelectBase'; import { MultiSelectPanel } from './MultiSelectPanel'; -import { useHandleStyle } from '../componentbase/ComponentBase'; export const MultiSelect = React.memo( React.forwardRef((inProps, ref) => { @@ -26,15 +26,15 @@ export const MultiSelect = React.memo( const hasFilter = filterState && filterState.trim().length > 0; const empty = ObjectUtils.isEmpty(props.value); const equalityKey = props.optionValue ? null : props.dataKey; - - const { ptm, cx, sx, isUnstyled } = MultiSelectBase.setMetaData({ + const metaData = { props, state: { filterState: filterState, focused: focusedState, overlayVisible: overlayVisibleState } - }); + }; + const { ptm, cx, sx, isUnstyled } = MultiSelectBase.setMetaData(metaData); useHandleStyle(MultiSelectBase.css.styles, isUnstyled, { name: 'multiselect' }); const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({ @@ -770,6 +770,7 @@ export const MultiSelect = React.memo( cx={cx} sx={sx} isUnstyled={isUnstyled} + metaData={metaData} /> {hasTooltip && } diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js index 453e6ef44a..2331c666c7 100644 --- a/components/lib/multiselect/MultiSelectHeader.js +++ b/components/lib/multiselect/MultiSelectHeader.js @@ -6,7 +6,7 @@ import { SearchIcon } from '../icons/search'; import { TimesIcon } from '../icons/times'; import { InputText } from '../inputtext/InputText'; import { Ripple } from '../ripple/Ripple'; -import { IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, UniqueComponentId, mergeProps } from '../utils/Utils'; export const MultiSelectHeader = React.memo((props) => { const { ptm, cx, isUnstyled } = props; @@ -56,7 +56,17 @@ export const MultiSelectHeader = React.memo((props) => { let content = (
- + {filterIcon}
); diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 57ef77f475..6f9523d52f 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -69,6 +69,7 @@ export const MultiSelectPanel = React.memo( ptm={ptm} cx={cx} isUnstyled={isUnstyled} + metaData={props.metaData} /> ); }; diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js index 345427401e..cf3e53c219 100644 --- a/components/lib/orderlist/OrderList.js +++ b/components/lib/orderlist/OrderList.js @@ -19,15 +19,15 @@ export const OrderList = React.memo( const elementRef = React.useRef(null); const styleElementRef = React.useRef(null); const reorderDirection = React.useRef(null); - - const { ptm, cx, isUnstyled } = OrderListBase.setMetaData({ + const metaData = { props, state: { selection: selectionState, filterValue: filterValueState, attributeSelector: attributeSelectorState } - }); + }; + const { ptm, cx, isUnstyled } = OrderListBase.setMetaData(metaData); useHandleStyle(OrderListBase.css.styles, isUnstyled, { name: 'orderlist' }); @@ -257,6 +257,7 @@ export const OrderList = React.memo( ptm={ptm} cx={cx} unstyled={props.unstyled} + metaData={metaData} /> { unstyled: unstyled, icon: moveUpIcon, onClick: moveUp, - 'aria-label': ariaLabel('moveUp') + 'aria-label': ariaLabel('moveUp'), + __parentMetadata: { + parent: props.metaData + } }, ptm('moveUpButton') ); @@ -150,7 +153,10 @@ export const OrderListControls = React.memo((props) => { unstyled: unstyled, icon: moveTopIcon, onClick: moveTop, - 'aria-label': ariaLabel('moveTop') + 'aria-label': ariaLabel('moveTop'), + __parentMetadata: { + parent: props.metaData + } }, ptm('moveTopButton') ); @@ -161,7 +167,10 @@ export const OrderListControls = React.memo((props) => { unstyled: unstyled, icon: moveDownIcon, onClick: moveDown, - 'aria-label': ariaLabel('moveDown') + 'aria-label': ariaLabel('moveDown'), + __parentMetadata: { + parent: props.metaData + } }, ptm('moveDownButton') ); @@ -172,7 +181,10 @@ export const OrderListControls = React.memo((props) => { unstyled: unstyled, icon: moveBottomIcon, onClick: moveBottom, - 'aria-label': ariaLabel('moveBottom') + 'aria-label': ariaLabel('moveBottom'), + __parentMetadata: { + parent: props.metaData + } }, ptm('moveBottomButton') ); diff --git a/components/lib/organizationchart/OrganizationChartBase.js b/components/lib/organizationchart/OrganizationChartBase.js index b44ef9b6ff..81098c79b2 100644 --- a/components/lib/organizationchart/OrganizationChartBase.js +++ b/components/lib/organizationchart/OrganizationChartBase.js @@ -71,7 +71,7 @@ const classes = { nodes: 'p-organizationchart-nodes', lines: 'p-organizationchart-lines', lineLeft: ({ index }) => classNames('p-organizationchart-line-left', { 'p-organizationchart-line-top': index !== 0 }), - lineRight: ({ index }) => classNames('p-organizationchart-line-right', { 'p-organizationchart-line-top': index !== nodeChildLength - 1 }), + lineRight: ({ index, nodeChildLength }) => classNames('p-organizationchart-line-right', { 'p-organizationchart-line-top': index !== nodeChildLength - 1 }), lineDown: 'p-organizationchart-line-down', nodeTogglerIcon: 'p-node-toggler-icon', nodeToggler: 'p-node-toggler' diff --git a/components/lib/organizationchart/OrganizationChartNode.js b/components/lib/organizationchart/OrganizationChartNode.js index 67f9c853a1..5fb0b77093 100644 --- a/components/lib/organizationchart/OrganizationChartNode.js +++ b/components/lib/organizationchart/OrganizationChartNode.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronUpIcon } from '../icons/chevronup'; -import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; +import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; export const OrganizationChartNode = React.memo((props) => { const node = props.node; @@ -119,7 +119,7 @@ export const OrganizationChartNode = React.memo((props) => { ); const lineRightProps = mergeProps( { - className: cx('lineRight', { index }) + className: cx('lineRight', { index, nodeChildLength }) }, getNodePTOptions(index !== nodeChildLength - 1, 'lineRight') ); diff --git a/components/lib/paginator/JumpToPageInput.js b/components/lib/paginator/JumpToPageInput.js index 87dd2a41e0..2253987139 100644 --- a/components/lib/paginator/JumpToPageInput.js +++ b/components/lib/paginator/JumpToPageInput.js @@ -1,8 +1,8 @@ import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; import { InputNumber } from '../inputnumber/InputNumber'; import { ObjectUtils } from '../utils/Utils'; import { JumpToPageInputBase } from './PaginatorBase'; -import { PrimeReactContext } from '../api/Api'; export const JumpToPageInput = React.memo((inProps) => { const context = React.useContext(PrimeReactContext); @@ -15,7 +15,7 @@ export const JumpToPageInput = React.memo((inProps) => { }; const value = props.pageCount > 0 ? props.page + 1 : 0; - const element = ; + const element = ; if (props.template) { const defaultOptions = { diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js index 4e78a2bafe..0d421c000e 100644 --- a/components/lib/paginator/Paginator.js +++ b/components/lib/paginator/Paginator.js @@ -1,4 +1,6 @@ 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 { CurrentPageReport } from './CurrentPageReport'; @@ -10,16 +12,16 @@ import { PageLinks } from './PageLinks'; import { PaginatorBase } from './PaginatorBase'; import { PrevPageLink } from './PrevPageLink'; import { RowsPerPageDropdown } from './RowsPerPageDropdown'; -import { PrimeReactContext } from '../api/Api'; -import { useHandleStyle } from '../componentbase/ComponentBase'; export const Paginator = React.memo( React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); const props = PaginatorBase.getProps(inProps, context); - const { ptm, cx, isUnstyled } = PaginatorBase.setMetaData({ - props - }); + const metaData = { + props, + ...props.__parentMetadata + }; + const { ptm, cx, isUnstyled } = PaginatorBase.setMetaData(metaData); useHandleStyle(PaginatorBase.css.styles, isUnstyled, { name: 'paginator' }); const elementRef = React.useRef(null); @@ -157,6 +159,7 @@ export const Paginator = React.memo( unstyled={props.unstyled} ptm={ptm} cx={cx} + metaData={metaData} /> ); break; @@ -165,7 +168,7 @@ export const Paginator = React.memo( element = ; break; case 'JumpToPageInput': - element = ; + element = ; break; default: diff --git a/components/lib/paginator/PaginatorBase.js b/components/lib/paginator/PaginatorBase.js index 940df037f8..659f1f69d8 100644 --- a/components/lib/paginator/PaginatorBase.js +++ b/components/lib/paginator/PaginatorBase.js @@ -63,6 +63,7 @@ const styles = ` export const PaginatorBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Paginator', + __parentMetadata: null, totalRecords: 0, rows: 0, first: 0, @@ -119,7 +120,9 @@ export const JumpToPageInputBase = ComponentBase.extend({ disabled: false, template: null, onChange: null, - children: undefined + children: undefined, + metaData: null, + ptm: null } }); diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js index 5a52bc3e06..23c82b2611 100644 --- a/components/lib/paginator/RowsPerPageDropdown.js +++ b/components/lib/paginator/RowsPerPageDropdown.js @@ -1,9 +1,8 @@ import * as React from 'react'; -import { localeOption } from '../api/Api'; +import { PrimeReactContext, localeOption } from '../api/Api'; import { Dropdown } from '../dropdown/Dropdown'; import { ObjectUtils } from '../utils/Utils'; import { RowsPerPageDropdownBase } from './PaginatorBase'; -import { PrimeReactContext } from '../api/Api'; export const RowsPerPageDropdown = React.memo((inProps) => { const context = React.useContext(PrimeReactContext); @@ -13,7 +12,18 @@ export const RowsPerPageDropdown = React.memo((inProps) => { const options = hasOptions ? props.options.map((opt) => ({ label: String(opt), value: opt })) : []; const ariaLabel = localeOption('choose'); const element = hasOptions ? ( - + ) : null; if (props.template) { diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index 25af5390fc..91c1d607b9 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -32,8 +32,7 @@ export const Password = React.memo( const mediumCheckRegExp = React.useRef(new RegExp(props.mediumRegex)); const strongCheckRegExp = React.useRef(new RegExp(props.strongRegex)); const type = unmaskedState ? 'text' : 'password'; - - const { ptm, cx, sx, isUnstyled } = PasswordBase.setMetaData({ + const metaData = { props, state: { overlayVisible: overlayVisibleState, @@ -42,7 +41,8 @@ export const Password = React.memo( focused: focusedState, unmasked: unmaskedState } - }); + }; + const { ptm, cx, isUnstyled } = PasswordBase.setMetaData(metaData); useHandleStyle(PasswordBase.css.styles, isUnstyled, { name: 'password' }); @@ -399,7 +399,10 @@ export const Password = React.memo( tooltip: props.tooltip, tooltipOptions: props.tooltipOptions, type: type, - value: props.value + value: props.value, + __parentMetadata: { + parent: metaData + } }, ptm('input') ); diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js index 09062ce086..9ebf56f496 100644 --- a/components/lib/picklist/PickList.js +++ b/components/lib/picklist/PickList.js @@ -18,7 +18,7 @@ export const PickList = React.memo( const [sourceFilterValueState, setSourceFilterValueState] = React.useState(''); const [targetFilterValueState, setTargetFilterValueState] = React.useState(''); const [attributeSelectorState, setAttributeSelectorState] = React.useState(null); - const { ptm, cx, isUnstyled } = PickListBase.setMetaData({ + const metaData = { props, state: { sourceSelection: sourceSelectionState, @@ -27,7 +27,8 @@ export const PickList = React.memo( targetFilterValue: targetFilterValueState, attributeSelector: attributeSelectorState } - }); + }; + const { ptm, cx, isUnstyled } = PickListBase.setMetaData(metaData); useHandleStyle(PickListBase.css.styles, isUnstyled, { name: 'picklist' }); const elementRef = React.useRef(null); @@ -313,6 +314,7 @@ export const PickList = React.memo( ptm={ptm} cx={cx} unstyled={props.unstyled} + metaData={metaData} /> )} @@ -357,6 +359,7 @@ export const PickList = React.memo( ptm={ptm} cx={cx} unstyled={props.unstyled} + metaData={metaData} /> )} diff --git a/components/lib/picklist/PickListControls.js b/components/lib/picklist/PickListControls.js index 578319457c..c4cdca357b 100644 --- a/components/lib/picklist/PickListControls.js +++ b/components/lib/picklist/PickListControls.js @@ -145,10 +145,10 @@ export const PickListControls = React.memo((props) => { return (
- - - - + + + +
); }); diff --git a/components/lib/picklist/PickListTransferControls.js b/components/lib/picklist/PickListTransferControls.js index 1a4a5407b9..0325698d10 100644 --- a/components/lib/picklist/PickListTransferControls.js +++ b/components/lib/picklist/PickListTransferControls.js @@ -133,10 +133,10 @@ export const PickListTransferControls = React.memo((props) => { return (
- - - - + + + +
); }); diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js index 10cc6ba0c4..a802bf9de5 100644 --- a/components/lib/progressbar/ProgressBar.js +++ b/components/lib/progressbar/ProgressBar.js @@ -9,7 +9,8 @@ export const ProgressBar = React.memo( const context = React.useContext(PrimeReactContext); const props = ProgressBarBase.getProps(inProps, context); const { ptm, cx, isUnstyled } = ProgressBarBase.setMetaData({ - props + props, + ...props.__parentMetadata }); useHandleStyle(ProgressBarBase.css.styles, isUnstyled, { name: 'progressbar' }); diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js index 810028f2aa..09573f3581 100644 --- a/components/lib/progressbar/ProgressBarBase.js +++ b/components/lib/progressbar/ProgressBarBase.js @@ -119,6 +119,7 @@ const inlineStyles = { export const ProgressBarBase = ComponentBase.extend({ defaultProps: { __TYPE: 'ProgressBar', + __parentMetadata: null, id: null, value: null, showValue: true, diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js index 67b4d1e080..3a8142b121 100644 --- a/components/lib/speeddial/SpeedDial.js +++ b/components/lib/speeddial/SpeedDial.js @@ -1,13 +1,13 @@ import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; import { Button } from '../button/Button'; +import { useHandleStyle } from '../componentbase/ComponentBase'; import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { MinusIcon } from '../icons/minus'; import { PlusIcon } from '../icons/plus'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { SpeedDialBase } from './SpeedDialBase'; -import { PrimeReactContext } from '../api/Api'; -import { useHandleStyle } from '../componentbase/ComponentBase'; export const SpeedDial = React.memo( React.forwardRef((inProps, ref) => { @@ -15,13 +15,13 @@ export const SpeedDial = React.memo( const context = React.useContext(PrimeReactContext); const props = SpeedDialBase.getProps(inProps, context); const visible = props.onVisibleChange ? props.visible : visibleState; - const metadata = { + const metaData = { props, state: { visible } }; - const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData(metadata); + const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData(metaData); useHandleStyle(SpeedDialBase.css.styles, isUnstyled, { name: 'speeddial' }); const isItemClicked = React.useRef(false); @@ -272,7 +272,7 @@ export const SpeedDial = React.memo( pt: ptm('button'), unstyled: props.unstyled, __parentMetadata: { - parent: metadata + parent: metaData } }); const content =