@reltio/components 1.4.1589 → 1.4.1591

package/cjs/components/MatchRulesSelector/MatchRulesSelector.js

@@ -41,10 +41,7 @@ var prepareOptions = function (options) {
 var MatchRulesSelector = function (_a) {
     var name = _a.name, values = _a.values, onChange = _a.onChange, entityType = _a.entityType, TextFieldProps = _a.TextFieldProps, fullWidth = _a.fullWidth;
     var metadata = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getMetadata);
-    var _b = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.partitionByMlMatch)((0, mdm_sdk_1.getMatchGroups)(metadata, entityType === null || entityType === void 0 ? void 0 : entityType.uri)); }, [
-        entityType === null || entityType === void 0 ? void 0 : entityType.uri,
-        metadata
-    ]), mlMatchRules = _b[0], matchRules = _b[1];
+    var _b = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.partitionByMlMatch)((0, mdm_sdk_1.getMatchGroups)(metadata, entityType === null || entityType === void 0 ? void 0 : entityType.uri)); }, [entityType === null || entityType === void 0 ? void 0 : entityType.uri, metadata]), mlMatchRules = _b[0], matchRules = _b[1];
     var options = (0, react_1.useMemo)(function () { return prepareOptions(name === mdm_sdk_1.MatchRulesAttrNames.matchRules ? matchRules : mlMatchRules); }, [name, matchRules, mlMatchRules]);
     return (react_1.default.createElement(MultiValueSelector_1.default, { values: values, onChange: onChange, options: options, TextFieldProps: TextFieldProps, fullWidth: fullWidth }));
 };

package/cjs/components/MetadataTypesSelector/ListLabel/ListLabel.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListLabel = void 0;
 var react_1 = __importStar(require("react"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var styles_1 = require("./styles");
 var helpers_1 = require("./helpers");
 var ListLabel = function (_a) {

package/cjs/components/MetadataTypesSelector/ListLabel/styles.d.ts

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

package/cjs/components/MetadataTypesSelector/ListLabel/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)({
     listLabelContainer: {
         display: 'flex',

package/cjs/components/MetadataTypesSelector/MetadataTypesSelector.js

@@ -42,8 +42,8 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-var ArrowDropDown_1 = __importDefault(require("@material-ui/icons/ArrowDropDown"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 var ListLabel_1 = require("./ListLabel/ListLabel");
 var SmallIconButton_1 = require("../SmallIconButton");
 var SelectionPopup_1 = __importDefault(require("../SelectionPopup/SelectionPopup"));
@@ -112,7 +112,6 @@ exports.MetadataTypesSelector = (0, react_1.memo)(function (_a) {
                         _d[styles['popup-opened-icon']] = isPopupOpen,
                         _d)), disabled: disabled })),
                 readOnly: true,
-                disabled: true,
                 disableUnderline: noTypesSelected && !enableEmptyValueUnderline
             }, inputProps: {
                 tabIndex: -1
@@ -120,7 +119,7 @@ exports.MetadataTypesSelector = (0, react_1.memo)(function (_a) {
                 classes: {
                     root: (0, classnames_1.default)(styles.inputLabel, classes.label)
                 }
-            }, value: "", onClick: disabled ? undefined : openPopup, classes: { root: (0, classnames_1.default)(styles.root, classes.root) }, margin: "dense", variant: "filled", disabled: disabled, "data-reltio-id": dataReltioId }),
+            }, value: "", onClick: disabled ? undefined : openPopup, classes: { root: (0, classnames_1.default)(styles.root, classes.root) }, size: "small", variant: "filled", disabled: disabled, "data-reltio-id": dataReltioId }),
         react_1.default.createElement(SelectionPopup_1.default, { open: isPopupOpen, anchorEl: rootRef.current, onClose: handleClose, onSearch: setFilterText, title: selectionPopupTitle, containerWidth: containerWidth, containerHeight: POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, transformOrigin: { horizontal: 'left', vertical: 'top' }, anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, PaperProps: (_e = {}, _e['data-reltio-id'] = "".concat(dataReltioId, "-popup"), _e) },
             react_1.default.createElement(SelectMetadataTypesList_1.SelectMetadataTypesList, { items: filteredItems, onItemClick: handleListItemClick, selectedItems: selectedItemsUris, width: containerWidth, height: LIST_HEIGHT, focusIndex: focusIndex }))));
 });

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "root" | "input" | "inputLabel" | "inputRoot" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "input" | "root" | "inputRoot" | "inputLabel" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;

