@reltio/components 1.4.1589 → 1.4.1591

package/esm/components/crosswalks/AttributesTable/cell-renderers/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"count" | "popupTitle" | "closeButton" | "headCell" | "dragIndicator" | "dragIndicatorIcon" | "sourceIcon" | "ruleType" | "coloredCell" | "rowCell" | "cellValueWrapper" | "attributeTitle" | "ovValue" | "ruleTypeLabel" | "rulePopup" | "popupItem" | "popupTitleWrapper" | "popupItemsWrapper" | "winnerSourceItemWrapper" | "winnerSourceItem" | "winnerSourceItemLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"count" | "popupTitle" | "closeButton" | "headCell" | "dragIndicator" | "dragIndicatorIcon" | "sourceIcon" | "ruleType" | "coloredCell" | "rowCell" | "cellValueWrapper" | "attributeTitle" | "ovValue" | "ruleTypeLabel" | "rulePopup" | "popupItem" | "popupTitleWrapper" | "popupItemsWrapper" | "winnerSourceItemWrapper" | "winnerSourceItem" | "winnerSourceItemLabel">;

package/esm/components/crosswalks/AttributesTable/cell-renderers/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 ({
     coloredCell: {
         '&::before': {
@@ -31,7 +31,7 @@ export var useStyles = makeStyles(function (theme) { return ({
         }
         // '&:hover $dragIndicator': {
         //     display: 'block'
-        // },
+        // }
     },
     dragIndicator: {
         display: 'none',

package/esm/components/crosswalks/AttributesTable/styles.d.ts

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

package/esm/components/crosswalks/AttributesTable/styles.js

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

package/esm/components/crosswalks/ColoredBlock/ColoredBlock.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
-import EventBusyIcon from '@material-ui/icons/EventBusy';
-import Tooltip from '@material-ui/core/Tooltip';
+import EventBusyIcon from '@mui/icons-material/EventBusy';
+import Tooltip from '@mui/material/Tooltip';
 import { useColoredItemStyles } from './styles';
 var ColoredBlock = forwardRef(function (_a, ref) {
     var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'standart' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);

package/esm/components/crosswalks/ColoredBlock/styles.d.ts

@@ -3,5 +3,5 @@ type StylesProps = {
     opacity?: number;
     variant: 'standart' | 'disabled';
 };
-export declare const useColoredItemStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"item" | "endDatedCrosswalkIcon">;
+export declare const useColoredItemStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"item" | "endDatedCrosswalkIcon">;
 export {};

package/esm/components/crosswalks/ColoredBlock/styles.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useColoredItemStyles = makeStyles({
     item: function (_a) {
         var color = _a.color, opacity = _a.opacity, variant = _a.variant;

package/esm/components/crosswalks/CopyableValueField/CopyableValueField.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import SmallIconButton from '../../SmallIconButton/SmallIconButton';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import CopyIcon from '../../../icons/Copy';
 import { useStyles } from './styles';
 var CopyableValueField = function (_a) {

package/esm/components/crosswalks/CopyableValueField/styles.d.ts

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

package/esm/components/crosswalks/CopyableValueField/styles.js

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

package/esm/components/crosswalks/CrosswalkAttributes/CrosswalkAttributes.js

@@ -6,8 +6,8 @@ import SimpleDropDownSelector from '../../SimpleDropDownSelector/SimpleDropDownS
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import SourceIcon from '../../SourceIcon/SourceIcon';
 import { TextEditor } from '../../editors';
-import Typography from '@material-ui/core/Typography';
-import DeleteIcon from '@material-ui/icons/Delete';
+import Typography from '@mui/material/Typography';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { CrosswalksAttrTypes, formatDateTime, getCrosswalksTypes, getSourceSystemLabel, parseTimestamp } from '@reltio/mdm-sdk';
 import { ascend, filter, has, isNil, map, pipe, prop, propEq, without } from 'ramda';
 import i18n from 'ui-i18n';
@@ -97,12 +97,12 @@ var CrosswalkAttributes = function (_a) {
                     React.createElement(Typography, { className: styles.text, variant: 'body2' }, sourceSystemLabel)));
             }
             case 'sourceTable':
-                return isTempCrosswalk ? (React.createElement(TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, margin: "dense", InputProps: {
+                return isTempCrosswalk ? (React.createElement(TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, size: "small", InputProps: {
                         disableUnderline: true,
                         classes: { input: styles.input }
                     } })) : (React.createElement(Typography, { className: styles.text, variant: 'body2' }, attributeValue));
             case 'value':
-                return isTempCrosswalk ? (React.createElement(TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, margin: "dense", InputProps: {
+                return isTempCrosswalk ? (React.createElement(TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) { return onEditAttribute(attributeName, e.target.value); }, size: "small", InputProps: {
                         disableUnderline: true,
                         classes: { input: styles.input }
                     } })) : (React.createElement(CopyableValueField, { value: attributeValue }));

package/esm/components/crosswalks/CrosswalkAttributes/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"text" | "input" | "attributeValue" | "moreButton" | "editor" | "sourceIcon" | "attributeTitle" | "attributeWrapper">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"attributeValue" | "text" | "input" | "moreButton" | "editor" | "sourceIcon" | "attributeTitle" | "attributeWrapper">;

package/esm/components/crosswalks/CrosswalkAttributes/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 ({
     text: {
         fontSize: 13

package/esm/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.js

@@ -8,9 +8,17 @@ var CrosswalkDateEditor = function (_a) {
     var styles = useStyles();
     var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
     var handleChange = function (date) { return onChange(date === null || date === void 0 ? void 0 : date.valueOf()); };
-    return (React.createElement(TimestampEditor, { variant: "filled", value: value || null, disabled: disabled, onChange: unless(always(isOpen), handleChange), onAccept: handleChange, onOpen: function () { return setIsOpen(true); }, onClose: function () { return setIsOpen(false); }, InputProps: {
-            disableUnderline: true,
-            classes: { input: styles.timestampEditorInput, root: classnames(styles.timestampEditor, classes.root) }
-        } }));
+    return (React.createElement(TimestampEditor, { slotProps: {
+            textField: {
+                variant: 'filled',
+                InputProps: {
+                    disableUnderline: true,
+                    classes: {
+                        input: styles.timestampEditorInput,
+                        root: classnames(styles.timestampEditor, classes.root)
+                    }
+                }
+            }
+        }, value: value || null, disabled: disabled, onChange: unless(always(isOpen), handleChange), onAccept: handleChange, onOpen: function () { return setIsOpen(true); }, onClose: function () { return setIsOpen(false); } }));
 };
 export default CrosswalkDateEditor;

package/esm/components/crosswalks/CrosswalkDateEditor/styles.d.ts

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

package/esm/components/crosswalks/CrosswalkDateEditor/styles.js

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

package/esm/components/crosswalks/CrosswalkDragLayer/CrosswalkDragPreview.js

@@ -4,7 +4,7 @@ import { getSourceSystemLabel } from '@reltio/mdm-sdk';
 import ColoredBlock from '../ColoredBlock/ColoredBlock';
 import { useCrosswalkColor } from '../../../contexts/CrosswalksDisplayContext';
 import SourceIcon from '../../SourceIcon/SourceIcon';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import mdmModule from '@reltio/mdm-module';
 import { useStyles } from './styles';
 var CrosswalkDragPreview = function (_a) {

package/esm/components/crosswalks/CrosswalkDragLayer/styles.d.ts

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

package/esm/components/crosswalks/CrosswalkDragLayer/styles.js

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

package/esm/components/crosswalks/CrosswalkEditor/CrosswalkEditor.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import CrosswalkAttributes from '../CrosswalkAttributes/CrosswalkAttributes';
 import { assoc, dissoc } from 'ramda';
 import { useStyles } from './styles';

package/esm/components/crosswalks/CrosswalkEditor/styles.d.ts

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

package/esm/components/crosswalks/CrosswalkEditor/styles.js

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

package/esm/components/crosswalks/CrosswalkRow/CrosswalkRow.js

@@ -1,9 +1,9 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
-import Typography from '@material-ui/core/Typography';
-import DeleteIcon from '@material-ui/icons/Delete';
-import VisibilityIcon from '@material-ui/icons/Visibility';
+import Typography from '@mui/material/Typography';
+import DeleteIcon from '@mui/icons-material/Delete';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import { eqCrosswalks, getLastUriPart, getSourceSystemLabel, isCrosswalkDisabled } from '@reltio/mdm-sdk';
 import ArrowExpandButton from '../../ArrowExpandButton/ArrowExpandButton';
 import ExpandedValueTooltip from '../../ExpandedValueTooltip/ExpandedValueTooltip';

package/esm/components/crosswalks/CrosswalkRow/styles.d.ts

@@ -3,5 +3,5 @@ type StylesProps = {
     isOpaque?: boolean;
     isFocused?: boolean;
 };
-export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "header" | "attributesWrapper" | "sourceIcon" | "focusedIcon" | "crosswalkWrapper" | "deleteCrosswalkButton" | "labelValue" | "dependentIcon">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"header" | "root" | "attributesWrapper" | "sourceIcon" | "focusedIcon" | "crosswalkWrapper" | "deleteCrosswalkButton" | "labelValue" | "dependentIcon">;
 export {};

package/esm/components/crosswalks/CrosswalkRow/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     root: function (_a) {
         var isOpaque = _a.isOpaque;

package/esm/components/crosswalks/DummyCrosswalkRow/DummyCrosswalkRow.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
-import Typography from '@material-ui/core/Typography';
-import VisibilityIcon from '@material-ui/icons/Visibility';
+import Typography from '@mui/material/Typography';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import SourceIcon from '../../SourceIcon/SourceIcon';
 import SmallIconButton from '../../SmallIconButton/SmallIconButton';
 import { useCrosswalkHighlight } from '../../../contexts/CrosswalksDisplayContext';

package/esm/components/crosswalks/DummyCrosswalkRow/styles.d.ts

@@ -1,5 +1,5 @@
 type StylesProps = {
     isOpaque?: boolean;
 };
-export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "wrapper" | "sourceIcon" | "focusedIcon">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "wrapper" | "sourceIcon" | "focusedIcon">;
 export {};

package/esm/components/crosswalks/DummyCrosswalkRow/styles.js

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

package/esm/components/crosswalks/ShowDependentLink/ShowDependentLink.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from '@material-ui/core/Link';
+import Link from '@mui/material/Link';
 import i18n from 'ui-i18n';
 import { useStyles } from './styles';
 var ShowDependentLink = function (_a) {

package/esm/components/crosswalks/ShowDependentLink/styles.d.ts

@@ -1 +1 @@
-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">;

package/esm/components/crosswalks/ShowDependentLink/styles.js

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

package/esm/components/editors/BooleanEditor/BooleanEditor.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import Checkbox from '@material-ui/core/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { getChecked } from '../../../core/utils';

package/esm/components/editors/BooleanRadioEditor/BooleanRadioEditor.js

@@ -1,5 +1,5 @@
 import BooleanEditor from '../BooleanEditor/BooleanEditor';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from 'ui-i18n';

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

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

package/esm/components/editors/BooleanRadioEditor/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 ({
     checkbox_primary: {
         color: theme.palette.divider

package/esm/components/editors/CustomDateRangeEditor/CustomDateRangeEditor.js

@@ -4,8 +4,8 @@ import i18n from 'ui-i18n';
 import { isNil } from 'ramda';
 import { DataTypes, formatDataTypeValue } from '@reltio/mdm-sdk';
 import { noop } from '../../../core';
-import TextField from '@material-ui/core/TextField';
-import Menu from '@material-ui/core/Menu';
+import TextField from '@mui/material/TextField';
+import Menu from '@mui/material/Menu';
 import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
 import DateRangePicker from '../../DateRangePicker/DateRangePicker';
 import { useStyles } from './styles';
@@ -50,7 +50,7 @@ var CustomDateRangeEditor = function (_a) {
             }, transformOrigin: {
                 vertical: 'top',
                 horizontal: 'left'
-            }, elevation: 2, getContentAnchorEl: null, MenuListProps: {
+            }, elevation: 2, MenuListProps: {
                 autoFocusItem: open,
                 style: { width: '100%' }
             } },

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

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

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

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

package/esm/components/editors/DataTypeValueEditor/DataTypeValueEditor.js

@@ -34,9 +34,7 @@ var DataTypeValueEditor = function (_a) {
     var isEmpty = function (value) {
         return is(Object, value) && has('value', value) ? isEmptyValue(value.value) : isEmptyValue(value);
     };
-    TextFieldProps = mergeDeepLeft(TextFieldProps, __assign(__assign({}, commonTextFieldProps), { className: inputStyles.marginDense, InputProps: {
-            disableUnderline: isEmpty(value)
-        } }));
+    TextFieldProps = mergeDeepLeft(TextFieldProps, __assign(__assign({}, commonTextFieldProps), { className: inputStyles.marginDense, InputProps: __assign(__assign({}, commonTextFieldProps.InputProps), { disableUnderline: isEmpty(value) }) }));
     return EditorsFactory.build(dataTypeDefinition.type, __assign(__assign({ onChange: onChange, value: value, TextFieldProps: TextFieldProps }, editorContext), otherProps));
 };
 DataTypeValueEditor.propTypes = {

package/esm/components/editors/DateEditor/DateEditor.d.ts

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

package/esm/components/editors/DateEditor/DateEditor.js

@@ -20,39 +20,59 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { KeyboardDatePicker } from '@material-ui/pickers';
-import { debounce, 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 CalendarIcon from '../../../icons/Calendar';
-import { noop } from '../../../core';
+import { mergeDeepLeft } from 'ramda';
+import moment from 'moment';
+import { isNil, pipe, when, both } from 'ramda';
+import { debounce, utils } from '@reltio/mdm-sdk';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../constants';
 import { useStyles } from './styles';
-var format = moment.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 ? noop : _j, _k = _a.onFocus, onFocus = _k === void 0 ? noop : _k, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps", "InputLabelProps", "onBlur", "onFocus"]);
+    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, format = _a.format, label = _a.label, onChange = _a.onChange, slotProps = _a.slotProps, otherProps = __rest(_a, ["value", "minDate", "maxDate", "format", "label", "onChange", "slotProps"]);
     var styles = useStyles();
-    var _l = useState(false), isCalendarOpen = _l[0], setIsCalendarOpen = _l[1];
-    return (React.createElement(KeyboardDatePicker, __assign({ format: format, 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, autoOk: true, onBlur: onBlur, onFocus: onFocus, InputAdornmentProps: { position: 'end', classes: { positionEnd: styles.adornmentPositionEnd } }, KeyboardButtonProps: {
-            classes: { root: styles.iconButtonRoot },
-            onKeyPress: invoker(0, 'stopPropagation')
-        }, keyboardIcon: React.createElement(CalendarIcon, { className: styles.icon }), onChange: debounce(when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, utils.dates.clearDateTime, onChange)), 0), label: label, "aria-label": label, value: value, placeholder: i18n.text(format), 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 dateFormat = format || moment.localeData().longDateFormat('L');
+    // 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: __assign({ classes: __assign({ root: classnames((_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: !isNil(label) }, InputLabelProps) }, otherProps)));
+        },
+        popper: {
+            placement: 'bottom-start'
+        },
+        inputAdornment: {
+            position: 'end',
+            className: styles.adornedEnd
+        }
+    });
+    return (React.createElement(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: debounce(when(both(utils.dates.isValidMomentDateOrNull, utils.dates.isDateInRange(minDate, maxDate)), pipe(utils.dates.momentToDate, utils.dates.clearDateTime, onChange)), 0) }, otherProps)));
 };
 export default DateEditor;

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

@@ -1,23 +1,7 @@
-import { makeStyles } from '@material-ui/core/styles';
-export var useStyles = makeStyles(function (theme) { return ({
-    icon: {
-        color: theme.palette.text.secondary
-    },
-    iconButtonRoot: {
-        padding: 8
-    },
-    underline: {
-        '&:after': {
-            transform: 'scaleX(1)'
-        }
-    },
-    inputLabel: {
-        color: theme.palette.primary.main
-    },
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
     adornedEnd: {
-        paddingRight: 4
-    },
-    adornmentPositionEnd: {
+        paddingRight: 4,
         marginLeft: '-10px'
     },
     inputRoot: {
@@ -26,4 +10,4 @@ export var useStyles = makeStyles(function (theme) { return ({
         lineHeight: '16px',
         overflow: 'hidden'
     }
-}); });
+});

package/esm/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;