@reltio/components 1.4.701 → 1.4.702

package/components/attributes/editMode/ComplexAttribute/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({
+    editor: {
+        display: 'flex',
+        flex: 1,
+        height: '36px',
+        alignItems: 'center'
+    },
+    label: {
+        flex: 1,
+        marginLeft: '2px',
+        marginTop: '2px',
+        fontSize: '13px',
+        lineHeight: '15px'
+    },
+    actions: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    titleContainer: {
+        display: 'flex',
+        flex: 1,
+        minHeight: '20px'
+    },
+    expandButton: {
+        marginTop: '2px'
+    }
+});

package/components/attributes/editMode/EntityCreator/EntityCreator.js

@@ -0,0 +1,49 @@
+"use strict";
+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 __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 AttributesList_1 = __importDefault(require("../AttributesList"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var defaultAttributeTypesSelectionStrategy = function (entityType) { return entityType && entityType.attributes; };
+var EntityCreator = function (_a) {
+    var entity = _a.entity, entityType = _a.entityType, _b = _a.attributeTypesSelectionStrategy, attributeTypesSelectionStrategy = _b === void 0 ? defaultAttributeTypesSelectionStrategy : _b, mode = _a.mode, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute;
+    var attributeTypes = react_1.useMemo(function () { return attributeTypesSelectionStrategy(entityType); }, [
+        attributeTypesSelectionStrategy,
+        entityType
+    ]);
+    return entity ? (react_1.default.createElement(AttributesList_1.default, { attrTypes: attributeTypes, entity: entity, showEmptyEditors: true, drawLines: true, parentUri: entity.uri, mode: mode, crosswalks: entity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })) : null;
+};
+EntityCreator.propTypes = {
+    entityUri: prop_types_1.default.string,
+    parentUri: prop_types_1.default.string,
+    entity: prop_types_1.default.object,
+    entityType: prop_types_1.default.object,
+    attributeTypesSelectionStrategy: prop_types_1.default.func,
+    mode: mdm_sdk_1.ModeType,
+    onAddAttributes: prop_types_1.default.func,
+    onDeleteAttribute: prop_types_1.default.func,
+    onChangeAttribute: prop_types_1.default.func
+};
+exports.default = EntityCreator;

package/components/attributes/editMode/EntityCreator/index.js

@@ -0,0 +1,38 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityCreator = void 0;
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var EntityCreator_1 = __importDefault(require("./EntityCreator"));
+exports.EntityCreator = EntityCreator_1.default;
+var mapStateToProps = function (state, ownProps) { return ({
+    entity: ownProps.entityUri && mdm_module_1.default.selectors.getModifiedEntity(state, ownProps.entityUri)
+}); };
+var mapDispatchToProps = {
+    onAddAttributes: mdm_module_1.profile.actions.addAttributes,
+    onDeleteAttribute: mdm_module_1.profile.actions.removeAttribute,
+    onChangeAttribute: mdm_module_1.profile.actions.modifyAttribute
+};
+exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(EntityCreator_1.default);

package/components/attributes/editMode/EntitySelector/EntitySelector.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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var DropDownSelector_1 = __importDefault(require("../../../DropDownSelector/DropDownSelector"));
+var EntityOption_1 = __importDefault(require("./components/EntityOption"));
+var SingleValue_1 = __importDefault(require("./components/SingleValue"));
+var ClearIndicator_1 = __importDefault(require("./components/ClearIndicator"));
+var EntityCreator_1 = __importDefault(require("../EntityCreator"));
+var core_1 = require("../../../../core");
+var Group_1 = __importDefault(require("./components/Group"));
+var styles_1 = require("./styles");
+var buildEntityOptions = function (entityTypes) { return function (entities) {
+    var newOptions = entities.map(function (entity) { return (__assign(__assign({}, entity), { label: mdm_sdk_1.getLabel(entity.label), entityType: entityTypes.find(function (_a) {
+            var uri = _a.uri;
+            return uri === entity.type;
+        }) })); });
+    var addDummyOptionToEmptyOptionList = function (options) {
+        return ramda_1.isEmpty(options)
+            ? [
+                {
+                    label: '',
+                    uri: '',
+                    entityType: {}
+                }
+            ]
+            : options;
+    };
+    return entityTypes.length > 1
+        ? entityTypes.map(function (type) {
+            return {
+                label: type.label,
+                entityType: type.uri,
+                options: addDummyOptionToEmptyOptionList(newOptions.filter(function (option) { return option.type === type.uri; }))
+            };
+        })
+        : addDummyOptionToEmptyOptionList(newOptions);
+}; };
+var EntitySelector = function (_a) {
+    var _b = _a.entity, entity = _b === void 0 ? {} : _b, _c = _a.entityTypesUris, entityTypesUris = _c === void 0 ? [] : _c, mode = _a.mode, max = _a.max, onChange = _a.onChange, onCreate = _a.onCreate, metadata = _a.metadata, globalSearchRequestOptions = _a.globalSearchRequestOptions, attributeTypesSelectionStrategy = _a.attributeTypesSelectionStrategy, disableLinkClick = _a.disableLinkClick, otherProps = __rest(_a, ["entity", "entityTypesUris", "mode", "max", "onChange", "onCreate", "metadata", "globalSearchRequestOptions", "attributeTypesSelectionStrategy", "disableLinkClick"]);
+    var styles = styles_1.useStyles();
+    var _d = react_1.useState(''), inputValue = _d[0], setInputValue = _d[1];
+    var entityTypes = react_1.useMemo(function () { return entityTypesUris.map(function (type) { return mdm_sdk_1.getEntityType(metadata, type); }); }, [
+        entityTypesUris,
+        metadata
+    ]);
+    var filters = [
+        {
+            filter: 'equals',
+            fieldName: 'type',
+            values: entityTypesUris.map(mdm_sdk_1.getLastUriPart)
+        }
+    ];
+    var options = __assign(__assign({}, globalSearchRequestOptions), { max: max });
+    var handleCreate = onCreate
+        ? function (value, entityTypeUri) {
+            onCreate(entityTypeUri || entityTypesUris[0], value);
+            setInputValue('');
+        }
+        : undefined;
+    var handleInputChange = function (value) {
+        setInputValue(value);
+    };
+    var handleChange = function (value) {
+        if (value !== null) {
+            setInputValue('');
+            onChange(value);
+        }
+    };
+    var handleClear = function () {
+        handleChange({});
+    };
+    var groupMode = react_1.useMemo(function () { return entityTypes.length !== 1; }, [entityTypes]);
+    var getOptions = function (value) { return mdm_sdk_1.getFilteredEntities(filters, options, value).then(buildEntityOptions(entityTypes)); };
+    var currentEntityType = (ramda_1.isEmpty(entity) ? entityTypes[0] : mdm_sdk_1.getEntityType(metadata, entity.entityType)) || {};
+    var createLabel = onCreate && ui_i18n_1.default.text("Create " + (inputValue ? "\"" + inputValue + "\" as " : '') + "new " + currentEntityType.label);
+    var label = ui_i18n_1.default.text("Select " + (entityTypes.length === 1 ? entityTypes[0].label + " " : '') + "profile");
+    var isTempEntity = !ramda_1.isEmpty(entity) && mdm_sdk_1.isTempUri(entity.entityUri);
+    var groupComponent = groupMode ? { Group: Group_1.default, GroupHeading: core_1.EmptyStub } : {};
+    var clearComponent = isTempEntity ? { ClearIndicator: ClearIndicator_1.default } : {};
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(DropDownSelector_1.default, __assign({ value: !ramda_1.isEmpty(entity) ? entity : undefined, inputValue: inputValue, onInputChange: handleInputChange, getOptions: getOptions, getOptionLabel: ramda_1.prop('entityLabel'), onChange: handleChange, onCreate: handleCreate, onClear: handleClear, label: label, createLabel: createLabel, components: __assign(__assign({ Option: EntityOption_1.default, SingleValue: SingleValue_1.default }, groupComponent), clearComponent), currentEntityType: currentEntityType, isClearable: true, disableLinkClick: disableLinkClick }, otherProps)),
+        isTempEntity && (react_1.default.createElement("div", { className: styles.creatorWrapper },
+            react_1.default.createElement(EntityCreator_1.default, { mode: mode, attributeTypesSelectionStrategy: attributeTypesSelectionStrategy, entityType: currentEntityType, entityUri: entity.entityUri })))));
+};
+EntitySelector.propTypes = {
+    entity: mdm_sdk_1.ConnectionEntityType,
+    entityTypesUris: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    max: prop_types_1.default.number,
+    mode: mdm_sdk_1.ModeType,
+    dispatch: prop_types_1.default.func,
+    metadata: mdm_sdk_1.MetadataType,
+    onChange: prop_types_1.default.func.isRequired,
+    onCreate: prop_types_1.default.func,
+    attributeTypesSelectionStrategy: prop_types_1.default.func,
+    globalSearchRequestOptions: prop_types_1.default.object,
+    disableLinkClick: prop_types_1.default.bool
+};
+exports.default = EntitySelector;

