@reltio/components 1.4.880 → 1.4.881

package/cjs/HOCs/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAsyncMount = exports.withTooltip = void 0;
+var withTooltip_1 = require("./withTooltip/withTooltip");
+Object.defineProperty(exports, "withTooltip", { enumerable: true, get: function () { return __importDefault(withTooltip_1).default; } });
+var withAsyncMount_1 = require("./withAsyncMount/withAsyncMount");
+Object.defineProperty(exports, "withAsyncMount", { enumerable: true, get: function () { return __importDefault(withAsyncMount_1).default; } });

package/cjs/HOCs/withAsyncMount/withAsyncMount.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var useAsyncMount_1 = require("../../hooks/useAsyncMount");
+var withAsyncMount = function (Component, PlaceholderComponent) {
+    if (PlaceholderComponent === void 0) { PlaceholderComponent = null; }
+    var WithAsyncMount = react_1.forwardRef(function (componentProps, ref) {
+        var shouldMount = useAsyncMount_1.useAsyncMount();
+        return shouldMount ? (react_1.default.createElement(Component, __assign({}, componentProps, { ref: ref }))) : (PlaceholderComponent && react_1.default.createElement(PlaceholderComponent, __assign({}, componentProps, { ref: ref })));
+    });
+    WithAsyncMount.displayName = 'WithAsyncMount';
+    return WithAsyncMount;
+};
+exports.default = withAsyncMount;

package/cjs/HOCs/withTooltip/propTypes.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+exports.default = {
+    tooltipTitle: prop_types_1.default.node,
+    tooltipPlacement: prop_types_1.default.string,
+    showForDisabled: prop_types_1.default.bool
+};

package/cjs/HOCs/withTooltip/withTooltip.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var styles_1 = require("@material-ui/core/styles");
+var propTypes_1 = __importDefault(require("./propTypes"));
+var useStyles = styles_1.makeStyles(function (theme) { return ({
+    tooltip: theme.tooltip,
+    wrapper: {
+        lineHeight: 0
+    }
+}); });
+var withTooltip = function (Component) {
+    var WithTooltip = react_1.forwardRef(function (_a, ref) {
+        var tooltipTitle = _a.tooltipTitle, tooltipPlacement = _a.tooltipPlacement, _b = _a.showForDisabled, showForDisabled = _b === void 0 ? false : _b, componentProps = __rest(_a, ["tooltipTitle", "tooltipPlacement", "showForDisabled"]);
+        var styles = useStyles();
+        var renderWrappedComponent = function (showForDisabled) {
+            return showForDisabled ? (react_1.default.createElement("span", { className: styles.wrapper },
+                react_1.default.createElement(Component, __assign({}, componentProps)))) : (react_1.default.createElement(Component, __assign({}, componentProps)));
+        };
+        return tooltipTitle ? (react_1.default.createElement(Tooltip_1.default, { ref: ref, title: tooltipTitle, placement: tooltipPlacement || 'bottom', disableFocusListener: true, disableTouchListener: true, classes: { tooltip: styles.tooltip } }, renderWrappedComponent(showForDisabled))) : (react_1.default.createElement(Component, __assign({}, componentProps)));
+    });
+    WithTooltip.displayName = 'WithTooltip';
+    WithTooltip.propTypes = propTypes_1.default;
+    return WithTooltip;
+};
+exports.default = withTooltip;

package/cjs/components/ArrowExpandButton/ArrowExpandButton.js

@@ -0,0 +1,39 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 classnames_1 = __importDefault(require("classnames"));
+var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
+var ArrowRight_1 = __importDefault(require("@material-ui/icons/ArrowRight"));
+var styles_1 = require("./styles");
+var ArrowExpandButton = function (props) {
+    var _a;
+    var styles = styles_1.useStyles();
+    var expanded = props.expanded, className = props.className, otherProps = __rest(props, ["expanded", "className"]);
+    return (react_1.default.createElement(SmallIconButton_1.default, __assign({ icon: ArrowRight_1.default, size: "XXS", disableRipple: true, iconClassName: classnames_1.default(styles.expandIcon, (_a = {}, _a[styles.expanded] = expanded, _a)), className: classnames_1.default(className, styles.expandButton) }, otherProps)));
+};
+exports.default = ArrowExpandButton;

package/cjs/components/ArrowExpandButton/styles.js

@@ -0,0 +1,17 @@
+"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({
+    expandButton: {
+        '&:hover': {
+            backgroundColor: 'transparent'
+        }
+    },
+    expandIcon: {
+        transition: 'transform .15s ease'
+    },
+    expanded: {
+        transform: 'rotate(90deg)'
+    }
+});

