@reltio/components 1.4.1819 → 1.4.1821

package/cjs/CommentsContainer/components/CollaborationPopup/CollaborationPopup.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollaborationPopup = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Done_1 = __importDefault(require("@mui/icons-material/Done"));
+var PopupWithArrow_1 = require("../../../components/PopupWithArrow/PopupWithArrow");
+var CollaborationContext_1 = require("../../../contexts/CollaborationContext");
+var CollaborationItem_1 = require("../../../CollaborationItem");
+var SmallIconButton_1 = require("../../../SmallIconButton");
+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 = (0, react_1.useState)(0), scrollWidth = _b[0], setScrollWidth = _b[1];
+    var hasScroll = scrollWidth !== 0;
+    var styles = (0, styles_1.useStyles)({ scrollWidth: scrollWidth, hasScroll: hasScroll });
+    var popperRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useContext)(CollaborationContext_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/cjs/CommentsContainer/components/CollaborationPopup/CollaborationPopup.test.d.ts

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

package/cjs/CommentsContainer/components/CollaborationPopup/CollaborationPopup.test.js

@@ -0,0 +1,157 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react")), react = react_1;
+var enzyme_1 = require("enzyme");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var PopupWithArrow_1 = require("../../../components/PopupWithArrow/PopupWithArrow");
+var CollaborationItem_1 = require("../../../CollaborationItem");
+var CollaborationPopup_1 = require("./CollaborationPopup");
+jest.mock('react', function () { return (__assign(__assign({}, jest.requireActual('react')), { useContext: jest.fn().mockImplementation(function (f) { return f(); }) })); });
+var createComment = function (hasReplies) {
+    if (hasReplies === void 0) { hasReplies = false; }
+    var comment = {
+        selfLink: 'https://cservice-dev.reltio.com/tst-01/sokol/comments/00001lo',
+        commentId: '00001lo',
+        createdBy: 'vyacheslav.kovyazin',
+        createdTime: 1620280049022,
+        modifiedTime: 1620280061505,
+        deleted: false,
+        visibility: 'public',
+        status: 'resolved',
+        objectId: 'entities/13JKIKAz/attributes/Name/2mlWuqDq5',
+        objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE,
+        permanentLink: 'http://localhost:3000/ui/sokol/#p~com.reltio.plugins.entity.perspective.HCA_e~entities%2F13JKIKAz_ps~profile_cmt~00001lo',
+        content: 'comment',
+        namedUsers: [],
+        replies: [],
+        relatedObjectUris: ['entities/13JKIKAz']
+    };
+    if (hasReplies) {
+        comment.replies.push({
+            selfLink: 'https://cservice-dev.reltio.com/tst-01/sokol/comments/00001lo/replies/000007s',
+            replyId: '000007s',
+            createdBy: 'vyacheslav.kovyazin',
+            createdTime: 1620280061505,
+            modifiedTime: 1620280061505,
+            deleted: false,
+            action: 'none',
+            content: 'abc',
+            namedUsers: []
+        });
+    }
+    return comment;
+};
+var createProps = function (comment) {
+    var onClose = jest.fn();
+    return {
+        comment: comment,
+        uri: 'entities/13JKIKAz/attributes/Name/2mlWuqDq5',
+        relatedObjectUris: ['entities/13JKIKAz'],
+        objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE,
+        onClose: onClose,
+        anchorEl: {},
+        open: true
+    };
+};
+var resolveThread = jest.fn();
+var mockCollaborationContext = function (sending, loading) {
+    if (sending === void 0) { sending = false; }
+    if (loading === void 0) { loading = false; }
+    return jest.spyOn(react, 'useContext').mockImplementation(function () { return ({
+        sending: sending,
+        loading: loading,
+        resolveThread: resolveThread
+    }); });
+};
+describe('CollaborationPopup tests', function () {
+    afterEach(function () {
+        jest.resetAllMocks();
+    });
+    it('should render popup correctly', function () {
+        mockCollaborationContext();
+        var props = createProps(createComment());
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, __assign({}, props)));
+        var popup = component.find(PopupWithArrow_1.PopupWithArrow);
+        expect(popup).toHaveLength(1);
+        expect(popup.props()).toMatchObject({
+            open: true,
+            onClose: props.onClose,
+            anchorEl: props.anchorEl,
+            className: 'popper'
+        });
+    });
+    it('should render correctly if comment do not exists', function () {
+        mockCollaborationContext();
+        var props = createProps();
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, __assign({}, props)));
+        expect(component.find('.counter')).toHaveLength(0);
+        expect(component.find('.resolveButton')).toHaveLength(0);
+        expect(component.find(CollaborationItem_1.CollaborationItem)).toHaveLength(1);
+    });
+    it('should render correctly if comment exists and loading is "false"', function () {
+        mockCollaborationContext();
+        var props = createProps(createComment());
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, __assign({}, props)));
+        expect(component.find('.counter').text()).toBe('1 item');
+        expect(component.find('.resolveButton')).toHaveLength(1);
+        expect(component.find(CollaborationItem_1.CollaborationItem)).toHaveLength(1);
+    });
+    it('should render correctly if loading is "true"', function () {
+        mockCollaborationContext(false, true);
+        var props = createProps(createComment());
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, __assign({}, props)));
+        expect(component.find('.counter')).toHaveLength(0);
+        expect(component.find('.resolveButton')).toHaveLength(0);
+        expect(component.find(CollaborationItem_1.CollaborationItem)).toHaveLength(0);
+    });
+    it('should disable resolveButton if sending is "true"', function () {
+        mockCollaborationContext(true, false);
+        var props = createProps(createComment());
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, __assign({}, props)));
+        expect(component.find('.resolveButton').prop('disabled')).toBe(true);
+    });
+    it('handleResolve handler should work correctly', function () {
+        mockCollaborationContext();
+        var props = createProps(createComment());
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, __assign({}, props)));
+        component.find('.resolveButton').simulate('click');
+        expect(resolveThread).toHaveBeenCalledWith({
+            commentId: '00001lo',
+            uri: 'entities/13JKIKAz/attributes/Name/2mlWuqDq5'
+        });
+    });
+});

