@reltio/components 1.4.1068 → 1.4.1073

package/cjs/components/AttributesFiltersButton/ActionButtons/ActionButtons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    onClear: () => void;
+    onCancel: () => void;
+    onApply: () => void;
+};
+declare const ActionButtons: ({ onClear, onCancel, onApply }: Props) => JSX.Element;
+export default ActionButtons;

package/cjs/components/AttributesFiltersButton/ActionButtons/ActionButtons.js

@@ -0,0 +1,18 @@
+"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var styles_1 = require("./styles");
+var ActionButtons = function (_a) {
+    var onClear = _a.onClear, onCancel = _a.onCancel, onApply = _a.onApply;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", { className: styles.buttonsWrapper },
+        react_1.default.createElement(Button_1.default, { onClick: onClear, variant: "text", color: "default", className: styles.clearButon }, ui_i18n_1.default.text('Clear all')),
+        react_1.default.createElement(Button_1.default, { onClick: onCancel, variant: "text", color: "default", className: styles.cancelButton }, ui_i18n_1.default.text('Cancel')),
+        react_1.default.createElement(Button_1.default, { onClick: onApply, variant: "text", color: "primary", className: styles.applyButton }, ui_i18n_1.default.text('Apply'))));
+};
+exports.default = ActionButtons;

package/cjs/components/AttributesFiltersButton/ActionButtons/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"buttonsWrapper" | "cancelButton" | "applyButton" | "clearButon">;

package/cjs/components/AttributesFiltersButton/ActionButtons/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var allButtonsStyle = {
+    alignSelf: 'center'
+};
+exports.useStyles = styles_1.makeStyles(function () { return ({
+    buttonsWrapper: {
+        display: 'flex'
+    },
+    applyButton: __assign(__assign({}, allButtonsStyle), { marginRight: '16px' }),
+    cancelButton: __assign(__assign({}, allButtonsStyle), { marginLeft: 'auto' }),
+    clearButon: __assign({}, allButtonsStyle)
+}); });

package/cjs/components/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SearchFilter, AttributeType } from '@reltio/mdm-sdk';
+declare type Props = {
+    filters: SearchFilter[];
+    onChange: (filtres: SearchFilter[]) => void;
+    attributeTypes: AttributeType[];
+};
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, attributeTypes, onChange }: Props) => JSX.Element>;
+export default _default;

package/cjs/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var FilterList_1 = __importDefault(require("@material-ui/icons/FilterList"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var AttributesFiltersBuilder_1 = __importDefault(require("../AttributesFiltersBuilder/AttributesFiltersBuilder"));
+var ActionButtons_1 = __importDefault(require("./ActionButtons/ActionButtons"));
+var styles_1 = require("./styles");
+var AttributesFiltersButton = function (_a) {
+    var filtersProp = _a.filters, attributeTypes = _a.attributeTypes, onChange = _a.onChange;
+    var styles = styles_1.useStyles();
+    var buttonRef = react_1.useRef();
+    var _b = react_1.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = react_1.useState([]), filters = _c[0], setFilters = _c[1];
+    var isFiltersApplied = filtersProp.some(function (_a) {
+        var fieldName = _a.fieldName, filter = _a.filter, values = _a.values;
+        return fieldName && filter && values.length;
+    });
+    var buttonColor = isFiltersApplied ? 'primary' : 'inherit';
+    var togglePopup = function () { return setIsOpen(function (open) { return !open; }); };
+    react_1.useEffect(function () {
+        if (isOpen) {
+            setFilters(filtersProp);
+        }
+    }, [filtersProp, isOpen]);
+    var applyButtonHandler = react_1.useCallback(function () {
+        onChange(filters);
+        togglePopup();
+    }, [filters, onChange]);
+    var cancelButtonHandler = react_1.useCallback(function () {
+        togglePopup();
+    }, []);
+    var clearAllButtonHandler = react_1.useCallback(function () {
+        setFilters([]);
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { ref: buttonRef, color: buttonColor, classes: {
+                root: styles.triggerButton,
+                textPrimary: styles.changedFiltersIndicator
+            }, onClick: togglePopup },
+            react_1.default.createElement(FilterList_1.default, { color: buttonColor })),
+        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: styles.popupContent }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left'
+            } },
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('Filter')),
+                react_1.default.createElement("div", { className: styles.filtersBuilderWrapper },
+                    react_1.default.createElement(AttributesFiltersBuilder_1.default, { attributeTypes: attributeTypes, filters: filters, onChange: setFilters })),
+                react_1.default.createElement(Divider_1.default, { className: styles.divider }),
+                react_1.default.createElement(ActionButtons_1.default, { onApply: applyButtonHandler, onCancel: cancelButtonHandler, onClear: clearAllButtonHandler })))));
+};
+exports.default = react_1.memo(AttributesFiltersButton);

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"divider" | "triggerButton" | "filtersBuilderWrapper" | "popupContent" | "changedFiltersIndicator">;

