@reltio/components 1.4.877 → 1.4.881

package/cjs/components/EntityAvatar/EntityAvatar.js

@@ -0,0 +1,26 @@
+"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 react_redux_1 = require("react-redux");
+var classnames_1 = __importDefault(require("classnames"));
+var Avatar_1 = __importDefault(require("@material-ui/core/Avatar"));
+var no_photo_svg_1 = require("./no-photo.svg");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var EntityAvatar = function (_a) {
+    var entity = _a.entity, avatarClassName = _a.avatarClassName, imageClassName = _a.imageClassName;
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var absoluteImagePath = react_redux_1.useSelector(mdm_module_1.default.selectors.getAbsoluteImagePath) || '';
+    var entityImageSource = mdm_sdk_1.getEntityImage(metadata, absoluteImagePath, entity);
+    var fallbackImage = mdm_sdk_1.getAbsoluteImageUrl(absoluteImagePath, mdm_sdk_1.getEntityTypeImage(metadata, entity.type));
+    var onImageLoadFail = function (e) {
+        e.target.onError = null;
+        e.target.src = mdm_sdk_1.svg2Url(no_photo_svg_1.DEFAULT_PROFILE_IMAGE);
+    };
+    return (react_1.default.createElement(Avatar_1.default, { className: classnames_1.default(avatarClassName, imageClassName), src: entityImageSource, imgProps: { onError: onImageLoadFail } },
+        react_1.default.createElement("img", { className: imageClassName, src: fallbackImage, alt: "fallback entity avatar", onError: onImageLoadFail })));
+};
+exports.default = EntityAvatar;

package/cjs/components/EntityAvatar/no-photo.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PROFILE_IMAGE = void 0;
+exports.DEFAULT_PROFILE_IMAGE = "\n<svg width=\"400px\" height=\"400px\" viewBox=\"0 0 400 400\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>Group</title>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Group\" fill-rule=\"nonzero\">\n            <rect id=\"Rectangle\" fill=\"#DFE5E9\" x=\"0\" y=\"0\" width=\"400\" height=\"400\"></rect>\n            <path d=\"M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n            <path d=\"M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n            <path d=\"M5.68434189e-14,387.023257 L5.68434189e-14,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 5.68434189e-14,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n        </g>\n    </g>\n</svg>\n";

package/cjs/components/EntityTypeBadge/EntityTypeBadge.js

