@reltio/components 1.4.699 → 1.4.703

package/components/CollaborationItem/styles.js

@@ -0,0 +1,21 @@
+"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 () { return ({
+    root: {
+        maxWidth: '100%',
+        padding: '8px 4px 10px 16px'
+    },
+    messages: {},
+    repliedComment: {
+        marginBottom: '2px'
+    },
+    replies: {
+        marginLeft: '40px'
+    },
+    sendMessageArea: {
+        marginLeft: '40px'
+    },
+    comment: {}
+}); });

package/components/CollaborationItem/utils/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processMentions = exports.formatDate = exports.getRelatedEntityUri = exports.getAbbreviationFromUserName = void 0;
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var getAbbreviationFromUserName = function (username) {
+    return username
+        .split('.')
+        .map(function (item) { return item[0].toUpperCase(); })
+        .join('');
+};
+exports.getAbbreviationFromUserName = getAbbreviationFromUserName;
+var getRelatedEntityUri = function (comment, entityUri) {
+    var index = comment.relatedObjectUris.indexOf(entityUri);
+    if (index >= 0)
+        return comment.relatedObjectUris[1 - index];
+};
+exports.getRelatedEntityUri = getRelatedEntityUri;
+var formatDate = function (time) { return ui_i18n_1.default.date(time, 'LT') + " " + ui_i18n_1.default.date(time, 'LL'); };
+exports.formatDate = formatDate;
+var processMentions = function (text, mentions, processor, trigger) {
+    if (processor === void 0) { processor = function (value) { return value; }; }
+    if (trigger === void 0) { trigger = '+'; }
+    var arr = [];
+    var currentStr = '';
+    var process = false;
+    for (var i = 0; i <= text.length; i++) {
+        var currentCharacter = text[i];
+        var nextCharacter = text[i + 1];
+        var isLastCharacter = i === text.length - 1;
+        currentStr += currentCharacter;
+        if (currentCharacter === trigger && i === 0) {
+            process = true;
+        }
+        if (process && mentions.includes(currentStr.slice(trigger.length))) {
+            process = false;
+            arr.push(processor(currentStr));
+            currentStr = '';
+        }
+        if (nextCharacter === trigger) {
+            process = true;
+            arr.push(currentStr);
+            currentStr = '';
+        }
+        if (isLastCharacter) {
+            arr.push(currentStr);
+        }
+    }
+    return arr;
+};
+exports.processMentions = processMentions;

package/components/CollaborationPopup/CollaborationPopup.js

@@ -0,0 +1,68 @@
+"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.CollaborationPopup = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Done_1 = __importDefault(require("@material-ui/icons/Done"));
+var contexts_1 = require("../../contexts");
+var CollaborationItem_1 = require("../CollaborationItem/CollaborationItem");
+var SmallIconButton_1 = require("../SmallIconButton");
+var PopupWithArrow_1 = require("../PopupWithArrow/PopupWithArrow");
+var styles_1 = require("./styles");
+var CollaborationPopup = function (_a) {
+    var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, anchorEl = _a.anchorEl, onClose = _a.onClose, open = _a.open, comment = _a.comment;
+    var _b = react_1.useState(0), scrollWidth = _b[0], setScrollWidth = _b[1];
+    var hasScroll = scrollWidth !== 0;
+    var styles = styles_1.useStyles({ scrollWidth: scrollWidth, hasScroll: hasScroll });
+    var popperRef = react_1.useRef(null);
+    var _c = react_1.useContext(contexts_1.CollaborationContext), resolveThread = _c.resolveThread, loading = _c.loading, sending = _c.sending;
+    var itemsCount = 1 + (comment === null || comment === void 0 ? void 0 : comment.replies.length);
+    var handleResolve = function () {
+        resolveThread({ commentId: comment.commentId, uri: uri });
+    };
+    return (react_1.default.createElement(PopupWithArrow_1.PopupWithArrow, { popperRef: popperRef, anchorEl: anchorEl, open: open, placement: "right-start", onClose: onClose, className: styles.popper },
+        react_1.default.createElement(Box_1.default, { className: styles.header },
+            react_1.default.createElement(Box_1.default, { className: styles.headerInfo },
+                react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Comments')),
+                comment && !loading && (react_1.default.createElement(Typography_1.default, { className: styles.counter },
+                    ui_i18n_1.default.number(itemsCount),
+                    " ",
+                    itemsCount === 1 ? ui_i18n_1.default.text('item') : ui_i18n_1.default.text('items')))),
+            comment && !loading && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { className: styles.resolveButton, size: "S", onClick: handleResolve, disabled: sending, showForDisabled: true, tooltipTitle: ui_i18n_1.default.text('Resolve'), icon: Done_1.default, color: "primary" }))),
+        !loading && (react_1.default.createElement(CollaborationItem_1.CollaborationItem, { popperRef: popperRef, messagesRef: function (node) {
+                if (node) {
+                    setScrollWidth(node.offsetWidth - node.clientWidth);
+                }
+            }, classes: {
+                root: styles.collaborationItem,
+                replies: styles.replies,
+                sendMessageArea: styles.sendMessageArea,
+                messages: styles.messages,
+                comment: styles.comment
+            }, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment }))));
+};
+exports.CollaborationPopup = CollaborationPopup;