package/cjs/components/AttributesFiltersButton/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    triggerButton: {
+        minWidth: 0,
+        color: 'rgba(0,0,0,0.54)',
+        width: '40px',
+        marginLeft: 'auto',
+        marginRight: '12px'
+    },
+    filtersBuilderWrapper: {
+        marginTop: '20px'
+    },
+    popupContent: {
+        paddingLeft: '16px',
+        paddingTop: '20px',
+        paddingBottom: '6px',
+        width: '770px'
+    },
+    divider: {
+        marginBottom: '14px',
+        marginLeft: '-16px',
+        background: 'rgba(0, 0, 0, 0.121569)'
+    },
+    changedFiltersIndicator: {
+        backgroundColor: styles_1.fade(theme.palette.primary.main, 0.12)
+    }
+}); });

package/cjs/components/BasicAttributeSelector/AttributeTitle/AttributeTitle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AttributeSelectorItem } from '../../../types';
+declare type Value = {
+    fieldName: string;
+    title: string;
+};
+declare type Props = {
+    value: AttributeSelectorItem;
+    disabled: boolean;
+    getLabel: (value: Value) => string;
+    onSelectAttributeClick: (event: any) => void;
+};
+declare const AttributeTitle: ({ value, getLabel, onSelectAttributeClick, disabled }: Props) => JSX.Element;
+export default AttributeTitle;

package/cjs/components/BasicAttributeSelector/AttributeTitle/AttributeTitle.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 });
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var icons_1 = require("@material-ui/icons");
+var ExpandedValueTooltip_1 = __importDefault(require("../../ExpandedValueTooltip/ExpandedValueTooltip"));
+var SmallIconButton_1 = __importDefault(require("../../SmallIconButton/SmallIconButton"));
+var styles_1 = __importDefault(require("./styles"));
+var defaultGetLabel = ramda_1.either(ramda_1.prop('title'), ramda_1.prop('fieldName'));
+var AttributeTitle = function (_a) {
+    var _b, _c, _d;
+    var value = _a.value, _e = _a.getLabel, getLabel = _e === void 0 ? defaultGetLabel : _e, onSelectAttributeClick = _a.onSelectAttributeClick, _f = _a.disabled, disabled = _f === void 0 ? false : _f;
+    var styles = styles_1.default();
+    var label = value && getLabel(value);
+    return (react_1.default.createElement("div", { onClick: disabled ? undefined : onSelectAttributeClick, className: classnames_1.default(styles.attribute, (_b = {},
+            _b[styles.attributeWithValue] = !!label,
+            _b), (_c = {}, _c[styles.disabled] = disabled, _c)) },
+        react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label },
+            react_1.default.createElement("div", { className: classnames_1.default(styles.name, (_d = {}, _d[styles.disabled] = disabled, _d)) }, label || react_1.default.createElement("span", { className: styles.noSelect }, ui_i18n_1.default.text('Select attribute')))),
+        react_1.default.createElement(SmallIconButton_1.default, { size: 'M', icon: icons_1.ArrowDropDown, disabled: disabled })));
+};
+exports.default = AttributeTitle;