@@ -0,0 +1,25 @@
+"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 react_redux_1 = require("react-redux");
+var classnames_1 = __importDefault(require("classnames"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var styles_1 = __importDefault(require("./styles"));
+var EntityTypeBadge = function (_a) {
+    var entity = _a.entity, className = _a.className, _b = _a.size, size = _b === void 0 ? 'small' : _b;
+    var styles = styles_1.default();
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var entityTypeUri = entity.type;
+    var entityType = mdm_sdk_1.getEntityType(metadata, entityTypeUri) || {};
+    var entityTypeColor = mdm_sdk_1.getPropWithInheritance(metadata, entityType, 'typeColor') || mdm_sdk_1.theme.palette.primary.main;
+    return (react_1.default.createElement(Typography_1.default, { style: {
+            backgroundColor: entityTypeColor,
+            color: mdm_sdk_1.utils.Colors.getColor(entityTypeColor) ? '#FFFFFF' : '#212121'
+        }, className: classnames_1.default(styles["entityType-" + size], className), component: "div" }, mdm_sdk_1.getEntityTypeLabel(metadata, entity)));
+};
+exports.default = EntityTypeBadge;

package/cjs/components/EntityTypeBadge/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = styles_1.makeStyles({
+    'entityType-small': {
+        padding: '1px 4px',
+        fontSize: '10px',
+        lineHeight: 'normal',
+        display: 'inline-flex',
+        marginRight: '12px',
+        borderRadius: '2px'
+    },
+    'entityType-medium': {
+        padding: '2px 8px 3px',
+        borderRadius: '2px',
+        fontSize: '13px',
+        fontWeight: 500,
+        lineHeight: '15px',
+        display: 'inline-flex',
+        marginRight: '16px'
+    }
+});
+exports.default = useStyles;

package/cjs/components/EntityTypeIcon/EntityTypeIcon.js

@@ -0,0 +1,26 @@
+"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 react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var EntityTypeIcon_1 = __importDefault(require("react-components/dist/EntityTypeIcon/EntityTypeIcon"));
+var ensureSlashEnding = function (str) { return (str.endsWith('/') ? str : str + '/'); };
+var EntityTypeIcon = function (props) {
+    var absoluteImagePath = react_redux_1.useSelector(mdm_module_1.default.selectors.getAbsoluteImagePath) || '';
+    return react_1.default.createElement(EntityTypeIcon_1.default, __assign({}, props, { storagePath: ensureSlashEnding(absoluteImagePath) }));
+};
+exports.default = EntityTypeIcon;

package/cjs/components/EntityTypesSelector/EntityTypesSelector.js

@@ -0,0 +1,145 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var icons_1 = require("@material-ui/icons");
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
+var SelectionPopup_1 = __importDefault(require("../SelectionPopup/SelectionPopup"));
+var helpers_1 = require("../SelectionPopup/helpers");
+var SelectEntityTypesList_1 = __importDefault(require("./SelectEntityTypesList"));
+var ListLabel_1 = __importDefault(require("./ListLabel/ListLabel"));
+var MIN_CONTAINER_WIDTH = 255;
+var LIST_HEIGHT = 245;
+var POPUP_HEIGHT = 355;
+var EntityTypesSelector = function (_a) {
+    var _b, _c, _d, _e;
+    var entityTypes = _a.entityTypes, selectedEntityTypes = _a.selectedEntityTypes, single = _a.single, placeholder = _a.placeholder, enableEmptyValueUnderline = _a.enableEmptyValueUnderline, onChange = _a.onChange, _f = _a.classes, classes = _f === void 0 ? {} : _f, _g = _a.ListLabelProps, ListLabelProps = _g === void 0 ? {} : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h;
+    var styles = styles_1.useStyles();
+    var _j = react_1.useState(false), isPopupOpen = _j[0], setIsPopupOpen = _j[1];
+    var openPopup = react_1.useCallback(function () { return setIsPopupOpen(true); }, []);
+    var closePopup = react_1.useCallback(function () { return setIsPopupOpen(false); }, []);
+    var _k = react_1.useState(''), filterText = _k[0], setFilterText = _k[1];
+    var clearFilterText = react_1.useCallback(function () { return setFilterText(''); }, []);
+    var handleClose = react_1.useCallback(ramda_1.pipe(clearFilterText, closePopup), [closePopup, clearFilterText]);
+    var items = react_1.useMemo(function () {
+        return entityTypes
+            .filter(mdm_sdk_1.isAvailableEntityType)
+            .filter(function (_a) {
+            var label = _a.label;
+            return mdm_sdk_1.utils.strings.search(label, filterText);
+        })
+            .map(function (item, index) { return ({ item: { item: __assign(__assign({}, item), { filterText: filterText }) }, index: index }); });
+    }, [entityTypes, filterText]);
+    var selectedLabels = react_1.useMemo(function () { return selectedEntityTypes.map(function (uri) { return entityTypes.find(ramda_1.propEq('uri', uri)); }).map(ramda_1.prop('label')); }, [selectedEntityTypes, entityTypes]);
+    var handleListItemClick = react_1.useCallback(function (entityType, checked) {
+        if (single) {
+            onChange(checked ? [entityType.uri] : []);
+            handleClose();
+        }
+        else {
+            onChange(checked
+                ? selectedEntityTypes.concat(entityType.uri)
+                : selectedEntityTypes.filter(function (uri) { return uri !== entityType.uri; }));
+        }
+    }, [selectedEntityTypes, onChange, single, handleClose]);
+    var handleSearchOnEnter = react_1.useCallback(function (_a) {
+        var item = _a.item;
+        var checked = !selectedEntityTypes.includes(item.uri);
+        handleListItemClick(item, checked);
+    }, [selectedEntityTypes, handleListItemClick]);
+    var _l = helpers_1.useKeyboardNavigation({
+        items: items,
+        open: isPopupOpen,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedEntityTypes,
+        onClose: handleClose
+    }), focusIndex = _l.focusIndex, handleKeyDown = _l.handleKeyDown;
+    var rootRef = react_1.useRef();
+    var rootWidth = rootRef.current ? rootRef.current.getBoundingClientRect().width : 0;
+    var containerWidth = Math.max(rootWidth, MIN_CONTAINER_WIDTH);
+    var noTypesSelected = selectedEntityTypes.length === 0;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TextField_1.default, { label: ui_i18n_1.default.text('Entity type'), ref: rootRef, InputProps: {
+                startAdornment: noTypesSelected && !placeholder ? null : (react_1.default.createElement("div", { className: classnames_1.default(styles.inputText, classes.inputText) }, noTypesSelected ? (react_1.default.createElement("div", null, placeholder)) : (react_1.default.createElement(ListLabel_1.default, __assign({}, ListLabelProps, { list: selectedLabels }))))),
+                classes: {
+                    root: styles.inputRoot,
+                    input: classnames_1.default(styles.input, classes.input, (_b = {},
+                        _b[styles.emptyInput] = noTypesSelected && !placeholder,
+                        _b)),
+                    disabled: classnames_1.default(styles.disabledInput, (_c = {}, _c[styles.disabledPointer] = disabled, _c)),
+                    underline: styles.disabledUnderline
+                },
+                endAdornment: (react_1.default.createElement(SmallIconButton_1.default, { size: 'L', icon: icons_1.ArrowDropDown, iconClassName: classnames_1.default(styles.icon, (_d = {},
+                        _d[styles['popup-opened-icon']] = isPopupOpen,
+                        _d)), disabled: disabled })),
+                readOnly: true,
+                disabled: true,
+                disableUnderline: noTypesSelected && !enableEmptyValueUnderline
+            }, inputProps: {
+                tabIndex: -1
+            }, InputLabelProps: {
+                classes: {
+                    root: classnames_1.default(styles.inputLabel, classes.label)
+                }
+            }, value: "", onClick: disabled ? undefined : openPopup, classes: { root: classnames_1.default(styles.root, classes.root) }, margin: "dense", variant: "filled", disabled: disabled, "data-reltio-id": "entity-type-selector" }),
+        react_1.default.createElement(SelectionPopup_1.default, { open: isPopupOpen, anchorEl: rootRef.current, onClose: handleClose, onSearch: setFilterText, title: ui_i18n_1.default.text('Select entity types'), containerWidth: containerWidth, containerHeight: POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, transformOrigin: { horizontal: 'left', vertical: 'top' }, anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, PaperProps: (_e = {}, _e['data-reltio-id'] = 'entity-type-selector-popup', _e) },
+            react_1.default.createElement(SelectEntityTypesList_1.default, { items: items, onItemClick: handleListItemClick, selectedEntityTypes: selectedEntityTypes, width: containerWidth, height: LIST_HEIGHT, focusIndex: focusIndex }))));
+};
+EntityTypesSelector.propTypes = {
+    entityTypes: prop_types_1.default.arrayOf(mdm_sdk_1.EntityTypeType),
+    selectedEntityTypes: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    onChange: prop_types_1.default.func.isRequired,
+    single: prop_types_1.default.bool,
+    enableEmptyValueUnderline: prop_types_1.default.bool,
+    placeholder: prop_types_1.default.string,
+    classes: prop_types_1.default.shape({
+        root: prop_types_1.default.string,
+        label: prop_types_1.default.string,
+        inputText: prop_types_1.default.string,
+        input: prop_types_1.default.string
+    }),
+    ListLabelProps: prop_types_1.default.shape({
+        maxWidth: prop_types_1.default.number
+    }),
+    disabled: prop_types_1.default.bool
+};
+exports.default = react_1.memo(EntityTypesSelector);

