@reltio/components 1.4.2138 → 1.4.2140

package/ColumnsSettings/components/ColumnListItem/ColumnListItem.js

@@ -7,5 +7,5 @@ export var ColumnListItem = function (_a) {
     var _b;
     var item = _a.item, onClick = _a.onClick, checked = _a.checked, level = _a.level, style = _a.style, isFocused = _a.isFocused, isGroupItem = _a.isGroupItem, hideCheckBox = _a.hideCheckBox;
     var styles = useStyles();
-    return (React.createElement(AttributeListItem, { hideCheckBox: hideCheckBox, key: item.id, onClick: onClick, checked: checked, level: level, data: item, label: React.createElement(Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: isGroupItem, className: classnames((_b = {}, _b[styles.groupItem] = isGroupItem, _b)) }));
+    return (React.createElement(AttributeListItem, { hideCheckBox: hideCheckBox, key: item.id, onClick: onClick, checked: checked, level: level, data: item, label: React.createElement(Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: isGroupItem, className: classnames((_b = {}, _b[styles.groupItem] = isGroupItem, _b)), notSelectable: hideCheckBox && isGroupItem }));
 };

package/ConfigColumnPopup/ConfigColumnPopup.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const INSERT_LEFT = "left";
+export declare const INSERT_RIGHT = "right";
+export declare const HIDE = "hide";
+export type ConfigColumnAction = typeof INSERT_LEFT | typeof INSERT_RIGHT | typeof HIDE;
+type Props = {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    onClick: (action: ConfigColumnAction) => void;
+    onClose: () => void;
+    actions: ConfigColumnAction[];
+};
+export declare const ConfigColumnPopup: ({ open, anchorEl, onClick, onClose, actions }: Props) => React.JSX.Element;
+export {};

package/ConfigColumnPopup/ConfigColumnPopup.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Popover from '@mui/material/Popover';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import i18n from 'ui-i18n';
+export var INSERT_LEFT = 'left';
+export var INSERT_RIGHT = 'right';
+export var HIDE = 'hide';
+export var ConfigColumnPopup = function (_a) {
+    var _b;
+    var open = _a.open, anchorEl = _a.anchorEl, onClick = _a.onClick, onClose = _a.onClose, actions = _a.actions;
+    var TEXT = (_b = {},
+        _b[INSERT_LEFT] = i18n.text('Insert 1 left'),
+        _b[INSERT_RIGHT] = i18n.text('Insert 1 right'),
+        _b[HIDE] = i18n.text('Hide column'),
+        _b);
+    var getClickHandler = function (action) { return function () {
+        onClick(action);
+    }; };
+    return (React.createElement(Popover, { open: open, anchorEl: anchorEl, onClose: onClose },
+        React.createElement(List, { component: "div" }, actions.map(function (action, index) { return (React.createElement(ListItem, { button: true, component: "div", key: index, onClick: getClickHandler(action) },
+            React.createElement(ListItemText, { primary: TEXT[action], primaryTypographyProps: { variant: 'body2' } }))); }))));
+};

package/ConfigColumnPopup/ConfigColumnPopup.test.d.ts

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

package/ConfigColumnPopup/ConfigColumnPopup.test.js

@@ -0,0 +1,120 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { ConfigColumnPopup, INSERT_LEFT, INSERT_RIGHT, HIDE } from './ConfigColumnPopup';
+describe('ConfigColumnPopup tests', function () {
+    var defaultProps = {
+        open: true,
+        anchorEl: document.body,
+        onClick: jest.fn(),
+        onClose: jest.fn(),
+        actions: [INSERT_LEFT, INSERT_RIGHT, HIDE]
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(ConfigColumnPopup, __assign({}, defaultProps, props))));
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render all action items', function () {
+        setUp();
+        expect(screen.getByText('Insert 1 left')).toBeInTheDocument();
+        expect(screen.getByText('Insert 1 right')).toBeInTheDocument();
+        expect(screen.getByText('Hide column')).toBeInTheDocument();
+    });
+    it('should call onClick with correct action when item is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    user = setUp({ onClick: onClick }).user;
+                    return [4 /*yield*/, user.click(screen.getByText('Insert 1 left'))];
+                case 1:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledWith(INSERT_LEFT);
+                    return [4 /*yield*/, user.click(screen.getByText('Insert 1 right'))];
+                case 2:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledWith(INSERT_RIGHT);
+                    return [4 /*yield*/, user.click(screen.getByText('Hide column'))];
+                case 3:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledWith(HIDE);
+                    expect(onClick).toHaveBeenCalledTimes(3);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not render anything when open is false', function () {
+        setUp({ open: false });
+        expect(screen.queryByText('Insert 1 left')).not.toBeInTheDocument();
+        expect(screen.queryByText('Insert 1 right')).not.toBeInTheDocument();
+        expect(screen.queryByText('Hide column')).not.toBeInTheDocument();
+    });
+    it('should call onClose when popover is closed', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user, backdrop;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClose = jest.fn();
+                    user = setUp({ onClose: onClose }).user;
+                    backdrop = document.querySelector('.MuiBackdrop-root');
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 1:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/ConfigColumnPopup/index.d.ts

@@ -0,0 +1 @@
+export { ConfigColumnPopup, INSERT_LEFT, INSERT_RIGHT, HIDE } from './ConfigColumnPopup';

package/ConfigColumnPopup/index.js

@@ -0,0 +1 @@
+export { ConfigColumnPopup, INSERT_LEFT, INSERT_RIGHT, HIDE } from './ConfigColumnPopup';

package/DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip.d.ts

@@ -11,5 +11,9 @@ export type DefaultHeadCellRendererWithTooltipProps = {
         headLabel?: string;
     };
     dataReltioId?: string;
+    openConfigColumnPopup?: (index: number, event: React.MouseEvent<HTMLElement>) => void;
 };
