@reltio/components 1.4.2199 → 1.4.2201

package/ProfileResizablePanes/ProfileResizablePanes.js

@@ -12,7 +12,7 @@ export var ProfileResizablePanes = function (_a) {
     var styles = useStyles();
     var _b = usePerspectivesSettings(perspectiveId), perspectiveSettings = _b.perspectiveSettings, updatePerspectiveSettings = _b.updatePerspectiveSettings;
     var _c = (perspectiveSettings || {}).width, width = _c === void 0 ? DEFAULT_R_PANE_SIZE : _c;
-    var active = defaultTab || (perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active);
+    var active = !isNil(defaultTab) ? defaultTab : perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active;
     var isSidePanelOpen = !isNil(active) && !disabled;
     var handleUpdateSettings = useCallback(function (newSetting) {
         updatePerspectiveSettings(newSetting);

package/ProfileResizablePanes/ProfileResizablePanes.spec.js

@@ -70,7 +70,7 @@ var defaultProps = {
         }
     ],
     disabled: false,
-    defaultTab: 0
+    defaultTab: undefined
 };
 var setUp = function (props) {
     if (props === void 0) { props = defaultProps; }
@@ -129,7 +129,21 @@ describe('ProfileResizablePanes tests', function () {
         expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
         expect(screen.getByRole('separator')).toBeInTheDocument();
     });
-    it('should render resizable panes with open second pane', function () { return __awaiter(void 0, void 0, void 0, function () {
+    it('should render resizable panes with open second pane with defaultTab:0', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container;
+        return __generator(this, function (_a) {
+            container = setUp(__assign(__assign({}, defaultProps), { defaultTab: 0 })).container;
+            expect(screen.getByTestId('content')).toBeInTheDocument();
+            expect(screen.getByTestId('rightPanel')).toBeInTheDocument();
+            expect(getSplitPane1(container)).toBeInTheDocument();
+            expect(getSplitPane2(container)).toBeInTheDocument();
+            expect(isResizingDisabled(container)).toBe(false);
+            checkPanelSize(getSplitPane1(container), '52.0');
+            checkPanelSize(getSplitPane2(container), '48.0');
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render resizable panes with open second pane on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a, container, user, button2;
         return __generator(this, function (_b) {
             switch (_b.label) {

package/RequestedData/RequestedData.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RequestStates } from '../types';
+type Props = {
+    requestState: RequestStates;
+    isResponseEmpty?: boolean;
+    children?: React.ReactNode;
+    DataLoadedComponent?: React.ComponentType;
+    DataLoadingComponent?: React.ComponentType;
+    DataErrorComponent?: React.ComponentType;
+};
+export declare const RequestedData: ({ requestState, isResponseEmpty, children, DataLoadedComponent, DataLoadingComponent, DataErrorComponent }: Props) => React.JSX.Element;
+export {};

package/RequestedData/RequestedData.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import { LinearLoadIndicator } from '../LinearLoadIndicator';
+import { EmptySearchResult } from '../EmptySearchResult';
+import { ErrorBoundary } from '../ErrorBoundary';
+import { EMPTY_STATE_ICONS, EMPTY_STATE_VARIANTS, EmptyState } from '../EmptyState';
+import { RequestStates } from '../types';
+import styles from './RequestedData.module.css';
+export var RequestedData = function (_a) {
+    var requestState = _a.requestState, isResponseEmpty = _a.isResponseEmpty, children = _a.children, DataLoadedComponent = _a.DataLoadedComponent, _b = _a.DataLoadingComponent, DataLoadingComponent = _b === void 0 ? RequestedDataLoading : _b, _c = _a.DataErrorComponent, DataErrorComponent = _c === void 0 ? RequestedDataError : _c;
+    switch (requestState) {
+        case RequestStates.LOADED:
+            return DataLoadedComponent ? (React.createElement(DataLoadedComponent, null)) : (React.createElement(RequestedDataLoaded, { isResponseEmpty: isResponseEmpty }, children));
+        case RequestStates.ERROR:
+            return React.createElement(DataErrorComponent, null);
+        case RequestStates.LOADING:
+        default:
+            return React.createElement(DataLoadingComponent, null);
+    }
+};
+var RequestedDataError = function () { return (React.createElement(EmptyState, { LogoRenderer: EMPTY_STATE_ICONS.ERROR, text: i18n.text('Something went wrong'), variant: EMPTY_STATE_VARIANTS.full })); };
+var RequestedDataLoaded = function (_a) {
+    var isResponseEmpty = _a.isResponseEmpty, children = _a.children;
+    return isResponseEmpty ? (React.createElement(EmptySearchResult, { variant: "noData", className: styles.noData })) : (React.createElement(ErrorBoundary, { error: React.createElement(RequestedDataError, null) }, children));
+};
+var RequestedDataLoading = function () { return React.createElement(LinearLoadIndicator, null); };

package/RequestedData/RequestedData.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"noData":"RequestedData-noData--H4sHo"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RequestedData-noData--H4sHo{padding:16px 24px}`;
+    head.appendChild(style);
+}
+export default styles;

package/RequestedData/index.d.ts

@@ -0,0 +1 @@
+export { RequestedData } from './RequestedData';

package/RequestedData/index.js

@@ -0,0 +1 @@
+export { RequestedData } from './RequestedData';

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/ProfileResizablePanes/ProfileResizablePanes.js

@@ -38,7 +38,7 @@ var ProfileResizablePanes = function (_a) {
     var styles = (0, styles_1.useStyles)();
     var _b = (0, PerspectivesSettingsContext_1.usePerspectivesSettings)(perspectiveId), perspectiveSettings = _b.perspectiveSettings, updatePerspectiveSettings = _b.updatePerspectiveSettings;
     var _c = (perspectiveSettings || {}).width, width = _c === void 0 ? DEFAULT_R_PANE_SIZE : _c;
-    var active = defaultTab || (perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active);
+    var active = !(0, ramda_1.isNil)(defaultTab) ? defaultTab : perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active;
     var isSidePanelOpen = !(0, ramda_1.isNil)(active) && !disabled;
     var handleUpdateSettings = (0, react_1.useCallback)(function (newSetting) {
         updatePerspectiveSettings(newSetting);

package/cjs/ProfileResizablePanes/ProfileResizablePanes.spec.js

@@ -75,7 +75,7 @@ var defaultProps = {
         }
     ],
     disabled: false,
-    defaultTab: 0
+    defaultTab: undefined
 };
 var setUp = function (props) {
     if (props === void 0) { props = defaultProps; }
@@ -134,7 +134,21 @@ describe('ProfileResizablePanes tests', function () {
         expect(react_2.screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
         expect(react_2.screen.getByRole('separator')).toBeInTheDocument();
     });
-    it('should render resizable panes with open second pane', function () { return __awaiter(void 0, void 0, void 0, function () {
+    it('should render resizable panes with open second pane with defaultTab:0', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container;
+        return __generator(this, function (_a) {
+            container = setUp(__assign(__assign({}, defaultProps), { defaultTab: 0 })).container;
+            expect(react_2.screen.getByTestId('content')).toBeInTheDocument();
+            expect(react_2.screen.getByTestId('rightPanel')).toBeInTheDocument();
+            expect(getSplitPane1(container)).toBeInTheDocument();
+            expect(getSplitPane2(container)).toBeInTheDocument();
+            expect(isResizingDisabled(container)).toBe(false);
+            checkPanelSize(getSplitPane1(container), '52.0');
+            checkPanelSize(getSplitPane2(container), '48.0');
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render resizable panes with open second pane on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a, container, user, button2;
         return __generator(this, function (_b) {
             switch (_b.label) {

package/cjs/RequestedData/RequestedData.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RequestStates } from '../types';
+type Props = {
+    requestState: RequestStates;
+    isResponseEmpty?: boolean;
+    children?: React.ReactNode;
+    DataLoadedComponent?: React.ComponentType;
+    DataLoadingComponent?: React.ComponentType;
+    DataErrorComponent?: React.ComponentType;
+};
+export declare const RequestedData: ({ requestState, isResponseEmpty, children, DataLoadedComponent, DataLoadingComponent, DataErrorComponent }: Props) => React.JSX.Element;
+export {};

package/cjs/RequestedData/RequestedData.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequestedData = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var LinearLoadIndicator_1 = require("../LinearLoadIndicator");
+var EmptySearchResult_1 = require("../EmptySearchResult");
+var ErrorBoundary_1 = require("../ErrorBoundary");
+var EmptyState_1 = require("../EmptyState");
+var types_1 = require("../types");
+var RequestedData_module_css_1 = __importDefault(require("./RequestedData.module.css"));
+var RequestedData = function (_a) {
+    var requestState = _a.requestState, isResponseEmpty = _a.isResponseEmpty, children = _a.children, DataLoadedComponent = _a.DataLoadedComponent, _b = _a.DataLoadingComponent, DataLoadingComponent = _b === void 0 ? RequestedDataLoading : _b, _c = _a.DataErrorComponent, DataErrorComponent = _c === void 0 ? RequestedDataError : _c;
+    switch (requestState) {
+        case types_1.RequestStates.LOADED:
+            return DataLoadedComponent ? (react_1.default.createElement(DataLoadedComponent, null)) : (react_1.default.createElement(RequestedDataLoaded, { isResponseEmpty: isResponseEmpty }, children));
+        case types_1.RequestStates.ERROR:
+            return react_1.default.createElement(DataErrorComponent, null);
+        case types_1.RequestStates.LOADING:
+        default:
+            return react_1.default.createElement(DataLoadingComponent, null);
+    }
+};
+exports.RequestedData = RequestedData;
+var RequestedDataError = function () { return (react_1.default.createElement(EmptyState_1.EmptyState, { LogoRenderer: EmptyState_1.EMPTY_STATE_ICONS.ERROR, text: ui_i18n_1.default.text('Something went wrong'), variant: EmptyState_1.EMPTY_STATE_VARIANTS.full })); };
+var RequestedDataLoaded = function (_a) {
+    var isResponseEmpty = _a.isResponseEmpty, children = _a.children;
+    return isResponseEmpty ? (react_1.default.createElement(EmptySearchResult_1.EmptySearchResult, { variant: "noData", className: RequestedData_module_css_1.default.noData })) : (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { error: react_1.default.createElement(RequestedDataError, null) }, children));
+};
+var RequestedDataLoading = function () { return react_1.default.createElement(LinearLoadIndicator_1.LinearLoadIndicator, null); };

package/cjs/RequestedData/RequestedData.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"noData":"RequestedData-noData--H4sHo"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RequestedData-noData--H4sHo{padding:16px 24px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/RequestedData/index.d.ts

@@ -0,0 +1 @@
+export { RequestedData } from './RequestedData';

package/cjs/RequestedData/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequestedData = void 0;
+var RequestedData_1 = require("./RequestedData");
+Object.defineProperty(exports, "RequestedData", { enumerable: true, get: function () { return RequestedData_1.RequestedData; } });

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;