@reltio/components 1.4.1038 → 1.4.1042

package/cjs/components/EntityTypesSelector/EntityTypesSelector.d.ts

@@ -1,55 +1,17 @@
-declare var _default: React.MemoExoticComponent<{
-    ({ entityTypes, selectedEntityTypes, single, placeholder, enableEmptyValueUnderline, onChange, classes, ListLabelProps, disabled }: {
-        entityTypes: any;
-        selectedEntityTypes: any;
-        single: any;
-        placeholder: any;
-        enableEmptyValueUnderline: any;
-        onChange: any;
-        classes?: {};
-        ListLabelProps?: {};
-        disabled?: boolean;
-    }): JSX.Element;
-    propTypes: {
-        entityTypes: PropTypes.Requireable<PropTypes.InferProps<{
-            typeColor: PropTypes.Requireable<string>;
-            typeIcon: PropTypes.Requireable<string>;
-            typeImage: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            uri: PropTypes.Requireable<string>;
-            attributes: PropTypes.Requireable<PropTypes.InferProps<{
-                label: PropTypes.Requireable<string>;
-                name: PropTypes.Requireable<string>;
-                description: PropTypes.Requireable<string>;
-                type: PropTypes.Requireable<string>;
-                hidden: PropTypes.Requireable<boolean>;
-                faceted: PropTypes.Requireable<boolean>;
-                searchable: PropTypes.Requireable<boolean>;
-                uri: PropTypes.Requireable<string>;
-                access: PropTypes.Requireable<string[]>;
-                cardinality: PropTypes.Requireable<PropTypes.InferProps<{
-                    minValue: PropTypes.Requireable<number>;
-                    maxValue: PropTypes.Requireable<number>;
-                }>>;
-            }>[]>;
-        }>[]>;
-        selectedEntityTypes: PropTypes.Validator<string[]>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        single: PropTypes.Requireable<boolean>;
-        enableEmptyValueUnderline: PropTypes.Requireable<boolean>;
-        placeholder: PropTypes.Requireable<string>;
-        classes: PropTypes.Requireable<PropTypes.InferProps<{
-            root: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            inputText: PropTypes.Requireable<string>;
-            input: PropTypes.Requireable<string>;
-        }>>;
-        ListLabelProps: PropTypes.Requireable<PropTypes.InferProps<{
-            maxWidth: PropTypes.Requireable<number>;
-        }>>;
-        disabled: PropTypes.Requireable<boolean>;
-    };
-}>;
-export default _default;
-import PropTypes from "prop-types";
-import React from "react";
+import React from 'react';
+import { TEntityType } from '@reltio/mdm-sdk';
+import { MetadataTypesSelector } from '../MetadataTypesSelector/MetadataTypesSelector';
+declare type MetadataTypesSelectorProps = React.ComponentProps<typeof MetadataTypesSelector>;
+declare type Props = {
+    entityTypes: TEntityType[];
+    selectedEntityTypes: string[];
+    onChange: (values: string[]) => void;
+    single?: boolean;
+    placeholder?: string;
+    enableEmptyValueUnderline?: boolean;
+    classes?: MetadataTypesSelectorProps['classes'];
+    ListLabelProps?: MetadataTypesSelectorProps['ListLabelProps'];
+    disabled?: boolean;
+};
+export declare const EntityTypesSelector: React.MemoExoticComponent<({ entityTypes, selectedEntityTypes, single, placeholder, enableEmptyValueUnderline, onChange, classes, ListLabelProps, disabled }: Props) => JSX.Element>;
+export {};

package/cjs/components/EntityTypesSelector/EntityTypesSelector.js

@@ -1,15 +1,4 @@
 "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]; } });
@@ -33,113 +22,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityTypesSelector = void 0;
 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);
