primereact 8.1.0 → 8.3.0

package/datatable/datatable.cjs.js

@@ -259,7 +259,7 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
   var onClick = function onClick(event) {
     if (!props.disabled) {
       props.onChange(event);
-      inputRef.current.focus();
+      utils.DomHandler.focus(inputRef.current);
     }
   };
 
@@ -1419,12 +1419,16 @@ var BodyRow = /*#__PURE__*/React__namespace.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__namespace.createElement("tr", {
     role: "row",
     tabIndex: tabIndex,
     className: className,
+    style: style,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onClick: onClick,
@@ -1466,14 +1470,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__namespace.memo(function (props) {
+var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var _React$useState = React__namespace.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowGroupHeaderStyleObjectState = _React$useState2[0],
       setRowGroupHeaderStyleObjectState = _React$useState2[1];
 
   var elementRef = React__namespace.useRef(null);
-  var ref = React__namespace.useCallback(function (el) {
+  var refCallback = React__namespace.useCallback(function (el) {
     elementRef.current = el;
     props.virtualScrollerContentRef && props.virtualScrollerContentRef(el);
   }, [props]);
@@ -1573,7 +1577,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(function (props) {
   };
 
   var allowRowDrag = function allowRowDrag(event) {
-    return !allowCellSelection() && allowDrag(event);
+    return !allowCellSelection() && allowDrag(event) || props.reorderableRows;
   };
 
   var allowCellDrag = function allowCellDrag(event) {
@@ -2127,9 +2131,12 @@ var TableBody = /*#__PURE__*/React__namespace.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) {
@@ -2525,10 +2532,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo(function (props) {
   var className = utils.classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React__namespace.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; }
@@ -2578,7 +2585,8 @@ var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
         styleObject['left'] = left + 'px';
       }
 
-      setStyleObjectState(styleObject);
+      var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+      !isSameStyle && setStyleObjectState(styleObject);
     }
   };
 
@@ -2701,7 +2709,8 @@ var ColumnFilter = /*#__PURE__*/React__namespace.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() {
@@ -3815,14 +3824,15 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     var sortMeta = getSortMeta();
     var style = getStyle();
     var align = getColumnProp('alignHeader') || getColumnProp('align');
+    var frozen = getColumnProp('frozen');
     var className = utils.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');
@@ -4111,6 +4121,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var elementRef = React__namespace.useRef(null);
   var tableRef = React__namespace.useRef(null);
   var wrapperRef = React__namespace.useRef(null);
+  var bodyRef = React__namespace.useRef(null);
+  var frozenBodyRef = React__namespace.useRef(null);
+  var virtualScrollerRef = React__namespace.useRef(null);
   var reorderIndicatorUpRef = React__namespace.useRef(null);
   var reorderIndicatorDownRef = React__namespace.useRef(null);
   var colReorderIconWidth = React__namespace.useRef(null);
@@ -4606,8 +4619,22 @@ var DataTable = /*#__PURE__*/React__namespace.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(utils.DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
+          }
+        }
+
         resizeTableCells(newColumnWidth);
       }
 
@@ -4664,7 +4691,7 @@ var DataTable = /*#__PURE__*/React__namespace.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' || utils.DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
     }
   };
@@ -4727,10 +4754,11 @@ var DataTable = /*#__PURE__*/React__namespace.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) {
@@ -4941,8 +4969,8 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
   };
 
-  var compareValuesOnSort = function compareValuesOnSort(value1, value2) {
-    return utils.ObjectUtils.sort(value1, value2, 1, PrimeReact__default["default"].locale);
+  var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
+    return utils.ObjectUtils.sort(value1, value2, order, PrimeReact__default["default"].locale);
   };
 
   var addSortMeta = function addSortMeta(meta, multiSortMeta) {
@@ -4981,6 +5009,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
 
     if (columnSortable.current && columnSortFunction.current) {
       value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -4988,8 +5017,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       value.sort(function (data1, data2) {
         var value1 = utils.ObjectUtils.resolveFieldData(data1, field);
         var value2 = utils.ObjectUtils.resolveFieldData(data2, field);
-        var result = compareValuesOnSort(value1, value2);
-        return order * result;
+        return compareValuesOnSort(value1, value2, order);
       });
     }
 
@@ -5022,6 +5050,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var field = columnField.current;
       var order = meta ? meta.order : defaultSortOrder;
       value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -5042,8 +5071,7 @@ var DataTable = /*#__PURE__*/React__namespace.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) {
@@ -5363,6 +5391,17 @@ var DataTable = /*#__PURE__*/React__namespace.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 (utils.ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
           data = filterLocal(data, filters);
         }
@@ -5422,7 +5461,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     }
   }, [props.responsiveLayout]);
   hooks.useUpdateEffect(function () {
-    filter(props.globalFilter, 'global', 'contains');
+    if (props.globalFilter) {
+      filter(props.globalFilter, 'global', 'contains');
+    }
   }, [props.globalFilter]);
   hooks.useUnmountEffect(function () {
     unbindColumnResizeEvents();
@@ -5430,7 +5471,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     destroyResponsiveStyle();
   });
   React__namespace.useImperativeHandle(ref, function () {
-    return {
+    return _objectSpread({
       reset: reset,
       resetScroll: resetScroll,
       exportCSV: exportCSV,
@@ -5438,8 +5479,17 @@ var DataTable = /*#__PURE__*/React__namespace.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;
+      }
+    }, props);
   });
 
   var createLoader = function createLoader() {
@@ -5522,7 +5572,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
         columns = options.columns,
         contentRef = options.contentRef,
         className = options.className;
+        options.itemSize;
     var frozenBody = props.frozenValue && /*#__PURE__*/React__namespace.createElement(TableBody, {
+      ref: frozenBodyRef,
       value: props.frozenValue,
       className: "p-datatable-frozen-tbody",
       frozenRow: true,
@@ -5560,6 +5612,7 @@ var DataTable = /*#__PURE__*/React__namespace.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,
@@ -5586,9 +5639,11 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
       rowClassName: props.rowClassName,
+      virtualScrollerOptions: options,
       isVirtualScrollerDisabled: true
     });
     var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
+      ref: bodyRef,
       value: dataToRender(rows),
       className: className,
       empty: empty,
@@ -5627,6 +5682,7 @@ var DataTable = /*#__PURE__*/React__namespace.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,
@@ -5681,10 +5737,15 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       style: {
         maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
       }
-    }, /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({}, virtualScrollerOptions, {
+    }, /*#__PURE__*/React__namespace.createElement(virtualscroller.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,
@@ -5893,6 +5954,7 @@ DataTable.defaultProps = {
   resizableColumns: false,
   columnResizeMode: 'fit',
   reorderableColumns: false,
+  reorderableRows: false,
   filters: null,
   globalFilter: null,
   filterDelay: 300,