@reltio/components 1.4.1589 → 1.4.1590

package/cjs/HOCs/withTooltip/withTooltip.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 Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
-var styles_1 = require("@material-ui/core/styles");
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var styles_1 = require("@mui/styles");
 var propTypes_1 = __importDefault(require("./propTypes"));
 var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     tooltip: theme.tooltip,

package/cjs/components/ActionButton/ActionButton.js

@@ -51,9 +51,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButton = exports.ActionButtonMode = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var styles_1 = require("./styles");
 var core_1 = require("../../core");
 var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
@@ -73,7 +73,7 @@ exports.ActionButton = (0, react_1.forwardRef)(function (_a, ref) {
                 return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({ disabled: disabled, className: (0, classnames_1.default)(styles.iconButton, className), size: "S", tooltipTitle: label, onClick: onClick, icon: Icon, showForDisabled: true }, otherProps)));
             }
             case 'button': {
-                return (react_1.default.createElement(Button_1.default, __assign({ className: (0, classnames_1.default)(styles.button, className), disabled: disabled, startIcon: react_1.default.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon, label: styles.label } }, otherProps),
+                return (react_1.default.createElement(Button_1.default, __assign({ className: (0, classnames_1.default)(styles.button, className), disabled: disabled, startIcon: react_1.default.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon } }, otherProps),
                     react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label },
                         react_1.default.createElement("div", { className: styles.overflowStyle }, label))));
             }

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "label" | "menuItem" | "startIcon" | "menuText" | "iconButton" | "overflowStyle" | "menuIcon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "menuItem" | "startIcon" | "menuText" | "iconButton" | "overflowStyle" | "menuIcon">;

package/cjs/components/ActionButton/styles.js