package/components/CollaborationPopup/styles.js

@@ -0,0 +1,69 @@
+"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 ({
+    root: {},
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '48px',
+        paddingLeft: '16px',
+        paddingRight: '8px'
+    },
+    headerInfo: {
+        marginRight: 'auto',
+        display: 'flex',
+        alignItems: 'center'
+    },
+    title: {
+        marginRight: '15px',
+        color: theme.palette.text.primary,
+        fontSize: '16px'
+    },
+    counter: {
+        paddingLeft: '15px',
+        borderLeft: '1px solid rgba(0,0,0,0.12)',
+        color: theme.palette.text.secondary,
+        fontSize: '14px',
+        lineHeight: '24px'
+    },
+    resolveButton: {
+        zIndex: 3000,
+        '&:hover': {
+            backgroundColor: 'transparent'
+        }
+    },
+    popper: {
+        width: '424px',
+        borderRadius: '0 0 4px 4px'
+    },
+    collaborationItem: {
+        padding: '0 0 10px 0'
+    },
+    comment: function (_a) {
+        var hasScroll = _a.hasScroll;
+        return ({
+            marginLeft: '16px',
+            marginRight: hasScroll ? '2px' : '8px'
+        });
+    },
+    replies: function (_a) {
+        var hasScroll = _a.hasScroll;
+        return ({
+            marginLeft: '8px',
+            marginRight: hasScroll ? '2px' : '8px'
+        });
+    },
+    sendMessageArea: function (_a) {
+        var hasScroll = _a.hasScroll, scrollWidth = _a.scrollWidth;
+        return ({
+            marginLeft: '8px',
+            marginRight: hasScroll ? scrollWidth + 2 : '8px'
+        });
+    },
+    messages: {
+        maxHeight: '400px',
+        overflowY: 'auto'
+    }
+}); });

package/components/CollapseButton/CollapseButton.js

@@ -0,0 +1,47 @@
+"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 = require("../SmallIconButton");
+var ExpandMore_1 = __importDefault(require("@material-ui/icons/ExpandMore"));
+var styles_1 = require("./styles");
+var CollapseButton = function (_a) {
+    var _b;
+    var _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, tooltipTitle = _a.tooltipTitle, otherProps = __rest(_a, ["isOpen", "tooltipTitle"]);
+    var styles = styles_1.useStyles();
+    var buttonProps = {
+        icon: ExpandMore_1.default,
+        className: styles.collapseButton,
+        iconClassName: classnames_1.default((_b = {}, _b[styles.expandLess] = isOpen, _b))
+    };
+    var tooltipProps = {
+        tooltipTitle: tooltipTitle
+    };
+    return react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, tooltipProps, otherProps));
+};
+exports.default = CollapseButton;

package/components/CollapseButton/styles.js

