@reltio/components 1.4.1589 → 1.4.1590

package/cjs/components/CollapseButton/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     collapseButton: {
         cursor: 'pointer'

package/cjs/components/ColorBar/styles.d.ts

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

package/cjs/components/ColorBar/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     bar: {
         backgroundColor: theme.palette.secondary.main,

package/cjs/components/ColoredSourceIcon/ColoredSourceIcon.js

@@ -30,7 +30,7 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var react_redux_1 = require("react-redux");
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var contexts_1 = require("../../contexts");
 var SourceIcon_1 = __importDefault(require("../SourceIcon/SourceIcon"));

package/cjs/components/ColoredSourceIcon/styles.d.ts

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

package/cjs/components/ColoredSourceIcon/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     itemContainer: {
         width: '18px',

package/cjs/components/CommentsContainer/buttons/AddCommentButton.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var AddComment_1 = __importDefault(require("../../../icons/AddComment"));
 var styles_1 = require("./styles");
 var AddCommentButton = function (_a) {

package/cjs/components/CommentsContainer/buttons/CommentButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var CommentBubble_1 = __importDefault(require("../../../icons/CommentBubble"));
 var styles_1 = require("./styles");
 var CommentButton = react_1.default.forwardRef(function (_a, ref) {

package/cjs/components/CommentsContainer/buttons/styles.d.ts

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

package/cjs/components/CommentsContainer/buttons/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     root: {
         position: 'relative',

package/cjs/components/CommentsContainer/styles.d.ts

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

package/cjs/components/CommentsContainer/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 var classnames_1 = require("../../constants/classnames");
 exports.useStyles = (0, styles_1.makeStyles)(function () {
     var _a;

package/cjs/components/ConfigureColumnsPopup/ConfigureColumnsPopup.js

@@ -79,9 +79,7 @@ var ConfigureColumnsPopup = function (_a) {
     var filterItem = (0, react_1.useCallback)(function (item) {
         return item.label.toLowerCase().includes(filterText.toLowerCase());
     }, [filterText]);
-    var filterItemsTree = (0, react_1.useCallback)(function (item) { return filterItem(item) || (item.children || []).some(filterItemsTree); }, [
-        filterItem
-    ]);
+    var filterItemsTree = (0, react_1.useCallback)(function (item) { return filterItem(item) || (item.children || []).some(filterItemsTree); }, [filterItem]);
     var getItemSize = function () { return ITEM_HEIGHT; };
     var getAttributesData = (0, react_1.useMemo)(function () {
         var getAttributeGroupData = (0, ramda_1.curry)(function (level, item, groupId, groupName) { return __spreadArray([
@@ -112,12 +110,7 @@ var ConfigureColumnsPopup = function (_a) {
         var item = _a.item;
         onListItemClick(item, !selected.find(function (column) { return column.id === item.id || column.id.includes("".concat(item.id, ".")); }));
     }, [onListItemClick, selected]);
-    var groupedItems = (0, react_1.useMemo)(function () { return (renderGroupTitle ? getGroupsData : getAttributesData)(data); }, [
-        data,
-        renderGroupTitle,
-        getGroupsData,
-        getAttributesData
-    ]);
+    var groupedItems = (0, react_1.useMemo)(function () { return (renderGroupTitle ? getGroupsData : getAttributesData)(data); }, [data, renderGroupTitle, getGroupsData, getAttributesData]);
     var items = (0, react_1.useMemo)(function () { return (0, helpers_1.flattenGroupedItemsData)(groupedItems); }, [groupedItems]);
     var _b = (0, helpers_2.useKeyboardNavigation)({
         items: items,

package/cjs/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/cjs/components/ConfigureColumnsPopup/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 var useStyles = (0, styles_1.makeStyles)(function () { return ({
     popupContainer: {},
     container: {

package/cjs/components/ConfirmDeleteDialog/ConfirmDeleteDialog.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
-var DialogActions_1 = __importDefault(require("@material-ui/core/DialogActions"));
-var DialogContent_1 = __importDefault(require("@material-ui/core/DialogContent"));
-var DialogContentText_1 = __importDefault(require("@material-ui/core/DialogContentText"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
 var ConfirmDeleteDialog = function (_a) {
     var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm;
     var handleConfirm = function () {

package/cjs/components/ConfirmationDialog/ConfirmationDialog.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
-var DialogActions_1 = __importDefault(require("@material-ui/core/DialogActions"));
-var DialogContent_1 = __importDefault(require("@material-ui/core/DialogContent"));
-var DialogContentText_1 = __importDefault(require("@material-ui/core/DialogContentText"));
-var DialogTitle_1 = __importDefault(require("@material-ui/core/DialogTitle"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
+var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
 var styles_1 = require("./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 ? ui_i18n_1.default.text('Cancel') : _b, onDiscard = _a.onDiscard, _c = _a.discardCaption, discardCaption = _c === void 0 ? '' : _c, onSave = _a.onSave, _d = _a.saveCaption, saveCaption = _d === void 0 ? ui_i18n_1.default.text('Save') : _d, _e = _a.disabledSave, disabledSave = _e === void 0 ? false : _e;

package/cjs/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/cjs/components/ConfirmationDialog/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 var useStyles = (0, styles_1.makeStyles)({
     paper: {
         minHeight: '180px'

package/cjs/components/ConnectionEditor/ConnectionEditor.js

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

package/cjs/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/cjs/components/ConnectionEditor/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     item: {
         marginBottom: '16px'

package/cjs/components/ConnectionRelationTypeSelector/ConnectionRelationTypeSelector.js

@@ -57,11 +57,7 @@ var RelationTypeSelector_1 = __importDefault(require("../attributes/editMode/Rel
 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 ? ramda_1.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 = (0, hooks_1.useRelationTypeSelector)({ reversedContextLabels: reversedContextLabels }), getRelationTypesOptions = _h.getRelationTypesOptions, fromEditorValue = _h.fromEditorValue, toEditorValue = _h.toEditorValue;
-    var relationsTypesOptions = (0, react_1.useMemo)(function () { return getRelationTypesOptions(inRelationTypes, outRelationTypes); }, [
-        getRelationTypesOptions,
-        inRelationTypes,
-        outRelationTypes
-    ]);
+    var relationsTypesOptions = (0, react_1.useMemo)(function () { return getRelationTypesOptions(inRelationTypes, outRelationTypes); }, [getRelationTypesOptions, inRelationTypes, outRelationTypes]);
     var handleChange = (0, react_1.useCallback)((0, ramda_1.pipe)(fromEditorValue(inRelationTypes, outRelationTypes), onChange), [
         fromEditorValue,
         inRelationTypes,

package/cjs/components/DataTenantBadge/DataTenantBadge.js

@@ -9,8 +9,8 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_redux_1 = require("react-redux");
 var ramda_1 = require("ramda");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var styles_1 = require("./styles");
 var addDataTenantPrefix = function (label) { return "DT:".concat((0, ramda_1.slice)(0, 1, label)); };
 var DataTenantBadge = function (_a) {

package/cjs/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/cjs/components/DataTenantBadge/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 exports.useStyles = (0, styles_1.makeStyles)({
     root: function (_a) {

package/cjs/components/DataTypeValue/DataTypeValue.js

@@ -9,7 +9,7 @@ var moment_1 = __importDefault(require("moment"));
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var react_redux_1 = require("react-redux");
-var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var Link_1 = __importDefault(require("@mui/material/Link"));
 var SearchHighlighter_1 = __importDefault(require("../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/cjs/components/DateIntervalSelector/DateIntervalSelector.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var capitalize_1 = __importDefault(require("@material-ui/core/utils/capitalize"));
-var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
 var SimpleDropDownSelector_1 = __importDefault(require("../SimpleDropDownSelector/SimpleDropDownSelector"));
 var utils_1 = require("../../core/utils");
 var styles_1 = require("./styles");
+var utils_2 = require("@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;
@@ -23,10 +23,10 @@ var DateIntervalSelector = function (_a) {
     var onNumberChange = (0, ramda_1.pipe)(utils_1.getValue, parseInt, getIntervalFromValue, onChange);
     var onUnitChange = (0, ramda_1.pipe)(getIntervalFromUnit, onChange);
     return (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(TextField_1.default, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
-        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: (0, capitalize_1.default)(unit), className: styles.inputUnit, value: { value: unit, label: (0, capitalize_1.default)((0, mdm_sdk_1.getIntervalUnitLabel)(unit)) }, options: periods.map(function (value) { return ({
+        react_1.default.createElement(TextField_1.default, { variant: "standard", type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
+        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: (0, utils_2.capitalize)(unit), className: styles.inputUnit, value: { value: unit, label: (0, utils_2.capitalize)((0, mdm_sdk_1.getIntervalUnitLabel)(unit)) }, options: periods.map(function (value) { return ({
                 value: value,
-                label: (0, capitalize_1.default)((0, mdm_sdk_1.getIntervalUnitLabel)(value))
+                label: (0, utils_2.capitalize)((0, mdm_sdk_1.getIntervalUnitLabel)(value))
             }); }), onChange: onUnitChange, TextFieldProps: {
                 inputProps: { onFocus: onFocus },
                 InputProps: { classes: { root: styles.input } }

package/cjs/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/cjs/components/DateIntervalSelector/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     root: {
         display: 'flex',

package/cjs/components/DateRangePicker/DateRangePicker.js

@@ -30,10 +30,10 @@ var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var nanoid_1 = require("nanoid");
 var ramda_1 = require("ramda");
-var ArrowBack_1 = __importDefault(require("@material-ui/icons/ArrowBack"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var Toolbar_1 = __importDefault(require("@material-ui/core/Toolbar"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var ArrowBack_1 = __importDefault(require("@mui/icons-material/ArrowBack"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Toolbar_1 = __importDefault(require("@mui/material/Toolbar"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var TimestampEditor_1 = __importDefault(require("../editors/TimestampEditor/TimestampEditor"));
@@ -75,8 +75,22 @@ var DateRangePicker = (0, react_1.forwardRef)(function (_a, ref) {
             react_1.default.createElement(SmallIconButton_1.default, { size: "L", icon: ArrowBack_1.default, onClick: onCancel }),
             react_1.default.createElement(Typography_1.default, { className: styles.title }, headerTitle)),
         react_1.default.createElement("div", { className: styles.dateRangeContainer },
-            react_1.default.createElement(ComponentEditor, { id: editorFromId.current, label: 'From', variant: "filled", value: startDate, onChange: selectStartDateHandler, className: styles.dateInput, margin: "dense", minDate: minDate, maxDate: maxDate }),
-            react_1.default.createElement(ComponentEditor, { id: editorToId.current, label: 'To', variant: "filled", value: endDate, onChange: selectEndDateHandler, className: styles.dateInput, margin: "dense", minDate: minDate, maxDate: maxDate })),
+            react_1.default.createElement(ComponentEditor, { slotProps: {
+                    textField: {
+                        id: editorFromId.current,
+                        variant: 'filled',
+                        size: 'small',
+                        className: styles.dateInput
+                    }
+                }, label: ui_i18n_1.default.text('From'), value: startDate, onChange: selectStartDateHandler, minDate: minDate, maxDate: maxDate }),
+            react_1.default.createElement(ComponentEditor, { slotProps: {
+                    textField: {
+                        id: editorToId.current,
+                        variant: 'filled',
+                        size: 'small',
+                        className: styles.dateInput
+                    }
+                }, label: ui_i18n_1.default.text('To'), value: endDate, onChange: selectEndDateHandler, minDate: minDate, maxDate: maxDate })),
         react_1.default.createElement("div", { className: styles.actionButtons },
             react_1.default.createElement(Button_1.default, { color: "primary", onClick: onUpdate, className: styles.button }, ui_i18n_1.default.text('Update')))));
 });

package/cjs/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/cjs/components/DateRangePicker/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     container: {
         display: 'flex',

package/cjs/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/cjs/components/Drawer/Drawer.js

@@ -49,8 +49,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var Drawer_1 = __importDefault(require("@material-ui/core/Drawer"));
-var styles_1 = require("@material-ui/core/styles");
+var Drawer_1 = __importDefault(require("@mui/material/Drawer"));
+var styles_1 = require("@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 = (0, react_1.useState)(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];

package/cjs/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/cjs/components/DropDownMenuButton/DropDownMenuButton.js

@@ -40,8 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var Menu_1 = __importDefault(require("@material-ui/core/Menu"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Menu_1 = __importDefault(require("@mui/material/Menu"));
 var hooks_1 = require("../../hooks");
 var MenuItemRenderer_1 = __importDefault(require("./MenuItemRenderer"));
 var styles_1 = require("./styles");
@@ -72,7 +72,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';
 exports.default = DropDownMenuButton;

package/cjs/components/DropDownMenuButton/MenuItemRenderer.js

@@ -28,9 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
-var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
-var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
 var styles_1 = require("./styles");
 var MenuItemWithTooltip = (0, withTooltip_1.default)(MenuItem_1.default);

package/cjs/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/cjs/components/DropDownMenuButton/styles.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("@mui/styles");
+exports.useStyles = (0, styles_2.makeStyles)(function (theme) { return ({
     buttonRoot: {
         '&$selected': {
             color: theme.palette.action.active,
-            backgroundColor: (0, styles_1.fade)(theme.palette.action.active, 0.12),
+            backgroundColor: (0, styles_1.alpha)(theme.palette.action.active, 0.12),
             '&:hover': {
-                backgroundColor: (0, styles_1.fade)(theme.palette.action.active, 0.15)
+                backgroundColor: (0, styles_1.alpha)(theme.palette.action.active, 0.15)
             }
         }
     },

package/cjs/components/DropDownSelector/DropDownSelector.js

@@ -83,7 +83,7 @@ var DropDownSelector = function (_a) {
     var overloadStylesIfNoLabel = (0, ramda_1.isEmpty)(label) ? styles_1.withoutLabelInputStyle : {};
     var mergedStyles = __assign(__assign(__assign({}, styles_1.customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
     var mergedClasses = __assign(__assign({}, styles), classes);
-    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: (0, ramda_1.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_1.default, LoadingIndicator: core_1.EmptyStub, SingleValue: SingleValue_1.default, Menu: Menu_1.default }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', margin: 'dense', classes: __assign(__assign({}, (0, ramda_1.prop)('classes', TextFieldProps)), { root: (0, classnames_1.default)(styles.formControl, (0, ramda_1.path)(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, (0, ramda_1.prop)('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, (0, ramda_1.prop)('InputProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.filledInputRoot, (0, ramda_1.path)(['InputProps', 'classes', 'root'], TextFieldProps)), underline: (0, classnames_1.default)((_b = {}, _b[underlineStyle.filledInputUnderline] = (0, mdm_sdk_1.isEmptyValue)(value), _b), (0, ramda_1.path)(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: (0, classnames_1.default)('focused', (0, ramda_1.path)(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, (0, ramda_1.prop)('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputLabelProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.inputLabel, (0, ramda_1.path)(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: (0, classnames_1.default)('shrink', (0, ramda_1.path)(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !(0, mdm_sdk_1.isEmptyValue)(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
+    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: (0, ramda_1.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_1.default, LoadingIndicator: core_1.EmptyStub, SingleValue: SingleValue_1.default, Menu: Menu_1.default }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', size: 'small', classes: __assign(__assign({}, (0, ramda_1.prop)('classes', TextFieldProps)), { root: (0, classnames_1.default)(styles.formControl, (0, ramda_1.path)(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, (0, ramda_1.prop)('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, (0, ramda_1.prop)('InputProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.filledInputRoot, (0, ramda_1.path)(['InputProps', 'classes', 'root'], TextFieldProps)), underline: (0, classnames_1.default)((_b = {}, _b[underlineStyle.filledInputUnderline] = (0, mdm_sdk_1.isEmptyValue)(value), _b), (0, ramda_1.path)(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: (0, classnames_1.default)('focused', (0, ramda_1.path)(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, (0, ramda_1.prop)('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputLabelProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.inputLabel, (0, ramda_1.path)(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: (0, classnames_1.default)('shrink', (0, ramda_1.path)(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !(0, mdm_sdk_1.isEmptyValue)(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
 };
 exports.DropDownSelectorType = {
     value: prop_types_1.default.oneOfType([prop_types_1.default.object, prop_types_1.default.array]),

package/cjs/components/DropDownSelector/components/Menu.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var ramda_1 = require("ramda");
-var Add_1 = __importDefault(require("@material-ui/icons/Add"));
+var Add_1 = __importDefault(require("@mui/icons-material/Add"));
 var styles_1 = require("./styles");
 var MenuWithPopper_1 = __importDefault(require("../../commonReactSelectComponents/MenuWithPopper"));
 var Menu = function (props) {

package/cjs/components/DropDownSelector/components/SingleValue.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importDefault(require("react"));
 var styles_1 = require("./styles");

package/cjs/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/cjs/components/DropDownSelector/components/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSingleValueStyles = exports.useMenuStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useMenuStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     addLabel: {
         display: 'flex',
@@ -31,6 +31,6 @@ exports.useSingleValueStyles = (0, styles_1.makeStyles)({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        marginTop: '21px'
+        marginTop: '17px'
     }
 });

package/cjs/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/cjs/components/DropDownSelector/styles.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withoutLabelInputStyle = exports.overloadMenuListStyle = exports.customStyles = exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     control: {
         height: 'auto'
@@ -48,7 +48,6 @@ exports.useStyles = (0, styles_1.makeStyles)({
     inputLabel: {
         color: 'rgba(0,0,0,0.6)',
         fontSize: '14px',
-        lineHeight: '16px',
         paddingLeft: '4px',
         '&.shrink': {
             paddingLeft: '4px'

package/cjs/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/cjs/components/EmptySearchResult/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     container: {
         display: 'flex',

package/cjs/components/EmptyState/EmptyState.js

@@ -7,8 +7,8 @@ exports.EMPTY_STATE_ICONS = exports.EMPTY_STATE_VARIANTS = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
 var EmptySearchResults_1 = __importDefault(require("../../icons/EmptySearchResults"));
 var SelectAttributes_1 = __importDefault(require("../../icons/SelectAttributes"));
 var NoData_1 = __importDefault(require("../../icons/NoData"));

package/cjs/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">;