@gridsuite/commons-ui 0.30.0 → 0.31.0

package/lib/components/MuiVirtualizedTable/ColumnHeader.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports["default"] = exports.ColumnHeader = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
@@ -17,6 +17,10 @@ var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDo
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * Copyright (c) 2022, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -110,14 +114,17 @@ var ColumnHeader = _react["default"].forwardRef(function (props, ref) {
     setHovered(evt.type === 'mouseenter');
   }, []);
 
+  var topmostDiv = (0, _react.useRef)();
+
   var handleFilterClick = _react["default"].useMemo(function () {
     if (!onFilterClick) return undefined;
     return function (evt) {
-      onFilterClick(evt, evt.target.parentNode.parentNode);
+      onFilterClick(evt, topmostDiv.current);
     };
   }, [onFilterClick]);
 
   return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: topmostDiv,
     onMouseEnter: onHover,
     onMouseLeave: onHover,
     className: (0, _clsx["default"])(classes.divFlex, numeric && classes.divNum, className),

package/lib/components/MuiVirtualizedTable/KeyedColumnsRowIndexer.js

@@ -23,7 +23,7 @@ var CHANGE_WAYS = {
   AMEND: 'Amend',
   REMOVE: 'Remove'
 };
-/*
+/* This is not real code commented
 const someTypicalColumns = [
     { label: 'strings column', dataKey: 'key1' },
     {
@@ -182,18 +182,20 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
       _this._bumpVersion();
     });
 
-    _defineProperty(this, "preFilterRowMapping", function (columns, rows) {
+    _defineProperty(this, "preFilterRowMapping", function (columns, rows, rowFilter) {
       if (!(rows === null || rows === void 0 ? void 0 : rows.length) || !(columns === null || columns === void 0 ? void 0 : columns.length)) return null;
       var ri = [];
       var cs = {};
 
-      for (var colIdx = 0; colIdx < columns.length; colIdx++) {
-        var col = columns[colIdx];
-        var helper = getHelper(col);
-        var colStat = helper.initStat();
+      for (var _iterator = _createForOfIteratorHelperLoose(columns), _step; !(_step = _iterator()).done;) {
+        var _col2 = _step.value;
+
+        var _helper2 = getHelper(_col2);
+
+        var colStat = _helper2.initStat();
 
         if (colStat) {
-          cs[col.dataKey] = colStat;
+          cs[_col2.dataKey] = colStat;
         }
       }
 
@@ -202,18 +204,14 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
         var acceptsRow = true;
         var acceptedOnRow = {};
 
-        for (var _colIdx = 0; _colIdx < columns.length; _colIdx++) {
+        for (var colIdx = 0; colIdx < columns.length; colIdx++) {
           var _this$byColFilter;
 
-          var _col = columns[_colIdx];
-
-          var _helper = getHelper(_col);
-
-          var colKey = _col.dataKey;
+          var col = columns[colIdx];
+          var helper = getHelper(col);
+          var colKey = col.dataKey;
           var cellValue = row[colKey];
-
-          _helper.updateStat(cs[colKey], cellValue, false);
-
+          helper.updateStat(cs[colKey], cellValue, false);
           var colFilterParams = (_this$byColFilter = _this.byColFilter) === null || _this$byColFilter === void 0 ? void 0 : _this$byColFilter[colKey];
           var acceptsCell = true;
 
@@ -221,18 +219,22 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
             var up = colFilterParams.userParams;
             var op = colFilterParams.outerParams;
 
-            if (!_helper.accepts(cellValue, up, op)) {
+            if (!helper.accepts(cellValue, up, op)) {
               acceptsCell = false;
             }
           }
 
-          if (_helper.maintainsStats && acceptsCell) {
-            acceptedOnRow[_colIdx] = cellValue;
+          if (helper.maintainsStats && acceptsCell) {
+            acceptedOnRow[colIdx] = cellValue;
           }
 
           acceptsRow &= acceptsCell;
         }
 
+        if (acceptsRow && rowFilter) {
+          acceptsRow = rowFilter(row);
+        }
+
         if (acceptsRow && _this.byRowFilter) {
           acceptsRow = _this.byRowFilter(row);
         }
@@ -242,11 +244,11 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
             var _Object$entries$_i = _Object$entries[_i],
                 idx = _Object$entries$_i[0],
                 value = _Object$entries$_i[1];
-            var _col2 = columns[idx];
+            var _col = columns[idx];
 
-            var _helper2 = getHelper(_col2);
+            var _helper = getHelper(_col);
 
-            _helper2.updateStat(cs[_col2.dataKey], value, true);
+            _helper.updateStat(cs[_col.dataKey], value, true);
           }
 
           ri.push([row, rowIdx]);
@@ -493,7 +495,6 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
       _this._bumpVersion();
     });
 
-    console.debug('KeyedColumnsRowIndexer');
     this._versionSetter = versionSetter;
     this.version = 0;
     this.filterVersion = 0;
@@ -546,14 +547,14 @@ var codedColumnsFromKeyAndDirection = function codedColumnsFromKeyAndDirection(k
     columIndexByKey[colKey] = colIdx;
   }
 
-  for (var i = 0; i < keyAndDirections.length; i++) {
-    var knd = keyAndDirections[i];
+  for (var _iterator2 = _createForOfIteratorHelperLoose(keyAndDirections), _step2; !(_step2 = _iterator2()).done;) {
+    var knd = _step2.value;
     var _colKey = knd[0];
     var dir = knd[1];
-    var _colIdx2 = columIndexByKey[_colKey];
-    if (_colIdx2 === undefined) continue;
+    var _colIdx = columIndexByKey[_colKey];
+    if (_colIdx === undefined) continue;
     var sign = giveDirSignFor(dir);
-    ret.push((_colIdx2 + 1) * sign);
+    ret.push((_colIdx + 1) * sign);
   }
 
   return ret;
@@ -565,7 +566,14 @@ var compareValue = function compareValue(a, b, isNumeric, undefSign) {
   }
 
   if (a === undefined && b === undefined) return 0;else if (a === undefined) return undefSign;else if (b === undefined) return -undefSign;
-  return isNumeric ? Math.sign(Number(a) - Number(b)) : ('' + a).localeCompare(b);
+
+  if (!isNumeric) {
+    return ('' + a).localeCompare(b);
+  } else {
+    if (isNaN(a)) return isNaN(b) ? 0 : 1;
+    if (isNaN(b)) return -1;
+    return Math.sign(Number(a) - Number(b));
+  }
 };
 
 var makeCompositeComparatorFromCodedColumns = function makeCompositeComparatorFromCodedColumns(codedColumns, columns, rowExtractor) {
@@ -573,8 +581,8 @@ var makeCompositeComparatorFromCodedColumns = function makeCompositeComparatorFr
     var row_a = rowExtractor(row_a_i);
     var row_b = rowExtractor(row_b_i);
 
-    for (var _iterator = _createForOfIteratorHelperLoose(codedColumns), _step; !(_step = _iterator()).done;) {
-      var cc = _step.value;
+    for (var _iterator3 = _createForOfIteratorHelperLoose(codedColumns), _step3; !(_step3 = _iterator3()).done;) {
+      var cc = _step3.value;
       var i = Math.abs(cc) - 1;
       var mul = Math.sign(cc);
       var col = columns[i];
@@ -602,8 +610,8 @@ var groupRows = function groupRows(groupingColumnsCount, columns, indexedArray)
   var inBuildGroup = [];
   groups.push(inBuildGroup);
 
-  for (var _iterator2 = _createForOfIteratorHelperLoose(indexedArray), _step2; !(_step2 = _iterator2()).done;) {
-    var p = _step2.value;
+  for (var _iterator4 = _createForOfIteratorHelperLoose(indexedArray), _step4; !(_step4 = _iterator4()).done;) {
+    var p = _step4.value;
     var nextSlice = p[0].slice(0, groupingColumnsCount);
 
     if (prevSlice === null || !(0, _algos.equalsArray)(prevSlice, nextSlice)) {
@@ -647,10 +655,10 @@ var groupAndSort = function groupAndSort(preFilteredRowPairs, codedColumns, grou
     });
     indexedArray = [];
 
-    for (var _iterator3 = _createForOfIteratorHelperLoose(groups), _step3; !(_step3 = _iterator3()).done;) {
+    for (var _iterator5 = _createForOfIteratorHelperLoose(groups), _step5; !(_step5 = _iterator5()).done;) {
       var _indexedArray;
 
-      var group = _step3.value;
+      var group = _step5.value;
       group.sort(intraGroupSortingComparator);
 
       (_indexedArray = indexedArray).push.apply(_indexedArray, group);

package/lib/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -112,19 +112,26 @@ var AmongChooser = function AmongChooser(props) {
   var options = props.options,
       value = props.value,
       setValue = props.setValue,
-      id = props.id;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, props.label), /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
+      id = props.id,
+      onDropDownVisibility = props.onDropDownVisibility;
+  return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
     id: id,
     value: value !== null && value !== void 0 ? value : [],
     multiple: true,
     onChange: function onChange(evt, newVal) {
       setValue(newVal);
     },
-    options: options // getOptionLabel={(code) => options.get(code)}
-    ,
+    onClose: function onClose() {
+      return onDropDownVisibility(false);
+    },
+    onOpen: function onOpen() {
+      return onDropDownVisibility(true);
+    },
+    options: options,
     renderInput: function renderInput(props) {
-      return /*#__PURE__*/_react["default"].createElement(_material.TextField // label={<FormattedMessage id={titleMessage} />}
-      , props);
+      return /*#__PURE__*/_react["default"].createElement(_material.TextField, _extends({
+        autoFocus: true
+      }, props));
     },
     renderTags: function renderTags(val, getTagsProps) {
       return val.map(function (code, index) {
@@ -140,6 +147,22 @@ var AmongChooser = function AmongChooser(props) {
   }));
 };
 
