primereact 10.9.7 → 10.9.8

package/datatable/datatable.esm.js

@@ -374,10 +374,10 @@ var classes$2 = {
     });
   },
   filterSeparator: 'p-column-filter-separator',
-  filterRowItem: function filterRowItem(_ref10) {
-    var isRowMatchModeSelected = _ref10.isRowMatchModeSelected,
-      isShowMatchModes = _ref10.isShowMatchModes,
-      value = _ref10.value;
+  filterRowItem: function filterRowItem(_ref0) {
+    var isRowMatchModeSelected = _ref0.isRowMatchModeSelected,
+      isShowMatchModes = _ref0.isShowMatchModes,
+      value = _ref0.value;
     return isShowMatchModes() ? classNames('p-column-filter-row-item', {
       'p-highlight': value && isRowMatchModeSelected(value)
     }) : undefined;
@@ -388,18 +388,18 @@ var classes$2 = {
   filterConstraint: 'p-column-filter-constraint',
   filterAddRule: 'p-column-filter-add-rule',
   filterButtonBar: 'p-column-filter-buttonbar',
-  filterOverlay: function filterOverlay(_ref11) {
-    var props = _ref11.columnFilterProps,
-      context = _ref11.context,
-      getColumnProp = _ref11.getColumnProp;
+  filterOverlay: function filterOverlay(_ref1) {
+    var props = _ref1.columnFilterProps,
+      context = _ref1.context,
+      getColumnProp = _ref1.getColumnProp;
     return classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
       'p-column-filter-overlay-menu': props.display === 'menu',
       'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact$1.inputStyle === 'filled',
       'p-ripple-disabled': context && context.ripple === false || PrimeReact$1.ripple === false
     });
   },
-  columnFilter: function columnFilter(_ref12) {
-    var props = _ref12.columnFilterProps;
+  columnFilter: function columnFilter(_ref10) {
+    var props = _ref10.columnFilterProps;
     return classNames('p-column-filter p-fluid', {
       'p-column-filter-row': props.display === 'row',
       'p-column-filter-menu': props.display === 'menu'
@@ -411,13 +411,13 @@ var classes$2 = {
   sortIcon: 'p-sortable-column-icon',
   headerTitle: 'p-column-title',
   headerContent: 'p-column-header-content',
-  headerCell: function headerCell(_ref13) {
-    var props = _ref13.headerProps,
-      frozen = _ref13.frozen,
-      sortMeta = _ref13.sortMeta,
-      align = _ref13.align,
-      _isSortableDisabled = _ref13._isSortableDisabled,
-      getColumnProp = _ref13.getColumnProp;
+  headerCell: function headerCell(_ref11) {
+    var props = _ref11.headerProps,
+      frozen = _ref11.frozen,
+      sortMeta = _ref11.sortMeta,
+      align = _ref11.align,
+      _isSortableDisabled = _ref11._isSortableDisabled,
+      getColumnProp = _ref11.getColumnProp;
     return ObjectUtils.isEmpty(props) ? classNames('p-filter-column', {
       'p-frozen-column': frozen
     }) : classNames(_defineProperty({
@@ -431,9 +431,9 @@ var classes$2 = {
       'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
     }, "p-align-".concat(align), !!align));
   },
-  footerCell: function footerCell(_ref14) {
-    var getColumnProp = _ref14.getColumnProp,
-      align = _ref14.align;
+  footerCell: function footerCell(_ref12) {
+    var getColumnProp = _ref12.getColumnProp,
+      align = _ref12.align;
     return classNames(_defineProperty({
       'p-frozen-column': getColumnProp('frozen')
     }, "p-align-".concat(align), !!align));
@@ -447,12 +447,12 @@ var inlineStyles = {
   resizeHelper: {
     display: 'none'
   },
-  reorderIndicatorUp: function reorderIndicatorUp(_ref15) {
-    var style = _ref15.style;
+  reorderIndicatorUp: function reorderIndicatorUp(_ref13) {
+    var style = _ref13.style;
     return _objectSpread$f({}, style);
   },
-  reorderIndicatorDown: function reorderIndicatorDown(_ref16) {
-    var style = _ref16.style;
+  reorderIndicatorDown: function reorderIndicatorDown(_ref14) {
+    var style = _ref14.style;
     return _objectSpread$f({}, style);
   }
 };
@@ -463,7 +463,7 @@ var DataTableBase = ComponentBase.extend({
     breakpoint: '960px',
     cellClassName: null,
     cellMemo: true,
-    cellMemoProps: ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'],
+    cellMemoProps: ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'rowIndex', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'],
     cellMemoPropsDepth: 1,
     cellSelection: false,
     checkIcon: null,
@@ -897,7 +897,6 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
   var tabIndex = props.disabled ? null : '0';
   var checkboxProps = {
     role: 'checkbox',
-    'aria-checked': props.checked,
     tabIndex: tabIndex,
     onChange: onChange,
     'aria-label': props.ariaLabel,
@@ -3359,23 +3358,20 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     }
   });
   var createEmptyContent = function createEmptyContent() {
-    if (!props.loading) {
-      var colSpan = getColumnsLength();
-      var _content = ObjectUtils.getJSXElement(props.emptyMessage, {
-        props: props.tableProps,
-        frozen: props.frozenRow
-      }) || localeOption('emptyMessage');
-      var emptyMessageProps = mergeProps({
-        className: cx('emptyMessage'),
-        role: 'row'
-      }, ptm('emptyMessage'));
-      var bodyCellProps = mergeProps({
-        colSpan: colSpan,
-        role: 'cell'
-      }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
-      return /*#__PURE__*/React.createElement("tr", emptyMessageProps, /*#__PURE__*/React.createElement("td", bodyCellProps, _content));
-    }
-    return null;
+    var colSpan = getColumnsLength();
+    var content = ObjectUtils.getJSXElement(props.emptyMessage, {
+      props: props.tableProps,
+      frozen: props.frozenRow
+    }) || localeOption('emptyMessage');
+    var emptyMessageProps = mergeProps({
+      className: cx('emptyMessage'),
+      role: 'row'
+    }, ptm('emptyMessage'));
+    var bodyCellProps = mergeProps({
+      colSpan: colSpan,
+      role: 'cell'
+    }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
+    return /*#__PURE__*/React.createElement("tr", emptyMessageProps, /*#__PURE__*/React.createElement("td", bodyCellProps, content));
   };
   var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
     if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
@@ -3396,7 +3392,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         props: props.tableProps,
         customRendering: false
       };
-      var _content2 = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
+      var _content = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
 
       // check if the user wants complete control of the rendering
       if (!options.customRendering) {
@@ -3406,14 +3402,14 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         var rowGroupHeaderNameProps = mergeProps({
           className: cx('rowGroupHeaderName')
         }, ptm('rowGroupHeaderName'));
-        _content2 = /*#__PURE__*/React.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React.createElement("span", rowGroupHeaderNameProps, _content2));
+        _content = /*#__PURE__*/React.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React.createElement("span", rowGroupHeaderNameProps, _content));
       }
       var rowGroupHeaderProps = mergeProps({
         className: cx('rowGroupHeader'),
         style: style,
         role: 'row'
       }, ptm('rowGroupHeader'));
-      return /*#__PURE__*/React.createElement("tr", rowGroupHeaderProps, _content2);
+      return /*#__PURE__*/React.createElement("tr", rowGroupHeaderProps, _content);
     }
     return null;
   };
@@ -3510,7 +3506,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         index: rowIndex,
         customRendering: false
       };
-      var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
+      var _content2 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
 
       // check if the user wants complete control of the rendering
       if (!options.customRendering) {
@@ -3518,20 +3514,20 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
           colSpan: colSpan,
           role: 'cell'
         }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
-        _content3 = /*#__PURE__*/React.createElement("td", bodyCellProps, _content3);
+        _content2 = /*#__PURE__*/React.createElement("td", bodyCellProps, _content2);
       }
       var rowExpansionProps = mergeProps({
         id: id,
         className: cx('rowExpansion'),
         role: 'row'
       }, ptm('rowExpansion'));
-      return /*#__PURE__*/React.createElement("tr", rowExpansionProps, _content3);
+      return /*#__PURE__*/React.createElement("tr", rowExpansionProps, _content2);
     }
     return null;
   };
   var createGroupFooter = function createGroupFooter(rowData, rowIndex, expanded, colSpan) {
     if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) {
-      var _content4 = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
+      var _content3 = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
         index: rowIndex,
         colSpan: colSpan,
         props: props.tableProps
@@ -3540,7 +3536,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         className: cx('rowGroupFooter'),
         role: 'row'
       }, ptm('rowGroupFooter'));
-      return /*#__PURE__*/React.createElement("tr", rowGroupFooterProps, _content4);
+      return /*#__PURE__*/React.createElement("tr", rowGroupFooterProps, _content3);
     }
     return null;
   };
@@ -5068,7 +5064,6 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
   var tabIndex = props.disabled ? null : 0;
   var headerCheckboxProps = {
     role: 'checkbox',
-    'aria-checked': props.checked,
     'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
     tabIndex: tabIndex,
     onChange: onChange,
@@ -5191,23 +5186,48 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         }
         styleObject.right = right + 'px';
       } else {
+        var _elementRef$current, _elementRef$current2;
         var left = 0;
-        var prev = elementRef.current && elementRef.current.previousElementSibling;
-        while (prev) {
-          if (prev && prev.classList.contains('p-frozen-column')) {
-            left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
-            elementRef.current.style.left = left + 'px';
-            break;
+        var prev = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.previousElementSibling;
+        var thead = (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.closest('thead');
+        var scrollContainer = thead === null || thead === void 0 ? void 0 : thead.parentElement.parentElement;
+        var scrollLeft = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollLeft) || 0;
+        var isMultiRow = thead && thead.querySelectorAll('tr').length > 1;
+        if (elementRef.current) {
+          if (!isMultiRow) {
+            while (prev) {
+              if (prev.classList.contains('p-frozen-column')) {
+                left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                break;
+              }
+              prev = prev.previousElementSibling;
+            }
+          } else {
+            var targetLeft = elementRef.current.offsetLeft - scrollLeft;
+            var frozenCells = Array.from(thead.querySelectorAll('th.p-frozen-column'));
+            var candidate = null;
+            for (var _i = 0, _frozenCells = frozenCells; _i < _frozenCells.length; _i++) {
+              var cell = _frozenCells[_i];
+              var cellLeft = cell.offsetLeft - scrollLeft;
+              var cellRight = cellLeft + DomHandler.getOuterWidth(cell);
+              if (cellRight <= targetLeft && (!candidate || cellRight > candidate.offsetLeft + DomHandler.getOuterWidth(candidate))) {
+                candidate = cell;
+              }
+            }
+            if (candidate) {
+              left = candidate.offsetLeft + DomHandler.getOuterWidth(candidate) - scrollLeft;
+            }
           }
-          prev = prev.previousElementSibling;
         }
         styleObject.left = left + 'px';
       }
       var filterRow = elementRef.current.parentElement.nextElementSibling;
       if (filterRow) {
         var _index = DomHandler.index(elementRef.current);
-        filterRow.children[_index].style.left = styleObject.left;
-        filterRow.children[_index].style.right = styleObject.right;
+        if (filterRow.children[_index]) {
+          filterRow.children[_index].style.left = styleObject.left;
+          filterRow.children[_index].style.right = styleObject.right;
+        }
       }
       var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
       !isSameStyle && setStyleObjectState(styleObject);
@@ -5765,37 +5785,37 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     sortOrderState = _React$useState8[0],
     setSortOrderState = _React$useState8[1];
   var _React$useState9 = React.useState(props.multiSortMeta),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    multiSortMetaState = _React$useState10[0],
-    setMultiSortMetaState = _React$useState10[1];
-  var _React$useState11 = React.useState(props.filters),
+    _React$useState0 = _slicedToArray(_React$useState9, 2),
+    multiSortMetaState = _React$useState0[0],
+    setMultiSortMetaState = _React$useState0[1];
+  var _React$useState1 = React.useState(props.filters),
+    _React$useState10 = _slicedToArray(_React$useState1, 2),
+    filtersState = _React$useState10[0],
+    setFiltersState = _React$useState10[1];
+  var _React$useState11 = React.useState([]),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    filtersState = _React$useState12[0],
-    setFiltersState = _React$useState12[1];
-  var _React$useState13 = React.useState([]),
+    columnOrderState = _React$useState12[0],
+    setColumnOrderState = _React$useState12[1];
+  var _React$useState13 = React.useState(null),
     _React$useState14 = _slicedToArray(_React$useState13, 2),
-    columnOrderState = _React$useState14[0],
-    setColumnOrderState = _React$useState14[1];
-  var _React$useState15 = React.useState(null),
+    groupRowsSortMetaState = _React$useState14[0],
+    setGroupRowsSortMetaState = _React$useState14[1];
+  var _React$useState15 = React.useState({}),
     _React$useState16 = _slicedToArray(_React$useState15, 2),
-    groupRowsSortMetaState = _React$useState16[0],
-    setGroupRowsSortMetaState = _React$useState16[1];
+    editingMetaState = _React$useState16[0],
+    setEditingMetaState = _React$useState16[1];
   var _React$useState17 = React.useState({}),
     _React$useState18 = _slicedToArray(_React$useState17, 2),
-    editingMetaState = _React$useState18[0],
-    setEditingMetaState = _React$useState18[1];
-  var _React$useState19 = React.useState({}),
+    frozenEditingMetaState = _React$useState18[0],
+    setFrozenEditingMetaState = _React$useState18[1];
+  var _React$useState19 = React.useState(props.rows),
     _React$useState20 = _slicedToArray(_React$useState19, 2),
-    frozenEditingMetaState = _React$useState20[0],
-    setFrozenEditingMetaState = _React$useState20[1];
-  var _React$useState21 = React.useState(props.rows),
+    d_rowsState = _React$useState20[0],
+    setD_rowsState = _React$useState20[1];
+  var _React$useState21 = React.useState({}),
     _React$useState22 = _slicedToArray(_React$useState21, 2),
-    d_rowsState = _React$useState22[0],
-    setD_rowsState = _React$useState22[1];
-  var _React$useState23 = React.useState({}),
-    _React$useState24 = _slicedToArray(_React$useState23, 2),
-    d_filtersState = _React$useState24[0],
-    setD_filtersState = _React$useState24[1];
+    d_filtersState = _React$useState22[0],
+    setD_filtersState = _React$useState22[1];
   var metaData = {
     props: props,
     state: {
@@ -5848,6 +5868,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var columnSortFunction = React.useRef(null);
   var columnField = React.useRef(null);
   var filterTimeout = React.useRef(null);
+  var restoredRef = React.useRef(false);
   if (props.rows !== d_rowsState && !props.onPage) {
     setRowsState(props.rows);
     setD_rowsState(props.rows);
@@ -6068,13 +6089,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         }
       }
       if (restoredState.filters) {
-        setD_filtersState(cloneFilters(restoredState.filters));
+        var clonedFilters = cloneFilters(restoredState.filters);
+        setD_filtersState(clonedFilters);
         if (props.onFilter) {
           props.onFilter(createEvent({
-            filters: restoredState.filters
+            filters: clonedFilters
           }));
         } else {
-          setFiltersState(cloneFilters(restoredState.filters));
+          setFiltersState(clonedFilters);
         }
       }
       if (props.resizableColumns) {
@@ -7085,15 +7107,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       attributeSelector.current = UniqueComponentId();
       elementRef.current.setAttribute(attributeSelector.current, '');
     }
-
-    //setFiltersState(cloneFilters(props.filters)); // Github #4248
     setD_filtersState(cloneFilters(props.filters));
-    if (isStateful()) {
-      restoreState();
-      if (props.resizableColumns) {
-        restoreColumnWidths();
-      }
-    }
   });
   useUpdateEffect(function () {
     if (props.responsiveLayout === 'stack' && !props.scrollable) {
@@ -7103,6 +7117,15 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       destroyResponsiveStyle();
     };
   }, [props.breakpoint]);
+  useUpdateEffect(function () {
+    if (!restoredRef.current && isStateful()) {
+      restoredRef.current = true;
+      restoreState();
+      if (props.resizableColumns) {
+        restoreColumnWidths();
+      }
+    }
+  }, [context]);
   useUpdateEffect(function () {
     var filters = cloneFilters(props.filters);
     setFiltersState(filters);