primereact 10.9.6 → 10.9.7

package/datatable/datatable.d.ts

@@ -363,11 +363,11 @@ interface DataTableSelectionSingleChangeEvent<TValue extends DataTableValueArray
 }
 
 /**
- * Custom cell selection change event.
+ * Custom cell single selection change event.
  * @see {@link DataTableProps.onSelectionChange}
  * @event
  */
-interface DataTableSelectionCellChangeEvent<TValue extends DataTableValueArray> {
+interface DataTableSelectionCellSingleChangeEvent<TValue extends DataTableValueArray> {
     /**
      * Browser event.
      */
@@ -386,6 +386,30 @@ interface DataTableSelectionCellChangeEvent<TValue extends DataTableValueArray>
     [key: string]: any;
 }
 
+/**
+ * Custom cell multiple selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionCellMultipleChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: Array<DataTableCellSelection<TValue>>;
+    /**
+     * Type of the selection.
+     */
+    type?: 'cell';
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
 /**
  * Custom select all change event.
  * @see {@link DataTableProps.onSelectAllChange}
@@ -1851,7 +1875,7 @@ interface DataTablePropsMultiple<TValue extends DataTableValueArray> extends Dat
  * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-interface DataTablePropsCell<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+interface DataTablePropsCellSingle<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
     /**
      * Whether to cell selection is enabled or not.
      * @defaultValue false
@@ -1860,7 +1884,7 @@ interface DataTablePropsCell<TValue extends DataTableValueArray> extends DataTab
     /**
      * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
      */
-    selectionMode: 'single' | 'multiple';
+    selectionMode: 'single';
     /**
      * Selected cells.
      */
@@ -1872,16 +1896,46 @@ interface DataTablePropsCell<TValue extends DataTableValueArray> extends DataTab
     onContextMenuSelectionChange?(event: DataTableContextMenuMultipleSelectionChangeEvent<TValue>): void;
     /**
      * Callback to invoke when selection changes.
-     * @param {DataTableSelectionCellChangeEvent<TValue>} event - Custom selection change event.
+     * @param {DataTableSelectionCellSingleChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionCellSingleChangeEvent<TValue>): void;
+}
+
+/**
+ * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+interface DataTablePropsCellMultiple<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection: true;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'multiple';
+    /**
+     * Selected cells.
+     */
+    selection: Array<DataTableCellSelection<TValue>> | null;
+    /**
+     * Callback to invoke when a row selected with right click.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onContextMenuSelectionChange?(event: DataTableContextMenuMultipleSelectionChangeEvent<TValue>): void;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionCellMultipleChangeEvent<TValue>} event - Custom selection change event.
      */
-    onSelectionChange?(event: DataTableSelectionCellChangeEvent<TValue>): void;
+    onSelectionChange?(event: DataTableSelectionCellMultipleChangeEvent<TValue>): void;
 }
 
 /**
  * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export type DataTableProps<TValue extends DataTableValueArray> = DataTablePropsSingle<TValue> | DataTablePropsCell<TValue> | DataTablePropsMultiple<TValue>;
+export type DataTableProps<TValue extends DataTableValueArray> = DataTablePropsSingle<TValue> | DataTablePropsCellSingle<TValue> | DataTablePropsMultiple<TValue> | DataTablePropsCellMultiple<TValue>;
 
 /**
  * **PrimeReact - DataTable<TValue**
@@ -2007,4 +2061,9 @@ export declare class DataTable<TValue extends DataTableValueArray> extends React
      * @return {VirtualScroller | null} Virtual scroller instance
      */
     public getVirtualScroller(): VirtualScroller | null;
+    /**
+     * Used to get the processed data.
+     * @return {TValue} sorted and filtered data
+     */
+    public getProcessedData(): TValue;
 }

package/datatable/datatable.esm.js

@@ -16,7 +16,6 @@ import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
 import { PencilIcon } from 'primereact/icons/pencil';
 import { TimesIcon } from 'primereact/icons/times';
-import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
 import { Tooltip } from 'primereact/tooltip';
 import { Button } from 'primereact/button';
@@ -27,6 +26,7 @@ import { FilterSlashIcon } from 'primereact/icons/filterslash';
 import { PlusIcon } from 'primereact/icons/plus';
 import { TrashIcon } from 'primereact/icons/trash';
 import { InputText } from 'primereact/inputtext';
