@reltio/components 1.4.701 → 1.4.702

package/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/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/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/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/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/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/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/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/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/components/AutoSizeList/AutoSizeList.js

@@ -0,0 +1,70 @@
+"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 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;
+    var listRef = react_1.useRef();
+    var _d = react_1.useState({}), rowHeights = _d[0], setRowHeights = _d[1];
+    var getItemSize = function (index) { return rowHeights[index] || defaultItemSize; };
+    var applyRowHeights = react_1.useCallback(mdm_sdk_1.debounce(function () {
+        setRowHeights(__assign({}, rowHeightsCache.current));
+        listRef.current && listRef.current.resetAfterIndex(0);
+    }), []);
+    var rowHeightsCache = react_1.useRef({});
+    var cacheRowHeight = function (index, height) {
+        var _a;
+        rowHeightsCache.current = __assign(__assign({}, rowHeightsCache.current), (_a = {}, _a[index] = height, _a));
+    };
+    react_1.useLayoutEffect(function () {
+        rowHeightsCache.current = {};
+    }, [width, data, defaultItemSize, children]);
+    return (react_1.default.createElement(react_window_1.VariableSizeList, { ref: listRef, width: width, height: height, itemCount: data.length, itemData: data, itemSize: getItemSize }, function (_a) {
+        var data = _a.data, index = _a.index, style = _a.style;
+        return (react_1.default.createElement("div", { style: style },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (_, height) {
+                        if (rowHeightsCache.current[index] !== height) {
+                            cacheRowHeight(index, height);
+                            applyRowHeights();
+                        }
+                    } }),
+                children({ data: data, index: index }))));
+    }));
+};
+exports.default = react_1.memo(AutoSizeList);

package/components/AvatarWithFallback/AvatarWithFallback.js

@@ -0,0 +1,79 @@
+"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 Avatar_1 = __importDefault(require("@material-ui/core/Avatar"));
+var react_1 = __importStar(require("react"));
+var AvatarStates;
+(function (AvatarStates) {
+    AvatarStates[AvatarStates["ICON_MODE"] = 0] = "ICON_MODE";
+    AvatarStates[AvatarStates["TEXT_MODE"] = 1] = "TEXT_MODE";
+    AvatarStates[AvatarStates["ERROR_MODE"] = 2] = "ERROR_MODE";
+})(AvatarStates || (AvatarStates = {}));
+var AvatarWithFallback = function (_a) {
+    var className = _a.className, icon = _a.icon, avatarText = _a.avatarText, otherProps = __rest(_a, ["className", "icon", "avatarText"]);
+    var _b = react_1.useState(null), state = _b[0], setState = _b[1];
+    react_1.useEffect(function () {
+        if (icon) {
+            setState(AvatarStates.ICON_MODE);
+        }
+        else {
+            setState(AvatarStates.TEXT_MODE);
+        }
+    }, [icon, avatarText]);
+    var onImageLoadFail = function () {
+        setState(AvatarStates.ERROR_MODE);
+    };
+    switch (state) {
+        case AvatarStates.ICON_MODE:
+            return react_1.default.createElement(Avatar_1.default, __assign({ className: className, src: icon, onError: onImageLoadFail }, otherProps));
+        case AvatarStates.TEXT_MODE:
+        case AvatarStates.ERROR_MODE:
+            return (react_1.default.createElement(Avatar_1.default, __assign({ className: className }, otherProps), avatarText));
+        default:
+            return null;
+    }
+};
+exports.default = AvatarWithFallback;

package/components/BasicTableView/BasicTable/BasicTable.js

