@gridsuite/commons-ui 0.34.1 → 0.35.1

package/lib/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -1,22 +1,33 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_HEIGHT = exports.DEFAULT_CELL_PADDING = void 0;
+exports.generateMuiVirtualizedTableClass = exports["default"] = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_HEIGHT = exports.DEFAULT_CELL_PADDING = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx3 = _interopRequireDefault(require("clsx"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _material = require("@mui/material");
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _system = require("@mui/system");
 var _GetApp = _interopRequireDefault(require("@mui/icons-material/GetApp"));
 var _reactVirtualized = require("react-virtualized");
 var _reactCsvDownloader = _interopRequireDefault(require("react-csv-downloader"));
 var _overflowableText = _interopRequireDefault(require("../OverflowableText/overflowable-text"));
+var _styles = require("../../utils/styles");
 var _KeyedColumnsRowIndexer = require("./KeyedColumnsRowIndexer");
 var _ColumnHeader = _interopRequireDefault(require("./ColumnHeader"));
 var _excluded = ["sort"],
   _excluded2 = ["dataKey"];
+var _defaultStyles;
+/**
+ * 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/
+ */
 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; }
@@ -30,14 +41,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 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/
-                                                                                                                                                                                                                                                                                                                                                         */
+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); }
 function getTextWidth(text) {
   // re-use canvas object for better performance
   var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
@@ -52,42 +56,57 @@ exports.DEFAULT_CELL_PADDING = DEFAULT_CELL_PADDING;
 var DEFAULT_HEADER_HEIGHT = 48;
 exports.DEFAULT_HEADER_HEIGHT = DEFAULT_HEADER_HEIGHT;
 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 ?
 exports.DEFAULT_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
-var defaultStyles = {
-  flexContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box'
-  },
-  table: {
-    // temporary right-to-left patch, waiting for
-    // https://github.com/bvaughn/react-virtualized/issues/454
-    '& .ReactVirtualized__Table__headerRow': {
-      flip: false
-    }
-  },
-  tableRow: {
-    cursor: 'pointer'
-  },
-  tableRowHover: {},
-  tableCell: {
-    flex: 1,
-    padding: DEFAULT_CELL_PADDING + 'px'
-  },
-  tableCellColor: {},
-  noClick: {
-    cursor: 'initial'
-  },
-  header: {
-    fontWeight: 'bold'
-  },
-  rowBackgroundDark: {},
-  rowBackgroundLight: {},
-  cellTooltip: {
-    maxWidth: '1260px',
-    fontSize: '0.9rem'
+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) ?
+var generateMuiVirtualizedTableClass = function generateMuiVirtualizedTableClass(className) {
+  return "MuiVirtualizedTable-" + className;
+};
+exports.generateMuiVirtualizedTableClass = generateMuiVirtualizedTableClass;
+var composeClasses = (0, _styles.makeComposeClasses)(generateMuiVirtualizedTableClass);
 var AmongChooser = function AmongChooser(props) {
   var options = props.options,
     value = props.value,
@@ -411,7 +430,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       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, _clsx));
+      return (0, _clsx3["default"])(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;
@@ -429,11 +448,12 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         classes = _this$props2.classes,
         rowHeight = _this$props2.rowHeight,
         onCellClick = _this$props2.onCellClick,
-        rows = _this$props2.rows;
+        rows = _this$props2.rows,
+        tooltipSx = _this$props2.tooltipSx;
       var displayedValue = _this.getDisplayValue(columns[columnIndex], cellData);
       return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "div",
-        className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, (_clsx2 = {}, _clsx2[classes.noClick] = 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[classes.tableCellColor] = 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)),
+        className: (0, _clsx3["default"])(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,
@@ -448,7 +468,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         }
       }, /*#__PURE__*/_react["default"].createElement(_overflowableText["default"], {
         text: displayedValue,
-        tooltipStyle: classes.cellTooltip
+        tooltipStyle: classes.cellTooltip,
+        tooltipSx: _extends({}, defaultTooltipSx, tooltipSx)
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "makeSizedTable", function (height, width, sizes, reorderedIndex, _rowGetter2) {
@@ -464,7 +485,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
           direction: 'inherit'
         },
         headerHeight: _this.state.headerHeight,
-        className: otherProps.classes.table,
+        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,
@@ -485,7 +506,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Column, _extends({
           key: dataKey,
           headerRenderer: _this.makeHeaderRenderer(dataKey, index),
-          className: otherProps.classes.flexContainer,
+          className: composeClasses(otherProps.classes, cssFlexContainer),
           cellRenderer: _this.cellRenderer,
           dataKey: dataKey,
           flexGrow: 1,
@@ -656,7 +677,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     return function (headerProps) {
       return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "div",
-        className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, classes.noClick, classes.header),
+        className: (0, _clsx3["default"])(composeClasses(classes, cssTableCell), composeClasses(classes, cssFlexContainer), composeClasses(classes, cssNoClick), composeClasses(classes, cssHeader)),
         variant: "head",
         style: {
           height: _this3.state.headerHeight
@@ -685,7 +706,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         display: 'flex',
         flexDirection: 'column',
         height: '100%'
-      }
+      },
+      className: this.props.className
     }, this.props.enableExportCSV && /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         display: 'flex',
@@ -734,11 +756,12 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
 _defineProperty(MuiVirtualizedTable, "defaultProps", {
   headerHeight: DEFAULT_HEADER_HEIGHT,
   rowHeight: DEFAULT_ROW_HEIGHT,
-  enableExportCSV: false
+  enableExportCSV: false,
+  classes: {}
 });
 MuiVirtualizedTable.propTypes = process.env.NODE_ENV !== "production" ? {
   name: _propTypes["default"].string,
-  classes: _propTypes["default"].object.isRequired,
+  classes: _propTypes["default"].object,
   rows: _propTypes["default"].array,
   columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     dataKey: _propTypes["default"].string.isRequired,
@@ -759,7 +782,9 @@ MuiVirtualizedTable.propTypes = process.env.NODE_ENV !== "production" ? {
   onRowClick: _propTypes["default"].func,
   onCellClick: _propTypes["default"].func,
   rowHeight: _propTypes["default"].number,
-  filter: _propTypes["default"].func
+  filter: _propTypes["default"].func,
+  tooltipSx: _propTypes["default"].object
 } : {};
-var _default = (0, _withStyles["default"])(defaultStyles)(MuiVirtualizedTable);
+var nestedGlobalSelectorsStyles = (0, _styles.toNestedGlobalSelectors)(defaultStyles, generateMuiVirtualizedTableClass);
+var _default = (0, _system.styled)(MuiVirtualizedTable)(nestedGlobalSelectorsStyles);
 exports["default"] = _default;

package/lib/components/MuiVirtualizedTable/index.js

@@ -1,10 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.KeyedColumnsRowIndexer = exports.CHANGE_WAYS = void 0;
-var _MuiVirtualizedTable = _interopRequireDefault(require("./MuiVirtualizedTable"));
+exports.generateMuiVirtualizedTableClass = exports["default"] = exports.KeyedColumnsRowIndexer = exports.CHANGE_WAYS = void 0;
+var _MuiVirtualizedTable = _interopRequireWildcard(require("./MuiVirtualizedTable"));
 exports["default"] = _MuiVirtualizedTable["default"];
+exports.generateMuiVirtualizedTableClass = _MuiVirtualizedTable.generateMuiVirtualizedTableClass;
 var _KeyedColumnsRowIndexer = require("./KeyedColumnsRowIndexer");
 exports.KeyedColumnsRowIndexer = _KeyedColumnsRowIndexer.KeyedColumnsRowIndexer;
 exports.CHANGE_WAYS = _KeyedColumnsRowIndexer.CHANGE_WAYS;
-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; }

package/lib/components/OverflowableText/overflowable-text.js

@@ -5,9 +5,8 @@ exports["default"] = exports.OverflowableText = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _excluded = ["text", "tooltipStyle", "className", "children"];
+var _system = require("@mui/system");
+var _excluded = ["text", "tooltipStyle", "tooltipSx", "className", "children"];
 /**
  * Copyright (c) 2020, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -19,30 +18,28 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 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); }
 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; }
-var overflowStyle = function overflowStyle(theme) {
-  return {
-    overflow: {
-      display: 'inline-block',
-      whiteSpace: 'pre',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden'
-    },
-    tooltip: {
-      whiteSpace: 'pre',
-      width: 'fit-content',
-      maxWidth: 'fit-content'
-    }
-  };
+var overflowStyle = {
+  overflow: {
+    display: 'inline-block',
+    whiteSpace: 'pre',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden'
+  },
+  tooltip: {
+    whiteSpace: 'pre',
+    width: 'fit-content',
+    maxWidth: 'fit-content'
+  }
 };
-var useStyles = (0, _makeStyles["default"])(overflowStyle);
-var OverflowableText = function OverflowableText(_ref) {
+var OverflowableText = (0, _system.styled)(function (_ref) {
+  var _element$current, _element$current2;
   var text = _ref.text,
     tooltipStyle = _ref.tooltipStyle,
+    tooltipSx = _ref.tooltipSx,
     className = _ref.className,
     children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var element = (0, _react.useRef)();
-  var classes = useStyles();
   var _useState = (0, _react.useState)(false),
     overflowed = _useState[0],
     setOverflowed = _useState[1];
@@ -52,26 +49,41 @@ var OverflowableText = function OverflowableText(_ref) {
     }
     setOverflowed(element.current.scrollWidth > element.current.clientWidth);
   }, [setOverflowed, element]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     checkOverflow();
-  }, [checkOverflow, text]);
-  return /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
-    title: text || '',
-    disableHoverListener: !overflowed,
+  }, [checkOverflow, text, (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.scrollWidth, (_element$current2 = element.current) === null || _element$current2 === void 0 ? void 0 : _element$current2.clientWidth]);
+  var defaultTooltipSx = !tooltipStyle ? overflowStyle.tooltip : false;
+  // the previous tooltipStyle classname API was replacing default, not
+  // merging with the defaults, so keep the same behavior with the new tooltipSx API
+  var finalTooltipSx = tooltipSx || defaultTooltipSx;
+  var tooltipStyleProps = _extends({}, tooltipStyle && {
     classes: {
-      tooltip: tooltipStyle ? tooltipStyle : classes.tooltip
+      tooltip: tooltipStyle
+    }
+  }, finalTooltipSx && {
+    slotProps: {
+      tooltip: {
+        sx: finalTooltipSx
+      }
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {
+  });
+  return /*#__PURE__*/_react["default"].createElement(_material.Tooltip, _extends({
+    title: text || '',
+    disableHoverListener: !overflowed
+  }, tooltipStyleProps /* legacy classes or newer slotProps API */), /*#__PURE__*/_react["default"].createElement(_material.Box, _extends({}, props, {
     ref: element,
     children: children || text,
-    className: (0, _clsx["default"])(className, classes.overflow)
+    className: className,
+    sx: overflowStyle.overflow
   })));
-};
+})({});
 exports.OverflowableText = OverflowableText;
 OverflowableText.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _propTypes["default"].array,
   text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].node]),
   tooltipStyle: _propTypes["default"].string,