package/cjs/components/AttributeListItem/AttrTypeIcon.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 });
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var NestedAttribute_1 = __importDefault(require("../../icons/NestedAttribute"));
+var ReferenceAttribute_1 = __importDefault(require("../../icons/ReferenceAttribute"));
+var SimpleAttribute_1 = __importDefault(require("../../icons/SimpleAttribute"));
+var styles_1 = require("./styles");
+var getIconForAttrType = function (attrType) {
+    switch (attrType.type) {
+        case mdm_sdk_1.DataTypes.TYPE_IMAGE:
+        case mdm_sdk_1.DataTypes.TYPE_NESTED:
+            return NestedAttribute_1.default;
+        case mdm_sdk_1.DataTypes.TYPE_REFERENCE:
+            return ReferenceAttribute_1.default;
+        default:
+            return SimpleAttribute_1.default;
+    }
+};
+var AttrTypeIcon = function (_a) {
+    var _b = _a.attrType, attrType = _b === void 0 ? {} : _b;
+    var styles = styles_1.useStyles();
+    var Icon = getIconForAttrType(attrType);
+    return react_1.default.createElement(Icon, { className: styles.icon });
+};
+exports.default = AttrTypeIcon;

package/cjs/components/AttributeListItem/AttributeListItem.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecommendedIconWithTooltip = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ListItem_1 = __importDefault(require("@material-ui/core/ListItem"));
+var ListItemText_1 = __importDefault(require("@material-ui/core/ListItemText"));
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
+var RequiredMark_1 = __importDefault(require("../RequiredMark/RequiredMark"));
+var core_1 = require("../../core");
+var AttrTypeIcon_1 = __importDefault(require("./AttrTypeIcon"));
+var Marginator_1 = __importDefault(require("../Marginator/Marginator"));
+var Recommended_1 = __importDefault(require("../../icons/Recommended"));
+var styles_1 = require("./styles");
+exports.RecommendedIconWithTooltip = withTooltip_1.default(Recommended_1.default);
+var AttributeListItem = function (_a) {
+    var _b, _c, _d;
+    var groupId = _a.groupId, data = _a.data, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.isFocused, isFocused = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, label = _a.label, labelInText = _a.labelInText, level = _a.level, _h = _a.onClick, onClick = _h === void 0 ? core_1.noop : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j, _k = _a.hideIcon, hideIcon = _k === void 0 ? false : _k, _l = _a.notSelectable, notSelectable = _l === void 0 ? false : _l, _m = _a.disableHorizontalScrollbar, disableHorizontalScrollbar = _m === void 0 ? false : _m, _o = _a.style, style = _o === void 0 ? {} : _o, _p = _a.subItemMargin, subItemMargin = _p === void 0 ? 20 : _p, LogoIcon = _a.LogoIcon, className = _a.className;
+    var styles = styles_1.useStyles();
+    var attrType = (data || {}).attrType;
+    var isButton = (!hideCheckBox || !mdm_sdk_1.isNested(attrType)) && !notSelectable;
+    var handleItemClick = function () { return onClick(data, !checked, groupId); };
+    var showLogoIcon = !!LogoIcon;
+    var renderIcon = function (attrType) {
+        return groupId === 'recommended' ? (react_1.default.createElement(exports.RecommendedIconWithTooltip, { className: styles.recommendedIcon, tooltipTitle: ui_i18n_1.default.text('Recommended'), showForDisabled: true })) : (react_1.default.createElement(AttrTypeIcon_1.default, { attrType: attrType }));
+    };
+    // TODO: ListItem needs to be split to ListItem and ListItemButton after material ui releases stable version(https://github.com/mui-org/material-ui/pull/26446). The "button" prop will be deprecated.
+    return (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: labelInText || label, className: styles.itemTooltip, placement: "bottom-end" },
+        react_1.default.createElement(ListItem_1.default, { className: classnames_1.default(styles.container, styles.listItem, (_b = {}, _b[styles.defaultCursor] = !isButton, _b), className), onClick: isButton ? handleItemClick : undefined, style: style, dense: true, button: isButton, classes: {
+                focusVisible: styles.listItemFocus,
+                selected: styles.listItemFocus
+            }, selected: isFocused, tabIndex: -1 },
+            !hideCheckBox && (react_1.default.createElement(Checkbox_1.default, { checked: checked, disableRipple: true, disabled: !isButton, className: classnames_1.default(styles.checkbox, (_c = {}, _c[styles.checked] = checked, _c)), tabIndex: -1 })),
+            react_1.default.createElement(Marginator_1.default, { margin: subItemMargin, level: level, className: styles.marginWrapper },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    !hideIcon && renderIcon(attrType),
+                    react_1.default.createElement("div", { className: classnames_1.default(styles.itemTextWrapper, (_d = {}, _d[styles.marginText] = hideIcon, _d)) },
+                        showLogoIcon && react_1.default.createElement(LogoIcon, { className: styles.logoIcon }),
+                        react_1.default.createElement(ListItemText_1.default, { primary: react_1.default.createElement(react_1.default.Fragment, null,
+                                label,
+                                isRequired && react_1.default.createElement(RequiredMark_1.default, null)), className: styles.itemText })))),
+            isButton && disableHorizontalScrollbar && react_1.default.createElement("div", { className: styles.itemAfter }))));
+};
+exports.default = react_1.memo(AttributeListItem);