@@ -0,0 +1,12 @@
+"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({
+    collapseButton: {
+        cursor: 'pointer'
+    },
+    expandLess: {
+        transform: 'rotate( -180deg )'
+    }
+});

package/components/ColorBar/ColorBar.js

@@ -0,0 +1,38 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var widthIsNumber = function (width) { return ramda_1.is(Number, width); };
+var ColorBar = function (_a) {
+    var className = _a.className, _b = _a.width, width = _b === void 0 ? 0 : _b, maxWidth = _a.maxWidth;
+    var styles = styles_1.useStyles();
+    var getBarColorWidth = react_1.useCallback(function (width) {
+        return (maxWidth ? (100 * width) / maxWidth : 0) + '%';
+    }, [maxWidth]);
+    return width ? (react_1.default.createElement("div", { className: classnames_1.default(styles.bar, className), style: { width: widthIsNumber(width) ? getBarColorWidth(width) : width } })) : null;
+};
+exports.default = ColorBar;

package/components/ColorBar/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(function (theme) { return ({
+    bar: {
+        backgroundColor: theme.palette.secondary.main,
+        opacity: 0.12,
+        position: 'absolute',
+        minHeight: '20px',
+        minWidth: '5px',
+        borderRadius: '2px',
+        top: 0,
+        left: 0,
+        height: '100%'
+    }
+}); });

package/components/CommentsContainer/CommentsContainer.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 });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var hooks_1 = require("../../hooks");
+var contexts_1 = require("../../contexts");
+var CommentButton_1 = __importDefault(require("./buttons/CommentButton"));
+var AddCommentButton_1 = __importDefault(require("./buttons/AddCommentButton"));
+var CollaborationPopup_1 = require("../CollaborationPopup/CollaborationPopup");
+var CommentsContainer = function (_a) {
+    var _b;
+    var className = _a.className, uri = _a.uri, objectType = _a.objectType, relatedObjectUris = _a.relatedObjectUris, onChangePopupVisibility = _a.onChangePopupVisibility, _c = _a.allowOnlyOneComment, allowOnlyOneComment = _c === void 0 ? false : _c, _d = _a.showAlways, showAlways = _d === void 0 ? false : _d;
+    var styles = styles_1.useStyles();
+    var _e = react_1.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var _f = react_1.useContext(contexts_1.CollaborationContext), currentComment = _f.currentComment, commentsMap = _f.commentsMap, getComment = _f.getComment, clearCurrentComment = _f.clearCurrentComment;
+    var openComments = ((commentsMap === null || commentsMap === void 0 ? void 0 : commentsMap[uri]) || []).filter(function (_a) {
+        var status = _a.status;
+        return status !== 'resolved';
+    }).reverse();
+    var shouldShowAddCommentButton = !allowOnlyOneComment || (allowOnlyOneComment && openComments.length === 0);
+    var isOpenPopupWithNewComment = currentComment === null && Boolean(anchorEl);
+    var handleClickCommentButton = function (event, commentId) {
+        getComment(commentId);
+    };
+    var handleClickAddCommentButton = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+        clearCurrentComment();
+    };
+    hooks_1.useDidUpdateEffect(function () {
+        if (onChangePopupVisibility) {
+            onChangePopupVisibility(Boolean(anchorEl));
+        }
+    }, [anchorEl]);
+    return (commentsMap && (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        shouldShowAddCommentButton && (react_1.default.createElement(AddCommentButton_1.default, { className: classnames_1.default(styles.addButton, (_b = {},
+                _b[styles.showAlways] = showAlways || isOpenPopupWithNewComment,
+                _b)), onClick: handleClickAddCommentButton })),
+        openComments.map(function (_a) {
+            var replies = _a.replies, commentId = _a.commentId;
+            return (react_1.default.createElement(CommentButton_1.default, { ref: commentId === (currentComment === null || currentComment === void 0 ? void 0 : currentComment.commentId) ? setAnchorEl : null, key: commentId, onClick: function (e) { return handleClickCommentButton(e, commentId); } }, 1 + replies));
+        }),
+        react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: currentComment }))));
+};
+exports.default = CommentsContainer;