package/cjs/components/BasicAttributeSelector/AttributeTitle/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"attribute" | "name" | "disabled" | "attributeWithValue" | "noSelect">;
+export default useStyles;

package/cjs/components/BasicAttributeSelector/AttributeTitle/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = styles_1.makeStyles({
+    attribute: {
+        cursor: 'pointer',
+        lineHeight: '16px',
+        flexBasis: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px 0 16px',
+        width: 'calc(100% - 32px)',
+        '&$attributeWithValue': {
+            borderBottom: '1px solid rgba(0,0,0,0.38)'
+        },
+        '&$disabled': {
+            cursor: 'default'
+        }
+    },
+    disabled: {},
+    attributeWithValue: {},
+    noSelect: {},
+    name: {
+        fontSize: '14px',
+        color: 'rgba(0,0,0,0.87)',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        direction: 'rtl',
+        textAlign: 'left',
+        flex: '1 0',
+        width: '0',
+        '& $noSelect': {
+            color: 'rgba(0,0,0,0.38)'
+        },
+        '&$disabled': {
+            color: 'rgba(0,0,0,0.26)',
+            '& $noSelect': {
+                color: 'rgba(0,0,0,0.26)'
+            }
+        }
+    }
+});
+exports.default = useStyles;

package/cjs/components/BasicAttributeSelector/BasicAttributeSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BasicAttributeSelectorProps } from '../../types';
+declare const _default: React.MemoExoticComponent<({ className, itemsGroups, value, getLabel, onSelect, onRestoreFocus, onOpenPopup, disableRestoreFocus, disableEnforceFocus, single, ungroup, disabled, hideCheckBox }: BasicAttributeSelectorProps) => JSX.Element>;
+export default _default;

