@reltio/components 1.4.699 → 1.4.703

package/components/editors/DateEditor/DateEditor.js

@@ -0,0 +1,94 @@
+"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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var pickers_1 = require("@material-ui/pickers");
+var prop_types_2 = require("../../../constants/prop-types");
+var Calendar_1 = __importDefault(require("../../../icons/Calendar"));
+var styles_1 = require("./styles");
+var format = moment_1.default.localeData().longDateFormat('L');
+var DateEditor = 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, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps"]);
+    var styles = styles_1.useStyles();
+    var _e = react_1.useState(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
+    return (react_1.default.createElement(pickers_1.KeyboardDatePicker, __assign({ format: format, 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, autoOk: true, InputAdornmentProps: { position: 'end', classes: { positionEnd: styles.adornmentPositionEnd } }, KeyboardButtonProps: {
+            classes: { root: styles.iconButtonRoot },
+            onKeyPress: ramda_1.invoker(0, 'stopPropagation')
+        }, keyboardIcon: react_1.default.createElement(Calendar_1.default, { className: styles.icon }), onChange: mdm_sdk_1.debounce(ramda_1.when(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, ramda_1.pipe(mdm_sdk_1.utils.dates.momentToDate, mdm_sdk_1.utils.dates.clearDateTime, onChange)), 0), label: label, "aria-label": label, value: value, placeholder: ui_i18n_1.default.text(format), 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)));
+};
+DateEditor.propTypes = {
+    value: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.instanceOf(Date)]),
+    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 = DateEditor;

package/components/editors/DateEditor/styles.js

@@ -0,0 +1,31 @@
+"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 ({
+    icon: {
+        color: theme.palette.text.secondary
+    },
+    iconButtonRoot: {
+        padding: 8
+    },
+    underline: {
+        '&:after': {
+            transform: 'scaleX(1)'
+        }
+    },
+    inputLabel: {
+        color: theme.palette.primary.main
+    },
+    adornedEnd: {
+        paddingRight: 4
+    },
+    adornmentPositionEnd: {
+        marginLeft: '-10px'
+    },
+    inputRoot: {
+        fontSize: '14px',
+        letterSpacing: 0,
+        lineHeight: '16px'
+    }
+}); });

package/components/editors/DateRangeEditor/DateRangeEditor.js

