@reltio/components 1.4.1585 → 1.4.1586-mui5-2

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<"placeholder" | "option" | "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,7 +25,7 @@ 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 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"));

package/cjs/components/editors/EditorsFactory.js

@@ -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:
@@ -74,9 +74,9 @@ var EditorsFactory = /** @class */ (function () {
             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: selectStyles.root, 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">;

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

@@ -0,0 +1,11 @@
+"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',
+        minHeight: '40px'
+    }
+});

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;

package/cjs/components/editors/TimestampEditor/TimestampEditor.js

@@ -48,52 +48,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var DateRange_1 = __importDefault(require("@material-ui/icons/DateRange"));
-var pickers_1 = require("@material-ui/pickers");
-var text_field_helper_1 = require("@material-ui/pickers/_helpers/text-field-helper");
-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 ramda_1 = require("ramda");
+var moment_1 = __importDefault(require("moment"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_2 = require("ramda");
+var DateTimePicker_1 = require("@mui/x-date-pickers/DateTimePicker");
+var timeViewRenderers_1 = require("@mui/x-date-pickers/timeViewRenderers");
+var constants_1 = require("../constants");
 var styles_1 = require("./styles");
-var dateFormat = moment_1.default.localeData().longDateFormat('L');
-var timeFormat = moment_1.default.localeData().longDateFormat('LTS');
-var makeAmPmFormatter = function (format) { return (0, text_field_helper_1.maskedDateFormatter)((0, text_field_helper_1.makeMaskFromFormat)(format, '_'), '_', /[^\dap]+/gi); };
 var TimestampEditor = function (_a) {
-    var _b;
-    var _c = _a.value, value = _c === void 0 ? null : _c, label = _a.label, _d = _a.variant, variant = _d === void 0 ? 'filled' : _d, onChange = _a.onChange, InputProps = _a.InputProps, format = _a.format, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps", "format"]);
+    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, label = _a.label, slotProps = _a.slotProps, onChange = _a.onChange, format = _a.format, otherProps = __rest(_a, ["value", "minDate", "maxDate", "label", "slotProps", "onChange", "format"]);
     var styles = (0, styles_1.useStyles)();
-    var _e = (0, react_1.useState)(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
-    var timestampFormat = format || "".concat(dateFormat, " ").concat(timeFormat);
-    var isAmPmFormat = timestampFormat && timestampFormat.toLowerCase().includes('a');
-    var timestampFormatWithTwoHoursDigits = timestampFormat.replace(/\s[hH]:/, function (str) { return ' ' + str[1] + str.trim(); });
-    return (react_1.default.createElement(pickers_1.KeyboardDateTimePicker, __assign({ format: timestampFormatWithTwoHoursDigits, rifmFormatter: isAmPmFormat ? makeAmPmFormatter(timestampFormatWithTwoHoursDigits) : undefined, 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, 
-        //there is a bug in the picker types that prevents time picker from showing seconds picker (see https://github.com/mui-org/material-ui-pickers/issues/739)
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore: wrong type
-        views: ['year', 'date', 'hours', 'minutes', 'seconds'], autoOk: true, InputAdornmentProps: { position: 'end' }, KeyboardButtonProps: {
-            classes: { root: styles.iconButtonRoot },
-            onKeyPress: (0, ramda_1.invoker)(0, 'stopPropagation')
-        }, keyboardIcon: react_1.default.createElement(DateRange_1.default, null), onChange: (0, ramda_1.when)(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, (0, ramda_1.pipe)(mdm_sdk_1.utils.dates.momentToDate, onChange)), label: label, "aria-label": label, value: value, placeholder: ui_i18n_1.default.text("".concat(dateFormat, " HH:MM").toUpperCase()), ampm: isAmPmFormat, 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 timestampFormat = format || (0, mdm_sdk_1.getLocaleFormat)();
+    // 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: {
-            classes: {
-                root: isCalendarOpen ? styles.inputLabel : undefined
-            },
-            shrink: !(0, ramda_1.isNil)(label)
-        } }, otherProps)));
+        },
+        popper: {
+            placement: 'bottom-start'
+        },
+        inputAdornment: {
+            position: 'end',
+            className: styles.adornedEnd
+        }
+    });
+    return (react_1.default.createElement(DateTimePicker_1.DateTimePicker, __assign({ format: timestampFormat, slotProps: editorSlotProps, views: ['year', 'month', 'day', 'hours', 'minutes', 'seconds'], viewRenderers: {
+            hours: timeViewRenderers_1.renderTimeViewClock,
+            minutes: timeViewRenderers_1.renderTimeViewClock,
+            seconds: timeViewRenderers_1.renderTimeViewClock
+        }, label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: function (newError) { return setError(newError); }, onChange: (0, ramda_2.when)(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, (0, ramda_2.pipe)(mdm_sdk_1.utils.dates.momentToDate, onChange)) }, otherProps)));
 };
 exports.default = TimestampEditor;

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

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

