@reltio/components 1.4.699 → 1.4.703

package/components/editors/RangeDataTypeValueEditor/RangeDataTypeValueEditor.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var nanoid_1 = __importDefault(require("nanoid"));
+var FormControl_1 = __importDefault(require("@material-ui/core/FormControl"));
+var InputLabel_1 = __importDefault(require("@material-ui/core/InputLabel"));
+var DataTypeValueEditor_1 = __importDefault(require("../DataTypeValueEditor/DataTypeValueEditor"));
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var RangeDataTypeValueEditor = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? new Array(2) : _b, onChange = _a.onChange, _c = _a.orientation, orientation = _c === void 0 ? 'vertical' : _c, otherProps = __rest(_a, ["value", "onChange", "orientation"]);
+    var styles = styles_1.useStyles();
+    var rangeEditorFromId = react_1.useRef(nanoid_1.default());
+    var rangeEditorToId = react_1.useRef(nanoid_1.default());
+    var fromEditor = (react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ id: rangeEditorFromId.current, value: value[0], onChange: ramda_1.pipe(ramda_1.update(0, ramda_1.__, value), onChange) }, otherProps)));
+    var toEditor = (react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ id: rangeEditorToId.current, value: value[1], onChange: ramda_1.pipe(ramda_1.update(1, ramda_1.__, value), onChange) }, otherProps)));
+    if (orientation === 'horizontal') {
+        return (react_1.default.createElement("div", { className: styles['range-inline-editor'] },
+            fromEditor,
+            react_1.default.createElement("div", { className: styles['range-editor__dash'] }, '—'),
+            toEditor));
+    }
+    else {
+        return (react_1.default.createElement("div", { className: styles['range-editor'] },
+            react_1.default.createElement(FormControl_1.default, { fullWidth: true, className: styles['range-editor__control'] },
+                react_1.default.createElement(InputLabel_1.default, { htmlFor: rangeEditorFromId.current, shrink: true }, ui_i18n_1.default.text('From')),
+                fromEditor),
+            react_1.default.createElement(FormControl_1.default, { fullWidth: true, className: styles['range-editor__control'] },
+                react_1.default.createElement(InputLabel_1.default, { htmlFor: rangeEditorToId.current, shrink: true }, ui_i18n_1.default.text('To')),
+                toEditor)));
+    }
+};
+RangeDataTypeValueEditor.propTypes = {
+    value: prop_types_1.default.arrayOf(prop_types_1.default.any),
+    onChange: prop_types_1.default.func,
+    fieldName: prop_types_1.default.string,
+    orientation: prop_types_1.default.oneOf(['horizontal', 'vertical']),
+    dataTypeDefinition: prop_types_1.default.object,
+    classes: prop_types_1.default.object
+};
+exports.default = RangeDataTypeValueEditor;

package/components/editors/RangeDataTypeValueEditor/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    'range-editor': {
+        width: '100%'
+    },
+    'range-editor__control': {
+        marginTop: '10px',
+        paddingTop: '15px',
+        '& > label + *': {
+            marginTop: 0
+        }
+    },
+    'range-inline-editor': {
+        display: 'flex',
+        alignItems: 'center',
+        flexGrow: 1
+    },
+    'range-editor__dash': {
+        padding: '0 5px'
+    }
+});

package/components/editors/SelectEditor/SelectEditor.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var DropDownEditor_1 = __importDefault(require("../DropDownEditor/DropDownEditor"));
+var constants_1 = require("../constants");
+var SelectEditor = function (_a) {
+    var classes = _a.classes, otherProps = __rest(_a, ["classes"]);
+    var styles = constants_1.useSelectStyles();
+    return (react_1.default.createElement(DropDownEditor_1.default, __assign({ MenuProps: {
+            disableAutoFocusItem: true
+        }, classes: __assign(__assign({}, classes), { root: classnames_1.default(styles.root, ramda_1.prop('root', classes)), icon: classnames_1.default(styles.icon, ramda_1.prop('icon', classes)) }) }, otherProps)));
+};
+SelectEditor.propTypes = {
+    classes: prop_types_1.default.object
+};
+exports.default = SelectEditor;