package/cjs/components/EntityTypesSelector/ListLabel/ListLabel.js

@@ -0,0 +1,51 @@
+"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 Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var styles_1 = require("./styles");
+var helpers_1 = require("./helpers");
+var ListLabel = function (_a) {
+    var list = _a.list, maxWidth = _a.maxWidth;
+    var styles = styles_1.useStyles();
+    var labelRef = react_1.useRef();
+    var _b = react_1.useState(0), hiddenItemsCount = _b[0], setHiddenItemsCount = _b[1];
+    react_1.useEffect(function () {
+        setHiddenItemsCount(helpers_1.countHiddenItems(list, labelRef.current));
+    }, [list]);
+    var listLabel = helpers_1.getListLabel(list);
+    var hasHiddenItems = hiddenItemsCount > 0;
+    var visibleItemsLabel = hasHiddenItems ? helpers_1.getListLabel(list.slice(0, -hiddenItemsCount)) : listLabel;
+    return (react_1.default.createElement(Tooltip_1.default, { title: hasHiddenItems ? listLabel : '' },
+        react_1.default.createElement("div", { className: styles.listLabelContainer },
+            react_1.default.createElement("div", { style: { width: helpers_1.getListLabelWidth(maxWidth) }, className: styles.listLabel, ref: labelRef }, listLabel),
+            react_1.default.createElement("div", { className: styles.visibleItemsLabel }, visibleItemsLabel),
+            hasHiddenItems && react_1.default.createElement("div", { className: styles.hiddenCount }, "+" + hiddenItemsCount))));
+};
+ListLabel.propTypes = {
+    list: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
+    maxWidth: prop_types_1.default.number
+};
+exports.default = ListLabel;

