@reltio/components 1.4.2049 → 1.4.2051

package/BarChart/BarChart.js

@@ -30,7 +30,10 @@ export var BarChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = getBarChartSettings(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
     var _d = useDynamicYAxisWidth({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
-    var onBarClick = onItemClick && (function (data) { return onItemClick(data.group); });
+    var onBarClick = onItemClick && (function (_a) {
+        var group = _a.group;
+        return onItemClick(group);
+    });
     var clickable = useClickableChartStyle(onBarClick);
     return (React.createElement(BarChartWidget, __assign({ width: width, height: height, data: data }, barChart, { ref: chartRef }),
         React.createElement(CartesianGrid, __assign({}, cartesianGrid)),

package/ColumnsSettings/ColumnsSettings.d.ts

@@ -6,6 +6,7 @@ type Props = {
     onChangeColumns: (columns: string[]) => void;
     title?: string;
     tooltipTitle?: string;
+    inputPlaceholder?: string;
 };
-export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle }: Props) => React.JSX.Element;
+export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle, inputPlaceholder }: Props) => React.JSX.Element;
 export {};

package/ColumnsSettings/ColumnsSettings.js

@@ -6,7 +6,7 @@ import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import { ColumnsSettingsPopup } from './components/ColumnsSettingsPopup';
 import { getChildColumns, isColumnSelected } from './helpers';
 export var ColumnsSettings = function (_a) {
-    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle;
+    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle, inputPlaceholder = _a.inputPlaceholder;
     var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
     var closePopup = function () { return setAnchorEl(null); };
@@ -19,5 +19,5 @@ export var ColumnsSettings = function (_a) {
     }, [selectedColumns, onChangeColumns]);
     return (React.createElement(React.Fragment, null,
         React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || i18n.text('Show/hide columns'), size: "L", icon: TableIcon, onClick: openPopup }),
-        React.createElement(ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, selectedColumns: selectedColumns })));
+        React.createElement(ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, inputPlaceholder: inputPlaceholder, selectedColumns: selectedColumns })));
 };

package/ColumnsSettings/ColumnsSettings.test.js

@@ -105,6 +105,20 @@ describe('ColumnsSettings', function () {
                 }
             });
         }); });
