primereact 10.9.7 → 10.9.8

package/datatable/datatable.js

@@ -368,10 +368,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       });
     },
     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() ? utils.classNames('p-column-filter-row-item', {
         'p-highlight': value && isRowMatchModeSelected(value)
       }) : undefined;
@@ -382,18 +382,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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 utils.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__default["default"].inputStyle === 'filled',
         'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
       });
     },
-    columnFilter: function columnFilter(_ref12) {
-      var props = _ref12.columnFilterProps;
+    columnFilter: function columnFilter(_ref10) {
+      var props = _ref10.columnFilterProps;
       return utils.classNames('p-column-filter p-fluid', {
         'p-column-filter-row': props.display === 'row',
         'p-column-filter-menu': props.display === 'menu'
@@ -405,13 +405,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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 utils.ObjectUtils.isEmpty(props) ? utils.classNames('p-filter-column', {
         'p-frozen-column': frozen
       }) : utils.classNames(_defineProperty({
@@ -425,9 +425,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         '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 utils.classNames(_defineProperty({
         'p-frozen-column': getColumnProp('frozen')
       }, "p-align-".concat(align), !!align));
@@ -441,12 +441,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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);
     }
   };
@@ -457,7 +457,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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,
@@ -891,7 +891,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var tabIndex = props.disabled ? null : '0';
     var checkboxProps = {
       role: 'checkbox',
-      'aria-checked': props.checked,
       tabIndex: tabIndex,
       onChange: onChange,
       'aria-label': props.ariaLabel,
@@ -3353,23 +3352,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     });
     var createEmptyContent = function createEmptyContent() {
-      if (!props.loading) {
-        var colSpan = getColumnsLength();
-        var _content = utils.ObjectUtils.getJSXElement(props.emptyMessage, {
-          props: props.tableProps,
-          frozen: props.frozenRow
-        }) || PrimeReact$1.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__namespace.createElement("tr", emptyMessageProps, /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content));
-      }
-      return null;
+      var colSpan = getColumnsLength();
+      var content = utils.ObjectUtils.getJSXElement(props.emptyMessage, {
+        props: props.tableProps,
+        frozen: props.frozenRow
+      }) || PrimeReact$1.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__namespace.createElement("tr", emptyMessageProps, /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, content));
     };
     var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
       if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
@@ -3390,7 +3386,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           props: props.tableProps,
           customRendering: false
         };
-        var _content2 = utils.ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
+        var _content = utils.ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
@@ -3400,14 +3396,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           var rowGroupHeaderNameProps = mergeProps({
             className: cx('rowGroupHeaderName')
           }, ptm('rowGroupHeaderName'));
-          _content2 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React__namespace.createElement("span", rowGroupHeaderNameProps, _content2));
+          _content = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React__namespace.createElement("span", rowGroupHeaderNameProps, _content));
         }
         var rowGroupHeaderProps = mergeProps({
           className: cx('rowGroupHeader'),
           style: style,
           role: 'row'
         }, ptm('rowGroupHeader'));
-        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupHeaderProps, _content2);
+        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupHeaderProps, _content);
       }
       return null;
     };
@@ -3504,7 +3500,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           index: rowIndex,
           customRendering: false
         };
-        var _content3 = utils.ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
+        var _content2 = utils.ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
@@ -3512,20 +3508,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             colSpan: colSpan,
             role: 'cell'
           }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
-          _content3 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content3);
+          _content2 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content2);
         }
         var rowExpansionProps = mergeProps({
           id: id,
           className: cx('rowExpansion'),
           role: 'row'
         }, ptm('rowExpansion'));
-        return /*#__PURE__*/React__namespace.createElement("tr", rowExpansionProps, _content3);
+        return /*#__PURE__*/React__namespace.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 = utils.ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
+        var _content3 = utils.ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
           index: rowIndex,
           colSpan: colSpan,
           props: props.tableProps
@@ -3534,7 +3530,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           className: cx('rowGroupFooter'),
           role: 'row'
         }, ptm('rowGroupFooter'));
-        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupFooterProps, _content4);
+        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupFooterProps, _content3);
       }
       return null;
     };
@@ -5062,7 +5058,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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,
@@ -5185,23 +5180,48 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           }
           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 = utils.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 = utils.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 + utils.DomHandler.getOuterWidth(cell);