package/components/CommentsContainer/buttons/AddCommentButton.js

@@ -0,0 +1,19 @@
+"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 Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var AddComment_1 = __importDefault(require("../../../icons/AddComment"));
+var styles_1 = require("./styles");
+var AddCommentButton = function (_a) {
+    var className = _a.className, onClick = _a.onClick;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Add comment') },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.root, className), onClick: onClick },
+            react_1.default.createElement(AddComment_1.default, { className: styles.icon }))));
+};
+exports.default = AddCommentButton;

package/components/CommentsContainer/buttons/CommentButton.js

@@ -0,0 +1,20 @@
+"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 Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var CommentBubble_1 = __importDefault(require("../../../icons/CommentBubble"));
+var styles_1 = require("./styles");
+var CommentButton = react_1.default.forwardRef(function (_a, ref) {
+    var children = _a.children, onClick = _a.onClick;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Show comment') },
+        react_1.default.createElement("div", { ref: ref, className: styles.root, onClick: onClick },
+            react_1.default.createElement(CommentBubble_1.default, { className: styles.icon }),
+            react_1.default.createElement("div", { className: styles.childrenWrapper }, children))));
+});
+CommentButton.displayName = 'CommentButton';
+exports.default = CommentButton;

package/components/CommentsContainer/buttons/styles.js

@@ -0,0 +1,36 @@
+"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 () { return ({
+    root: {
+        position: 'relative',
+        height: '18px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: '4px',
+        cursor: 'pointer'
+    },
+    icon: {
+        '&:hover': {
+            fillOpacity: 0.7
+        }
+    },
+    childrenWrapper: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        lineHeight: '15px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        top: '-2px',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        color: 'white',
+        fontSize: '10px',
+        pointerEvents: 'none'
+    }
+}); });

package/components/CommentsContainer/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var classnames_1 = require("../../constants/classnames");
+exports.useStyles = styles_1.makeStyles(function () {
+    var _a;
+    return ({
+        root: {
+            display: 'flex',
+            alignItems: 'start'
+        },
+        addButton: (_a = {
+                visibility: 'hidden',
+                '&$showAlways': {
+                    visibility: 'visible'
+                }
+            },
+            _a["." + classnames_1.COMMENTS_CONTAINER_VISIBILITY_AREA + ":hover &"] = {
+                visibility: 'visible'
+            },
+            _a),
+        showAlways: {}
+    });
+});

package/components/ConfigureColumnsPopup/ConfigureColumnsPopup.js