-export declare const DefaultHeadCellRendererWithTooltip: ({ classes, dataReltioId, headCellData, className, ...props }: DefaultHeadCellRendererWithTooltipProps) => React.JSX.Element;
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip.js

@@ -20,16 +20,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import classnames from 'classnames';
 import React from 'react';
+import classnames from 'classnames';
+import { pick, pipe, defaultTo } from 'ramda';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DefaultHeadCellRenderer from 'react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer';
+import { withTableContext } from '../HOCs/withTableContext';
 import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
+import { SmallIconButton } from '../SmallIconButton';
 import styles from './DefaultHeadCellRendererWithTooltip.module.css';
-export var DefaultHeadCellRendererWithTooltip = function (_a) {
-    var _b = _a.classes, classes = _b === void 0 ? {} : _b, dataReltioId = _a.dataReltioId, headCellData = _a.headCellData, className = _a.className, props = __rest(_a, ["classes", "dataReltioId", "headCellData", "className"]);
+var DefaultHeadCellRendererWithTooltip = function (_a) {
+    var _b = _a.classes, classes = _b === void 0 ? {} : _b, dataReltioId = _a.dataReltioId, headCellData = _a.headCellData, className = _a.className, openConfigColumnPopup = _a.openConfigColumnPopup, headIndex = _a.headIndex, props = __rest(_a, ["classes", "dataReltioId", "headCellData", "className", "openConfigColumnPopup", "headIndex"]);
     var headCell = (classes === null || classes === void 0 ? void 0 : classes.headCell) || styles.headCell;
     var headLabel = (classes === null || classes === void 0 ? void 0 : classes.headLabel) || styles.headLabel;
     return (React.createElement("div", __assign({ className: classnames(headCell, className) }, (dataReltioId ? { 'data-reltio-id': dataReltioId } : {})),
-        React.createElement(DefaultHeadCellRenderer, __assign({}, props, { headCellData: __assign(__assign({}, headCellData), { label: (React.createElement(ExpandedValueTooltip, { value: headCellData.label },
-                    React.createElement("div", { className: headLabel }, headCellData.label))) }) }))));
+        React.createElement(DefaultHeadCellRenderer, __assign({}, props, { headIndex: headIndex, headCellData: __assign(__assign({}, headCellData), { label: (React.createElement(ExpandedValueTooltip, { value: headCellData.label },
+                    React.createElement("div", { className: headLabel }, headCellData.label))) }) })),
+        openConfigColumnPopup && (React.createElement("div", { className: styles.menuButtonWrapper },
+            React.createElement(SmallIconButton, { icon: MoreVertIcon, onClick: function (e) { return openConfigColumnPopup && openConfigColumnPopup(headIndex, e); }, size: "S" })))));
 };