+function makeIndexRecord(viewIndexToModel, rows) {
+  return {
+    viewIndexToModel: viewIndexToModel,
+    rowGetter: !viewIndexToModel ? function (viewIndex) {
+      return rows[viewIndex];
+    } : function (viewIndex) {
+      if (viewIndex >= viewIndexToModel.length || viewIndex < 0) {
+        return {};
+      }
+
+      var modelIndex = viewIndexToModel[viewIndex];
+      return rows[modelIndex];
+    }
+  };
+}
+
 var initIndexer = function initIndexer(props, oldProps, versionSetter) {
   if (!props.sortable) {
     return null;
@@ -147,29 +170,75 @@ var initIndexer = function initIndexer(props, oldProps, versionSetter) {
 
   if (props.indexer) {
     return props.indexer;
-  } else if (!props.sort) {
-    return new _KeyedColumnsRowIndexer.KeyedColumnsRowIndexer(true, true, null, versionSetter);
-  } else if (typeof props.sort === 'function') {
-    return new _KeyedColumnsRowIndexer.KeyedColumnsRowIndexer(true, true, function (cbfgs, done_cb) {
-      console.debug('dummy func, now :-/');
-      done_cb(true);
-    }, versionSetter);
-  } else if (typeof props.sort === 'object') {
-    return props.sort;
-  } else {
-    console.warn('unknown type of sort', props.sort);
   }
 
   return new _KeyedColumnsRowIndexer.KeyedColumnsRowIndexer(true, true, null, versionSetter);
 };
 
+var preFilterData = (0, _memoizeOne["default"])(function (columns, rows, filterFromProps, indexer, filterVersion // filterVersion is unused directly, used only as a workaround just to reset the memoization
+) {
+  return indexer.preFilterRowMapping(columns, rows, filterFromProps);
+});
+var reorderIndex = (0, _memoizeOne["default"])(function (indexer, indirectionVersion, rows, columns, filterFromProps, sortFromProps) {
+  if (!rows) return {
+    viewIndexToModel: [],
+    rowGetter: function rowGetter(viewIndex) {
+      return viewIndex;
+    }
+  };
+  var highestCodedColumn = !indexer ? 0 : indexer.highestCodedColumn(columns);
+
+  if (sortFromProps && highestCodedColumn) {
+    var colIdx = Math.abs(highestCodedColumn) - 1;
+    var reorderedIndex = sortFromProps(columns[colIdx].dataKey, highestCodedColumn > 0, !!columns[colIdx].numeric);
+    return makeIndexRecord(reorderedIndex, rows);
+  }
+
+  if (sortFromProps) {
+    try {
+      var viewIndexToModel = sortFromProps(null, false, false);
+      return makeIndexRecord(viewIndexToModel, rows);
+    } catch (e) {
+      //some external sort functions may expect to only be called
+      //when the user has select a column. Catch their errors and ignore
+      console.warn('error in external sort. consider adding support for datakey=null in your external sort function');
+    }
+  }
+
+  if (indexer) {
+    var prefiltered = preFilterData(columns, rows, filterFromProps, indexer, indirectionVersion);
+
+    var _reorderedIndex = indexer.makeGroupAndSortIndirector(prefiltered, columns);
+
+    return makeIndexRecord(_reorderedIndex, rows);
+  }
+
+  if (filterFromProps) {
+    var _viewIndexToModel = rows.map(function (r, i) {
+      return [r, i];
+    }).filter(function (_ref) {
+      var r = _ref[0],
+          idx = _ref[1];
+      return filterFromProps(r);
+    }).map(function (_ref2) {
+      var r = _ref2[0],
+          j = _ref2[1];
+      return j;
+    });
+
+    return makeIndexRecord(_viewIndexToModel, rows);
+  }
+
+  return makeIndexRecord(null, rows);
+});
+
 var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(MuiVirtualizedTable, _React$PureComponent);
 
-  function MuiVirtualizedTable(_props, context) {
+  function MuiVirtualizedTable(props, context) {
     var _this;
 
-    _this = _React$PureComponent.call(this, _props, context) || this;
+    _this = _React$PureComponent.call(this, props, context) || this;
 
     _defineProperty(_assertThisInitialized(_this), "setVersion", function (v) {
       _this.setState({
@@ -177,65 +246,6 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "preFilterData", (0, _memoizeOne["default"])(function (columns, rows) {
-      return _this.state.indexer.preFilterRowMapping(columns, rows);
-    }));
-
-    _defineProperty(_assertThisInitialized(_this), "reorderIndex", (0, _memoizeOne["default"])(function (indirectorVersion, rows, columns) {
-      var indexer = _this.state.indexer;
-      if (!rows) return {
-        viewIndexToModel: [],
-        rowGetter: function rowGetter(viewIndex) {
-          return viewIndex;
-        }
-      };
-      var props = _this.props;
-
-      if (indexer && props.sort) {
-        var highestCodedColumn = indexer.highestCodedColumn(props.columns);
-
-        if (highestCodedColumn !== 0) {
-          var colIdx = Math.abs(highestCodedColumn) - 1;
-          var ret = props.sort(props.columns[colIdx].dataKey, highestCodedColumn > 0, !!props.columns[colIdx].numeric);
-          return {
-            viewIndexToModel: ret,
-            rowGetter: function rowGetter(viewIndex) {
-              if (viewIndex >= ret.length || viewIndex < 0) {
-                return {};
-              }
-
-              var modelIndex = ret[viewIndex];
-              return rows[modelIndex];
-            }
-          };
-        }
-      } else if (indexer) {
-        var prefiltered = _this.preFilterData(columns, rows);
-
-        var reorderedIndex = indexer.makeGroupAndSortIndirector(prefiltered, columns);
-        return {
-          viewIndexToModel: reorderedIndex,
-          rowGetter: function rowGetter(viewIndex) {
-            if (reorderedIndex === null) return rows[viewIndex];
-
-            if (viewIndex >= reorderedIndex.length || viewIndex < 0) {
-              return {};
-            }
-
-            var modelIndex = reorderedIndex[viewIndex];
-            return rows[modelIndex];
-          }
-        };
-      }
-
-      return {
-        viewIndexToModel: null,
-        rowGetter: function rowGetter(viewIndex) {
-          return rows[viewIndex];
-        }
-      };
-    }));
-
     _defineProperty(_assertThisInitialized(_this), "computeDataWidth", function (text) {
       return getTextWidth(text || '') + 2 * DEFAULT_CELL_PADDING;
     });
@@ -268,10 +278,6 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     }));
 
     _defineProperty(_assertThisInitialized(_this), "openPopover", function (popoverTarget, colKey) {
-      if (_this.state.indexer.delegatorCallback) {
-        return; // retro compatibility stops here ;-)
-      }
-
       var col = _this.props.columns.find(function (c) {
         return c.dataKey === colKey;
       });
@@ -280,24 +286,34 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
+      _this.dropDownVisible = false;
+
       _this.setState({
         popoverAnchorEl: popoverTarget,
         popoverColKey: colKey
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDownOnPopover", function (evt) {
+      if (evt.key === 'Enter' && !_this.dropDownVisible) {
+        _this.closePopover(evt, 'enterKeyDown');
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "closePopover", function (evt, reason) {
       var bumpsVersion = false;
 
-      if (reason === 'backdropClick') {
+      if (reason === 'backdropClick' || reason === 'enterKeyDown') {
         bumpsVersion = _this._commitFilterChange();
       }
 
-      _this.setState({
-        popoverAnchorEl: null,
-        popoverColKey: null,
-        deferredFilterChange: null,
-        indirectionVersion: _this.state.indirectionVersion + (bumpsVersion ? 1 : 0)
+      _this.setState(function (state, props) {
+        return {
+          popoverAnchorEl: null,
+          popoverColKey: null,
+          deferredFilterChange: null,
+          indirectionVersion: state.indirectionVersion + (bumpsVersion ? 1 : 0)
+        };
       });
     });
 
@@ -309,9 +325,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       var outerParams = _this.state.indexer.getColFilterOuterParams(colKey);
 
       var userParams = !_this.props.defersFilterChanges || !_this.state.deferredFilterChange ? _this.state.indexer.getColFilterUserParams(colKey) : _this.state.deferredFilterChange.newVal;
-
-      var prefiltered = _this.preFilterData(_this.props.columns, _this.props.rows);
-
+      var prefiltered = preFilterData(_this.props.columns, _this.props.rows, _this.props.filter, _this.state.indexer, _this.state.indirectionVersion);
       var options = [];
 
       if (outerParams) {
@@ -336,6 +350,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
 
+      options.sort();
+
       var col = _this.props.columns.find(function (c) {
         return c.dataKey === colKey;
       });
@@ -344,9 +360,13 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         options: options,
         value: userParams,
         id: 'fielt' + colKey,
-        label: (_col$label = col === null || col === void 0 ? void 0 : col.label) !== null && _col$label !== void 0 ? _col$label : "\u2208",
+        label: (_col$label = col === null || col === void 0 ? void 0 : col.label) !== null && _col$label !== void 0 ? _col$label : "\u2208" // "contained in" math symbol
+        ,
         setValue: function setValue(newVal) {
           _this.onFilterParamsChange(newVal, colKey);
+        },
+        onDropDownVisibility: function onDropDownVisibility(visible) {
+          return _this.dropDownVisible = visible;
         }
       });
     });
@@ -396,28 +416,28 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "filterClickHandler", function (evt, retargeted, columnIndex) {
+    _defineProperty(_assertThisInitialized(_this), "filterClickHandler", function (evt, target, columnIndex) {
+      var _target$parentNode;
+
+      // ColumnHeader to (header) TableCell
+      var retargeted = (_target$parentNode = target.parentNode) !== null && _target$parentNode !== void 0 ? _target$parentNode : target;
       var colKey = _this.props.columns[columnIndex].dataKey;
 
       _this.openPopover(retargeted, colKey);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "sortableHeader", function (_ref) {
+    _defineProperty(_assertThisInitialized(_this), "sortableHeader", function (_ref3) {
       var _prefiltered$colsStat2;
 
-      var label = _ref.label,
-          columnIndex = _ref.columnIndex;
-      var _this$props = _this.props,
-          columns = _this$props.columns,
-          classes = _this$props.classes;
+      var label = _ref3.label,
+          columnIndex = _ref3.columnIndex;
+      var columns = _this.props.columns;
       var indexer = _this.state.indexer;
       var colKey = columns[columnIndex].dataKey;
       var signedRank = indexer.columnSortingSignedRank(colKey);
       var userParams = indexer.getColFilterUserParams(colKey);
       var numeric = columns[columnIndex].numeric;
-
-      var prefiltered = _this.preFilterData(columns, _this.props.rows);
-
+      var prefiltered = preFilterData(columns, _this.props.rows, _this.props.filter, indexer, indexer.filterVersion);
       var colStat = prefiltered === null || prefiltered === void 0 ? void 0 : (_prefiltered$colsStat2 = prefiltered.colsStats) === null || _prefiltered$colsStat2 === void 0 ? void 0 : _prefiltered$colsStat2[colKey];
       var filterLevel = 0;
 
@@ -426,9 +446,13 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         var userSelectedCount = userParams === null || userParams === void 0 ? void 0 : userParams.length;
         filterLevel += userSelectedCount ? 1 : 0;
         filterLevel += userSelectedCount >= countSeen ? 2 : 0;
-      }
+      } // disable filtering when either:
+      //  - the column is numeric, we only handle tags for string values
+      //  - a cellRenderer is defined, as we have no simple way to match for chosen value(s)
+      //  - using an external sort, because it would hardly know about the indexer filtering
 
-      var onFilterClick = numeric || _this.props.sort ? undefined : function (ev, retargeted) {
+
+      var onFilterClick = numeric || _this.props.sort || columns[columnIndex].cellRenderer ? undefined : function (ev, retargeted) {
         _this.filterClickHandler(ev, retargeted, columnIndex);
       };
       return /*#__PURE__*/_react["default"].createElement(_ColumnHeader["default"], {
@@ -436,7 +460,6 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         ref: function ref(e) {
           return _this._registerHeader(label, e);
         },
-        className: (0, _clsx3["default"])(classes.tableCell, classes.header),
         sortSignedRank: signedRank,
         filterLevel: filterLevel,
         numeric: numeric,
@@ -447,8 +470,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "simpleHeaderRenderer", function (_ref2) {
-      var label = _ref2.label;
+    _defineProperty(_assertThisInitialized(_this), "simpleHeaderRenderer", function (_ref4) {
+      var label = _ref4.label;
       return /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(element) {
           _this._registerHeader(label, element);
@@ -456,14 +479,14 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }, label);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getRowClassName", function (_ref3) {
+    _defineProperty(_assertThisInitialized(_this), "getRowClassName", function (_ref5) {
       var _rowGetter, _rowGetter2, _clsx;
 
-      var index = _ref3.index,
-          rowGetter = _ref3.rowGetter;
-      var _this$props2 = _this.props,
-          classes = _this$props2.classes,
-          onRowClick = _this$props2.onRowClick;
+      var index = _ref5.index,
+          rowGetter = _ref5.rowGetter;
+      var _this$props = _this.props,
+          classes = _this$props.classes,
+          onRowClick = _this$props.onRowClick;
       return (0, _clsx3["default"])(classes.tableRow, classes.flexContainer, index % 2 === 0 && classes.rowBackgroundDark, index % 2 !== 0 && classes.rowBackgroundLight, ((_rowGetter = rowGetter(index)) === null || _rowGetter === void 0 ? void 0 : _rowGetter.notClickable) === true && classes.noClick, (_clsx = {}, _clsx[classes.tableRowHover] = index !== -1 && onRowClick != null && !(((_rowGetter2 = rowGetter(index)) === null || _rowGetter2 === void 0 ? void 0 : _rowGetter2.notClickable) === true), _clsx));
     });
 
@@ -475,18 +498,18 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "cellRenderer", function (_ref4) {
+    _defineProperty(_assertThisInitialized(_this), "cellRenderer", function (_ref6) {
       var _rows$rowIndex, _rows$rowIndex2, _clsx2;
 
-      var cellData = _ref4.cellData,
-          columnIndex = _ref4.columnIndex,
-          rowIndex = _ref4.rowIndex;
-      var _this$props3 = _this.props,
-          columns = _this$props3.columns,
-          classes = _this$props3.classes,
-          rowHeight = _this$props3.rowHeight,
-          onCellClick = _this$props3.onCellClick,
-          rows = _this$props3.rows;
+      var cellData = _ref6.cellData,
+          columnIndex = _ref6.columnIndex,
+          rowIndex = _ref6.rowIndex;
+      var _this$props2 = _this.props,
+          columns = _this$props2.columns,
+          classes = _this$props2.classes,
+          rowHeight = _this$props2.rowHeight,
+          onCellClick = _this$props2.onCellClick,
+          rows = _this$props2.rows;
 
       var displayedValue = _this.getDisplayValue(columns[columnIndex], cellData);
 
@@ -515,9 +538,9 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "makeSizedTable", function (height, width, sizes, reorderedIndex, _rowGetter3) {
       var _reorderedIndex$lengt;
 
-      var _this$props4 = _this.props,
-          sort = _this$props4.sort,
-          otherProps = _objectWithoutPropertiesLoose(_this$props4, _excluded);
+      var _this$props3 = _this.props,
+          sort = _this$props3.sort,
+          otherProps = _objectWithoutPropertiesLoose(_this$props3, _excluded);
 
       return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Table, _extends({}, otherProps, {
         height: height,
@@ -532,20 +555,20 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         /* The {...otherProps} just above would hold the slot onRowClick */
         _this.onClickableRowClick,
         rowCount: (_reorderedIndex$lengt = reorderedIndex === null || reorderedIndex === void 0 ? void 0 : reorderedIndex.length) !== null && _reorderedIndex$lengt !== void 0 ? _reorderedIndex$lengt : otherProps.rows.length,
-        rowClassName: function rowClassName(_ref5) {
-          var index = _ref5.index;
+        rowClassName: function rowClassName(_ref7) {
+          var index = _ref7.index;
           return _this.getRowClassName({
             index: index,
             rowGetter: _rowGetter3
           });
         },
-        rowGetter: function rowGetter(_ref6) {
-          var index = _ref6.index;
+        rowGetter: function rowGetter(_ref8) {
+          var index = _ref8.index;
           return _rowGetter3(index);
         }
-      }), otherProps.columns.map(function (_ref7, index) {
-        var dataKey = _ref7.dataKey,
-            other = _objectWithoutPropertiesLoose(_ref7, _excluded2);
+      }), otherProps.columns.map(function (_ref9, index) {
+        var dataKey = _ref9.dataKey,
+            other = _objectWithoutPropertiesLoose(_ref9, _excluded2);
 
         return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Column, _extends({
           key: dataKey,
@@ -575,8 +598,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "getCSVData", function () {
       var _reorderedIndex$viewI, _reorderedIndex$viewI2;
 
-      var reorderedIndex = _this.reorderIndex(_this.state.indirectionVersion, _this.props.rows, _this.props.columns);
-
+      var reorderedIndex = reorderIndex(_this.state.indexer, _this.state.indirectionVersion, _this.props.rows, _this.props.columns, _this.props.filter, _this.props.sort);
       var rowsCount = (_reorderedIndex$viewI = (_reorderedIndex$viewI2 = reorderedIndex.viewIndexToModel) === null || _reorderedIndex$viewI2 === void 0 ? void 0 : _reorderedIndex$viewI2.length) !== null && _reorderedIndex$viewI !== void 0 ? _reorderedIndex$viewI : _this.props.rows.length;
       var csvData = [];
 
@@ -631,9 +653,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     _this.observer = new IntersectionObserver(_this._computeHeaderSize, _options);
     _this.state = {
       headerHeight: _this.props.headerHeight,
-      indexer: initIndexer(_props, null, _this.setVersion),
+      indexer: initIndexer(props, null, _this.setVersion),
       indirectionVersion: 0,
-      reorderIndex: null,
       popoverAnchorEl: null,
       popoverColKey: null,
       deferredFilterChange: null
@@ -644,11 +665,22 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
   var _proto = MuiVirtualizedTable.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(oldProps) {
-    if (oldProps.data !== this.props.data) {
-      this.setState({
-        indexer: initIndexer(this.props, oldProps)
+    var _this2 = this;
+
+    if (oldProps.indexer !== this.props.indexer || oldProps.sortable !== this.props.sortable) {
+      this.setState(function (state) {
+        var _state$indirectionVer;
+
+        return {
+          indexer: initIndexer(_this2.props, oldProps, _this2.setVersion),
+          indirectionVersion: ((_state$indirectionVer = state === null || state === void 0 ? void 0 : state.indirectionVersion) !== null && _state$indirectionVer !== void 0 ? _state$indirectionVer : 0) + 1
+        };
       });
     }
+
+    if (oldProps.headerHeight !== this.props.headerHeight) {
+      this._computeHeaderSize();
+    }
   };
 
   _proto.componentDidMount = function componentDidMount() {
@@ -730,38 +762,38 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.makeHeaderRenderer = function makeHeaderRenderer(dataKey, columnIndex) {
-    var _this2 = this;
+    var _this3 = this;
 
-    var _this$props5 = this.props,
-        columns = _this$props5.columns,
-        classes = _this$props5.classes;
+    var _this$props4 = this.props,
+        columns = _this$props4.columns,
+        classes = _this$props4.classes;
     return function (headerProps) {
       return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "div",
         className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, classes.noClick, classes.header),
         variant: "head",
         style: {
-          height: _this2.state.headerHeight
+          height: _this3.state.headerHeight
         },
         align: columns[columnIndex].numeric || false ? 'right' : 'left',
         ref: function ref(e) {
-          return _this2._registerObserver(e);
+          return _this3._registerObserver(e);
         }
-      }, _this2.props.sortable ? _this2.sortableHeader(_extends({}, headerProps, {
+      }, _this3.props.sortable && _this3.state.indexer ? _this3.sortableHeader(_extends({}, headerProps, {
         columnIndex: columnIndex,
         key: {
           dataKey: dataKey
         }
-      })) : _this2.simpleHeaderRenderer(_extends({}, headerProps)));
+      })) : _this3.simpleHeaderRenderer(_extends({}, headerProps)));
     };
   };
 
   _proto.render = function render() {
-    var _this3 = this;
+    var _this4 = this;
 
-    var _this$reorderIndex = this.reorderIndex(this.state.indirectionVersion, this.props.rows, this.props.columns),
-        viewIndexToModel = _this$reorderIndex.viewIndexToModel,
-        rowGetter = _this$reorderIndex.rowGetter;
+    var _reorderIndex = reorderIndex(this.state.indexer, this.state.indirectionVersion, this.props.rows, this.props.columns, this.props.filter, this.props.sort),
+        viewIndexToModel = _reorderIndex.viewIndexToModel,
+        rowGetter = _reorderIndex.rowGetter;
 
     var sizes = this.sizes(this.props.columns, this.props.rows, rowGetter);
     var csvHeaders = this.csvHeaders(this.props.columns, this.props.exportCSVDataKeys);
@@ -790,22 +822,28 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       style: {
         flexGrow: 1
       }
-    }, /*#__PURE__*/_react["default"].createElement(_reactVirtualized.AutoSizer, null, function (_ref8) {
-      var height = _ref8.height,
-          width = _ref8.width;
-      return _this3.makeSizedTable(height, width, sizes, viewIndexToModel, rowGetter);
+    }, /*#__PURE__*/_react["default"].createElement(_reactVirtualized.AutoSizer, null, function (_ref10) {
+      var height = _ref10.height,
+          width = _ref10.width;
+      return _this4.makeSizedTable(height, width, sizes, viewIndexToModel, rowGetter);
     })), this.state.popoverAnchorEl && /*#__PURE__*/_react["default"].createElement(_material.Popover, {
       anchorEl: this.state.popoverAnchorEl,
       anchorOrigin: {
-        vertical: 'center',
-        horizontal: 'center'
+        vertical: 'bottom',
+        horizontal: 'left'
       },
       transformOrigin: {
-        vertical: 'center',
-        horizontal: 'center'
+        vertical: 'top',
+        horizontal: 'left'
       },
+      onKeyDownCapture: this.handleKeyDownOnPopover,
       onClose: this.closePopover,
-      open: !!this.state.popoverAnchorEl
+      open: !!this.state.popoverAnchorEl,
+      PaperProps: {
+        style: {
+          minWidth: '20ex'
+        }
+      }
     }, this.makeColumnFilterEditor()));
   };
 

package/lib/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useSnackMessage = exports.useIntlRef = exports.useImportExportParams = exports.treeview_finder_fr = exports.treeview_finder_en = exports.top_bar_fr = exports.top_bar_en = exports.table_fr = exports.table_en = exports.setSignInCallbackError = exports.setShowAuthenticationRouterLogin = exports.setLoggedUser = exports.report_viewer_fr = exports.report_viewer_en = exports.logout = exports.login_fr = exports.login_en = exports.initializeAuthenticationProd = exports.initializeAuthenticationDev = exports.getPreLoginPath = exports.getIdTokenExpiresIn = exports.getFileIcon = exports.getEquipmentsInfosForSearchBar = exports.equipment_search_fr = exports.equipment_search_en = exports.equipmentStyles = exports.element_search_fr = exports.element_search_en = exports.elementType = exports.dispatchUser = exports.card_error_boundary_fr = exports.card_error_boundary_en = exports.USER_VALIDATION_ERROR = exports.USER = exports.UNAUTHORIZED_USER_INFO = exports.TreeViewFinder = exports.TopBar = exports.TagRenderer = exports.SnackbarProvider = exports.SIGNIN_CALLBACK_ERROR = exports.SHOW_AUTH_INFO_LOGIN = exports.ReportViewerDialog = exports.ReportViewer = exports.RESET_AUTHENTICATION_ROUTER_ERROR = exports.OverflowableText = exports.MuiVirtualizedTable = exports.LOGOUT_ERROR = exports.LIGHT_THEME = exports.LANG_SYSTEM = exports.LANG_FRENCH = exports.LANG_ENGLISH = exports.KeyedColumnsRowIndexer = exports.EquipmentItem = exports.ElementSearchDialog = exports.EQUIPMENT_TYPE = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_HEIGHT = exports.DEFAULT_CELL_PADDING = exports.DARK_THEME = exports.CardErrorBoundary = exports.CHANGE_WAYS = exports.AuthenticationRouter = void 0;
+exports.useSnackMessage = exports.useIntlRef = exports.useImportExportParams = exports.treeview_finder_fr = exports.treeview_finder_en = exports.top_bar_fr = exports.top_bar_en = exports.table_fr = exports.table_en = exports.setSignInCallbackError = exports.setLoggedUser = exports.report_viewer_fr = exports.report_viewer_en = exports.logout = exports.login_fr = exports.login_en = exports.initializeAuthenticationProd = exports.initializeAuthenticationDev = exports.getPreLoginPath = exports.getFileIcon = exports.getEquipmentsInfosForSearchBar = exports.equipment_search_fr = exports.equipment_search_en = exports.equipmentStyles = exports.element_search_fr = exports.element_search_en = exports.elementType = exports.dispatchUser = exports.card_error_boundary_fr = exports.card_error_boundary_en = exports.USER_VALIDATION_ERROR = exports.USER = exports.UNAUTHORIZED_USER_INFO = exports.TreeViewFinder = exports.TopBar = exports.TagRenderer = exports.SnackbarProvider = exports.SIGNIN_CALLBACK_ERROR = exports.SHOW_AUTH_INFO_LOGIN = exports.ReportViewerDialog = exports.ReportViewer = exports.RESET_AUTHENTICATION_ROUTER_ERROR = exports.OverflowableText = exports.MuiVirtualizedTable = exports.LOGOUT_ERROR = exports.LIGHT_THEME = exports.LANG_SYSTEM = exports.LANG_FRENCH = exports.LANG_ENGLISH = exports.KeyedColumnsRowIndexer = exports.EquipmentItem = exports.ElementSearchDialog = exports.EQUIPMENT_TYPE = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_HEIGHT = exports.DEFAULT_CELL_PADDING = exports.DARK_THEME = exports.CardErrorBoundary = exports.CHANGE_WAYS = exports.AuthenticationRouter = void 0;
 
 var _TreeViewFinder = _interopRequireDefault(require("./components/TreeViewFinder"));
 
@@ -55,7 +55,6 @@ exports.initializeAuthenticationProd = _AuthService.initializeAuthenticationProd
 exports.logout = _AuthService.logout;
 exports.dispatchUser = _AuthService.dispatchUser;
 exports.getPreLoginPath = _AuthService.getPreLoginPath;
-exports.getIdTokenExpiresIn = _AuthService.getIdTokenExpiresIn;
 
 var _ElementType = require("./utils/ElementType");
 
@@ -86,7 +85,6 @@ exports.UNAUTHORIZED_USER_INFO = _actions.UNAUTHORIZED_USER_INFO;
 exports.LOGOUT_ERROR = _actions.LOGOUT_ERROR;
 exports.USER_VALIDATION_ERROR = _actions.USER_VALIDATION_ERROR;
 exports.RESET_AUTHENTICATION_ROUTER_ERROR = _actions.RESET_AUTHENTICATION_ROUTER_ERROR;
-exports.setShowAuthenticationRouterLogin = _actions.setShowAuthenticationRouterLogin;
 exports.SHOW_AUTH_INFO_LOGIN = _actions.SHOW_AUTH_INFO_LOGIN;
 
 var _reportViewerEn = _interopRequireDefault(require("./components/translations/report-viewer-en"));

package/lib/utils/AuthService.js

@@ -2,7 +2,6 @@
 
 exports.__esModule = true;
 exports.dispatchUser = dispatchUser;
-exports.getIdTokenExpiresIn = getIdTokenExpiresIn;
 exports.getPreLoginPath = getPreLoginPath;
 exports.handleSigninCallback = handleSigninCallback;
 exports.handleSilentRenewCallback = handleSilentRenewCallback;
@@ -32,11 +31,29 @@ window.OIDCLog = _oidcClient.Log;
 var hackauthoritykey = 'oidc.hack.authority';
 var pathKey = 'powsybl-gridsuite-current-path';
 
+function handleSigninSilent(dispatch, userManager) {
+  userManager.getUser().then(function (user) {
+    if (user == null || getIdTokenExpiresIn(user) < 0) {
+      return userManager.signinSilent()["catch"](function (error) {
+        dispatch((0, _actions.setShowAuthenticationRouterLogin)(true));
+        var oidcHackReloaded = 'gridsuite-oidc-hack-reloaded';
+
+        if (!sessionStorage.getItem(oidcHackReloaded) && error.message === 'authority mismatch on settings vs. signin state') {
+          sessionStorage.setItem(oidcHackReloaded, true);
+          console.log('Hack oidc, reload page to make login work');
+          window.location.reload();
+        }
+      });
+    }
+  });
+}
+
 function initializeAuthenticationDev(dispatch, isSilentRenew, validateUser) {
   var userManager = new _UserManagerMock.UserManagerMock({});
 
   if (!isSilentRenew) {
     handleUser(dispatch, userManager, validateUser);
+    handleSigninSilent(dispatch, userManager);
   }
 
   return Promise.resolve(userManager);
@@ -119,9 +136,14 @@ function initializeAuthenticationProd(dispatch, isSilentRenew, idpSettings, vali
 
     if (!isSilentRenew) {
       handleUser(dispatch, userManager, validateUser);
+      handleSigninSilent(dispatch, userManager);
     }
 
     return userManager;
+  })["catch"](function (error) {
+    console.debug('error when importing the idp settings', error);
+    dispatch((0, _actions.setShowAuthenticationRouterLogin)(true));
+    throw error;
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.30.0",
+    "version": "0.31.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": "<=6",