package/components/editors/TextEditor/TextEditor.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var MultipleInput_1 = __importDefault(require("../../MultipleInput/MultipleInput"));
+var SimpleInput_1 = __importDefault(require("../../SimpleInput/SimpleInput"));
+var TextEditor = function (_a) {
+    var multiple = _a.multiple, value = _a.value, getValueLabel = _a.getValueLabel, multiline = _a.multiline, otherProps = __rest(_a, ["multiple", "value", "getValueLabel", "multiline"]);
+    return multiple ? (react_1.default.createElement(MultipleInput_1.default, __assign({}, otherProps, { values: value, getValueLabel: getValueLabel }))) : (react_1.default.createElement(SimpleInput_1.default, __assign({}, otherProps, { value: value, multiline: multiline })));
+};
+TextEditor.propTypes = {
+    multiple: prop_types_1.default.bool,
+    multiline: prop_types_1.default.bool,
+    value: prop_types_1.default.oneOfType([
+        prop_types_1.default.string,
+        prop_types_1.default.arrayOf(prop_types_1.default.string),
+        prop_types_1.default.number,
+        prop_types_1.default.arrayOf(prop_types_1.default.number)
+    ]),
+    getValueLabel: prop_types_1.default.func
+};
+exports.default = TextEditor;

package/components/editors/TimestampEditor/TimestampEditor.js

@@ -0,0 +1,100 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var moment_1 = __importDefault(require("moment"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var text_field_helper_1 = require("@material-ui/pickers/_helpers/text-field-helper");
+var pickers_1 = require("@material-ui/pickers");
+var DateRange_1 = __importDefault(require("@material-ui/icons/DateRange"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var prop_types_2 = require("../../../constants/prop-types");
+var styles_1 = require("./styles");
+var dateFormat = moment_1.default.localeData().longDateFormat('L');
+var timeFormat = moment_1.default.localeData().longDateFormat('LTS');
+var makeAmPmFormatter = function (format) { return text_field_helper_1.maskedDateFormatter(text_field_helper_1.makeMaskFromFormat(format, '_'), '_', /[^\dap]+/gi); };
+var TimestampEditor = function (_a) {
+    var _b;
+    var _c = _a.value, value = _c === void 0 ? null : _c, label = _a.label, _d = _a.variant, variant = _d === void 0 ? 'filled' : _d, onChange = _a.onChange, InputProps = _a.InputProps, format = _a.format, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps", "format"]);
+    var styles = styles_1.useStyles();
+    var _e = react_1.useState(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
+    var timestampFormat = format || dateFormat + " " + timeFormat;
+    var isAmPmFormat = timestampFormat && timestampFormat.toLowerCase().includes('a');
+    return (react_1.default.createElement(pickers_1.KeyboardDateTimePicker, __assign({ format: timestampFormat, rifmFormatter: isAmPmFormat ? makeAmPmFormatter(timestampFormat) : undefined, variant: "inline", invalidDateMessage: ui_i18n_1.default.text('Invalid Date Format'), maxDateMessage: ui_i18n_1.default.text('Date should not be after maximal date'), minDateMessage: ui_i18n_1.default.text('Date should not be before minimal date'), inputVariant: variant, views: ['year', 'date', 'hours', 'minutes', 'seconds'], autoOk: true, InputAdornmentProps: { position: 'end' }, KeyboardButtonProps: {
+            classes: { root: styles.iconButtonRoot },
+            onKeyPress: ramda_1.invoker(0, 'stopPropagation')
+        }, keyboardIcon: react_1.default.createElement(DateRange_1.default, null), onChange: ramda_1.when(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, ramda_1.pipe(mdm_sdk_1.utils.dates.momentToDate, onChange)), label: label, "aria-label": label, value: value, placeholder: ui_i18n_1.default.text((dateFormat + " HH:MM").toUpperCase()), ampm: false, disableToolbar: true, onClose: function () { return setIsCalendarOpen(false); }, onOpen: function () { return setIsCalendarOpen(true); }, InputProps: __assign({ classes: {
+                root: styles.inputRoot,
+                underline: classnames_1.default((_b = {}, _b[styles.underline] = isCalendarOpen, _b)),
+                adornedEnd: styles.adornedEnd
+            }, disableUnderline: ramda_1.isNil(value) }, InputProps), PopoverProps: {
+            anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+            },
+            transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left'
+            }
+        }, InputLabelProps: {
+            classes: {
+                root: isCalendarOpen ? styles.inputLabel : undefined
+            },
+            shrink: !ramda_1.isNil(label)
+        } }, otherProps)));
+};
+TimestampEditor.propTypes = {
+    value: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.instanceOf(Date)]),
+    format: prop_types_1.default.string,
+    label: prop_types_1.default.string,
+    variant: prop_types_2.InputVariant,
+    InputProps: prop_types_1.default.object,
+    onChange: prop_types_1.default.func.isRequired
+};
+exports.default = TimestampEditor;

package/components/editors/TimestampEditor/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    iconButtonRoot: {
+        padding: 8
+    },
+    underline: {
+        '&:after': {
+            transform: 'scaleX(1)'
+        }
+    },
+    inputLabel: {
+        color: theme.palette.primary.main
+    },
+    adornedEnd: {
+        paddingRight: 4
+    },
+    inputRoot: {
+        fontSize: '14px',
+        letterSpacing: 0,
+        lineHeight: '16px'
+    }
+}); });