package/cjs/components/BasicAttributeSelector/BasicAttributeSelector.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var SelectionPopup_1 = __importDefault(require("../SelectionPopup/SelectionPopup"));
+var helpers_1 = require("../SelectionPopup/helpers");
+var AttributeTitle_1 = __importDefault(require("./AttributeTitle/AttributeTitle"));
+var helpers_2 = require("./helpers");
+var SelectAttributesList_1 = __importDefault(require("../SelectAttributesList/SelectAttributesList"));
+var helpers_3 = require("../VirtualGroupedList/helpers");
+var styles_1 = __importDefault(require("./styles"));
+var ATTRIBUTES_LIST_HEIGHT = 400;
+var ATTRIBUTES_LIST_WIDTH = 308;
+var ATTRIBUTES_POPUP_HEIGHT = 507;
+var BasicAttributeSelector = function (_a) {
+    var className = _a.className, itemsGroups = _a.itemsGroups, value = _a.value, getLabel = _a.getLabel, onSelect = _a.onSelect, _b = _a.onRestoreFocus, onRestoreFocus = _b === void 0 ? ramda_1.identity : _b, _c = _a.onOpenPopup, onOpenPopup = _c === void 0 ? ramda_1.identity : _c, _d = _a.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? false : _d, _e = _a.disableEnforceFocus, disableEnforceFocus = _e === void 0 ? false : _e, _f = _a.single, single = _f === void 0 ? false : _f, _g = _a.ungroup, ungroup = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j;
+    var styles = styles_1.default();
+    var _k = react_1.useState(null), selectAnchor = _k[0], setSelectAnchor = _k[1];
+    var openPopup = function (event) {
+        onOpenPopup();
+        setSelectAnchor(event.currentTarget);
+    };
+    var closePopup = react_1.useCallback(function () { return setSelectAnchor(null); }, []);
+    var isPopupOpen = !!selectAnchor;
+    var _l = react_1.useState(''), filterText = _l[0], setFilterText = _l[1];
+    var clearFilterText = react_1.useCallback(function () { return setFilterText(''); }, []);
+    var _m = react_1.useState([]), selectedAttributes = _m[0], setSelectedAttributes = _m[1];
+    var clearSelectedAttributes = react_1.useCallback(function () { return setSelectedAttributes([]); }, []);
+    var filteredItemsGroups = react_1.useMemo(function () { return helpers_2.prepareGroupsForSelectAttributeList(filterText, itemsGroups); }, [
+        itemsGroups,
+        filterText
+    ]);
+    var items = react_1.useMemo(function () {
+        return ramda_1.pipe(ramda_1.when(ramda_1.always(ungroup), ramda_1.chain(ramda_1.pipe(ramda_1.prop('items'), ramda_1.flatten, ramda_1.map(ramda_1.pick(['item', 'level']))))), helpers_3.flattenGroupedItemsData)(filteredItemsGroups);
+    }, [ungroup, filteredItemsGroups]);
+    var containerWidth = react_1.useMemo(function () { return Math.max(helpers_2.getContainerWidth(filteredItemsGroups), ATTRIBUTES_LIST_WIDTH); }, [
+        filteredItemsGroups
+    ]);
+    var handleOnClose = ramda_1.pipe(ramda_1.tap(ramda_1.pipe(clearSelectedAttributes, clearFilterText, closePopup)), onRestoreFocus);
+    var searchInputRef = react_1.useRef();
+    var onListItemClick = react_1.useCallback(function (attribute, checked) {
+        onSelect({
+            checked: checked,
+            attribute: attribute,
+            index: checked ? selectedAttributes.length : helpers_2.getAttributeIndex(selectedAttributes, attribute),
+            selectedAttributes: selectedAttributes
+        });
+        if (single) {
+            setSelectedAttributes(checked ? [attribute] : []);
+            handleOnClose({});
+        }
+        else {
+            setSelectedAttributes(helpers_2.filterSelectedAttributes({ selectedAttributes: selectedAttributes, attribute: attribute, checked: checked }));
+            if (searchInputRef.current) {
+                searchInputRef.current.focus();
+            }
+        }
+    }, [selectedAttributes, onSelect, single, handleOnClose, searchInputRef]);
+    var handleSearchOnEnter = react_1.useCallback(helpers_2.getOnEnterHandler({ onListItemClick: onListItemClick, selectedAttributes: selectedAttributes }), [
+        onListItemClick,
+        selectedAttributes
+    ]);
+    var _o = helpers_1.useKeyboardNavigation({
+        items: items,
+        open: isPopupOpen,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedAttributes,
+        onClose: handleOnClose
+    }), focusIndex = _o.focusIndex, handleKeyDown = _o.handleKeyDown;
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.selector, className), "data-reltio-id": "attribute-selector" },
+        react_1.default.createElement(AttributeTitle_1.default, { value: value, getLabel: getLabel, onSelectAttributeClick: openPopup, disabled: disabled }),
+        react_1.default.createElement(SelectionPopup_1.default, { open: isPopupOpen, anchorEl: selectAnchor, onClose: handleOnClose, onSearch: setFilterText, title: ui_i18n_1.default.text('Select attribute'), containerWidth: containerWidth, containerHeight: ATTRIBUTES_POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, searchInputRef: searchInputRef, disableRestoreFocus: disableRestoreFocus, disableEnforceFocus: disableEnforceFocus },
+            react_1.default.createElement(SelectAttributesList_1.default, { items: items, onItemClick: onListItemClick, selectedAttributes: selectedAttributes, width: containerWidth, height: ATTRIBUTES_LIST_HEIGHT, focusIndex: focusIndex, hideCheckBox: hideCheckBox }))));
+};
+exports.default = react_1.memo(BasicAttributeSelector);

package/cjs/components/BasicAttributeSelector/helpers.d.ts