package/cjs/components/editors/TimestampEditor/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 ({
     iconButtonRoot: {
         padding: 8
@@ -18,6 +18,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         paddingRight: 4
     },
     inputRoot: {
+        '& > input': {
+            textTransform: 'uppercase'
+        },
         fontSize: '14px',
         letterSpacing: 0,
         lineHeight: '16px'

package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -60,9 +60,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_autosuggest_1 = __importDefault(require("react-autosuggest"));
 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 MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
-var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var Paper_1 = __importDefault(require("@mui/material/Paper"));
 var Popper_1 = __importDefault(require("../../Popper/Popper"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importStar(require("react"));
@@ -155,7 +155,7 @@ var TypeaheadEditor = function (_a) {
                 underline: (0, classnames_1.default)((_b = {}, _b[styles['input__underline']] = (0, mdm_sdk_1.isEmptyValue)(value), _b)),
                 input: (0, classnames_1.default)(styles['rawInput'], (0, ramda_1.path)(['classes', 'input'], InputProps))
             };
-            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (react_1.default.createElement(ValueChip_1.default, { key: item, label: item, onDelete: function () { return onChange((0, ramda_1.remove)(index, 1, value)); } })); }), inputComponent: react_input_autosize_1.default, classes: __assign(__assign({ root: (0, classnames_1.default)(styles['multiple-input__input'], (0, ramda_1.path)(['classes', 'root'], InputProps)) }, commonClasses), { input: (0, classnames_1.default)(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: (0, ramda_1.pipe)((0, ramda_1.tap)(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: (0, classnames_1.default)(styles['input__root'], (0, ramda_1.path)(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({ variant: "standard" }, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (react_1.default.createElement(ValueChip_1.default, { key: item, label: item, onDelete: function () { return onChange((0, ramda_1.remove)(index, 1, value)); } })); }), inputComponent: react_input_autosize_1.default, classes: __assign(__assign({ root: (0, classnames_1.default)(styles['multiple-input__input'], (0, ramda_1.path)(['classes', 'root'], InputProps)) }, commonClasses), { input: (0, classnames_1.default)(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (react_1.default.createElement(TextField_1.default, __assign({ variant: "standard" }, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: (0, ramda_1.pipe)((0, ramda_1.tap)(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: (0, classnames_1.default)(styles['input__root'], (0, ramda_1.path)(['classes', 'root'], InputProps)) }, commonClasses) }) })));
         }, renderSuggestionsContainer: function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (react_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"autosizeInput" | "typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"autosizeInput" | "typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;

package/cjs/components/editors/TypeaheadEditor/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)({
     'typeahead__suggestions-placeholder': {
         padding: '8px 16px',
@@ -40,7 +40,10 @@ exports.useStyles = (0, styles_1.makeStyles)({
         }
     },
     rawInput: {
-        height: '19px'
+        height: '19px',
+        lineHeight: '19px',
+        paddingTop: '10px',
+        paddingBottom: '11px'
     },
     'multiple-input__root': {
         flexWrap: 'wrap',

package/cjs/components/editors/commonComponents/MultiValueChip/MultiValueChip.js

@@ -18,7 +18,7 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var ramda_1 = require("ramda");
 var ValueChip_1 = __importDefault(require("../../../ValueChip/ValueChip"));
-var Cancel_1 = __importDefault(require("@material-ui/icons/Cancel"));
+var Cancel_1 = __importDefault(require("@mui/icons-material/Cancel"));
 var MultiValueChip = function (props) {
     var children = props.children, data = props.data, removeProps = props.removeProps;
     return (react_1.default.createElement(ValueChip_1.default, { tabIndex: -1, label: children, count: (0, ramda_1.prop)('formattedNumber', data), onDelete: removeProps.onClick, deleteIcon: react_1.default.createElement(Cancel_1.default, __assign({}, props.removeProps)) }));

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

@@ -1,7 +1,6 @@
-export namespace commonTextFieldProps {
-    const variant: string;
-    const margin: string;
-    const hiddenLabel: boolean;
-}
-export const useInputStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"marginDense" | "filledInputUnderline">;
-export const useSelectStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "root">;
+import { TextFieldProps } from '@mui/material';
+export declare const DEFAULT_MIN_DATE: Date;
+export declare const DEFAULT_MAX_DATE: Date;
+export declare const commonTextFieldProps: TextFieldProps;
+export declare const useInputStyles: (props?: any) => import("@mui/styles").ClassNameMap<"filledInputUnderline" | "marginDense">;
+export declare const useSelectStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "root">;

package/cjs/components/editors/constants.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectStyles = exports.useInputStyles = exports.commonTextFieldProps = void 0;
-var styles_1 = require("@material-ui/core/styles");
+exports.useSelectStyles = exports.useInputStyles = exports.commonTextFieldProps = exports.DEFAULT_MAX_DATE = exports.DEFAULT_MIN_DATE = void 0;
+var styles_1 = require("@mui/styles");
+exports.DEFAULT_MIN_DATE = new Date('1900-01-01');
+exports.DEFAULT_MAX_DATE = new Date('2099-12-31');
 exports.commonTextFieldProps = {
     variant: 'filled',
-    margin: 'dense',
-    hiddenLabel: true
+    size: 'small',
+    InputProps: {
+        hiddenLabel: true
+    }
 };
 exports.useInputStyles = (0, styles_1.makeStyles)({
     filledInputUnderline: {

package/cjs/components/history/ContributorsPanel/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root">;
 type StylesProps = {
     color: string;
 };
-export declare const useContributorStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "active" | "inactive" | "clickable">;
+export declare const useContributorStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"icon" | "active" | "inactive" | "clickable">;
 export {};