@reltio/components 1.4.1348 → 1.4.1350

package/cjs/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,3 +1,10 @@
+import React from 'react';
+declare type Values = [Date, Date];
+declare type Props = {
+    onCancel: () => void;
+    onApply: ([startDate, endDate]: Values) => void;
+    values?: Values;
+    type?: string;
+};
+declare const DateRangePicker: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default DateRangePicker;
-declare const DateRangePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/cjs/components/DateRangePicker/DateRangePicker.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var nanoid_1 = __importDefault(require("nanoid"));
 var ramda_1 = require("ramda");
@@ -81,11 +80,5 @@ var DateRangePicker = (0, react_1.forwardRef)(function (_a, ref) {
         react_1.default.createElement("div", { className: styles.actionButtons },
             react_1.default.createElement(Button_1.default, { color: "primary", onClick: onUpdate, className: styles.button }, ui_i18n_1.default.text('Update')))));
 });
-DateRangePicker.propTypes = {
-    onCancel: prop_types_1.default.func.isRequired,
-    onApply: prop_types_1.default.func.isRequired,
-    values: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(Date)),
-    type: prop_types_1.default.string
-};
 DateRangePicker.displayName = 'DateRangePicker';
 exports.default = DateRangePicker;

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "title" | "header" | "container" | "dateRangeContainer" | "dateInput" | "actionButtons">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "title" | "header" | "container" | "dateRangeContainer" | "dateInput" | "actionButtons">;

package/cjs/components/editors/CustomDateRangeEditor/CustomDateRangeEditor.js

@@ -81,12 +81,6 @@ var CustomDateRangeEditor = function (_a) {
                 autoFocusItem: open,
                 style: { width: '100%' }
             } },
-            react_1.default.createElement(DateRangePicker_1.default
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            , { 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                values: values, onCancel: onCancel, onApply: onApply, type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE }))));
+            react_1.default.createElement(DateRangePicker_1.default, { values: values, onCancel: onCancel, onApply: onApply, type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE }))));
 };
 exports.default = CustomDateRangeEditor;

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

@@ -1,29 +1,22 @@
+/// <reference types="react" />
+import { DataTypeDefinition } from '@reltio/mdm-sdk';
+import { TextFieldProps } from '@material-ui/core/TextField';
+import { MenuProps } from '@material-ui/core/Menu';
+import { Option, Values } from './helpers';
+export declare type DateRangeEditorProps = {
+    label?: string;
+    values?: Values;
+    options?: Option[];
+    getValuesDateRange?: (value: Values) => [Date, Date];
+    onChange?: (value: Values) => void;
+    dataTypeDefinition?: DataTypeDefinition;
+    MenuProps?: Partial<MenuProps>;
+    TextFieldProps?: TextFieldProps;
+    className?: string;
+    classes?: {
+        dropdownIndicator?: string;
+        root?: string;
+    };
+};
+declare const DateRangeEditor: ({ label, values, options, getValuesDateRange, onChange, dataTypeDefinition, TextFieldProps, MenuProps, ...otherProps }: DateRangeEditorProps) => JSX.Element;
 export default DateRangeEditor;