package/cjs/components/EntityTypesSelector/ListLabel/helpers.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getListLabelWidth = exports.getListLabel = exports.countHiddenItems = void 0;
+var ramda_1 = require("ramda");
+var ITEMS_SEPARATOR = ', ';
+var ALWAYS_VISIBLE_ITEMS_COUNT = 1;
+var HIDDEN_COUNT_WIDTH = 35;
+var countHiddenItems = function (list, labelEl) {
+    var itemsCount = list.length;
+    var overflowItemsCount = countOverflowItems(list, labelEl);
+    var visibleItemsCount = Math.max(ALWAYS_VISIBLE_ITEMS_COUNT, itemsCount - overflowItemsCount);
+    return itemsCount - visibleItemsCount;
+};
+exports.countHiddenItems = countHiddenItems;
+var countOverflowItems = function (list, labelEl) {
+    if (labelEl) {
+        var firstOverflowItemIndex = findFirstOverflowItemIndex(list, labelEl);
+        return firstOverflowItemIndex === -1 ? 0 : list.length - firstOverflowItemIndex;
+    }
+    else {
+        return 0;
+    }
+};
+var findFirstOverflowItemIndex = function (list, labelEl) {
+    var childNodes = labelEl.childNodes, clientLeft = labelEl.clientLeft, clientWidth = labelEl.clientWidth;
+    if (childNodes.length > 0) {
+        var textNode = childNodes[0];
+        var range = document.createRange();
+        range.setStart(textNode, 0);
+        for (var index = 0; index < list.length; index++) {
+            range.setEnd(textNode, range.endOffset + list[index].length);
+            var rangeWidth = range.getBoundingClientRect().width;
+            if (clientLeft + rangeWidth > clientWidth) {
+                return index;
+            }
+            if (index !== list.length - 1) {
+                range.setEnd(textNode, range.endOffset + ITEMS_SEPARATOR.length);
+            }
+        }
+    }
+    return -1;
+};
+var getListLabel = function (list) { return list.join(ITEMS_SEPARATOR); };
+exports.getListLabel = getListLabel;
+var getListLabelWidth = function (maxWidth) {
+    var maxCssWidth = ramda_1.isNil(maxWidth) ? '100%' : maxWidth + "px";
+    return "calc(" + maxCssWidth + " - " + HIDDEN_COUNT_WIDTH + "px)";
+};
+exports.getListLabelWidth = getListLabelWidth;

package/cjs/components/EntityTypesSelector/ListLabel/styles.js

@@ -0,0 +1,36 @@
+"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({
+    listLabelContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        justifyContent: 'space-between',
+        height: '100%',
+        width: '100%'
+    },
+    listLabel: {
+        visibility: 'hidden',
+        position: 'absolute',
+        overflow: 'hidden'
+    },
+    visibleItemsLabel: {
+        textOverflow: 'ellipsis',
+        marginRight: '5px',
+        overflow: 'hidden',
+        flex: 1,
+        flexBasis: 'auto'
+    },
+    hiddenCount: {
+        color: 'rgba(0,0,0,0.87)',
+        fontSize: '13px',
+        lineHeight: '15px',
+        padding: '5px 8px',
+        borderRadius: '16px',
+        backgroundColor: 'rgba(0,0,0,.12)'
+    }
+});

package/cjs/components/EntityTypesSelector/SelectEntityTypesList.js

