primereact 8.1.1 → 8.4.0

package/datatable/datatable.esm.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PrimeReact, { localeOption, FilterMatchMode, FilterOperator, FilterService } from 'primereact/api';
 import { useEventListener, useUpdateEffect, useUnmountEffect, usePrevious, useMountEffect, useOverlayListener } from 'primereact/hooks';
 import { Paginator } from 'primereact/paginator';
-import { classNames, ObjectUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
@@ -232,7 +232,7 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
   var onClick = function onClick(event) {
     if (!props.disabled) {
       props.onChange(event);
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -1392,12 +1392,16 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     }),
     'p-row-odd': props.index % 2 !== 0
   });
+  var style = {
+    height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined
+  };
   var content = createContent();
   var tabIndex = getTabIndex();
   return /*#__PURE__*/React.createElement("tr", {
     role: "row",
     tabIndex: tabIndex,
     className: className,
+    style: style,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onClick: onClick,
@@ -1439,14 +1443,14 @@ var _excluded = ["originalEvent"];
 function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var TableBody = /*#__PURE__*/React.memo(function (props) {
+var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowGroupHeaderStyleObjectState = _React$useState2[0],
       setRowGroupHeaderStyleObjectState = _React$useState2[1];
 
   var elementRef = React.useRef(null);
-  var ref = React.useCallback(function (el) {
+  var refCallback = React.useCallback(function (el) {
     elementRef.current = el;
     props.virtualScrollerContentRef && props.virtualScrollerContentRef(el);
   }, [props]);
@@ -1546,7 +1550,7 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   };
 
   var allowRowDrag = function allowRowDrag(event) {
-    return !allowCellSelection() && allowDrag(event);
+    return !allowCellSelection() && allowDrag(event) || props.reorderableRows;
   };
 
   var allowCellDrag = function allowCellDrag(event) {
@@ -2100,9 +2104,12 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   var onRowDragStart = function onRowDragStart(e) {
     var event = e.originalEvent,
         index = e.index;
-    rowDragging.current = true;
-    draggedRowIndex.current = index;
-    event.dataTransfer.setData('text', 'b'); // For firefox
+
+    if (allowRowDrag(event)) {
+      rowDragging.current = true;
+      draggedRowIndex.current = index;
+      event.dataTransfer.setData('text', 'b'); // For firefox
+    }
   };
 
   var onRowDragOver = function onRowDragOver(e) {
@@ -2498,10 +2505,10 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   var className = classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React.createElement("tbody", {
-    ref: ref,
+    ref: refCallback,
     className: className
   }, content);
-});
+}));
 TableBody.displayName = 'TableBody';
 
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -2551,7 +2558,8 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
         styleObject['left'] = left + 'px';
       }
 
-      setStyleObjectState(styleObject);
+      var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+      !isSameStyle && setStyleObjectState(styleObject);
     }
   };
 
@@ -2674,7 +2682,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       unbindOverlayListener = _useOverlayListener2[1];
 
   var hasFilter = function hasFilter() {
-    return filterStoreModel && filterModel && (filterStoreModel.operator ? filterStoreModel.constraints[0].value !== filterModel.constraints[0].value : filterStoreModel.value !== filterModel.value);
+    if (!filterStoreModel || !filterModel) return false;
+    return filterStoreModel.operator ? !isFilterBlank(filterModel.constraints[0].value) && filterStoreModel.constraints[0].value !== filterModel.constraints[0].value : !isFilterBlank(filterModel.value) && filterStoreModel.value !== filterModel.value;
   };
 
   var hasRowFilter = function hasRowFilter() {
@@ -3788,14 +3797,15 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var sortMeta = getSortMeta();
     var style = getStyle();
     var align = getColumnProp('alignHeader') || getColumnProp('align');
+    var frozen = getColumnProp('frozen');
     var className = classNames(getColumnProp('headerClassName'), getColumnProp('className'), _defineProperty({
       'p-sortable-column': getColumnProp('sortable'),
       'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
       'p-highlight': sortMeta.sorted,
-      'p-frozen-column': getColumnProp('frozen'),
+      'p-frozen-column': frozen,
       'p-selection-column': getColumnProp('selectionMode'),
       'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
-      'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable')
+      'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
     }, "p-align-".concat(align), !!align));
     var tabIndex = getColumnProp('sortable') && !_isSortableDisabled ? props.tabIndex : null;
     var colSpan = getColumnProp('colSpan');