+        it('should use custom placeholder', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({ props: { inputPlaceholder: 'test placeholder' } }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('reltio-columns-settings-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'test placeholder');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('plain columns data behavior', function () {
         var columnsData = [

package/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.d.ts

@@ -4,6 +4,7 @@ type Props = {
     anchorEl: HTMLElement;
     onClose: () => void;
     title?: string;
+    inputPlaceholder?: string;
     columnsData: GroupedColumnsData[];
     onColumnClick: (column: {
         id: string;
@@ -11,5 +12,5 @@ type Props = {
     selectedColumns: string[];
     hideCheckBox?: boolean;
 };
-export declare const ColumnsSettingsPopup: ({ anchorEl, onClose, title, columnsData, onColumnClick, selectedColumns, hideCheckBox }: Props) => React.JSX.Element;
+export declare const ColumnsSettingsPopup: ({ anchorEl, onClose, title, inputPlaceholder, columnsData, onColumnClick, selectedColumns, hideCheckBox }: Props) => React.JSX.Element;
 export {};

package/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.js

@@ -14,7 +14,7 @@ var DEFAULT_MIN_CONTAINER_WIDTH = 308;
 var CONTAINER_HEADER_HEIGHT = 108;
 var MIN_CONTAINER_HEIGHT = 140;
 export var ColumnsSettingsPopup = function (_a) {
-    var anchorEl = _a.anchorEl, onClose = _a.onClose, title = _a.title, columnsData = _a.columnsData, onColumnClick = _a.onColumnClick, selectedColumns = _a.selectedColumns, hideCheckBox = _a.hideCheckBox;
+    var anchorEl = _a.anchorEl, onClose = _a.onClose, title = _a.title, inputPlaceholder = _a.inputPlaceholder, columnsData = _a.columnsData, onColumnClick = _a.onColumnClick, selectedColumns = _a.selectedColumns, hideCheckBox = _a.hideCheckBox;
     var styles = useStyles();
     var _b = useState(''), filterText = _b[0], setFilterText = _b[1];
     var clearFilter = function () { return setFilterText(''); };
@@ -39,6 +39,6 @@ export var ColumnsSettingsPopup = function (_a) {
     };
     var listHeight = Math.min(MAX_LIST_CONTAINER_HEIGHT, ITEM_HEIGHT * items.length);
     var containerHeight = Math.max(MIN_CONTAINER_HEIGHT, listHeight + CONTAINER_HEADER_HEIGHT);
-    return (React.createElement(SelectionPopup, { className: styles.popup, open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, onSearch: setFilterText, title: title || i18n.text('Show/hide columns'), containerWidth: containerWidth, containerHeight: containerHeight, searchInputOnKeyDown: handleKeyDown },
+    return (React.createElement(SelectionPopup, { className: styles.popup, open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, onSearch: setFilterText, inputPlaceholder: inputPlaceholder, title: title || i18n.text('Show/hide columns'), containerWidth: containerWidth, containerHeight: containerHeight, searchInputOnKeyDown: handleKeyDown },
         React.createElement(VirtualGroupedList, { fixedTitle: false, height: listHeight, renderItem: renderColumnItem, items: items, getItemSize: function () { return ITEM_HEIGHT; }, focusIndex: focusIndex })));
 };

package/SelectionPopup/SelectionPopup.d.ts

@@ -11,8 +11,9 @@ type Props = {
     className?: string;
     hideTitle?: boolean;
     hideSearchInput?: boolean;
+    inputPlaceholder?: string;
     headerPlacement?: 'top' | 'bottom';
     searchInputRef?: React.Ref<unknown>;
 } & PopoverProps;
-export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => React.JSX.Element;
+export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, inputPlaceholder, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => React.JSX.Element;
 export {};

package/SelectionPopup/SelectionPopup.js

@@ -29,18 +29,18 @@ import { useStyles } from './styles';
 import { useTheme } from '@mui/styles';
 export var SelectionPopup = function (_a) {
     var _b;
-    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _d = _a.anchorOrigin, anchorOrigin = _d === void 0 ? {
+    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _d = _a.anchorOrigin, anchorOrigin = _d === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
     } : _d, _e = _a.transformOrigin, transformOrigin = _e === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
-    } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
+    } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "inputPlaceholder", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
     var classes = useStyles({ containerWidth: containerWidth, containerHeight: containerHeight });
     var currentTheme = useTheme();
     var header = (React.createElement(React.Fragment, null,
         !hideTitle && React.createElement("div", { className: classes.header }, title),
-        !hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: i18n.text('Search & add attributes'), height: 40 }))));
+        !hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: inputPlaceholder || i18n.text('Search & add attributes'), height: 40 }))));
     return (React.createElement(Popover, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
         React.createElement("div", { className: classnames(classes.container, className), style: { width: containerWidth } },
             headerPlacement === 'top' && header,

package/SelectionPopup/SelectionPopup.spec.js

@@ -9,49 +9,109 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { shallow } from 'enzyme';
-import Popover from '@mui/material/Popover';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { SelectionPopup } from './SelectionPopup';
-import { SearchInput } from '../SearchInput';
 describe('SelectionPopup tests', function () {
     var defaultProps = {
+        title: 'Title',
         anchorEl: document.createElement('div'),
-        open: true
+        open: true,
+        containerWidth: 100,
+        containerHeight: 100,
+        children: React.createElement("div", { "data-reltio-id": "children" }),
+        onClose: jest.fn(),
+        onSearch: jest.fn(),
+        searchInputOnKeyDown: jest.fn()
     };
-    it('should render main components correctly', function () {
-        var props = __assign(__assign({}, defaultProps), { children: React.createElement("div", { className: 'testChildren' }), title: 'Title', onSearch: jest.fn(), searchInputOnKeyDown: jest.fn(), onClose: jest.fn() });
-        var component = shallow(React.createElement(SelectionPopup, __assign({}, props)));
-        var popover = component.find(Popover);
-        expect(popover.props()).toMatchObject({
-            open: props.open,
-            onClose: props.onClose
-        });
-        expect(popover.find('.header').text()).toBe(props.title);
-        expect(popover.find(SearchInput).props()).toMatchObject({
-            onKeyDown: props.searchInputOnKeyDown,
-            onSearch: props.onSearch
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(SelectionPopup, __assign({}, defaultProps, props))));
+    };
+    it('should render main components correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, textbox, backdrop;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    textbox = screen.getByRole('textbox');
+                    expect(textbox).toHaveAttribute('placeholder', 'Search & add attributes');
+                    expect(screen.getByText('Title')).toBeInTheDocument();
+                    expect(screen.getByTestId('children')).toBeInTheDocument();
+                    return [4 /*yield*/, user.type(textbox, 'test')];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onSearch).toHaveBeenCalledWith('test');
+                    expect(defaultProps.searchInputOnKeyDown).toHaveBeenCalledTimes(4);
+                    backdrop = screen.getByRole('presentation').firstChild;
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(popover.find('.testChildren').length).toBe(1);
-    });
+    }); });
     it('should hide title if props.hideTitle is true', function () {
-        var component = shallow(React.createElement(SelectionPopup, __assign({}, defaultProps, { hideTitle: true })));
-        expect(component.find('.header')).toHaveLength(0);
+        setUp({ hideTitle: true });
+        expect(screen.queryByText('Title')).not.toBeInTheDocument();
     });
     it('should hide search input if props.hideSearchInput is true', function () {
-        var component = shallow(React.createElement(SelectionPopup, __assign({}, defaultProps, { hideSearchInput: true })));
-        expect(component.find(SearchInput)).toHaveLength(0);
+        setUp({ hideSearchInput: true });
+        expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+    it('should use placeholder from props.inputPlaceholder', function () {
+        setUp({ inputPlaceholder: 'test placeholder' });
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'test placeholder');
     });
     it('should render header at the top if props.headerPlacement is "top"', function () {
-        var component = shallow(React.createElement(SelectionPopup, __assign({}, defaultProps, { headerPlacement: "top" })));
-        var content = component.find('.container').children();
-        expect(content.at(0).prop('className')).toBe('header');
-        expect(content.at(1).prop('placeholder')).toBe('Search & add attributes');
+        setUp({ headerPlacement: 'top' });
+        var container = screen.getByRole('presentation').querySelector('.container');
+        expect(container.firstChild).toHaveClass('header');
+        expect(container.lastChild).toHaveClass('list');
     });
     it('should render header at the bottom if props.headerPlacement is "bottom"', function () {
-        var component = shallow(React.createElement(SelectionPopup, __assign({}, defaultProps, { headerPlacement: "bottom" })));
-        var content = component.find('.container').children();
-        expect(content.at(content.length - 2).prop('className')).toBe('header');
-        expect(content.at(content.length - 1).prop('placeholder')).toBe('Search & add attributes');
+        setUp({ headerPlacement: 'bottom' });
+        var container = screen.getByRole('presentation').querySelector('.container');
+        expect(container.firstChild).toHaveClass('list');
+        expect(container.lastChild).toHaveClass('searchInputContainer');
     });
 });