package/components/attributes/editMode/EntitySelector/components/ClearIndicator.js

@@ -0,0 +1,20 @@
+"use strict";
+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 Clear_1 = __importDefault(require("@material-ui/icons/Clear"));
+var styles_1 = require("./styles");
+var IconButton_1 = __importDefault(require("@material-ui/core/IconButton"));
+var ClearIndicator = function (props) {
+    var onClear = props.selectProps.onClear;
+    var styles = styles_1.useClearIconStyles();
+    return (react_1.default.createElement(IconButton_1.default, { onClick: onClear },
+        react_1.default.createElement(Clear_1.default, { className: styles.clearIcon })));
+};
+ClearIndicator.propTypes = {
+    selectProps: prop_types_1.default.object.isRequired
+};
+exports.default = ClearIndicator;

package/components/attributes/editMode/EntitySelector/components/EntityOption.js

@@ -0,0 +1,58 @@
+"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var EntityTypeIcon_1 = __importDefault(require("../../../../EntityTypeIcon/EntityTypeIcon"));
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var EntityOption = function (_a) {
+    var innerRef = _a.innerRef, innerProps = _a.innerProps, selectOption = _a.selectOption, data = _a.data;
+    var styles = styles_1.useStyles();
+    var uri = data.uri, entityType = data.entityType, label = data.label, secondaryLabel = data.secondaryLabel;
+    if (uri !== '') {
+        return (react_1.default.createElement(MenuItem_1.default, __assign({ className: styles.entityContainer, ref: innerRef, key: uri, onClick: function () { return selectOption({ label: label, uri: uri, entityType: entityType }); } }, innerProps),
+            react_1.default.createElement(EntityTypeIcon_1.default, { className: styles.entityAvatar, entityType: entityType }),
+            react_1.default.createElement("span", { className: styles.entityLabel },
+                label,
+                secondaryLabel && react_1.default.createElement("span", { className: styles.entitySecondaryLabel },
+                    ", ",
+                    secondaryLabel))));
+    }
+    else {
+        return (react_1.default.createElement(MenuItem_1.default, __assign({ className: styles.entityContainer, ref: innerRef, key: uri }, innerProps, { disabled: true }),
+            react_1.default.createElement("span", { className: styles.emptyEntityLabel }, ui_i18n_1.default.text('No results found'))));
+    }
+};
+EntityOption.propTypes = {
+    innerRef: prop_types_1.default.oneOfType([
+        prop_types_1.default.oneOf([null]),
+        prop_types_1.default.func,
+        prop_types_1.default.shape({
+            current: prop_types_1.default.any.isRequired
+        })
+    ]),
+    innerProps: prop_types_1.default.object.isRequired,
+    selectOption: prop_types_1.default.func.isRequired,
+    data: prop_types_1.default.shape({
+        uri: prop_types_1.default.string.isRequired,
+        label: prop_types_1.default.string.isRequired,
+        entityType: mdm_sdk_1.EntityType.isRequired
+    })
+};
+exports.default = EntityOption;

