@reltio/components 1.4.2199 → 1.4.2200

package/RolesEditor/RolesEditor.js

@@ -1,33 +1,18 @@
 import React, { useCallback } from 'react';
-import { prop, propEq } from 'ramda';
+import { prop } from 'ramda';
 import Typography from '@mui/material/Typography';
 import i18n from 'ui-i18n';
-import { EntityAttrTypes, getRolesForEntityType, getLastUriPart } from '@reltio/mdm-sdk';
-import { SimpleDropDownSelector } from '../SimpleDropDownSelector';
-import { MultiValueChip } from '../MultiValueChip';
+import { EntityAttrTypes } from '@reltio/mdm-sdk';
 import { SmallIconButton } from '../SmallIconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { useMdmEntity, useMdmMetadata } from '../contexts/MdmModuleContext';
+import { useMdmEntity } from '../contexts/MdmModuleContext';
+import { RolesInput } from '../RolesInput/RolesInput';
 import styles from './RolesEditor.module.css';
-var components = { MultiValue: MultiValueChip };
 export var RolesEditor = function (_a) {
     var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
-    var metadata = useMdmMetadata();
     var entity = useMdmEntity();
     var entityUri = entity.uri;
     var edited = state === 'edited';
-    var options = getRolesForEntityType(metadata, entity.type).map(function (role) { return ({
-        value: role.uri,
-        label: role.label
-    }); });
-    var formattedValues = (values || []).map(function (value) {
-        var _a;
-        var label = (_a = options.find(propEq('value', value))) === null || _a === void 0 ? void 0 : _a.label;
-        return {
-            value: value,
-            label: label || getLastUriPart(value)
-        };
-    });
     var handleChange = useCallback(function (values) {
         var roles = (values === null || values === void 0 ? void 0 : values.map(prop('value'))) || [];
         onChange({
@@ -40,7 +25,7 @@ export var RolesEditor = function (_a) {
         onDelete({ uri: entityUri, attributeType: EntityAttrTypes.roles });
     }, [entityUri, onDelete]);
     return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
-        React.createElement(SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles, className: styles.roleContainer }),
+        React.createElement(RolesInput, { value: values, onChange: handleChange }),
         edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
             "(",
             i18n.text('edited'),

package/RolesEditor/RolesEditor.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"container":"RolesEditor-container--D0IS8","roleContainer":"RolesEditor-roleContainer--G5mqZ","valueContainer":"RolesEditor-valueContainer--YELLe","deleteButton":"RolesEditor-deleteButton--IKQBV","editedLabel":"RolesEditor-editedLabel--VYoNO"};
+const styles = {"container":"RolesEditor-container--D0IS8","deleteButton":"RolesEditor-deleteButton--IKQBV","editedLabel":"RolesEditor-editedLabel--VYoNO"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.RolesEditor-container--D0IS8{align-items:center;display:flex;flex:1;margin-bottom:10px}.RolesEditor-roleContainer--G5mqZ{width:100%}.RolesEditor-valueContainer--YELLe{margin-left:8px;width:0}.RolesEditor-deleteButton--IKQBV{margin-left:8px}.RolesEditor-editedLabel--VYoNO{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
+    style.innerHTML = `.RolesEditor-container--D0IS8{align-items:center;display:flex;flex:1;margin-bottom:10px}.RolesEditor-deleteButton--IKQBV{margin-left:8px}.RolesEditor-editedLabel--VYoNO{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
     head.appendChild(style);
 }
 export default styles;

package/RolesInput/RolesInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    value: string[];
+    onChange: (value: string[]) => void;
+    className?: string;
+};
+export declare const RolesInput: ({ value, onChange, className }: Props) => React.JSX.Element;
+export {};

package/RolesInput/RolesInput.js

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { propEq } from 'ramda';
+import classnames from 'classnames';
+import { getRolesForEntityType, getLastUriPart } from '@reltio/mdm-sdk';
+import { SimpleDropDownSelector } from '../SimpleDropDownSelector';
+import { MultiValueChip } from '../MultiValueChip';
+import { useMdmEntity, useMdmMetadata } from '../contexts/MdmModuleContext';
+import styles from './RolesInput.module.css';
+var components = { MultiValue: MultiValueChip };
+export var RolesInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, className = _a.className;
+    var metadata = useMdmMetadata();
+    var entity = useMdmEntity();
+    var options = useMemo(function () {
+        return getRolesForEntityType(metadata, entity.type).map(function (role) { return ({
+            value: role.uri,
+            label: role.label
+        }); });
+    }, [metadata, entity.type]);
+    var formattedValues = useMemo(function () {
+        return (value || []).map(function (value) {
+            var _a;
+            var label = (_a = options.find(propEq('value', value))) === null || _a === void 0 ? void 0 : _a.label;
+            return {
+                value: value,
+                label: label || getLastUriPart(value)
+            };
+        });
+    }, [value, options]);
+    return (React.createElement(SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: onChange, components: components, classes: styles, className: classnames(styles.roleContainer, className) }));
+};

package/RolesInput/RolesInput.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"roleContainer":"RolesInput-roleContainer--QZfS9","valueContainer":"RolesInput-valueContainer--ItwqV"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RolesInput-roleContainer--QZfS9{width:100%}.RolesInput-valueContainer--ItwqV{margin-left:8px;width:0}`;
+    head.appendChild(style);
+}
+export default styles;

package/TagsEditor/TagsEditor.js

@@ -1,79 +1,16 @@
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import React, { useCallback } from 'react';
-import { EntityAttrTypes, getFacetedAttributeData } from '@reltio/mdm-sdk';
+import { EntityAttrTypes } from '@reltio/mdm-sdk';
 import DeleteIcon from '@mui/icons-material/Delete';
 import Typography from '@mui/material/Typography';
 import i18n from 'ui-i18n';
-import { TypeaheadEditor } from '../TypeaheadEditor';
 import { SmallIconButton } from '../SmallIconButton';
-import { useMdmEntityUri, useMdmGlobalSearchRequestOptions } from '../contexts/MdmModuleContext';
+import { useMdmEntityUri } from '../contexts/MdmModuleContext';
+import { TagsInput } from '../TagsInput/TagsInput';
 import styles from './TagsEditor.module.css';
 export var TagsEditor = function (_a) {
     var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
     var entityUri = useMdmEntityUri();
-    var globalSearchRequestOptions = useMdmGlobalSearchRequestOptions();
     var edited = state === 'edited';
-    var getSuggestions = useCallback(function (searchValue, max, pageNo) { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, getFacetedAttributeData({
-                        fieldName: 'tags',
-                        searchValue: searchValue,
-                        options: __assign(__assign({}, globalSearchRequestOptions), { max: max, pageNo: pageNo })
-                    })];
-                case 1:
-                    response = _a.sent();
-                    return [2 /*return*/, Object.keys(response.tags)];
-            }
-        });
-    }); }, [globalSearchRequestOptions]);
     var handleChange = useCallback(function (tags) {
         onChange({
             value: tags,
@@ -85,7 +22,7 @@ export var TagsEditor = function (_a) {
         onDelete({ uri: entityUri, attributeType: EntityAttrTypes.tags });
     }, [entityUri, onDelete]);
     return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
-        React.createElement(TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values || [], onChange: handleChange, getSuggestions: getSuggestions }),
+        React.createElement(TagsInput, { value: values, onChange: handleChange, className: className }),
         edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
             "(",
             i18n.text('edited'),

package/TagsInput/TagsInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    value: string[];
+    onChange: (value: string[]) => void;
+    className?: string;
+};
+export declare const TagsInput: ({ value, onChange, className }: Props) => React.JSX.Element;
+export {};

package/TagsInput/TagsInput.js

@@ -0,0 +1,71 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useCallback } from 'react';
+import { getFacetedAttributeData } from '@reltio/mdm-sdk';
+import { TypeaheadEditor } from '../TypeaheadEditor';
+import { useMdmGlobalSearchRequestOptions } from '../contexts/MdmModuleContext';
+export var TagsInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, className = _a.className;
+    var globalSearchRequestOptions = useMdmGlobalSearchRequestOptions();
+    var getSuggestions = useCallback(function (searchValue, max, pageNo) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getFacetedAttributeData({
+                        fieldName: 'tags',
+                        searchValue: searchValue,
+                        options: __assign(__assign({}, globalSearchRequestOptions), { max: max, pageNo: pageNo })
+                    })];
+                case 1:
+                    response = _a.sent();
+                    return [2 /*return*/, Object.keys(response.tags)];
+            }
+        });
+    }); }, [globalSearchRequestOptions]);
+    return (React.createElement(TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", value: value || [], onChange: onChange, getSuggestions: getSuggestions, className: className }));
+};

package/cjs/RolesEditor/RolesEditor.js

@@ -32,31 +32,16 @@ var ramda_1 = require("ramda");
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var SimpleDropDownSelector_1 = require("../SimpleDropDownSelector");
-var MultiValueChip_1 = require("../MultiValueChip");
 var SmallIconButton_1 = require("../SmallIconButton");
 var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var RolesInput_1 = require("../RolesInput/RolesInput");
 var RolesEditor_module_css_1 = __importDefault(require("./RolesEditor.module.css"));
-var components = { MultiValue: MultiValueChip_1.MultiValueChip };
 var RolesEditor = function (_a) {
     var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
-    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var entity = (0, MdmModuleContext_1.useMdmEntity)();
     var entityUri = entity.uri;
     var edited = state === 'edited';
-    var options = (0, mdm_sdk_1.getRolesForEntityType)(metadata, entity.type).map(function (role) { return ({
-        value: role.uri,
-        label: role.label
-    }); });
-    var formattedValues = (values || []).map(function (value) {
-        var _a;
-        var label = (_a = options.find((0, ramda_1.propEq)('value', value))) === null || _a === void 0 ? void 0 : _a.label;
-        return {
-            value: value,
-            label: label || (0, mdm_sdk_1.getLastUriPart)(value)
-        };
-    });
     var handleChange = (0, react_1.useCallback)(function (values) {
         var roles = (values === null || values === void 0 ? void 0 : values.map((0, ramda_1.prop)('value'))) || [];
         onChange({
@@ -69,7 +54,7 @@ var RolesEditor = function (_a) {
         onDelete({ uri: entityUri, attributeType: mdm_sdk_1.EntityAttrTypes.roles });
     }, [entityUri, onDelete]);
     return (react_1.default.createElement("div", { className: RolesEditor_module_css_1.default.container, "data-reltio-id": "reltio-attribute-value" },
-        react_1.default.createElement(SimpleDropDownSelector_1.SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: RolesEditor_module_css_1.default, className: RolesEditor_module_css_1.default.roleContainer }),
+        react_1.default.createElement(RolesInput_1.RolesInput, { value: values, onChange: handleChange }),
         edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: RolesEditor_module_css_1.default.editedLabel },
             "(",
             ui_i18n_1.default.text('edited'),

package/cjs/RolesEditor/RolesEditor.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"container":"RolesEditor-container--D0IS8","roleContainer":"RolesEditor-roleContainer--G5mqZ","valueContainer":"RolesEditor-valueContainer--YELLe","deleteButton":"RolesEditor-deleteButton--IKQBV","editedLabel":"RolesEditor-editedLabel--VYoNO"};
+const styles = {"container":"RolesEditor-container--D0IS8","deleteButton":"RolesEditor-deleteButton--IKQBV","editedLabel":"RolesEditor-editedLabel--VYoNO"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.RolesEditor-container--D0IS8{align-items:center;display:flex;flex:1;margin-bottom:10px}.RolesEditor-roleContainer--G5mqZ{width:100%}.RolesEditor-valueContainer--YELLe{margin-left:8px;width:0}.RolesEditor-deleteButton--IKQBV{margin-left:8px}.RolesEditor-editedLabel--VYoNO{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
+    style.innerHTML = `.RolesEditor-container--D0IS8{align-items:center;display:flex;flex:1;margin-bottom:10px}.RolesEditor-deleteButton--IKQBV{margin-left:8px}.RolesEditor-editedLabel--VYoNO{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
     head.appendChild(style);
 }
 module.exports = styles;

package/cjs/RolesInput/RolesInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    value: string[];
+    onChange: (value: string[]) => void;
+    className?: string;
+};
+export declare const RolesInput: ({ value, onChange, className }: Props) => React.JSX.Element;
+export {};

package/cjs/RolesInput/RolesInput.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.RolesInput = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SimpleDropDownSelector_1 = require("../SimpleDropDownSelector");
+var MultiValueChip_1 = require("../MultiValueChip");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var RolesInput_module_css_1 = __importDefault(require("./RolesInput.module.css"));
+var components = { MultiValue: MultiValueChip_1.MultiValueChip };
+var RolesInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, className = _a.className;
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var entity = (0, MdmModuleContext_1.useMdmEntity)();
+    var options = (0, react_1.useMemo)(function () {
+        return (0, mdm_sdk_1.getRolesForEntityType)(metadata, entity.type).map(function (role) { return ({
+            value: role.uri,
+            label: role.label
+        }); });
+    }, [metadata, entity.type]);
+    var formattedValues = (0, react_1.useMemo)(function () {
+        return (value || []).map(function (value) {
+            var _a;
+            var label = (_a = options.find((0, ramda_1.propEq)('value', value))) === null || _a === void 0 ? void 0 : _a.label;
+            return {
+                value: value,
+                label: label || (0, mdm_sdk_1.getLastUriPart)(value)
+            };
+        });
+    }, [value, options]);
+    return (react_1.default.createElement(SimpleDropDownSelector_1.SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: onChange, components: components, classes: RolesInput_module_css_1.default, className: (0, classnames_1.default)(RolesInput_module_css_1.default.roleContainer, className) }));
+};
+exports.RolesInput = RolesInput;

package/cjs/RolesInput/RolesInput.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"roleContainer":"RolesInput-roleContainer--QZfS9","valueContainer":"RolesInput-valueContainer--ItwqV"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RolesInput-roleContainer--QZfS9{width:100%}.RolesInput-valueContainer--ItwqV{margin-left:8px;width:0}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/TagsEditor/TagsEditor.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;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,42 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -79,30 +32,14 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var TypeaheadEditor_1 = require("../TypeaheadEditor");
 var SmallIconButton_1 = require("../SmallIconButton");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var TagsInput_1 = require("../TagsInput/TagsInput");
 var TagsEditor_module_css_1 = __importDefault(require("./TagsEditor.module.css"));
 var TagsEditor = function (_a) {
     var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
     var entityUri = (0, MdmModuleContext_1.useMdmEntityUri)();
-    var globalSearchRequestOptions = (0, MdmModuleContext_1.useMdmGlobalSearchRequestOptions)();
     var edited = state === 'edited';
-    var getSuggestions = (0, react_1.useCallback)(function (searchValue, max, pageNo) { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, (0, mdm_sdk_1.getFacetedAttributeData)({
-                        fieldName: 'tags',
-                        searchValue: searchValue,
-                        options: __assign(__assign({}, globalSearchRequestOptions), { max: max, pageNo: pageNo })
-                    })];
-                case 1:
-                    response = _a.sent();
-                    return [2 /*return*/, Object.keys(response.tags)];
-            }
-        });
-    }); }, [globalSearchRequestOptions]);
     var handleChange = (0, react_1.useCallback)(function (tags) {
         onChange({
             value: tags,
@@ -114,7 +51,7 @@ var TagsEditor = function (_a) {
         onDelete({ uri: entityUri, attributeType: mdm_sdk_1.EntityAttrTypes.tags });
     }, [entityUri, onDelete]);
     return (react_1.default.createElement("div", { className: TagsEditor_module_css_1.default.container, "data-reltio-id": "reltio-attribute-value" },
-        react_1.default.createElement(TypeaheadEditor_1.TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values || [], onChange: handleChange, getSuggestions: getSuggestions }),
+        react_1.default.createElement(TagsInput_1.TagsInput, { value: values, onChange: handleChange, className: className }),
         edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: TagsEditor_module_css_1.default.editedLabel },
             "(",
             ui_i18n_1.default.text('edited'),

package/cjs/TagsInput/TagsInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    value: string[];
+    onChange: (value: string[]) => void;
+    className?: string;
+};
+export declare const TagsInput: ({ value, onChange, className }: Props) => React.JSX.Element;
+export {};

package/cjs/TagsInput/TagsInput.js

@@ -0,0 +1,98 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagsInput = void 0;
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var TypeaheadEditor_1 = require("../TypeaheadEditor");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var TagsInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, className = _a.className;
+    var globalSearchRequestOptions = (0, MdmModuleContext_1.useMdmGlobalSearchRequestOptions)();
+    var getSuggestions = (0, react_1.useCallback)(function (searchValue, max, pageNo) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, mdm_sdk_1.getFacetedAttributeData)({
+                        fieldName: 'tags',
+                        searchValue: searchValue,
+                        options: __assign(__assign({}, globalSearchRequestOptions), { max: max, pageNo: pageNo })
+                    })];
+                case 1:
+                    response = _a.sent();
+                    return [2 /*return*/, Object.keys(response.tags)];
+            }
+        });
+    }); }, [globalSearchRequestOptions]);
+    return (react_1.default.createElement(TypeaheadEditor_1.TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", value: value || [], onChange: onChange, getSuggestions: getSuggestions, className: className }));
+};
+exports.TagsInput = TagsInput;