+var MetadataTypesSelector_1 = require("../MetadataTypesSelector/MetadataTypesSelector");
+exports.EntityTypesSelector = react_1.memo(function (_a) {
+    var entityTypes = _a.entityTypes, selectedEntityTypes = _a.selectedEntityTypes, single = _a.single, placeholder = _a.placeholder, enableEmptyValueUnderline = _a.enableEmptyValueUnderline, onChange = _a.onChange, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.ListLabelProps, ListLabelProps = _c === void 0 ? {} : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var items = react_1.useMemo(function () { return entityTypes.filter(mdm_sdk_1.isAvailableEntityType); }, [entityTypes]);
+    return (react_1.default.createElement(MetadataTypesSelector_1.MetadataTypesSelector, { items: items, selectedItemsUris: selectedEntityTypes, single: single, placeholder: placeholder, enableEmptyValueUnderline: enableEmptyValueUnderline, onChange: onChange, classes: classes, ListLabelProps: ListLabelProps, disabled: disabled, label: ui_i18n_1.default.text('Entity type'), dataReltioId: "entity-type-selector", selectionPopupTitle: ui_i18n_1.default.text('Select entity types') }));
+});
+exports.EntityTypesSelector.displayName = 'EntityTypesSelector';

package/cjs/components/MetadataTypesSelector/ListLabel/ListLabel.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    maxWidth?: number;
+    list: string[];
+};
+export declare const ListLabel: ({ list, maxWidth }: Props) => JSX.Element;
+export {};

package/cjs/components/{EntityTypesSelector → MetadataTypesSelector}/ListLabel/ListLabel.js

@@ -22,8 +22,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListLabel = void 0;
 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");
