primereact 9.3.0 → 9.4.0

package/datatable/datatable.d.ts

@@ -10,8 +10,8 @@
 import * as React from 'react';
 import { Column, ColumnProps } from '../column';
 import { PaginatorTemplate } from '../paginator';
-import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller/virtualscroller';
 import { IconType } from '../utils/utils';
+import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller/virtualscroller';
 
 type DataTableHeaderTemplateType<TValue extends DataTableValueArray> = React.ReactNode | ((options: DataTableHeaderTemplateOptions<TValue>) => React.ReactNode);
 
@@ -266,20 +266,36 @@ interface DataTableStateEvent extends DataTablePageEvent, DataTableFilterEvent,
  * @see {@link DataTableProps.isDataSelectable}
  * @event
  */
-interface DataTableDataSelectableEvent<TValue extends DataTableValueArray> {
+interface DataTableDataSelectableEvent {
     /**
      * Original data of the row.
      */
-    data: DataTableRowDataArray<TValue>;
+    data: DataTableValue;
     /**
      * Index of the row.
      */
     index: number;
 }
 
+/**
+ * Custom selection change event for context menu.
+ * @see {@link DataTableProps.onContextMenuSelectionChange}
+ * @event
+ */
+interface DataTableContextMenuSelectionChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection object.
+     */
+    value: DataTableSelection<TValue>;
+}
+
 /**
  * Custom selection change event.
- * @see {@link DataTableProps.onContextMenuSelectionChange}, {@link DataTableProps.onSelectionChange}
+ * @see {@link DataTableProps.onSelectionChange}
  * @event
  */
 interface DataTableSelectionChangeEvent<TValue extends DataTableValueArray> {
@@ -809,6 +825,14 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * @defaultValue undefined
      */
     filterLocale?: string | undefined;
+    /**
+     * Icon to display the current filtering status.
+     */
+    filterIcon?: IconType<DataTable<TValue>> | undefined;
+    /**
+     * Icon to display when the filter can be cleared.
+     */
+    filterClearIcon?: IconType<DataTable<TValue>> | undefined;
     /**
      * An array of FilterMetadata objects to provide external filters.
      */
@@ -1036,6 +1060,11 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * @defaultValue false
      */
     showGridlines?: boolean | undefined;
+    /**
+     * Whether to show headers.
+     * @defaultValue true
+     */
+    showHeaders?: boolean | undefined;
     /**
      * Whether to show the select all checkbox inside the datatable's header.
      */
@@ -1128,7 +1157,7 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * Function that returns a boolean to decide whether the data should be selectable.
      * @param {DataTableDataSelectableEvent<TValue>} event - Custom data selectable event.
      */
-    isDataSelectable?(event: DataTableDataSelectableEvent<TValue>): boolean | undefined | null;
+    isDataSelectable?(event: DataTableDataSelectableEvent): boolean | undefined | null;
     /**
      * Callback to invoke when all rows are selected using the header checkbox.
      * @param {DataTableSelectEvent} event - Custom select event.
@@ -1146,14 +1175,14 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
     onCellClick?(event: DataTableCellClickEvent<TValue>): void;
     /**
      * Callback to invoke on cell select.
-     * @param {DataTableSelectEvent} event - Custom select event.
+     * @param {DataTableCellClickEvent<TValue>} event - Custom select event.
      */
-    onCellSelect?(event: DataTableSelectEvent): void;
+    onCellSelect?(event: DataTableCellClickEvent<TValue>): void;
     /**
      * Callback to invoke on cell unselect.
-     * @param {DataTableUnselectEvent} event - Custom unselect event.
+     * @param {DataTableCellClickEvent<TValue>} event - Custom unselect event.
      */
-    onCellUnselect?(event: DataTableUnselectEvent): void;
+    onCellUnselect?(event: DataTableCellClickEvent<TValue>): void;
     /**
      * Callback to invoke when a column is reordered.
      * @param {DataTableColReorderEvent} event - Custom column reorder event.
@@ -1183,7 +1212,7 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * Callback to invoke when a row selected with right click.
      * @param {DataTableRowEvent} event - Custom row event.
      */
-    onContextMenuSelectionChange?(event: DataTableSelectionChangeEvent<TValue>): void;
+    onContextMenuSelectionChange?(event: DataTableContextMenuSelectionChangeEvent<TValue>): void;
     /**
      * Callback to invoke on filtering.
      * @param {DataTableStateEvent} event - Custom state event.

package/datatable/datatable.esm.js

@@ -2,32 +2,32 @@ import * as React from 'react';
 import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, FilterOperator, FilterService } from 'primereact/api';
 import { ObjectUtils, classNames, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
 import { useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
+import { ArrowDownIcon } from 'primereact/icons/arrowdown';
+import { ArrowUpIcon } from 'primereact/icons/arrowup';
+import { SpinnerIcon } from 'primereact/icons/spinner';
 import { Paginator } from 'primereact/paginator';
 import { VirtualScroller } from 'primereact/virtualscroller';
-import { OverlayService } from 'primereact/overlayservice';
-import { Ripple } from 'primereact/ripple';
+import { BarsIcon } from 'primereact/icons/bars';
 import { CheckIcon } from 'primereact/icons/check';
-import { TimesIcon } from 'primereact/icons/times';
-import { PencilIcon } from 'primereact/icons/pencil';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
-import { BarsIcon } from 'primereact/icons/bars';
+import { PencilIcon } from 'primereact/icons/pencil';
+import { TimesIcon } from 'primereact/icons/times';
+import { OverlayService } from 'primereact/overlayservice';
+import { Ripple } from 'primereact/ripple';
 import { Button } from 'primereact/button';
 import { CSSTransition } from 'primereact/csstransition';
 import { Dropdown } from 'primereact/dropdown';
-import { InputText } from 'primereact/inputtext';
-import { Portal } from 'primereact/portal';
 import { FilterIcon } from 'primereact/icons/filter';
 import { FilterSlashIcon } from 'primereact/icons/filterslash';
-import { TrashIcon } from 'primereact/icons/trash';
 import { PlusIcon } from 'primereact/icons/plus';
-import { Tooltip } from 'primereact/tooltip';
+import { TrashIcon } from 'primereact/icons/trash';
+import { InputText } from 'primereact/inputtext';
+import { Portal } from 'primereact/portal';
 import { SortAltIcon } from 'primereact/icons/sortalt';
 import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
-import { SpinnerIcon } from 'primereact/icons/spinner';
-import { ArrowDownIcon } from 'primereact/icons/arrowdown';
-import { ArrowUpIcon } from 'primereact/icons/arrowup';
+import { Tooltip } from 'primereact/tooltip';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -253,9 +253,9 @@ var DataTableBase = {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
     breakpoint: '960px',
-    checkIcon: null,
     cellClassName: null,
     cellSelection: false,
+    checkIcon: null,
     className: null,
     collapsedRowIcon: null,
     columnResizeMode: 'fit',
@@ -268,7 +268,7 @@ var DataTableBase = {
     dataKey: null,
     defaultSortOrder: 1,
     dragSelection: false,
-    editMode: 'cell',
+    editMode: null,
     editingRows: null,
     emptyMessage: null,
     expandableRowGroups: false,
@@ -276,8 +276,10 @@ var DataTableBase = {
     expandedRows: null,
     exportFilename: 'download',
     exportFunction: null,
+    filterClearIcon: null,
     filterDelay: 300,
     filterDisplay: 'menu',
+    filterIcon: null,
     filterLocale: undefined,
     filters: null,
     first: 0,
@@ -312,8 +314,6 @@ var DataTableBase = {
     onFilter: null,
     onPage: null,
     onRowClick: null,
-    onRowMouseEnter: null,
-    onRowMouseLeave: null,
     onRowCollapse: null,
     onRowDoubleClick: null,
     onRowEditCancel: null,
@@ -322,6 +322,8 @@ var DataTableBase = {
     onRowEditInit: null,
     onRowEditSave: null,
     onRowExpand: null,
+    onRowMouseEnter: null,
+    onRowMouseLeave: null,
     onRowReorder: null,
     onRowSelect: null,
     onRowToggle: null,
@@ -341,10 +343,10 @@ var DataTableBase = {
     paginatorRight: null,
     paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
     removableSort: false,
-    reorderableColumns: false,
-    reorderableRows: false,
     reorderIndicatorDownIcon: null,
     reorderIndicatorUpIcon: null,
+    reorderableColumns: false,
+    reorderableRows: false,
     resizableColumns: false,
     responsiveLayout: 'scroll',
     rowClassName: null,
@@ -369,6 +371,7 @@ var DataTableBase = {
     selectionMode: null,
     selectionPageOnly: false,
     showGridlines: false,
+    showHeaders: true,
     showRowReorderElement: null,
     showSelectAll: true,
     showSelectionElement: null,
@@ -769,14 +772,29 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       var onCellEditInit = getColumnProp('onCellEditInit');
       var cellEditValidatorEvent = getColumnProp('cellEditValidatorEvent');
       if (onBeforeCellEditShow) {
-        onBeforeCellEditShow(params);
+        // if user returns false do not show the editor
+        if (onBeforeCellEditShow(params) === false) {
+          return;
+        }
+
+        // if user prevents default stop the editor
+        if (event && event.defaultPrevented) {
+          return;
+        }
       }
 
       // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
       setTimeout(function () {
         setEditingState(true);
         if (onCellEditInit) {
-          onCellEditInit(params);
+          if (onCellEditInit(params) === false) {
+            return;
+          }
+
+          // if user prevents default stop the editor
+          if (event && event.defaultPrevented) {
+            return;
+          }
         }
         if (cellEditValidatorEvent === 'click') {
           bindDocumentClickListener();
@@ -1508,7 +1526,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
   var createContent = function createContent() {
     return props.columns.map(function (col, i) {
       if (shouldRenderBodyCell(props.value, col, props.index)) {
-        var key = "".concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
+        var key = "".concat(props.rowIndex, "_").concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
         var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
         return /*#__PURE__*/React.createElement(BodyCell, {
           key: key,
@@ -1693,7 +1711,22 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       if (isSubheaderGrouping && props.expandableRowGroups) {
         return isRowGroupExpanded(rowData);
       } else {
-        if (props.dataKey) return props.expandedRows ? props.expandedRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.expandedRows, rowData) !== -1;
+        if (props.dataKey) {
+          var rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
+          var expanded = false;
+          if (props.expandedRows) {
+            if (Array.isArray(props.expandedRows)) {
+              expanded = props.expandedRows.some(function (row) {
+                return ObjectUtils.resolveFieldData(row, props.dataKey) === rowId;
+              });
+            } else {
+              expanded = props.expandedRows[rowId] !== undefined;
+            }
+          }
+          return expanded;
+        } else {
+          return findIndex(props.expandedRows, rowData) !== -1;
+        }
       }
     }
     return false;
@@ -3119,7 +3152,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var iconProps = {
       'aria-hidden': true
     };
-    var icon = props.columnFilterIcon || /*#__PURE__*/React.createElement(FilterIcon, iconProps);
+    var icon = props.filterIcon || /*#__PURE__*/React.createElement(FilterIcon, iconProps);
     var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
       props: props
     });
