@reltio/components 1.4.1588 → 1.4.1590

package/esm/components/TenantsDropDownSelector/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     menuButtonRoot: {
         padding: 0

package/esm/components/Title/Title.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import classnames from 'classnames';
 import RequiredMark from '../RequiredMark/RequiredMark';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { useStyles } from './styles';
 var Title = function (_a) {
     var label = _a.label, isRequired = _a.isRequired, className = _a.className, otherProps = __rest(_a, ["label", "isRequired", "className"]);

package/esm/components/Title/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label">;

package/esm/components/Title/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     label: {
         color: 'rgba(0,0,0,0.6)',

package/esm/components/UploadFileButton/UploadFileButton.js

@@ -1,11 +1,11 @@
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import CancelIcon from '@material-ui/icons/Cancel';
+import CircularProgress from '@mui/material/CircularProgress';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import CancelIcon from '@mui/icons-material/Cancel';
 import { getLabel, getRequestErrorMessage } from '@reltio/mdm-sdk';
 import ErrorPopup from '../ErrorPopup/ErrorPopup';
 import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
@@ -38,7 +38,7 @@ var UploadMode = function (_a) {
         event.preventDefault();
     };
     return (React.createElement(Fragment, null,
-        React.createElement(Button, { variant: "contained", onClick: onSelectFileClick }, i18n.text('Select File')),
+        React.createElement(Button, { variant: "contained", onClick: onSelectFileClick, className: styles.button }, i18n.text('Select File')),
         React.createElement("input", { type: "file", className: styles.fileUploaderInput, onChange: onUploadListener, ref: fileUploader, name: "uploadfile", accept: supportedFileTypesString })));
 };
 UploadMode.propTypes = {
@@ -82,7 +82,7 @@ var UploadFileButton = function (_a) {
         case MODES.UPLOADED: {
             var label = getLabel(name);
             return (React.createElement("div", { className: styles.uploaded },
-                React.createElement(ExpandedValueTooltip, { value: label }, isValidLink ? (React.createElement(Link, { href: link, className: styles.label }, label)) : (React.createElement(Typography, { variant: "inherit", className: styles.label }, label))),
+                React.createElement(ExpandedValueTooltip, { value: label }, isValidLink ? (React.createElement(Link, { href: link, className: styles.label, underline: "hover" }, label)) : (React.createElement(Typography, { variant: "inherit", className: styles.label }, label))),
                 React.createElement(CancelIcon, { onClick: switchToInitMode, onMouseDown: switchToInitMode, onTouchEnd: switchToInitMode, className: styles.cancelIcon })));
         }
         case MODES.UPLOADING:

package/esm/components/UploadFileButton/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "fileUploaderInput" | "uploaded" | "cancelIcon">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "button" | "fileUploaderInput" | "uploaded" | "cancelIcon">;

package/esm/components/UploadFileButton/styles.js

@@ -1,5 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
+    button: {
+        '&:hover': {
+            backgroundColor: '#d5d5d5'
+        }
+    },
     fileUploaderInput: {
         display: 'none'
     },

package/esm/components/UploadImageDialog/DividerWithText/DividerWithText.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { useStyles } from './styles';
 export var DividerWithText = function (_a) {
     var children = _a.children, className = _a.className;

package/esm/components/UploadImageDialog/DividerWithText/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"border" | "text" | "root">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"text" | "border" | "root">;

package/esm/components/UploadImageDialog/DividerWithText/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     root: {
         width: '100%',

package/esm/components/UploadImageDialog/ErrorSnackbar/ErrorSnackbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import CloseIcon from '@material-ui/icons/Close';
-import Snackbar from '@material-ui/core/Snackbar';
+import CloseIcon from '@mui/icons-material/Close';
+import Snackbar from '@mui/material/Snackbar';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { useStyles } from './styles';
 export var ErrorSnackbar = function (_a) {

package/esm/components/UploadImageDialog/ErrorSnackbar/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"closeIcon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"closeIcon">;

package/esm/components/UploadImageDialog/ErrorSnackbar/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     closeIcon: {
         color: '#fff'

package/esm/components/UploadImageDialog/ImageByUrlField/ImageByUrlField.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import i18n from 'ui-i18n';
-import Box from '@material-ui/core/Box';
-import Paper from '@material-ui/core/Paper';
-import InputBase from '@material-ui/core/InputBase';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import InputBase from '@mui/material/InputBase';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import { useStyles } from './styles';
 var isEmptyField = function (value) { return value.trim().length === 0; };
 export var ImageByUrlField = function (_a) {

package/esm/components/UploadImageDialog/ImageByUrlField/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "input" | "errorMessage" | "paper" | "inputRoot">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"errorMessage" | "input" | "root" | "inputRoot" | "paper">;

package/esm/components/UploadImageDialog/ImageByUrlField/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     root: {
         width: '328px'

package/esm/components/UploadImageDialog/SelectImageButton/SelectImageButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { IMAGE_TYPES } from '../constants';
 export var SelectImageButton = function (_a) {
     var className = _a.className, onAppendFile = _a.onAppendFile;

package/esm/components/UploadImageDialog/TargetBox/TargetBox.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import { useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { SelectImageButton } from '../SelectImageButton/SelectImageButton';
 import UploadIcon from '../../../icons/UploadIcon';
 import { MAX_IMAGE_SIZE } from '../constants';

package/esm/components/UploadImageDialog/TargetBox/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "root" | "title" | "description" | "isActive">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "description" | "icon" | "root" | "isActive">;

package/esm/components/UploadImageDialog/TargetBox/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     root: {
         padding: '36px 0 29px'

package/esm/components/UploadImageDialog/UploadImageDialog.js

@@ -3,9 +3,9 @@ import i18n from 'ui-i18n';
 import { useSelector } from 'react-redux';
 import { uploadImage as uploadImageRequest, getRequestErrorMessage } from '@reltio/mdm-sdk';
 import mdm from '@reltio/mdm-module';
-import Box from '@material-ui/core/Box';
-import Dialog from '@material-ui/core/Dialog';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import Typography from '@mui/material/Typography';
 import LinearLoadIndicator from '../LinearLoadIndicator/LinearLoadIndicator';
 import { ImageByUrlField } from './ImageByUrlField/ImageByUrlField';
 import { TargetBox } from './TargetBox/TargetBox';

package/esm/components/UploadImageDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "body" | "title" | "divider" | "dialogPaper" | "targetBox">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "body" | "root" | "divider" | "dialogPaper" | "targetBox">;

package/esm/components/UploadImageDialog/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     root: {},
     dialogPaper: {

package/esm/components/UserSelector/UserSelector.js

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import { defaultTo, pipe, pluck } from 'ramda';
 import classnames from 'classnames';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import MultiSelect from '../ReactSelect/MultiSelect';
 import DropdownIndicatorWithIconButton from '../commonReactSelectComponents/DropdownIndicatorWithIconButton';
 import { getAllUsersForTenant, utils } from '@reltio/mdm-sdk';

package/esm/components/UserSelector/styles.d.ts

@@ -3,4 +3,4 @@ export declare const customStyles: {
     loadingMessage: (currentStyles: any) => any;
     menuPortal: (currentStyles: any) => any;
 };
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "title" | "option" | "dropDownInput">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "option" | "root" | "dropDownInput">;

package/esm/components/UserSelector/styles.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var customStyles = {
     input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); },
     loadingMessage: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); },

package/esm/components/ValueChip/ValueChip.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import PropTypes from 'prop-types';
-import Chip from '@material-ui/core/Chip';
+import Chip from '@mui/material/Chip';
 import { useStyles, useChipStyles } from './styles';
 import { mergeClasses } from '../../core/utils';
 import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';

package/esm/components/ValueChip/styles.d.ts

@@ -1,2 +1,2 @@
-export const useChipStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "label" | "deleteIcon">;
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"count" | "label" | "container">;
+export const useChipStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "root" | "deleteIcon">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "count" | "container">;

package/esm/components/ValueChip/styles.js

@@ -1,18 +1,19 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var margin = 2;
 export var useChipStyles = makeStyles({
     root: {
         height: '28px',
         backgroundColor: 'rgba(43, 152, 240, 0.12)',
         maxWidth: "calc(100% - ".concat(margin * 2, "px)"),
-        margin: "".concat(margin, "px")
-    },
-    deleteIcon: {
-        height: 18,
-        width: 18,
-        color: 'rgba(0,0,0,0.38)',
-        marginRight: '8px'
+        margin: "".concat(margin, "px"),
+        '& $deleteIcon': {
+            height: 18,
+            width: 18,
+            color: 'rgba(0,0,0,0.38)',
+            marginRight: '8px'
+        }
     },
+    deleteIcon: {},
     label: {
         overflow: 'hidden'
     }

package/esm/components/VerticalHeadingsTable/TableCell/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"hidden">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"hidden">;

package/esm/components/VerticalHeadingsTable/TableCell/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     hidden: {
         display: 'none'

package/esm/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import classnames from 'classnames';
-import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { DndItemTypes } from '../types';

package/esm/components/VerticalHeadingsTable/TableCellWithDnd/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"hidden" | "tableData" | "dragIndicator" | "dragIndicatorIcon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"hidden" | "tableData" | "dragIndicator" | "dragIndicatorIcon">;

package/esm/components/VerticalHeadingsTable/TableCellWithDnd/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     tableData: {
         position: 'relative',

package/esm/components/VerticalHeadingsTable/TableColumnDragLayer/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dragLayer">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragLayer">;

package/esm/components/VerticalHeadingsTable/TableColumnDragLayer/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     dragLayer: {
         position: 'fixed',

package/esm/components/VerticalHeadingsTable/TableHeadCell/TableHeadCell.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { DefaultHeadCellRenderer } from '../helpers';
 import { useStyles } from './styles';
 export var TableHeadCell = function (_a) {

package/esm/components/VerticalHeadingsTable/TableHeadCell/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dragIndicator" | "dragIndicatorIcon" | "tableHead">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragIndicator" | "dragIndicatorIcon" | "tableHead">;

package/esm/components/VerticalHeadingsTable/TableHeadCell/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     tableHead: {
         position: 'relative',

package/esm/components/ViewMoreToggle/ViewMoreToggle.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from '@material-ui/core/Link';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import Link from '@mui/material/Link';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useStyles } from './styles';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';

package/esm/components/ViewMoreToggle/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"arrow" | "viewMoreLessLink" | "rotated">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"arrow" | "viewMoreLessLink" | "rotated">;

package/esm/components/ViewMoreToggle/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     viewMoreLessLink: {
         display: 'flex',

package/esm/components/VirtualGroupedList/VirtualGroupedList.js

@@ -163,10 +163,7 @@ var VirtualGroupedList = function (_a) {
             setTitleTopMargin(topMargin);
         }
     };
-    var _getItemSize = useCallback(function (index) { return getItemSize(index, getItemByIndex(index).item); }, [
-        getItemByIndex,
-        getItemSize
-    ]);
+    var _getItemSize = useCallback(function (index) { return getItemSize(index, getItemByIndex(index).item); }, [getItemByIndex, getItemSize]);
     var render = useCallback(function (_a) {
         var index = _a.index, style = _a.style, data = _a.data;
         var listItem = getItemByIndex(index);

package/esm/components/VirtualGroupedList/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"stickyTitlesWrapper">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"stickyTitlesWrapper">;

package/esm/components/VirtualGroupedList/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     stickyTitlesWrapper: {
         position: 'absolute',

package/esm/components/activityLog/ActivityExportButton/ActivityExportButton.js

@@ -1,10 +1,10 @@
 import React, { useMemo, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
-import Portal from '@material-ui/core/Portal';
-import Snackbar from '@material-ui/core/Snackbar';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import Button from '@mui/material/Button';
+import Portal from '@mui/material/Portal';
+import Snackbar from '@mui/material/Snackbar';
+import GetAppIcon from '@mui/icons-material/GetApp';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import ErrorPopup from '../../ErrorPopup/ErrorPopup';
 import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
@@ -52,6 +52,6 @@ var ActivityExportButton = function (_a) {
                 className: styles.icon
             }, menuItems: menuItems, menuId: "export-menu" })) : (React.createElement(SmallIconButtonWithTooltip, { icon: GetAppIcon, size: "L", onClick: function () { return handleClickExport(); }, tooltipTitle: i18n.text('Export'), className: styles.icon })),
         React.createElement(Portal, { container: document.body },
-            React.createElement(Snackbar, { open: showSnackbar, autoHideDuration: 5000, className: styles.snackbar, onClose: function () { return setShowSnackbar(false); }, message: i18n.text('Export operation is currently in progress. You will receive an email notification once completed. Go to Export Application to view the status.'), action: React.createElement(Button, { className: styles.exportButton, onClick: handleOpenAppClick }, i18n.text('Export application')) }))));
+            React.createElement(Snackbar, { open: showSnackbar, autoHideDuration: 5000, className: styles.snackbar, onClose: function () { return setShowSnackbar(false); }, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, message: i18n.text('Export operation is currently in progress. You will receive an email notification once completed. Go to Export Application to view the status.'), action: React.createElement(Button, { className: styles.exportButton, onClick: handleOpenAppClick }, i18n.text('Export application')) }))));
 };
 export default ActivityExportButton;

package/esm/components/activityLog/ActivityExportButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "snackbar" | "exportButton">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "snackbar" | "exportButton">;

package/esm/components/activityLog/ActivityExportButton/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     snackbar: {
         maxWidth: 500

package/esm/components/activityLog/ActivityFilterButton/ActivityFilterButton.js

@@ -14,7 +14,7 @@ import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import { always, equals, evolve, pipe, mergeRight, unless } from 'ramda';
 import { isDateRangeValid } from '@reltio/mdm-sdk';
-import FilterListIcon from '@material-ui/icons/FilterList';
+import FilterListIcon from '@mui/icons-material/FilterList';
 import ActivityFilterEditor from '../ActivityFilterEditor/ActivityFilterEditor';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { useStyles } from './styles';

package/esm/components/activityLog/ActivityFilterButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon">;

package/esm/components/activityLog/ActivityFilterButton/styles.js

@@ -1,9 +1,10 @@
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { alpha } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     icon: {
         margin: '4px',
         '&.activeIcon': {
-            backgroundColor: fade(theme.palette.primary.main, 0.12),
+            backgroundColor: alpha(theme.palette.primary.main, 0.12),
             color: theme.palette.primary.main
         }
     }

package/esm/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.js

@@ -3,9 +3,9 @@ import { curry, pipe, assoc, when, mergeLeft, always } from 'ramda';
 import { useSelector } from 'react-redux';
 import mdmModule from '@reltio/mdm-module';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
-import Popover from '@material-ui/core/Popover';
-import Divider from '@material-ui/core/Divider';
+import Button from '@mui/material/Button';
+import Popover from '@mui/material/Popover';
+import Divider from '@mui/material/Divider';
 import { ActivityTypes } from '../types';
 import { getSelectorActivityTypes } from './utils/getSelectorActivityTypes';
 import ActivitySelector from './ActivitySelector';

package/esm/components/activityLog/ActivityFilterEditor/ActivitySelector.js

@@ -2,7 +2,7 @@ import React from 'react';
 import i18n from 'ui-i18n';
 import { defaultTo, pipe, pluck, sortBy } from 'ramda';
 import classnames from 'classnames';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { ActivityTypes } from '../types/ActivityTypes';
 import MultiSelect from '../../ReactSelect/MultiSelect';
 import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';

package/esm/components/activityLog/ActivityFilterEditor/DateRangeSelector.js

@@ -14,10 +14,10 @@ import i18n from 'ui-i18n';
 import { pipe } from 'ramda';
 import classnames from 'classnames';
 import { DateRangeTypes } from '@reltio/mdm-sdk';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Typography from '@material-ui/core/Typography';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Typography from '@mui/material/Typography';
 import DateIntervalSelector from '../../DateIntervalSelector/DateIntervalSelector';
 import { getValue } from '../../../core/utils';
 import CustomDateRangeEditor from '../../editors/CustomDateRangeEditor/CustomDateRangeEditor';

package/esm/components/activityLog/ActivityFilterEditor/EntityTypesSelector.js

@@ -2,7 +2,7 @@ import React from 'react';
 import i18n from 'ui-i18n';
 import { defaultTo, pipe, pluck, sortBy } from 'ramda';
 import classnames from 'classnames';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import MultiSelect from '../../ReactSelect/MultiSelect';
 import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
 import { customStyles, useStyles } from './styles';

package/esm/components/activityLog/ActivityFilterEditor/SourceSelector.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import i18n from 'ui-i18n';
 import { defaultTo, pipe, sortBy, prop } from 'ramda';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import MultiSelect from '../../ReactSelect/MultiSelect';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';

package/esm/components/activityLog/ActivityFilterEditor/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const customStyles: {
     input: (currentStyles: any) => any;
 };
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "labels" | "container" | "divider" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "filterControls" | "clearButton" | "selectorWrapper" | "selectorsGroup" | "selectorHint">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"option" | "labels" | "container" | "divider" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "filterControls" | "clearButton" | "selectorWrapper" | "selectorsGroup" | "selectorHint">;

package/esm/components/activityLog/ActivityFilterEditor/styles.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var customStyles = {
     input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); }
 };

package/esm/components/activityLog/ActivityLog/ActivityLog.js

@@ -1,14 +1,14 @@
-import Divider from '@material-ui/core/Divider';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import BasicTablePagination from '../../BasicTableView/BasicTablePagination/BasicTablePagination';
 import i18n from 'ui-i18n';
-import AutoSizeList from '../../AutoSizeList/AutoSizeList';
-import { buildGroupedItems, flattenGroupedItems, getItemKey, isGroupItem } from './helpers';
+import classnames from 'classnames';
 import { adjust, evolve, filter, map, not, pipe } from 'ramda';
+import { buildGroupedItems, flattenGroupedItems, getItemKey, isGroupItem } from './helpers';
+import Divider from '@mui/material/Divider';
 import { removeIgnoredItems } from '../utils/activities';
 import GroupItem from './items/GroupItem/GroupItem';
 import ActivityItem from './items/ActivityItem/ActivityItem';
-import classnames from 'classnames';
+import AutoSizeList from '../../AutoSizeList/AutoSizeList';
+import BasicTablePagination from '../../BasicTableView/BasicTablePagination/BasicTablePagination';
 import { CollapsibleItemsProvider } from '../contexts/CollapsibleItemsContext';
 import { useStyles } from './styles';
 var PAGINATION_HEIGHT = 60;

package/esm/components/activityLog/ActivityLog/items/ActivityItem/ActivityItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { getActivityType, splitActivityByType } from '../../../utils/activities';
 import ActivitiesFactory from '../../../activities/ActivitiesFactory';
 import { useStyles } from './styles';
@@ -9,7 +9,7 @@ var ActivityItem = function (_a) {
     var styles = useStyles();
     var type = getActivityType(item);
     var activities = splitActivityByType(item);
-    return (React.createElement("div", { className: styles.activityItem },
+    return (React.createElement("div", { className: styles.activityItem, "data-reltio-id": "activity-log-item" },
         React.createElement("div", { className: styles.activityIcon }, ActivitiesFactory.getIcon(type)),
         React.createElement("div", { className: styles.activityInfo },
             React.createElement(Typography, { className: styles.activityUser }, item.user),