package/cjs/components/AttributeListItem/styles.js

@@ -0,0 +1,97 @@
+"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({
+    container: {
+        '& > $marginWrapper:first-child': {
+            paddingLeft: '4px'
+        }
+    },
+    listItem: {
+        paddingLeft: '1px',
+        paddingTop: '2px',
+        paddingBottom: '2px',
+        transition: 'none',
+        '&:hover': {
+            '& $itemAfter': {
+                background: 'linear-gradient(to right, rgba(235, 235, 235, 0.2), rgba(235, 235, 235, 1) 100%)'
+            }
+        },
+        '&$listItemFocus': {
+            '& $itemAfter': {
+                background: 'linear-gradient(to right, rgba(219, 219, 219, 0.2), rgba(219, 219, 219, 1) 100%)'
+            }
+        },
+        '&:focus': {
+            outline: 'none'
+        }
+    },
+    listItemFocus: {},
+    icon: {
+        opacity: 0.29,
+        width: '16px',
+        height: '16px',
+        flexShrink: 0,
+        marginRight: '6px',
+        marginLeft: '8px'
+    },
+    recommendedIcon: {
+        width: '18px',
+        height: '18px',
+        marginRight: '5px',
+        marginLeft: '7px',
+        flexShrink: 0
+    },
+    logoIcon: {
+        width: '18px',
+        height: '18px',
+        flexShrink: 0,
+        marginRight: '4px'
+    },
+    itemAfter: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: '40px',
+        height: '100%',
+        pointerEvents: 'none',
+        background: 'linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 100%)'
+    },
+    itemText: {
+        padding: '0',
+        margin: 0,
+        '& span': {
+            fontSize: '0.8125rem',
+            letterSpacing: 'normal',
+            whiteSpace: 'nowrap'
+        }
+    },
+    checkbox: {
+        opacity: 0.34,
+        padding: 0,
+        marginLeft: '14px',
+        '&$checked': {
+            opacity: 1,
+            background: 'none'
+        }
+    },
+    checked: {},
+    marginWrapper: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    defaultCursor: {
+        cursor: 'default'
+    },
+    itemTooltip: {
+        margin: '4px 0'
+    },
+    marginText: {
+        marginLeft: '21px'
+    },
+    itemTextWrapper: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+});

package/cjs/components/AttributeSelector/AttributeSelector.js