package/components/attributes/editMode/EntitySelector/components/EntityTypeOption.js

@@ -0,0 +1,45 @@
+"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 EntityTypeIcon_1 = __importDefault(require("../../../../EntityTypeIcon/EntityTypeIcon"));
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var styles_1 = require("./styles");
+var EntityTypeOption = function (_a) {
+    var innerRef = _a.innerRef, innerProps = _a.innerProps, selectOption = _a.selectOption, data = _a.data;
+    var styles = styles_1.useStyles();
+    var label = data.label, uri = data.uri;
+    return (react_1.default.createElement(MenuItem_1.default, __assign({ className: styles.entityContainer, ref: innerRef, key: uri, onClick: function () { return selectOption({ label: label, uri: uri }); } }, innerProps),
+        react_1.default.createElement(EntityTypeIcon_1.default, { className: styles.entityAvatar, entityType: data }),
+        react_1.default.createElement("span", { className: styles.entityLabel }, label)));
+};
+EntityTypeOption.propTypes = {
+    innerRef: prop_types_1.default.oneOfType([
+        prop_types_1.default.oneOf([null]),
+        prop_types_1.default.func,
+        prop_types_1.default.shape({
+            current: prop_types_1.default.any.isRequired
+        })
+    ]),
+    innerProps: prop_types_1.default.object.isRequired,
+    selectOption: prop_types_1.default.func.isRequired,
+    data: prop_types_1.default.shape({
+        uri: prop_types_1.default.string.isRequired,
+        label: prop_types_1.default.string.isRequired
+    })
+};
+exports.default = EntityTypeOption;

package/components/attributes/editMode/EntitySelector/components/Group.js