-declare function DateRangeEditor({ label, values, options, getValuesDateRange, onChange, dataTypeDefinition, TextFieldProps, MenuProps, ...otherProps }: {
-    [x: string]: any;
-    label: any;
-    values: any;
-    options: any;
-    getValuesDateRange?: any;
-    onChange?: any;
-    dataTypeDefinition?: {};
-    TextFieldProps?: {};
-    MenuProps?: {};
-}): JSX.Element;
-declare namespace DateRangeEditor {
-    namespace propTypes {
-        const label: PropTypes.Requireable<string>;
-        const values: PropTypes.Requireable<NonNullable<string | any[]>>;
-        const options: PropTypes.Requireable<PropTypes.InferProps<{
-            value: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-        }>[]>;
-        const getValuesDateRange: PropTypes.Requireable<(...args: any[]) => any>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const dataTypeDefinition: PropTypes.Requireable<object>;
-        const TextFieldProps: PropTypes.Requireable<object>;
-        const MenuProps: PropTypes.Requireable<object>;
-        const classes: PropTypes.Requireable<object>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -49,7 +49,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var moment_1 = __importDefault(require("moment"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
@@ -58,31 +57,18 @@ 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 styles_1 = require("./styles");
 var Menu_1 = __importDefault(require("@material-ui/core/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 formatValue = function (value, dataTypeDefinition, placeholder) {
-    return (0, ramda_1.isNil)(value) ? "".concat(placeholder) : "".concat((0, mdm_sdk_1.formatDataTypeValue)({ dataTypeDefinition: dataTypeDefinition }, value));
-};
-var getEditorValue = (0, ramda_1.curry)(function (placeholder, dataTypeDefinition, value, options) {
-    return (0, ramda_1.cond)([
-        [mdm_sdk_1.isEmptyValue, (0, ramda_1.always)({ value: '', label: '' })],
-        [
-            (0, ramda_1.is)(Array),
-            function (value) { return ({
-                value: value,
-                label: value.map(function (value) { return formatValue(value, dataTypeDefinition, placeholder); }).join(' \u2014 ')
-            }); }
-        ],
-        [(0, ramda_1.is)(String), function (value) { return options.find((0, ramda_1.propEq)('value', value)); }]
-    ])(value);
-});
-var convertValuesToDate = (0, ramda_1.pipe)(mdm_sdk_1.getDateRangeByValue, (0, ramda_1.defaultTo)([]), (0, ramda_1.map)(function (value) { return value && new Date(value); }));
 var DateRangeEditor = function (_a) {
     var _b;
-    var label = _a.label, values = _a.values, options = _a.options, _c = _a.getValuesDateRange, getValuesDateRange = _c === void 0 ? convertValuesToDate : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, _e = _a.dataTypeDefinition, dataTypeDefinition = _e === void 0 ? {} : _e, _f = _a.TextFieldProps, TextFieldProps = _f === void 0 ? {} : _f, _g = _a.MenuProps, MenuProps = _g === void 0 ? {} : _g, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "TextFieldProps", "MenuProps"]);
+    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 ? {
+        type: mdm_sdk_1.DataTypes.TYPE_DATE
+    } : _f, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "TextFieldProps", "MenuProps"]);
     var classes = otherProps.classes;
     var placeholder = localeFormat + (dataTypeDefinition.type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP ? ' HH:MM' : '');
     var rangeOptions = (0, react_1.useMemo)(function () {
@@ -90,8 +76,8 @@ var DateRangeEditor = function (_a) {
             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 _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 _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 styles = (0, styles_1.useStyles)();
     var onItemClick = function (value) {
         if (value === mdm_sdk_1.AllDateRangeValues.PICK_DATE) {
@@ -99,18 +85,18 @@ var DateRangeEditor = function (_a) {
         }
         else {
             setOpen(false);
-            setCustomValue();
+            setCustomValue(null);
             onChange(value);
         }
     };
     var handleToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
     var onCancel = function () {
-        setCustomValue();
+        setCustomValue(null);
         setOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TextField_1.default, __assign({}, TextFieldProps, otherProps, { label: label, value: TextFieldProps.value ||
-                getEditorValue(placeholder, dataTypeDefinition, customValue || values, rangeOptions).label, onClick: handleToggle, variant: "filled", margin: "dense", ref: inputRef, InputProps: __assign({ endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: {
+        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: {
                         classes: {
                             dropdownIndicator: (0, classnames_1.default)(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
                         },
@@ -119,7 +105,7 @@ var DateRangeEditor = function (_a) {
                     root: styles.inputRoot,
                     underline: (0, classnames_1.default)((_b = {}, _b[styles.underline] = open, _b)),
                     adornedEnd: styles.adornedEnd
-                }, disableUnderline: (0, ramda_1.isNil)(values), readOnly: true }, TextFieldProps.InputProps), InputLabelProps: {
+                }, disableUnderline: (0, ramda_1.isNil)(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
                 classes: {
                     root: open ? styles.inputLabel : undefined
                 },
@@ -139,18 +125,4 @@ var DateRangeEditor = function (_a) {
             } }, MenuProps), customValue ? (react_1.default.createElement(DateRangePicker_1.default, { values: getValuesDateRange(values), onCancel: onCancel, onApply: onItemClick, type: dataTypeDefinition.type })) : (rangeOptions.map(function (option) { return (react_1.default.createElement(MenuItem_1.default, { key: option.value, value: option.value, onClick: function () { return onItemClick(option.value); }, className: styles.menuItem },
             react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, option.label))); })))));
 };
-DateRangeEditor.propTypes = {
-    label: prop_types_1.default.string,
-    values: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.array]),
-    options: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        value: prop_types_1.default.string,
-        label: prop_types_1.default.string
-    })),
-    getValuesDateRange: prop_types_1.default.func,
-    onChange: prop_types_1.default.func,
-    dataTypeDefinition: prop_types_1.default.object,
-    TextFieldProps: prop_types_1.default.object,
-    MenuProps: prop_types_1.default.object,
-    classes: prop_types_1.default.object
-};
 exports.default = DateRangeEditor;

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

@@ -0,0 +1,9 @@
+import { DatePeriod } from '@reltio/mdm-sdk';
+export declare type Option = {
+    value: string;
+    label: string;
+};
+export declare type Values = DatePeriod | string;
+declare const getEditorValue: any;
+declare const convertValuesToDate: any;
+export { getEditorValue, convertValuesToDate };

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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));
+};
+var getEditorValue = (0, ramda_1.curry)(function (placeholder, dataTypeDefinition, value, options) {
+    return (0, ramda_1.cond)([
+        [mdm_sdk_1.isEmptyValue, (0, ramda_1.always)({ value: '', label: '' })],
+        [
+            (0, ramda_1.is)(Array),
+            function (value) { return ({
+                value: value,
+                label: value.map(function (value) { return formatValue(value, dataTypeDefinition, placeholder); }).join(' \u2014 ')
+            }); }
+        ],
+        [(0, ramda_1.is)(String), function (value) { return options.find((0, ramda_1.propEq)('value', value)); }]
+    ])(value);
+});
+exports.getEditorValue = getEditorValue;
+var convertValuesToDate = (0, ramda_1.pipe)(mdm_sdk_1.getDateRangeByValue, (0, ramda_1.defaultTo)([]), (0, ramda_1.map)(function (value) { return value && new Date(value); }));
+exports.convertValuesToDate = convertValuesToDate;

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