@@ -0,0 +1,70 @@
+"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 ramda_1 = require("ramda");
+var AttributeListItem_1 = __importDefault(require("../AttributeListItem/AttributeListItem"));
+var Highlighter_1 = __importDefault(require("../Highlighter/Highlighter"));
+var VirtualGroupedList_1 = __importDefault(require("../VirtualGroupedList/VirtualGroupedList"));
+var ITEM_HEIGHT = 32;
+var getItemSize = ramda_1.always(ITEM_HEIGHT);
+var SelectEntityTypesList = function (_a) {
+    var selectedEntityTypes = _a.selectedEntityTypes, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, otherProps = __rest(_a, ["selectedEntityTypes", "onItemClick", "focusIndex"]);
+    var renderItem = function (style, _a, index) {
+        var item = _a.item;
+        var isSelected = !!selectedEntityTypes.find(function (uri) { return item.uri === uri; });
+        var isFocused = index === focusIndex;
+        return (react_1.default.createElement(AttributeListItem_1.default, { key: item.uri, onClick: onItemClick, checked: isSelected, data: item, label: react_1.default.createElement(Highlighter_1.default, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: true, LogoIcon: item.LogoIcon }));
+    };
+    return (react_1.default.createElement(VirtualGroupedList_1.default, __assign({ getItemSize: getItemSize, renderItem: renderItem, focusIndex: focusIndex, fixedTitle: false, disableHorizontalScrollbar: true }, otherProps)));
+};
+SelectEntityTypesList.propTypes = {
+    selectedEntityTypes: prop_types_1.default.array,
+    onItemClick: prop_types_1.default.func,
+    focusIndex: prop_types_1.default.number
+};
+exports.default = react_1.memo(SelectEntityTypesList);

package/cjs/components/EntityTypesSelector/styles.js

@@ -0,0 +1,72 @@
+"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({
+    root: {
+        borderRadius: '4px 4px 0 0',
+        margin: 0,
+        fontSize: '14px',
+        letterSpacing: 0,
+        lineHeight: '16px'
+    },
+    inputLabel: {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        width: '100%',
+        top: 'calc(50% - 23px)'
+    },
+    inputText: {
+        display: 'flex',
+        flexGrow: 1,
+        alignItems: 'center',
+        height: '25px',
+        width: 'calc(100% - 53px)',
+        paddingTop: '18px',
+        paddingBottom: '4px',
+        color: 'rgba(0,0,0,0.87)',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    input: {
+        width: 0,
+        cursor: 'pointer',
+        '&[disabled]': {
+            backgroundColor: 'transparent',
+            cursor: 'default'
+        },
+        '&$emptyInput': {
+            width: '100%'
+        }
+    },
+    emptyInput: {},
+    disabledInput: {},
+    disabledPointer: {},
+    disabledUnderline: {},
+    inputRoot: {
+        flex: 1,
+        paddingRight: '4px',
+        fontSize: '14px',
+        letterSpacing: 0,
+        lineHeight: '16px',
+        '&$disabledInput': {
+            backgroundColor: 'rgba(0, 0, 0, 0.03)',
+            cursor: 'pointer',
+            '&$disabledPointer': {
+                cursor: 'default'
+            },
+            '&$disabledUnderline::before': {
+                borderBottomStyle: 'solid'
+            }
+        }
+    },
+    icon: {
+        transform: 'rotate(0deg)',
+        transition: 'transform 0.35s ease'
+    },
+    'popup-opened-icon': {
+        transform: 'rotate(-180deg)'
+    }
+});

package/cjs/components/EntityUriLink/EntityUriLink.js

@@ -0,0 +1,43 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var contexts_1 = require("../../contexts");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var EntityUriLink = react_1.forwardRef(function (_a, ref) {
+    var value = _a.value, children = _a.children, className = _a.className;
+    var dispatch = react_redux_1.useDispatch();
+    var viewId = react_1.useContext(contexts_1.ViewIdContext);
+    var uiPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getUIPath);
+    var generateEntityUrl = function (uri) { return mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: uri }); };
+    var onClick = react_1.useCallback(function () {
+        dispatch(mdm_module_1.ui.actions.openEntity({ uri: value, viewId: viewId }));
+    }, [viewId, value, dispatch]);
+    return (react_1.default.createElement("a", { ref: ref, href: generateEntityUrl(value), onClick: function (e) {
+            onClick();
+            e.stopPropagation();
+            e.preventDefault();
+        }, className: className }, children));
+});
+EntityUriLink.displayName = 'EntityUriLink';
+exports.default = EntityUriLink;