+export default withTableContext(pipe(defaultTo({}), pick(['openConfigColumnPopup'])))(DefaultHeadCellRendererWithTooltip);

package/DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"headCell":"DefaultHeadCellRendererWithTooltip-headCell--JlLvL","headLabel":"DefaultHeadCellRendererWithTooltip-headLabel--fzLXE"};
+const styles = {"headCell":"DefaultHeadCellRendererWithTooltip-headCell--JlLvL","menuButtonWrapper":"DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw","headLabel":"DefaultHeadCellRendererWithTooltip-headLabel--fzLXE"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.DefaultHeadCellRendererWithTooltip-headCell--JlLvL{align-items:center;display:flex;height:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div{padding:0 16px 0 22px;width:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div>span{justify-content:flex-end;width:100%}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE{color:var(--mui-palette-text-primary);font-size:12px;font-weight:500;line-height:16px;overflow:hidden;white-space:nowrap}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE:after{background:linear-gradient(90deg,hsla(0,0%,100%,.2),#fff);content:"";height:100%;pointer-events:none;position:absolute;right:0;top:0;width:40px}`;
+    style.innerHTML = `.DefaultHeadCellRendererWithTooltip-headCell--JlLvL{align-items:center;box-sizing:border-box;display:flex;height:100%;width:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL .DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw{align-items:center;display:flex;justify-content:flex-end;padding-right:0;position:absolute;right:0;top:50%;transform:translateY(-50%);visibility:hidden;width:fit-content;z-index:2}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL:hover .DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw{visibility:visible}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div{padding:0 16px 0 22px;width:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div>span{justify-content:flex-end;width:100%}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE{color:var(--mui-palette-text-primary);font-size:12px;font-weight:500;line-height:16px;overflow:hidden;white-space:nowrap}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE:after{background:linear-gradient(90deg,hsla(0,0%,100%,.2),#fff);content:"";height:100%;pointer-events:none;position:absolute;right:0;top:0;width:40px}`;
     head.appendChild(style);
 }
 export default styles;

package/DefaultHeadCellRendererWithTooltip/index.d.ts

@@ -1,2 +1,2 @@
-export { DefaultHeadCellRendererWithTooltip } from './DefaultHeadCellRendererWithTooltip';
+export { default as DefaultHeadCellRendererWithTooltip } from './DefaultHeadCellRendererWithTooltip';
 export type { DefaultHeadCellRendererWithTooltipProps } from './DefaultHeadCellRendererWithTooltip';

package/DefaultHeadCellRendererWithTooltip/index.js

@@ -1 +1 @@
-export { DefaultHeadCellRendererWithTooltip } from './DefaultHeadCellRendererWithTooltip';
+export { default as DefaultHeadCellRendererWithTooltip } from './DefaultHeadCellRendererWithTooltip';

package/HOCs/withColumnConfigurator/helpers.d.ts

@@ -0,0 +1,2 @@
+import { GroupedColumnsData } from '../../types/basicTable';
+export declare function getAvailableColumns(grouped: GroupedColumnsData[], selectedColumns: string[]): GroupedColumnsData[];

package/HOCs/withColumnConfigurator/helpers.js

@@ -0,0 +1,30 @@
+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);
+};
+import { has } from 'ramda';
+function isGroupedColumns(node) {
+    return has('columns', node) && Array.isArray(node.columns);
+}
+export function getAvailableColumns(grouped, selectedColumns) {
+    return grouped
+        .map(function (node) {
+        if (isGroupedColumns(node)) {
+            var filtered = getAvailableColumns(node.columns, selectedColumns);
+            if (filtered.length === 0)
+                return null;
+            return __assign(__assign({}, node), { columns: filtered });
+        }
+        if (selectedColumns.includes(node.id))
+            return null;
+        return node;
+    })
+        .filter(Boolean);
+}

package/HOCs/withColumnConfigurator/index.d.ts

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

package/HOCs/withColumnConfigurator/index.js

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

package/HOCs/withColumnConfigurator/withColumnConfigurator.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, MouseEvent, ReactElement } from 'react';
+import { GroupedColumnsData, ColumnData } from '../../types/basicTable';
+export declare function withColumnConfigurator<P extends object>(Table: ComponentType<P & {
+    openConfigColumnPopup: (index: number, e: MouseEvent<HTMLElement>) => void;
+}>): (props: {
+    columns: GroupedColumnsData<ColumnData>[];
+    onChangeColumns(ids: string[]): void;
+    selectedColumns: string[];
+} & Omit<P, keyof {
+    columns: GroupedColumnsData<ColumnData>[];
+    onChangeColumns(ids: string[]): void;
+    selectedColumns: string[];
+} | "openConfigColumnPopup">) => ReactElement;

package/HOCs/withColumnConfigurator/withColumnConfigurator.js

@@ -0,0 +1,91 @@
+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 __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));
+};
+import React, { useCallback, useState, useMemo, useRef } from 'react';
+import i18n from 'ui-i18n';
+import { ConfigColumnPopup, HIDE, INSERT_LEFT, INSERT_RIGHT } from '../../ConfigColumnPopup';
+import { ColumnsSettingsPopup } from '../../ColumnsSettings';
+import { getAvailableColumns } from './helpers';
+export function withColumnConfigurator(Table) {
+    return function ColumnConfigurator(props) {
+        var columns = props.columns, onChangeColumns = props.onChangeColumns, selectedColumns = props.selectedColumns, tableProps = __rest(props, ["columns", "onChangeColumns", "selectedColumns"]);
+        var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+        var _b = useState(null), configIdx = _b[0], setConfigIdx = _b[1];
+        var _c = useState(null), popupMode = _c[0], setPopupMode = _c[1];
+        var placeForNewRef = useRef(null);
+        var availablelColumns = useMemo(function () { return getAvailableColumns(columns, selectedColumns); }, [columns, selectedColumns]);
+        var closeAll = useCallback(function () {
+            setAnchorEl(null);
+            setConfigIdx(null);
+            setPopupMode(null);
+            placeForNewRef.current = null;
+        }, []);
+        var openConfigColumnPopup = useCallback(function (index, e) {
+            setAnchorEl(e.currentTarget);
+            setConfigIdx(index);
+            setPopupMode('menu');
+        }, []);
+        var handleMenuAction = useCallback(function (action) {
+            if (configIdx === null)
+                return;
+            switch (action) {
+                case INSERT_LEFT:
+                    placeForNewRef.current = configIdx;
+                    setPopupMode('add');
+                    break;
+                case INSERT_RIGHT:
+                    placeForNewRef.current = configIdx + 1;
+                    setPopupMode('add');
+                    break;
+                case HIDE: {
+                    var next = __spreadArray(__spreadArray([], selectedColumns.slice(0, configIdx), true), selectedColumns.slice(configIdx + 1), true);
+                    onChangeColumns(next);
+                    closeAll();
+                    break;
+                }
+            }
+        }, [selectedColumns, configIdx, onChangeColumns, closeAll]);
+        var handleAddColumn = useCallback(function (_a) {
+            var id = _a.id;
+            if (placeForNewRef.current === null)
+                return;
+            var next = __spreadArray(__spreadArray(__spreadArray([], selectedColumns.slice(0, placeForNewRef.current), true), [
+                id
+            ], false), selectedColumns.slice(placeForNewRef.current), true);
+            onChangeColumns(next);
+            closeAll();
+        }, [selectedColumns, onChangeColumns, closeAll]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Table, __assign({}, tableProps, { openConfigColumnPopup: openConfigColumnPopup })),
+            React.createElement(ColumnsSettingsPopup, { anchorEl: popupMode === 'add' ? anchorEl : null, onClose: closeAll, title: i18n.text('Add column'), columnsData: availablelColumns, onColumnClick: handleAddColumn, selectedColumns: selectedColumns, hideCheckBox: true }),
+            React.createElement(ConfigColumnPopup, { open: popupMode === 'menu', anchorEl: anchorEl, onClose: closeAll, onClick: handleMenuAction, actions: configIdx !== null && configIdx > 0 ? [INSERT_LEFT, INSERT_RIGHT, HIDE] : [INSERT_RIGHT] })));
+    };
+}