@@ -0,0 +1,146 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+var moment_1 = __importDefault(require("moment"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var Menu_1 = __importDefault(require("@material-ui/core/Menu"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var DateRangePicker_1 = __importDefault(require("../../DateRangePicker/DateRangePicker"));
+var localeFormat = moment_1.default.localeData().longDateFormat('L');
+var formatValue = function (value, dataTypeDefinition, placeholder) {
+    return ramda_1.isNil(value) ? "" + placeholder : "" + mdm_sdk_1.formatDataTypeValue({ dataTypeDefinition: dataTypeDefinition }, value);
+};
+var getEditorValue = ramda_1.curry(function (placeholder, dataTypeDefinition, value, options) {
+    return ramda_1.cond([
+        [mdm_sdk_1.isEmptyValue, ramda_1.always({ value: '', label: '' })],
+        [
+            ramda_1.is(Array),
+            function (value) { return ({
+                value: value,
+                label: value.map(function (value) { return formatValue(value, dataTypeDefinition, placeholder); }).join(' \u2014 ')
+            }); }
+        ],
+        [ramda_1.is(String), function (value) { return options.find(ramda_1.propEq('value', value)); }]
+    ])(value);
+});
+var convertValuesToDate = ramda_1.pipe(mdm_sdk_1.getDateRangeByValue, ramda_1.defaultTo([]), 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, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "TextFieldProps"]);
+    var placeholder = localeFormat + (dataTypeDefinition.type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP ? ' HH:MM' : '');
+    var rangeOptions = react_1.useMemo(function () {
+        return options ||
+            Object.values(mdm_sdk_1.DateRangeValues).map(function (option) { return ({ value: option, label: mdm_sdk_1.getRangeOptionLabel(option) }); });
+    }, [options]);
+    var inputRef = react_1.useRef(null);
+    var _g = react_1.useState(false), open = _g[0], setOpen = _g[1];
+    var _h = react_1.useState(), customValue = _h[0], setCustomValue = _h[1];
+    var styles = styles_1.useStyles();
+    var onItemClick = function (value) {
+        if (value === mdm_sdk_1.DateRangeValues.PICK_DATE) {
+            setCustomValue(value);
+        }
+        else {
+            setOpen(false);
+            setCustomValue();
+            onChange(value);
+        }
+    };
+    var handleToggle = react_1.useCallback(function () { return setOpen(function (open) { return !open; }); }, []);
+    var onCancel = function () {
+        setCustomValue();
+        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: getEditorValue(placeholder, dataTypeDefinition, customValue || values, rangeOptions).label, onClick: handleToggle, variant: "filled", margin: "dense", ref: inputRef, InputProps: {
+                endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: { classes: styles, menuIsOpen: open }, innerProps: {} })),
+                classes: {
+                    root: styles.inputRoot,
+                    underline: classnames_1.default((_b = {}, _b[styles.underline] = open, _b)),
+                    adornedEnd: styles.adornedEnd
+                },
+                disableUnderline: ramda_1.isNil(values),
+                readOnly: true
+            }, InputLabelProps: {
+                classes: {
+                    root: open ? styles.inputLabel : undefined
+                },
+                shrink: !ramda_1.isNil(label)
+            }, placeholder: ui_i18n_1.default.text(placeholder + " \u2014 " + placeholder) })),
+        react_1.default.createElement(Menu_1.default, { variant: "menu", open: open, autoFocus: false, classes: { paper: styles.paper }, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left'
+            }, elevation: 2, getContentAnchorEl: null, MenuListProps: {
+                autoFocusItem: open,
+                style: { width: customValue ? '100%' : ramda_1.prop('clientWidth', inputRef.current) }
+            } }, 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
+};
+exports.default = DateRangeEditor;

package/components/editors/DateRangeEditor/styles.js

@@ -0,0 +1,39 @@
+"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 ({
+    dropdownIndicator: {
+        transition: 'transform .15s ease',
+        cursor: 'pointer',
+        color: 'rgba(0, 0, 0, 0.54)'
+    },
+    paper: {
+        minWidth: '112px'
+    },
+    menuItem: {
+        minHeight: '32px'
+    },
+    menuText: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    },
+    underline: {
+        '&:after': {
+            transform: 'scaleX(1)'
+        }
+    },
+    inputLabel: {
+        color: theme.palette.primary.main
+    },
+    adornedEnd: {
+        paddingRight: 4
+    },
+    inputRoot: {
+        fontSize: '14px',
+        letterSpacing: 0,
+        lineHeight: '16px'
+    }
+}); });

package/components/editors/DependentLookupEditor/DependentLookupEditor.js