@@ -0,0 +1,22 @@
+import { AttributeSelectorItem, AttributeSelectorItemsGroup } from '../../types';
+export declare const isEqualAttributes: any;
+export declare const checkAttributeIncludes: (attribute: AttributeSelectorItem, selectedAttributes: AttributeSelectorItem[]) => boolean;
+export declare const filterItemsTree: (item: AttributeSelectorItem, filterText: string) => boolean;
+export declare const filterSelectedAttributes: ({ attribute, selectedAttributes, checked }: {
+    attribute: AttributeSelectorItem;
+    selectedAttributes: AttributeSelectorItem[];
+    checked: boolean;
+}) => AttributeSelectorItem[];
+export declare const getAttributeIndex: (selectedAttributes: AttributeSelectorItem[], attribute: AttributeSelectorItem) => number;
+export declare const getContainerWidth: (items: any) => any;
+export declare const getOnEnterHandler: ({ onListItemClick, selectedAttributes }: {
+    selectedAttributes: AttributeSelectorItem[];
+    onListItemClick: (attribute: AttributeSelectorItem, checked: boolean) => void;
+}) => ({ item, groupData }: {
+    item: any;
+    groupData: any;
+}) => void;
+export declare const prepareGroupsForSelectAttributeList: (filterText: string, groups: AttributeSelectorItemsGroup[]) => {
+    item: AttributeSelectorItemsGroup[];
+    items: AttributeSelectorItem[];
+};

package/cjs/components/BasicAttributeSelector/helpers.js

@@ -0,0 +1,80 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareGroupsForSelectAttributeList = exports.getOnEnterHandler = exports.getContainerWidth = exports.getAttributeIndex = exports.filterSelectedAttributes = exports.filterItemsTree = exports.checkAttributeIncludes = exports.isEqualAttributes = void 0;
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+exports.isEqualAttributes = ramda_1.eqBy(ramda_1.pick(['fieldName', 'uri', 'entityTypeUri']));
+var checkAttributeIncludes = function (attribute, selectedAttributes) {
+    return selectedAttributes && !!selectedAttributes.find(exports.isEqualAttributes(attribute));
+};
+exports.checkAttributeIncludes = checkAttributeIncludes;
+var filterItem = function (item, filterText) {
+    return item.title.toLowerCase().includes(filterText.toLowerCase());
+};
+var filterItemsTree = function (item, filterText) {
+    return filterItem(item, filterText) || (item.children || []).some(function (item) { return exports.filterItemsTree(item, filterText); });
+};
+exports.filterItemsTree = filterItemsTree;
+var filterSelectedAttributes = function (_a) {
+    var attribute = _a.attribute, selectedAttributes = _a.selectedAttributes, checked = _a.checked;
+    return checked
+        ? selectedAttributes.concat(attribute)
+        : selectedAttributes.filter(function (selectedAttribute) { return !exports.isEqualAttributes(attribute, selectedAttribute); });
+};
+exports.filterSelectedAttributes = filterSelectedAttributes;
+var getAttributeIndex = function (selectedAttributes, attribute) {
+    return selectedAttributes.findIndex(exports.isEqualAttributes(attribute));
+};
+exports.getAttributeIndex = getAttributeIndex;
+exports.getContainerWidth = mdm_sdk_1.getMaxItemWidth('title');
+var getOnEnterHandler = function (_a) {
+    var onListItemClick = _a.onListItemClick, selectedAttributes = _a.selectedAttributes;
+    return function (_a) {
+        var item = _a.item, groupData = _a.groupData;
+        var checked = exports.checkAttributeIncludes(item, selectedAttributes);
+        onListItemClick(__assign(__assign({}, item), { groupName: groupData.groupName }), !checked);
+    };
+};
+exports.getOnEnterHandler = getOnEnterHandler;
+var getAttributeGroupData = function (item, groupId, groupName, filterText, level, noFilter) {
+    if (level === void 0) { level = 0; }
+    if (noFilter === void 0) { noFilter = false; }
+    var isItemFiltered = filterItem(item, filterText);
+    return [
+        {
+            item: filterText ? __assign(__assign({}, item), { filterText: filterText }) : item,
+            level: level,
+            groupId: groupId,
+            groupName: groupName
+        }
+    ]
+        .concat(item.children
+        ? item.children
+            .filter(function (subItem) { return noFilter || isItemFiltered || exports.filterItemsTree(subItem, filterText); })
+            .flatMap(function (subItem) {
+            return getAttributeGroupData(subItem, groupId, groupName, filterText, level + 1, noFilter || isItemFiltered);
+        })
+        : [])
+        .flat();
+};
+exports.prepareGroupsForSelectAttributeList = ramda_1.curry(function (filterText, groups) {
+    return groups
+        .map(function (group) { return ({
+        item: group,
+        items: group.attributes
+            .filter(function (attribute) { return exports.filterItemsTree(attribute, filterText); })
+            .map(function (item) { return getAttributeGroupData(item, group.id, group.title, filterText); })
+    }); })
+        .filter(function (group) { return group.items.length; });
+});

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

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"selector">;
+export default useStyles;