package/cjs/CommentsContainer/components/CollaborationPopup/index.d.ts

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

package/cjs/CommentsContainer/components/CollaborationPopup/index.js

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

package/cjs/CommentsContainer/components/CommentButton/CommentButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare const CommentButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/cjs/CommentsContainer/components/CommentButton/CommentButton.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentButton = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var CommentBubble_1 = __importDefault(require("../../../icons/CommentBubble"));
+var BasicCommentButton_1 = require("../BasicCommentButton");
+var styles_1 = require("./styles");
+exports.CommentButton = react_1.default.forwardRef(function (_a, ref) {
+    var children = _a.children, onClick = _a.onClick;
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(BasicCommentButton_1.BasicCommentButton, { ref: ref, tooltipTitle: ui_i18n_1.default.text('Show comment'), icon: CommentBubble_1.default, onClick: onClick, "data-reltio-id": "reltio-comment-button" },
+        react_1.default.createElement("div", { className: styles.childrenWrapper }, children)));
+});
+exports.CommentButton.displayName = 'CommentButton';

package/cjs/CommentsContainer/components/CommentButton/index.d.ts

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

package/cjs/CommentsContainer/components/CommentButton/index.js

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

package/cjs/CommentsContainer/components/CommentButton/styles.d.ts

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

package/cjs/CommentsContainer/components/CommentButton/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    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/cjs/CommentsContainer/index.d.ts

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

package/cjs/CommentsContainer/index.js

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

package/cjs/CommentsContainer/styles.js

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

package/cjs/ConfigureColumnsPopup/ConfigureColumnsPopup.d.ts

@@ -0,0 +1,40 @@
+export function ConfigureColumnsPopup({ open, anchorEl, data, onSearch, onClose, titleText, filterText, onListItemClick, selected, hideCheckBox, renderGroupTitle, ...otherProps }: {
+    [x: string]: any;
+    open: any;
+    anchorEl: any;
+    data: any;
+    onSearch: any;
+    onClose: any;
+    titleText: any;
+    filterText: any;
+    onListItemClick: any;
+    selected: any;
+    hideCheckBox: any;
+    renderGroupTitle: any;
+}): JSX.Element;
+export namespace ConfigureColumnsPopup {
+    namespace propTypes {
+        let open: PropTypes.Requireable<boolean>;
+        let hideCheckBox: PropTypes.Requireable<boolean>;
+        let anchorEl: PropTypes.Requireable<any>;
+        let selected: PropTypes.Requireable<any[]>;
+        let data: PropTypes.Requireable<any[]>;
+        let filterText: PropTypes.Requireable<string>;
+        let titleText: PropTypes.Requireable<string>;
+        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        let onListItemClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let onSearch: PropTypes.Requireable<(...args: any[]) => any>;
+        let renderGroupTitle: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        let data_1: any[];
+        export { data_1 as data };
+        let selected_1: any[];
+        export { selected_1 as selected };
+        let titleText_1: string;
+        export { titleText_1 as titleText };
+        let filterText_1: string;
+        export { filterText_1 as filterText };
+    }
+}
+import PropTypes from 'prop-types';

