@reltio/components 1.4.1589 → 1.4.1591

package/esm/components/ActionButton/ActionButton.js

@@ -22,9 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 import { useStyles } from './styles';
 import { noop } from '../../core';
 import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
@@ -44,7 +44,7 @@ export var ActionButton = forwardRef(function (_a, ref) {
                 return (React.createElement(SmallIconButtonWithTooltip, __assign({ disabled: disabled, className: classnames(styles.iconButton, className), size: "S", tooltipTitle: label, onClick: onClick, icon: Icon, showForDisabled: true }, otherProps)));
             }
             case 'button': {
-                return (React.createElement(Button, __assign({ className: classnames(styles.button, className), disabled: disabled, startIcon: React.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon, label: styles.label } }, otherProps),
+                return (React.createElement(Button, __assign({ className: classnames(styles.button, className), disabled: disabled, startIcon: React.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon } }, otherProps),
                     React.createElement(ExpandedValueTooltip, { value: label },
                         React.createElement("div", { className: styles.overflowStyle }, label))));
             }

package/esm/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/esm/components/ActionButton/styles.js

@@ -1,6 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = 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,
@@ -20,12 +24,6 @@ export var useStyles = makeStyles(function (theme) { return ({
         height: '18px',
         alignItems: 'center'
     },
-    label: {
-        whiteSpace: 'nowrap',
-        fontSize: '14px',
-        lineHeight: '16px',
-        letterSpacing: 0
-    },
     overflowStyle: {
         overflow: 'hidden',
         whiteSpace: 'nowrap',

package/esm/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/esm/components/ArrowExpandButton/ArrowExpandButton.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import classnames from 'classnames';
 import SmallIconButton from '../SmallIconButton/SmallIconButton';
-import ArrowRight from '@material-ui/icons/ArrowRight';
+import ArrowRight from '@mui/icons-material/ArrowRight';
 import { useStyles } from './styles';
 var ArrowExpandButton = function (props) {
     var _a;

package/esm/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/esm/components/ArrowExpandButton/styles.js

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

package/esm/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/esm/components/AttributeGroupIcon/styles.js

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

package/esm/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/esm/components/AttributeListItem/AttributeListItem.js

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Checkbox from '@material-ui/core/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import MenuItem from '@mui/material/MenuItem';
 import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
 import { isNested } from '@reltio/mdm-sdk';
 import withTooltip from '../../HOCs/withTooltip/withTooltip';
@@ -25,9 +25,8 @@ var AttributeListItem = function (_a) {
     var renderIcon = function (attrType) {
         return groupId === 'recommended' ? (React.createElement(RecommendedIconWithTooltip, { className: styles.recommendedIcon, tooltipTitle: i18n.text('Recommended'), showForDisabled: true })) : (React.createElement(AttrTypeIcon, { 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.createElement(ExpandedValueTooltip, { value: labelInText || label, className: styles.itemTooltip, placement: "bottom-end" },
-        React.createElement(ListItem, { className: classnames(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.createElement(MenuItem, { className: classnames(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/esm/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/esm/components/AttributeListItem/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     container: {
         '& > $marginWrapper:first-child': {

package/esm/components/AttributeSelector/AttributeSelector.js

@@ -27,7 +27,7 @@ import { pipe, defaultTo } from 'ramda';
 import { useSelector } from 'react-redux';
 import mdmModule from '@reltio/mdm-module';
 import { getAttributeTypeSubAttributes } from '@reltio/mdm-sdk';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import MultiSelect from '../ReactSelect/MultiSelect';
 import MultiValue from '../ReactSelect/commonComponents/MultiValue';
 import DropdownIndicatorWithIconButton from '../commonReactSelectComponents/DropdownIndicatorWithIconButton';

package/esm/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/esm/components/AttributeSelector/styles.js

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

package/esm/components/AttributesFiltersBuilder/AttributesFiltersBuilder.js

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

package/esm/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js

@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, memo } from 'react';
 import i18n from 'ui-i18n';
 import { pipe, map } from 'ramda';
-import capitalize from '@material-ui/core/utils/capitalize';
 import { getFilterOptionLabel, getFilterOptionsForQueryBuilder } from '@reltio/mdm-sdk';
 import SimpleDropDownSelector from '../../../SimpleDropDownSelector/SimpleDropDownSelector';
 import { findValue } from '../../helpers';
 import useStyles from './styles';
+import { capitalize } from '@mui/material/utils';
 var FilterSelector = function (_a) {
     var _b;
     var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;

package/esm/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/esm/components/AttributesFiltersBuilder/components/FilterSelector/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var useStyles = makeStyles({
     dropDownSelector: {
         width: '100%'

package/esm/components/AttributesFiltersBuilder/components/RowActions/RowActions.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import i18n from 'ui-i18n';
-import CloseIcon from '@material-ui/icons/Close';
-import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@mui/icons-material/Close';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { SmallIconButtonWithTooltip } from '../../../SmallIconButton/index';
 import DuplicateIcon from '../../../../icons/Duplicate';
 import { useStyles } from './styles';

package/esm/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/esm/components/AttributesFiltersBuilder/components/RowActions/styles.js

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

package/esm/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/esm/components/AttributesFiltersBuilder/components/ValuesEditor/styles.js

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

package/esm/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/esm/components/AttributesFiltersBuilder/styles.js

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

package/esm/components/AttributesFiltersButton/ActionButtons/ActionButtons.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { useStyles } from './styles';
 var ActionButtons = function (_a) {
     var onClear = _a.onClear, onCancel = _a.onCancel, onApply = _a.onApply;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.buttonsWrapper },
-        React.createElement(Button, { onClick: onClear, variant: "text", color: "default", className: styles.clearButon }, i18n.text('Clear all')),
-        React.createElement(Button, { onClick: onCancel, variant: "text", color: "default", className: styles.cancelButton }, i18n.text('Cancel')),
+        React.createElement(Button, { onClick: onClear, variant: "text", className: styles.clearButon }, i18n.text('Clear all')),
+        React.createElement(Button, { onClick: onCancel, variant: "text", className: styles.cancelButton }, i18n.text('Cancel')),
         React.createElement(Button, { onClick: onApply, variant: "text", color: "primary", className: styles.applyButton }, i18n.text('Apply'))));
 };
 export default ActionButtons;

package/esm/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/esm/components/AttributesFiltersButton/ActionButtons/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';
 var allButtonsStyle = {
     alignSelf: 'center'
 };

package/esm/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -1,10 +1,10 @@
 import React, { useRef, useState, useEffect, useCallback, memo } from 'react';
 import i18n from 'ui-i18n';
-import Popover from '@material-ui/core/Popover';
-import Button from '@material-ui/core/Button';
-import FilterIcon from '@material-ui/icons/FilterList';
-import Typography from '@material-ui/core/Typography';
-import Divider from '@material-ui/core/Divider';
+import Popover from '@mui/material/Popover';
+import Button from '@mui/material/Button';
+import FilterIcon from '@mui/icons-material/FilterList';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
 import { buildFilterQueryString } from '@reltio/mdm-sdk';
 import AttributesFiltersBuilder from '../AttributesFiltersBuilder/AttributesFiltersBuilder';
 import ActionButtons from './ActionButtons/ActionButtons';

package/esm/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/esm/components/AttributesFiltersButton/styles.js

@@ -1,4 +1,5 @@
-import { makeStyles, fade } from '@material-ui/core/styles';
+import { alpha } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     triggerButton: {
         minWidth: 0,
@@ -19,9 +20,9 @@ export var useStyles = 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: fade(theme.palette.primary.main, 0.12)
+        backgroundColor: alpha(theme.palette.primary.main, 0.12)
     }
 }); });

package/esm/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/esm/components/AutoSizeList/styles.js

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

package/esm/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/esm/components/AvatarWithFallback/AvatarWithFallback.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import Avatar from '@material-ui/core/Avatar';
+import Avatar from '@mui/material/Avatar';
 import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
 var AvatarStates;

package/esm/components/BasicAttributeSelector/AttributeTitle/AttributeTitle.js

@@ -2,7 +2,7 @@ import React from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { either, prop } from 'ramda';
-import { ArrowDropDown } from '@material-ui/icons';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ExpandedValueTooltip from '../../ExpandedValueTooltip/ExpandedValueTooltip';
 import SmallIconButton from '../../SmallIconButton/SmallIconButton';
 import useStyles from './styles';
@@ -17,6 +17,6 @@ var AttributeTitle = function (_a) {
             _b), (_c = {}, _c[styles.disabled] = disabled, _c)) },
         React.createElement(ExpandedValueTooltip, { value: label },
             React.createElement("div", { className: classnames(styles.name, (_d = {}, _d[styles.disabled] = disabled, _d)) }, label || React.createElement("span", { className: styles.noSelect }, i18n.text('Select attribute')))),
-        React.createElement(SmallIconButton, { size: 'M', icon: ArrowDropDown, disabled: disabled })));
+        React.createElement(SmallIconButton, { size: 'M', icon: ArrowDropDownIcon, disabled: disabled })));
 };
 export default AttributeTitle;

package/esm/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/esm/components/BasicAttributeSelector/AttributeTitle/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var useStyles = makeStyles({
     attribute: {
         cursor: 'pointer',

package/esm/components/BasicAttributeSelector/BasicAttributeSelector.js

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

package/esm/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/esm/components/BasicAttributeSelector/styles.js

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

package/esm/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/esm/components/BasicTableView/BasicTable/cell-value-renderers/styles.js

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

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

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

package/esm/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/esm/components/BasicTableView/BasicTableHeader/ColumnsSettings/styles.js

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

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Tooltip from '@mui/material/Tooltip';
 import FilterIcon from '../../../../icons/Filter';
 import { useStyles } from './styles';
 var FilterButton = function (_a) {
     var enabled = _a.enabled, onClick = _a.onClick;
     var styles = useStyles();
     return (React.createElement(Tooltip, { title: enabled ? i18n.text('Clear all filters') : i18n.text('Filter') },
-        React.createElement(IconButton, { onClick: onClick, classes: { root: styles.button } }, enabled ? (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { onClick: onClick, classes: { root: styles.button }, size: "large" }, enabled ? (React.createElement(React.Fragment, null,
             React.createElement(FilterIcon, { className: styles['filterIcon--enabled'] }),
             React.createElement(CloseIcon, { color: "primary", className: styles.closeIcon }))) : (React.createElement(FilterIcon, null)))));
 };

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

package/esm/components/BasicTableView/BasicTablePagination/BasicTablePagination.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
 import classnames from 'classnames';
-import TablePagination from '@material-ui/core/TablePagination';
+import TablePagination from '@mui/material/TablePagination';
 import i18n from 'ui-i18n';
 import { getValue } from '../../../core/utils';
 import { nthArg, pipe, pathOr, identity } from 'ramda';
@@ -40,7 +40,7 @@ var BasicTablePagination = function (_a) {
         onChangeRowsPerPage(value);
         resetScrollbarPosition();
     }, [onChangePage, onChangeRowsPerPage, resetScrollbarPosition]);
-    return (React.createElement(TablePagination, { classes: __assign(__assign({}, classes), { root: classnames(styles.pagination, classes.root), select: classnames(styles.select, classes.select), caption: styles.caption, selectRoot: styles.selectRoot, actions: styles.actions }), component: "div", labelRowsPerPage: labelRowsPerPage || i18n.text('Rows per page:'), labelDisplayedRows: labelDisplayedRows, count: count, rowsPerPageOptions: rowsPerPageOptions, page: page, onChangePage: pipe(nthArg(1), handleChangePage), rowsPerPage: rowsPerPage, onChangeRowsPerPage: pipe(getValue, handleChangeRowsPerPage) }));
+    return (React.createElement(TablePagination, { classes: __assign(__assign({}, classes), { root: classnames(styles.pagination, classes.root), select: classnames(styles.select, classes.select), selectLabel: styles.caption, displayedRows: styles.caption, input: styles.selectRoot, actions: styles.actions }), backIconButtonProps: { size: 'large' }, nextIconButtonProps: { size: 'large' }, component: "div", labelRowsPerPage: labelRowsPerPage || i18n.text('Rows per page:'), labelDisplayedRows: labelDisplayedRows, count: count, rowsPerPageOptions: rowsPerPageOptions, page: page, onPageChange: pipe(nthArg(1), handleChangePage), rowsPerPage: rowsPerPage, onRowsPerPageChange: pipe(getValue, handleChangeRowsPerPage) }));
 };
 BasicTablePagination.propTypes = {
     classes: PropTypes.object,

package/esm/components/BasicTableView/BasicTablePagination/styles.d.ts

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

package/esm/components/BasicTableView/BasicTablePagination/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     pagination: {
         display: 'flex',
@@ -24,6 +24,6 @@ export var useStyles = makeStyles({
         textAlign: 'right'
     },
     actions: {
-        marginLeft: '32px'
+        marginLeft: '32px!important' //we need it, because of the more specific rule in the mui
     }
 });

package/esm/components/BasicTableView/CollapseRowButton/styles.d.ts

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

package/esm/components/BasicTableView/CollapseRowButton/styles.js

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