@reltio/components 1.4.1588 → 1.4.1590

package/cjs/components/editors/DateEditor/DateEditor.js

@@ -48,39 +48,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var pickers_1 = require("@material-ui/pickers");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var classnames_1 = __importDefault(require("classnames"));
-var moment_1 = __importDefault(require("moment"));
-var ramda_1 = require("ramda");
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Calendar_1 = __importDefault(require("../../../icons/Calendar"));
-var core_1 = require("../../../core");
+var ramda_1 = require("ramda");
+var moment_1 = __importDefault(require("moment"));
+var ramda_2 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
+var constants_1 = require("../constants");
 var styles_1 = require("./styles");
-var format = moment_1.default.localeData().longDateFormat('L');
 var DateEditor = function (_a) {
-    var _b, _c;
-    var _d;
-    var _e = _a.value, value = _e === void 0 ? null : _e, label = _a.label, _f = _a.variant, variant = _f === void 0 ? 'filled' : _f, onChange = _a.onChange, _g = _a.InputProps, InputProps = _g === void 0 ? {} : _g, _h = _a.InputLabelProps, InputLabelProps = _h === void 0 ? {} : _h, _j = _a.onBlur, onBlur = _j === void 0 ? core_1.noop : _j, _k = _a.onFocus, onFocus = _k === void 0 ? core_1.noop : _k, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps", "InputLabelProps", "onBlur", "onFocus"]);
+    var value = _a.value, _b = _a.minDate, minDate = _b === void 0 ? constants_1.DEFAULT_MIN_DATE : _b, _c = _a.maxDate, maxDate = _c === void 0 ? constants_1.DEFAULT_MAX_DATE : _c, format = _a.format, label = _a.label, onChange = _a.onChange, slotProps = _a.slotProps, otherProps = __rest(_a, ["value", "minDate", "maxDate", "format", "label", "onChange", "slotProps"]);
     var styles = (0, styles_1.useStyles)();
-    var _l = (0, react_1.useState)(false), isCalendarOpen = _l[0], setIsCalendarOpen = _l[1];
-    return (react_1.default.createElement(pickers_1.KeyboardDatePicker, __assign({ format: format, variant: "inline", invalidDateMessage: ui_i18n_1.default.text('Invalid Date Format'), maxDateMessage: ui_i18n_1.default.text('Date should not be after maximal date'), minDateMessage: ui_i18n_1.default.text('Date should not be before minimal date'), inputVariant: variant, autoOk: true, onBlur: onBlur, onFocus: onFocus, InputAdornmentProps: { position: 'end', classes: { positionEnd: styles.adornmentPositionEnd } }, KeyboardButtonProps: {
-            classes: { root: styles.iconButtonRoot },
-            onKeyPress: (0, ramda_1.invoker)(0, 'stopPropagation')
-        }, keyboardIcon: react_1.default.createElement(Calendar_1.default, { className: styles.icon }), onChange: (0, mdm_sdk_1.debounce)((0, ramda_1.when)(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, (0, ramda_1.pipe)(mdm_sdk_1.utils.dates.momentToDate, mdm_sdk_1.utils.dates.clearDateTime, onChange)), 0), label: label, "aria-label": label, value: value, placeholder: ui_i18n_1.default.text(format), onClose: function () { return setIsCalendarOpen(false); }, onOpen: function () { return setIsCalendarOpen(true); }, InputProps: __assign({ classes: {
-                root: styles.inputRoot,
-                underline: (0, classnames_1.default)((_b = {}, _b[styles.underline] = isCalendarOpen, _b)),
-                adornedEnd: styles.adornedEnd
-            }, disableUnderline: (0, ramda_1.isNil)(value) }, InputProps), PopoverProps: {
-            anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'left'
+    var _d = react_1.default.useState(null), error = _d[0], setError = _d[1];
+    var errorMessage = (0, react_1.useMemo)(function () {
+        switch (error) {
+            case 'maxDate':
+                return ui_i18n_1.default.text('Date should not be after maximal date');
+            case 'minDate':
+                return ui_i18n_1.default.text('Date should not be before minimal date');
+            case 'invalidDate':
+                return ui_i18n_1.default.text('Invalid Date Format');
+            default:
+                return '';
+        }
+    }, [error]);
+    var editorValue = (0, ramda_2.isNil)(value) ? null : (0, moment_1.default)(value);
+    var editorMinDate = (0, ramda_2.isNil)(minDate) ? null : (0, moment_1.default)(minDate);
+    var editorMaxDate = (0, ramda_2.isNil)(maxDate) ? null : (0, moment_1.default)(maxDate);
+    var dateFormat = format || moment_1.default.localeData().longDateFormat('L');
+    // TODO: Fix types for InputProps/InputLabelProps in slotProps.textField
+    var editorSlotProps = (0, ramda_1.mergeDeepLeft)(slotProps, {
+        textField: {
+            size: 'small',
+            variant: 'filled',
+            helperText: errorMessage,
+            InputProps: {
+                classes: {
+                    root: styles.inputRoot
+                },
+                disableUnderline: (0, ramda_2.isNil)(editorValue)
             },
-            transformOrigin: {
-                vertical: 'top',
-                horizontal: 'left'
+            InputLabelProps: {
+                shrink: !(0, ramda_2.isNil)(label)
             }
-        }, InputLabelProps: __assign({ classes: __assign({ root: (0, classnames_1.default)((_c = {}, _c[styles.inputLabel] = isCalendarOpen, _c), (_d = InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.classes) === null || _d === void 0 ? void 0 : _d.root) }, InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.classes), shrink: !(0, ramda_1.isNil)(label) }, InputLabelProps) }, otherProps)));
+        },
+        popper: {
+            placement: 'bottom-start'
+        },
+        inputAdornment: {
+            position: 'end',
+            className: styles.adornedEnd
+        }
+    });
+    return (react_1.default.createElement(DatePicker_1.DatePicker, __assign({ format: dateFormat, slotProps: editorSlotProps, views: ['year', 'month', 'day'], label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: function (newError) { return setError(newError); }, onChange: (0, mdm_sdk_1.debounce)((0, ramda_2.when)((0, ramda_2.both)(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, mdm_sdk_1.utils.dates.isDateInRange(minDate, maxDate)), (0, ramda_2.pipe)(mdm_sdk_1.utils.dates.momentToDate, mdm_sdk_1.utils.dates.clearDateTime, onChange)), 0) }, otherProps)));
 };
 exports.default = DateEditor;

package/cjs/components/editors/DateEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "icon" | "inputLabel" | "adornedEnd" | "inputRoot" | "iconButtonRoot" | "adornmentPositionEnd">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "adornedEnd">;

package/cjs/components/editors/DateEditor/styles.js

@@ -1,26 +1,10 @@
 "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 ({
-    icon: {
-        color: theme.palette.text.secondary
-    },
-    iconButtonRoot: {
-        padding: 8
-    },
-    underline: {
-        '&:after': {
-            transform: 'scaleX(1)'
-        }
-    },
-    inputLabel: {
-        color: theme.palette.primary.main
-    },
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
     adornedEnd: {
-        paddingRight: 4
-    },
-    adornmentPositionEnd: {
+        paddingRight: 4,
         marginLeft: '-10px'
     },
     inputRoot: {
@@ -29,4 +13,4 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         lineHeight: '16px',
         overflow: 'hidden'
     }
-}); });
+});

