@reltio/components 1.4.1819 → 1.4.1821

package/cjs/ConfigureColumnsPopup/ConfigureColumnsPopup.test.js

@@ -0,0 +1,146 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var SelectionPopup_1 = __importDefault(require("../components/SelectionPopup/SelectionPopup"));
+var AttributeListItem_1 = require("../AttributeListItem");
+var Highlighter_1 = require("../Highlighter");
+var ConfigureColumnsPopup_1 = require("./ConfigureColumnsPopup");
+describe('ConfigureColumnsPopup tests', function () {
+    it('should render all components', function () {
+        var data = [
+            {
+                id: '1',
+                label: 'item1'
+            },
+            {
+                id: '2',
+                label: 'item2'
+            }
+        ];
+        var selected = [];
+        var component = (0, enzyme_1.mount)(react_1.default.createElement(ConfigureColumnsPopup_1.ConfigureColumnsPopup, { open: true, data: data, selected: selected, anchorEl: document.body }));
+        var selectionPopup = component.find(SelectionPopup_1.default);
+        expect(selectionPopup.prop('open')).toBe(true);
+        expect(selectionPopup.prop('title')).toBe('Show/hide columns');
+        expect(component.find(AttributeListItem_1.AttributeListItem)).toHaveLength(2);
+    });
+    it('should render nested items with their children', function () {
+        var data = [
+            {
+                id: '1',
+                label: 'item1'
+            },
+            {
+                id: '2',
+                label: 'not subitem2'
+            },
+            {
+                id: '3',
+                label: 'Nested item',
+                children: [
+                    {
+                        id: '3.1',
+                        label: 'subitem3'
+                    },
+                    {
+                        id: '3.2',
+                        label: 'subitem4'
+                    }
+                ]
+            }
+        ];
+        var selected = [];
+        var component = (0, enzyme_1.mount)(react_1.default.createElement(ConfigureColumnsPopup_1.ConfigureColumnsPopup, { open: true, data: data, selected: selected, anchorEl: document.body }));
+        var items = component.find(AttributeListItem_1.AttributeListItem);
+        expect(items).toHaveLength(5);
+        expect(items.at(0).prop('level')).toBe(0);
+        expect(items.at(1).prop('level')).toBe(0);
+        expect(items.at(2).prop('level')).toBe(0);
+        expect(items.at(3).prop('level')).toBe(1);
+        expect(items.at(4).prop('level')).toBe(1);
+    });
+    it('should show parent items for filtered subitems', function () {
+        var data = [
+            {
+                id: '1',
+                label: 'item1'
+            },
+            {
+                id: '2',
+                label: 'not subitem2'
+            },
+            {
+                id: '3',
+                label: 'Nested item',
+                children: [
+                    {
+                        id: '3.1',
+                        label: 'subitem3'
+                    },
+                    {
+                        id: '3.2',
+                        label: 'subitem4'
+                    }
+                ]
+            }
+        ];
+        var selected = [];
+        var filterText = 'subitem';
+        var component = (0, enzyme_1.mount)(react_1.default.createElement(ConfigureColumnsPopup_1.ConfigureColumnsPopup, { open: true, data: data, selected: selected, filterText: filterText, anchorEl: document.body }));
+        var items = component.find(AttributeListItem_1.AttributeListItem);
+        expect(items).toHaveLength(4);
+        var getLabel = function (index) { return new enzyme_1.ReactWrapper(items.at(index).prop('label')); };
+        expect(items.at(0).prop('labelInText')).toBe('not subitem2');
+        expect(getLabel(0).find(Highlighter_1.Highlighter).prop('text')).toBe('not subitem2');
+        expect(getLabel(0).find(Highlighter_1.Highlighter).prop('highlight')).toBe(filterText);
+        expect(items.at(1).prop('labelInText')).toBe('Nested item');
+        expect(getLabel(1).find(Highlighter_1.Highlighter).prop('text')).toBe('Nested item');
+        expect(getLabel(1).find(Highlighter_1.Highlighter).prop('highlight')).toBe(filterText);
+        expect(items.at(2).prop('labelInText')).toBe('subitem3');
+        expect(getLabel(2).find(Highlighter_1.Highlighter).prop('text')).toBe('subitem3');
+        expect(getLabel(2).find(Highlighter_1.Highlighter).prop('highlight')).toBe(filterText);
+        expect(items.at(3).prop('labelInText')).toBe('subitem4');
+        expect(getLabel(3).find(Highlighter_1.Highlighter).prop('text')).toBe('subitem4');
+        expect(getLabel(3).find(Highlighter_1.Highlighter).prop('highlight')).toBe(filterText);
+    });
+    it('should show parent items as checked for checked subitems', function () {
+        var data = [
+            {
+                id: '1',
+                label: 'item1'
+            },
+            {
+                id: '2',
+                label: 'not subitem2'
+            },
+            {
+                id: '3',
+                label: 'Nested item',
+                children: [
+                    {
+                        id: '3.1',
+                        label: 'subitem3'
+                    },
+                    {
+                        id: '3.2',
+                        label: 'subitem4'
+                    }
+                ]
+            }
+        ];
+        var selected = [
+            {
+                id: '3.1'
+            }
+        ];
+        var component = (0, enzyme_1.mount)(react_1.default.createElement(ConfigureColumnsPopup_1.ConfigureColumnsPopup, { open: true, data: data, selected: selected, anchorEl: document.body }));
+        var checkedItems = component.find(AttributeListItem_1.AttributeListItem).filterWhere(function (item) { return item.prop('checked'); });
+        expect(checkedItems).toHaveLength(2);
+        expect(checkedItems.at(0).prop('labelInText')).toBe('Nested item');
+        expect(checkedItems.at(1).prop('labelInText')).toBe('subitem3');
+    });
+});