package/cjs/components/MetadataTypesSelector/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: {
         borderRadius: '4px 4px 0 0',
@@ -15,6 +15,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         width: '100%',
+        cursor: 'pointer',
         top: 'calc(50% - 23px)'
     },
     inputText: {
@@ -33,7 +34,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
     input: {
         width: 0,
         cursor: 'pointer',
-        '&[disabled]': {
+        '&.Mui-disabled': {
             backgroundColor: 'transparent',
             cursor: 'default'
         },
@@ -51,6 +52,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
         fontSize: '14px',
         letterSpacing: 0,
         lineHeight: '16px',
+        cursor: 'pointer',
         '&$disabledInput': {
             backgroundColor: 'rgba(0, 0, 0, 0.03)',
             cursor: 'pointer',

package/cjs/components/ModeSwitcher/ModeSwitcher.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var ButtonGroup_1 = __importDefault(require("@material-ui/core/ButtonGroup"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
 var classnames_1 = __importDefault(require("classnames"));
 var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
 var styles_1 = __importDefault(require("./styles"));

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

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

package/cjs/components/ModeSwitcher/styles.js

@@ -1,14 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var styles_1 = require("@material-ui/core/styles");
-var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("@mui/styles");
+var useStyles = (0, styles_2.makeStyles)(function (theme) { return ({
     button: {
-        minWidth: '30px',
-        padding: '8px 8px',
-        justifyContent: 'start',
-        fill: 'rgba(0,0,0,0.54)',
-        textTransform: 'none',
-        borderColor: 'rgba(0,0,0,0.12)'
+        '&.MuiButtonGroup-grouped': {
+            minWidth: '30px',
+            padding: '8px 8px',
+            justifyContent: 'start',
+            fill: 'rgba(0,0,0,0.54)',
+            textTransform: 'none',
+            color: 'rgba(0,0,0,0.87)',
+            borderColor: 'rgba(0,0,0,0.12)',
+            '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.04)'
+            },
+            '&:not(:last-of-type):hover': {
+                borderRightColor: 'transparent'
+            },
+            '&$current': {
+                '& $icon': {
+                    color: theme.palette.primary.main
+                },
+                backgroundColor: (0, styles_1.alpha)(theme.palette.primary.main, 0.12),
+                fill: theme.palette.primary.main,
+                color: theme.palette.primary.main,
+                '&:hover': {
+                    backgroundColor: (0, styles_1.alpha)(theme.palette.primary.main, 0.24),
+                    borderRightColor: 'transparent'
+                }
+            }
+        }
     },
     icon: {
         color: 'rgba(0,0,0,0.54)',
@@ -23,16 +45,6 @@ var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         lineHeight: '15px',
         letterSpacing: 0
     },
-    current: {
-        '& $icon': {
-            color: theme.palette.primary.main
-        },
-        backgroundColor: (0, styles_1.fade)(theme.palette.primary.main, 0.12),
-        fill: theme.palette.primary.main,
-        color: theme.palette.primary.main,
-        '&:hover': {
-            backgroundColor: (0, styles_1.fade)(theme.palette.primary.main, 0.24)
-        }
-    }
+    current: {}
 }); });
 exports.default = useStyles;

package/cjs/components/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -27,11 +27,11 @@ exports.ModeSwitcherSelect = void 0;
 var react_1 = __importDefault(require("react"));
 var ramda_1 = require("ramda");
 var classnames_1 = __importDefault(require("classnames"));
-var Select_1 = __importDefault(require("@material-ui/core/Select"));
-var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Select_1 = __importDefault(require("@mui/material/Select"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var styles_1 = require("./styles");
 var isButton = function (value) { return 'onClick' in value; };
 var ModeSwitcherSelect = function (_a) {
@@ -67,7 +67,7 @@ var ModeSwitcherSelect = function (_a) {
         });
     };
     return (react_1.default.createElement(Select_1.default, { classes: {
-            root: styles.root,
+            select: styles.root,
             icon: styles.arrowIcon,
             outlined: styles.outlined
         }, value: value, onChange: handleChange, variant: "outlined", renderValue: function (value) {
@@ -84,8 +84,7 @@ var ModeSwitcherSelect = function (_a) {
             transformOrigin: {
                 vertical: 'top',
                 horizontal: 'right'
-            },
-            getContentAnchorEl: null
+            }
         }, disabled: disabled, "data-reltio-id": "reltio-profile-select-mode" }, renderMenuItems(__spreadArray(__spreadArray([], optionsGroup, true), buttonsGroup, true))));
 };
 exports.ModeSwitcherSelect = ModeSwitcherSelect;

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "menuItem" | "outlined" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "outlined" | "menuItem" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;

package/cjs/components/ModeSwitcherSelect/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 MAX_WIDTH_SELECT = 200;
 var SELECT_PADDING_RIGHT = 32;
 var SELECT_PADDING_LEFT = 12;
@@ -10,7 +10,10 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     root: {
         maxWidth: CALCULATED_MAX_WIDTH_SELECT,
         paddingTop: '9px',
-        paddingBottom: '9px'
+        paddingBottom: '9px',
+        '&$outlined': {
+            minHeight: '1.1876em'
+        }
     },
     outlined: {
         paddingRight: SELECT_PADDING_RIGHT,

package/cjs/components/MultiValueSelector/MultiValueSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextFieldProps as TextFieldPropsType } from '@material-ui/core/TextField';
+import { TextFieldProps as TextFieldPropsType } from '@mui/material/TextField';
 export type Option = {
     value: string;
     label: string;

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

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

package/cjs/components/MultiValueSelector/styles.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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)(function (theme) { return ({
     option: {
         paddingLeft: '35px'

package/cjs/components/MultilineMenuItem/MultilineMenuItem.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
-var ListItemText_1 = __importDefault(require("@material-ui/core/ListItemText"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
 var core_1 = require("../../core");
 var styles_1 = require("./styles");
 var MultilineMenuItem = (0, react_1.forwardRef)(function (_a, ref) {

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

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

package/cjs/components/MultilineMenuItem/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 ({
     menuItem: {
         whiteSpace: 'inherit',

package/cjs/components/MultipleInput/MultipleInput.js

@@ -59,22 +59,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_input_autosize_1 = __importDefault(require("react-input-autosize"));
 var classnames_1 = __importDefault(require("classnames"));
-var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
 var utils_1 = require("../../core/utils");
 var styles_1 = require("./styles");
 var ValueChip_1 = __importDefault(require("../ValueChip/ValueChip"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var AutosizeInputWrapper = function (_a) {
-    var CustomInputComponent = _a.CustomInputComponent, props = __rest(_a, ["CustomInputComponent"]);
-    return CustomInputComponent ? (react_1.default.createElement(CustomInputComponent, __assign({}, props, { customInput: react_input_autosize_1.default }))) : (react_1.default.createElement(react_input_autosize_1.default, __assign({}, props)));
-};
+var AutosizeInputWrapper = (0, react_1.forwardRef)(function (props, ref) {
+    var CustomInputComponent = props.CustomInputComponent, other = __rest(props, ["CustomInputComponent"]);
+    return CustomInputComponent ? (react_1.default.createElement(CustomInputComponent, __assign({}, other, { ref: ref, customInput: react_input_autosize_1.default }))) : (react_1.default.createElement(react_input_autosize_1.default, __assign({}, other, { ref: ref })));
+});
 AutosizeInputWrapper.propTypes = {
     CustomInputComponent: prop_types_1.default.elementType
 };
+AutosizeInputWrapper.displayName = 'AutosizeInputWrapper';
 var BACKSPACE_KEY_CODE = 8;
 var EMPTY_VALUES_EDIT_HINT = ui_i18n_1.default.text('Press Enter to add. You may enter multiple values');
 var isEmptyValue = (0, ramda_1.pipe)(ramda_1.trim, ramda_1.isEmpty);
@@ -103,7 +104,7 @@ var MultipleInput = function (_a) {
     var setUnfocused = function () { return setIsFocused(false); };
     var hintText = !hasValues && isFocused ? EMPTY_VALUES_EDIT_HINT : '';
     return (react_1.default.createElement(Tooltip_1.default, { title: hintText },
-        react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { classes: {
+        react_1.default.createElement(TextField_1.default, __assign({ variant: "standard" }, otherProps, { classes: {
                 root: classes.root
             }, value: inputValue, onChange: (0, ramda_1.pipe)(utils_1.getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: (0, classnames_1.default)(styles.inputRoot, root), input: (0, classnames_1.default)(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: (0, ramda_1.when)((0, ramda_1.propEq)('keyCode', BACKSPACE_KEY_CODE), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: (0, ramda_1.pipe)(appendInputValueIfNotEmpty, setUnfocused) }))));
 };

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

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

package/cjs/components/MultipleInput/styles.js

@@ -1,10 +1,11 @@
 "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)({
     inputRoot: {
-        flexWrap: 'wrap'
+        flexWrap: 'wrap',
+        paddingLeft: '8px'
     },
     autosizeInput: {
         width: 'auto',

package/cjs/components/MultipliableSelect/MultipliableSelect.js

@@ -25,20 +25,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
-var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-var styles_1 = require("./styles");
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
 var prop_types_2 = require("../../constants/prop-types");
 var utils_1 = require("../../core/utils");
 var ValueChip_1 = __importDefault(require("../ValueChip/ValueChip"));
+var styles_1 = require("./styles");
 var MultipliableSelect = function (_a) {
     var _b;
     var multiple = _a.multiple, value = _a.value, children = _a.children, _c = _a.getValueLabel, getValueLabel = _c === void 0 ? utils_1.noop : _c, _d = _a.getValuePlaceholder, getValuePlaceholder = _d === void 0 ? ramda_1.identity : _d, _e = _a.onChange, onChange = _e === void 0 ? utils_1.noop : _e, fullWidth = _a.fullWidth, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, classes = _a.classes, otherProps = __rest(_a, ["multiple", "value", "children", "getValueLabel", "getValuePlaceholder", "onChange", "fullWidth", "TextFieldProps", "MenuProps", "classes"]);
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(TextField_1.default, __assign({ select: true, fullWidth: fullWidth }, TextFieldProps, { value: (0, ramda_1.defaultTo)(multiple ? [] : '', value), onChange: (0, ramda_1.pipe)(utils_1.getValue, onChange), SelectProps: __assign(__assign({}, otherProps), { MenuProps: __assign({ getContentAnchorEl: null, anchorOrigin: { vertical: 'bottom', horizontal: 'left' } }, MenuProps), classes: __assign(__assign({}, classes), { root: (0, classnames_1.default)((_b = {}, _b[styles.multiSelect] = multiple, _b), (0, ramda_1.prop)('root', classes)) }), multiple: multiple, 
+    return (react_1.default.createElement(TextField_1.default, __assign({ variant: "standard", select: true, fullWidth: fullWidth }, TextFieldProps, { value: (0, ramda_1.defaultTo)(multiple ? [] : '', value), onChange: (0, ramda_1.pipe)(utils_1.getValue, onChange), SelectProps: __assign(__assign({}, otherProps), { MenuProps: __assign({ anchorOrigin: { vertical: 'bottom', horizontal: 'center' } }, MenuProps), classes: __assign(__assign({}, classes), { select: (0, classnames_1.default)((_b = {}, _b[styles.multiSelect] = multiple, _b), (0, ramda_1.prop)('root', classes), (0, ramda_1.prop)('select', classes)) }), multiple: multiple, 
             // eslint-disable-next-line react/display-name
             renderValue: function (selected) {
                 return multiple ? (react_1.default.createElement("div", { className: styles.chips }, selected.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value) || getValuePlaceholder(value), onMouseDown: function (event) { return event.stopPropagation(); }, onDelete: function () { return onChange((0, ramda_1.remove)(index, 1, selected)); } })); }))) : (getValueLabel(selected) || getValuePlaceholder(selected));

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

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

package/cjs/components/MultipliableSelect/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)({
     multiSelect: {
         padding: '3px 48px 3px 8px !important',

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

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

package/cjs/components/PivotingUriLink/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 ({
     link: {
         color: theme.palette.primary.main,

package/cjs/components/Popper/Popper.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
-import { PopperProps } from '@material-ui/core/Popper';
-declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps & {
+declare const Popper: React.ForwardRefExoticComponent<Pick<Omit<import("@mui/base").PopperProps, "direction"> & {
+    component?: React.ElementType<any>;
+    components?: {
+        Root?: React.ElementType<any>;
+    };
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps>;
+    };
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+} & {
     modal?: boolean;
     anchorEl?: HTMLElement | null;
     excludeAnchorFromBackdrop?: boolean;
     onClose?: () => void;
-}, "color" | "translate" | "transition" | "hidden" | "style" | "open" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "container" | "onClose" | "placement" | "disablePortal" | "keepMounted" | "anchorEl" | "modal" | "excludeAnchorFromBackdrop" | "modifiers" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "title" | "id" | "hidden" | "key" | "children" | "defaultValue" | "prefix" | "results" | "slot" | "style" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "container" | "transition" | "component" | "components" | "componentsProps" | "onClose" | "placement" | "slotProps" | "slots" | "anchorEl" | "disablePortal" | "keepMounted" | "modifiers" | "popperOptions" | "popperRef" | "modal" | "excludeAnchorFromBackdrop"> & React.RefAttributes<HTMLDivElement>>;
 export default Popper;

package/cjs/components/Popper/Popper.js

@@ -52,8 +52,8 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("./utils");
 var utils_2 = require("../../core/utils");
-var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
-var Popper_1 = __importDefault(require("@material-ui/core/Popper"));
+var Portal_1 = __importDefault(require("@mui/material/Portal"));
+var Popper_1 = __importDefault(require("@mui/material/Popper"));
 var styles_1 = require("./styles");
 var Popper = (0, react_1.forwardRef)(function (_a, ref) {
     var open = _a.open, anchorEl = _a.anchorEl, className = _a.className, _b = _a.modal, modal = _b === void 0 ? true : _b, _c = _a.excludeAnchorFromBackdrop, excludeAnchorFromBackdrop = _c === void 0 ? true : _c, _d = _a.onClose, onClose = _d === void 0 ? utils_2.noop : _d, otherProps = __rest(_a, ["open", "anchorEl", "className", "modal", "excludeAnchorFromBackdrop", "onClose"]);

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

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

package/cjs/components/Popper/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)({
     backdrop: {
         position: 'fixed',

package/cjs/components/PopupWithArrow/PopupWithArrow.js

@@ -51,8 +51,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupWithArrow = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
-var Fade_1 = __importDefault(require("@material-ui/core/Fade"));
+var Paper_1 = __importDefault(require("@mui/material/Paper"));
+var Fade_1 = __importDefault(require("@mui/material/Fade"));
 var Popper_1 = __importDefault(require("../Popper/Popper"));
 var styles_1 = require("./styles");
 var PopupWithArrow = function (_a) {
@@ -60,16 +60,25 @@ var PopupWithArrow = function (_a) {
     var styles = (0, styles_1.useStyles)();
     var AnimationWrapper = transition ? Fade_1.default : react_1.default.Fragment;
     var _b = (0, react_1.useState)(null), arrowRef = _b[0], setArrowRef = _b[1];
-    return (react_1.default.createElement(Popper_1.default, __assign({ className: (0, classnames_1.default)(styles.popper, className), modifiers: {
-            preventOverflow: {
-                boundariesElement: 'viewport',
-                padding: 14
+    return (react_1.default.createElement(Popper_1.default, __assign({ className: (0, classnames_1.default)(styles.popper, className), modifiers: [
+            {
+                name: 'preventOverflow',
+                enabled: true,
+                options: {
+                    rootBoundary: 'viewport',
+                    padding: 14,
+                    altAxis: true
+                }
             },
-            arrow: {
+            {
+                name: 'arrow',
                 enabled: true,
-                element: arrowRef
+                options: {
+                    element: arrowRef,
+                    padding: 4
+                }
             }
-        }, transition: transition, excludeAnchorFromBackdrop: false }, otherProps), function (_a) {
+        ], transition: transition, excludeAnchorFromBackdrop: false }, otherProps), function (_a) {
         var TransitionProps = _a.TransitionProps;
         return (react_1.default.createElement(AnimationWrapper, __assign({}, TransitionProps),
             react_1.default.createElement(Paper_1.default, { className: (0, classnames_1.default)(styles.paper, classes === null || classes === void 0 ? void 0 : classes.root) },

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

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

package/cjs/components/PopupWithArrow/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) {
     var color = theme.palette.background.paper;
     return {
@@ -10,44 +10,34 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) {
             maxWidth: 1000
         },
         popper: {
-            '&[x-placement*="bottom"] $arrow': {
+            '&[data-popper-placement*="bottom"] $arrow': {
                 top: 0,
-                left: 0,
                 marginTop: '-0.71em',
-                marginLeft: 4,
-                marginRight: 4,
                 '&::before': {
                     transformOrigin: '0 100%'
                 }
             },
-            '&[x-placement*="top"] $arrow': {
+            '&[data-popper-placement*="top"] $arrow': {
                 bottom: 0,
-                left: 0,
                 marginBottom: '-0.71em',
-                marginLeft: 4,
-                marginRight: 4,
                 '&::before': {
                     transformOrigin: '100% 0'
                 }
             },
-            '&[x-placement*="right"] $arrow': {
+            '&[data-popper-placement*="right"] $arrow': {
                 left: 0,
                 marginLeft: '-0.71em',
                 height: '1em',
                 width: '0.71em',
-                marginTop: 4,
-                marginBottom: 4,
                 '&::before': {
                     transformOrigin: '100% 100%'
                 }
             },
-            '&[x-placement*="left"] $arrow': {
+            '&[data-popper-placement*="left"] $arrow': {
                 right: 0,
                 marginRight: '-0.71em',
                 height: '1em',
                 width: '0.71em',
-                marginTop: 4,
-                marginBottom: 4,
                 '&::before': {
                     transformOrigin: '0 0'
                 }