@@ -4084,6 +4094,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var elementRef = React.useRef(null);
   var tableRef = React.useRef(null);
   var wrapperRef = React.useRef(null);
+  var bodyRef = React.useRef(null);
+  var frozenBodyRef = React.useRef(null);
+  var virtualScrollerRef = React.useRef(null);
   var reorderIndicatorUpRef = React.useRef(null);
   var reorderIndicatorDownRef = React.useRef(null);
   var colReorderIconWidth = React.useRef(null);
@@ -4376,6 +4389,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (props.resizableColumns) {
         columnWidthsState.current = restoredState.columnWidths;
         tableWidthState.current = restoredState.tableWidth;
+        restoreColumnWidths();
       }
 
       if (props.reorderableColumns) {
@@ -4579,8 +4593,22 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
       } else if (props.columnResizeMode === 'expand') {
         var tableWidth = tableRef.current.offsetWidth + delta + 'px';
-        tableRef.current.style.width = tableWidth;
-        tableRef.current.style.minWidth = tableWidth;
+
+        var updateTableWidth = function updateTableWidth(el) {
+          !!el && (el.style.width = el.style.minWidth = tableWidth);
+        };
+
+        updateTableWidth(tableRef.current);
+
+        if (!isVirtualScrollerDisabled()) {
+          updateTableWidth(bodyRef.current);
+          updateTableWidth(frozenBodyRef.current);
+
+          if (wrapperRef.current) {
+            updateTableWidth(DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
+          }
+        }
+
         resizeTableCells(newColumnWidth);
       }
 
@@ -4637,7 +4665,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var event = e.originalEvent,
         column = e.column;
 
-    if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false) {
+    if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
       if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
     }
   };