package/cjs/ConfigureColumnsPopup/index.d.ts

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

package/cjs/ConfigureColumnsPopup/index.js

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

package/cjs/ConfigureColumnsPopup/styles.d.ts

@@ -0,0 +1 @@
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "popupContainer">;

package/cjs/ConfigureColumnsPopup/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    popupContainer: {},
+    container: {
+        '&$popupContainer': {
+            height: '408px',
+            minWidth: '200px'
+        }
+    }
+});

package/cjs/ConfirmDeleteDialog/ConfirmDeleteDialog.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+};
+export declare const ConfirmDeleteDialog: ({ open, onClose, onConfirm }: Props) => JSX.Element;
+export {};

package/cjs/ConfirmDeleteDialog/ConfirmDeleteDialog.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDeleteDialog = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
+var ConfirmDeleteDialog = function (_a) {
+    var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm;
+    var handleConfirm = function () {
+        onConfirm();
+        onClose();
+    };
+    return (react_1.default.createElement(Dialog_1.default, { open: open },
+        react_1.default.createElement(DialogContent_1.default, null,
+            react_1.default.createElement(DialogContentText_1.default, null, ui_i18n_1.default.text('Are you sure you want to delete this?'))),
+        react_1.default.createElement(DialogActions_1.default, null,
+            react_1.default.createElement(Button_1.default, { onClick: onClose, color: "primary" }, ui_i18n_1.default.text('No')),
+            react_1.default.createElement(Button_1.default, { onClick: handleConfirm, color: "primary" }, ui_i18n_1.default.text('Yes')))));
+};
+exports.ConfirmDeleteDialog = ConfirmDeleteDialog;

package/cjs/ConfirmDeleteDialog/ConfirmDeleteDialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/ConfirmDeleteDialog/ConfirmDeleteDialog.test.js

@@ -0,0 +1,51 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
+var ConfirmDeleteDialog_1 = require("./ConfirmDeleteDialog");
+describe('ConfirmDeleteDialog tests', function () {
+    var props = {
+        open: true,
+        onClose: jest.fn(),
+        onConfirm: jest.fn()
+    };
+    it('should render correctly', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, __assign({}, props)));
+        expect(wrapper.find(Dialog_1.default).prop('open')).toBe(props.open);
+        var buttons = wrapper.find(DialogActions_1.default).find(Button_1.default);
+        expect(wrapper.find(DialogContent_1.default).find(DialogContentText_1.default).text()).toBe('Are you sure you want to delete this?');
+        expect(buttons.length).toBe(2);
+        expect(buttons.at(0).text()).toBe('No');
+        expect(buttons.at(0).prop('onClick')).toBe(props.onClose);
+        expect(buttons.at(1).text()).toBe('Yes');
+    });
+    it('should call props.onConfirm and props.onClose when click "Yes" button', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, __assign({}, props)));
+        expect(wrapper.find(Dialog_1.default).prop('open')).toBe(props.open);
+        wrapper
+            .find(Button_1.default)
+            .filterWhere(function (button) { return button.text() === 'Yes'; })
+            .simulate('click');
+        expect(props.onClose).toBeCalledTimes(1);
+        expect(props.onConfirm).toBeCalledTimes(1);
+    });
+});