@@ -7,13 +7,13 @@ declare type TimestampEditorProps = {
     value: number | Date;
     label?: string;
     variant: TextFieldProps['variant'];
-    InputProps: TextFieldProps['InputProps'];
+    InputProps?: TextFieldProps['InputProps'];
     format?: string;
     InputLabelProps?: Partial<InputLabelProps>;
     onBlur?: () => void;
     onFocus?: () => void;
     onChange: (value: number | Date) => void;
-    onAccept: (value: number | Date | Moment) => 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;
 export default TimestampEditor;

package/esm/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,3 +1,10 @@
+import React from 'react';
+declare type Values = [Date, Date];
+declare type Props = {
+    onCancel: () => void;
+    onApply: ([startDate, endDate]: Values) => void;
+    values?: Values;
+    type?: string;
+};
+declare const DateRangePicker: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default DateRangePicker;
-declare const DateRangePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/esm/components/DateRangePicker/DateRangePicker.js

@@ -1,5 +1,4 @@
 import React, { forwardRef, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
 import nanoid from 'nanoid';
 import { pathOr } from 'ramda';
@@ -53,11 +52,5 @@ var DateRangePicker = forwardRef(function (_a, ref) {
         React.createElement("div", { className: styles.actionButtons },
             React.createElement(Button, { color: "primary", onClick: onUpdate, className: styles.button }, i18n.text('Update')))));
 });
-DateRangePicker.propTypes = {
-    onCancel: PropTypes.func.isRequired,
-    onApply: PropTypes.func.isRequired,
-    values: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-    type: PropTypes.string
-};
 DateRangePicker.displayName = 'DateRangePicker';
 export default DateRangePicker;

package/esm/components/DateRangePicker/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "title" | "header" | "container" | "dateRangeContainer" | "dateInput" | "actionButtons">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "title" | "header" | "container" | "dateRangeContainer" | "dateInput" | "actionButtons">;

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

@@ -53,12 +53,6 @@ var CustomDateRangeEditor = function (_a) {
                 autoFocusItem: open,
                 style: { width: '100%' }
             } },
-            React.createElement(DateRangePicker
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            , { 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                values: values, onCancel: onCancel, onApply: onApply, type: DataTypes.TYPE_ACTIVENESS_DATE }))));
+            React.createElement(DateRangePicker, { values: values, onCancel: onCancel, onApply: onApply, type: DataTypes.TYPE_ACTIVENESS_DATE }))));
 };
 export default CustomDateRangeEditor;

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