@@ -0,0 +1,106 @@
+"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 });
+exports.BasicTableType = void 0;
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var Table_1 = __importDefault(require("react-components/dist/Table/Table"));
+var defaultGetRowCellHeight_1 = __importDefault(require("./helpers/defaultGetRowCellHeight"));
+var defaultRenderRowCell_1 = __importDefault(require("./helpers/defaultRenderRowCell"));
+var styles_1 = require("../ColumnFilter/styles");
+var prop_types_2 = require("../../../constants/prop-types");
+var dataHelpers_1 = require("./helpers/dataHelpers");
+var TableContext_1 = require("./contexts/TableContext");
+var RowCollapseContext_1 = require("./contexts/RowCollapseContext");
+var ramda_1 = require("ramda");
+var useCollapsibleTableRows_1 = __importDefault(require("./hooks/useCollapsibleTableRows"));
+var BasicTable = react_1.forwardRef(function (_a, ref) {
+    var columnsData = _a.columnsData, rowsData = _a.rowsData, context = _a.context, sorting = _a.sorting, onSort = _a.onSort, _b = _a.renderRowCell, renderRowCell = _b === void 0 ? defaultRenderRowCell_1.default : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight_1.default : _c, filters = _a.filters, onFilter = _a.onFilter, headRowHeight = _a.headRowHeight, _d = _a.maxRowValuesCount, maxRowValuesCount = _d === void 0 ? Infinity : _d, otherProps = __rest(_a, ["columnsData", "rowsData", "context", "sorting", "onSort", "renderRowCell", "getRowCellHeight", "filters", "onFilter", "headRowHeight", "maxRowValuesCount"]);
+    var tableHeadData = react_1.useMemo(function () { return dataHelpers_1.getTableHeadData(columnsData, filters, onFilter); }, [
+        columnsData,
+        filters,
+        onFilter
+    ]);
+    var _e = useCollapsibleTableRows_1.default({
+        rowsData: rowsData,
+        columnsData: columnsData,
+        renderRowCell: renderRowCell,
+        getRowCellHeight: getRowCellHeight,
+        maxRowValuesCount: maxRowValuesCount
+    }), tableRowsData = _e.tableRowsData, collapseContextValue = _e.collapseContextValue;
+    return (react_1.default.createElement(RowCollapseContext_1.RowCollapseContext.Provider, { value: collapseContextValue },
+        react_1.default.createElement(TableContext_1.TableContext.Provider, { value: context },
+            react_1.default.createElement(Table_1.default, __assign({ defaultRowHeight: 48 }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: ramda_1.prop('field', sorting), sortOrder: ramda_1.prop('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + styles_1.COLUMN_FILTER_HEIGHT : headRowHeight, ref: ref })))));
+});
+exports.BasicTableType = {
+    columnsData: prop_types_1.default.arrayOf(prop_types_2.ColumnDataType).isRequired,
+    rowsData: prop_types_1.default.arrayOf(prop_types_1.default.object).isRequired,
+    context: prop_types_1.default.object,
+    sorting: prop_types_2.SortingType,
+    onSort: prop_types_1.default.func,
+    filters: prop_types_1.default.objectOf(prop_types_2.ColumnFilterType),
+    onFilter: prop_types_1.default.func,
+    renderRowCell: prop_types_1.default.func,
+    getRowCellHeight: prop_types_1.default.func,
+    headRowHeight: prop_types_1.default.number,
+    maxRowValuesCount: prop_types_1.default.number,
+    defaultColumnWidth: prop_types_1.default.number,
+    defaultColumnMinWidth: prop_types_1.default.number,
+    classes: prop_types_1.default.shape({
+        highlightRow: prop_types_1.default.string,
+        cellBorder: prop_types_1.default.string,
+        dragColumnBody: prop_types_1.default.string,
+        dragColumnHead: prop_types_1.default.string,
+        draggableHeadCell: prop_types_1.default.string,
+        cellWrapper: prop_types_1.default.string,
+        cellContentWrapper: prop_types_1.default.string,
+        hoveredRowRightContentContainer: prop_types_1.default.string,
+        hoveredRowRightContentWrapper: prop_types_1.default.string
+    })
+};
+BasicTable.propTypes = exports.BasicTableType;
+BasicTable.displayName = 'BasicTable';
+exports.default = BasicTable;