primereact 8.0.1 → 8.2.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);
     }
   };
 
@@ -929,6 +929,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         };
         content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
+          name: "row-save",
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
@@ -936,6 +937,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           className: rowEditorProps.saveIconClassName
         }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
+          name: "row-cancel",
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
@@ -951,6 +953,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         };
         content = /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
+          name: "row-edit",
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
@@ -1416,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,
@@ -1463,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]);
@@ -2124,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) {
@@ -2522,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; }
@@ -2575,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);
     }
   };
 
@@ -3812,14 +3823,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,
+      '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');
@@ -4108,6 +4120,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);
@@ -4603,8 +4618,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);
       }
 
@@ -4661,7 +4690,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;
     }
   };
@@ -4724,10 +4753,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) {
@@ -4938,8 +4968,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) {
@@ -4977,7 +5007,8 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var value = _toConsumableArray(data);
 
     if (columnSortable.current && columnSortFunction.current) {
-      value = columnSortFunction({
+      value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -4985,8 +5016,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);
       });
     }
 
@@ -5019,6 +5049,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
       });
@@ -5039,8 +5070,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) {
@@ -5419,7 +5449,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();
@@ -5519,7 +5551,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,
@@ -5583,9 +5617,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,
@@ -5678,10 +5714,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,