Fix #6903: Missing rowGroupToggler and rowGroupTogglerIcon (#6904)

primefaces · Jul 18, 2024 · 54a8ee6 · 54a8ee6
1 parent 678b78c
commit 54a8ee6
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 19 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -19353,12 +19353,26 @@
  "description": "Uses to pass attributes to the row expansion's DOM element."
  },
  {
- "name": "rowgroupFooter",
+ "name": "rowGroupFooter",
  "optional": true,
  "readonly": false,
  "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
  "description": "Uses to pass attributes to the rowgroup footer's DOM element."
  },
+ {
+ "name": "rowGroupToggler",
+ "optional": true,
+ "readonly": false,
+ "type": "DataTablePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+ "description": "Uses to pass attributes to the rowgroup toggler's DOM element."
+ },
+ {
+ "name": "rowGroupTogglerIcon",
+ "optional": true,
+ "readonly": false,
+ "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+ "description": "Uses to pass attributes to the rowgroup toggler icon's DOM element."
+ },
  {
  "name": "emptyMessage",
  "optional": true,

diff --git a/components/lib/datatable/RowTogglerButton.js b/components/lib/datatable/RowTogglerButton.js
@@ -9,7 +9,7 @@ import { IconUtils } from '../utils/Utils';
 
 export const RowTogglerButton = React.memo((props) => {
  const mergeProps = useMergeProps();
- const { ptm, ptmo, cx } = props.ptCallbacks;
+ const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks;
 
  const onClick = (event) => {
  props.onClick({
@@ -34,8 +34,10 @@ export const RowTogglerButton = React.memo((props) => {
  const rowGroupTogglerIconProps = mergeProps(
  {
  className: cx('rowGroupTogglerIcon'),
- 'aria-hidden': true
+ 'aria-hidden': true,
+ unstyled: isUnstyled()
  },
+ ptm('rowGroupTogglerIcon'),
  getColumnPTOptions('rowGroupTogglerIcon')
  );
  const icon = props.expanded ? props.expandedRowIcon || <ChevronDownIcon {...rowGroupTogglerIconProps} /> : props.collapsedRowIcon || <ChevronRightIcon {...rowGroupTogglerIconProps} />;
@@ -47,8 +49,10 @@ export const RowTogglerButton = React.memo((props) => {
  onClick: (e) => onClick(e),
  className: cx('rowGroupToggler'),
  tabIndex: props.tabIndex,
- 'aria-label': label
+ 'aria-label': label,
+ unstyled: isUnstyled()
  },
+ ptm('rowGroupToggler'),
  getColumnPTOptions('rowGroupToggler')
  );
 

diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
@@ -9,7 +9,7 @@ import { RowTogglerButton } from './RowTogglerButton';
 export const TableBody = React.memo(
  React.forwardRef((props, ref) => {
  const mergeProps = useMergeProps();
- const { ptm, ptmo, cx, isUnsyled } = props.ptCallbacks;
+ const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks;
  const [rowGroupHeaderStyleObjectState, setRowGroupHeaderStyleObjectState] = React.useState({});
  const getColumnProps = (column) => ColumnBase.getCProps(column);
 
@@ -451,7 +451,7 @@ export const TableBody = React.memo(
  if (props.dragSelection && !dragSelectionHelper.current) {
  dragSelectionHelper.current = document.createElement('div');
  dragSelectionHelper.current.setAttribute('p-datatable-drag-selection-helper', 'true');
- !isUnsyled && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
+ !isUnstyled() && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
 
  initialDragPosition.current = { x: event.clientX, y: event.clientY };
  dragSelectionHelper.current.style.top = `${event.pageY}px`;
@@ -606,7 +606,7 @@ export const TableBody = React.memo(
  const onRowMouseDown = (e) => {
  const { originalEvent: event } = e;
 
- if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
+ if (!isUnstyled() && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
  event.currentTarget.draggable = true;
  event.target.draggable = false;
  } else {
@@ -701,29 +701,29 @@ export const TableBody = React.memo(
 
  if (pageY < rowMidY) {
  rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
- !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+ !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
 
  droppedRowIndex.current = index;
 
  if (prevRowElement) {
  prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
- !isUnsyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+ !isUnstyled() && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
  } else {
  rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
- !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+ !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
  }
  } else {
  if (prevRowElement) {
  prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
- !isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+ !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
  } else {
  rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
- !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+ !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
  }
 
  droppedRowIndex.current = index + 1;
  rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
- !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+ !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
  }
  }
 
@@ -737,13 +737,13 @@ export const TableBody = React.memo(
 
  if (prevRowElement) {
  prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
- !isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+ !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
  }
 
  rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
- !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+ !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
  rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
- !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+ !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
  };
 
  const onRowDragEnd = (e) => {
@@ -943,7 +943,7 @@ export const TableBody = React.memo(
  collapsedRowIcon={props.collapsedRowIcon}
  ptCallbacks={props.ptCallbacks}
  metaData={props.metaData}
- unstyled={props.unstyled}
+ unstyled={isUnstyled()}
  />
  );
  const options = { index: rowIndex, props: props.tableProps, customRendering: false };
@@ -1069,7 +1069,7 @@ export const TableBody = React.memo(
  virtualScrollerOptions={props.virtualScrollerOptions}
  ptCallbacks={props.ptCallbacks}
  metaData={props.metaData}
- unstyled={props.unstyled}
+ unstyled={isUnstyled()}
  />
  );
  }

diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts
@@ -943,7 +943,15 @@ export interface DataTablePassThroughOptions {
  /**
  * Uses to pass attributes to the rowgroup footer's DOM element.
  */
- rowgroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+ rowGroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+ /**
+ * Uses to pass attributes to the rowgroup toggler's DOM element.
+ */
+ rowGroupToggler?: DataTablePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+ /**
+ * Uses to pass attributes to the rowgroup toggler icon's DOM element.
+ */
+ rowGroupTogglerIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
  /**
  * Uses to pass attributes to the empty message's DOM element.
  */