@@ -3631,21 +3664,15 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       sortOrder = _ref2.sortOrder;
     if (getColumnProp('sortable')) {
       var iconClassName = 'p-sortable-column-icon';
-      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, {
-        className: iconClassName
-      }) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, {
-        className: iconClassName
-      }) : /*#__PURE__*/React.createElement(SortAltIcon, {
-        className: iconClassName
-      });
-      var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, {
-        className: iconClassName
-      }, {
+      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, null) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, null) : /*#__PURE__*/React.createElement(SortAltIcon, null);
+      var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, undefined, {
         props: props,
         sorted: sorted,
         sortOrder: sortOrder
       });
-      return sortIcon;
+      return /*#__PURE__*/React.createElement("span", {
+        className: iconClassName
+      }, sortIcon);
     }
     return null;
   };
@@ -3678,7 +3705,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         filters: props.filters,
         onFilterChange: props.onFilterChange,
         onFilterApply: props.onFilterApply,
-        filtersStore: props.filtersStore
+        filtersStore: props.filtersStore,
+        filterIcon: props.filterIcon,
+        filterClearIcon: props.filterClearIcon
       });
     }
     return null;
@@ -4302,7 +4331,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
       var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
       var selectableVal = getSelectableData(val);
-      return selectableVal && props.selection && selectableVal.every(function (sv) {
+      return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
         return props.selection.some(function (s) {
           return isEquals(s, sv);
         });
@@ -4388,6 +4417,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         var updateTableWidth = function updateTableWidth(el) {
           !!el && (el.style.width = el.style.minWidth = tableWidth);
         };
+
+        // https://github.com/primefaces/primereact/issues/3970 Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
+        resizeTableCells(newColumnWidth);
         updateTableWidth(tableRef.current);
         if (!isVirtualScrollerDisabled()) {
           updateTableWidth(bodyRef.current);
@@ -4396,7 +4428,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
             updateTableWidth(DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
           }
         }
-        resizeTableCells(newColumnWidth);
       }
       if (props.onColumnResizeEnd) {
         props.onColumnResizeEnd({
@@ -4762,6 +4793,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return value;
   };
   var multisortField = function multisortField(data1, data2, multiSortMeta, index) {
+    if (!multiSortMeta || !multiSortMeta[index]) {
+      return;
+    }
     var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
     var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
 
@@ -4978,12 +5012,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 
     //headers
     columns.forEach(function (column, i) {
-      var _ref3 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportable')],
+      var _ref3 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader'), getColumnProp(column, 'exportable')],
         field = _ref3[0],
         header = _ref3[1],
-        exportable = _ref3[2];
+        exportHeader = _ref3[2],
+        exportable = _ref3[3];
       if (exportable && field) {
-        var columnHeader = String(header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
+        var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
         csv += '"' + columnHeader + '"';
         if (i < columns.length - 1) {
           csv += props.csvSeparator;
@@ -5073,7 +5108,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   useMountEffect(function () {
     !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
-    setFiltersState(cloneFilters(props.filters));
+
+    //setFiltersState(cloneFilters(props.filters)); // Github #4248
     setD_filtersState(cloneFilters(props.filters));
     if (isStateful()) {
       restoreState();
@@ -5182,6 +5218,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return null;
   };
   var createTableHeader = function createTableHeader(options, empty, _isVirtualScrollerDisabled) {
+    if (props.showHeaders === false) {
+      return null;
+    }
     var sortField = getSortField();
     var sortOrder = getSortOrder();
     var multiSortMeta = _toConsumableArray(getMultiSortMeta());
@@ -5214,6 +5253,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       filterDisplay: props.filterDisplay,
       filters: filters,
       filtersStore: filtersStore,
+      filterIcon: props.filterIcon,
+      filterClearIcon: props.filterClearIcon,
       onFilterChange: onFilterChange,
       onFilterApply: onFilterApply,
       showSelectAll: props.showSelectAll,