@reltio/components 1.4.1588 → 1.4.1590

package/esm/components/editors/DateRangeEditor/DateRangeEditor.js

@@ -23,33 +23,34 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import moment from 'moment';
-import i18n from 'ui-i18n';
 import { identity, isNil, prop } from 'ramda';
-import { DataTypes, AllDateRangeValues, getRangeOptionLabel } from '@reltio/mdm-sdk';
-import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
-import Menu from '@material-ui/core/Menu';
+import { DataTypes, AllDateRangeValues, getRangeOptionLabel, getLocaleFormat } from '@reltio/mdm-sdk';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
 import { getEditorValue, convertValuesToDate } from './helpers';
 import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
 import DateRangePicker from '../../DateRangePicker/DateRangePicker';
 import { useStyles } from './styles';
-var localeFormat = moment.localeData().longDateFormat('L');
+var dateFormat = moment.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 ? convertValuesToDate : _d, _e = _a.onChange, onChange = _e === void 0 ? 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 ? convertValuesToDate : _e, _f = _a.onChange, onChange = _f === void 0 ? identity : _f, _g = _a.dataTypeDefinition, dataTypeDefinition = _g === void 0 ? {
         type: 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 === DataTypes.TYPE_TIMESTAMP ? ' HH:MM' : '');
+    var isTimestamp = dataTypeDefinition.type === DataTypes.TYPE_TIMESTAMP;
+    var enhancePlaceHolder = isTimestamp ? function (timeFormat) { return timeFormat.replace(/^[hH]:/, 'HH:'); } : identity;
+    var placeholder = isTimestamp ? getLocaleFormat() : dateFormat;
     var rangeOptions = useMemo(function () {
         return options ||
             Object.values(AllDateRangeValues).map(function (option) { return ({ value: option, label: getRangeOptionLabel(option) }); });
     }, [options]);
     var inputRef = useRef(null);