+  tooltipSx: _propTypes["default"].object,
+  sx: _propTypes["default"].object,
   className: _propTypes["default"].string
 } : {};
 var _default = OverflowableText;

package/lib/components/ReportViewer/log-table.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
+var _system = require("@mui/system");
 var _MuiVirtualizedTable = _interopRequireDefault(require("../MuiVirtualizedTable"));
 var _styles = require("@mui/material/styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -19,27 +19,27 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 
 var SEVERITY_COLUMN_FIXED_WIDTH = 100;
-var styles = function styles(theme) {
-  return {
-    flexContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      boxSizing: 'border-box'
-    },
-    table: {
+var styles = {
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box'
+  },
+  table: function table(theme) {
+    return {
       // temporary right-to-left patch, waiting for
       // https://github.com/bvaughn/react-virtualized/issues/454
       '& .ReactVirtualized__Table__headerRow': {
         flip: false,
         paddingRight: theme.direction === 'rtl' ? '0 !important' : undefined
       }
-    },
-    header: {
-      variant: 'header'
-    }
-  };
+    };
+  },
+  header: {
+    variant: 'header'
+  }
 };
-var VirtualizedTable = (0, _withStyles["default"])(styles)(_MuiVirtualizedTable["default"]);
+var VirtualizedTable = (0, _system.styled)(_MuiVirtualizedTable["default"])(styles);
 var LogTable = function LogTable(_ref) {
   var logs = _ref.logs,
     onRowClick = _ref.onRowClick;

package/lib/components/ReportViewer/report-item.js

@@ -3,14 +3,14 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _system = require("@mui/system");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _TreeItem = _interopRequireDefault(require("@mui/lab/TreeItem"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Label = _interopRequireDefault(require("@mui/icons-material/Label"));
 var _reportTreeViewContext = _interopRequireDefault(require("./report-tree-view-context"));
-var _system = require("@mui/system");
-var _excluded = ["labelText", "labelIconColor"];
+var _excluded = ["labelText", "labelIconColor", "className"];
 /**
  * Copyright (c) 2021, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -22,96 +22,108 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 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); }
 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; }
-var useReportItemStyles = (0, _makeStyles["default"])(function (theme) {
-  return {
-    root: {
+var styles = {
+  root: function root(theme) {
+    return {
       color: theme.palette.text.secondary,
-      '&:hover > $content': {
+      '&:hover > .MuiTreeItem-content': {
         backgroundColor: theme.palette.action.hover
       }
-    },
-    content: {
+    };
+  },
+  content: function content(theme) {
+    return {
       color: theme.palette.text.secondary,
       borderRadius: theme.spacing(2),
       width: 'fit-content',
       paddingRight: theme.spacing(1),
       fontWeight: theme.typography.fontWeightMedium,
-      '&$expanded': {
+      '&.Mui-expanded': {
         fontWeight: theme.typography.fontWeightRegular
       },
-      /* &&.Mui-focused to increase specifity because mui5 has a rule for &.Mui-selected.Mui-focused */
-      /* &&$selected to increase specifity because we have a rule for &:hover > $content on root */
-      '&&.Mui-focused, &&$selected': {
+      /* &.MuiTreeItem-content.Mui-focused to increase specifity because mui5 has a rule for &.Mui-selected.Mui-focused */
+      '&.MuiTreeItem-content.Mui-focused, &.Mui-selected': {
         backgroundColor: "var(--tree-view-bg-color, " + theme.palette.action.selected + ")",
         color: 'var(--tree-view-color)'
       },
       // same as mui v4 behavior on label text only right after clicking in contrast to after moving away with arrow keys.
-      '&$selected $label:hover, &$selected.Mui-focused $label': {
+      '&.Mui-selected .MuiTreeItem-label:hover, &.Mui-selected.Mui-focused .MuiTreeItem-label': {
         borderRadius: theme.spacing(2),
         backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
       },
-      '&.Mui-focused $label, &:hover $label, &$selected $label': {
+      '&.Mui-focused .MuiTreeItem-label, &:hover .MuiTreeItem-label, &Mui-selected .MuiTreeItem-label': {
         backgroundColor: 'transparent'
       }
-    },
-    group: {
-      marginLeft: 10,
-      '& $content': {
+    };
+  },
+  group: function group(theme) {
+    return {
+      marginLeft: '10px',
+      '& .MuiTreeItem-content': {
         paddingLeft: theme.spacing(2)
       }
-    },
-    expanded: {},
-    selected: {},
-    label: {
-      fontWeight: 'inherit',
-      color: 'inherit'
-    },
-    labelRoot: {
+    };
+  },
+  expanded: {},
+  selected: {},
+  label: {
+    fontWeight: 'inherit',
+    color: 'inherit'
+  },
+  labelRoot: function labelRoot(theme) {
+    return {
       display: 'flex',
       alignItems: 'center',
       padding: theme.spacing(0.5, 0)
-    },
-    labelRootHighlighted: {
+    };
+  },
+  labelRootHighlighted: function labelRootHighlighted(theme) {
+    return {
       display: 'flex',
       alignItems: 'center',
       padding: theme.spacing(0.5, 0),
       backgroundColor: theme.palette.action.selected
-    },
-    labelIcon: {
+    };
+  },
+  labelIcon: function labelIcon(theme) {
+    return {
       marginRight: theme.spacing(1)
-    },
-    labelText: {
+    };
+  },
+  labelText: function labelText(theme) {
+    return {
       fontWeight: 'inherit',
       marginRight: theme.spacing(2)
-    }
-  };
-});
+    };
+  }
+};
 var ReportItem = function ReportItem(props) {
   // using a context because TreeItem uses useMemo on this. See report-viewer.js for the provider
   var _useContext = (0, _react.useContext)(_reportTreeViewContext["default"]),
     isHighlighted = _useContext.isHighlighted;
   var highlighted = isHighlighted ? isHighlighted(props.nodeId) : false;
-  var classes = useReportItemStyles();
   var labelText = props.labelText,
     labelIconColor = props.labelIconColor,
+    className = props.className,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_TreeItem["default"], _extends({
-    classes: {
-      root: classes.root,
-      content: classes.content,
-      expanded: classes.expanded,
-      selected: classes.selected,
-      group: classes.group,
-      label: classes.label
+    className: className,
+    sx: {
+      '&': styles.root,
+      '& .MuiTreeItem-content': styles.content,
+      '& .Mui-expanded': styles.expanded,
+      '& .Mui-selected': styles.selected,
+      '& .MuiTreeItem-group': styles.group,
+      '& .MuiTreeItem-label': styles.label
     },
-    label: /*#__PURE__*/_react["default"].createElement("div", {
-      className: highlighted ? classes.labelRootHighlighted : classes.labelRoot
+    label: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+      sx: highlighted ? styles.labelRootHighlighted : styles.labelRoot
     }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
       htmlColor: labelIconColor,
-      className: classes.labelIcon
+      sx: styles.labelIcon
     }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       variant: "body2",
-      className: classes.labelText
+      sx: styles.labelText
     }, labelText))
   }, other));
 };
@@ -121,6 +133,6 @@ ReportItem.propTypes = process.env.NODE_ENV !== "production" ? {
   labelInfo: _propTypes["default"].string,
   labelText: _propTypes["default"].string.isRequired
 } : {};
-var _default = ReportItem;
+var _default = (0, _system.styled)(ReportItem)({});
 exports["default"] = _default;
 module.exports = exports.default;