primereact 8.0.1 → 8.2.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);
     }
   };
 
@@ -902,6 +902,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         };
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
           type: "button",
+          name: "row-save",
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
@@ -909,6 +910,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           className: rowEditorProps.saveIconClassName
         }), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
           type: "button",
+          name: "row-cancel",
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
@@ -924,6 +926,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         };
         content = /*#__PURE__*/React.createElement("button", {
           type: "button",
+          name: "row-edit",
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
@@ -1389,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,
@@ -1436,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]);
@@ -2097,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) {
@@ -2495,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; }
@@ -2548,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);
     }
   };
 
@@ -3785,14 +3796,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,
+      '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');
@@ -4081,6 +4093,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);
@@ -4576,8 +4591,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);
       }
 
@@ -4634,7 +4663,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;
     }
   };
@@ -4697,10 +4726,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) {
@@ -4911,8 +4941,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);
   };
 
   var addSortMeta = function addSortMeta(meta, multiSortMeta) {
@@ -4950,7 +4980,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var value = _toConsumableArray(data);
 
     if (columnSortable.current && columnSortFunction.current) {
-      value = columnSortFunction({
+      value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -4958,8 +4989,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);
       });
     }
 
@@ -4992,6 +5022,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
       });
@@ -5012,8 +5043,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) {
@@ -5392,7 +5422,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();
@@ -5492,7 +5524,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,
@@ -5556,9 +5590,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,
@@ -5651,10 +5687,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,