@@ -1,9 +1,13 @@
 "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 ({
     button: {
+        whiteSpace: 'nowrap',
+        fontSize: '14px',
+        lineHeight: '16px',
+        letterSpacing: 0,
         padding: '9px 16px 9px 12px',
         '& svg g path, & svg path': {
             fill: theme.palette.primary.main,
@@ -23,12 +27,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         height: '18px',
         alignItems: 'center'
     },
-    label: {
-        whiteSpace: 'nowrap',
-        fontSize: '14px',
-        lineHeight: '16px',
-        letterSpacing: 0
-    },
     overflowStyle: {
         overflow: 'hidden',
         whiteSpace: 'nowrap',

package/cjs/components/ArrowExpandButton/ArrowExpandButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconButtonProps } from '@material-ui/core/IconButton';
+import { IconButtonProps } from '@mui/material/IconButton';
 type Props = {
     expanded: boolean;
     className?: string;

package/cjs/components/ArrowExpandButton/ArrowExpandButton.js

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
-var ArrowRight_1 = __importDefault(require("@material-ui/icons/ArrowRight"));
+var ArrowRight_1 = __importDefault(require("@mui/icons-material/ArrowRight"));
 var styles_1 = require("./styles");
 var ArrowExpandButton = function (props) {
     var _a;

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

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

package/cjs/components/ArrowExpandButton/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)({
     expandButton: {
         '&:hover': {

package/cjs/components/AttributeGroupIcon/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/cjs/components/AttributeGroupIcon/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)({
     icon: {
         maxHeight: '25px',

package/cjs/components/AttributeListItem/AttributeListItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AttributeType } from '@reltio/mdm-sdk';
-import { ListItemProps } from '@material-ui/core/ListItem';
+import { MenuItemProps } from '@mui/material/MenuItem';
 export declare const RecommendedIconWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
     tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
     tooltipPlacement: import("prop-types").Requireable<string>;
@@ -30,7 +30,7 @@ type Props = {
     onClick?: (data: Data, checked: boolean, groupId: string) => void;
     subItemMargin?: number;
     groupId?: string;
-    style?: ListItemProps['style'];
+    style?: MenuItemProps['style'];
     LogoIcon?: React.ElementType;
     className?: string;
     disableNonSelectable?: boolean;

package/cjs/components/AttributeListItem/AttributeListItem.js

@@ -30,9 +30,9 @@ exports.RecommendedIconWithTooltip = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var ListItem_1 = __importDefault(require("@material-ui/core/ListItem"));
-var ListItemText_1 = __importDefault(require("@material-ui/core/ListItemText"));
-var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
 var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
@@ -54,9 +54,8 @@ var AttributeListItem = function (_a) {
     var renderIcon = function (attrType) {
         return groupId === 'recommended' ? (react_1.default.createElement(exports.RecommendedIconWithTooltip, { className: styles.recommendedIcon, tooltipTitle: ui_i18n_1.default.text('Recommended'), showForDisabled: true })) : (react_1.default.createElement(AttrTypeIcon_1.default, { attrType: attrType }));
     };
-    // TODO: ListItem needs to be split to ListItem and ListItemButton after material ui releases stable version(https://github.com/mui-org/material-ui/pull/26446). The "button" prop will be deprecated.
     return (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: labelInText || label, className: styles.itemTooltip, placement: "bottom-end" },
-        react_1.default.createElement(ListItem_1.default, { className: (0, classnames_1.default)(styles.container, styles.listItem, (_b = {}, _b[styles.defaultCursor] = !isButton, _b), className), onClick: isButton ? handleItemClick : undefined, style: style, dense: true, button: isButton, disabled: disableNonSelectable && notSelectable, classes: {
+        react_1.default.createElement(MenuItem_1.default, { className: (0, classnames_1.default)(styles.container, styles.listItem, (_b = {}, _b[styles.defaultCursor] = !isButton, _b), className), onClick: isButton ? handleItemClick : undefined, style: style, dense: true, disabled: disableNonSelectable && notSelectable, classes: {
                 focusVisible: styles.listItemFocus,
                 selected: styles.listItemFocus
             }, selected: isFocused, tabIndex: -1, disableGutters: disableGutters },

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"checkbox" | "icon" | "checked" | "container" | "listItem" | "listItemFocus" | "recommendedIcon" | "logoIcon" | "itemAfter" | "itemText" | "marginWrapper" | "defaultCursor" | "itemTooltip" | "marginText" | "itemTextWrapper">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "container" | "checkbox" | "checked" | "listItem" | "listItemFocus" | "recommendedIcon" | "logoIcon" | "itemAfter" | "itemText" | "marginWrapper" | "defaultCursor" | "itemTooltip" | "marginText" | "itemTextWrapper">;

package/cjs/components/AttributeListItem/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: {
         '& > $marginWrapper:first-child': {

package/cjs/components/AttributeSelector/AttributeSelector.js

@@ -55,7 +55,7 @@ var ramda_1 = require("ramda");
 var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var MultiSelect_1 = __importDefault(require("../ReactSelect/MultiSelect"));
 var MultiValue_1 = __importDefault(require("../ReactSelect/commonComponents/MultiValue"));
 var DropdownIndicatorWithIconButton_1 = __importDefault(require("../commonReactSelectComponents/DropdownIndicatorWithIconButton"));

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

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

package/cjs/components/AttributeSelector/styles.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = exports.customStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.customStyles = {
     input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); },
     menuPortal: function (currentStyles) { return (__assign(__assign({}, currentStyles), { zIndex: 1300 })); }

package/cjs/components/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -65,15 +65,8 @@ var AttributesFiltersBuilder = function (_a) {
         filterSelectorContainer: filterSelector,
         actionsContainer: actionContainer
     }); }, [attrSelector, filterSelector, actionContainer]);
-    var attributeSelectorItems = (0, react_1.useMemo)(function () { return (0, helpers_1.getAttributeSelectorItems)(attributeTypes, entityType, metadata); }, [
-        attributeTypes,
-        metadata,
-        entityType
-    ]);
-    var rowsData = (0, react_1.useMemo)(function () { return (filters.length ? (0, helpers_1.getRowsDataFromFilters)(filters, attributeSelectorItems) : []); }, [
-        attributeSelectorItems,
-        filters
-    ]);
+    var attributeSelectorItems = (0, react_1.useMemo)(function () { return (0, helpers_1.getAttributeSelectorItems)(attributeTypes, entityType, metadata); }, [attributeTypes, metadata, entityType]);
+    var rowsData = (0, react_1.useMemo)(function () { return (filters.length ? (0, helpers_1.getRowsDataFromFilters)(filters, attributeSelectorItems) : []); }, [attributeSelectorItems, filters]);
     attributesCountRef.current = rowsData.length;
     (0, react_1.useEffect)(function () {
         if (attributeFilterRef.current && lastAttributesCountRef.current !== attributesCountRef.current) {

package/cjs/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js

@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
-var capitalize_1 = __importDefault(require("@material-ui/core/utils/capitalize"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var SimpleDropDownSelector_1 = __importDefault(require("../../../SimpleDropDownSelector/SimpleDropDownSelector"));
 var helpers_1 = require("../../helpers");
 var styles_1 = __importDefault(require("./styles"));
+var utils_1 = require("@mui/material/utils");
 var FilterSelector = function (_a) {
     var _b;
     var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;
@@ -43,7 +43,7 @@ var FilterSelector = function (_a) {
     var options = optionsProp ||
         (attrType &&
             fieldName &&
-            (0, ramda_1.pipe)(mdm_sdk_1.getFilterOptionsForQueryBuilder, (0, ramda_1.map)(function (value) { return ({ value: value, label: (0, capitalize_1.default)((0, mdm_sdk_1.getFilterOptionLabel)(value)) }); }))(attrType, fieldName));
+            (0, ramda_1.pipe)(mdm_sdk_1.getFilterOptionsForQueryBuilder, (0, ramda_1.map)(function (value) { return ({ value: value, label: (0, utils_1.capitalize)((0, mdm_sdk_1.getFilterOptionLabel)(value)) }); }))(attrType, fieldName));
     var onChangeFilter = (0, react_1.useCallback)(function (filterOption) {
         var newFilter = {
             fieldName: fieldName,

package/cjs/components/AttributesFiltersBuilder/components/FilterSelector/styles.d.ts

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

package/cjs/components/AttributesFiltersBuilder/components/FilterSelector/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)({
     dropDownSelector: {
         width: '100%'

package/cjs/components/AttributesFiltersBuilder/components/RowActions/RowActions.js

@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Close_1 = __importDefault(require("@material-ui/icons/Close"));
-var AddCircle_1 = __importDefault(require("@material-ui/icons/AddCircle"));
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var AddCircle_1 = __importDefault(require("@mui/icons-material/AddCircle"));
 var index_1 = require("../../../SmallIconButton/index");
 var Duplicate_1 = __importDefault(require("../../../../icons/Duplicate"));
 var styles_1 = require("./styles");

package/cjs/components/AttributesFiltersBuilder/components/RowActions/styles.d.ts

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

package/cjs/components/AttributesFiltersBuilder/components/RowActions/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 ({
     actions: {
         width: '88px',

package/cjs/components/AttributesFiltersBuilder/components/ValuesEditor/styles.d.ts

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

package/cjs/components/AttributesFiltersBuilder/components/ValuesEditor/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)({
     input: {
         margin: 0,

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

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

package/cjs/components/AttributesFiltersBuilder/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 ({
     attrSelector: {
         width: '222px',

package/cjs/components/AttributesFiltersButton/ActionButtons/ActionButtons.js

@@ -5,14 +5,14 @@ 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 Button_1 = __importDefault(require("@mui/material/Button"));
 var styles_1 = require("./styles");
 var ActionButtons = function (_a) {
     var onClear = _a.onClear, onCancel = _a.onCancel, onApply = _a.onApply;
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement("div", { className: styles.buttonsWrapper },
-        react_1.default.createElement(Button_1.default, { onClick: onClear, variant: "text", color: "default", className: styles.clearButon }, ui_i18n_1.default.text('Clear all')),
-        react_1.default.createElement(Button_1.default, { onClick: onCancel, variant: "text", color: "default", className: styles.cancelButton }, ui_i18n_1.default.text('Cancel')),
+        react_1.default.createElement(Button_1.default, { onClick: onClear, variant: "text", className: styles.clearButon }, ui_i18n_1.default.text('Clear all')),
+        react_1.default.createElement(Button_1.default, { onClick: onCancel, variant: "text", className: styles.cancelButton }, ui_i18n_1.default.text('Cancel')),
         react_1.default.createElement(Button_1.default, { onClick: onApply, variant: "text", color: "primary", className: styles.applyButton }, ui_i18n_1.default.text('Apply'))));
 };
 exports.default = ActionButtons;

package/cjs/components/AttributesFiltersButton/ActionButtons/styles.d.ts

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

package/cjs/components/AttributesFiltersButton/ActionButtons/styles.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 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 allButtonsStyle = {
     alignSelf: 'center'
 };

package/cjs/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -28,11 +28,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var FilterList_1 = __importDefault(require("@material-ui/icons/FilterList"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var Popover_1 = __importDefault(require("@mui/material/Popover"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var FilterList_1 = __importDefault(require("@mui/icons-material/FilterList"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Divider_1 = __importDefault(require("@mui/material/Divider"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AttributesFiltersBuilder_1 = __importDefault(require("../AttributesFiltersBuilder/AttributesFiltersBuilder"));
 var ActionButtons_1 = __importDefault(require("./ActionButtons/ActionButtons"));

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

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

package/cjs/components/AttributesFiltersButton/styles.js

@@ -1,8 +1,9 @@
 "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 ({
     triggerButton: {
         minWidth: 0,
         color: 'rgba(0,0,0,0.54)',
@@ -22,9 +23,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     divider: {
         marginBottom: '14px',
         marginLeft: '-16px',
-        background: 'rgba(0, 0, 0, 0.121569)'
+        borderColor: 'rgba(0, 0, 0, 0.121569)'
     },
     changedFiltersIndicator: {
-        backgroundColor: (0, styles_1.fade)(theme.palette.primary.main, 0.12)
+        backgroundColor: (0, styles_1.alpha)(theme.palette.primary.main, 0.12)
     }
 }); });

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

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

package/cjs/components/AutoSizeList/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: {
         overflow: 'hidden'

package/cjs/components/AvatarWithFallback/AvatarWithFallback.d.ts

@@ -3,7 +3,7 @@ type Props = {
     className?: string;
     icon?: string;
     avatarText?: string;
-    variant?: 'circle' | 'circular' | 'rounded' | 'square';
+    variant?: 'circular' | 'rounded' | 'square';
     rootClasses?: {
         iconRoot?: string;
         textRoot?: string;

package/cjs/components/AvatarWithFallback/AvatarWithFallback.js

@@ -48,7 +48,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var Avatar_1 = __importDefault(require("@material-ui/core/Avatar"));
+var Avatar_1 = __importDefault(require("@mui/material/Avatar"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var AvatarStates;

package/cjs/components/BasicAttributeSelector/AttributeTitle/AttributeTitle.js

@@ -7,7 +7,7 @@ var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
-var icons_1 = require("@material-ui/icons");
+var ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 var ExpandedValueTooltip_1 = __importDefault(require("../../ExpandedValueTooltip/ExpandedValueTooltip"));
 var SmallIconButton_1 = __importDefault(require("../../SmallIconButton/SmallIconButton"));
 var styles_1 = __importDefault(require("./styles"));
@@ -22,6 +22,6 @@ var AttributeTitle = function (_a) {
             _b), (_c = {}, _c[styles.disabled] = disabled, _c)) },
         react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label },
             react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.name, (_d = {}, _d[styles.disabled] = disabled, _d)) }, label || react_1.default.createElement("span", { className: styles.noSelect }, ui_i18n_1.default.text('Select attribute')))),
-        react_1.default.createElement(SmallIconButton_1.default, { size: 'M', icon: icons_1.ArrowDropDown, disabled: disabled })));
+        react_1.default.createElement(SmallIconButton_1.default, { size: 'M', icon: ArrowDropDown_1.default, disabled: disabled })));
 };
 exports.default = AttributeTitle;

package/cjs/components/BasicAttributeSelector/AttributeTitle/styles.d.ts

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

package/cjs/components/BasicAttributeSelector/AttributeTitle/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)({
     attribute: {
         cursor: 'pointer',

package/cjs/components/BasicAttributeSelector/BasicAttributeSelector.js

@@ -54,16 +54,11 @@ var BasicAttributeSelector = function (_a) {
     var clearFilterText = (0, react_1.useCallback)(function () { return setFilterText(''); }, []);
     var _m = (0, react_1.useState)([]), selectedAttributes = _m[0], setSelectedAttributes = _m[1];
     var clearSelectedAttributes = (0, react_1.useCallback)(function () { return setSelectedAttributes([]); }, []);
-    var filteredItemsGroups = (0, react_1.useMemo)(function () { return (0, helpers_2.prepareGroupsForSelectAttributeList)(filterText, itemsGroups); }, [
-        itemsGroups,
-        filterText
-    ]);
+    var filteredItemsGroups = (0, react_1.useMemo)(function () { return (0, helpers_2.prepareGroupsForSelectAttributeList)(filterText, itemsGroups); }, [itemsGroups, filterText]);
     var items = (0, react_1.useMemo)(function () {
         return (0, ramda_1.pipe)((0, ramda_1.when)((0, ramda_1.always)(ungroup), (0, ramda_1.chain)((0, ramda_1.pipe)((0, ramda_1.prop)('items'), ramda_1.flatten, (0, ramda_1.map)((0, ramda_1.pick)(['item', 'level']))))), helpers_3.flattenGroupedItemsData)(filteredItemsGroups);
     }, [ungroup, filteredItemsGroups]);
-    var containerWidth = (0, react_1.useMemo)(function () { return Math.max((0, helpers_2.getContainerWidth)(filteredItemsGroups), ATTRIBUTES_LIST_WIDTH); }, [
-        filteredItemsGroups
-    ]);
+    var containerWidth = (0, react_1.useMemo)(function () { return Math.max((0, helpers_2.getContainerWidth)(filteredItemsGroups), ATTRIBUTES_LIST_WIDTH); }, [filteredItemsGroups]);
     var handleOnClose = (0, ramda_1.pipe)((0, ramda_1.tap)((0, ramda_1.pipe)(clearSelectedAttributes, clearFilterText, closePopup)), onRestoreFocus);
     var searchInputRef = (0, react_1.useRef)();
     var onListItemClick = (0, react_1.useCallback)(function (attribute, checked) {

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

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

package/cjs/components/BasicAttributeSelector/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)({
     selector: {
         minWidth: '200px',

package/cjs/components/BasicTableView/BasicTable/cell-value-renderers/styles.d.ts

@@ -1,2 +1,2 @@
 export const BLOB_HEIGHT: 100;
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"defaultWrapper" | "blobWrapper">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"defaultWrapper" | "blobWrapper">;

package/cjs/components/BasicTableView/BasicTable/cell-value-renderers/styles.js

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

package/cjs/components/BasicTableView/BasicTable/hooks/useCollapsibleTableRows.js

@@ -10,7 +10,9 @@ var useCollapsibleTableRows = function (_a) {
     var getRowMaxValuesCount = (0, react_1.useCallback)(function (rowIndex) {
         return expandedIndexes.includes(rowIndex) ? Infinity : maxRowValuesCount;
     }, [expandedIndexes, maxRowValuesCount]);
-    var tableRowsData = (0, react_1.useMemo)(function () { return (0, dataHelpers_1.getTableRowsData)(rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue); }, [rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue]);
+    var tableRowsData = (0, react_1.useMemo)(function () {
+        return (0, dataHelpers_1.getTableRowsData)(rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue);
+    }, [rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue]);
     var toggleRowCollapse = (0, react_1.useCallback)(function (rowIndex) {
         setExpandedIndexes(function (expandedIndexes) {
             var index = expandedIndexes.findIndex((0, ramda_1.equals)(rowIndex));

package/cjs/components/BasicTableView/BasicTableHeader/ColumnsSettings/styles.d.ts

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

package/cjs/components/BasicTableView/BasicTableHeader/ColumnsSettings/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)({
     popup: {
         minWidth: '200px'

package/cjs/components/BasicTableView/BasicTableHeader/FilterButton/FilterButton.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var IconButton_1 = __importDefault(require("@material-ui/core/IconButton"));
-var Close_1 = __importDefault(require("@material-ui/icons/Close"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var Filter_1 = __importDefault(require("../../../../icons/Filter"));
 var styles_1 = require("./styles");
 var FilterButton = function (_a) {
     var enabled = _a.enabled, onClick = _a.onClick;
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement(Tooltip_1.default, { title: enabled ? ui_i18n_1.default.text('Clear all filters') : ui_i18n_1.default.text('Filter') },
-        react_1.default.createElement(IconButton_1.default, { onClick: onClick, classes: { root: styles.button } }, enabled ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(IconButton_1.default, { onClick: onClick, classes: { root: styles.button }, size: "large" }, enabled ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Filter_1.default, { className: styles['filterIcon--enabled'] }),
             react_1.default.createElement(Close_1.default, { color: "primary", className: styles.closeIcon }))) : (react_1.default.createElement(Filter_1.default, null)))));
 };

package/cjs/components/BasicTableView/BasicTableHeader/FilterButton/styles.d.ts

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

package/cjs/components/BasicTableView/BasicTableHeader/FilterButton/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 ({
     'filterIcon--enabled': {
         color: theme.palette.primary.main