package/cjs/BarChart/BarChart.js

@@ -36,7 +36,10 @@ var BarChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = (0, helpers_1.getBarChartSettings)(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
     var _d = (0, useDynamicYAxisWidth_1.useDynamicYAxisWidth)({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
-    var onBarClick = onItemClick && (function (data) { return onItemClick(data.group); });
+    var onBarClick = onItemClick && (function (_a) {
+        var group = _a.group;
+        return onItemClick(group);
+    });
     var clickable = (0, useClickableChartStyle_1.useClickableChartStyle)(onBarClick);
     return (react_1.default.createElement(recharts_1.BarChart, __assign({ width: width, height: height, data: data }, barChart, { ref: chartRef }),
         react_1.default.createElement(recharts_1.CartesianGrid, __assign({}, cartesianGrid)),

package/cjs/ColumnsSettings/ColumnsSettings.d.ts

@@ -6,6 +6,7 @@ type Props = {
     onChangeColumns: (columns: string[]) => void;
     title?: string;
     tooltipTitle?: string;
+    inputPlaceholder?: string;
 };
-export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle }: Props) => React.JSX.Element;
+export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle, inputPlaceholder }: Props) => React.JSX.Element;
 export {};

package/cjs/ColumnsSettings/ColumnsSettings.js

@@ -35,7 +35,7 @@ var SmallIconButton_1 = require("../SmallIconButton");
 var ColumnsSettingsPopup_1 = require("./components/ColumnsSettingsPopup");
 var helpers_1 = require("./helpers");
 var ColumnsSettings = function (_a) {
-    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle;
+    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle, inputPlaceholder = _a.inputPlaceholder;
     var _b = (0, react_1.useState)(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
     var closePopup = function () { return setAnchorEl(null); };
@@ -48,6 +48,6 @@ var ColumnsSettings = function (_a) {
     }, [selectedColumns, onChangeColumns]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Show/hide columns'), size: "L", icon: Table_1.default, onClick: openPopup }),
-        react_1.default.createElement(ColumnsSettingsPopup_1.ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, selectedColumns: selectedColumns })));
+        react_1.default.createElement(ColumnsSettingsPopup_1.ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, inputPlaceholder: inputPlaceholder, selectedColumns: selectedColumns })));
 };
 exports.ColumnsSettings = ColumnsSettings;