package/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -0,0 +1,151 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_autosuggest_1 = __importDefault(require("react-autosuggest"));
+var classnames_1 = __importDefault(require("classnames"));
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
+var Popper_1 = __importDefault(require("../../Popper/Popper"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var EmptySearchResult_1 = require("../../../components/EmptySearchResult");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var utils_1 = require("../../../core/utils");
+var styles_1 = require("./styles");
+var ExpandedValueTooltip_1 = __importDefault(require("../../ExpandedValueTooltip/ExpandedValueTooltip"));
+var ValueChip_1 = __importDefault(require("../../ValueChip/ValueChip"));
+var FETCH_DEBOUNCE_INTERVAL = 300;
+var TypeaheadEditor = function (_a) {
+    var value = _a.value, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, InputProps = _a.InputProps, inputProps = __rest(_a, ["value", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
+    var _b = react_1.useState([]), suggestions = _b[0], setSuggestions = _b[1];
+    var _c = react_1.useState(false), isPlaceholderVisible = _c[0], setPlaceholderVisibility = _c[1];
+    var inputRef = react_1.useRef();
+    var styles = styles_1.useStyles();
+    var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
+    var fetchSuggestions = ramda_1.pipe(ramda_1.prop('value'), ramda_1.trim, getSuggestions, ramda_1.andThen(ramda_1.pipe(ramda_1.tap(setSuggestions), ramda_1.both(ramda_1.isEmpty, isFocused), setPlaceholderVisibility)));
+    var debouncedFetchSuggestions = react_1.useCallback(mdm_sdk_1.debounce(fetchSuggestions, FETCH_DEBOUNCE_INTERVAL), [
+        getSuggestions
+    ]);
+    value = ramda_1.defaultTo(multiple ? [] : '', value);
+    var _d = react_1.useState(''), currentValue = _d[0], setCurrentValue = _d[1];
+    var _e = react_1.useState(false), hasHighlightedItem = _e[0], setHasHighlightedItem = _e[1];
+    var onInputChange = function (_a) {
+        var newValue = _a.newValue, method = _a.method;
+        switch (method) {
+            case 'type': {
+                if (multiple) {
+                    setCurrentValue(newValue);
+                }
+                break;
+            }
+            case 'escape': {
+                if (multiple) {
+                    setCurrentValue(newValue);
+                }
+                else {
+                    onChange(newValue);
+                }
+                break;
+            }
+            case 'click':
+            case 'enter': {
+                if (multiple) {
+                    setCurrentValue('');
+                    if (newValue) {
+                        onChange(ramda_1.uniq(__spreadArray(__spreadArray([], value), [newValue])));
+                    }
+                }
+                else {
+                    onChange(newValue);
+                }
+                break;
+            }
+        }
+    };
+    return (react_1.default.createElement(react_autosuggest_1.default, { suggestions: suggestions, shouldRenderSuggestions: ramda_1.T, inputProps: __assign(__assign({ value: multiple ? currentValue : value, onChange: ramda_1.pipe(ramda_1.nthArg(1), onInputChange), onKeyDown: function (event) {
+                if (event.keyCode === 13 && multiple && !hasHighlightedItem) {
+                    onInputChange({ method: 'enter', newValue: currentValue });
+                }
+            }, fullWidth: fullWidth }, inputProps), { autoComplete: 'nope' }), getSuggestionValue: ramda_1.identity, onSuggestionsFetchRequested: ramda_1.ifElse(ramda_1.propEq('reason', 'input-changed'), debouncedFetchSuggestions, fetchSuggestions), onSuggestionsClearRequested: ramda_1.pipe(ramda_1.always([]), setSuggestions, ramda_1.F, setPlaceholderVisibility), renderInputComponent: function (_a) {
+            var _b;
+            var ref = _a.ref, onInputChange = _a.onChange, otherProps = __rest(_a, ["ref", "onChange"]);
+            var commonClasses = {
+                underline: classnames_1.default((_b = {}, _b[styles['input__underline']] = mdm_sdk_1.isEmptyValue(value), _b)),
+                input: classnames_1.default(styles['rawInput'], ramda_1.path(['classes', 'input'], InputProps))
+            };
+            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (react_1.default.createElement(ValueChip_1.default, { key: item, label: item, onDelete: function () { return onChange(ramda_1.remove(index, 1, value)); } })); }), classes: __assign({ root: classnames_1.default(styles['multiple-input__input'], ramda_1.path(['classes', 'root'], InputProps)), adornedStart: styles['multiple-input__adornedStart'] }, commonClasses) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: ramda_1.pipe(ramda_1.tap(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames_1.default(styles['input__root'], ramda_1.path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+        }, renderSuggestionsContainer: function (_a) {
+            var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
+            return (react_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },
+                react_1.default.createElement(Paper_1.default, __assign({ ref: ref, square: true }, restContainerProps, { style: { width: ramda_1.prop('clientWidth', inputRef.current) } }), children || react_1.default.createElement(EmptySearchResult_1.NoResults, { className: styles['typeahead__suggestions-placeholder'] }))));
+        }, renderSuggestion: function (suggestion, _a) {
+            var isHighlighted = _a.isHighlighted;
+            return (react_1.default.createElement(MenuItem_1.default, { className: styles['typeahead__suggestions-menuItem'], selected: isHighlighted, component: "div" },
+                react_1.default.createElement(ExpandedValueTooltip_1.default, { value: suggestion },
+                    react_1.default.createElement("div", { className: styles['menuItem--item'] }, suggestion))));
+        }, theme: {
+            container: fullWidth ? styles['typeahead__suggestions-container'] : '',
+            suggestionsList: styles['typeahead__suggestions-list'],
+            suggestionsContainerOpen: styles['typeahead__suggestions-container--open']
+        }, onSuggestionHighlighted: ramda_1.pipe(ramda_1.prop('suggestion'), Boolean, setHasHighlightedItem) }));
+};
+TypeaheadEditor.propTypes = {
+    multiple: prop_types_1.default.bool,
+    fullWidth: prop_types_1.default.bool,
+    placeholder: prop_types_1.default.string,
+    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
+    onChange: prop_types_1.default.func.isRequired,
+    getSuggestions: prop_types_1.default.func.isRequired,
+    InputProps: prop_types_1.default.object
+};
+exports.default = TypeaheadEditor;

package/components/editors/TypeaheadEditor/styles.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    'typeahead__suggestions-placeholder': {
+        padding: '8px 16px',
+        textAlign: 'center'
+    },
+    'typeahead__suggestions-container--open': {
+        maxHeight: '230px',
+        overflowY: 'auto'
+    },
+    'typeahead__suggestions-list': {
+        margin: 0,
+        padding: 0,
+        listStyleType: 'none'
+    },
+    'typeahead__suggestions-menuItem': {
+        color: 'rgba(0,0,0,0.87)',
+        fontSize: '14px'
+    },
+    input__root: {
+        color: 'rgba(0,0,0,0.87)',
+        fontSize: '14px'
+    },
+    rawInput: {
+        height: '19px'
+    },
+    'multiple-input__root': {
+        flexWrap: 'wrap',
+        color: 'rgba(0,0,0,0.87)',
+        fontSize: '14px'
+    },
+    'multiple-input__input': {
+        flex: '1 0 25px',
+        flexWrap: 'wrap'
+    },
+    'multiple-input__adornedStart': {
+        paddingLeft: '8px'
+    },
+    input__underline: {
+        '&:before': {
+            display: 'none'
+        }
+    },
+    'typeahead__suggestions-container': {
+        width: '100%'
+    },
+    'menuItem--item': {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: 'block'
+    }
+});

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

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ramda_1 = require("ramda");
+var ValueChip_1 = __importDefault(require("../../../ValueChip/ValueChip"));
+var Cancel_1 = __importDefault(require("@material-ui/icons/Cancel"));
+var MultiValueChip = function (props) {
+    var children = props.children, data = props.data, removeProps = props.removeProps;
+    return (react_1.default.createElement(ValueChip_1.default, { tabIndex: -1, label: children, count: ramda_1.prop('formattedNumber', data), onDelete: removeProps.onClick, deleteIcon: react_1.default.createElement(Cancel_1.default, __assign({}, props.removeProps)) }));
+};
+MultiValueChip.propTypes = {
+    children: prop_types_1.default.node,
+    data: prop_types_1.default.shape({
+        value: prop_types_1.default.string,
+        label: prop_types_1.default.string,
+        number: prop_types_1.default.number
+    }).isRequired,
+    removeProps: prop_types_1.default.shape({
+        onClick: prop_types_1.default.func.isRequired,
+        onMouseDown: prop_types_1.default.func.isRequired,
+        onTouchEnd: prop_types_1.default.func.isRequired
+    }).isRequired
+};
+exports.default = MultiValueChip;

package/components/editors/constants.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectStyles = exports.useInputStyles = exports.commonTextFieldProps = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.commonTextFieldProps = {
+    variant: 'filled',
+    margin: 'dense',
+    hiddenLabel: true
+};
+exports.useInputStyles = styles_1.makeStyles({
+    filledInputUnderline: {
+        '&:before': {
+            display: 'none'
+        }
+    },
+    marginDense: {
+        margin: 0
+    }
+});
+exports.useSelectStyles = styles_1.makeStyles({
+    root: {
+        paddingRight: '48px !important'
+    },
+    icon: {
+        right: '12px'
+    }
+});

package/components/editors/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimestampEditor = exports.DataTypeValueEditor = exports.DateEditor = exports.DateRangeEditor = exports.NumberEditor = exports.MultiValueChip = exports.FilterValueEditor = exports.TextEditor = exports.DropDownEditor = void 0;
+var DropDownEditor_1 = require("./DropDownEditor/DropDownEditor");
+Object.defineProperty(exports, "DropDownEditor", { enumerable: true, get: function () { return __importDefault(DropDownEditor_1).default; } });
+var TextEditor_1 = require("./TextEditor/TextEditor");
+Object.defineProperty(exports, "TextEditor", { enumerable: true, get: function () { return __importDefault(TextEditor_1).default; } });
+var FilterValueEditor_1 = require("./FilterEditor/FilterValueEditor");
+Object.defineProperty(exports, "FilterValueEditor", { enumerable: true, get: function () { return __importDefault(FilterValueEditor_1).default; } });
+var MultiValueChip_1 = require("./commonComponents/MultiValueChip/MultiValueChip");
+Object.defineProperty(exports, "MultiValueChip", { enumerable: true, get: function () { return __importDefault(MultiValueChip_1).default; } });
+var NumberEditor_1 = require("./NumberEditor/NumberEditor");
+Object.defineProperty(exports, "NumberEditor", { enumerable: true, get: function () { return __importDefault(NumberEditor_1).default; } });
+var DateRangeEditor_1 = require("./DateRangeEditor/DateRangeEditor");
+Object.defineProperty(exports, "DateRangeEditor", { enumerable: true, get: function () { return __importDefault(DateRangeEditor_1).default; } });
+var DateEditor_1 = require("./DateEditor/DateEditor");
+Object.defineProperty(exports, "DateEditor", { enumerable: true, get: function () { return __importDefault(DateEditor_1).default; } });
+var DataTypeValueEditor_1 = require("./DataTypeValueEditor/DataTypeValueEditor");
+Object.defineProperty(exports, "DataTypeValueEditor", { enumerable: true, get: function () { return __importDefault(DataTypeValueEditor_1).default; } });
+var TimestampEditor_1 = require("./TimestampEditor/TimestampEditor");
+Object.defineProperty(exports, "TimestampEditor", { enumerable: true, get: function () { return __importDefault(TimestampEditor_1).default; } });