+                if (cellRight <= targetLeft && (!candidate || cellRight > candidate.offsetLeft + utils.DomHandler.getOuterWidth(candidate))) {
+                  candidate = cell;
+                }
+              }
+              if (candidate) {
+                left = candidate.offsetLeft + utils.DomHandler.getOuterWidth(candidate) - scrollLeft;
+              }
             }
-            prev = prev.previousElementSibling;
           }
           styleObject.left = left + 'px';
         }
         var filterRow = elementRef.current.parentElement.nextElementSibling;
         if (filterRow) {
           var _index = utils.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);
@@ -5759,37 +5779,37 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       sortOrderState = _React$useState8[0],
       setSortOrderState = _React$useState8[1];
     var _React$useState9 = React__namespace.useState(props.multiSortMeta),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      multiSortMetaState = _React$useState10[0],
-      setMultiSortMetaState = _React$useState10[1];
-    var _React$useState11 = React__namespace.useState(props.filters),
+      _React$useState0 = _slicedToArray(_React$useState9, 2),
+      multiSortMetaState = _React$useState0[0],
+      setMultiSortMetaState = _React$useState0[1];
+    var _React$useState1 = React__namespace.useState(props.filters),
+      _React$useState10 = _slicedToArray(_React$useState1, 2),
+      filtersState = _React$useState10[0],
+      setFiltersState = _React$useState10[1];
+    var _React$useState11 = React__namespace.useState([]),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      filtersState = _React$useState12[0],
-      setFiltersState = _React$useState12[1];
-    var _React$useState13 = React__namespace.useState([]),
+      columnOrderState = _React$useState12[0],
+      setColumnOrderState = _React$useState12[1];
+    var _React$useState13 = React__namespace.useState(null),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      columnOrderState = _React$useState14[0],
-      setColumnOrderState = _React$useState14[1];
-    var _React$useState15 = React__namespace.useState(null),
+      groupRowsSortMetaState = _React$useState14[0],
+      setGroupRowsSortMetaState = _React$useState14[1];
+    var _React$useState15 = React__namespace.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__namespace.useState({}),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      editingMetaState = _React$useState18[0],
-      setEditingMetaState = _React$useState18[1];
-    var _React$useState19 = React__namespace.useState({}),
+      frozenEditingMetaState = _React$useState18[0],
+      setFrozenEditingMetaState = _React$useState18[1];
+    var _React$useState19 = React__namespace.useState(props.rows),
       _React$useState20 = _slicedToArray(_React$useState19, 2),
-      frozenEditingMetaState = _React$useState20[0],
-      setFrozenEditingMetaState = _React$useState20[1];
-    var _React$useState21 = React__namespace.useState(props.rows),
+      d_rowsState = _React$useState20[0],
+      setD_rowsState = _React$useState20[1];
+    var _React$useState21 = React__namespace.useState({}),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      d_rowsState = _React$useState22[0],
-      setD_rowsState = _React$useState22[1];
-    var _React$useState23 = React__namespace.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: {
@@ -5842,6 +5862,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var columnSortFunction = React__namespace.useRef(null);
     var columnField = React__namespace.useRef(null);
     var filterTimeout = React__namespace.useRef(null);
+    var restoredRef = React__namespace.useRef(false);
     if (props.rows !== d_rowsState && !props.onPage) {
       setRowsState(props.rows);
       setD_rowsState(props.rows);
@@ -6062,13 +6083,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           }
         }
         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) {
@@ -7079,15 +7101,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         attributeSelector.current = utils.UniqueComponentId();
         elementRef.current.setAttribute(attributeSelector.current, '');
       }
-
-      //setFiltersState(cloneFilters(props.filters)); // Github #4248
       setD_filtersState(cloneFilters(props.filters));
-      if (isStateful()) {
-        restoreState();
-        if (props.resizableColumns) {
-          restoreColumnWidths();
-        }
-      }
     });
     hooks.useUpdateEffect(function () {
       if (props.responsiveLayout === 'stack' && !props.scrollable) {
@@ -7097,6 +7111,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         destroyResponsiveStyle();
       };
     }, [props.breakpoint]);
+    hooks.useUpdateEffect(function () {
+      if (!restoredRef.current && isStateful()) {
+        restoredRef.current = true;
+        restoreState();
+        if (props.resizableColumns) {
+          restoreColumnWidths();
+        }
+      }
+    }, [context]);
     hooks.useUpdateEffect(function () {
       var filters = cloneFilters(props.filters);
       setFiltersState(filters);