@gridsuite/commons-ui 0.46.0 → 0.47.0

package/dist/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -0,0 +1,790 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 { TableCell, IconButton, Popover, Autocomplete, TextField, Chip } from "@mui/material";
+import { styled } from "@mui/system";
+import { GetApp } from "@mui/icons-material";
+import { Table, Column, AutoSizer } from "react-virtualized";
+import CsvDownloader from "react-csv-downloader";
+import { OverflowableText } from "../OverflowableText/overflowable-text.js";
+import { toNestedGlobalSelectors, makeComposeClasses } from "../../utils/styles.js";
+import { getHelper, collectibleHelper, KeyedColumnsRowIndexer, CHANGE_WAYS } from "./KeyedColumnsRowIndexer.js";
+import ColumnHeader from "./ColumnHeader.js";
+function getTextWidth(text) {
+  let canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
+  let context = canvas.getContext("2d");
+  context.font = '14px "Roboto", "Helvetica", "Arial", sans-serif';
+  let metrics = context.measureText(text);
+  return metrics.width;
+}
+const DEFAULT_CELL_PADDING = 16;
+const DEFAULT_HEADER_HEIGHT = 48;
+const DEFAULT_ROW_HEIGHT = 48;
+const cssFlexContainer = "flexContainer";
+const cssTable = "table";
+const cssTableRow = "tableRow";
+const cssTableRowHover = "tableRowHover";
+const cssTableCell = "tableCell";
+const cssTableCellColor = "tableCellColor";
+const cssNoClick = "noClick";
+const cssHeader = "header";
+const cssRowBackgroundDark = "rowBackgroundDark";
+const cssRowBackgroundLight = "rowBackgroundLight";
+const defaultStyles = {
+  [cssFlexContainer]: {
+    display: "flex",
+    alignItems: "center",
+    boxSizing: "border-box"
+  },
+  [cssTable]: {
+    // temporary right-to-left patch, waiting for
+    // https://github.com/bvaughn/react-virtualized/issues/454
+    "& .ReactVirtualized__Table__headerRow": {
+      flip: false
+    }
+  },
+  [cssTableRow]: {
+    cursor: "pointer"
+  },
+  [cssTableRowHover]: {},
+  [cssTableCell]: {
+    flex: 1,
+    padding: DEFAULT_CELL_PADDING + "px"
+  },
+  [cssTableCellColor]: {},
+  [cssNoClick]: {
+    cursor: "initial"
+  },
+  [cssHeader]: {
+    fontWeight: "bold"
+  },
+  [cssRowBackgroundDark]: {},
+  [cssRowBackgroundLight]: {}
+};
+const defaultTooltipSx = {
+  maxWidth: "1260px",
+  fontSize: "0.9rem"
+};
+const generateMuiVirtualizedTableClass = (className) => `MuiVirtualizedTable-${className}`;
+const composeClasses = makeComposeClasses(generateMuiVirtualizedTableClass);
+const AmongChooser = (props) => {
+  const { options, value, setValue, id, onDropDownVisibility } = props;
+  return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      id,
+      value: value ?? [],
+      multiple: true,
+      onChange: (evt, newVal) => {
+        setValue(newVal);
+      },
+      onClose: () => onDropDownVisibility(false),
+      onOpen: () => onDropDownVisibility(true),
+      options,
+      renderInput: (props2) => /* @__PURE__ */ jsx(TextField, { autoFocus: true, ...props2 }),
+      renderTags: (val, getTagsProps) => {
+        return val.map((code, index) => {
+          return /* @__PURE__ */ jsx(
+            Chip,
+            {
+              id: "chip_" + code,
+              size: "small",
+              label: code,
+              ...getTagsProps({ index })
+            }
+          );
+        });
+      }
+    }
+  ) });
+};
+function makeIndexRecord(viewIndexToModel, rows) {
+  return {
+    viewIndexToModel,
+    rowGetter: !viewIndexToModel ? (viewIndex) => rows[viewIndex] : (viewIndex) => {
+      if (viewIndex >= viewIndexToModel.length || viewIndex < 0) {
+        return {};
+      }
+      const modelIndex = viewIndexToModel[viewIndex];
+      return rows[modelIndex];
+    }
+  };
+}
+const initIndexer = (props, oldProps, versionSetter) => {
+  if (!props.sortable) {
+    return null;
+  }
+  if (props.indexer) {
+    return props.indexer;
+  }
+  return new KeyedColumnsRowIndexer(true, true, null, versionSetter);
+};
+const preFilterData = memoize(
+  (columns, rows, filterFromProps, indexer, filterVersion) => {
+    return indexer.preFilterRowMapping(columns, rows, filterFromProps);
+  }
+);
+const reorderIndex = memoize(
+  (indexer, indirectionVersion, rows, columns, filterFromProps, sortFromProps) => {
+    if (!rows) {
+      return {
+        viewIndexToModel: [],
+        rowGetter: (viewIndex) => viewIndex
+      };
+    }
+    const highestCodedColumn = !indexer ? 0 : indexer.highestCodedColumn(columns);
+    if (sortFromProps && highestCodedColumn) {
+      const colIdx = Math.abs(highestCodedColumn) - 1;
+      let reorderedIndex = sortFromProps(
+        columns[colIdx].dataKey,
+        highestCodedColumn > 0,
+        !!columns[colIdx].numeric
+      );
+      return makeIndexRecord(reorderedIndex, rows);
+    }
+    if (sortFromProps) {
+      try {
+        const viewIndexToModel = sortFromProps(null, false, false);
+        return makeIndexRecord(viewIndexToModel, rows);
+      } catch (e) {
+        console.warn(
+          "error in external sort. consider adding support for datakey=null in your external sort function"
+        );
+      }
+    }
+    if (indexer) {
+      const prefiltered = preFilterData(
+        columns,
+        rows,
+        filterFromProps,
+        indexer,
+        indirectionVersion
+      );
+      const reorderedIndex = indexer.makeGroupAndSortIndirector(
+        prefiltered,
+        columns
+      );
+      return makeIndexRecord(reorderedIndex, rows);
+    }
+    if (filterFromProps) {
+      const viewIndexToModel = rows.map((r, i) => [r, i]).filter(([r, idx]) => filterFromProps(r)).map(([r, j]) => j);
+      return makeIndexRecord(viewIndexToModel, rows);
+    }
+    return makeIndexRecord(null, rows);
+  }
+);
+class MuiVirtualizedTable extends React.PureComponent {
+  constructor(props, context) {
+    super(props, context);
+    __publicField(this, "setVersion", (v) => {
+      this.setState({ indirectionVersion: v });
+    });
+    __publicField(this, "computeDataWidth", (text) => {
+      return getTextWidth(text || "") + 2 * DEFAULT_CELL_PADDING;
+    });
+    __publicField(this, "sizes", memoize((columns, rows, rowGetter) => {
+      let sizes = {};
+      columns.forEach((col) => {
+        if (col.width) {
+          sizes[col.dataKey] = col.width;
+        } else {
+          let size = Math.max(
+            col.minWidth || 0,
+            this.computeDataWidth(col.label)
+          );
+          for (let i = 0; i < rows.length; ++i) {
+            const gotRow = rowGetter(i);
+            let 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;
+    }));
+    __publicField(this, "openPopover", (popoverTarget, colKey) => {
+      const col = this.props.columns.find((c) => c.dataKey === colKey);
+      if (getHelper(col) !== collectibleHelper) {
+        return;
+      }
+      this.dropDownVisible = false;
+      this.setState({
+        popoverAnchorEl: popoverTarget,
+        popoverColKey: colKey
+      });
+    });
+    __publicField(this, "handleKeyDownOnPopover", (evt) => {
+      if (evt.key === "Enter" && !this.dropDownVisible) {
+        this.closePopover(evt, "enterKeyDown");
+      }
+    });
+    __publicField(this, "closePopover", (evt, reason) => {
+      let bumpsVersion = false;
+      if (reason === "backdropClick" || reason === "enterKeyDown") {
+        bumpsVersion = this._commitFilterChange();
+      }
+      this.setState((state, props) => {
+        return {
+          popoverAnchorEl: null,
+          popoverColKey: null,
+          deferredFilterChange: null,
+          indirectionVersion: state.indirectionVersion + (bumpsVersion ? 1 : 0)
+        };
+      });
+    });
+    __publicField(this, "makeColumnFilterEditor", () => {
+      var _a;
+      const colKey = this.state.popoverColKey;
+      const outerParams = this.state.indexer.getColFilterOuterParams(colKey);
+      const userParams = !this.props.defersFilterChanges || !this.state.deferredFilterChange ? this.state.indexer.getColFilterUserParams(colKey) : this.state.deferredFilterChange.newVal;
+      const prefiltered = preFilterData(
+        this.props.columns,
+        this.props.rows,
+        this.props.filter,
+        this.state.indexer,
+        this.state.indirectionVersion
+      );
+      let options = [];
+      if (outerParams) {
+        options.push(...outerParams);
+      }
+      const colStat = (_a = prefiltered == null ? void 0 : prefiltered.colsStats) == null ? void 0 : _a[colKey];
+      if (colStat == null ? void 0 : colStat.seen) {
+        for (const key of Object.getOwnPropertyNames(colStat.seen)) {
+          if (options.findIndex((o) => o === key) < 0) {
+            options.push(key);
+          }
+        }
+      }
+      options.sort();
+      const col = this.props.columns.find((c) => c.dataKey === colKey);
+      return /* @__PURE__ */ jsx(
+        AmongChooser,
+        {
+          options,
+          value: userParams,
+          id: "fielt" + colKey,
+          label: (col == null ? void 0 : col.label) ?? "∈",
+          setValue: (newVal) => {
+            this.onFilterParamsChange(newVal, colKey);
+          },
+          onDropDownVisibility: (visible) => this.dropDownVisible = visible
+        }
+      );
+    });
+    __publicField(this, "_commitFilterChange", () => {
+      if (this.state.deferredFilterChange) {
+        const colKey = this.state.deferredFilterChange.colKey;
+        let newVal = this.state.deferredFilterChange.newVal;
+        if ((newVal == null ? void 0 : newVal.length) === 0) {
+          newVal = null;
+        }
+        if (this.state.indexer.setColFilterUserParams(colKey, newVal)) {
+          return true;
+        }
+      }
+      return false;
+    });
+    __publicField(this, "sortClickHandler", (evt, name, columnIndex) => {
+      const colKey = this.props.columns[columnIndex].dataKey;
+      if (evt.altKey) {
+        this.openPopover(evt.target, colKey);
+        return;
+      }
+      let 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
+        });
+      }
+    });
+    __publicField(this, "filterClickHandler", (evt, target, columnIndex) => {
+      const retargeted = target.parentNode ?? target;
+      const colKey = this.props.columns[columnIndex].dataKey;
+      this.openPopover(retargeted, colKey);
+    });
+    __publicField(this, "sortableHeader", ({ label, columnIndex }) => {
+      var _a;
+      const { columns } = this.props;
+      const indexer = this.state.indexer;
+      const colKey = columns[columnIndex].dataKey;
+      const signedRank = indexer.columnSortingSignedRank(colKey);
+      const userParams = indexer.getColFilterUserParams(colKey);
+      const numeric = columns[columnIndex].numeric;
+      const prefiltered = preFilterData(
+        columns,
+        this.props.rows,
+        this.props.filter,
+        indexer,
+        indexer.filterVersion
+      );
+      const colStat = (_a = prefiltered == null ? void 0 : prefiltered.colsStats) == null ? void 0 : _a[colKey];
+      let filterLevel = 0;
+      if (userParams == null ? void 0 : userParams.length) {
+        filterLevel += 1;
+        if (!(colStat == null ? void 0 : colStat.seen)) {
+          filterLevel += 2;
+        } else if (userParams.filter((v) => !colStat.seen[v]).length) {
+          filterLevel += 2;
+        }
+      }
+      const onFilterClick = numeric || this.props.sort || columns[columnIndex].cellRenderer ? void 0 : (ev, retargeted) => {
+        this.filterClickHandler(ev, retargeted, columnIndex);
+      };
+      return /* @__PURE__ */ jsx(
+        ColumnHeader,
+        {
+          label,
+          ref: (e) => this._registerHeader(label, e),
+          sortSignedRank: signedRank,
+          filterLevel,
+          numeric,
+          onSortClick: (ev, name) => {
+            this.sortClickHandler(ev, name, columnIndex);
+          },
+          onFilterClick
+        }
+      );
+    });
+    __publicField(this, "simpleHeaderRenderer", ({ label }) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (element) => {
+            this._registerHeader(label, element);
+          },
+          children: label
+        }
+      );
+    });
+    __publicField(this, "getRowClassName", ({ index, rowGetter }) => {
+      var _a;
+      const { classes, onRowClick } = this.props;
+      return clsx(
+        composeClasses(classes, cssTableRow),
+        composeClasses(classes, cssFlexContainer),
+        index % 2 === 0 && composeClasses(classes, cssRowBackgroundDark),
+        index % 2 !== 0 && composeClasses(classes, cssRowBackgroundLight),
+        ((_a = rowGetter(index)) == null ? void 0 : _a.notClickable) === true && composeClasses(classes, cssNoClick),
+        // Allow to define a row as not clickable
+        {
+          [composeClasses(classes, cssTableRowHover)]: index !== -1 && onRowClick != null
+        }
+      );
+    });
+    __publicField(this, "onClickableRowClick", (event) => {
+      var _a;
+      if (!(((_a = event.rowData) == null ? void 0 : _a.notClickable) === true)) {
+        this.props.onRowClick(event);
+      }
+    });
+    __publicField(this, "cellRenderer", ({ cellData, columnIndex, rowIndex }) => {
+      var _a, _b;
+      const { columns, classes, rowHeight, onCellClick, rows, tooltipSx } = this.props;
+      let displayedValue = this.getDisplayValue(
+        columns[columnIndex],
+        cellData
+      );
+      return /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          component: "div",
+          className: clsx(
+            composeClasses(classes, cssTableCell),
+            composeClasses(classes, cssFlexContainer),
+            {
+              [composeClasses(classes, cssNoClick)]: displayedValue === void 0 || ((_a = rows[rowIndex]) == null ? void 0 : _a.notClickable) === true || onCellClick == null || columns[columnIndex].clickable === void 0 || !columns[columnIndex].clickable,
+              [composeClasses(classes, cssTableCellColor)]: displayedValue === void 0 || onCellClick !== null && !((_b = rows[rowIndex]) == null ? void 0 : _b.notClickable) === true && columns[columnIndex].clickable !== void 0 && columns[columnIndex].clickable
+            }
+          ),
+          variant: "body",
+          style: { height: rowHeight, width: "100%" },
+          align: columnIndex != null && columns[columnIndex].numeric || false ? "right" : "left",
+          onClick: () => {
+            var _a2;
+            if (onCellClick && columns[columnIndex].clickable !== void 0 && !((_a2 = rows[rowIndex]) == null ? void 0 : _a2.notClickable) === true && columns[columnIndex].clickable) {
+              onCellClick(rows[rowIndex], columns[columnIndex]);
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            OverflowableText,
+            {
+              text: displayedValue,
+              tooltipStyle: classes.cellTooltip,
+              tooltipSx: { ...defaultTooltipSx, ...tooltipSx }
+            }
+          )
+        }
+      );
+    });
+    __publicField(this, "makeSizedTable", (height, width, sizes, reorderedIndex, rowGetter) => {
+      const { sort, ...otherProps } = this.props;
+      return /* @__PURE__ */ jsx(
+        Table,
+        {
+          ...otherProps,
+          height,
+          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 == null ? void 0 : reorderedIndex.length) ?? otherProps.rows.length,
+          rowClassName: ({ index }) => this.getRowClassName({ index, rowGetter }),
+          rowGetter: ({ index }) => rowGetter(index),
+          children: otherProps.columns.map(({ dataKey, ...other }, index) => {
+            return /* @__PURE__ */ jsx(
+              Column,
+              {
+                headerRenderer: this.makeHeaderRenderer(
+                  dataKey,
+                  index
+                ),
+                className: composeClasses(
+                  otherProps.classes,
+                  cssFlexContainer
+                ),
+                cellRenderer: this.cellRenderer,
+                dataKey,
+                flexGrow: 1,
+                width: sizes[dataKey],
+                ...other
+              },
+              dataKey
+            );
+          })
+        }
+      );
+    });
+    __publicField(this, "getCSVFilename", () => {
+      var _a;
+      if (((_a = this.props.name) == null ? void 0 : _a.length) > 0) {
+        return this.props.name.replace(/\s/g, "_");
+      } else {
+        let filename = Object.entries(this.props.columns).map((p) => p[1].label).join("_");
+        return filename;
+      }
+    });
+    __publicField(this, "getCSVData", () => {
+      var _a;
+      let reorderedIndex = reorderIndex(
+        this.state.indexer,
+        this.state.indirectionVersion,
+        this.props.rows,
+        this.props.columns,
+        this.props.filter,
+        this.props.sort
+      );
+      let rowsCount = ((_a = reorderedIndex.viewIndexToModel) == null ? void 0 : _a.length) ?? this.props.rows.length;
+      const csvData = [];
+      for (let index = 0; index < rowsCount; ++index) {
+        const myobj = {};
+        const sortedRow = reorderedIndex.rowGetter(index);
+        const exportedKeys = this.props.exportCSVDataKeys;
+        this.props.columns.forEach((col) => {
+          if (exportedKeys == null ? void 0 : exportedKeys.find((el) => el === col.dataKey)) {
+            myobj[col.dataKey] = sortedRow[col.dataKey];
+          }
+        });
+        csvData.push(myobj);
+      }
+      return Promise.resolve(csvData);
+    });
+    __publicField(this, "csvHeaders", memoize((columns, exportCSVDataKeys) => {
+      let tempHeaders = [];
+      columns.forEach((col) => {
+        if (exportCSVDataKeys !== void 0 && exportCSVDataKeys.find((el) => el === col.dataKey)) {
+          tempHeaders.push({
+            displayName: col.label,
+            id: col.dataKey
+          });
+        }
+      });
+      return tempHeaders;
+    }));
+    this._computeHeaderSize = this._computeHeaderSize.bind(this);
+    this._registerHeader = this._registerHeader.bind(this);
+    this._registerObserver = this._registerObserver.bind(this);
+    this.headers = createRef();
+    this.headers.current = {};
+    let 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
+    };
+  }
+  componentDidUpdate(oldProps) {
+    if (oldProps.indexer !== this.props.indexer || oldProps.sortable !== this.props.sortable) {
+      this.setState((state) => {
+        return {
+          indexer: initIndexer(this.props, oldProps, this.setVersion),
+          indirectionVersion: ((state == null ? void 0 : state.indirectionVersion) ?? 0) + 1
+        };
+      });
+    }
+    if (oldProps.headerHeight !== this.props.headerHeight) {
+      this._computeHeaderSize();
+    }
+  }
+  componentDidMount() {
+    window.addEventListener("resize", this._computeHeaderSize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this._computeHeaderSize);
+    this.observer.disconnect();
+  }
+  _registerHeader(label, header) {
+    if (header !== null) {
+      this.headers.current[label] = header;
+    }
+  }
+  _registerObserver(element) {
+    if (element !== null) {
+      this.observer.observe(element);
+    }
+  }
+  onFilterParamsChange(newVal, colKey) {
+    const nonEmpty = newVal.length === 0 ? null : newVal;
+    if (this.props.defersFilterChanges) {
+      this.setState({
+        deferredFilterChange: { newVal, colKey }
+      });
+    } else if (this.state.indexer.setColFilterUserParams(colKey, nonEmpty)) {
+      this.setState({
+        indirectionVersion: this.state.indirectionVersion + 1
+      });
+    }
+  }
+  getDisplayValue(column, cellData) {
+    let displayedValue;
+    if (!column.numeric) {
+      displayedValue = cellData;
+    } else if (isNaN(cellData)) {
+      displayedValue = "";
+    } else if (column.fractionDigits === void 0 || column.fractionDigits === 0) {
+      displayedValue = Math.round(cellData);
+    } else {
+      displayedValue = Number(cellData).toFixed(column.fractionDigits);
+    }
+    if (column.unit !== void 0) {
+      displayedValue += " ";
+      displayedValue += column.unit;
+    }
+    return displayedValue;
+  }
+  _computeHeaderSize() {
+    const headers = Object.values(this.headers.current);
+    if (headers.length === 0) {
+      return;
+    }
+    const scrollHeights = headers.map((header) => header.scrollHeight);
+    let headerHeight = Math.max(
+      Math.max(...scrollHeights) + DEFAULT_CELL_PADDING,
+      this.props.headerHeight
+      // hides (most often) padding override by forcing height
+    );
+    if (headerHeight !== this.state.headerHeight) {
+      this.setState({
+        headerHeight
+      });
+    }
+  }
+  makeHeaderRenderer(dataKey, columnIndex) {
+    const { columns, classes } = this.props;
+    return (headerProps) => {
+      return /* @__PURE__ */ jsxs(
+        TableCell,
+        {
+          component: "div",
+          className: clsx(
+            composeClasses(classes, cssTableCell),
+            composeClasses(classes, cssFlexContainer),
+            composeClasses(classes, cssNoClick),
+            composeClasses(classes, cssHeader)
+          ),
+          variant: "head",
+          style: { height: this.state.headerHeight },
+          align: columns[columnIndex].numeric || false ? "right" : "left",
+          ref: (e) => this._registerObserver(e),
+          children: [
+            this.props.sortable && this.state.indexer ? this.sortableHeader({
+              ...headerProps,
+              columnIndex,
+              key: { dataKey }
+            }) : this.simpleHeaderRenderer({
+              ...headerProps
+            }),
+            columns[columnIndex].extra && columns[columnIndex].extra
+          ]
+        }
+      );
+    };
+  }
+  render() {
+    const { viewIndexToModel, rowGetter } = reorderIndex(
+      this.state.indexer,
+      this.state.indirectionVersion,
+      this.props.rows,
+      this.props.columns,
+      this.props.filter,
+      this.props.sort
+    );
+    const sizes = this.sizes(
+      this.props.columns,
+      this.props.rows,
+      rowGetter
+    );
+    const csvHeaders = this.csvHeaders(
+      this.props.columns,
+      this.props.exportCSVDataKeys
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%"
+        },
+        className: this.props.className,
+        children: [
+          this.props.enableExportCSV && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(FormattedMessage, { id: "MuiVirtualizedTable/exportCSV" }),
+                /* @__PURE__ */ jsx(
+                  CsvDownloader,
+                  {
+                    datas: this.getCSVData,
+                    columns: csvHeaders,
+                    filename: this.getCSVFilename(),
+                    children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        "aria-label": "exportCSVButton",
+                        size: "large",
+                        children: /* @__PURE__ */ jsx(GetApp, {})
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ jsx(AutoSizer, { children: ({ height, width }) => this.makeSizedTable(
+            height,
+            width,
+            sizes,
+            viewIndexToModel,
+            rowGetter
+          ) }) }),
+          this.state.popoverAnchorEl && /* @__PURE__ */ jsx(
+            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" } },
+              children: this.makeColumnFilterEditor()
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+__publicField(MuiVirtualizedTable, "defaultProps", {
+  headerHeight: DEFAULT_HEADER_HEIGHT,
+  rowHeight: DEFAULT_ROW_HEIGHT,
+  enableExportCSV: false,
+  classes: {}
+});
+MuiVirtualizedTable.propTypes = {
+  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
+};
+const nestedGlobalSelectorsStyles = toNestedGlobalSelectors(
+  defaultStyles,
+  generateMuiVirtualizedTableClass
+);
+const MuiVirtualizedTable$1 = styled(MuiVirtualizedTable)(nestedGlobalSelectorsStyles);
+export {
+  DEFAULT_CELL_PADDING,
+  DEFAULT_HEADER_HEIGHT,
+  DEFAULT_ROW_HEIGHT,
+  MuiVirtualizedTable$1 as default,
+  generateMuiVirtualizedTableClass
+};