@@ -44,8 +44,4 @@ var ListLabel = function (_a) {
             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;
+exports.ListLabel = ListLabel;

package/cjs/components/MetadataTypesSelector/ListLabel/helpers.d.ts

@@ -0,0 +1,4 @@
+declare const countHiddenItems: (list: string[], labelEl: HTMLDivElement) => number;
+declare const getListLabel: (list: string[]) => string;
+declare const getListLabelWidth: (maxWidth?: number) => string;
+export { countHiddenItems, getListLabel, getListLabelWidth };

package/cjs/components/{EntityTypesSelector → MetadataTypesSelector}/ListLabel/helpers.js

@@ -24,7 +24,7 @@ var countOverflowItems = function (list, labelEl) {
 var findFirstOverflowItemIndex = function (list, labelEl) {
     var childNodes = labelEl.childNodes, clientLeft = labelEl.clientLeft, clientWidth = labelEl.clientWidth;
     if (childNodes.length > 0) {
-        var textNode = childNodes[0];
+        var textNode = Array.from(childNodes)[0];
         var range = document.createRange();
         range.setStart(textNode, 0);
         for (var index = 0; index < list.length; index++) {

package/cjs/components/MetadataTypesSelector/ListLabel/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"listLabelContainer" | "listLabel" | "visibleItemsLabel" | "hiddenCount">;

package/cjs/components/MetadataTypesSelector/MetadataTypesSelector.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
+import { ListLabel } from './ListLabel/ListLabel';
+declare type ListLabelProps = React.ComponentPropsWithoutRef<typeof ListLabel>;
+declare type Classes = {
+    inputText?: string;
+    input?: string;
+    root?: string;
+    label?: string;
+};
+declare type Props = {
+    items: (TEntityType | TRelationType)[];
+    selectedItemsUris: string[];
+    onChange: (values: string[]) => void;
+    label: string;
+    dataReltioId: string;
+    selectionPopupTitle: string;
+    classes?: Classes;
+    placeholder?: string;
+    ListLabelProps?: Omit<ListLabelProps, 'list'>;
+    disabled?: boolean;
+    enableEmptyValueUnderline?: boolean;
+    single?: boolean;
+};
+export declare const MetadataTypesSelector: React.MemoExoticComponent<({ placeholder, classes, items, selectedItemsUris, onChange, ListLabelProps, disabled, enableEmptyValueUnderline, single, label, dataReltioId, selectionPopupTitle }: Props) => JSX.Element>;
+export {};

package/cjs/components/MetadataTypesSelector/MetadataTypesSelector.js

@@ -0,0 +1,123 @@
+"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 });
+exports.MetadataTypesSelector = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var ArrowDropDown_1 = __importDefault(require("@material-ui/icons/ArrowDropDown"));
+var ListLabel_1 = require("./ListLabel/ListLabel");
+var SmallIconButton_1 = require("../SmallIconButton");
+var SelectionPopup_1 = __importDefault(require("../SelectionPopup/SelectionPopup"));
+var helpers_1 = require("../SelectionPopup/helpers");
+var SelectMetadataTypesList_1 = require("./SelectMetadataTypesList");
+var styles_1 = require("./styles");
+var MIN_CONTAINER_WIDTH = 255;
+var LIST_HEIGHT = 245;
+var POPUP_HEIGHT = 355;
+exports.MetadataTypesSelector = react_1.memo(function (_a) {
+    var _b, _c, _d, _e;
+    var placeholder = _a.placeholder, _f = _a.classes, classes = _f === void 0 ? {} : _f, items = _a.items, selectedItemsUris = _a.selectedItemsUris, onChange = _a.onChange, _g = _a.ListLabelProps, ListLabelProps = _g === void 0 ? {} : _g, disabled = _a.disabled, enableEmptyValueUnderline = _a.enableEmptyValueUnderline, single = _a.single, label = _a.label, dataReltioId = _a.dataReltioId, selectionPopupTitle = _a.selectionPopupTitle;
+    var styles = styles_1.useStyles();
+    var _h = react_1.useState(false), isPopupOpen = _h[0], setIsPopupOpen = _h[1];
+    var openPopup = react_1.useCallback(function () { return setIsPopupOpen(true); }, []);
+    var closePopup = react_1.useCallback(function () { return setIsPopupOpen(false); }, []);
+    var _j = react_1.useState(''), filterText = _j[0], setFilterText = _j[1];
+    var clearFilterText = react_1.useCallback(function () { return setFilterText(''); }, []);
+    var handleClose = react_1.useCallback(ramda_1.pipe(clearFilterText, closePopup), [closePopup, clearFilterText]);
+    var filteredItems = items
+        .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 }); });
+    var selectedLabels = react_1.useMemo(function () { return selectedItemsUris.map(function (uri) { return items.find(ramda_1.propEq('uri', uri)); }).map(ramda_1.prop('label')); }, [selectedItemsUris, items]);
+    var handleListItemClick = react_1.useCallback(function (item, checked) {
+        if (single) {
+            onChange(checked ? [item.uri] : []);
+            handleClose();
+        }
+        else {
+            onChange(checked
+                ? selectedItemsUris.concat(item.uri)
+                : selectedItemsUris.filter(function (uri) { return uri !== item.uri; }));
+        }
+    }, [selectedItemsUris, onChange, single, handleClose]);
+    var handleSearchOnEnter = react_1.useCallback(function (_a) {
+        var item = _a.item;
+        var checked = !selectedItemsUris.includes(item.uri);
+        handleListItemClick(item, checked);
+    }, [selectedItemsUris, handleListItemClick]);
+    var _k = helpers_1.useKeyboardNavigation({
+        items: filteredItems,
+        open: isPopupOpen,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedItemsUris,
+        onClose: handleClose
+    }), focusIndex = _k.focusIndex, handleKeyDown = _k.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 = selectedItemsUris.length === 0;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TextField_1.default, { label: label, 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.ListLabel, __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.SmallIconButton, { size: 'L', icon: ArrowDropDown_1.default, 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": dataReltioId }),
+        react_1.default.createElement(SelectionPopup_1.default, { open: isPopupOpen, anchorEl: rootRef.current, onClose: handleClose, onSearch: setFilterText, title: selectionPopupTitle, containerWidth: containerWidth, containerHeight: POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, transformOrigin: { horizontal: 'left', vertical: 'top' }, anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, PaperProps: (_e = {}, _e['data-reltio-id'] = dataReltioId + "-popup", _e) },
+            react_1.default.createElement(SelectMetadataTypesList_1.SelectMetadataTypesList, { items: filteredItems, onItemClick: handleListItemClick, selectedItems: selectedItemsUris, width: containerWidth, height: LIST_HEIGHT, focusIndex: focusIndex }))));
+});
+exports.MetadataTypesSelector.displayName = 'MetadataTypesSelector';

package/cjs/components/MetadataTypesSelector/SelectMetadataTypesList.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
+import AttributeListItem from '../AttributeListItem/AttributeListItem';
+declare type AttributeListItemProps = React.ComponentPropsWithoutRef<typeof AttributeListItem>;
+declare type Item = {
+    item: {
+        item: TEntityType | TRelationType;
+    };
+    index: number;
+};
+declare type Props = {
+    selectedItems: string[];
+    onItemClick: AttributeListItemProps['onClick'];
+    focusIndex: number;
+    items: Item[];
+    width: number;
+    height: number;
+};
+export declare const SelectMetadataTypesList: React.MemoExoticComponent<({ selectedItems, onItemClick, focusIndex, width, height, ...otherProps }: Props) => JSX.Element>;
+export {};

package/cjs/components/{EntityTypesSelector/SelectEntityTypesList.js → MetadataTypesSelector/SelectMetadataTypesList.js}

@@ -44,27 +44,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectMetadataTypesList = void 0;
 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"]);
+exports.SelectMetadataTypesList = react_1.memo(function (_a) {
+    var selectedItems = _a.selectedItems, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, width = _a.width, height = _a.height, otherProps = __rest(_a, ["selectedItems", "onItemClick", "focusIndex", "width", "height"]);
     var renderItem = function (style, _a, index) {
         var item = _a.item;
-        var isSelected = !!selectedEntityTypes.find(function (uri) { return item.uri === uri; });
+        var isSelected = !!selectedItems.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);
+    return (react_1.default.createElement(VirtualGroupedList_1.default, __assign({ getItemSize: getItemSize, renderItem: renderItem, focusIndex: focusIndex, fixedTitle: false, disableHorizontalScrollbar: true, width: width, height: height }, otherProps)));
+});
+exports.SelectMetadataTypesList.displayName = 'SelectMetadataTypesList';

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "input" | "root" | "inputLabel" | "inputRoot" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;

package/cjs/components/RelationTypesSelector/RelationTypesSelector.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TRelationType } from '@reltio/mdm-sdk';
+import { MetadataTypesSelector } from '../MetadataTypesSelector/MetadataTypesSelector';
+declare type MetadataTypesSelectorProps = React.ComponentProps<typeof MetadataTypesSelector>;
+declare type Props = {
+    relationTypes: TRelationType[];
+    selectedRelationTypes: string[];
+    enableEmptyValueUnderline?: boolean;
+    onChange: (values: string[]) => void;
+    single?: boolean;
+    placeholder?: string;
+    classes?: MetadataTypesSelectorProps['classes'];
+    ListLabelProps?: MetadataTypesSelectorProps['ListLabelProps'];
+    disabled?: boolean;
+};
+export declare const RelationTypesSelector: React.MemoExoticComponent<({ relationTypes, selectedRelationTypes, single, placeholder, enableEmptyValueUnderline, onChange, classes, ListLabelProps, disabled }: Props) => JSX.Element>;
+export {};