package/cjs/components/editors/DateRangeEditor/DateRangeEditor.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { DataTypeDefinition } from '@reltio/mdm-sdk';
-import { TextFieldProps } from '@material-ui/core/TextField';
-import { MenuProps } from '@material-ui/core/Menu';
+import { TextFieldProps } from '@mui/material/TextField';
+import { MenuProps } from '@mui/material/Menu';
 import { Option, Values } from './helpers';
 export type DateRangeEditorProps = {
     label?: string;

package/cjs/components/editors/DateRangeEditor/DateRangeEditor.js

@@ -51,33 +51,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var moment_1 = __importDefault(require("moment"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Menu_1 = __importDefault(require("@material-ui/core/Menu"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Menu_1 = __importDefault(require("@mui/material/Menu"));
 var helpers_1 = require("./helpers");
 var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
 var DateRangePicker_1 = __importDefault(require("../../DateRangePicker/DateRangePicker"));
 var styles_1 = require("./styles");
-var localeFormat = moment_1.default.localeData().longDateFormat('L');
+var dateFormat = moment_1.default.localeData().longDateFormat('L');
 var DateRangeEditor = function (_a) {
-    var _b;
-    var _c;
-    var label = _a.label, values = _a.values, options = _a.options, _d = _a.getValuesDateRange, getValuesDateRange = _d === void 0 ? helpers_1.convertValuesToDate : _d, _e = _a.onChange, onChange = _e === void 0 ? ramda_1.identity : _e, _f = _a.dataTypeDefinition, dataTypeDefinition = _f === void 0 ? {
+    var _b, _c;
+    var _d;
+    var label = _a.label, values = _a.values, options = _a.options, _e = _a.getValuesDateRange, getValuesDateRange = _e === void 0 ? helpers_1.convertValuesToDate : _e, _f = _a.onChange, onChange = _f === void 0 ? ramda_1.identity : _f, _g = _a.dataTypeDefinition, dataTypeDefinition = _g === void 0 ? {
         type: mdm_sdk_1.DataTypes.TYPE_DATE
-    } : _f, DateRangePickerProps = _a.DateRangePickerProps, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "DateRangePickerProps", "TextFieldProps", "MenuProps"]);
+    } : _g, DateRangePickerProps = _a.DateRangePickerProps, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "DateRangePickerProps", "TextFieldProps", "MenuProps"]);
     var classes = otherProps.classes;
-    var placeholder = localeFormat + (dataTypeDefinition.type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP ? ' HH:MM' : '');
+    var isTimestamp = dataTypeDefinition.type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP;
+    var enhancePlaceHolder = isTimestamp ? function (timeFormat) { return timeFormat.replace(/^[hH]:/, 'HH:'); } : ramda_1.identity;
+    var placeholder = isTimestamp ? (0, mdm_sdk_1.getLocaleFormat)() : dateFormat;
     var rangeOptions = (0, react_1.useMemo)(function () {
         return options ||
             Object.values(mdm_sdk_1.AllDateRangeValues).map(function (option) { return ({ value: option, label: (0, mdm_sdk_1.getRangeOptionLabel)(option) }); });
     }, [options]);
     var inputRef = (0, react_1.useRef)(null);
-    var _g = (0, react_1.useState)(false), open = _g[0], setOpen = _g[1];
-    var _h = (0, react_1.useState)(), customValue = _h[0], setCustomValue = _h[1];
+    var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
+    var _j = (0, react_1.useState)(), customValue = _j[0], setCustomValue = _j[1];
     var styles = (0, styles_1.useStyles)();
     var onItemClick = function (value) {
         if (value === mdm_sdk_1.AllDateRangeValues.PICK_DATE) {
@@ -94,30 +95,31 @@ var DateRangeEditor = function (_a) {
         setCustomValue(null);
         setOpen(false);
     };
+    var editorPlaceholder = "".concat(enhancePlaceHolder(placeholder), " \u2014 ").concat(enhancePlaceHolder(placeholder)).toUpperCase();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(TextField_1.default, __assign({}, TextFieldProps, otherProps, { label: label, value: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.value) ||
-                ((_c = (0, helpers_1.getEditorValue)(placeholder, dataTypeDefinition, customValue || values, rangeOptions)) === null || _c === void 0 ? void 0 : _c.label), onClick: handleToggle, variant: "filled", margin: "dense", ref: inputRef, InputProps: __assign({ endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: {
+                ((_d = (0, helpers_1.getEditorValue)(placeholder, dataTypeDefinition, customValue || values, rangeOptions)) === null || _d === void 0 ? void 0 : _d.label), onClick: handleToggle, variant: "filled", size: "small", ref: inputRef, InputProps: __assign({ endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: {
                         classes: {
                             dropdownIndicator: (0, classnames_1.default)(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
                         },
                         menuIsOpen: open
                     }, innerProps: {} })), classes: {
-                    root: styles.inputRoot,
-                    underline: (0, classnames_1.default)((_b = {}, _b[styles.underline] = open, _b)),
+                    root: (0, classnames_1.default)(styles.inputRoot, (_b = {}, _b[styles.uppercase] = !customValue && Array.isArray(values), _b)),
+                    underline: (0, classnames_1.default)((_c = {}, _c[styles.underline] = open, _c)),
                     adornedEnd: styles.adornedEnd
                 }, disableUnderline: (0, ramda_1.isNil)(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
                 classes: {
                     root: open ? styles.inputLabel : undefined
                 },
                 shrink: !(0, ramda_1.isNil)(label)
-            }, placeholder: ui_i18n_1.default.text("".concat(placeholder, " \u2014 ").concat(placeholder)) })),
+            }, placeholder: editorPlaceholder })),
         react_1.default.createElement(Menu_1.default, __assign({ variant: "menu", open: open, autoFocus: false, classes: { paper: styles.paper }, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'left'
             }, transformOrigin: {
                 vertical: 'top',
                 horizontal: 'left'
-            }, elevation: 2, getContentAnchorEl: null, MenuListProps: {
+            }, elevation: 2, MenuListProps: {
                 autoFocusItem: open,
                 style: {
                     width: customValue ? '100%' : (0, ramda_1.prop)('clientWidth', inputRef.current)

package/cjs/components/editors/DateRangeEditor/helpers.js

@@ -4,7 +4,7 @@ exports.convertValuesToDate = exports.getEditorValue = void 0;
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var formatValue = function (value, dataTypeDefinition, placeholder) {
-    return (0, ramda_1.isNil)(value) ? "".concat(placeholder) : "".concat((0, mdm_sdk_1.formatDataTypeValue)({ dataTypeDefinition: dataTypeDefinition }, value));
+    return (0, ramda_1.isNil)(value) ? "".concat(placeholder) : "".concat((0, mdm_sdk_1.formatDataTypeValue)({ dataTypeDefinition: dataTypeDefinition, dateTimeMask: placeholder }, value));
 };
 var getEditorValue = (0, ramda_1.curry)(function (placeholder, dataTypeDefinition, value, options) {
     return (0, ramda_1.cond)([

package/cjs/components/editors/DateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "menuItem" | "inputLabel" | "adornedEnd" | "paper" | "inputRoot" | "dropdownIndicator" | "menuText">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "menuItem" | "inputRoot" | "adornedEnd" | "inputLabel" | "dropdownIndicator" | "paper" | "menuText">;

package/cjs/components/editors/DateRangeEditor/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 ({
     dropdownIndicator: {
         transition: 'transform .15s ease',
@@ -31,6 +31,11 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     adornedEnd: {
         paddingRight: 4
     },
+    uppercase: {
+        '& > input': {
+            textTransform: 'uppercase'
+        }
+    },
     inputRoot: {
         fontSize: '14px',
         letterSpacing: 0,

package/cjs/components/editors/DependentLookupEditor/styles.d.ts

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

package/cjs/components/editors/DependentLookupEditor/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 ({
     option: {
         paddingLeft: '35px'

package/cjs/components/editors/DropDownEditor/DropDownEditor.js

@@ -25,10 +25,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var react_1 = __importDefault(require("react"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
 var MultipliableSelect_1 = __importDefault(require("../../MultipliableSelect/MultipliableSelect"));
 var prop_types_1 = __importDefault(require("prop-types"));
-var react_1 = __importDefault(require("react"));
 var prop_types_2 = require("../../../constants/prop-types");
 var ramda_1 = require("ramda");
 var findEntryByValue = function (entries) { return function (value) { return entries.find((0, ramda_1.propEq)('value', value)); }; };

package/cjs/components/editors/EditorsFactory.d.ts

@@ -1,7 +1,8 @@
 export default class EditorsFactory {
-    static build(type: any, { fullWidth, TextFieldProps, color, ...otherProps }?: {
+    static build(type: any, { fullWidth, TextFieldProps, color, booleanRadioEditorClassName, ...otherProps }?: {
         fullWidth: any;
         TextFieldProps: any;
         color: any;
+        booleanRadioEditorClassName: any;
     }): JSX.Element;
 }

package/cjs/components/editors/EditorsFactory.js

@@ -42,7 +42,7 @@ var EditorsFactory = /** @class */ (function () {
     }
     EditorsFactory.build = function (type, _a) {
         if (_a === void 0) { _a = {}; }
-        var fullWidth = _a.fullWidth, TextFieldProps = _a.TextFieldProps, color = _a.color, otherProps = __rest(_a, ["fullWidth", "TextFieldProps", "color"]);
+        var fullWidth = _a.fullWidth, TextFieldProps = _a.TextFieldProps, color = _a.color, booleanRadioEditorClassName = _a.booleanRadioEditorClassName, otherProps = __rest(_a, ["fullWidth", "TextFieldProps", "color", "booleanRadioEditorClassName"]);
         switch (type) {
             case mdm_sdk_1.DataTypes.TYPE_STRING:
             case mdm_sdk_1.DataTypes.TYPE_CIK_ID:
@@ -55,7 +55,7 @@ var EditorsFactory = /** @class */ (function () {
                 return react_1.default.createElement(TextEditor_1.default, __assign({ fullWidth: fullWidth }, TextFieldProps, otherProps, { type: 'email' }));
             case mdm_sdk_1.DataTypes.TYPE_TEXT:
             case mdm_sdk_1.DataTypes.TYPE_BLOB:
-                return (react_1.default.createElement(TextEditor_1.default, __assign({ fullWidth: fullWidth, rowsMax: 7 }, TextFieldProps, otherProps, { multiline: true })));
+                return (react_1.default.createElement(TextEditor_1.default, __assign({ fullWidth: fullWidth, maxRows: 7, minRows: 2 }, TextFieldProps, otherProps, { multiline: true })));
             case mdm_sdk_1.DataTypes.TYPE_PASSWORD:
                 return react_1.default.createElement(TextEditor_1.default, __assign({ fullWidth: fullWidth }, TextFieldProps, otherProps, { type: "password" }));
             case mdm_sdk_1.DataTypes.TYPE_LONG:
@@ -70,13 +70,13 @@ var EditorsFactory = /** @class */ (function () {
             case mdm_sdk_1.DataTypes.TYPE_BOOLEAN:
             case mdm_sdk_1.DataTypes.TYPE_BOOLEAN_RADIO:
             case mdm_sdk_1.DataTypes.TYPE_RDM_LOOKUPS_NOT_RESOLVED:
-                return (react_1.default.createElement(BooleanRadioEditor_1.default, __assign({ color: color }, otherProps, { className: TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.booleanRadioEditorClassName })));
+                return react_1.default.createElement(BooleanRadioEditor_1.default, __assign({ color: color }, otherProps, { className: booleanRadioEditorClassName }));
             case mdm_sdk_1.DataTypes.TYPE_DATE:
             case mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE:
             case mdm_sdk_1.DataTypes.TYPE_LOCAL_DATE:
-                return react_1.default.createElement(DateEditor_1.default, __assign({}, TextFieldProps, otherProps));
+                return react_1.default.createElement(DateEditor_1.default, __assign({ slotProps: { textField: TextFieldProps } }, otherProps));
             case mdm_sdk_1.DataTypes.TYPE_TIMESTAMP:
-                return react_1.default.createElement(TimestampEditor_1.default, __assign({}, TextFieldProps, otherProps));
+                return react_1.default.createElement(TimestampEditor_1.default, __assign({ slotProps: { textField: TextFieldProps } }, otherProps));
             case mdm_sdk_1.DataTypes.TYPE_ENUM:
             case mdm_sdk_1.DataTypes.TYPE_SELECT:
                 return react_1.default.createElement(SelectEditor_1.default, __assign({ fullWidth: fullWidth, TextFieldProps: TextFieldProps }, otherProps));

package/cjs/components/editors/FileTypeEditor/styles.d.ts

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

package/cjs/components/editors/FileTypeEditor/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)({
     editor: {
         alignSelf: 'center'

package/cjs/components/editors/FilterEditor/FilterEditor.js

@@ -16,20 +16,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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 mdm_sdk_1 = require("@reltio/mdm-sdk");
 var DropDownEditor_1 = __importDefault(require("../DropDownEditor/DropDownEditor"));
 var FilterValueEditor_1 = __importDefault(require("./FilterValueEditor"));
 var constants_1 = require("../constants");
+var styles_1 = require("./styles");
 var FilterEditor = function (_a) {
     var value = _a.value, onChange = _a.onChange, filterOptions = _a.filterOptions, dataTypeDefinition = _a.dataTypeDefinition, classes = _a.classes, valueEditorProps = _a.valueEditorProps;
-    var styles = (0, constants_1.useSelectStyles)();
+    var selectStyles = (0, constants_1.useSelectStyles)();
+    var styles = (0, styles_1.useStyles)();
     var firstOption = filterOptions[0];
     var filterOption = value.filter || firstOption.value;
     var filter = __assign(__assign({}, value), { filter: filterOption });
     var canFilterAcceptValues = (0, mdm_sdk_1.checkIfOptionHasValues)(filterOption);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DropDownEditor_1.default, { TextFieldProps: constants_1.commonTextFieldProps, className: classes.option, value: filterOption, entries: filterOptions, onChange: (0, ramda_1.pipe)((0, ramda_1.assoc)('filter', ramda_1.__, filter), (0, ramda_1.assoc)('values', []), onChange), classes: { root: styles.root, icon: styles.icon } }),
+        react_1.default.createElement(DropDownEditor_1.default, { TextFieldProps: constants_1.commonTextFieldProps, className: (0, classnames_1.default)(classes.option, styles.dropDownEditor), value: filterOption, entries: filterOptions, onChange: (0, ramda_1.pipe)((0, ramda_1.assoc)('filter', ramda_1.__, filter), (0, ramda_1.assoc)('values', []), onChange), classes: { root: (0, classnames_1.default)(selectStyles.root, styles.selectorRoot), icon: selectStyles.icon } }),
         canFilterAcceptValues && (react_1.default.createElement(FilterValueEditor_1.default, __assign({ filter: filter, onChange: (0, ramda_1.pipe)((0, ramda_1.assoc)('values', ramda_1.__, filter), onChange), dataTypeDefinition: dataTypeDefinition }, valueEditorProps)))));
 };
 FilterEditor.propTypes = {

package/cjs/components/editors/FilterEditor/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dropDownEditor" | "selectorRoot">;

package/cjs/components/editors/FilterEditor/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    dropDownEditor: {
+        marginTop: '8px',
+        marginBottom: '4px'
+    },
+    selectorRoot: {
+        paddingTop: '11.5px',
+        paddingBottom: '12.5px',
+        lineHeight: '16px'
+    }
+});

package/cjs/components/editors/GroupedDropDownEditor/GroupedDropDownEditor.js

@@ -31,8 +31,8 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
-var Check_1 = __importDefault(require("@material-ui/icons/Check"));
-var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Check_1 = __importDefault(require("@mui/icons-material/Check"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
 var MultipliableSelect_1 = __importDefault(require("../../MultipliableSelect/MultipliableSelect"));
 var prop_types_2 = require("../../../constants/prop-types");
 var entriesHelpers_1 = require("./entriesHelpers");

package/cjs/components/editors/GroupedDropDownEditor/styles.d.ts

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

package/cjs/components/editors/GroupedDropDownEditor/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)({
     checkIcon: {
         transform: 'scale(.7)',

package/cjs/components/editors/NumberEditor/NumberEditor.js

@@ -36,17 +36,17 @@ var getThousandsGroupStyle = function (groupSize) {
         4: 'wan'
     }[groupSize]);
 };
-var NumberFormatCustom = function (_a) {
-    var inputRef = _a.inputRef, onChange = _a.onChange, integer = _a.integer, customInput = _a.customInput, format = _a.format, value = _a.value, otherProps = __rest(_a, ["inputRef", "onChange", "integer", "customInput", "format", "value"]);
+var NumberFormatCustom = react_1.default.forwardRef(function (_a, ref) {
+    var onChange = _a.onChange, integer = _a.integer, customInput = _a.customInput, format = _a.format, value = _a.value, otherProps = __rest(_a, ["onChange", "integer", "customInput", "format", "value"]);
     var _b = format || {}, strategy = _b.strategy, groupSize = _b.groupSize, restFormat = __rest(_b, ["strategy", "groupSize"]);
-    return (react_1.default.createElement(react_number_format_1.default, __assign({}, otherProps, { value: (0, mdm_sdk_1.applyPresentationStrategyToValue)(strategy, value), thousandsGroupStyle: getThousandsGroupStyle(groupSize) }, restFormat, { getInputRef: inputRef, isNumericString: true, onValueChange: function (values) {
+    return (react_1.default.createElement(react_number_format_1.default, __assign({}, otherProps, { value: (0, mdm_sdk_1.applyPresentationStrategyToValue)(strategy, value), thousandsGroupStyle: getThousandsGroupStyle(groupSize) }, restFormat, { getInputRef: ref, isNumericString: true, onValueChange: function (values) {
             onChange({
                 target: {
                     value: (0, mdm_sdk_1.revertPresentationStrategyForValue)(strategy, values.value)
                 }
             });
         }, decimalScale: integer ? 0 : undefined, customInput: customInput })));
-};
+});
 var NumberEditor = function (_a) {
     var integer = _a.integer, format = _a.format, inputProps = _a.inputProps, InputProps = _a.InputProps, otherProps = __rest(_a, ["integer", "format", "inputProps", "InputProps"]);
     return (react_1.default.createElement(TextEditor_1.default, __assign({}, otherProps, { inputProps: __assign({ integer: integer, format: format }, inputProps), InputProps: __assign(__assign({}, InputProps), { inputComponent: NumberFormatCustom }), getValueLabel: (0, mdm_sdk_1.formatNumber)(format) })));

package/cjs/components/editors/RangeDataTypeValueEditor/RangeDataTypeValueEditor.js

@@ -51,8 +51,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var nanoid_1 = require("nanoid");
-var FormControl_1 = __importDefault(require("@material-ui/core/FormControl"));
-var InputLabel_1 = __importDefault(require("@material-ui/core/InputLabel"));
+var FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+var InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
 var DataTypeValueEditor_1 = __importDefault(require("../DataTypeValueEditor/DataTypeValueEditor"));
 var ramda_1 = require("ramda");
 var styles_1 = require("./styles");
@@ -72,10 +72,10 @@ var RangeDataTypeValueEditor = function (_a) {
     }
     else {
         return (react_1.default.createElement("div", { className: styles['range-editor'] },
-            react_1.default.createElement(FormControl_1.default, { fullWidth: true, className: styles['range-editor__control'] },
+            react_1.default.createElement(FormControl_1.default, { variant: "standard", fullWidth: true, className: styles['range-editor__control'] },
                 react_1.default.createElement(InputLabel_1.default, { htmlFor: rangeEditorFromId.current, shrink: true }, ui_i18n_1.default.text('From')),
                 fromEditor),
-            react_1.default.createElement(FormControl_1.default, { fullWidth: true, className: styles['range-editor__control'] },
+            react_1.default.createElement(FormControl_1.default, { variant: "standard", fullWidth: true, className: styles['range-editor__control'] },
                 react_1.default.createElement(InputLabel_1.default, { htmlFor: rangeEditorToId.current, shrink: true }, ui_i18n_1.default.text('To')),
                 toEditor)));
     }

package/cjs/components/editors/RangeDataTypeValueEditor/styles.d.ts

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

package/cjs/components/editors/RangeDataTypeValueEditor/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)({
     'range-editor': {
         width: '100%'

package/cjs/components/editors/TimestampEditor/TimestampEditor.d.ts

@@ -1,19 +1,11 @@
 /// <reference types="react" />
-import { InputLabelProps } from '@material-ui/core/InputLabel';
-import { TextFieldProps } from '@material-ui/core/TextField';
 import { Moment } from 'moment';
-import { KeyboardDateTimePickerProps } from '@material-ui/pickers/DateTimePicker';
-type TimestampEditorProps = {
-    value: number | Date;
-    label?: string;
-    variant: TextFieldProps['variant'];
-    InputProps?: TextFieldProps['InputProps'];
-    format?: string;
-    InputLabelProps?: Partial<InputLabelProps>;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    onChange: (value: number | Date) => void;
-    onAccept?: (value: number | Date | Moment) => void;
-} & Omit<KeyboardDateTimePickerProps, 'value' | 'label' | 'variant' | 'size' | 'hiddenLabel' | 'onBlur' | 'onFocus' | 'onChange' | 'onAccept'>;
-declare const TimestampEditor: ({ value, label, variant, onChange, InputProps, format, ...otherProps }: TimestampEditorProps) => JSX.Element;
+import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
+type TimestampEditorProps = Omit<DateTimePickerProps<Moment>, 'value' | 'minDate' | 'maxDate' | 'onChange'> & {
+    minDate?: Date | number;
+    maxDate?: Date | number;
+    value?: Date | number;
+    onChange: (value: Date) => void;
+};
+declare const TimestampEditor: ({ value, minDate, maxDate, label, slotProps, onChange, format, ...otherProps }: TimestampEditorProps) => JSX.Element;
 export default TimestampEditor;