@@ -0,0 +1,129 @@
+"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 });
+exports.DEBOUNCE_INTERVAL = void 0;
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var AsyncSelect_1 = __importDefault(require("../../ReactSelect/AsyncSelect"));
+var ramda_1 = require("ramda");
+var helpers_1 = require("./helpers");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var OptionWithCheckIcon_1 = __importDefault(require("./OptionWithCheckIcon"));
+var utils_1 = require("../../../core/utils");
+var DropdownIndicator_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicator"));
+var MenuWithPopper_1 = __importDefault(require("../../commonReactSelectComponents/MenuWithPopper"));
+var styles_1 = require("./styles");
+var useLookupsResolver_1 = __importDefault(require("./useLookupsResolver"));
+var MultiValueChip_1 = __importDefault(require("../commonComponents/MultiValueChip/MultiValueChip"));
+var useDefaultOptions_1 = __importDefault(require("./useDefaultOptions"));
+var useAutopopulation_1 = __importDefault(require("./useAutopopulation"));
+var SelectComponents = {
+    IndicatorSeparator: utils_1.EmptyStub,
+    LoadingIndicator: utils_1.EmptyStub,
+    Option: OptionWithCheckIcon_1.default,
+    DropdownIndicator: DropdownIndicator_1.default,
+    Menu: MenuWithPopper_1.default,
+    MultiValue: MultiValueChip_1.default
+};
+exports.DEBOUNCE_INTERVAL = 400;
+var DependentLookupEditor = function (_a) {
+    var multiple = _a.multiple, value = _a.value, lookupTypeCode = _a.lookupCode, TextFieldProps = _a.TextFieldProps, parents = _a.parents, onChange = _a.onChange, getLookups = _a.getLookups, _b = _a.lookups, lookups = _b === void 0 ? {} : _b, resolveLookups = _a.resolveLookups, fullWidth = _a.fullWidth, disabled = _a.disabled, placeholder = _a.placeholder, autopopulationId = _a.autopopulationId, otherProps = __rest(_a, ["multiple", "value", "lookupCode", "TextFieldProps", "parents", "onChange", "getLookups", "lookups", "resolveLookups", "fullWidth", "disabled", "placeholder", "autopopulationId"]);
+    var inputRef = react_1.useRef(null);
+    var styles = styles_1.useStyles();
+    useLookupsResolver_1.default({
+        lookups: value,
+        resolvedValues: lookups[lookupTypeCode],
+        resolveLookups: function (codeValues) { return resolveLookups(lookupTypeCode, codeValues); },
+        onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
+    });
+    var _c = react_1.useState(''), inputValue = _c[0], setInputValue = _c[1];
+    var loadOptions = react_1.useCallback(function (value) { return getLookups(lookupTypeCode, parents, value).then(helpers_1.buildLookupOptions); }, [
+        lookupTypeCode,
+        parents
+    ]);
+    var debouncedLoadOptions = react_1.useCallback(mdm_sdk_1.debounce(function (value, callback) {
+        loadOptions(value)
+            .then(function (options) { return callback(options); })
+            .catch(function () { return callback([]); });
+    }, exports.DEBOUNCE_INTERVAL), [loadOptions]);
+    var _d = useDefaultOptions_1.default(loadOptions), defaultOptions = _d.defaultOptions, initialDefaultOptions = _d.initialDefaultOptions, isLoadingDefaultOptions = _d.isLoading;
+    var isEmptyValue = multiple ? ramda_1.isEmpty(value) : !(value === null || value === void 0 ? void 0 : value.lookupCode) && !(value === null || value === void 0 ? void 0 : value.value);
+    var markAsTouched = useAutopopulation_1.default({
+        id: autopopulationId,
+        initialDefaultOptions: initialDefaultOptions,
+        isEmptyValue: isEmptyValue,
+        multiple: multiple,
+        onChange: onChange
+    }).markAsTouched;
+    return (react_1.default.createElement(AsyncSelect_1.default, __assign({}, otherProps, { isMulti: multiple, classes: styles, menuPortalTarget: document.body, menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { ref: inputRef, disabled: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.disabled) || disabled }), inputRef: inputRef, styles: {
+            menuPortal: function (base) { return (__assign(__assign({}, base), { zIndex: 1300 })); },
+            container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); }
+        }, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, noOptionsMessage: function () { return ui_i18n_1.default.text('No results found'); }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: setInputValue, isLoading: !inputValue && isLoadingDefaultOptions, defaultOptions: defaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, loadOptions: debouncedLoadOptions, getOptionValue: ramda_1.either(ramda_1.prop('value'), ramda_1.prop('lookupCode')), getOptionLabel: helpers_1.getOptionLabel, onChange: function (value) {
+            markAsTouched();
+            onChange(value);
+        }, value: ramda_1.defaultTo(multiple ? [] : null, value) })));
+};
+DependentLookupEditor.propTypes = {
+    multiple: prop_types_1.default.bool,
+    value: prop_types_1.default.oneOfType([mdm_sdk_1.LookupValueType, prop_types_1.default.arrayOf(mdm_sdk_1.LookupValueType)]),
+    TextFieldProps: prop_types_1.default.shape({
+        variant: prop_types_1.default.string,
+        margin: prop_types_1.default.string,
+        hiddenLabel: prop_types_1.default.bool
+    }),
+    lookupCode: prop_types_1.default.string.isRequired,
+    parents: prop_types_1.default.array,
+    getLookups: prop_types_1.default.func,
+    onChange: prop_types_1.default.func,
+    lookups: prop_types_1.default.object,
+    resolveLookups: prop_types_1.default.func,
+    fullWidth: prop_types_1.default.bool,
+    placeholder: prop_types_1.default.string,
+    disabled: prop_types_1.default.bool,
+    autopopulationId: prop_types_1.default.string
+};
+exports.default = DependentLookupEditor;