package/RCTree/RCTREELevelLines.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"levelLines":"RCTree-levelLines--wCbE3","levelLine":"RCTree-levelLine--RxwVZ","showLine":"RCTree-showLine--lFoCT","lastLevelLine":"RCTree-lastLevelLine--MW18c","horizontalLine":"RCTree-horizontalLine--VbswG"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RCTree-levelLines--wCbE3{bottom:0;cursor:auto;display:flex;padding-left:7px;position:absolute;top:0;z-index:-1}.RCTree-levelLine--RxwVZ{height:100%;padding-left:16px;position:relative}.RCTree-showLine--lFoCT:after{background-color:rgba(0,122,193,.3);bottom:0;content:"";height:100%;left:0;position:absolute;top:0;width:1px}.RCTree-lastLevelLine--MW18c:after{height:14px}.RCTree-horizontalLine--VbswG:before{background-color:rgba(0,122,193,.3);content:"";height:1px;left:0;position:absolute;top:14px;width:4px}`;
+    head.appendChild(style);
+}
+export default styles;

package/RCTree/RCTreeLevelLines.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import classnames from 'classnames';
 import { DEPTH_LEVEL_INDENT } from './helper';
-import { useStyles } from './levelLinesStyles';
+import styles from './RCTREELevelLines.module.css';
 var LevelLine = function (_a) {
     var _b;
     var _c = _a.needDrawLine, needDrawLine = _c === void 0 ? false : _c, _d = _a.isLastLevelLine, isLastLevelLine = _d === void 0 ? false : _d, _e = _a.drawHorizontalLine, drawHorizontalLine = _e === void 0 ? false : _e;
-    var styles = useStyles({});
     return (React.createElement("div", { className: classnames(styles.levelLine, (_b = {},
             _b[styles.showLine] = needDrawLine,
             _b[styles.lastLevelLine] = isLastLevelLine,
@@ -16,7 +15,6 @@ export var RCTreeLevelLines = function (_a) {
     var levelLine = _a.levelLine;
     var _b = levelLine || [], _c = _b[0], needDrawLines = _c === void 0 ? [] : _c, _d = _b[1], isLast = _d === void 0 ? false : _d;
     var level = needDrawLines.length + 2;
-    var styles = useStyles({ level: level });
     return (React.createElement("div", { className: styles.levelLines, style: { left: "-".concat(DEPTH_LEVEL_INDENT * level, "px") } }, needDrawLines
         .map(function (needDrawLine, index) {
         return React.createElement(LevelLine, { key: index, needDrawLine: needDrawLine });

package/TableWithBars/components/HeadCellRenderer/HeadCellRenderer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { DefaultHeadCellRendererWithTooltipProps } from '../../../DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip';
+import { DefaultHeadCellRendererWithTooltipProps } from '../../../DefaultHeadCellRendererWithTooltip';
 export declare const HeadCellRenderer: (props: DefaultHeadCellRendererWithTooltipProps) => React.JSX.Element;

package/TableWithBars/components/HeadCellRenderer/HeadCellRenderer.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { DefaultHeadCellRendererWithTooltip } from '../../../DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip';
+import { DefaultHeadCellRendererWithTooltip } from '../../../DefaultHeadCellRendererWithTooltip';
 import { useStyles } from './styles';
 export var HeadCellRenderer = function (props) {
     var styles = useStyles();

package/cjs/ColumnsSettings/components/ColumnListItem/ColumnListItem.js

@@ -13,6 +13,6 @@ var ColumnListItem = function (_a) {
     var _b;
     var item = _a.item, onClick = _a.onClick, checked = _a.checked, level = _a.level, style = _a.style, isFocused = _a.isFocused, isGroupItem = _a.isGroupItem, hideCheckBox = _a.hideCheckBox;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { hideCheckBox: hideCheckBox, key: item.id, onClick: onClick, 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, isFocused: isFocused, hideIcon: isGroupItem, className: (0, classnames_1.default)((_b = {}, _b[styles.groupItem] = isGroupItem, _b)) }));
+    return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { hideCheckBox: hideCheckBox, key: item.id, onClick: onClick, 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, isFocused: isFocused, hideIcon: isGroupItem, className: (0, classnames_1.default)((_b = {}, _b[styles.groupItem] = isGroupItem, _b)), notSelectable: hideCheckBox && isGroupItem }));
 };
 exports.ColumnListItem = ColumnListItem;

package/cjs/ConfigColumnPopup/ConfigColumnPopup.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const INSERT_LEFT = "left";
+export declare const INSERT_RIGHT = "right";
+export declare const HIDE = "hide";
+export type ConfigColumnAction = typeof INSERT_LEFT | typeof INSERT_RIGHT | typeof HIDE;
+type Props = {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    onClick: (action: ConfigColumnAction) => void;
+    onClose: () => void;
+    actions: ConfigColumnAction[];
+};
+export declare const ConfigColumnPopup: ({ open, anchorEl, onClick, onClose, actions }: Props) => React.JSX.Element;
+export {};

package/cjs/ConfigColumnPopup/ConfigColumnPopup.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigColumnPopup = exports.HIDE = exports.INSERT_RIGHT = exports.INSERT_LEFT = void 0;
+var react_1 = __importDefault(require("react"));
+var Popover_1 = __importDefault(require("@mui/material/Popover"));
+var List_1 = __importDefault(require("@mui/material/List"));
+var ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+exports.INSERT_LEFT = 'left';
+exports.INSERT_RIGHT = 'right';
+exports.HIDE = 'hide';
+var ConfigColumnPopup = function (_a) {
+    var _b;
+    var open = _a.open, anchorEl = _a.anchorEl, onClick = _a.onClick, onClose = _a.onClose, actions = _a.actions;
+    var TEXT = (_b = {},
+        _b[exports.INSERT_LEFT] = ui_i18n_1.default.text('Insert 1 left'),
+        _b[exports.INSERT_RIGHT] = ui_i18n_1.default.text('Insert 1 right'),
+        _b[exports.HIDE] = ui_i18n_1.default.text('Hide column'),
+        _b);
+    var getClickHandler = function (action) { return function () {
+        onClick(action);
+    }; };
+    return (react_1.default.createElement(Popover_1.default, { open: open, anchorEl: anchorEl, onClose: onClose },
+        react_1.default.createElement(List_1.default, { component: "div" }, actions.map(function (action, index) { return (react_1.default.createElement(ListItem_1.default, { button: true, component: "div", key: index, onClick: getClickHandler(action) },
+            react_1.default.createElement(ListItemText_1.default, { primary: TEXT[action], primaryTypographyProps: { variant: 'body2' } }))); }))));
+};
+exports.ConfigColumnPopup = ConfigColumnPopup;

package/cjs/ConfigColumnPopup/ConfigColumnPopup.test.d.ts

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

package/cjs/ConfigColumnPopup/ConfigColumnPopup.test.js

@@ -0,0 +1,125 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 user_event_1 = __importDefault(require("@testing-library/user-event"));
+var react_2 = require("@testing-library/react");
+var ConfigColumnPopup_1 = require("./ConfigColumnPopup");
+describe('ConfigColumnPopup tests', function () {
+    var defaultProps = {
+        open: true,
+        anchorEl: document.body,
+        onClick: jest.fn(),
+        onClose: jest.fn(),
+        actions: [ConfigColumnPopup_1.INSERT_LEFT, ConfigColumnPopup_1.INSERT_RIGHT, ConfigColumnPopup_1.HIDE]
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(ConfigColumnPopup_1.ConfigColumnPopup, __assign({}, defaultProps, props))));
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render all action items', function () {
+        setUp();
+        expect(react_2.screen.getByText('Insert 1 left')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Insert 1 right')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Hide column')).toBeInTheDocument();
+    });
+    it('should call onClick with correct action when item is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    user = setUp({ onClick: onClick }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Insert 1 left'))];
+                case 1:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledWith(ConfigColumnPopup_1.INSERT_LEFT);
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Insert 1 right'))];
+                case 2:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledWith(ConfigColumnPopup_1.INSERT_RIGHT);
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Hide column'))];
+                case 3:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalledWith(ConfigColumnPopup_1.HIDE);
+                    expect(onClick).toHaveBeenCalledTimes(3);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not render anything when open is false', function () {
+        setUp({ open: false });
+        expect(react_2.screen.queryByText('Insert 1 left')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByText('Insert 1 right')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByText('Hide column')).not.toBeInTheDocument();
+    });
+    it('should call onClose when popover is closed', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user, backdrop;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClose = jest.fn();
+                    user = setUp({ onClose: onClose }).user;
+                    backdrop = document.querySelector('.MuiBackdrop-root');
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 1:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/cjs/ConfigColumnPopup/index.d.ts

@@ -0,0 +1 @@
+export { ConfigColumnPopup, INSERT_LEFT, INSERT_RIGHT, HIDE } from './ConfigColumnPopup';