package/cjs/ConfirmDeleteDialog/index.d.ts

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

package/cjs/ConfirmDeleteDialog/index.js

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

package/cjs/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type Props = {
+    open: boolean;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    cancelCaption?: string;
+    discardCaption?: string;
+    saveCaption?: string;
+    disabledSave?: boolean;
+    onCancel?: () => void;
+    onDiscard?: () => void;
+    onSave: () => void;
+};
+export declare const ConfirmationDialog: ({ open, title, content, onCancel, cancelCaption, onDiscard, discardCaption, onSave, saveCaption, disabledSave }: Props) => JSX.Element;
+export {};

package/cjs/ConfirmationDialog/ConfirmationDialog.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmationDialog = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
+var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+var styles_1 = require("./styles");
+var ConfirmationDialog = function (_a) {
+    var open = _a.open, title = _a.title, content = _a.content, onCancel = _a.onCancel, _b = _a.cancelCaption, cancelCaption = _b === void 0 ? ui_i18n_1.default.text('Cancel') : _b, onDiscard = _a.onDiscard, _c = _a.discardCaption, discardCaption = _c === void 0 ? '' : _c, onSave = _a.onSave, _d = _a.saveCaption, saveCaption = _d === void 0 ? ui_i18n_1.default.text('Save') : _d, _e = _a.disabledSave, disabledSave = _e === void 0 ? false : _e;
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(Dialog_1.default, { open: open, onClose: onCancel, classes: { paperScrollPaper: styles.paper } },
+        react_1.default.createElement(DialogTitle_1.default, { classes: { root: styles.title } }, title),
+        react_1.default.createElement(DialogContent_1.default, { classes: { root: styles.content } },
+            react_1.default.createElement(DialogContentText_1.default, { classes: { root: styles.contentText } }, content)),
+        react_1.default.createElement(DialogActions_1.default, { className: styles.actionButtons, disableSpacing: true },
+            onCancel && react_1.default.createElement(Button_1.default, { onClick: onCancel }, cancelCaption),
+            react_1.default.createElement("div", null,
+                onDiscard && (react_1.default.createElement(Button_1.default, { onClick: onDiscard, classes: { root: styles.discardButton } }, discardCaption)),
+                react_1.default.createElement(Button_1.default, { onClick: onSave, color: "primary", disabled: disabledSave, autoFocus: true }, saveCaption)))));
+};
+exports.ConfirmationDialog = ConfirmationDialog;

package/cjs/ConfirmationDialog/ConfirmationDialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/ConfirmationDialog/ConfirmationDialog.test.js

@@ -0,0 +1,81 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+var ConfirmationDialog_1 = require("./ConfirmationDialog");
+describe('ConfirmationDialog tests', function () {
+    var props = {
+        open: true,
+        title: '123',
+        content: 'content',
+        onCancel: jest.fn(),
+        cancelCaption: 'cancel caption',
+        onDiscard: jest.fn(),
+        discardCaption: 'discard caption',
+        onSave: jest.fn(),
+        saveCaption: 'save caption'
+    };
+    it('should render main parts', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, __assign({}, props)));
+        var dialog = component.find(Dialog_1.default);
+        expect(dialog.length).toBe(1);
+        expect(dialog.find(DialogTitle_1.default).length).toBe(1);
+        expect(dialog.find(DialogTitle_1.default).text()).toBe(props.title);
+        expect(dialog.find(DialogContent_1.default).length).toBe(1);
+        expect(dialog.find(DialogContent_1.default).text()).toBe(props.content);
+        var dialogActions = dialog.find(DialogActions_1.default);
+        expect(dialogActions.length).toBe(1);
+    });
+    it('should render action buttons', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, __assign({}, props)));
+        var buttons = component.find(DialogActions_1.default).find(Button_1.default);
+        expect(buttons.length).toBe(3);
+        expect(buttons.at(0).text()).toBe(props.cancelCaption);
+        expect(buttons.at(0).prop('onClick')).toBe(props.onCancel);
+        expect(buttons.at(1).text()).toBe(props.discardCaption);
+        expect(buttons.at(1).prop('onClick')).toBe(props.onDiscard);
+        expect(buttons.at(2).text()).toBe(props.saveCaption);
+        expect(buttons.at(2).prop('onClick')).toBe(props.onSave);
+    });
+    it('should disable Save buttons', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, __assign({}, props, { disabledSave: true })));
+        var buttons = component.find(DialogActions_1.default).find(Button_1.default);
+        expect(buttons.length).toBe(3);
+        expect(buttons.at(2).text()).toBe(props.saveCaption);
+        expect(buttons.at(2).prop('onClick')).toBe(props.onSave);
+        expect(buttons.at(2).prop('disabled')).toBe(true);
+    });
+    it('should no show button if action is not set', function () {
+        var newProps = {
+            open: true,
+            title: '123',
+            content: 'content',
+            onSave: jest.fn(),
+            saveCaption: 'save caption'
+        };
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, __assign({}, newProps)));
+        var buttons = component.find(DialogActions_1.default).find(Button_1.default);
+        expect(buttons.length).toBe(1);
+        expect(buttons.text()).toBe(newProps.saveCaption);
+        expect(buttons.prop('onClick')).toBe(newProps.onSave);
+    });
+});