@@ -4700,10 +4728,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var onColumnHeaderDragOver = function onColumnHeaderDragOver(e) {
-    var event = e.originalEvent;
+    var event = e.originalEvent,
+        column = e.column;
     var dropHeader = findParentHeader(event.currentTarget);
 
-    if (props.reorderableColumns && draggedColumnElement.current && dropHeader) {
+    if (props.reorderableColumns && draggedColumnElement.current && dropHeader && !getColumnProp(column, 'frozen')) {
       event.preventDefault();
 
       if (draggedColumnElement.current !== dropHeader) {
@@ -4914,8 +4943,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
   };
 
-  var compareValuesOnSort = function compareValuesOnSort(value1, value2) {
-    return ObjectUtils.sort(value1, value2, 1, PrimeReact.locale);
+  var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
+    return ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder);
   };
 
   var addSortMeta = function addSortMeta(meta, multiSortMeta) {
@@ -4954,6 +4983,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     if (columnSortable.current && columnSortFunction.current) {
       value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -4961,8 +4991,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value.sort(function (data1, data2) {
         var value1 = ObjectUtils.resolveFieldData(data1, field);
         var value2 = ObjectUtils.resolveFieldData(data2, field);
-        var result = compareValuesOnSort(value1, value2);
-        return order * result;
+        return compareValuesOnSort(value1, value2, order);
       });
     }
 
@@ -4995,6 +5024,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var field = columnField.current;
       var order = meta ? meta.order : defaultSortOrder;
       value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -5015,8 +5045,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0;
     }
 
-    var result = compareValuesOnSort(value1, value2);
-    return multiSortMeta[index].order * result;
+    return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
   };
 
   var onFilterChange = function onFilterChange(filters) {
@@ -5336,6 +5365,17 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var sortOrder = localState && localState.sortOrder || getSortOrder();
         var multiSortMeta = localState && localState.multiSortMeta || getMultiSortMeta();
 
+        var _columns3 = getColumns();
+
+        var sortColumn = _columns3.find(function (col) {
+          return col.props.field === sortField;
+        });
+
+        if (sortColumn) {
+          columnSortable.current = sortColumn.props.sortable;
+          columnSortFunction.current = sortColumn.props.sortFunction;
+        }
+
         if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
           data = filterLocal(data, filters);
         }
@@ -5395,7 +5435,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [props.responsiveLayout]);
   useUpdateEffect(function () {
-    filter(props.globalFilter, 'global', 'contains');
+    if (props.globalFilter) {
+      filter(props.globalFilter, 'global', 'contains');
+    }
   }, [props.globalFilter]);
   useUnmountEffect(function () {
     unbindColumnResizeEvents();
@@ -5404,6 +5446,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   React.useImperativeHandle(ref, function () {
     return {
+      props: props,
       reset: reset,
       resetScroll: resetScroll,
       exportCSV: exportCSV,
@@ -5411,7 +5454,16 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       resetColumnOrder: resetColumnOrder,
       closeEditingCell: closeEditingCell,
       restoreTableState: restoreTableState,
-      clearState: clearState
+      clearState: clearState,
+      getElement: function getElement() {
+        return elementRef.current;
+      },
+      getTable: function getTable() {
+        return tableRef.current;
+      },
+      getVirtualScroller: function getVirtualScroller() {
+        return virtualScrollerRef.current;
+      }
     };
   });
 
@@ -5495,7 +5547,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         columns = options.columns,
         contentRef = options.contentRef,
         className = options.className;
+        options.itemSize;
     var frozenBody = props.frozenValue && /*#__PURE__*/React.createElement(TableBody, {
+      ref: frozenBodyRef,
       value: props.frozenValue,
       className: "p-datatable-frozen-tbody",
       frozenRow: true,
@@ -5533,6 +5587,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       editMode: props.editMode,
       editingRows: props.editingRows,
       onRowReorder: props.onRowReorder,
+      reorderableRows: props.reorderableRows,
       scrollable: props.scrollable,
       rowGroupMode: props.rowGroupMode,
       groupRowsBy: props.groupRowsBy,
@@ -5559,9 +5614,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
       rowClassName: props.rowClassName,
+      virtualScrollerOptions: options,
       isVirtualScrollerDisabled: true
     });
     var body = /*#__PURE__*/React.createElement(TableBody, {
+      ref: bodyRef,
       value: dataToRender(rows),
       className: className,
       empty: empty,
@@ -5600,6 +5657,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       editMode: props.editMode,
       editingRows: props.editingRows,
       onRowReorder: props.onRowReorder,
+      reorderableRows: props.reorderableRows,
       scrollable: props.scrollable,
       rowGroupMode: props.rowGroupMode,
       groupRowsBy: props.groupRowsBy,
@@ -5654,10 +5712,15 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style: {
         maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
       }
-    }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({}, virtualScrollerOptions, {
+    }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({
+      ref: virtualScrollerRef
+    }, virtualScrollerOptions, {
       items: processedData,
       columns: columns,
-      scrollHeight: props.scrollHeight,
+      style: _objectSpread(_objectSpread({}, virtualScrollerOptions.style), {
+        height: props.scrollHeight !== 'flex' ? props.scrollHeight : undefined
+      }),
+      scrollHeight: props.scrollHeight !== 'flex' ? undefined : '100%',
       disabled: _isVirtualScrollerDisabled,
       loaderDisabled: true,
       showSpacer: false,
@@ -5866,6 +5929,7 @@ DataTable.defaultProps = {
   resizableColumns: false,
   columnResizeMode: 'fit',
   reorderableColumns: false,
+  reorderableRows: false,
   filters: null,
   globalFilter: null,
   filterDelay: 300,