package/cjs/components/BasicAttributeSelector/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = styles_1.makeStyles({
+    selector: {
+        minWidth: '200px',
+        alignItems: 'stretch',
+        background: 'rgba(0,0,0, 0.0267)',
+        boxSizing: 'border-box',
+        borderRadius: '4px',
+        display: 'flex'
+    }
+});
+exports.default = useStyles;

package/cjs/components/ConnectionEditor/ConnectionEditor.d.ts

@@ -1,11 +1,20 @@
 /// <reference types="react" />
-import { EditingConnection, AttributeItem } from '@reltio/mdm-sdk';
+import { AttributeItem, EditingConnection, Entity, TRelationType } from '@reltio/mdm-sdk';
 declare type Props = {
     connection: EditingConnection;
     showEmptyEditors?: boolean;
     onChangeAttribute: (attribute: AttributeItem) => void;
     onAddAttributes: (attributes: AttributeItem[]) => void;
-    onRemoveAttribute: (attrbutes: AttributeItem) => void;
+    onRemoveAttribute: (attributes: AttributeItem) => void;
+    onChangeRelationType?: (value: {
+        type: string;
+        direction: string;
+    }) => void;
+    onChangeEntity?: (entity: Entity) => void;
+    relatedEntity?: Entity;
+    inRelationTypes?: TRelationType[];
+    outRelationTypes?: TRelationType[];
+    entityErrorMessage?: string;
 };
-export declare const ConnectionEditor: ({ connection, onChangeAttribute, onRemoveAttribute, onAddAttributes, showEmptyEditors }: Props) => JSX.Element;
+export declare const ConnectionEditor: ({ connection, relatedEntity, inRelationTypes, outRelationTypes, showEmptyEditors, entityErrorMessage, onChangeAttribute, onRemoveAttribute, onAddAttributes, onChangeRelationType, onChangeEntity }: Props) => JSX.Element;
 export {};

package/cjs/components/ConnectionEditor/ConnectionEditor.js