package/components/editors/DependentLookupEditor/OptionWithCheckIcon.js

@@ -0,0 +1,33 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var Check_1 = __importDefault(require("@material-ui/icons/Check"));
+var styles_1 = require("./styles");
+var Option_1 = __importDefault(require("../../ReactSelect/commonComponents/Option"));
+var OptionWithCheckIcon = function (props) {
+    var styles = styles_1.useStyles();
+    var isSelected = props.isSelected, children = props.children;
+    return (react_1.default.createElement(Option_1.default, __assign({}, props),
+        isSelected && react_1.default.createElement(Check_1.default, { className: styles.checkIcon }),
+        children));
+};
+OptionWithCheckIcon.propTypes = {
+    children: prop_types_1.default.node,
+    isSelected: prop_types_1.default.bool.isRequired
+};
+exports.default = OptionWithCheckIcon;

package/components/editors/DependentLookupEditor/helpers.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildLookupOptions = exports.getOptionLabel = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var getOptionLabel = function (_a) {
+    var lookupCode = _a.lookupCode, value = _a.value;
+    return mdm_sdk_1.getLookupLabel(lookupCode, value);
+};
+exports.getOptionLabel = getOptionLabel;
+var buildLookupOptions = function (lookups) {
+    return Object.entries(lookups)
+        .map(function (_a) {
+        var lookupCode = _a[0], displayName = _a[1].displayName;
+        return ({
+            lookupCode: lookupCode,
+            value: displayName
+        });
+    })
+        .sort(function (lookupA, lookupB) {
+        var labelALower = getOptionLabel(lookupA).toLowerCase();
+        var labelBLower = getOptionLabel(lookupB).toLowerCase();
+        return mdm_sdk_1.utils.strings.sort('asc', labelALower, labelBLower);
+    });
+};
+exports.buildLookupOptions = buildLookupOptions;

package/components/editors/DependentLookupEditor/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 ({
+    checkIcon: {
+        transform: 'scale(.7)',
+        marginLeft: '-30px',
+        position: 'absolute'
+    },
+    option: {
+        paddingLeft: '35px'
+    },
+    dropdownIndicator: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        color: theme.palette.text.secondary
+    },
+    clearIndicator: {
+        display: 'none'
+    },
+    placeholder: {
+        position: 'static'
+    }
+}); });

package/components/editors/DependentLookupEditor/useAutopopulation.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var touchedEditorsMap = {};
+var addTouchedEditor = function (id) {
+    touchedEditorsMap[id] = true;
+};
+var isTouchedEditor = function (id) { return touchedEditorsMap[id]; };
+// Autopopulation for just added editor. Other autopopulation cases should be covered by cascadeUpdate flow.
+var useAutopopulation = function (_a) {
+    var id = _a.id, initialDefaultOptions = _a.initialDefaultOptions, isEmptyValue = _a.isEmptyValue, multiple = _a.multiple, onChange = _a.onChange;
+    react_1.useEffect(function () {
+        if (id && initialDefaultOptions && initialDefaultOptions.length === 1 && isEmptyValue && !isTouchedEditor(id)) {
+            onChange(multiple ? initialDefaultOptions : initialDefaultOptions[0]);
+        }
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialDefaultOptions]);
+    var markAsTouched = react_1.useCallback(function () {
+        if (id) {
+            addTouchedEditor(id);
+        }
+    }, [id]);
+    return { markAsTouched: markAsTouched };
+};
+exports.default = useAutopopulation;