package/cjs/ConfirmationDialog/index.d.ts

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

package/cjs/ConfirmationDialog/index.js

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

package/cjs/ConfirmationDialog/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "paper" | "actionButtons" | "contentText" | "discardButton">;

package/cjs/ConfirmationDialog/styles.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    paper: {
+        minHeight: '180px'
+    },
+    title: {
+        padding: '16px 16px 10px 16px',
+        fontSize: '20px',
+        fontWeight: 500,
+        letterSpacing: '0.25px',
+        lineHeight: '24px'
+    },
+    content: {
+        padding: '0 16px'
+    },
+    contentText: {
+        marginBottom: 0,
+        fontSize: '16px',
+        letterSpacing: '0.15px',
+        lineHeight: '24px'
+    },
+    actionButtons: {
+        display: 'flex',
+        paddingTop: '4px',
+        fontSize: '14px',
+        fontWeight: 500,
+        letterSpacing: 0,
+        lineHeight: '16px',
+        '& > div': {
+            marginLeft: 'auto'
+        }
+    },
+    discardButton: {
+        marginRight: '8px'
+    }
+});

package/cjs/ConnectionEditor/ConnectionEditor.js

@@ -0,0 +1,119 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionEditor = 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 EditModeAttributesList_1 = require("../EditModeAttributesList");
+var ConnectionRelationTypeSelector_1 = require("../ConnectionRelationTypeSelector");
+var ErrorWrapper_1 = require("../ErrorWrapper");
+var EntitySelector_1 = require("../EntitySelector");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var useDidUpdateEffect_1 = require("../hooks/useDidUpdateEffect");
+var styles_1 = require("./styles");
+var ConnectionEditor = function (_a) {
+    var _b;
+    var connection = _a.connection, relatedEntity = _a.relatedEntity, _c = _a.inRelationTypes, inRelationTypes = _c === void 0 ? [] : _c, _d = _a.outRelationTypes, outRelationTypes = _d === void 0 ? [] : _d, showEmptyEditors = _a.showEmptyEditors, entityErrorMessage = _a.entityErrorMessage, onChangeAttribute = _a.onChangeAttribute, onRemoveAttribute = _a.onRemoveAttribute, onAddAttributes = _a.onAddAttributes, onChangeRelationType = _a.onChangeRelationType, onChangeEntity = _a.onChangeEntity;
+    var styles = (0, styles_1.useStyles)();
+    var relation = connection.relation, entity = connection.entity;
+    var _e = relation || {}, attributes = _e.attributes, relationUri = _e.uri, _f = _e.type, relationTypeUri = _f === void 0 ? '' : _f, direction = _e.direction;
+    var isRelationTypeSelected = Boolean(relationTypeUri);
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var globalSearchRequestOptions = (0, MdmModuleContext_1.useMdmGlobalSearchRequestOptions)(['ovOnly']);
+    var attributeListEntity = (0, react_1.useMemo)(function () {
+        return relation && __assign({ attributes: attributes }, (0, mdm_sdk_1.getActivenessAttributes)(relation));
+    }, [relation, attributes]);
+    var relationAttrTypes = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getRelationAttributesList)(metadata, relationTypeUri); }, [relationTypeUri, metadata]);
+    var availableEntityTypeUris = (0, react_1.useMemo)(function () {
+        return isRelationTypeSelected
+            ? (0, mdm_sdk_1.getSuitableEntityTypeUrisForRelationTypes)(direction === mdm_sdk_1.Directions.OUT, metadata, [
+                (0, mdm_sdk_1.getRelationType)(metadata, relationTypeUri)
+            ])
+            : (0, ramda_1.uniq)((0, mdm_sdk_1.getSuitableEntityTypeUrisForRelationTypes)(true, metadata, outRelationTypes).concat((0, mdm_sdk_1.getSuitableEntityTypeUrisForRelationTypes)(false, metadata, inRelationTypes)));
+    }, [isRelationTypeSelected, relationTypeUri, metadata, inRelationTypes, outRelationTypes]);
+    var selectorCompatibleRelation = (0, react_1.useMemo)(function () {
+        return relation && {
+            relationType: relation.type,
+            direction: relation.direction
+        };
+    }, [relation]);
+    var selectorCompatibleEntity = (0, react_1.useMemo)(function () {
+        return entity && {
+            entityUri: entity.uri,
+            entityType: entity.type,
+            entityLabel: (0, mdm_sdk_1.getLabel)(entity.label)
+        };
+    }, [entity]);
+    var availableInRelationTypes = (0, react_1.useMemo)(function () {
+        return entity && entity.uri
+            ? inRelationTypes.filter((0, mdm_sdk_1.isAvailableRelationBetweenEntities)(false, entity, relatedEntity, metadata))
+            : inRelationTypes;
+    }, [entity, inRelationTypes, relatedEntity, metadata]);
+    var availableOutRelationTypes = (0, react_1.useMemo)(function () {
+        return entity && entity.uri
+            ? outRelationTypes.filter((0, mdm_sdk_1.isAvailableRelationBetweenEntities)(true, entity, relatedEntity, metadata))
+            : outRelationTypes;
+    }, [entity, outRelationTypes, relatedEntity, metadata]);
+    (0, react_1.useEffect)(function () {
+        // autoselecting relation type on mount
+        var _a = (0, mdm_sdk_1.getDefaultRelationTypeObject)(inRelationTypes, outRelationTypes) || {}, type = _a.type, direction = _a.direction;
+        if (!relationTypeUri && type && onChangeRelationType) {
+            onChangeRelationType({ type: type.uri, direction: direction });
+        }
+    }, [relationTypeUri, inRelationTypes, outRelationTypes, onChangeRelationType]);
+    (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
+        // autoselecting relation type on entity change
+        var _a = (0, mdm_sdk_1.getDefaultRelationTypeObject)(availableInRelationTypes, availableOutRelationTypes) || {}, type = _a.type, direction = _a.direction;
+        if (!relationTypeUri && type) {
+            onChangeRelationType({ type: type.uri, direction: direction });
+        }
+    }, [relationTypeUri, entity, availableInRelationTypes, availableOutRelationTypes, onChangeEntity]);
+    var handleChangeRelationType = (0, react_1.useCallback)(function (_a) {
+        var type = _a.type, direction = _a.direction;
+        onChangeRelationType({ type: type.uri, direction: direction });
+    }, [onChangeRelationType]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        onChangeRelationType && (react_1.default.createElement(ConnectionRelationTypeSelector_1.ConnectionRelationTypeSelector, { className: styles.item, relation: selectorCompatibleRelation, metadata: metadata, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: handleChangeRelationType })),
+        onChangeEntity && (react_1.default.createElement(ErrorWrapper_1.ErrorWrapper, { errorMessage: entityErrorMessage, className: styles.item },
+            react_1.default.createElement(EntitySelector_1.EntitySelector, { key: relationTypeUri, className: (0, classnames_1.default)((_b = {}, _b[styles.dense] = entityErrorMessage, _b)), entity: selectorCompatibleEntity || {}, entityTypesUris: availableEntityTypeUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mdm_sdk_1.Mode.Editing, onChange: onChangeEntity, onCreate: undefined, metadata: metadata, attributeTypesSelectionStrategy: undefined }))),
+        relationTypeUri && (react_1.default.createElement(EditModeAttributesList_1.EditModeAttributesList, { attrTypes: relationAttrTypes, entity: attributeListEntity, showEmptyEditors: showEmptyEditors, mode: mdm_sdk_1.Mode.Editing, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onRemoveAttribute }))));
+};
+exports.ConnectionEditor = ConnectionEditor;

package/cjs/ConnectionEditor/ConnectionEditor.test.d.ts

@@ -0,0 +1 @@
+export {};