@@ -34,21 +34,88 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectionEditor = void 0;
+var styles_1 = require("./styles");
+var hooks_1 = require("../../hooks");
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AttributesList_1 = __importDefault(require("../attributes/editMode/AttributesList"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var ConnectionRelationTypeSelector_1 = __importDefault(require("../ConnectionRelationTypeSelector/ConnectionRelationTypeSelector"));
+var ErrorWrapper_1 = __importDefault(require("../ErrorWrapper/ErrorWrapper"));
+var EntitySelector_1 = __importDefault(require("../attributes/editMode/EntitySelector/EntitySelector"));
 var ConnectionEditor = function (_a) {
-    var connection = _a.connection, onChangeAttribute = _a.onChangeAttribute, onRemoveAttribute = _a.onRemoveAttribute, onAddAttributes = _a.onAddAttributes, showEmptyEditors = _a.showEmptyEditors;
-    var relation = connection.relation;
-    var attributes = relation.attributes, relationUri = relation.uri, _b = relation.type, relationTypeUri = _b === void 0 ? '' : _b;
+    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 = 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 = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
-    var attributeListEntity = react_1.useMemo(function () { return (__assign({ attributes: attributes }, mdm_sdk_1.getActivenessAttributes(relation))); }, [relation, attributes]);
+    var attributeListEntity = react_1.useMemo(function () {
+        return relation && __assign({ attributes: attributes }, mdm_sdk_1.getActivenessAttributes(relation));
+    }, [relation, attributes]);
     var relationAttrTypes = react_1.useMemo(function () { return mdm_sdk_1.getRelationAttributesList(metadata, relationTypeUri); }, [
         relationTypeUri,
         metadata
     ]);
-    return (react_1.default.createElement(AttributesList_1.default, { attrTypes: relationAttrTypes, entity: attributeListEntity, showEmptyEditors: showEmptyEditors, mode: mdm_sdk_1.ModeTypes.EDITING, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onRemoveAttribute }));
+    var availableEntityTypeUris = react_1.useMemo(function () {
+        return isRelationTypeSelected
+            ? mdm_sdk_1.getSuitableEntityTypeUrisForRelationTypes(direction === mdm_sdk_1.Directions.OUT, metadata, [
+                mdm_sdk_1.getRelationType(metadata, relationTypeUri)
+            ])
+            : ramda_1.uniq(mdm_sdk_1.getSuitableEntityTypeUrisForRelationTypes(true, metadata, outRelationTypes).concat(mdm_sdk_1.getSuitableEntityTypeUrisForRelationTypes(false, metadata, inRelationTypes)));
+    }, [isRelationTypeSelected, relationTypeUri, metadata, inRelationTypes, outRelationTypes]);
+    var globalSearchRequestOptions = react_redux_1.useSelector(function (state) {
+        return mdm_module_1.default.selectors.getGlobalSearchRequestOptions(state, ['ovOnly']);
+    });
+    var selectorCompatibleRelation = react_1.useMemo(function () {
+        return relation && {
+            relationType: relation.type,
+            direction: relation.direction
+        };
+    }, [relation]);
+    var selectorCompatibleEntity = react_1.useMemo(function () {
+        return entity && {
+            entityUri: entity.uri,
+            entityType: entity.type,
+            entityLabel: mdm_sdk_1.getLabel(entity.label)
+        };
+    }, [entity]);
+    var availableInRelationTypes = react_1.useMemo(function () {
+        return entity && entity.uri
+            ? inRelationTypes.filter(mdm_sdk_1.isAvailableRelationBetweenEntities(false, entity, relatedEntity, metadata))
+            : inRelationTypes;
+    }, [entity, inRelationTypes, relatedEntity, metadata]);
+    var availableOutRelationTypes = react_1.useMemo(function () {
+        return entity && entity.uri
+            ? outRelationTypes.filter(mdm_sdk_1.isAvailableRelationBetweenEntities(true, entity, relatedEntity, metadata))
+            : outRelationTypes;
+    }, [entity, outRelationTypes, relatedEntity, metadata]);
+    react_1.useEffect(function () {
+        // autoselecting relation type on mount
+        var _a = 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]);
+    hooks_1.useDidUpdateEffect(function () {
+        // autoselecting relation type on entity change
+        var _a = 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 = 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.default, { className: styles.item, relation: selectorCompatibleRelation, metadata: metadata, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: handleChangeRelationType })),
+        onChangeEntity && (react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: entityErrorMessage, className: styles.item },
+            react_1.default.createElement(EntitySelector_1.default, { key: relationTypeUri, className: classnames_1.default((_b = {}, _b[styles.dense] = entityErrorMessage, _b)), entity: selectorCompatibleEntity || {}, entityTypesUris: availableEntityTypeUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mdm_sdk_1.ModeTypes.EDITING, onChange: onChangeEntity, onCreate: undefined, metadata: metadata, attributeTypesSelectionStrategy: undefined }))),
+        relationTypeUri && (react_1.default.createElement(AttributesList_1.default, { attrTypes: relationAttrTypes, entity: attributeListEntity, showEmptyEditors: showEmptyEditors, mode: mdm_sdk_1.ModeTypes.EDITING, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onRemoveAttribute }))));
 };
 exports.ConnectionEditor = ConnectionEditor;

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

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