+import { OverlayService } from 'primereact/overlayservice';
 import { Portal } from 'primereact/portal';
 import { SortAltIcon } from 'primereact/icons/sortalt';
 import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
@@ -462,6 +462,9 @@ var DataTableBase = ComponentBase.extend({
     alwaysShowPaginator: true,
     breakpoint: '960px',
     cellClassName: null,
+    cellMemo: true,
+    cellMemoProps: ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'],
+    cellMemoPropsDepth: 1,
     cellSelection: false,
     checkIcon: null,
     className: null,
@@ -1164,8 +1167,6 @@ var Cell = function Cell(props) {
     setStyleObjectState = _React$useState6[1];
   var elementRef = React.useRef(null);
   var keyHelperRef = React.useRef(null);
-  var overlayEventListener = React.useRef(null);
-  var selfClick = React.useRef(false);
   var focusTimeout = React.useRef(null);
   var initFocusTimeout = React.useRef(null);
   var editingRowDataStateRef = React.useRef(null);
@@ -1202,17 +1203,20 @@ var Cell = function Cell(props) {
   var cellEditValidateOnClose = function cellEditValidateOnClose() {
     return getColumnProp('cellEditValidateOnClose');
   };
+  var isIgnoredElement = function isIgnoredElement(element) {
+    var isOverlay = function isOverlay(el) {
+      return el.getAttribute && el.getAttribute('data-pr-is-overlay');
+    };
+    return isOverlay(element) || DomHandler.getParents(element).find(function (el) {
+      return isOverlay(el);
+    });
+  };
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(e) {
-        setTimeout(function () {
-          if (!selfClick.current && isOutsideClicked(e.target)) {
-            // #2666 for overlay components and outside is clicked
-
-            switchCellToViewMode(e, true);
-          }
-        }, 0);
-        selfClick.current = false;
+        if (!isIgnoredElement(e.target) && isOutsideClicked(e.target)) {
+          switchCellToViewMode(e, true);
+        }
       },
       options: true,
       when: isEditable()
@@ -1257,10 +1261,6 @@ var Cell = function Cell(props) {
     setTimeout(function () {
       setEditingState(false);
       unbindDocumentClickListener();
-      OverlayService.off('overlay-click', overlayEventListener.current);
-      overlayEventListener.current = null;
-      editingRowDataStateRef.current = null;
-      selfClick.current = false;
     }, 1);
   };
   var switchCellToViewMode = function switchCellToViewMode(event, submit) {
@@ -1304,7 +1304,7 @@ var Cell = function Cell(props) {
     editingRowDataStateRef.current = editingRowData;
   };
   var _onClick = function onClick(event) {
-    props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, selfClick, props.column, bindDocumentClickListener, overlayEventListener, isOutsideClicked);
+    props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, props.column, bindDocumentClickListener);
   };
   var _onMouseDown = function onMouseDown(event) {
     var params = getCellCallbackParams(event);
@@ -1376,7 +1376,6 @@ var Cell = function Cell(props) {
     }
   };
   var _onBlur = function onBlur(event) {
-    selfClick.current = false;
     if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
       switchCellToViewMode(event, true);
     }
@@ -1457,9 +1456,8 @@ var Cell = function Cell(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingState]);
   useUnmountEffect(function () {
-    if (overlayEventListener.current) {
-      OverlayService.off('overlay-click', overlayEventListener.current);
-      overlayEventListener.current = null;
+    if (editingRowDataStateRef.current) {
+      editingRowDataStateRef.current = null;
     }
   });
   var createLoading = function createLoading() {
@@ -1763,6 +1761,7 @@ var Cell = function Cell(props) {
 var RadioCheckCell = /*#__PURE__*/React.memo(function (props) {
   return /*#__PURE__*/React.createElement(Cell, props);
 }, function (prevProps, nextProps) {
+  if (nextProps.cellMemo === false) return false;
   var keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
   return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
 });
@@ -2246,8 +2245,13 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       } else {
         var left = 0;
         var prev = elementRef.current && elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+        while (prev) {
+          if (prev.classList.contains('p-frozen-column')) {
+            left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            elementRef.current.style.left = left + 'px';
+            break;
+          }
+          prev = prev.previousElementSibling;
         }
         styleObject.left = left + 'px';
       }
@@ -2255,9 +2259,8 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       !isSameStyle && setStyleObjectState(styleObject);
     }
   }, []);
-  var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, selfClick, column, bindDocumentClickListener, overlayEventListener, isOutsideClicked) {
+  var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, column, bindDocumentClickListener) {
     if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.isRowSelected)) {
-      selfClick.current = true;
       var onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
       var onCellEditInit = getColumnProp(column, 'onCellEditInit');
       var cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
@@ -2288,12 +2291,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         }
         if (cellEditValidatorEvent === 'click') {
           bindDocumentClickListener();
-          overlayEventListener.current = function (e) {
-            if (!isOutsideClicked(e.target)) {
-              selfClick.current = true;
-            }
-          };
-          OverlayService.on('overlay-click', overlayEventListener.current);
         }
       }, 1);
     }
