diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
index 1cd2ef1c22..918624bfc2 100644
--- a/components/lib/confirmdialog/ConfirmDialog.js
+++ b/components/lib/confirmdialog/ConfirmDialog.js
@@ -130,6 +130,7 @@ export const ConfirmDialog = React.memo(
}));
const createFooter = () => {
+ const defaultFocus = getPropValue('defaultFocus');
const acceptClassName = classNames('p-confirm-dialog-accept', getPropValue('acceptClassName'));
const rejectClassName = classNames(
'p-confirm-dialog-reject',
@@ -141,6 +142,7 @@ export const ConfirmDialog = React.memo(
const rejectButtonProps = {
label: rejectLabel,
+ autoFocus: defaultFocus === 'reject',
icon: getPropValue('rejectIcon'),
className: classNames(getPropValue('rejectClassName'), cx('rejectButton', { getPropValue })),
onClick: reject,
@@ -154,6 +156,7 @@ export const ConfirmDialog = React.memo(
const acceptButtonProps = mergeProps(
{
label: acceptLabel,
+ autoFocus: defaultFocus === undefined || defaultFocus === 'accept',
icon: getPropValue('acceptIcon'),
className: classNames(getPropValue('acceptClassName'), cx('acceptButton')),
onClick: accept,
@@ -168,7 +171,7 @@ export const ConfirmDialog = React.memo(
const content = (
<>
-
+
>
);
diff --git a/components/lib/confirmdialog/ConfirmDialogBase.js b/components/lib/confirmdialog/ConfirmDialogBase.js
index 1a83c7466d..747703edce 100644
--- a/components/lib/confirmdialog/ConfirmDialogBase.js
+++ b/components/lib/confirmdialog/ConfirmDialogBase.js
@@ -15,24 +15,25 @@ const classes = {
export const ConfirmDialogBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ConfirmDialog',
- tagKey: undefined,
- visible: undefined,
- message: null,
- rejectLabel: null,
- acceptLabel: null,
- icon: null,
- rejectIcon: null,
- acceptIcon: null,
- rejectClassName: null,
+ accept: null,
acceptClassName: null,
- className: null,
+ acceptIcon: null,
+ acceptLabel: null,
appendTo: null,
- footer: null,
breakpoints: null,
+ children: undefined,
+ className: null,
+ defaultFocus: 'accept',
+ footer: null,
+ icon: null,
+ message: null,
onHide: null,
- accept: null,
reject: null,
- children: undefined
+ rejectClassName: null,
+ rejectIcon: null,
+ rejectLabel: null,
+ tagKey: undefined,
+ visible: undefined
},
css: {
classes
diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts
index 7a59ba53c0..6bcc869966 100644
--- a/components/lib/confirmdialog/confirmdialog.d.ts
+++ b/components/lib/confirmdialog/confirmdialog.d.ts
@@ -131,6 +131,11 @@ interface ConfirmDialogOptions {
* @defaultValue No
*/
rejectLabel: string;
+ /**
+ * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+ * @defaultValue accept
+ */
+ defaultFocus: string;
/**
* Default element created by the component.
*/
@@ -194,6 +199,11 @@ export interface ConfirmDialogProps extends Omit {
props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
@@ -143,8 +143,14 @@ export const ConfirmPopup = React.memo(
const onEntered = () => {
bindOverlayListener();
- if (acceptBtnRef.current) {
- acceptBtnRef.current.focus();
+ const defaultFocus = getPropValue('defaultFocus');
+
+ if (defaultFocus === undefined || defaultFocus === 'accept') {
+ acceptBtnRef.current && acceptBtnRef.current.focus();
+ }
+
+ if (defaultFocus === 'reject') {
+ rejectBtnRef.current && rejectBtnRef.current.focus();
}
callbackFromProp('onShow');
diff --git a/components/lib/confirmpopup/ConfirmPopupBase.js b/components/lib/confirmpopup/ConfirmPopupBase.js
index 3eb2e6cc1f..5fbcd4973a 100644
--- a/components/lib/confirmpopup/ConfirmPopupBase.js
+++ b/components/lib/confirmpopup/ConfirmPopupBase.js
@@ -74,29 +74,30 @@ const classes = {
export const ConfirmPopupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ConfirmPopup',
- tagKey: undefined,
- target: null,
- visible: false,
- message: null,
- rejectLabel: null,
- acceptLabel: null,
- icon: null,
- rejectIcon: null,
- acceptIcon: null,
- rejectClassName: null,
+ accept: null,
acceptClassName: null,
- className: null,
- style: null,
+ acceptIcon: null,
+ acceptLabel: null,
appendTo: null,
+ children: undefined,
+ className: null,
+ closeOnEscape: true,
+ defaultFocus: 'accept',
dismissable: true,
footer: null,
- onShow: null,
+ icon: null,
+ message: null,
onHide: null,
- accept: null,
+ onShow: null,
reject: null,
+ rejectClassName: null,
+ rejectIcon: null,
+ rejectLabel: null,
+ style: null,
+ tagKey: undefined,
+ target: null,
transitionOptions: null,
- children: undefined,
- closeOnEscape: true
+ visible: false
},
css: {
classes,
diff --git a/components/lib/confirmpopup/confirmpopup.d.ts b/components/lib/confirmpopup/confirmpopup.d.ts
index a2b1540680..4ab1dcd1f8 100644
--- a/components/lib/confirmpopup/confirmpopup.d.ts
+++ b/components/lib/confirmpopup/confirmpopup.d.ts
@@ -122,6 +122,11 @@ interface ConfirmPopupOptions {
* @defaultValue No
*/
rejectLabel: string;
+ /**
+ * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+ * @defaultValue accept
+ */
+ defaultFocus: string;
/**
* Default element created by the component.
*/
@@ -178,6 +183,11 @@ export interface ConfirmPopupProps {
* @defaultValue false
*/
visible?: boolean | undefined;
+ /**
+ * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+ * @defaultValue accept
+ */
+ defaultFocus?: string | undefined;
/**
* Message of the confirmation.
*/
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index 02d7514119..049c9557c0 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -66,10 +66,6 @@ export const BodyCell = React.memo((props) => {
options: true
});
- if (props.editMode === 'row' && props.editing !== editingState) {
- setEditingState(props.editing);
- }
-
const isEditable = () => {
return getColumnProp('editor');
};
@@ -512,6 +508,12 @@ export const BodyCell = React.memo((props) => {
}
});
+ React.useEffect(() => {
+ if (props.editMode === 'row' && props.editing !== editingState) {
+ setEditingState(props.editing);
+ }
+ }, [props.editMode, props.editing, editingState]);
+
useUpdateEffect(() => {
if (props.editMode === 'cell' || props.editMode === 'row') {
setEditingRowDataState(getEditingRowData());
@@ -558,7 +560,6 @@ export const BodyCell = React.memo((props) => {
const tabIndex = getTabIndex(cellSelected);
const selectionMode = getColumnProp('selectionMode');
const rowReorder = getColumnProp('rowReorder');
- const rowEditor = getColumnProp('rowEditor');
const header = getColumnProp('header');
const body = getColumnProp('body');
const editor = getColumnProp('editor');
@@ -566,6 +567,7 @@ export const BodyCell = React.memo((props) => {
const align = getColumnProp('align');
const value = resolveFieldData();
const columnBodyOptions = { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps };
+ const rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index 16d5449e6a..b5623336e3 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -18,17 +18,21 @@ export const TabMenu = React.memo(
const navRef = React.useRef(null);
const tabsRef = React.useRef({});
const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
-
- const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
+ const metaData = {
props,
state: {
id: idState,
activeIndex: activeIndexState
}
+ };
+
+ const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
+ ...metaData
});
const getPTOptions = (key, item, index) => {
return ptm(key, {
+ parent: metaData,
context: {
item,
index
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index 968712d19f..96abd840d1 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -332,8 +332,11 @@ export const TreeTableRow = React.memo((props) => {
};
const isSelected = () => {
- if ((props.selectionMode === 'single' || props.selectionMode === 'multiple') && props.selectionKeys) return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
- else return false;
+ if (props.selectionMode === 'single' || ((props.selectionMode === 'multiple' || props.selectionMode === 'checkbox') && props.selectionKeys)) {
+ return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
+ }
+
+ return false;
};
const isChecked = () => {
diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
index 8ec19a7a32..93a5f7dd2f 100644
--- a/components/lib/treetable/TreeTableScrollableView.js
+++ b/components/lib/treetable/TreeTableScrollableView.js
@@ -66,10 +66,10 @@ export const TreeTableScrollableView = React.memo((props) => {
frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
}
- scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+ scrollHeaderBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
if (scrollFooterBoxRef.current) {
- scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+ scrollFooterBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
}
if (frozenScrollBody) {
@@ -78,6 +78,12 @@ export const TreeTableScrollableView = React.memo((props) => {
};
useMountEffect(() => {
+ let el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');
+
+ el = el.length > 1 ? el[1] : el[0];
+
+ const scrollBarWidth = DomHandler.calculateScrollbarWidth(el);
+
if (!props.frozen) {
const scrollBarWidth = DomHandler.calculateScrollbarWidth();
@@ -87,7 +93,7 @@ export const TreeTableScrollableView = React.memo((props) => {
scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
}
} else {
- scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
+ scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
}
});