@@ -1,29 +1,22 @@
+/// <reference types="react" />
+import { DataTypeDefinition } from '@reltio/mdm-sdk';
+import { TextFieldProps } from '@material-ui/core/TextField';
+import { MenuProps } from '@material-ui/core/Menu';
+import { Option, Values } from './helpers';
+export declare type DateRangeEditorProps = {
+    label?: string;
+    values?: Values;
+    options?: Option[];
+    getValuesDateRange?: (value: Values) => [Date, Date];
+    onChange?: (value: Values) => void;
+    dataTypeDefinition?: DataTypeDefinition;
+    MenuProps?: Partial<MenuProps>;
+    TextFieldProps?: TextFieldProps;
+    className?: string;
+    classes?: {
+        dropdownIndicator?: string;
+        root?: string;
+    };
+};
+declare const DateRangeEditor: ({ label, values, options, getValuesDateRange, onChange, dataTypeDefinition, TextFieldProps, MenuProps, ...otherProps }: DateRangeEditorProps) => JSX.Element;
 export default DateRangeEditor;
-declare function DateRangeEditor({ label, values, options, getValuesDateRange, onChange, dataTypeDefinition, TextFieldProps, MenuProps, ...otherProps }: {
-    [x: string]: any;
-    label: any;
-    values: any;
-    options: any;
-    getValuesDateRange?: any;
-    onChange?: any;
-    dataTypeDefinition?: {};
-    TextFieldProps?: {};
-    MenuProps?: {};
-}): JSX.Element;
-declare namespace DateRangeEditor {
-    namespace propTypes {
-        const label: PropTypes.Requireable<string>;
-        const values: PropTypes.Requireable<NonNullable<string | any[]>>;
-        const options: PropTypes.Requireable<PropTypes.InferProps<{
-            value: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-        }>[]>;
-        const getValuesDateRange: PropTypes.Requireable<(...args: any[]) => any>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const dataTypeDefinition: PropTypes.Requireable<object>;
-        const TextFieldProps: PropTypes.Requireable<object>;
-        const MenuProps: PropTypes.Requireable<object>;
-        const classes: PropTypes.Requireable<object>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -21,40 +21,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import moment from 'moment';
 import i18n from 'ui-i18n';
-import { always, cond, curry, defaultTo, identity, is, isNil, map, pipe, prop, propEq } from 'ramda';
-import { DataTypes, AllDateRangeValues, formatDataTypeValue, getDateRangeByValue, getRangeOptionLabel, isEmptyValue } from '@reltio/mdm-sdk';
+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 { useStyles } from './styles';
 import Menu from '@material-ui/core/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 formatValue = function (value, dataTypeDefinition, placeholder) {
-    return isNil(value) ? "".concat(placeholder) : "".concat(formatDataTypeValue({ dataTypeDefinition: dataTypeDefinition }, value));
-};
-var getEditorValue = curry(function (placeholder, dataTypeDefinition, value, options) {
-    return cond([
-        [isEmptyValue, always({ value: '', label: '' })],
-        [
-            is(Array),
-            function (value) { return ({
-                value: value,
-                label: value.map(function (value) { return formatValue(value, dataTypeDefinition, placeholder); }).join(' \u2014 ')
-            }); }
-        ],
-        [is(String), function (value) { return options.find(propEq('value', value)); }]
-    ])(value);
-});
-var convertValuesToDate = pipe(getDateRangeByValue, defaultTo([]), map(function (value) { return value && new Date(value); }));
 var DateRangeEditor = function (_a) {
     var _b;
-    var label = _a.label, values = _a.values, options = _a.options, _c = _a.getValuesDateRange, getValuesDateRange = _c === void 0 ? convertValuesToDate : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, _e = _a.dataTypeDefinition, dataTypeDefinition = _e === void 0 ? {} : _e, _f = _a.TextFieldProps, TextFieldProps = _f === void 0 ? {} : _f, _g = _a.MenuProps, MenuProps = _g === void 0 ? {} : _g, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "TextFieldProps", "MenuProps"]);
+    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 ? {
+        type: DataTypes.TYPE_DATE
+    } : _f, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "TextFieldProps", "MenuProps"]);
     var classes = otherProps.classes;
     var placeholder = localeFormat + (dataTypeDefinition.type === DataTypes.TYPE_TIMESTAMP ? ' HH:MM' : '');
     var rangeOptions = useMemo(function () {
@@ -62,8 +48,8 @@ var DateRangeEditor = function (_a) {
             Object.values(AllDateRangeValues).map(function (option) { return ({ value: option, label: getRangeOptionLabel(option) }); });
     }, [options]);
     var inputRef = useRef(null);
-    var _h = useState(false), open = _h[0], setOpen = _h[1];
-    var _j = useState(), customValue = _j[0], setCustomValue = _j[1];
+    var _g = useState(false), open = _g[0], setOpen = _g[1];
+    var _h = useState(), customValue = _h[0], setCustomValue = _h[1];
     var styles = useStyles();
     var onItemClick = function (value) {
         if (value === AllDateRangeValues.PICK_DATE) {
@@ -71,18 +57,18 @@ var DateRangeEditor = function (_a) {
         }
         else {
             setOpen(false);
-            setCustomValue();
+            setCustomValue(null);
             onChange(value);
         }
     };
     var handleToggle = useCallback(function () { return setOpen(function (open) { return !open; }); }, []);
     var onCancel = function () {
-        setCustomValue();
+        setCustomValue(null);
         setOpen(false);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, __assign({}, TextFieldProps, otherProps, { label: label, value: TextFieldProps.value ||
-                getEditorValue(placeholder, dataTypeDefinition, customValue || values, rangeOptions).label, onClick: handleToggle, variant: "filled", margin: "dense", ref: inputRef, InputProps: __assign({ endAdornment: (React.createElement(DropdownIndicatorWithIconButton, { selectProps: {
+        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: {
                         classes: {
                             dropdownIndicator: classnames(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
                         },
@@ -91,7 +77,7 @@ var DateRangeEditor = function (_a) {
                     root: styles.inputRoot,
                     underline: classnames((_b = {}, _b[styles.underline] = open, _b)),
                     adornedEnd: styles.adornedEnd
-                }, disableUnderline: isNil(values), readOnly: true }, TextFieldProps.InputProps), InputLabelProps: {
+                }, disableUnderline: isNil(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
                 classes: {
                     root: open ? styles.inputLabel : undefined
                 },
@@ -111,18 +97,4 @@ var DateRangeEditor = function (_a) {
             } }, MenuProps), customValue ? (React.createElement(DateRangePicker, { values: getValuesDateRange(values), onCancel: onCancel, onApply: onItemClick, type: dataTypeDefinition.type })) : (rangeOptions.map(function (option) { return (React.createElement(MenuItem, { key: option.value, value: option.value, onClick: function () { return onItemClick(option.value); }, className: styles.menuItem },
             React.createElement(Typography, { classes: { root: styles.menuText } }, option.label))); })))));
 };
-DateRangeEditor.propTypes = {
-    label: PropTypes.string,
-    values: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-    options: PropTypes.arrayOf(PropTypes.shape({
-        value: PropTypes.string,
-        label: PropTypes.string
-    })),
-    getValuesDateRange: PropTypes.func,
-    onChange: PropTypes.func,
-    dataTypeDefinition: PropTypes.object,
-    TextFieldProps: PropTypes.object,
-    MenuProps: PropTypes.object,
-    classes: PropTypes.object
-};
 export default DateRangeEditor;

package/esm/components/editors/DateRangeEditor/helpers.d.ts

@@ -0,0 +1,9 @@
+import { DatePeriod } from '@reltio/mdm-sdk';
+export declare type Option = {
+    value: string;
+    label: string;
+};
+export declare type Values = DatePeriod | string;
+declare const getEditorValue: any;
+declare const convertValuesToDate: any;
+export { getEditorValue, convertValuesToDate };

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

@@ -0,0 +1,20 @@
+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));
+};
+var getEditorValue = curry(function (placeholder, dataTypeDefinition, value, options) {
+    return cond([
+        [isEmptyValue, always({ value: '', label: '' })],
+        [
+            is(Array),
+            function (value) { return ({
+                value: value,
+                label: value.map(function (value) { return formatValue(value, dataTypeDefinition, placeholder); }).join(' \u2014 ')
+            }); }
+        ],
+        [is(String), function (value) { return options.find(propEq('value', value)); }]
+    ])(value);
+});
+var convertValuesToDate = pipe(getDateRangeByValue, defaultTo([]), map(function (value) { return value && new Date(value); }));
+export { getEditorValue, convertValuesToDate };

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

@@ -7,13 +7,13 @@ declare type TimestampEditorProps = {
     value: number | Date;
     label?: string;
     variant: TextFieldProps['variant'];
-    InputProps: TextFieldProps['InputProps'];
+    InputProps?: TextFieldProps['InputProps'];
     format?: string;
     InputLabelProps?: Partial<InputLabelProps>;
     onBlur?: () => void;
     onFocus?: () => void;
     onChange: (value: number | Date) => void;
-    onAccept: (value: number | Date | Moment) => 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;
 export default TimestampEditor;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1348",
+  "version": "1.4.1350",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1348",
-    "@reltio/mdm-sdk": "^1.4.1348",
+    "@reltio/mdm-module": "^1.4.1350",
+    "@reltio/mdm-sdk": "^1.4.1350",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",