package/cjs/components/RelationTypesSelector/RelationTypesSelector.js

@@ -0,0 +1,35 @@
+"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.RelationTypesSelector = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var MetadataTypesSelector_1 = require("../MetadataTypesSelector/MetadataTypesSelector");
+exports.RelationTypesSelector = react_1.memo(function (_a) {
+    var relationTypes = _a.relationTypes, selectedRelationTypes = _a.selectedRelationTypes, single = _a.single, placeholder = _a.placeholder, enableEmptyValueUnderline = _a.enableEmptyValueUnderline, onChange = _a.onChange, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.ListLabelProps, ListLabelProps = _c === void 0 ? {} : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var items = react_1.useMemo(function () { return relationTypes.filter(mdm_sdk_1.isAvailableRelationType); }, [relationTypes]);
+    return (react_1.default.createElement(MetadataTypesSelector_1.MetadataTypesSelector, { items: items, selectedItemsUris: selectedRelationTypes, single: single, placeholder: placeholder, enableEmptyValueUnderline: enableEmptyValueUnderline, onChange: onChange, classes: classes, ListLabelProps: ListLabelProps, disabled: disabled, label: ui_i18n_1.default.text('Relation type'), dataReltioId: "relation-type-selector", selectionPopupTitle: ui_i18n_1.default.text('Select relation types') }));
+});
+exports.RelationTypesSelector.displayName = 'RelationTypesSelector';

package/cjs/components/SearchInput/SearchInput.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { InputProps } from '@material-ui/core/Input';
 export declare type SearchInputProps = InputProps & {
-    value: string;
+    value?: string;
     autofocus: boolean;
     onSearch: (value?: string) => void;
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;
+    placeholder?: string;
 };
-declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, ...otherProps }: SearchInputProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, ...otherProps }: SearchInputProps) => JSX.Element>;
 export default _default;

package/cjs/components/SearchInput/SearchInput.js

@@ -56,13 +56,13 @@ var core_1 = require("../../core");
 var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
 var styles_1 = require("./styles");
 var SearchInput = function (_a) {
-    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? core_1.noop : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height"]);
+    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? core_1.noop : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? ui_i18n_1.default.text('Search') : _d, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder"]);
     var styles = styles_1.useStyles({ height: height });
-    var _d = react_1.useState(''), localValue = _d[0], setLocalValue = _d[1];
+    var _e = react_1.useState(''), localValue = _e[0], setLocalValue = _e[1];
     var updateValue = ramda_1.pipe(ramda_1.tap(onSearch), setLocalValue);
     var clearValue = function () { return updateValue(''); };
     var inputValue = ramda_1.isNil(value) ? localValue : value;
     return (react_1.default.createElement(Input_1.default, __assign({ startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
-            react_1.default.createElement(Search_1.default, { className: styles.icon })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, inputValue.length > 0 && (react_1.default.createElement(SmallIconButton_1.default, { icon: Close_1.default, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classnames_1.default(styles.input, classes.input), root: classnames_1.default(styles.container, classes.root) }), placeholder: ui_i18n_1.default.text('Search'), value: inputValue, onChange: ramda_1.pipe(core_1.getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
+            react_1.default.createElement(Search_1.default, { className: styles.icon })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, inputValue.length > 0 && (react_1.default.createElement(SmallIconButton_1.default, { icon: Close_1.default, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classnames_1.default(styles.input, classes.input), root: classnames_1.default(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: ramda_1.pipe(core_1.getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
 };
 exports.default = react_1.memo(SearchInput);

package/cjs/components/SelectionPopup/SelectionPopup.d.ts

@@ -1,45 +1,18 @@
+import React from 'react';
+import { PopoverProps } from '@material-ui/core/Popover';
+declare type Props = {
+    title: string;
+    containerWidth: number;
+    containerHeight: number;
+    children: React.ReactNode;
+    PaperProps: Record<string, unknown>;
+    searchInputOnKeyDown: (event: React.KeyboardEvent) => void;
+    onSearch: (value?: string) => void;
+    className?: string;
+    hideTitle?: boolean;
+    hideSearchInput?: boolean;
+    headerPlacement?: 'top' | 'bottom';
+    searchInputRef?: React.Ref<unknown>;
+} & PopoverProps;
+declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => JSX.Element;
 export default SelectionPopup;
-declare function SelectionPopup({ title, className, onSearch, hideTitle, hideSearchInput, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, ...otherProps }: {
-    [x: string]: any;
-    title: any;
-    className: any;
-    onSearch: any;
-    hideTitle: any;
-    hideSearchInput: any;
-    headerPlacement?: string;
-    containerWidth: any;
-    containerHeight: any;
-    searchInputOnKeyDown: any;
-    children: any;
-    searchInputRef: any;
-}): JSX.Element;
-declare namespace SelectionPopup {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const title: PropTypes.Requireable<string>;
-        const headerPlacement: PropTypes.Requireable<string>;
-        const onSearch: PropTypes.Requireable<(...args: any[]) => any>;
-        const searchInputOnKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        const containerWidth: PropTypes.Requireable<number>;
-        const containerHeight: PropTypes.Requireable<number>;
-        const hideTitle: PropTypes.Requireable<boolean>;
-        const hideSearchInput: PropTypes.Requireable<boolean>;
-        const searchInputRef: PropTypes.Requireable<PropTypes.InferProps<{
-            current: PropTypes.Requireable<Element>;
-        }>>;
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-    namespace defaultProps {
-        namespace anchorOrigin {
-            const vertical: string;
-            const horizontal: string;
-        }
-        namespace transformOrigin {
-            const vertical_1: string;
-            export { vertical_1 as vertical };
-            const horizontal_1: string;
-            export { horizontal_1 as horizontal };
-        }
-    }
-}
-import PropTypes from "prop-types";