@@ -3653,16 +3650,21 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
       var _align = getColumnProp('alignFrozen');
       if (_align === 'right') {
         var right = 0;
-        var next = elementRef.current.nextElementSibling;
+        var next = elementRef.current && elementRef.current.nextElementSibling;
         if (next && next.classList.contains('p-frozen-column')) {
           right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
         styleObject.right = right + 'px';
       } else {
         var left = 0;
-        var prev = elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
+        while (prev) {
+          if (prev && prev.classList.contains('p-frozen-column')) {
+            left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            elementRef.current.style.left = left + 'px';
+            break;
+          }
+          prev = prev.previousElementSibling;
         }
         styleObject.left = left + 'px';
       }
@@ -4345,7 +4347,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       };
     } else {
       filters[field].value = null;
-      filters[field].matchMode = defaultConstraint.matchMode;
+      filters[field].matchMode = defaultConstraint ? defaultConstraint.matchMode : filters[field].matchMode;
     }
     filterClearCallback && filterClearCallback();
     props.onFilterChange(filters);
@@ -4412,6 +4414,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
+    var _iconRef$current;
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
     var filters = _objectSpread$4({}, props.filters);
     filters[field].matchMode = matchMode;
@@ -4422,6 +4425,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     props.onFilterChange(filters);
     props.onFilterApply();
     hide();
+    (_iconRef$current = iconRef.current) === null || _iconRef$current === void 0 || _iconRef$current.focus();
   };
   var onRowMatchModeKeyDown = function onRowMatchModeKeyDown(event, matchMode, clear) {
     var item = event.target;
@@ -5181,16 +5185,21 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       var align = getColumnProp('alignFrozen');
       if (align === 'right') {
         var right = 0;
-        var next = elementRef.current.nextElementSibling;
+        var next = elementRef.current && elementRef.current.nextElementSibling;
         if (next && next.classList.contains('p-frozen-column')) {
           right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
         styleObject.right = right + 'px';
       } else {
         var left = 0;
-        var prev = elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
+        while (prev) {
+          if (prev && prev.classList.contains('p-frozen-column')) {
+            left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            elementRef.current.style.left = left + 'px';
+            break;
+          }
+          prev = prev.previousElementSibling;
         }
         styleObject.left = left + 'px';
       }
@@ -6041,6 +6050,20 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
             multiSortMeta: restoredState.multiSortMeta
           }));
         } else {
+          var lastMeta = restoredState.multiSortMeta[restoredState.multiSortMeta.length - 1];
+          var field = lastMeta && lastMeta.field ? lastMeta.field : null;
+          if (field) {
+            var sortColumn = findColumnByKey(getColumns(), field);
+            if (sortColumn) {
+              var sortFunction = getColumnProp(sortColumn, 'sortFunction');
+              var sortable = getColumnProp(sortColumn, 'sortable');
+              if (sortFunction && sortable) {
+                columnSortFunction.current = sortFunction;
+                columnSortable.current = sortable;
+                columnField.current = field;
+              }
+            }
+          }
           setMultiSortMetaState(restoredState.multiSortMeta);
         }
       }
@@ -7156,6 +7179,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       },
       getVirtualScroller: function getVirtualScroller() {
         return virtualScrollerRef.current;
+      },
+      getProcessedData: function getProcessedData() {
+        return processedData();
       }
     };
   });