package/components/editors/DependentLookupEditor/useDefaultOptions.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var useDefaultOptions = function (loadOptions) {
+    var _a = react_1.useState([]), defaultOptions = _a[0], setDefaultOptions = _a[1];
+    var _b = react_1.useState(null), initialDefaultOptions = _b[0], setInitialDefaultOptions = _b[1];
+    var _c = react_1.useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var safePromise = hooks_1.useSafePromise();
+    react_1.useEffect(function () {
+        setDefaultOptions([]);
+        setIsLoading(true);
+        safePromise(loadOptions(''))
+            .then(function (options) {
+            setDefaultOptions(options);
+            setInitialDefaultOptions(function (prevValue) { return prevValue || options; });
+            setIsLoading(false);
+        })
+            .catch(function () {
+            setIsLoading(false);
+        });
+    }, [loadOptions]); // eslint-disable-line
+    return { defaultOptions: defaultOptions, initialDefaultOptions: initialDefaultOptions, isLoading: isLoading };
+};
+exports.default = useDefaultOptions;

package/components/editors/DependentLookupEditor/useLookupsResolver.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var isUnresolvedLookup = function (lookupValue) { return lookupValue && lookupValue.lookupCode && !lookupValue.value; };
+var isResolvedLookupCode = ramda_1.curry(function (resolvedValues, lookupCode) {
+    return ramda_1.hasPath([lookupCode, 'displayName'], resolvedValues);
+});
+var useLookupsResolver = function (_a) {
+    var lookups = _a.lookups, resolvedValues = _a.resolvedValues, resolveLookups = _a.resolveLookups, onLookupsResolve = _a.onLookupsResolve;
+    var _b = react_1.useState([]), requestedCodes = _b[0], setRequestedCodes = _b[1];
+    react_1.useEffect(function () {
+        var _a = ramda_1.pipe(mdm_sdk_1.wrapInArrayIfNeeded, ramda_1.filter(isUnresolvedLookup), ramda_1.map(ramda_1.prop('lookupCode')), ramda_1.partition(isResolvedLookupCode(resolvedValues)))(lookups), resolvedCodes = _a[0], codesToResolve = _a[1];
+        if (resolvedCodes.length > 0) {
+            var resolvedLookups = resolvedCodes.map(function (lookupCode) { return ({
+                lookupCode: lookupCode,
+                value: resolvedValues[lookupCode].displayName
+            }); });
+            onLookupsResolve(resolvedLookups);
+        }
+        var unrequestedCodes = codesToResolve.filter(function (code) { return !requestedCodes.includes(code); });
+        if (unrequestedCodes.length > 0) {
+            setRequestedCodes(ramda_1.pipe(ramda_1.concat(unrequestedCodes), ramda_1.uniq));
+            resolveLookups(unrequestedCodes);
+        }
+    }, [lookups, resolvedValues]); // eslint-disable-line
+};
+exports.default = useLookupsResolver;

package/components/editors/DropDownEditor/DropDownEditor.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 MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var MultipliableSelect_1 = __importDefault(require("../../MultipliableSelect/MultipliableSelect"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var prop_types_2 = require("../../../constants/prop-types");
+var ramda_1 = require("ramda");
+var findEntryByValue = function (entries) { return function (value) { return entries.find(ramda_1.propEq('value', value)); }; };
+var DropDownEditor = function (_a) {
+    var entries = _a.entries, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entries", "classes"]);
+    var menuItem = classes.menuItem, otherClasses = __rest(classes, ["menuItem"]);
+    return (react_1.default.createElement(MultipliableSelect_1.default, __assign({}, otherProps, { classes: otherClasses, getValueLabel: ramda_1.pipe(findEntryByValue(entries), ramda_1.prop('label')) }), entries.map(function (_a, index) {
+        var value = _a.value, label = _a.label;
+        return (react_1.default.createElement(MenuItem_1.default, { key: index, value: value, className: menuItem }, label || value.toString()));
+    })));
+};
+DropDownEditor.propTypes = {
+    classes: prop_types_1.default.object,
+    entries: prop_types_1.default.arrayOf(prop_types_2.DropDownEntryType).isRequired
+};
+exports.default = DropDownEditor;