@@ -0,0 +1,132 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigureColumnsPopup = void 0;
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = __importDefault(require("./styles"));
+var SelectionPopup_1 = __importDefault(require("../SelectionPopup/SelectionPopup"));
+var AttributeListItem_1 = __importDefault(require("../AttributeListItem/AttributeListItem"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ramda_1 = require("ramda");
+var helpers_1 = require("../VirtualGroupedList/helpers");
+var VirtualGroupedList_1 = __importDefault(require("../VirtualGroupedList/VirtualGroupedList"));
+var helpers_2 = require("../SelectionPopup/helpers");
+var Highlighter_1 = __importDefault(require("../Highlighter/Highlighter"));
+var ITEM_HEIGHT = 32;
+var LIST_CONTAINER_HEIGHT = 300;
+var DEFAULT_MIN_CONTAINER_WIDTH = 308;
+var ConfigureColumnsPopup = function (_a) {
+    var open = _a.open, anchorEl = _a.anchorEl, data = _a.data, onSearch = _a.onSearch, onClose = _a.onClose, titleText = _a.titleText, filterText = _a.filterText, onListItemClick = _a.onListItemClick, selected = _a.selected, hideCheckBox = _a.hideCheckBox, otherProps = __rest(_a, ["open", "anchorEl", "data", "onSearch", "onClose", "titleText", "filterText", "onListItemClick", "selected", "hideCheckBox"]);
+    var filterItem = react_1.useCallback(function (item) {
+        return item.label.toLowerCase().includes(filterText.toLowerCase());
+    }, [filterText]);
+    var filterItemsTree = react_1.useCallback(function (item) { return filterItem(item) || (item.children || []).some(filterItemsTree); }, [
+        filterItem
+    ]);
+    var getItemSize = function () { return ITEM_HEIGHT; };
+    var getAttributeGroupData = react_1.useCallback(ramda_1.curry(function (level, item) { return __spreadArray([
+        {
+            item: __assign(__assign({}, item), { filterText: filterText }),
+            level: level
+        }
+    ], getAttributesData(item.children || [], level + 1)); }), [getAttributesData, filterText]);
+    var getAttributesData = react_1.useCallback(function (data, level) {
+        if (level === void 0) { level = 0; }
+        return ramda_1.pipe(ramda_1.filter(filterItemsTree), ramda_1.chain(getAttributeGroupData(level)))(data);
+    }, [filterItemsTree, getAttributeGroupData]);
+    var handleSearchOnEnter = react_1.useCallback(function (_a) {
+        var item = _a.item;
+        onListItemClick(item, !selected.find(function (column) { return column.id === item.id || column.id.includes(item.id + "."); }));
+    }, [onListItemClick, selected]);
+    var groupedItems = react_1.useMemo(function () { return getAttributesData(data); }, [data, getAttributesData]);
+    var items = react_1.useMemo(function () { return helpers_1.flattenGroupedItemsData(groupedItems); }, [groupedItems]);
+    var _b = helpers_2.useKeyboardNavigation({
+        items: items,
+        open: open,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selected
+    }), focusIndex = _b.focusIndex, handleKeyDown = _b.handleKeyDown;
+    var focusIndexRef = react_1.useRef(null);
+    focusIndexRef.current = focusIndex;
+    var renderListItem = react_1.useCallback(function (style, _a, index) {
+        var item = _a.item, _b = _a.level, level = _b === void 0 ? 0 : _b;
+        var checked = !!selected.find(function (column) { return column.id === item.id || column.id.includes(item.id + "."); });
+        var isFocused = focusIndexRef.current === index;
+        return (react_1.default.createElement(AttributeListItem_1.default, { key: item.id, onClick: onListItemClick, checked: checked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.default, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, hideCheckBox: hideCheckBox, isFocused: isFocused, LogoIcon: item.LogoIcon }));
+    }, [hideCheckBox, onListItemClick, selected]);
+    var containerWidth = mdm_sdk_1.getMaxItemWidth('label')(groupedItems) || DEFAULT_MIN_CONTAINER_WIDTH;
+    var classes = styles_1.default();
+    return (react_1.default.createElement(SelectionPopup_1.default, __assign({ open: open, className: classnames_1.default(classes.container, classes.popupContainer), anchorEl: anchorEl, onClose: onClose, onSearch: onSearch, title: titleText, containerWidth: containerWidth, searchInputOnKeyDown: handleKeyDown }, otherProps),
+        react_1.default.createElement(VirtualGroupedList_1.default, { height: LIST_CONTAINER_HEIGHT, renderItem: renderListItem, items: items, hideSubtitles: true, getItemSize: getItemSize, containerWidth: containerWidth, focusIndex: focusIndex })));
+};
+exports.ConfigureColumnsPopup = ConfigureColumnsPopup;
+exports.ConfigureColumnsPopup.propTypes = {
+    open: prop_types_1.default.bool,
+    hideCheckBox: prop_types_1.default.bool,
+    anchorEl: prop_types_1.default.any,
+    selected: prop_types_1.default.array,
+    data: prop_types_1.default.array,
+    filterText: prop_types_1.default.string,
+    titleText: prop_types_1.default.string,
+    onClose: prop_types_1.default.func,
+    onListItemClick: prop_types_1.default.func,
+    onSearch: prop_types_1.default.func
+};
+exports.ConfigureColumnsPopup.defaultProps = {
+    data: [],
+    selected: [],
+    titleText: ui_i18n_1.default.text('Show/hide columns'),
+    filterText: ''
+};
+exports.default = exports.ConfigureColumnsPopup;

package/components/ConfigureColumnsPopup/styles.js

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