package/cjs/ConfigureColumnsPopup/ConfigureColumnsPopup.js

@@ -0,0 +1,153 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SelectionPopup_1 = __importDefault(require("../components/SelectionPopup/SelectionPopup"));
+var helpers_1 = require("../components/VirtualGroupedList/helpers");
+var VirtualGroupedList_1 = __importDefault(require("../components/VirtualGroupedList/VirtualGroupedList"));
+var helpers_2 = require("../components/SelectionPopup/helpers");
+var AttributeListItem_1 = require("../AttributeListItem");
+var Highlighter_1 = require("../Highlighter");
+var styles_1 = require("./styles");
+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, renderGroupTitle = _a.renderGroupTitle, otherProps = __rest(_a, ["open", "anchorEl", "data", "onSearch", "onClose", "titleText", "filterText", "onListItemClick", "selected", "hideCheckBox", "renderGroupTitle"]);
+    var filterItem = (0, react_1.useCallback)(function (item) {
+        return item.label.toLowerCase().includes(filterText.toLowerCase());
+    }, [filterText]);
+    var filterItemsTree = (0, react_1.useCallback)(function (item) { return filterItem(item) || (item.children || []).some(filterItemsTree); }, [filterItem]);
+    var getItemSize = function () { return ITEM_HEIGHT; };
+    var getAttributesData = (0, react_1.useMemo)(function () {
+        var getAttributeGroupData = (0, ramda_1.curry)(function (level, item, groupId, groupName) { return __spreadArray([
+            {
+                item: __assign(__assign({}, item), { filterText: filterText }),
+                level: level,
+                groupId: groupId,
+                groupName: groupName
+            }
+        ], getAttributesData(item.children || [], groupId, groupName, level + 1), true); });
+        var getAttributesData = function (data, groupId, groupName, level) {
+            if (level === void 0) { level = 0; }
+            var getItemGroupData = function (item) { return getAttributeGroupData(level, item, groupId, groupName); };
+            var filteredData = data.filter(filterItemsTree);
+            return (renderGroupTitle ? ramda_1.map : ramda_1.chain)(getItemGroupData, filteredData);
+        };
+        return getAttributesData;
+    }, [filterText, renderGroupTitle, filterItemsTree]);
+    var getGroupsData = (0, react_1.useCallback)(function (groups) {
+        return groups
+            .map(function (group) { return ({
+            item: group,
+            items: getAttributesData(group.attributes, group.id, group.label)
+        }); })
+            .filter(function (group) { return group.items.length; });
+    }, [getAttributesData]);
+    var handleSearchOnEnter = (0, react_1.useCallback)(function (_a) {
+        var item = _a.item;
+        onListItemClick(item, !selected.find(function (column) { return column.id === item.id || column.id.includes("".concat(item.id, ".")); }));
+    }, [onListItemClick, selected]);
+    var groupedItems = (0, react_1.useMemo)(function () { return (renderGroupTitle ? getGroupsData : getAttributesData)(data); }, [data, renderGroupTitle, getGroupsData, getAttributesData]);
+    var items = (0, react_1.useMemo)(function () { return (0, helpers_1.flattenGroupedItemsData)(groupedItems); }, [groupedItems]);
+    var _b = (0, helpers_2.useKeyboardNavigation)({
+        items: items,
+        open: open,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selected
+    }), focusIndex = _b.focusIndex, handleKeyDown = _b.handleKeyDown;
+    var focusIndexRef = (0, react_1.useRef)(null);
+    focusIndexRef.current = focusIndex;
+    var renderListItem = (0, 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("".concat(item.id, ".")); });
+        var isFocused = focusIndexRef.current === index;
+        return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { key: item.id, onClick: onListItemClick, checked: checked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, hideCheckBox: hideCheckBox, isFocused: isFocused, notSelectable: item.notSelectable, LogoIcon: item.LogoIcon }));
+    }, [hideCheckBox, onListItemClick, selected]);
+    var containerWidth = (0, mdm_sdk_1.getMaxItemWidth)('label')(groupedItems) || DEFAULT_MIN_CONTAINER_WIDTH;
+    var classes = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(SelectionPopup_1.default, __assign({ open: open, className: (0, 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, renderGroupTitle: renderGroupTitle })));
+};
+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,
+    renderGroupTitle: prop_types_1.default.func
+};
+exports.ConfigureColumnsPopup.defaultProps = {
+    data: [],
+    selected: [],
+    titleText: ui_i18n_1.default.text('Show/hide columns'),
+    filterText: ''
+};

package/cjs/ConfigureColumnsPopup/ConfigureColumnsPopup.test.d.ts

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