@gridsuite/commons-ui 0.16.0 → 0.19.0

package/lib/components/ElementSearchDialog/element-search-dialog.js

@@ -5,15 +5,13 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _lab = require("@material-ui/lab");
-
-var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 
 var _reactIntl = require("react-intl");
 
@@ -41,7 +39,7 @@ var styles = function styles(theme) {
   };
 };
 
-var useStyles = (0, _styles.makeStyles)(styles);
+var useStyles = (0, _makeStyles["default"])(styles);
 
 var ElementSearchDialog = function ElementSearchDialog(props) {
   var classes = useStyles();
@@ -82,14 +80,15 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
     }
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+  return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
     open: open,
     onClose: onClose,
+    disableRestoreFocus: true,
     "aria-labelledby": "dialog-title-search",
     fullWidth: true
-  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, {
+  }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, {
     className: classes.title
-  }), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_lab.Autocomplete, {
+  }), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
     id: "element-search",
     forcePopupIcon: false,
     open: expanded,
@@ -109,7 +108,7 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
     getOptionLabel: function getOptionLabel(option) {
       return option.label;
     },
-    getOptionSelected: function getOptionSelected(option, value) {
+    isOptionEqualToValue: function isOptionEqualToValue(option, value) {
       return option.id === value.id;
     },
     options: elements,
@@ -120,7 +119,7 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
     }),
     renderOption: renderElement,
     renderInput: function renderInput(params) {
-      return /*#__PURE__*/_react["default"].createElement(_core.TextField, _extends({
+      return /*#__PURE__*/_react["default"].createElement(_material.TextField, _extends({
         autoFocus: true
       }, params, {
         label: searchingLabel || intl.formatMessage({

package/lib/components/Login/Login.js

@@ -5,21 +5,21 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _Link = _interopRequireDefault(require("@material-ui/core/Link"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
 
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
-var _LockOutlined = _interopRequireDefault(require("@material-ui/icons/LockOutlined"));
+var _LockOutlined = _interopRequireDefault(require("@mui/icons-material/LockOutlined"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
-var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _reactIntl = require("react-intl");
 
@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * 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/.
  */
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles["default"])(function (theme) {
   return {
     paper: {
       marginTop: theme.spacing(8),
@@ -87,7 +87,6 @@ var Login = function Login(_ref) {
     disabled: disabled,
     fullWidth: true,
     variant: "contained",
-    color: "primary",
     className: classes.submit,
     onClick: onLoginClick
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {

package/lib/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -9,23 +9,23 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx3 = _interopRequireDefault(require("clsx"));
 
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 
 var _reactVirtualized = require("react-virtualized");
 
-var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
+var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
-var _GetApp = _interopRequireDefault(require("@material-ui/icons/GetApp"));
+var _GetApp = _interopRequireDefault(require("@mui/icons-material/GetApp"));
 
 var _reactCsvDownloader = _interopRequireDefault(require("react-csv-downloader"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _reactIntl = require("react-intl");
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _excluded = ["name", "classes", "rows", "columns", "rowHeight", "headerHeight", "rowCount", "sortable", "enableExportCSV"],
     _excluded2 = ["dataKey"];
@@ -454,7 +454,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       columns: csvHeaders,
       filename: this.getCSVFilename()
     }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-      "aria-label": "exportCSVButton"
+      "aria-label": "exportCSVButton",
+      size: "large"
     }, /*#__PURE__*/_react["default"].createElement(_GetApp["default"], null)))), /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         flexGrow: 1
@@ -543,6 +544,6 @@ MuiVirtualizedTable.propTypes = process.env.NODE_ENV !== "production" ? {
   sort: _propTypes["default"].func
 } : {};
 
-var _default = (0, _styles.withStyles)(defaultStyles)(MuiVirtualizedTable);
+var _default = (0, _withStyles["default"])(defaultStyles)(MuiVirtualizedTable);
 
 exports["default"] = _default;

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

@@ -5,11 +5,11 @@ exports["default"] = exports.OverflowableText = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
@@ -41,7 +41,7 @@ var overflowStyle = function overflowStyle(theme) {
   };
 };
 
-var useStyles = (0, _styles.makeStyles)(overflowStyle);
+var useStyles = (0, _makeStyles["default"])(overflowStyle);
 
 var OverflowableText = function OverflowableText(_ref) {
   var text = _ref.text,
@@ -63,7 +63,7 @@ var OverflowableText = function OverflowableText(_ref) {
   (0, _react.useEffect)(function () {
     checkOverflow();
   }, [checkOverflow]);
-  return /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
+  return /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
     title: text || '',
     disableHoverListener: !overflowed,
     classes: {

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

@@ -7,9 +7,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntl = require("react-intl");
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 
 var _MuiVirtualizedTable = _interopRequireDefault(require("../MuiVirtualizedTable"));
 
@@ -48,7 +48,7 @@ var styles = function styles(theme) {
   };
 };
 
-var VirtualizedTable = (0, _styles.withStyles)(styles)(_MuiVirtualizedTable["default"]);
+var VirtualizedTable = (0, _withStyles["default"])(styles)(_MuiVirtualizedTable["default"]);
 
 var LogTable = function LogTable(_ref) {
   var logs = _ref.logs;

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

@@ -7,13 +7,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
-var _TreeItem = _interopRequireDefault(require("@material-ui/lab/TreeItem"));
+var _TreeItem = _interopRequireDefault(require("@mui/lab/TreeItem"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _Label = _interopRequireDefault(require("@material-ui/icons/Label"));
+var _Label = _interopRequireDefault(require("@mui/icons-material/Label"));
 
 var _excluded = ["labelText", "labelIconColor"];
 
@@ -23,7 +23,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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, _styles.makeStyles)(function (theme) {
+var useReportItemStyles = (0, _makeStyles["default"])(function (theme) {
   return {
     root: {
       color: theme.palette.text.secondary,

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

@@ -5,19 +5,19 @@ exports["default"] = ReportViewer;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
-var _TreeView = _interopRequireDefault(require("@material-ui/lab/TreeView"));
+var _TreeView = _interopRequireDefault(require("@mui/lab/TreeView"));
 
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 
-var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+var _ArrowRight = _interopRequireDefault(require("@mui/icons-material/ArrowRight"));
 
 var _reportItem = _interopRequireDefault(require("./report-item"));
 
 var _logReport = _interopRequireDefault(require("./log-report"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 
 var _logTable = _interopRequireDefault(require("./log-table"));
 
@@ -34,7 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 var MAX_SUB_REPORTS = 500;
-var useStyles = (0, _styles.makeStyles)({
+var useStyles = (0, _makeStyles["default"])({
   treeView: {
     height: '100%',
     overflow: 'scroll'

package/lib/components/ReportViewerDialog/report-viewer-dialog.js

@@ -5,21 +5,21 @@ exports["default"] = ReportViewerDialog;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _Fullscreen = _interopRequireDefault(require("@material-ui/icons/Fullscreen"));
+var _Fullscreen = _interopRequireDefault(require("@mui/icons-material/Fullscreen"));
 
-var _FullscreenExit = _interopRequireDefault(require("@material-ui/icons/FullscreenExit"));
+var _FullscreenExit = _interopRequireDefault(require("@mui/icons-material/FullscreenExit"));
 
 var _reactIntl = require("react-intl");
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
 var _ReportViewer = _interopRequireDefault(require("../ReportViewer"));
 
@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * 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/.
  */
-var useStyles = (0, _styles.makeStyles)({
+var useStyles = (0, _makeStyles["default"])({
   fullScreenIcon: {
     cursor: 'pointer'
   },
@@ -63,7 +63,7 @@ function ReportViewerDialog(props) {
     setFullScreen(false);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+  return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
     open: open,
     onClose: onClose,
     fullScreen: fullScreen,
@@ -73,7 +73,7 @@ function ReportViewerDialog(props) {
     classes: {
       paperFullWidth: classes.paperFullWidth
     }
-  }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, title), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, {
+  }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, title), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, {
     dividers: true
   }, /*#__PURE__*/_react["default"].createElement(_ReportViewer["default"], {
     jsonReport: jsonReport

package/lib/components/SnackbarProvider/SnackbarProvider.js

@@ -5,7 +5,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _notistack = require("notistack");
 

package/lib/components/TopBar/TopBar.js

@@ -7,65 +7,69 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntl = require("react-intl");
 
-var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
 
-var _ExitToApp = _interopRequireDefault(require("@material-ui/icons/ExitToApp"));
+var _ExitToApp = _interopRequireDefault(require("@mui/icons-material/ExitToApp"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
-var _Settings = _interopRequireDefault(require("@material-ui/icons/Settings"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
+var _Settings = _interopRequireDefault(require("@mui/icons-material/Settings"));
 
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
 
-var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 
-var _Apps = _interopRequireDefault(require("@material-ui/icons/Apps"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 
-var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 
-var _FullscreenExit = _interopRequireDefault(require("@material-ui/icons/FullscreenExit"));
+var _Apps = _interopRequireDefault(require("@mui/icons-material/Apps"));
 
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 
-var _ArrowDropUp = _interopRequireDefault(require("@material-ui/icons/ArrowDropUp"));
+var _FullscreenExit = _interopRequireDefault(require("@mui/icons-material/FullscreenExit"));
 
-var _Person = _interopRequireDefault(require("@material-ui/icons/Person"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 
-var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
+var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
 
-var _Brightness = _interopRequireDefault(require("@material-ui/icons/Brightness3"));
+var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
 
-var _WbSunny = _interopRequireDefault(require("@material-ui/icons/WbSunny"));
+var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
 
-var _Computer = _interopRequireDefault(require("@material-ui/icons/Computer"));
+var _Brightness = _interopRequireDefault(require("@mui/icons-material/Brightness3"));
 
-var _ToggleButton = _interopRequireDefault(require("@material-ui/lab/ToggleButton"));
+var _WbSunny = _interopRequireDefault(require("@mui/icons-material/WbSunny"));
 
-var _ToggleButtonGroup = _interopRequireDefault(require("@material-ui/lab/ToggleButtonGroup"));
+var _Computer = _interopRequireDefault(require("@mui/icons-material/Computer"));
+
+var _ToggleButton = _interopRequireDefault(require("@mui/material/ToggleButton"));
+
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Fullscreen = _interopRequireDefault(require("@material-ui/icons/Fullscreen"));
+var _Fullscreen = _interopRequireDefault(require("@mui/icons-material/Fullscreen"));
 
 var _reactRequestFullscreen = _interopRequireWildcard(require("react-request-fullscreen"));
 
-var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
-var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 
-var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
 
 var _clsx3 = _interopRequireDefault(require("clsx"));
 
@@ -79,7 +83,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || 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); }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles["default"])(function (theme) {
   return {
     grow: {
       flexGrow: 1,
@@ -128,7 +132,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       borderTop: '1px solid #ccc'
     },
     settingsMenu: {
-      maxWidth: '385px'
+      maxWidth: '385px',
+      zIndex: 60
     },
     sizeLabel: {
       fontSize: '16px'
@@ -153,14 +158,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     }
   };
 });
-var StyledMenu = (0, _styles.withStyles)({
+var StyledMenu = (0, _withStyles["default"])({
   paper: {
     border: '1px solid #d3d4d5'
   }
 })(function (props) {
   return /*#__PURE__*/_react["default"].createElement(_Menu["default"], _extends({
     elevation: 0,
-    getContentAnchorEl: null,
     anchorOrigin: {
       vertical: 'bottom',
       horizontal: 'center'
@@ -171,7 +175,7 @@ var StyledMenu = (0, _styles.withStyles)({
     }
   }, props));
 });
-var StyledMenuItem = (0, _styles.withStyles)(function (theme) {
+var StyledMenuItem = (0, _withStyles["default"])(function (theme) {
   return {
     root: {
       '&:focus': {
@@ -183,7 +187,7 @@ var StyledMenuItem = (0, _styles.withStyles)(function (theme) {
     }
   };
 })(_MenuItem["default"]);
-var CustomListItemIcon = (0, _styles.withStyles)(function (theme) {
+var CustomListItemIcon = (0, _withStyles["default"])(function (theme) {
   return {
     root: {
       minWidth: '30px',
@@ -232,9 +236,7 @@ var TopBar = function TopBar(_ref) {
       language = _ref.language;
   var classes = useStyles();
 
-  var anchorRef = _react["default"].useRef(null);
-
-  var _React$useState = _react["default"].useState(false),
+  var _React$useState = _react["default"].useState(null),
       anchorElSettingsMenu = _React$useState[0],
       setAnchorElSettingsMenu = _React$useState[1];
 
@@ -249,25 +251,19 @@ var TopBar = function TopBar(_ref) {
       setIsFullScreen = _useState[1];
 
   var _useState2 = (0, _react.useState)(false),
-      isMenuOpen = _useState2[0],
-      setMenuOpen = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      isDialogSearchOpen = _useState3[0],
-      setDialogSearchOpen = _useState3[1];
+      isDialogSearchOpen = _useState2[0],
+      setDialogSearchOpen = _useState2[1];
 
   var handleClickElementSearch = function handleClickElementSearch() {
     setDialogSearchOpen(true);
   };
 
-  var handleToggleSettingsMenu = function handleToggleSettingsMenu() {
-    setAnchorElSettingsMenu(true);
-    setMenuOpen(true);
+  var handleToggleSettingsMenu = function handleToggleSettingsMenu(event) {
+    setAnchorElSettingsMenu(event.currentTarget);
   };
 
   var handleCloseSettingsMenu = function handleCloseSettingsMenu() {
-    setAnchorElSettingsMenu(false);
-    setMenuOpen(false);
+    setAnchorElSettingsMenu(null);
   };
 
   var handleClickAppsMenu = function handleClickAppsMenu(event) {
@@ -279,20 +275,20 @@ var TopBar = function TopBar(_ref) {
   };
 
   var onParametersClicked = function onParametersClicked() {
-    setAnchorElSettingsMenu(false);
+    setAnchorElSettingsMenu(null);
 
     if (onParametersClick) {
       onParametersClick();
     }
   };
 
-  function onFullScreenChange(isFullScreen) {
-    setAnchorElSettingsMenu(false);
+  function onFullScreenChange(isFullScreenValue) {
+    setAnchorElSettingsMenu(null);
     setIsFullScreen(isFullScreen);
   }
 
   function requestOrExitFullScreen() {
-    setAnchorElSettingsMenu(false);
+    setAnchorElSettingsMenu(null);
     fullScreenRef.current.fullScreen();
   }
 
@@ -386,11 +382,13 @@ var TopBar = function TopBar(_ref) {
     elementsFound: elementsFound,
     renderElement: renderElement
   }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    color: "inherit",
     onClick: handleClickElementSearch
   }, /*#__PURE__*/_react["default"].createElement(_Search["default"], null)))), user && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     "aria-controls": "apps-menu",
     "aria-haspopup": "true",
-    onClick: handleClickAppsMenu
+    onClick: handleClickAppsMenu,
+    color: "inherit"
   }, /*#__PURE__*/_react["default"].createElement(_Apps["default"], null)), /*#__PURE__*/_react["default"].createElement(StyledMenu, {
     id: "apps-menu",
     anchorEl: anchorElAppsMenu,
@@ -419,12 +417,12 @@ var TopBar = function TopBar(_ref) {
       }
     }, item.name))));
   }))), user && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    ref: anchorRef,
     "aria-controls": "settings-menu",
     "aria-haspopup": "true",
     className: classes.showHideMenu,
     onClick: handleToggleSettingsMenu,
-    style: isMenuOpen ? {
+    color: "inherit",
+    style: Boolean(anchorElSettingsMenu) ? {
       cursor: 'initial'
     } : {
       cursor: 'pointer'
@@ -437,9 +435,8 @@ var TopBar = function TopBar(_ref) {
     className: classes.arrowIcon
   })), /*#__PURE__*/_react["default"].createElement(_Popper["default"], {
     className: classes.settingsMenu,
-    open: anchorElSettingsMenu,
-    anchorEl: anchorRef.current,
-    transition: true
+    open: Boolean(anchorElSettingsMenu),
+    anchorEl: anchorElSettingsMenu
   }, /*#__PURE__*/_react["default"].createElement(_Paper["default"], null, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
     onClickAway: handleCloseSettingsMenu
   }, /*#__PURE__*/_react["default"].createElement(_MenuList["default"], {

package/lib/components/TreeViewFinder/TreeViewFinder.js

@@ -9,31 +9,31 @@ var _reactIntl = require("react-intl");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 
-var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
 
-var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _TreeItem = _interopRequireDefault(require("@material-ui/lab/TreeItem"));
+var _TreeItem = _interopRequireDefault(require("@mui/lab/TreeItem"));
 
-var _TreeView = _interopRequireDefault(require("@material-ui/lab/TreeView"));
+var _TreeView = _interopRequireDefault(require("@mui/lab/TreeView"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 
-var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
 
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -327,7 +327,7 @@ TreeViewFinder.defaultProps = {
   multiselect: false
 };
 
-var _default = (0, _styles.withStyles)(defaultStyles)(TreeViewFinder);
+var _default = (0, _withStyles["default"])(defaultStyles)(TreeViewFinder);
 
 exports["default"] = _default;
 module.exports = exports.default;

package/lib/index.js

@@ -35,6 +35,10 @@ var _OverflowableText2 = _interopRequireDefault(require("./components/Overflowab
 
 exports.OverflowableText = _OverflowableText2["default"];
 
+var _ElementSearchDialog2 = _interopRequireDefault(require("./components/ElementSearchDialog"));
+
+exports.ElementSearchDialog = _ElementSearchDialog2["default"];
+
 var _EquipmentType = require("./utils/EquipmentType");
 
 exports.EQUIPMENT_TYPE = _EquipmentType.EQUIPMENT_TYPE;

package/lib/utils/ElementType.js

@@ -6,11 +6,11 @@ exports.elementType = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _LibraryBooksOutlined = _interopRequireDefault(require("@material-ui/icons/LibraryBooksOutlined"));
+var _LibraryBooksOutlined = _interopRequireDefault(require("@mui/icons-material/LibraryBooksOutlined"));
 
-var _Description = _interopRequireDefault(require("@material-ui/icons/Description"));
+var _Description = _interopRequireDefault(require("@mui/icons-material/Description"));
 
-var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));
+var _FilterList = _interopRequireDefault(require("@mui/icons-material/FilterList"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

package/lib/utils/EquipmentType.js

@@ -17,12 +17,8 @@ var _OverflowableText = _interopRequireDefault(require("../components/Overflowab
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/**
- * Copyright (c) 2021, 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/.
- */
+function _extends() { _extends = Object.assign || 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); }
+
 var TYPE_TAG_MAX_SIZE = '90px';
 exports.TYPE_TAG_MAX_SIZE = TYPE_TAG_MAX_SIZE;
 var VL_TAG_MAX_SIZE = '100px';
@@ -44,7 +40,7 @@ var equipmentStyles = function equipmentStyles(theme) {
       padding: '4px',
       fontSize: 'x-small',
       textAlign: 'center',
-      color: theme === _TopBar.LIGHT_THEME ? 'inherit' : theme.palette.common.black
+      color: theme === _TopBar.LIGHT_THEME ? 'inherit' : 'black'
     },
     equipmentTypeTag: {
       minWidth: TYPE_TAG_MAX_SIZE,
@@ -156,11 +152,13 @@ var getEquipmentsInfosForSearchBar = function getEquipmentsInfosForSearchBar(equ
     return e.type === 'SUBSTATION' ? [{
       label: label,
       id: e.id,
+      key: e.id,
       type: e.type
     }] : e.voltageLevels.map(function (vli) {
       return {
         label: label,
         id: e.id,
+        key: e.id + '_' + vli.id,
         type: e.type,
         voltageLevelLabel: equipmentLabelling ? vli.name : vli.id,
         voltageLevelId: vli.id
@@ -176,14 +174,18 @@ var sortEquipments = function sortEquipments(a, b) {
 };
 
 var renderEquipmentForSearchBar = function renderEquipmentForSearchBar(classes, intl) {
-  return function (element, _ref) {
+  return function (props, element, _ref) {
     var inputValue = _ref.inputValue;
     var matches = (0, _match["default"])(element.label, inputValue, {
       insideWords: true,
       findAllOccurrences: true
     });
     var parts = (0, _parse["default"])(element.label, matches);
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    /* override li.key otherwise it will use label which could be duplicated */
+
+    return /*#__PURE__*/_react["default"].createElement("li", _extends({}, props, {
+      key: element.key
+    }), /*#__PURE__*/_react["default"].createElement("div", {
       className: classes.equipmentOption
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _clsx["default"])(classes.equipmentTag, classes.equipmentTypeTag)
@@ -204,7 +206,7 @@ var renderEquipmentForSearchBar = function renderEquipmentForSearchBar(classes,
     })), element.type !== EQUIPMENT_TYPE.SUBSTATION.name && element.type !== EQUIPMENT_TYPE.VOLTAGE_LEVEL.name && /*#__PURE__*/_react["default"].createElement(_OverflowableText["default"], {
       text: element.voltageLevelLabel,
       className: (0, _clsx["default"])(classes.equipmentTag, classes.equipmentVlTag)
-    }));
+    })));
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.16.0",
+    "version": "0.19.0",
     "description": "common react components for gridsuite applications",
     "main": "lib/index.js",
     "files": [
@@ -31,19 +31,26 @@
         "react-virtualized": "^9.21.2"
     },
     "peerDependencies": {
-        "notistack": "^1.0.1",
+        "@emotion/react": "^11.8.1",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.5.0",
+        "@mui/lab": "^5.0.0-alpha.72",
+        "@mui/material": "^5.5.0",
+        "@mui/styles": "^5.5.0",
+        "notistack": "^2.0.3",
         "react-router": "^5.1.2",
         "react-router-dom": "^5.1.2",
-        "@material-ui/icons": "^4.5.1",
-        "@material-ui/core": "^4.9.5",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
         "react-intl": "^5.0.0"
     },
     "devDependencies": {
-        "@material-ui/core": "^4.9.5",
-        "@material-ui/icons": "^4.5.1",
-        "@material-ui/lab": "^4.0.0-alpha.56",
+        "@emotion/react": "^11.8.1",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.5.0",
+        "@mui/lab": "^5.0.0-alpha.72",
+        "@mui/material": "^5.5.0",
+        "@mui/styles": "^5.5.0",
         "babel-eslint": "^10.1.0",
         "bufferutil": "^4.0.1",
         "eslint": "^7.9.0",
@@ -57,7 +64,7 @@
         "eslint-plugin-react": "^7.21.0",
         "eslint-plugin-react-hooks": "^4.1.2",
         "inferno": "^7.4.2",
-        "notistack": "^1.0.1",
+        "notistack": "^2.0.3",
         "nwb": "^0.25.x",
         "prettier": "^2.0.0",
         "puppeteer": "^10.0.0",