@gridsuite/commons-ui 0.46.0 → 0.47.0

package/es/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -1,780 +0,0 @@
-var _excluded = ["sort"],
-  _excluded2 = ["dataKey"];
-var _defaultStyles;
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-/**
- * Copyright (c) 2022, RTE (http://www.rte-france.com)
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-
-/**
- * This class has been taken from 'Virtualized Table' example at https://material-ui.com/components/tables/
- */
-import React, { createRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import memoize from 'memoize-one';
-import { Autocomplete, Chip, IconButton, Popover, TableCell, TextField } from '@mui/material';
-import { styled } from '@mui/system';
-import GetAppIcon from '@mui/icons-material/GetApp';
-import { AutoSizer, Column, Table } from 'react-virtualized';
-import CsvDownloader from 'react-csv-downloader';
-import OverflowableText from '../OverflowableText/overflowable-text';
-import { toNestedGlobalSelectors, makeComposeClasses } from '../../utils/styles';
-import { CHANGE_WAYS, collectibleHelper, getHelper, KeyedColumnsRowIndexer } from './KeyedColumnsRowIndexer';
-import ColumnHeader from './ColumnHeader';
-function getTextWidth(text) {
-  // re-use canvas object for better performance
-  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
-  var context = canvas.getContext('2d');
-  // TODO find a better way to find Material UI style
-  context.font = '14px "Roboto", "Helvetica", "Arial", sans-serif';
-  var metrics = context.measureText(text);
-  return metrics.width;
-}
-export var DEFAULT_CELL_PADDING = 16;
-export var DEFAULT_HEADER_HEIGHT = 48;
-export var DEFAULT_ROW_HEIGHT = 48;
-
-// As a bunch of individual variables to try to make it easier
-// to track that they are all used. Not sure, maybe group them in an object ?
-var cssFlexContainer = 'flexContainer';
-var cssTable = 'table';
-var cssTableRow = 'tableRow';
-var cssTableRowHover = 'tableRowHover';
-var cssTableCell = 'tableCell';
-var cssTableCellColor = 'tableCellColor';
-var cssNoClick = 'noClick';
-var cssHeader = 'header';
-var cssRowBackgroundDark = 'rowBackgroundDark';
-var cssRowBackgroundLight = 'rowBackgroundLight';
-
-// converted to nested rules
-var defaultStyles = (_defaultStyles = {}, _defaultStyles[cssFlexContainer] = {
-  display: 'flex',
-  alignItems: 'center',
-  boxSizing: 'border-box'
-}, _defaultStyles[cssTable] = {
-  // temporary right-to-left patch, waiting for
-  // https://github.com/bvaughn/react-virtualized/issues/454
-  '& .ReactVirtualized__Table__headerRow': {
-    flip: false
-  }
-}, _defaultStyles[cssTableRow] = {
-  cursor: 'pointer'
-}, _defaultStyles[cssTableRowHover] = {}, _defaultStyles[cssTableCell] = {
-  flex: 1,
-  padding: DEFAULT_CELL_PADDING + 'px'
-}, _defaultStyles[cssTableCellColor] = {}, _defaultStyles[cssNoClick] = {
-  cursor: 'initial'
-}, _defaultStyles[cssHeader] = {
-  fontWeight: 'bold'
-}, _defaultStyles[cssRowBackgroundDark] = {}, _defaultStyles[cssRowBackgroundLight] = {}, _defaultStyles);
-
-// TODO find a better system, maybe MUI will fix/improve this ?
-// Different from all others because of the poor nested sx support for portals
-// requiring classname sharing/forwarding between the content and the tooltip
-var defaultTooltipSx = {
-  maxWidth: '1260px',
-  fontSize: '0.9rem'
-};
-
-//TODO do we need to export this to clients (index.js) ?
-export var generateMuiVirtualizedTableClass = function generateMuiVirtualizedTableClass(className) {
-  return "MuiVirtualizedTable-" + className;
-};
-var composeClasses = makeComposeClasses(generateMuiVirtualizedTableClass);
-var AmongChooser = function AmongChooser(props) {
-  var options = props.options,
-    value = props.value,
-    setValue = props.setValue,
-    id = props.id,
-    onDropDownVisibility = props.onDropDownVisibility;
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Autocomplete, {
-    id: id,
-    value: value !== null && value !== void 0 ? value : [],
-    multiple: true,
-    onChange: function onChange(evt, newVal) {
-      setValue(newVal);
-    },
-    onClose: function onClose() {
-      return onDropDownVisibility(false);
-    },
-    onOpen: function onOpen() {
-      return onDropDownVisibility(true);
-    },
-    options: options,
-    renderInput: function renderInput(props) {
-      return /*#__PURE__*/React.createElement(TextField, _extends({
-        autoFocus: true
-      }, props));
-    },
-    renderTags: function renderTags(val, getTagsProps) {
-      return val.map(function (code, index) {
-        return /*#__PURE__*/React.createElement(Chip, _extends({
-          id: 'chip_' + code,
-          size: 'small',
-          label: code
-        }, getTagsProps({
-          index: index
-        })));
-      });
-    }
-  }));
-};
-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;
-  }
-  if (props.indexer) {
-    return props.indexer;
-  }
-  return new KeyedColumnsRowIndexer(true, true, null, versionSetter);
-};
-var preFilterData = memoize(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 = memoize(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) {
-    var _this;
-    _this = _React$PureComponent.call(this, props, context) || this;
-    _defineProperty(_assertThisInitialized(_this), "setVersion", function (v) {
-      _this.setState({
-        indirectionVersion: v
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "computeDataWidth", function (text) {
-      return getTextWidth(text || '') + 2 * DEFAULT_CELL_PADDING;
-    });
-    _defineProperty(_assertThisInitialized(_this), "sizes", memoize(function (columns, rows, rowGetter) {
-      var sizes = {};
-      columns.forEach(function (col) {
-        if (col.width) {
-          sizes[col.dataKey] = col.width;
-        } else {
-          /* calculate the header (and min size if exists)
-           * NB : ignores the possible icons
-           */
-          var size = Math.max(col.minWidth || 0, _this.computeDataWidth(col.label));
-          /* calculate for each row the width, and keep the max  */
-          for (var i = 0; i < rows.length; ++i) {
-            var gotRow = rowGetter(i);
-            var text = _this.getDisplayValue(col, gotRow[col.dataKey]);
-            size = Math.max(size, _this.computeDataWidth(text));
-          }
-          if (col.maxWidth) {
-            size = Math.min(col.maxWidth, size);
-          }
-          sizes[col.dataKey] = Math.ceil(size);
-        }
-      });
-      return sizes;
-    }));
-    _defineProperty(_assertThisInitialized(_this), "openPopover", function (popoverTarget, colKey) {
-      var col = _this.props.columns.find(function (c) {
-        return c.dataKey === colKey;
-      });
-      if (getHelper(col) !== collectibleHelper) {
-        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' || reason === 'enterKeyDown') {
-        bumpsVersion = _this._commitFilterChange();
-      }
-      _this.setState(function (state, props) {
-        return {
-          popoverAnchorEl: null,
-          popoverColKey: null,
-          deferredFilterChange: null,
-          indirectionVersion: state.indirectionVersion + (bumpsVersion ? 1 : 0)
-        };
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "makeColumnFilterEditor", function () {
-      var _prefiltered$colsStat, _col$label;
-      var colKey = _this.state.popoverColKey;
-      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 = preFilterData(_this.props.columns, _this.props.rows, _this.props.filter, _this.state.indexer, _this.state.indirectionVersion);
-      var options = [];
-      if (outerParams) {
-        options.push.apply(options, outerParams);
-      }
-      var colStat = prefiltered === null || prefiltered === void 0 ? void 0 : (_prefiltered$colsStat = prefiltered.colsStats) === null || _prefiltered$colsStat === void 0 ? void 0 : _prefiltered$colsStat[colKey];
-      if (colStat === null || colStat === void 0 ? void 0 : colStat.seen) {
-        var _loop = function _loop() {
-          var key = _step.value;
-          if (options.findIndex(function (o) {
-            return o === key;
-          }) < 0) {
-            options.push(key);
-          }
-        };
-        for (var _iterator = _createForOfIteratorHelperLoose(Object.getOwnPropertyNames(colStat.seen)), _step; !(_step = _iterator()).done;) {
-          _loop();
-        }
-      }
-      options.sort();
-      var col = _this.props.columns.find(function (c) {
-        return c.dataKey === colKey;
-      });
-      return /*#__PURE__*/React.createElement(AmongChooser, {
-        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" // "contained in" math symbol
-        ,
-        setValue: function setValue(newVal) {
-          _this.onFilterParamsChange(newVal, colKey);
-        },
-        onDropDownVisibility: function onDropDownVisibility(visible) {
-          return _this.dropDownVisible = visible;
-        }
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "_commitFilterChange", function () {
-      if (_this.state.deferredFilterChange) {
-        var _newVal;
-        var colKey = _this.state.deferredFilterChange.colKey;
-        var newVal = _this.state.deferredFilterChange.newVal;
-        if (((_newVal = newVal) === null || _newVal === void 0 ? void 0 : _newVal.length) === 0) {
-          newVal = null;
-        }
-        if (_this.state.indexer.setColFilterUserParams(colKey, newVal)) {
-          return true;
-        }
-      }
-      return false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "sortClickHandler", function (evt, name, columnIndex) {
-      var colKey = _this.props.columns[columnIndex].dataKey;
-      if (evt.altKey) {
-        _this.openPopover(evt.target, colKey);
-        return;
-      }
-      var way = CHANGE_WAYS.SIMPLE;
-      if (evt.ctrlKey && evt.shiftKey) {
-        way = CHANGE_WAYS.AMEND;
-      } else if (evt.ctrlKey) {
-        way = CHANGE_WAYS.REMOVE;
-      } else if (evt.shiftKey) {
-        way = CHANGE_WAYS.TAIL;
-      }
-      if (_this.state.indexer.updateSortingFromUser(colKey, way)) {
-        _this.setState({
-          indirectionVersion: _this.state.indirectionVersion + 1
-        });
-      }
-    });
-    _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 (_ref3) {
-      var _prefiltered$colsStat2;
-      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 = 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;
-      if (userParams === null || userParams === void 0 ? void 0 : userParams.length) {
-        filterLevel += 1;
-        if (!(colStat === null || colStat === void 0 ? void 0 : colStat.seen)) {
-          filterLevel += 2;
-        } else if (userParams.filter(function (v) {
-          return !colStat.seen[v];
-        }).length) {
-          filterLevel += 2;
-        }
-      }
-
-      // 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 || columns[columnIndex].cellRenderer ? undefined : function (ev, retargeted) {
-        _this.filterClickHandler(ev, retargeted, columnIndex);
-      };
-      return /*#__PURE__*/React.createElement(ColumnHeader, {
-        label: label,
-        ref: function ref(e) {
-          return _this._registerHeader(label, e);
-        },
-        sortSignedRank: signedRank,
-        filterLevel: filterLevel,
-        numeric: numeric,
-        onSortClick: function onSortClick(ev, name) {
-          _this.sortClickHandler(ev, name, columnIndex);
-        },
-        onFilterClick: onFilterClick
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "simpleHeaderRenderer", function (_ref4) {
-      var label = _ref4.label;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: function ref(element) {
-          _this._registerHeader(label, element);
-        }
-      }, label);
-    });
-    _defineProperty(_assertThisInitialized(_this), "getRowClassName", function (_ref5) {
-      var _rowGetter, _clsx;
-      var index = _ref5.index,
-        rowGetter = _ref5.rowGetter;
-      var _this$props = _this.props,
-        classes = _this$props.classes,
-        onRowClick = _this$props.onRowClick;
-      return clsx(composeClasses(classes, cssTableRow), composeClasses(classes, cssFlexContainer), index % 2 === 0 && composeClasses(classes, cssRowBackgroundDark), index % 2 !== 0 && composeClasses(classes, cssRowBackgroundLight), ((_rowGetter = rowGetter(index)) === null || _rowGetter === void 0 ? void 0 : _rowGetter.notClickable) === true && composeClasses(classes, cssNoClick), (_clsx = {}, _clsx[composeClasses(classes, cssTableRowHover)] = index !== -1 && onRowClick != null, _clsx));
-    });
-    _defineProperty(_assertThisInitialized(_this), "onClickableRowClick", function (event) {
-      var _event$rowData;
-      if (!(((_event$rowData = event.rowData) === null || _event$rowData === void 0 ? void 0 : _event$rowData.notClickable) === true)) {
-        _this.props.onRowClick(event);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "cellRenderer", function (_ref6) {
-      var _rows$rowIndex, _rows$rowIndex2, _clsx2;
-      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,
-        tooltipSx = _this$props2.tooltipSx;
-      var displayedValue = _this.getDisplayValue(columns[columnIndex], cellData);
-      return /*#__PURE__*/React.createElement(TableCell, {
-        component: "div",
-        className: clsx(composeClasses(classes, cssTableCell), composeClasses(classes, cssFlexContainer), (_clsx2 = {}, _clsx2[composeClasses(classes, cssNoClick)] = displayedValue === undefined || ((_rows$rowIndex = rows[rowIndex]) === null || _rows$rowIndex === void 0 ? void 0 : _rows$rowIndex.notClickable) === true || onCellClick == null || columns[columnIndex].clickable === undefined || !columns[columnIndex].clickable, _clsx2[composeClasses(classes, cssTableCellColor)] = displayedValue === undefined || onCellClick !== null && !((_rows$rowIndex2 = rows[rowIndex]) === null || _rows$rowIndex2 === void 0 ? void 0 : _rows$rowIndex2.notClickable) === true && columns[columnIndex].clickable !== undefined && columns[columnIndex].clickable, _clsx2)),
-        variant: "body",
-        style: {
-          height: rowHeight,
-          width: '100%'
-        },
-        align: columnIndex != null && columns[columnIndex].numeric || false ? 'right' : 'left',
-        onClick: function onClick() {
-          var _rows$rowIndex3;
-          if (onCellClick && columns[columnIndex].clickable !== undefined && !((_rows$rowIndex3 = rows[rowIndex]) === null || _rows$rowIndex3 === void 0 ? void 0 : _rows$rowIndex3.notClickable) === true && columns[columnIndex].clickable) {
-            onCellClick(rows[rowIndex], columns[columnIndex]);
-          }
-        }
-      }, /*#__PURE__*/React.createElement(OverflowableText, {
-        text: displayedValue,
-        tooltipStyle: classes.cellTooltip,
-        tooltipSx: _extends({}, defaultTooltipSx, tooltipSx)
-      }));
-    });
-    _defineProperty(_assertThisInitialized(_this), "makeSizedTable", function (height, width, sizes, reorderedIndex, _rowGetter2) {
-      var _reorderedIndex$lengt;
-      var _this$props3 = _this.props,
-        sort = _this$props3.sort,
-        otherProps = _objectWithoutPropertiesLoose(_this$props3, _excluded);
-      return /*#__PURE__*/React.createElement(Table, _extends({}, otherProps, {
-        height: height,
-        width: width,
-        rowHeight: otherProps.rowHeight,
-        gridStyle: {
-          direction: 'inherit'
-        },
-        headerHeight: _this.state.headerHeight,
-        className: composeClasses(otherProps.classes, cssTable),
-        onRowClick: _this.props.onRowClick && /* 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(_ref7) {
-          var index = _ref7.index;
-          return _this.getRowClassName({
-            index: index,
-            rowGetter: _rowGetter2
-          });
-        },
-        rowGetter: function rowGetter(_ref8) {
-          var index = _ref8.index;
-          return _rowGetter2(index);
-        }
-      }), otherProps.columns.map(function (_ref9, index) {
-        var dataKey = _ref9.dataKey,
-          other = _objectWithoutPropertiesLoose(_ref9, _excluded2);
-        return /*#__PURE__*/React.createElement(Column, _extends({
-          key: dataKey,
-          headerRenderer: _this.makeHeaderRenderer(dataKey, index),
-          className: composeClasses(otherProps.classes, cssFlexContainer),
-          cellRenderer: _this.cellRenderer,
-          dataKey: dataKey,
-          flexGrow: 1,
-          width: sizes[dataKey]
-        }, other));
-      }));
-    });
-    _defineProperty(_assertThisInitialized(_this), "getCSVFilename", function () {
-      var _this$props$name;
-      if (((_this$props$name = _this.props.name) === null || _this$props$name === void 0 ? void 0 : _this$props$name.length) > 0) {
-        return _this.props.name.replace(/\s/g, '_');
-      } else {
-        var filename = Object.entries(_this.props.columns).map(function (p) {
-          return p[1].label;
-        }).join('_');
-        return filename;
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "getCSVData", function () {
-      var _reorderedIndex$viewI, _reorderedIndex$viewI2;
-      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 = [];
-      var _loop2 = function _loop2() {
-        var myobj = {};
-        var sortedRow = reorderedIndex.rowGetter(index);
-        var exportedKeys = _this.props.exportCSVDataKeys;
-        _this.props.columns.forEach(function (col) {
-          if (exportedKeys === null || exportedKeys === void 0 ? void 0 : exportedKeys.find(function (el) {
-            return el === col.dataKey;
-          })) {
-            myobj[col.dataKey] = sortedRow[col.dataKey];
-          }
-        });
-        csvData.push(myobj);
-      };
-      for (var index = 0; index < rowsCount; ++index) {
-        _loop2();
-      }
-      return Promise.resolve(csvData);
-    });
-    _defineProperty(_assertThisInitialized(_this), "csvHeaders", memoize(function (columns, exportCSVDataKeys) {
-      var tempHeaders = [];
-      columns.forEach(function (col) {
-        if (exportCSVDataKeys !== undefined && exportCSVDataKeys.find(function (el) {
-          return el === col.dataKey;
-        })) {
-          tempHeaders.push({
-            displayName: col.label,
-            id: col.dataKey
-          });
-        }
-      });
-      return tempHeaders;
-    }));
-    _this._computeHeaderSize = _this._computeHeaderSize.bind(_assertThisInitialized(_this));
-    _this._registerHeader = _this._registerHeader.bind(_assertThisInitialized(_this));
-    _this._registerObserver = _this._registerObserver.bind(_assertThisInitialized(_this));
-    _this.headers = createRef();
-    _this.headers.current = {};
-    var _options = {
-      root: null,
-      rootMargin: '0px',
-      threshold: 0.1
-    };
-    _this.observer = new IntersectionObserver(_this._computeHeaderSize, _options);
-    _this.state = {
-      headerHeight: _this.props.headerHeight,
-      indexer: initIndexer(props, null, _this.setVersion),
-      indirectionVersion: 0,
-      popoverAnchorEl: null,
-      popoverColKey: null,
-      deferredFilterChange: null
-    };
-    return _this;
-  }
-  var _proto = MuiVirtualizedTable.prototype;
-  _proto.componentDidUpdate = function componentDidUpdate(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() {
-    window.addEventListener('resize', this._computeHeaderSize);
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    window.removeEventListener('resize', this._computeHeaderSize);
-    this.observer.disconnect();
-  };
-  _proto._registerHeader = function _registerHeader(label, header) {
-    if (header !== null) {
-      this.headers.current[label] = header;
-    }
-  };
-  _proto._registerObserver = function _registerObserver(element) {
-    if (element !== null) {
-      this.observer.observe(element);
-    }
-  };
-  _proto.onFilterParamsChange = function onFilterParamsChange(newVal, colKey) {
-    var nonEmpty = newVal.length === 0 ? null : newVal;
-    if (this.props.defersFilterChanges) {
-      this.setState({
-        deferredFilterChange: {
-          newVal: newVal,
-          colKey: colKey
-        }
-      });
-    } else if (this.state.indexer.setColFilterUserParams(colKey, nonEmpty)) {
-      this.setState({
-        indirectionVersion: this.state.indirectionVersion + 1
-      });
-    }
-  };
-  _proto.getDisplayValue = function getDisplayValue(column, cellData) {
-    var displayedValue;
-    if (!column.numeric) {
-      displayedValue = cellData;
-    } else if (isNaN(cellData)) {
-      displayedValue = '';
-    } else if (column.fractionDigits === undefined || column.fractionDigits === 0) {
-      displayedValue = Math.round(cellData);
-    } else {
-      displayedValue = Number(cellData).toFixed(column.fractionDigits);
-    }
-    if (column.unit !== undefined) {
-      displayedValue += ' ';
-      displayedValue += column.unit;
-    }
-    return displayedValue;
-  };
-  _proto._computeHeaderSize = function _computeHeaderSize() {
-    var headers = Object.values(this.headers.current);
-    if (headers.length === 0) {
-      return;
-    }
-    // for now keep 'historical' use of scrollHeight,
-    // though it can not make a difference from clientHeight,
-    // as overflow-y as no scroll value
-    var scrollHeights = headers.map(function (header) {
-      return header.scrollHeight;
-    });
-    var headerHeight = Math.max(Math.max.apply(Math, scrollHeights) + DEFAULT_CELL_PADDING, this.props.headerHeight
-    // hides (most often) padding override by forcing height
-    );
-
-    if (headerHeight !== this.state.headerHeight) {
-      this.setState({
-        headerHeight: headerHeight
-      });
-    }
-  };
-  _proto.makeHeaderRenderer = function makeHeaderRenderer(dataKey, columnIndex) {
-    var _this3 = this;
-    var _this$props4 = this.props,
-      columns = _this$props4.columns,
-      classes = _this$props4.classes;
-    return function (headerProps) {
-      return /*#__PURE__*/React.createElement(TableCell, {
-        component: "div",
-        className: clsx(composeClasses(classes, cssTableCell), composeClasses(classes, cssFlexContainer), composeClasses(classes, cssNoClick), composeClasses(classes, cssHeader)),
-        variant: "head",
-        style: {
-          height: _this3.state.headerHeight
-        },
-        align: columns[columnIndex].numeric || false ? 'right' : 'left',
-        ref: function ref(e) {
-          return _this3._registerObserver(e);
-        }
-      }, _this3.props.sortable && _this3.state.indexer ? _this3.sortableHeader(_extends({}, headerProps, {
-        columnIndex: columnIndex,
-        key: {
-          dataKey: dataKey
-        }
-      })) : _this3.simpleHeaderRenderer(_extends({}, headerProps)), columns[columnIndex].extra && columns[columnIndex].extra);
-    };
-  };
-  _proto.render = function render() {
-    var _this4 = this;
-    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);
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%'
-      },
-      className: this.props.className
-    }, this.props.enableExportCSV && /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center'
-      }
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "MuiVirtualizedTable/exportCSV"
-    }), /*#__PURE__*/React.createElement(CsvDownloader, {
-      datas: this.getCSVData,
-      columns: csvHeaders,
-      filename: this.getCSVFilename()
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      "aria-label": "exportCSVButton",
-      size: "large"
-    }, /*#__PURE__*/React.createElement(GetAppIcon, null)))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        flexGrow: 1
-      }
-    }, /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref10) {
-      var height = _ref10.height,
-        width = _ref10.width;
-      return _this4.makeSizedTable(height, width, sizes, viewIndexToModel, rowGetter);
-    })), this.state.popoverAnchorEl && /*#__PURE__*/React.createElement(Popover, {
-      anchorEl: this.state.popoverAnchorEl,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      onKeyDownCapture: this.handleKeyDownOnPopover,
-      onClose: this.closePopover,
-      open: !!this.state.popoverAnchorEl,
-      PaperProps: {
-        style: {
-          minWidth: '20ex'
-        }
-      }
-    }, this.makeColumnFilterEditor()));
-  };
-  return MuiVirtualizedTable;
-}(React.PureComponent);
-_defineProperty(MuiVirtualizedTable, "defaultProps", {
-  headerHeight: DEFAULT_HEADER_HEIGHT,
-  rowHeight: DEFAULT_ROW_HEIGHT,
-  enableExportCSV: false,
-  classes: {}
-});
-MuiVirtualizedTable.propTypes = process.env.NODE_ENV !== "production" ? {
-  name: PropTypes.string,
-  classes: PropTypes.object,
-  rows: PropTypes.array,
-  columns: PropTypes.arrayOf(PropTypes.shape({
-    dataKey: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
-    numeric: PropTypes.bool,
-    width: PropTypes.number,
-    minWidth: PropTypes.number,
-    maxWidth: PropTypes.number,
-    unit: PropTypes.string,
-    fractionDigits: PropTypes.number,
-    extra: PropTypes.element
-  })).isRequired,
-  enableExportCSV: PropTypes.bool,
-  exportCSVDataKeys: PropTypes.array,
-  sort: PropTypes.func,
-  sortable: PropTypes.bool,
-  indexer: PropTypes.object,
-  headerHeight: PropTypes.number,
-  onRowClick: PropTypes.func,
-  onCellClick: PropTypes.func,
-  rowHeight: PropTypes.number,
-  filter: PropTypes.func,
-  tooltipSx: PropTypes.object
-} : {};
-var nestedGlobalSelectorsStyles = toNestedGlobalSelectors(defaultStyles, generateMuiVirtualizedTableClass);
-export default styled(MuiVirtualizedTable)(nestedGlobalSelectorsStyles);