primereact 8.1.1 → 8.2.0

package/datatable/datatable.js

@@ -245,7 +245,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var onClick = function onClick(event) {
       if (!props.disabled) {
         props.onChange(event);
-        inputRef.current.focus();
+        utils.DomHandler.focus(inputRef.current);
       }
     };
 
@@ -1405,12 +1405,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       }),
       '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,
@@ -1452,14 +1456,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
   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]);
@@ -2113,9 +2117,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     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) {
@@ -2511,10 +2518,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     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; }
@@ -2564,7 +2571,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           styleObject['left'] = left + 'px';
         }
 
-        setStyleObjectState(styleObject);
+        var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+        !isSameStyle && setStyleObjectState(styleObject);
       }
     };
 
@@ -3801,14 +3809,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       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');
@@ -4097,6 +4106,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     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);
@@ -4592,8 +4604,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           }
         } 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);
         }
 
@@ -4650,7 +4676,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       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;
       }
     };
@@ -4713,10 +4739,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     };
 
     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) {
@@ -4927,8 +4954,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       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) {
@@ -4967,6 +4994,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
       if (columnSortable.current && columnSortFunction.current) {
         value = columnSortFunction.current({
+          rowData: value,
           field: field,
           order: order
         });
@@ -4974,8 +5002,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         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);
         });
       }
 
@@ -5008,6 +5035,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         var field = columnField.current;
         var order = meta ? meta.order : defaultSortOrder;
         value = columnSortFunction.current({
+          rowData: value,
           field: field,
           order: order
         });
@@ -5028,8 +5056,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         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) {
@@ -5408,7 +5435,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       }
     }, [props.responsiveLayout]);
     hooks.useUpdateEffect(function () {
-      filter(props.globalFilter, 'global', 'contains');
+      if (props.globalFilter) {
+        filter(props.globalFilter, 'global', 'contains');
+      }
     }, [props.globalFilter]);
     hooks.useUnmountEffect(function () {
       unbindColumnResizeEvents();
@@ -5508,7 +5537,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           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,
@@ -5572,9 +5603,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         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,
@@ -5667,10 +5700,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         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,