@reltio/components 1.4.1588 → 1.4.1590

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

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

package/esm/components/ConfigureColumnsPopup/styles.js

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

package/esm/components/ConfirmDeleteDialog/ConfirmDeleteDialog.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
 var ConfirmDeleteDialog = function (_a) {
     var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm;
     var handleConfirm = function () {

package/esm/components/ConfirmationDialog/ConfirmationDialog.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 import { useStyles } from './styles';
 var ConfirmationDialog = function (_a) {
     var open = _a.open, title = _a.title, content = _a.content, onCancel = _a.onCancel, _b = _a.cancelCaption, cancelCaption = _b === void 0 ? i18n.text('Cancel') : _b, onDiscard = _a.onDiscard, _c = _a.discardCaption, discardCaption = _c === void 0 ? '' : _c, onSave = _a.onSave, _d = _a.saveCaption, saveCaption = _d === void 0 ? i18n.text('Save') : _d, _e = _a.disabledSave, disabledSave = _e === void 0 ? false : _e;

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

@@ -1,2 +1,2 @@
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "title" | "paper" | "actionButtons" | "contentText" | "discardButton">;
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "actionButtons" | "paper" | "contentText" | "discardButton">;
 export { useStyles };

package/esm/components/ConfirmationDialog/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var useStyles = makeStyles({
     paper: {
         minHeight: '180px'

package/esm/components/ConnectionEditor/ConnectionEditor.js

@@ -32,10 +32,7 @@ export var ConnectionEditor = function (_a) {
     var attributeListEntity = useMemo(function () {
         return relation && __assign({ attributes: attributes }, getActivenessAttributes(relation));
     }, [relation, attributes]);
-    var relationAttrTypes = useMemo(function () { return getRelationAttributesList(metadata, relationTypeUri); }, [
-        relationTypeUri,
-        metadata
-    ]);
+    var relationAttrTypes = useMemo(function () { return getRelationAttributesList(metadata, relationTypeUri); }, [relationTypeUri, metadata]);
     var availableEntityTypeUris = useMemo(function () {
         return isRelationTypeSelected
             ? getSuitableEntityTypeUrisForRelationTypes(direction === Directions.OUT, metadata, [

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

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

package/esm/components/ConnectionEditor/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     item: {
         marginBottom: '16px'

package/esm/components/ConnectionRelationTypeSelector/ConnectionRelationTypeSelector.js

@@ -29,11 +29,7 @@ import RelationTypeSelector from '../attributes/editMode/RelationTypeSelector/Re
 var ConnectionRelationTypeSelector = function (_a) {
     var _b = _a.relation, relation = _b === void 0 ? {} : _b, _c = _a.inRelationTypes, inRelationTypes = _c === void 0 ? [] : _c, _d = _a.outRelationTypes, outRelationTypes = _d === void 0 ? [] : _d, _e = _a.onChange, onChange = _e === void 0 ? identity : _e, _f = _a.applyFirstByDefault, applyFirstByDefault = _f === void 0 ? false : _f, _g = _a.reversedContextLabels, reversedContextLabels = _g === void 0 ? false : _g, otherProps = __rest(_a, ["relation", "inRelationTypes", "outRelationTypes", "onChange", "applyFirstByDefault", "reversedContextLabels"]);
     var _h = useRelationTypeSelector({ reversedContextLabels: reversedContextLabels }), getRelationTypesOptions = _h.getRelationTypesOptions, fromEditorValue = _h.fromEditorValue, toEditorValue = _h.toEditorValue;
-    var relationsTypesOptions = useMemo(function () { return getRelationTypesOptions(inRelationTypes, outRelationTypes); }, [
-        getRelationTypesOptions,
-        inRelationTypes,
-        outRelationTypes
-    ]);
+    var relationsTypesOptions = useMemo(function () { return getRelationTypesOptions(inRelationTypes, outRelationTypes); }, [getRelationTypesOptions, inRelationTypes, outRelationTypes]);
     var handleChange = useCallback(pipe(fromEditorValue(inRelationTypes, outRelationTypes), onChange), [
         fromEditorValue,
         inRelationTypes,

package/esm/components/DataTenantBadge/DataTenantBadge.js

@@ -3,8 +3,8 @@ import classnames from 'classnames';
 import { useSelector } from 'react-redux';
 import { propEq, toUpper, slice, pipe, defaultTo, find, propOr, startsWith, ifElse } from 'ramda';
 import mdmModule from '@reltio/mdm-module';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
 import { useStyles } from './styles';
 var addDataTenantPrefix = function (label) { return "DT:".concat(slice(0, 1, label)); };
 export var DataTenantBadge = function (_a) {

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

@@ -1,5 +1,5 @@
 type Props = {
     dataTenantId: string;
 };
-export declare const useStyles: (props: Props) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root">;
+export declare const useStyles: (props: Props) => import("@mui/styles").ClassNameMap<"root">;
 export {};

package/esm/components/DataTenantBadge/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import { getFontColor, getTenantIconColor } from '@reltio/mdm-sdk';
 export var useStyles = makeStyles({
     root: function (_a) {

package/esm/components/DataTypeValue/DataTypeValue.js

@@ -4,7 +4,7 @@ import moment from 'moment';
 import mdm from '@reltio/mdm-module';
 import { formatDataTypeValue, isAttributeValueLink, addProtocolToLink } from '@reltio/mdm-sdk';
 import { useSelector } from 'react-redux';
-import Link from '@material-ui/core/Link';
+import Link from '@mui/material/Link';
 import SearchHighlighter from '../SearchHighlighter/SearchHighlighter';
 var DataTypeValue = function (_a) {
     var _b = _a.value, value = _b === void 0 ? null : _b, dataTypeDefinition = _a.dataTypeDefinition, _c = _a.rich, rich = _c === void 0 ? true : _c;

package/esm/components/DateIntervalSelector/DateIntervalSelector.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { pipe } from 'ramda';
 import { getIntervalUnitLabel } from '@reltio/mdm-sdk';
-import capitalize from '@material-ui/core/utils/capitalize';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 import SimpleDropDownSelector from '../SimpleDropDownSelector/SimpleDropDownSelector';
 import { getValue } from '../../core/utils';
 import { useStyles } from './styles';
+import { capitalize } from '@mui/material/utils';
 var periods = ['minutes', 'hours', 'days', 'weeks', 'months', 'years'];
 var DateIntervalSelector = function (_a) {
     var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
@@ -18,7 +18,7 @@ var DateIntervalSelector = function (_a) {
     var onNumberChange = pipe(getValue, parseInt, getIntervalFromValue, onChange);
     var onUnitChange = pipe(getIntervalFromUnit, onChange);
     return (React.createElement("div", { className: styles.root },
-        React.createElement(TextField, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
+        React.createElement(TextField, { variant: "standard", type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
         React.createElement(SimpleDropDownSelector, { label: '', placeholder: capitalize(unit), className: styles.inputUnit, value: { value: unit, label: capitalize(getIntervalUnitLabel(unit)) }, options: periods.map(function (value) { return ({
                 value: value,
                 label: capitalize(getIntervalUnitLabel(value))

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

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

package/esm/components/DateIntervalSelector/styles.js

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

package/esm/components/DateRangePicker/DateRangePicker.js

@@ -2,10 +2,10 @@ import React, { forwardRef, useRef, useState } from 'react';
 import i18n from 'ui-i18n';
 import { nanoid } from 'nanoid';
 import { pathOr } from 'ramda';
-import ArrowBack from '@material-ui/icons/ArrowBack';
-import Button from '@material-ui/core/Button';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import Button from '@mui/material/Button';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
 import SmallIconButton from '../SmallIconButton/SmallIconButton';
 import { DataTypes } from '@reltio/mdm-sdk';
 import TimestampEditor from '../editors/TimestampEditor/TimestampEditor';
@@ -47,8 +47,22 @@ var DateRangePicker = forwardRef(function (_a, ref) {
             React.createElement(SmallIconButton, { size: "L", icon: ArrowBack, onClick: onCancel }),
             React.createElement(Typography, { className: styles.title }, headerTitle)),
         React.createElement("div", { className: styles.dateRangeContainer },
-            React.createElement(ComponentEditor, { id: editorFromId.current, label: 'From', variant: "filled", value: startDate, onChange: selectStartDateHandler, className: styles.dateInput, margin: "dense", minDate: minDate, maxDate: maxDate }),
-            React.createElement(ComponentEditor, { id: editorToId.current, label: 'To', variant: "filled", value: endDate, onChange: selectEndDateHandler, className: styles.dateInput, margin: "dense", minDate: minDate, maxDate: maxDate })),
+            React.createElement(ComponentEditor, { slotProps: {
+                    textField: {
+                        id: editorFromId.current,
+                        variant: 'filled',
+                        size: 'small',
+                        className: styles.dateInput
+                    }
+                }, label: i18n.text('From'), value: startDate, onChange: selectStartDateHandler, minDate: minDate, maxDate: maxDate }),
+            React.createElement(ComponentEditor, { slotProps: {
+                    textField: {
+                        id: editorToId.current,
+                        variant: 'filled',
+                        size: 'small',
+                        className: styles.dateInput
+                    }
+                }, label: i18n.text('To'), value: endDate, onChange: selectEndDateHandler, minDate: minDate, maxDate: maxDate })),
         React.createElement("div", { className: styles.actionButtons },
             React.createElement(Button, { color: "primary", onClick: onUpdate, className: styles.button }, i18n.text('Update')))));
 });

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "title" | "header" | "container" | "dateRangeContainer" | "dateInput" | "actionButtons">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "button" | "header" | "container" | "dateRangeContainer" | "dateInput" | "actionButtons">;

package/esm/components/DateRangePicker/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 ({
     container: {
         display: 'flex',

package/esm/components/Drawer/Drawer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DrawerProps } from '@material-ui/core/Drawer';
+import { DrawerProps } from '@mui/material/Drawer';
 type Props = DrawerProps;
 declare const Drawer: {
     ({ open, children, ...otherProps }: Props): JSX.Element;

package/esm/components/Drawer/Drawer.js

@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useState, useEffect } from 'react';
-import MUIDrawer from '@material-ui/core/Drawer';
-import { useTheme } from '@material-ui/core/styles';
+import MUIDrawer from '@mui/material/Drawer';
+import { useTheme } from '@mui/material/styles';
 var Drawer = function (_a) {
     var _b = _a.open, open = _b === void 0 ? true : _b, children = _a.children, otherProps = __rest(_a, ["open", "children"]);
     var _c = useState(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];

package/esm/components/DropDownMenuButton/DropDownMenuButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuProps } from '@material-ui/core/Menu';
+import { MenuProps } from '@mui/material/Menu';
 import { DropDownMenuItem } from '../../types';
 type Props<T> = {
     className?: string;

package/esm/components/DropDownMenuButton/DropDownMenuButton.js

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import React, { useCallback, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { identity } from 'ramda';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
 import { useDidUpdateEffect } from '../../hooks';
 import DefaultMenuItemRenderer from './MenuItemRenderer';
 import { useStyles } from './styles';
@@ -44,7 +44,7 @@ function DropDownMenuButton(_a) {
             }, transformOrigin: {
                 vertical: 'top',
                 horizontal: 'right'
-            }, elevation: 2, getContentAnchorEl: null, MenuListProps: { autoFocusItem: isOpen } }, popoverProps), menuItems.map(renderMenuItem))));
+            }, elevation: 2, MenuListProps: { autoFocusItem: isOpen } }, popoverProps), menuItems.map(renderMenuItem))));
 }
 DropDownMenuButton.displayName = 'DropDownMenuButton';
 export default DropDownMenuButton;

package/esm/components/DropDownMenuButton/MenuItemRenderer.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import { identity } from 'ramda';
-import Checkbox from '@material-ui/core/Checkbox';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 import withTooltip from '../../HOCs/withTooltip/withTooltip';
 import { useStyles } from './styles';
 var MenuItemWithTooltip = withTooltip(MenuItem);

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

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

package/esm/components/DropDownMenuButton/styles.js

@@ -1,11 +1,12 @@
-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 ({
     buttonRoot: {
         '&$selected': {
             color: theme.palette.action.active,
-            backgroundColor: fade(theme.palette.action.active, 0.12),
+            backgroundColor: alpha(theme.palette.action.active, 0.12),
             '&:hover': {
-                backgroundColor: fade(theme.palette.action.active, 0.15)
+                backgroundColor: alpha(theme.palette.action.active, 0.15)
             }
         }
     },

package/esm/components/DropDownSelector/DropDownSelector.js

@@ -54,7 +54,7 @@ var DropDownSelector = function (_a) {
     var overloadStylesIfNoLabel = isEmpty(label) ? withoutLabelInputStyle : {};
     var mergedStyles = __assign(__assign(__assign({}, customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
     var mergedClasses = __assign(__assign({}, styles), classes);
-    return (React.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator, LoadingIndicator: EmptyStub, SingleValue: SingleValue, Menu: Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', margin: 'dense', classes: __assign(__assign({}, prop('classes', TextFieldProps)), { root: classnames(styles.formControl, path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputProps', 'classes'], TextFieldProps)), { root: classnames(styles.filledInputRoot, path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames((_b = {}, _b[underlineStyle.filledInputUnderline] = isEmptyValue(value), _b), path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames('focused', path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames(styles.inputLabel, path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames('shrink', path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
+    return (React.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator, LoadingIndicator: EmptyStub, SingleValue: SingleValue, Menu: Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', size: 'small', classes: __assign(__assign({}, prop('classes', TextFieldProps)), { root: classnames(styles.formControl, path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputProps', 'classes'], TextFieldProps)), { root: classnames(styles.filledInputRoot, path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames((_b = {}, _b[underlineStyle.filledInputUnderline] = isEmptyValue(value), _b), path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames('focused', path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames(styles.inputLabel, path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames('shrink', path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
 };
 export var DropDownSelectorType = {
     value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),

package/esm/components/DropDownSelector/components/Menu.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
 import PropTypes from 'prop-types';
 import { prop } from 'ramda';
-import AddIcon from '@material-ui/icons/Add';
+import AddIcon from '@mui/icons-material/Add';
 import { useMenuStyles } from './styles';
 import MenuWithPopper from '../../commonReactSelectComponents/MenuWithPopper';
 var Menu = function (props) {

package/esm/components/DropDownSelector/components/SingleValue.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useSingleValueStyles } from './styles';

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

@@ -1,2 +1,2 @@
-export const useMenuStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
-export const useSingleValueStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"singleValue">;
+export const useMenuStyles: (props?: any) => import("@mui/styles").ClassNameMap<"addLabel" | "addIcon">;
+export const useSingleValueStyles: (props?: any) => import("@mui/styles").ClassNameMap<"singleValue">;

package/esm/components/DropDownSelector/components/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useMenuStyles = makeStyles(function (theme) { return ({
     addLabel: {
         display: 'flex',
@@ -28,6 +28,6 @@ export var useSingleValueStyles = makeStyles({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        marginTop: '21px'
+        marginTop: '17px'
     }
 });

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

@@ -1,4 +1,4 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"inputLabel" | "formControl" | "control" | "filledInputUnderline" | "valueContainer" | "dropdownIndicator" | "filledInputRoot">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"control" | "formControl" | "filledInputUnderline" | "inputLabel" | "valueContainer" | "dropdownIndicator" | "filledInputRoot">;
 export namespace customStyles {
     function menu(baseStyles: any): any;
     function menuList(baseStyles: any): any;

package/esm/components/DropDownSelector/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 useStyles = makeStyles({
     control: {
         height: 'auto'
@@ -45,7 +45,6 @@ export var useStyles = makeStyles({
     inputLabel: {
         color: 'rgba(0,0,0,0.6)',
         fontSize: '14px',
-        lineHeight: '16px',
         paddingLeft: '4px',
         '&.shrink': {
             paddingLeft: '4px'

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

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

package/esm/components/EmptySearchResult/styles.js

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

package/esm/components/EmptyState/EmptyState.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
 import { identity } from 'ramda';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 import EmptySearchResultsIcon from '../../icons/EmptySearchResults';
 import SelectAttributesIcon from '../../icons/SelectAttributes';
 import NoData from '../../icons/NoData';

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

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

package/esm/components/EmptyState/styles.js

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

package/esm/components/EntityAvatar/EntityAvatar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import Avatar from '@material-ui/core/Avatar';
+import Avatar from '@mui/material/Avatar';
 import { DEFAULT_PROFILE_IMAGE } from './no-photo.svg';
 import { getEntityImage, getEntityTypeImage, getAbsoluteImageUrl, svg2Url } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';

package/esm/components/EntityTypeBadge/EntityTypeBadge.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { getEntityType, getEntityTypeLabel, getPropWithInheritance, theme, utils } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';
 import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';

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

@@ -1,2 +1,2 @@
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"entityType-overflow" | "entityType-small" | "entityType-medium">;
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"entityType-overflow" | "entityType-small" | "entityType-medium">;
 export default useStyles;

package/esm/components/EntityTypeBadge/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var useStyles = makeStyles({
     'entityType-overflow': {
         textOverflow: 'ellipsis',

package/esm/components/EntityUriLink/EntityUriLink.js

@@ -1,9 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { forwardRef, useCallback, useContext } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { UrlGeneratorsContext, ViewIdContext } from '../../contexts';
 import mdmModule, { ui } from '@reltio/mdm-module';
 var EntityUriLink = forwardRef(function (_a, ref) {
-    var value = _a.value, children = _a.children, screen = _a.screen, className = _a.className;
+    var value = _a.value, children = _a.children, screen = _a.screen, className = _a.className, otherProps = __rest(_a, ["value", "children", "screen", "className"]);
     var dispatch = useDispatch();
     var viewId = useContext(ViewIdContext);
     var generateEntityUrl = useContext(UrlGeneratorsContext).generateEntityUrl;
@@ -12,11 +34,11 @@ var EntityUriLink = forwardRef(function (_a, ref) {
     var onClick = useCallback(function () {
         dispatch(ui.actions.openEntity({ uri: value, viewId: viewId, screen: screen }));
     }, [viewId, value, dispatch, screen]);
-    return (React.createElement("a", { ref: ref, href: generateEntityUrlByUri(value), onClick: function (e) {
+    return (React.createElement("a", __assign({ ref: ref, href: generateEntityUrlByUri(value), onClick: function (e) {
             onClick();
             e.stopPropagation();
             e.preventDefault();
-        }, className: className }, children));
+        }, className: className }, otherProps), children));
 });
 EntityUriLink.displayName = 'EntityUriLink';
 export default EntityUriLink;

package/esm/components/ErrorPopup/ErrorPopup.js

@@ -15,7 +15,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { path } from 'ramda';
 import i18n from 'ui-i18n';
-import Portal from '@material-ui/core/Portal';
+import Portal from '@mui/material/Portal';
 import RCErrorPopup from 'react-components/dist/ErrorPopup/ErrorPopup';
 import mdmModule, { ui } from '@reltio/mdm-module';
 import { useStyles } from './styles';

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

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

package/esm/components/ErrorPopup/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     errorBlock: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif',

package/esm/components/ErrorWrapper/ErrorMessage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { useStyles } from './styles';
 var ErrorMessage = function (_a) {
     var className = _a.className, message = _a.message;

package/esm/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -1,4 +1,4 @@
-import { FormControlProps } from '@material-ui/core/FormControl';
+import { FormControlProps } from '@mui/material/FormControl';
 import React from 'react';
 type Props = FormControlProps & {
     errorMessage?: string;

package/esm/components/ErrorWrapper/ErrorWrapper.js

@@ -22,15 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classnames from 'classnames';
 import ErrorMessage from './ErrorMessage';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
 import React, { memo } from 'react';
 import { useStyles } from './styles';
 var ErrorWrapper = function (_a) {
     var errorMessage = _a.errorMessage, children = _a.children, className = _a.className, classes = _a.classes, otherProps = __rest(_a, ["errorMessage", "children", "className", "classes"]);
     var styles = useStyles();
     var hasError = !!errorMessage;
-    return (React.createElement(FormControl, __assign({ className: classnames(styles.wrapper, className, classes === null || classes === void 0 ? void 0 : classes.root), error: true }, otherProps),
+    return (React.createElement(FormControl, __assign({ variant: "standard", className: classnames(styles.wrapper, className, classes === null || classes === void 0 ? void 0 : classes.root), error: true }, otherProps),
         children,
         hasError && (React.createElement(FormHelperText, { className: classnames(styles.helperText, classes === null || classes === void 0 ? void 0 : classes.helperText) },
             React.createElement(ErrorMessage, { message: errorMessage })))));

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

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

package/esm/components/ErrorWrapper/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 ({
     wrapper: {
         width: '100%'