@@ -0,0 +1,40 @@
+"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var react_select_1 = require("react-select");
+var Add_1 = __importDefault(require("@material-ui/icons/Add"));
+var styles_1 = require("./styles");
+var ComponentsGroup = react_select_1.components.Group;
+var Group = function (props) {
+    var _a = props.selectProps, inputValue = _a.inputValue, onCreate = _a.onCreate, data = props.data, children = props.children;
+    var styles = styles_1.useGroupStyles();
+    return (react_1.default.createElement(ComponentsGroup, __assign({}, props),
+        react_1.default.createElement("div", { className: styles.groupHeading },
+            react_1.default.createElement("span", null, data.label),
+            onCreate && (react_1.default.createElement("span", { onClick: function () { return onCreate(inputValue, data.entityType); }, className: styles.addLabel },
+                react_1.default.createElement(Add_1.default, { className: styles.addIcon }),
+                ui_i18n_1.default.text("Create " + (inputValue ? "\"" + inputValue + "\" as " : '') + "new " + data.label)))),
+        children));
+};
+Group.propTypes = {
+    selectProps: prop_types_1.default.object.isRequired,
+    data: prop_types_1.default.object,
+    children: prop_types_1.default.array
+};
+exports.default = Group;

package/components/attributes/editMode/EntitySelector/components/SingleValue.js

@@ -0,0 +1,80 @@
+"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 __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 ramda_1 = require("ramda");
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var ViewIdContext_1 = require("../../../../../contexts/ViewIdContext");
+var SingleValue = function (props) {
+    var _a = props.selectProps, currentEntityType = _a.currentEntityType, menuIsOpen = _a.menuIsOpen, disableLinkClick = _a.disableLinkClick, children = props.children, data = props.data;
+    var styles = styles_1.useSingleValueStyles();
+    var dispatch = react_redux_1.useDispatch();
+    var viewId = react_1.useContext(ViewIdContext_1.ViewIdContext);
+    var uiPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getUIPath);
+    var handleOnMouseDown = function (event) {
+        event.stopPropagation();
+        if (!disableLinkClick) {
+            ramda_1.pipe(ramda_1.always({ uri: data.entityUri, viewId: viewId }), mdm_module_1.ui.actions.openEntity, dispatch)();
+        }
+    };
+    var valueProps = mdm_sdk_1.isTempUri(data.entityUri)
+        ? {
+            className: styles.singleValue,
+            component: 'span'
+        }
+        : {
+            className: classnames_1.default(styles.singleValue, styles.linkValue),
+            onMouseDown: handleOnMouseDown,
+            onClick: function (e) { return e.preventDefault(); },
+            href: mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: data.entityUri }),
+            component: 'a'
+        };
+    return (!menuIsOpen && (react_1.default.createElement(Typography_1.default, __assign({}, valueProps), mdm_sdk_1.isTempUri(data.entityUri)
+        ? ui_i18n_1.default.text("New " + currentEntityType.label + " will be created")
+        : mdm_sdk_1.getLabel(children))));
+};
+SingleValue.propTypes = {
+    children: prop_types_1.default.string,
+    data: prop_types_1.default.object.isRequired,
+    selectProps: prop_types_1.default.object.isRequired
+};
+exports.default = SingleValue;

package/components/attributes/editMode/EntitySelector/components/styles.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClearIconStyles = exports.useGroupStyles = exports.useSingleValueStyles = exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    entityContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '32px',
+        minHeight: '32px',
+        padding: 0
+    },
+    entityLabel: {
+        height: '15px',
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.87)',
+        cursor: 'pointer',
+        lineHeight: '15px',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    },
+    emptyEntityLabel: {
+        height: '15px',
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.6)',
+        lineHeight: '15px',
+        marginLeft: '16px',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        cursor: 'default'
+    },
+    entityAvatar: {
+        transform: 'scale(0.5)',
+        marginLeft: '8px',
+        marginRight: '11px'
+    },
+    entitySecondaryLabel: {
+        color: 'rgba(0,0,0,0.6)'
+    }
+});
+exports.useSingleValueStyles = styles_1.makeStyles(function (theme) { return ({
+    singleValue: {
+        color: 'rgba(0, 0, 0, 0.87)',
+        fontSize: '14px',
+        paddingTop: '18px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    linkValue: {
+        cursor: 'pointer',
+        color: theme.palette.primary.main,
+        textDecoration: 'none'
+    }
+}); });
+exports.useGroupStyles = styles_1.makeStyles(function (theme) { return ({
+    addLabel: {
+        color: theme.palette.primary.main,
+        display: 'flex',
+        fontWeight: '500',
+        cursor: 'pointer',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    },
+    groupHeading: {
+        fontSize: '13px',
+        height: '36px',
+        padding: '0 16px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)'
+    },
+    addIcon: {
+        height: '18px',
+        width: '18px',
+        padding: '0 9px'
+    }
+}); });
+exports.useClearIconStyles = styles_1.makeStyles({
+    clearIcon: {
+        cursor: 'pointer',
+        height: '20px',
+        width: '20px'
+    }
+});

package/components/attributes/editMode/EntitySelector/styles.js

@@ -0,0 +1,9 @@
+"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({
+    creatorWrapper: {
+        marginTop: '20px'
+    }
+});