package/cjs/ColumnsSettings/ColumnsSettings.test.js

@@ -110,6 +110,20 @@ describe('ColumnsSettings', function () {
                 }
             });
         }); });
+        it('should use custom placeholder', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({ props: { inputPlaceholder: 'test placeholder' } }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId('reltio-columns-settings-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'test placeholder');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('plain columns data behavior', function () {
         var columnsData = [

package/cjs/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.d.ts

@@ -4,6 +4,7 @@ type Props = {
     anchorEl: HTMLElement;
     onClose: () => void;
     title?: string;
+    inputPlaceholder?: string;
     columnsData: GroupedColumnsData[];
     onColumnClick: (column: {
         id: string;
@@ -11,5 +12,5 @@ type Props = {
     selectedColumns: string[];
     hideCheckBox?: boolean;
 };
-export declare const ColumnsSettingsPopup: ({ anchorEl, onClose, title, columnsData, onColumnClick, selectedColumns, hideCheckBox }: Props) => React.JSX.Element;
+export declare const ColumnsSettingsPopup: ({ anchorEl, onClose, title, inputPlaceholder, columnsData, onColumnClick, selectedColumns, hideCheckBox }: Props) => React.JSX.Element;
 export {};

package/cjs/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.js

@@ -43,7 +43,7 @@ var DEFAULT_MIN_CONTAINER_WIDTH = 308;
 var CONTAINER_HEADER_HEIGHT = 108;
 var MIN_CONTAINER_HEIGHT = 140;
 var ColumnsSettingsPopup = function (_a) {
-    var anchorEl = _a.anchorEl, onClose = _a.onClose, title = _a.title, columnsData = _a.columnsData, onColumnClick = _a.onColumnClick, selectedColumns = _a.selectedColumns, hideCheckBox = _a.hideCheckBox;
+    var anchorEl = _a.anchorEl, onClose = _a.onClose, title = _a.title, inputPlaceholder = _a.inputPlaceholder, columnsData = _a.columnsData, onColumnClick = _a.onColumnClick, selectedColumns = _a.selectedColumns, hideCheckBox = _a.hideCheckBox;
     var styles = (0, styles_1.useStyles)();
     var _b = (0, react_1.useState)(''), filterText = _b[0], setFilterText = _b[1];
     var clearFilter = function () { return setFilterText(''); };
@@ -68,7 +68,7 @@ var ColumnsSettingsPopup = function (_a) {
     };
     var listHeight = Math.min(MAX_LIST_CONTAINER_HEIGHT, ITEM_HEIGHT * items.length);
     var containerHeight = Math.max(MIN_CONTAINER_HEIGHT, listHeight + CONTAINER_HEADER_HEIGHT);
-    return (react_1.default.createElement(SelectionPopup_1.SelectionPopup, { className: styles.popup, open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, onSearch: setFilterText, title: title || ui_i18n_1.default.text('Show/hide columns'), containerWidth: containerWidth, containerHeight: containerHeight, searchInputOnKeyDown: handleKeyDown },
+    return (react_1.default.createElement(SelectionPopup_1.SelectionPopup, { className: styles.popup, open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, onSearch: setFilterText, inputPlaceholder: inputPlaceholder, title: title || ui_i18n_1.default.text('Show/hide columns'), containerWidth: containerWidth, containerHeight: containerHeight, searchInputOnKeyDown: handleKeyDown },
         react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, { fixedTitle: false, height: listHeight, renderItem: renderColumnItem, items: items, getItemSize: function () { return ITEM_HEIGHT; }, focusIndex: focusIndex })));
 };
 exports.ColumnsSettingsPopup = ColumnsSettingsPopup;

package/cjs/SelectionPopup/SelectionPopup.d.ts

@@ -11,8 +11,9 @@ type Props = {
     className?: string;
     hideTitle?: boolean;
     hideSearchInput?: boolean;
+    inputPlaceholder?: string;
     headerPlacement?: 'top' | 'bottom';
     searchInputRef?: React.Ref<unknown>;
 } & PopoverProps;
-export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => React.JSX.Element;
+export declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, inputPlaceholder, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => React.JSX.Element;
 export {};

package/cjs/SelectionPopup/SelectionPopup.js

@@ -35,18 +35,18 @@ var styles_1 = require("./styles");
 var styles_2 = require("@mui/styles");
 var SelectionPopup = function (_a) {
     var _b;
-    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _d = _a.anchorOrigin, anchorOrigin = _d === void 0 ? {
+    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _d = _a.anchorOrigin, anchorOrigin = _d === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
     } : _d, _e = _a.transformOrigin, transformOrigin = _e === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
-    } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
+    } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "inputPlaceholder", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
     var classes = (0, styles_1.useStyles)({ containerWidth: containerWidth, containerHeight: containerHeight });
     var currentTheme = (0, styles_2.useTheme)();
     var header = (react_1.default.createElement(react_1.default.Fragment, null,
         !hideTitle && react_1.default.createElement("div", { className: classes.header }, title),
-        !hideSearchInput && (react_1.default.createElement(SearchInput_1.SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: ui_i18n_1.default.text('Search & add attributes'), height: 40 }))));
+        !hideSearchInput && (react_1.default.createElement(SearchInput_1.SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: inputPlaceholder || ui_i18n_1.default.text('Search & add attributes'), height: 40 }))));
     return (react_1.default.createElement(Popover_1.default, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
         react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.container, className), style: { width: containerWidth } },
             headerPlacement === 'top' && header,

package/cjs/SelectionPopup/SelectionPopup.spec.js

@@ -10,53 +10,113 @@ var __assign = (this && this.__assign) || function () {
     };
     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 enzyme_1 = require("enzyme");
-var Popover_1 = __importDefault(require("@mui/material/Popover"));
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var SelectionPopup_1 = require("./SelectionPopup");
-var SearchInput_1 = require("../SearchInput");
 describe('SelectionPopup tests', function () {
     var defaultProps = {
+        title: 'Title',
         anchorEl: document.createElement('div'),
-        open: true
+        open: true,
+        containerWidth: 100,
+        containerHeight: 100,
+        children: react_1.default.createElement("div", { "data-reltio-id": "children" }),
+        onClose: jest.fn(),
+        onSearch: jest.fn(),
+        searchInputOnKeyDown: jest.fn()
     };
-    it('should render main components correctly', function () {
-        var props = __assign(__assign({}, defaultProps), { children: react_1.default.createElement("div", { className: 'testChildren' }), title: 'Title', onSearch: jest.fn(), searchInputOnKeyDown: jest.fn(), onClose: jest.fn() });
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SelectionPopup_1.SelectionPopup, __assign({}, props)));
-        var popover = component.find(Popover_1.default);
-        expect(popover.props()).toMatchObject({
-            open: props.open,
-            onClose: props.onClose
-        });
-        expect(popover.find('.header').text()).toBe(props.title);
-        expect(popover.find(SearchInput_1.SearchInput).props()).toMatchObject({
-            onKeyDown: props.searchInputOnKeyDown,
-            onSearch: props.onSearch
+    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(SelectionPopup_1.SelectionPopup, __assign({}, defaultProps, props))));
+    };
+    it('should render main components correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, textbox, backdrop;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    textbox = react_2.screen.getByRole('textbox');
+                    expect(textbox).toHaveAttribute('placeholder', 'Search & add attributes');
+                    expect(react_2.screen.getByText('Title')).toBeInTheDocument();
+                    expect(react_2.screen.getByTestId('children')).toBeInTheDocument();
+                    return [4 /*yield*/, user.type(textbox, 'test')];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onSearch).toHaveBeenCalledWith('test');
+                    expect(defaultProps.searchInputOnKeyDown).toHaveBeenCalledTimes(4);
+                    backdrop = react_2.screen.getByRole('presentation').firstChild;
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(popover.find('.testChildren').length).toBe(1);
-    });
+    }); });
     it('should hide title if props.hideTitle is true', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SelectionPopup_1.SelectionPopup, __assign({}, defaultProps, { hideTitle: true })));