-    var _g = useState(false), open = _g[0], setOpen = _g[1];
-    var _h = useState(), customValue = _h[0], setCustomValue = _h[1];
+    var _h = useState(false), open = _h[0], setOpen = _h[1];
+    var _j = useState(), customValue = _j[0], setCustomValue = _j[1];
     var styles = useStyles();
     var onItemClick = function (value) {
         if (value === AllDateRangeValues.PICK_DATE) {
@@ -66,30 +67,31 @@ var DateRangeEditor = function (_a) {
         setCustomValue(null);
         setOpen(false);
     };
+    var editorPlaceholder = "".concat(enhancePlaceHolder(placeholder), " \u2014 ").concat(enhancePlaceHolder(placeholder)).toUpperCase();
     return (React.createElement(React.Fragment, null,
         React.createElement(TextField, __assign({}, TextFieldProps, otherProps, { label: label, value: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.value) ||
-                ((_c = 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.createElement(DropdownIndicatorWithIconButton, { selectProps: {
+                ((_d = 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.createElement(DropdownIndicatorWithIconButton, { selectProps: {
                         classes: {
                             dropdownIndicator: classnames(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
                         },
                         menuIsOpen: open
                     }, innerProps: {} })), classes: {
-                    root: styles.inputRoot,
-                    underline: classnames((_b = {}, _b[styles.underline] = open, _b)),
+                    root: classnames(styles.inputRoot, (_b = {}, _b[styles.uppercase] = !customValue && Array.isArray(values), _b)),
+                    underline: classnames((_c = {}, _c[styles.underline] = open, _c)),
                     adornedEnd: styles.adornedEnd
                 }, disableUnderline: isNil(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
                 classes: {
                     root: open ? styles.inputLabel : undefined
                 },
                 shrink: !isNil(label)
-            }, placeholder: i18n.text("".concat(placeholder, " \u2014 ").concat(placeholder)) })),
+            }, placeholder: editorPlaceholder })),
         React.createElement(Menu, __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%' : prop('clientWidth', inputRef.current)

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

@@ -1,7 +1,7 @@
 import { always, cond, curry, defaultTo, is, isNil, map, pipe, propEq } from 'ramda';
 import { formatDataTypeValue, getDateRangeByValue, isEmptyValue } from '@reltio/mdm-sdk';
 var formatValue = function (value, dataTypeDefinition, placeholder) {
-    return isNil(value) ? "".concat(placeholder) : "".concat(formatDataTypeValue({ dataTypeDefinition: dataTypeDefinition }, value));
+    return isNil(value) ? "".concat(placeholder) : "".concat(formatDataTypeValue({ dataTypeDefinition: dataTypeDefinition, dateTimeMask: placeholder }, value));
 };
 var getEditorValue = curry(function (placeholder, dataTypeDefinition, value, options) {
     return cond([

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     dropdownIndicator: {
         transition: 'transform .15s ease',
@@ -28,6 +28,11 @@ export var useStyles = makeStyles(function (theme) { return ({
     adornedEnd: {
         paddingRight: 4
     },
+    uppercase: {
+        '& > input': {
+            textTransform: 'uppercase'
+        }
+    },
     inputRoot: {
         fontSize: '14px',
         letterSpacing: 0,

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

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

package/esm/components/editors/DropDownEditor/DropDownEditor.js

@@ -20,10 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import MenuItem from '@material-ui/core/MenuItem';
+import React from 'react';
+import MenuItem from '@mui/material/MenuItem';
 import MultipliableSelect from '../../MultipliableSelect/MultipliableSelect';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { DropDownEntryType } from '../../../constants/prop-types';
 import { pipe, prop, propEq } from 'ramda';
 var findEntryByValue = function (entries) { return function (value) { return entries.find(propEq('value', value)); }; };

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

@@ -37,7 +37,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 DataTypes.TYPE_STRING:
             case DataTypes.TYPE_CIK_ID:
@@ -50,7 +50,7 @@ var EditorsFactory = /** @class */ (function () {
                 return React.createElement(TextEditor, __assign({ fullWidth: fullWidth }, TextFieldProps, otherProps, { type: 'email' }));
             case DataTypes.TYPE_TEXT:
             case DataTypes.TYPE_BLOB:
-                return (React.createElement(TextEditor, __assign({ fullWidth: fullWidth, rowsMax: 7 }, TextFieldProps, otherProps, { multiline: true })));
+                return (React.createElement(TextEditor, __assign({ fullWidth: fullWidth, maxRows: 7, minRows: 2 }, TextFieldProps, otherProps, { multiline: true })));
             case DataTypes.TYPE_PASSWORD:
                 return React.createElement(TextEditor, __assign({ fullWidth: fullWidth }, TextFieldProps, otherProps, { type: "password" }));
             case DataTypes.TYPE_LONG:
@@ -65,13 +65,13 @@ var EditorsFactory = /** @class */ (function () {
             case DataTypes.TYPE_BOOLEAN:
             case DataTypes.TYPE_BOOLEAN_RADIO:
             case DataTypes.TYPE_RDM_LOOKUPS_NOT_RESOLVED:
-                return (React.createElement(BooleanRadioEditor, __assign({ color: color }, otherProps, { className: TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.booleanRadioEditorClassName })));
+                return React.createElement(BooleanRadioEditor, __assign({ color: color }, otherProps, { className: booleanRadioEditorClassName }));
             case DataTypes.TYPE_DATE:
             case DataTypes.TYPE_ACTIVENESS_DATE:
             case DataTypes.TYPE_LOCAL_DATE:
-                return React.createElement(DateEditor, __assign({}, TextFieldProps, otherProps));
+                return React.createElement(DateEditor, __assign({ slotProps: { textField: TextFieldProps } }, otherProps));
             case DataTypes.TYPE_TIMESTAMP:
-                return React.createElement(TimestampEditor, __assign({}, TextFieldProps, otherProps));
+                return React.createElement(TimestampEditor, __assign({ slotProps: { textField: TextFieldProps } }, otherProps));
             case DataTypes.TYPE_ENUM:
             case DataTypes.TYPE_SELECT:
                 return React.createElement(SelectEditor, __assign({ fullWidth: fullWidth, TextFieldProps: TextFieldProps }, otherProps));

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

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

package/esm/components/editors/FilterEditor/FilterEditor.js

@@ -11,20 +11,23 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { __, assoc, pipe } from 'ramda';
 import { checkIfOptionHasValues, FilterType } from '@reltio/mdm-sdk';
 import DropDownEditor from '../DropDownEditor/DropDownEditor';
 import FilterValueEditor from './FilterValueEditor';
 import { commonTextFieldProps, useSelectStyles } from '../constants';
+import { useStyles } from './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 = useSelectStyles();
+    var selectStyles = useSelectStyles();
+    var styles = useStyles();
     var firstOption = filterOptions[0];
     var filterOption = value.filter || firstOption.value;
     var filter = __assign(__assign({}, value), { filter: filterOption });
     var canFilterAcceptValues = checkIfOptionHasValues(filterOption);
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropDownEditor, { TextFieldProps: commonTextFieldProps, className: classes.option, value: filterOption, entries: filterOptions, onChange: pipe(assoc('filter', __, filter), assoc('values', []), onChange), classes: { root: styles.root, icon: styles.icon } }),
+        React.createElement(DropDownEditor, { TextFieldProps: commonTextFieldProps, className: classnames(classes.option, styles.dropDownEditor), value: filterOption, entries: filterOptions, onChange: pipe(assoc('filter', __, filter), assoc('values', []), onChange), classes: { root: classnames(selectStyles.root, styles.selectorRoot), icon: selectStyles.icon } }),
         canFilterAcceptValues && (React.createElement(FilterValueEditor, __assign({ filter: filter, onChange: pipe(assoc('values', __, filter), onChange), dataTypeDefinition: dataTypeDefinition }, valueEditorProps)))));
 };
 FilterEditor.propTypes = {

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

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

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

@@ -0,0 +1,12 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    dropDownEditor: {
+        marginTop: '8px',
+        marginBottom: '4px'
+    },
+    selectorRoot: {
+        paddingTop: '11.5px',
+        paddingBottom: '12.5px',
+        lineHeight: '16px'
+    }
+});

package/esm/components/editors/GroupedDropDownEditor/GroupedDropDownEditor.js

@@ -25,8 +25,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import { isNil, pipe, prop } from 'ramda';
-import CheckIcon from '@material-ui/icons/Check';
-import MenuItem from '@material-ui/core/MenuItem';
+import CheckIcon from '@mui/icons-material/Check';
+import MenuItem from '@mui/material/MenuItem';
 import MultipliableSelect from '../../MultipliableSelect/MultipliableSelect';
 import { DropDownEntryType, DropDownGroupEntryType, SelectValueType } from '../../../constants/prop-types';
 import { findEntryByValue, flattenGroupedEntries } from './entriesHelpers';

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     checkIcon: {
         transform: 'scale(.7)',

package/esm/components/editors/NumberEditor/NumberEditor.js

@@ -31,17 +31,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.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.createElement(NumberFormat, __assign({}, otherProps, { value: applyPresentationStrategyToValue(strategy, value), thousandsGroupStyle: getThousandsGroupStyle(groupSize) }, restFormat, { getInputRef: inputRef, isNumericString: true, onValueChange: function (values) {
+    return (React.createElement(NumberFormat, __assign({}, otherProps, { value: applyPresentationStrategyToValue(strategy, value), thousandsGroupStyle: getThousandsGroupStyle(groupSize) }, restFormat, { getInputRef: ref, isNumericString: true, onValueChange: function (values) {
             onChange({
                 target: {
                     value: 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.createElement(TextEditor, __assign({}, otherProps, { inputProps: __assign({ integer: integer, format: format }, inputProps), InputProps: __assign(__assign({}, InputProps), { inputComponent: NumberFormatCustom }), getValueLabel: formatNumber(format) })));

package/esm/components/editors/RangeDataTypeValueEditor/RangeDataTypeValueEditor.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { nanoid } from 'nanoid';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
 import DataTypeValueEditor from '../DataTypeValueEditor/DataTypeValueEditor';
 import { __, pipe, update } from 'ramda';
 import { useStyles } from './styles';
@@ -44,10 +44,10 @@ var RangeDataTypeValueEditor = function (_a) {
     }
     else {
         return (React.createElement("div", { className: styles['range-editor'] },
-            React.createElement(FormControl, { fullWidth: true, className: styles['range-editor__control'] },
+            React.createElement(FormControl, { variant: "standard", fullWidth: true, className: styles['range-editor__control'] },
                 React.createElement(InputLabel, { htmlFor: rangeEditorFromId.current, shrink: true }, i18n.text('From')),
                 fromEditor),
-            React.createElement(FormControl, { fullWidth: true, className: styles['range-editor__control'] },
+            React.createElement(FormControl, { variant: "standard", fullWidth: true, className: styles['range-editor__control'] },
                 React.createElement(InputLabel, { htmlFor: rangeEditorToId.current, shrink: true }, i18n.text('To')),
                 toEditor)));
     }

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

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

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

@@ -20,52 +20,64 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import DateRangeIcon from '@material-ui/icons/DateRange';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
-import { makeMaskFromFormat, maskedDateFormatter } from '@material-ui/pickers/_helpers/text-field-helper';
-import { utils } from '@reltio/mdm-sdk';
-import classnames from 'classnames';
-import moment from 'moment';
-import { invoker, isNil, pipe, when } from 'ramda';
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
 import i18n from 'ui-i18n';
+import { mergeDeepLeft } from 'ramda';
+import moment from 'moment';
+import { getLocaleFormat, utils } from '@reltio/mdm-sdk';
+import { isNil, pipe, when } from 'ramda';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
+import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../constants';
 import { useStyles } from './styles';
-var dateFormat = moment.localeData().longDateFormat('L');
-var timeFormat = moment.localeData().longDateFormat('LTS');
-var makeAmPmFormatter = function (format) { return maskedDateFormatter(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 ? DEFAULT_MIN_DATE : _b, _c = _a.maxDate, maxDate = _c === void 0 ? 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 = useStyles();
-    var _e = 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.createElement(KeyboardDateTimePicker, __assign({ format: timestampFormatWithTwoHoursDigits, rifmFormatter: isAmPmFormat ? makeAmPmFormatter(timestampFormatWithTwoHoursDigits) : undefined, variant: "inline", invalidDateMessage: i18n.text('Invalid Date Format'), maxDateMessage: i18n.text('Date should not be after maximal date'), minDateMessage: i18n.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: invoker(0, 'stopPropagation')
-        }, keyboardIcon: React.createElement(DateRangeIcon, null), onChange: when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, onChange)), label: label, "aria-label": label, value: value, placeholder: i18n.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: classnames((_b = {}, _b[styles.underline] = isCalendarOpen, _b)),
-                adornedEnd: styles.adornedEnd
-            }, disableUnderline: isNil(value) }, InputProps), PopoverProps: {
-            anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'left'
+    var _d = React.useState(null), error = _d[0], setError = _d[1];
+    var errorMessage = useMemo(function () {
+        switch (error) {
+            case 'maxDate':
+                return i18n.text('Date should not be after maximal date');
+            case 'minDate':
+                return i18n.text('Date should not be before minimal date');
+            case 'invalidDate':
+                return i18n.text('Invalid Date Format');
+            default:
+                return '';
+        }
+    }, [error]);
+    var editorValue = isNil(value) ? null : moment(value);
+    var editorMinDate = isNil(minDate) ? null : moment(minDate);
+    var editorMaxDate = isNil(maxDate) ? null : moment(maxDate);
+    var timestampFormat = format || getLocaleFormat();
+    // TODO: Fix types for InputProps/InputLabelProps in slotProps.textField
+    var editorSlotProps = mergeDeepLeft(slotProps, {
+        textField: {
+            size: 'small',
+            variant: 'filled',
+            helperText: errorMessage,
+            InputProps: {
+                classes: {
+                    root: styles.inputRoot
+                },
+                disableUnderline: isNil(editorValue)
             },
-            transformOrigin: {
-                vertical: 'top',
-                horizontal: 'left'
+            InputLabelProps: {
+                shrink: !isNil(label)
             }
-        }, InputLabelProps: {
-            classes: {
-                root: isCalendarOpen ? styles.inputLabel : undefined
-            },
-            shrink: !isNil(label)
-        } }, otherProps)));
+        },
+        popper: {
+            placement: 'bottom-start'
+        },
+        inputAdornment: {
+            position: 'end',
+            className: styles.adornedEnd
+        }
+    });
+    return (React.createElement(DateTimePicker, __assign({ format: timestampFormat, slotProps: editorSlotProps, views: ['year', 'month', 'day', 'hours', 'minutes', 'seconds'], viewRenderers: {
+            hours: renderTimeViewClock,
+            minutes: renderTimeViewClock,
+            seconds: renderTimeViewClock
+        }, label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: function (newError) { return setError(newError); }, onChange: when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, onChange)) }, otherProps)));
 };
 export default TimestampEditor;

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     iconButtonRoot: {
         padding: 8
@@ -15,6 +15,9 @@ export var useStyles = makeStyles(function (theme) { return ({
         paddingRight: 4
     },
     inputRoot: {
+        '& > input': {
+            textTransform: 'uppercase'
+        },
         fontSize: '14px',
         letterSpacing: 0,
         lineHeight: '16px'

package/esm/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -32,9 +32,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import Autosuggest from 'react-autosuggest';
 import AutosizeInput from 'react-input-autosize';
 import classnames from 'classnames';
-import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem';
-import Paper from '@material-ui/core/Paper';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import Paper from '@mui/material/Paper';
 import Popper from '../../Popper/Popper';
 import PropTypes from 'prop-types';
 import React, { useCallback, useRef, useMemo, useState } from 'react';
@@ -127,7 +127,7 @@ var TypeaheadEditor = function (_a) {
                 underline: classnames((_b = {}, _b[styles['input__underline']] = isEmptyValue(value), _b)),
                 input: classnames(styles['rawInput'], path(['classes', 'input'], InputProps))
             };
-            return multiple ? (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (React.createElement(ValueChip, { key: item, label: item, onDelete: function () { return onChange(remove(index, 1, value)); } })); }), inputComponent: AutosizeInput, classes: __assign(__assign({ root: classnames(styles['multiple-input__input'], path(['classes', 'root'], InputProps)) }, commonClasses), { input: classnames(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: pipe(tap(onInputChange), getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames(styles['input__root'], path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+            return multiple ? (React.createElement(TextField, __assign({ variant: "standard" }, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (React.createElement(ValueChip, { key: item, label: item, onDelete: function () { return onChange(remove(index, 1, value)); } })); }), inputComponent: AutosizeInput, classes: __assign(__assign({ root: classnames(styles['multiple-input__input'], path(['classes', 'root'], InputProps)) }, commonClasses), { input: classnames(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (React.createElement(TextField, __assign({ variant: "standard" }, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: pipe(tap(onInputChange), getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames(styles['input__root'], path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
         }, renderSuggestionsContainer: function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (React.createElement(Popper, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     'typeahead__suggestions-placeholder': {
         padding: '8px 16px',
@@ -37,7 +37,10 @@ export var useStyles = makeStyles({
         }
     },
     rawInput: {
-        height: '19px'
+        height: '19px',
+        lineHeight: '19px',
+        paddingTop: '10px',
+        paddingBottom: '11px'
     },
     'multiple-input__root': {
         flexWrap: 'wrap',

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

@@ -13,7 +13,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { prop } from 'ramda';
 import ValueChip from '../../../ValueChip/ValueChip';
-import CancelIcon from '@material-ui/icons/Cancel';
+import CancelIcon from '@mui/icons-material/Cancel';
 var MultiValueChip = function (props) {
     var children = props.children, data = props.data, removeProps = props.removeProps;
     return (React.createElement(ValueChip, { tabIndex: -1, label: children, count: prop('formattedNumber', data), onDelete: removeProps.onClick, deleteIcon: React.createElement(CancelIcon, __assign({}, props.removeProps)) }));

package/esm/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/TextField';
+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/esm/components/editors/constants.js

@@ -1,8 +1,12 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
+export var DEFAULT_MIN_DATE = new Date('1900-01-01');
+export var DEFAULT_MAX_DATE = new Date('2099-12-31');
 export var commonTextFieldProps = {
     variant: 'filled',
-    margin: 'dense',
-    hiddenLabel: true
+    size: 'small',
+    InputProps: {
+        hiddenLabel: true
+    }
 };
 export var useInputStyles = makeStyles({
     filledInputUnderline: {

package/esm/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<"active" | "icon" | "inactive" | "clickable">;
 export {};