@@ -0,0 +1,103 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var MultiSelect_1 = __importDefault(require("../ReactSelect/MultiSelect"));
+var MultiValue_1 = __importDefault(require("../ReactSelect/commonComponents/MultiValue"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var AttributeListItem_1 = __importDefault(require("../AttributeListItem/AttributeListItem"));
+var styles_1 = require("./styles");
+var AttributeSelector = function (_a) {
+    var entityType = _a.entityType, selectedAttributes = _a.selectedAttributes, className = _a.className, onChange = _a.onChange, title = _a.title, disableUnderline = _a.disableUnderline, _b = _a.menuPlacement, menuPlacement = _b === void 0 ? 'bottom' : _b;
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var styles = styles_1.useStyles();
+    var prepareItems = react_1.useCallback(function (data, level, prevLabel) {
+        if (level === void 0) { level = 0; }
+        if (prevLabel === void 0) { prevLabel = ''; }
+        return data.reduce(function (acc, item) {
+            if (item.hidden)
+                return acc;
+            var chipLabel = "" + (prevLabel && prevLabel + ' / ') + item.label;
+            acc.push({
+                label: item.label,
+                value: item.uri,
+                attrType: item,
+                chipLabel: chipLabel,
+                level: level
+            });
+            var subAttributes = mdm_sdk_1.getAttributeTypeSubAttributes(metadata, item);
+            return acc.concat(subAttributes ? prepareItems(subAttributes, level + 1, chipLabel) : []);
+        }, []);
+    }, [metadata]);
+    var options = react_1.useMemo(function () { return prepareItems((entityType === null || entityType === void 0 ? void 0 : entityType.attributes) || []); }, [entityType, prepareItems]);
+    var CustomOption = function (_a) {
+        var isFocused = _a.isFocused, isSelected = _a.isSelected, data = _a.data, label = _a.label, innerProps = _a.innerProps;
+        return (react_1.default.createElement("div", __assign({}, innerProps),
+            react_1.default.createElement(AttributeListItem_1.default, { checked: isSelected, level: data.level, data: data, label: label, labelInText: label, isFocused: isFocused })));
+    };
+    var CustomMultiValue = function (_a) {
+        var data = _a.data, props = __rest(_a, ["data"]);
+        return (react_1.default.createElement(MultiValue_1.default, __assign({}, props), data.chipLabel));
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Typography_1.default, { className: styles.title, variant: 'subtitle1' }, title || ui_i18n_1.default.text('Attribute')),
+        react_1.default.createElement(MultiSelect_1.default, { value: selectedAttributes, options: options, TextFieldProps: {
+                InputProps: { disableUnderline: disableUnderline },
+                classes: { root: styles.dropDownInput }
+            }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton_1.default,
+                MultiValue: CustomMultiValue,
+                Option: CustomOption
+            }, onChange: ramda_1.pipe(ramda_1.defaultTo([]), onChange), styles: styles_1.customStyles, classes: styles, menuPlacement: menuPlacement })));
+};
+exports.default = AttributeSelector;

package/cjs/components/AttributeSelector/styles.js

@@ -0,0 +1,41 @@
+"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 = exports.customStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.customStyles = {
+    input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); }
+};
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        flex: 1
+    },
+    title: {
+        paddingBottom: '10px',
+        paddingLeft: '5px',
+        fontSize: '14px'
+    },
+    dropDownInput: {
+        width: '100%',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+        borderTop: '4px'
+    },
+    option: {
+        fontSize: '14px',
+        height: '32px'
+    },
+    noOptionsMessage: {
+        fontSize: '14px'
+    }
+});

package/cjs/components/AutoSizeList/AutoSizeList.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_window_1 = require("react-window");
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_1 = require("./styles");
+var AutoSizeList = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 0 : _c, defaultItemSize = _a.defaultItemSize, data = _a.data, children = _a.children, itemKey = _a.itemKey;
+    var styles = styles_1.useStyles();
+    var rowHeightsCache = react_1.useRef({});
+    var cacheRowHeight = function (key, height) {
+        var _a;
+        rowHeightsCache.current = __assign(__assign({}, rowHeightsCache.current), (_a = {}, _a[key] = height, _a));
+    };
+    var _d = react_1.useState({}), rowHeights = _d[0], setRowHeights = _d[1];
+    var applyRowHeights = react_1.useCallback(mdm_sdk_1.debounce(function () {
+        setRowHeights(__assign({}, rowHeightsCache.current));
+    }), []);
+    var getItemKey = function (index) { return (itemKey ? itemKey(index, data) : index); };
+    var getItemSize = function (index) { return rowHeights[getItemKey(index)] || defaultItemSize; };
+    var listRef = react_1.useRef();
+    listRef.current && listRef.current.resetAfterIndex(0, false);
+    return (react_1.default.createElement(react_window_1.VariableSizeList, { ref: listRef, width: width, height: height, itemCount: data.length, itemData: data, itemSize: getItemSize, itemKey: itemKey }, function (_a) {
+        var data = _a.data, index = _a.index, style = _a.style;
+        var key = getItemKey(index);
+        return (react_1.default.createElement("div", { style: style, className: styles.item },
+            react_1.default.createElement("div", { style: { visibility: key in rowHeights ? 'visible' : 'hidden' } },
+                react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (_, height) {
+                        if (rowHeightsCache.current[key] !== height) {
+                            cacheRowHeight(key, height);
+                            applyRowHeights();
+                        }
+                    } }),
+                children({ data: data, index: index }))));
+    }));
+};
+exports.default = react_1.memo(AutoSizeList);