-        expect(component.find('.header')).toHaveLength(0);
+        setUp({ hideTitle: true });
+        expect(react_2.screen.queryByText('Title')).not.toBeInTheDocument();
     });
     it('should hide search input if props.hideSearchInput is true', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SelectionPopup_1.SelectionPopup, __assign({}, defaultProps, { hideSearchInput: true })));
-        expect(component.find(SearchInput_1.SearchInput)).toHaveLength(0);
+        setUp({ hideSearchInput: true });
+        expect(react_2.screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+    it('should use placeholder from props.inputPlaceholder', function () {
+        setUp({ inputPlaceholder: 'test placeholder' });
+        expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'test placeholder');
     });
     it('should render header at the top if props.headerPlacement is "top"', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SelectionPopup_1.SelectionPopup, __assign({}, defaultProps, { headerPlacement: "top" })));
-        var content = component.find('.container').children();
-        expect(content.at(0).prop('className')).toBe('header');
-        expect(content.at(1).prop('placeholder')).toBe('Search & add attributes');
+        setUp({ headerPlacement: 'top' });
+        var container = react_2.screen.getByRole('presentation').querySelector('.container');
+        expect(container.firstChild).toHaveClass('header');
+        expect(container.lastChild).toHaveClass('list');
     });
     it('should render header at the bottom if props.headerPlacement is "bottom"', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SelectionPopup_1.SelectionPopup, __assign({}, defaultProps, { headerPlacement: "bottom" })));
-        var content = component.find('.container').children();
-        expect(content.at(content.length - 2).prop('className')).toBe('header');
-        expect(content.at(content.length - 1).prop('placeholder')).toBe('Search & add attributes');
+        setUp({ headerPlacement: 'bottom' });
+        var container = react_2.screen.getByRole('presentation').querySelector('.container');
+        expect(container.firstChild).toHaveClass('list');
+        expect(container.lastChild).toHaveClass('searchInputContainer');
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2049",
+  "version": "1.4.2051",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -36,7 +36,7 @@
     "react-simple-maps": "^3.0.0",
     "react-virtualized": "^9.22.5",
     "react-window": "^1.8.10",
-    "recharts": "^2.14.1",
+    "recharts": "^2.15.0",
     "sanitize-html": "^2.13.1",
     "sigma": "^2.4.0",
     "topojson-client": "^3.1.0"