diff --git a/components/lib/datatable/TableFooter.js b/components/lib/datatable/TableFooter.js index 6409f3a33b..4b9d2314ab 100644 --- a/components/lib/datatable/TableFooter.js +++ b/components/lib/datatable/TableFooter.js @@ -4,11 +4,13 @@ import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { useMergeProps } from '../hooks/Hooks'; import { RowBase } from '../row/RowBase'; import { FooterCell } from './FooterCell'; +import { PrimeReactContext } from '../api/Api'; export const TableFooter = React.memo((props) => { const { ptm, ptmo, cx } = props.ptCallbacks; const mergeProps = useMergeProps(); const getRowProps = (row) => ColumnGroupBase.getCProps(row); + const context = React.useContext(PrimeReactContext); const getColumnGroupProps = () => { return props.footerColumnGroup ? ColumnGroupBase.getCProps(props.footerColumnGroup) : undefined; @@ -68,6 +70,7 @@ export const TableFooter = React.memo((props) => { { role: 'row' }, + RowBase.getProps(row.props, context), getRowPTOptions(row, 'root') ); diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index ddac9f50ac..79f9dd0486 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -7,6 +7,7 @@ import { classNames } from '../utils/Utils'; import { ColumnFilter } from './ColumnFilter'; import { HeaderCell } from './HeaderCell'; import { HeaderCheckbox } from './HeaderCheckbox'; +import { PrimeReactContext } from '../api/Api'; export const TableHeader = React.memo((props) => { const [sortableDisabledFieldsState, setSortableDisabledFieldsState] = React.useState([]); @@ -16,6 +17,7 @@ export const TableHeader = React.memo((props) => { const isMultipleSort = props.sortMode === 'multiple'; const isAllSortableDisabled = isSingleSort && allSortableDisabledState; const { ptm, ptmo, cx } = props.ptCallbacks; + const context = React.useContext(PrimeReactContext); const getColumnProp = (column, name) => { return ColumnBase.getCProp(column, name); @@ -241,6 +243,7 @@ export const TableHeader = React.memo((props) => { { role: 'row' }, + RowBase.getProps(row.props, context), getRowPTOptions(row, 'root') ); diff --git a/components/lib/fieldset/fieldset.d.ts b/components/lib/fieldset/fieldset.d.ts index 3e54fa104c..68df53227c 100644 --- a/components/lib/fieldset/fieldset.d.ts +++ b/components/lib/fieldset/fieldset.d.ts @@ -115,7 +115,7 @@ interface FieldsetToggleEvent { * Defines valid properties in Fieldset component. In addition to these, all properties of HTMLFieldSetElement can be used in this component. * @group Properties */ -export interface FieldsetProps extends Omit, HTMLFieldSetElement>, 'ref'> { +export interface FieldsetProps extends Omit, HTMLFieldSetElement>, 'ref' | 'onToggle'> { /** * Header text of the fieldset. */ diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index ab6b76d17d..7fd36cf0df 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -41,7 +41,7 @@ export const FileUpload = React.memo( const fileInputRef = React.useRef(null); const messagesRef = React.useRef(null); const contentRef = React.useRef(null); - const uploadedFileCount = React.useRef(0); + let uploadedFileCount = React.useRef(0); const hasFiles = ObjectUtils.isNotEmpty(filesState); const hasUploadedFiles = ObjectUtils.isNotEmpty(uploadedFilesState); const disabled = props.disabled || uploadingState; diff --git a/components/lib/inplace/inplace.d.ts b/components/lib/inplace/inplace.d.ts index c03cdbefff..628ef62b14 100644 --- a/components/lib/inplace/inplace.d.ts +++ b/components/lib/inplace/inplace.d.ts @@ -89,7 +89,7 @@ interface InplaceToggleEvent { * Defines valid properties in Inplace component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface InplaceProps extends Omit, HTMLDivElement>, 'ref'> { +export interface InplaceProps extends Omit, HTMLDivElement>, 'ref' | 'onToggle'> { /** * Whether the content is displayed or not. To use in controlled mode you must implement `onToggle` callback at a minimum. * @defaultValue false diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js index 6a035b9fe6..5f1bee4ee7 100644 --- a/components/lib/megamenu/MegaMenu.js +++ b/components/lib/megamenu/MegaMenu.js @@ -422,7 +422,7 @@ export const MegaMenu = React.memo( event.preventDefault(); if (horizontal) { - const _focusedItemInfo = focusedItemInfo; + let _focusedItemInfo = focusedItemInfo; if (ObjectUtils.isNotEmpty(activeItemState) && activeItemState.key === focusedItemInfo.key) { _focusedItemInfo = { index: -1, key: '', parentKey: activeItemState.key }; @@ -1159,7 +1159,7 @@ export const MegaMenu = React.memo( 'data-p-focused': isFocused, style: category.style, role: 'menuitem', - 'data-p-disabled': category.disabled || false + 'data-p-disabled': category.disabled || false //TODO: data-p-disabled is set twice here }, getPTOptions(processedItem, 'menuitem', index) ); diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 20f3af5ebf..8ee26dcc05 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -237,7 +237,7 @@ export const MultiSelect = React.memo( const len = currentTarget.value.length; currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len); - focusedOptionIndex = -1; + setFocusedOptionIndex(-1); } else { let metaKey = event.metaKey || event.ctrlKey; let optionIndex = findLastOptionIndex(); diff --git a/components/lib/panel/panel.d.ts b/components/lib/panel/panel.d.ts index 3d748fd0af..e608c68829 100644 --- a/components/lib/panel/panel.d.ts +++ b/components/lib/panel/panel.d.ts @@ -184,7 +184,7 @@ export interface PanelState { * Defines valid properties in Panel component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface PanelProps extends Omit, HTMLDivElement>, 'ref'> { +export interface PanelProps extends Omit, HTMLDivElement>, 'ref' | 'onToggle'> { /** * Custom header template of the panel. */ diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js index 51e0b13c1c..396c25e80c 100644 --- a/components/lib/picklist/PickList.js +++ b/components/lib/picklist/PickList.js @@ -411,7 +411,7 @@ export const PickList = React.memo( event.preventDefault(); const isSource = type === 'source'; - const selection = isSource ? sourceSelectionState : targetSelectionState; + let selection = isSource ? sourceSelectionState : targetSelectionState; if (event.shiftKey && selection && selection.length > 0) { const listItems = isSource ? sourceList : targetList; diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts index b3fb79afbe..5dbd2d0b3a 100644 --- a/components/lib/treeselect/treeselect.d.ts +++ b/components/lib/treeselect/treeselect.d.ts @@ -363,7 +363,7 @@ interface TreeSelectFilterOptions { * Defines valid properties in TreeSelect component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface TreeSelectProps extends Omit, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'pt'> { +export interface TreeSelectProps extends Omit, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'onToggle' | 'pt'> { /** * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. * @defaultValue document.body diff --git a/components/lib/treetable/TreeTableFooter.js b/components/lib/treetable/TreeTableFooter.js index 70b55c0049..13898d8c66 100644 --- a/components/lib/treetable/TreeTableFooter.js +++ b/components/lib/treetable/TreeTableFooter.js @@ -4,10 +4,12 @@ import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { useMergeProps } from '../hooks/Hooks'; import { RowBase } from '../row/RowBase'; import { ObjectUtils } from '../utils/Utils'; +import { PrimeReactContext } from '../api/Api'; export const TreeTableFooter = React.memo((props) => { const mergeProps = useMergeProps(); const { ptm, ptmo, cx } = props.ptCallbacks; + const context = React.useContext(PrimeReactContext); const getColumnProp = (column, name) => { return ColumnBase.getCProp(column, name); @@ -48,7 +50,7 @@ export const TreeTableFooter = React.memo((props) => { const createFooterRow = (row, index) => { const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children')); const rowFooterCells = rowColumns.map(createFooterCell); - const footerRowProps = mergeProps(ptm('footerRow', { hostName: props.hostName, role: 'row' })); + const footerRowProps = mergeProps(ptm('footerRow', { hostName: props.hostName, role: 'row' }), RowBase.getProps(row.props, context)); return ( diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js index d8ffe16f2f..ec4f612635 100644 --- a/components/lib/treetable/TreeTableHeader.js +++ b/components/lib/treetable/TreeTableHeader.js @@ -9,11 +9,13 @@ import { InputText } from '../inputtext/InputText'; import { RowBase } from '../row/RowBase'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; +import { PrimeReactContext } from '../api/Api'; export const TreeTableHeader = React.memo((props) => { const mergeProps = useMergeProps(); const { ptm, ptmo, cx } = props.ptCallbacks; const filterTimeout = React.useRef(null); + const context = React.useContext(PrimeReactContext); const getColumnProp = (column, ...args) => { return column ? (typeof args[0] === 'string' ? ColumnBase.getCProp(column, args[0]) : ColumnBase.getCProp(args[0] || column, args[1])) : null; @@ -320,7 +322,7 @@ export const TreeTableHeader = React.memo((props) => { className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted, align })), style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'), tabIndex: sortable ? props.tabIndex : null, - 'aria-sort': ariaSort, + 'aria-sort': ariaSort, //TODO: aria-sort is defined here two times (ariaSort, ariaSortData) ? onClick: (e) => onHeaderClick(e, column), onMouseDown: (e) => onHeaderMouseDown(e, column), onKeyDown: (e) => onHeaderKeyDown(e, column), @@ -376,7 +378,7 @@ export const TreeTableHeader = React.memo((props) => { const createHeaderRow = (row, index) => { const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children')); const rowHeaderCells = rowColumns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: true })); - const headerRowProps = mergeProps(ptm('headerRow', { hostName: props.hostName })); + const headerRowProps = mergeProps(ptm('headerRow', { hostName: props.hostName }), RowBase.getProps(row.props, context)); return ( diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 0dd00bc979..18ca2b40fd 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -580,7 +580,7 @@ interface TreeTableColReorderEvent { * Defines valid properties in TreeTable component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface TreeTableProps extends Omit, HTMLDivElement>, 'size' | 'onContextMenu' | 'onSelect' | 'ref' | 'value'> { +export interface TreeTableProps extends Omit, HTMLDivElement>, 'size' | 'onContextMenu' | 'onSelect' | 'onToggle' | 'ref' | 'value'> { /** * Whether to show it even there is only one page. * @defaultValue true