@reltio/components 1.4.2071 → 1.4.2072

package/UploadImageDialog/components/ErrorSnackbar/ErrorSnackbar.test.js

@@ -1,30 +1,88 @@
+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 Snackbar from '@mui/material/Snackbar';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ErrorSnackbar } from './ErrorSnackbar';
 describe('ErrorSnackbar tests', function () {
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(ErrorSnackbar, __assign({ error: null }, props))));
+    };
     it('should render correctly with error is "null"', function () {
-        var component = shallow(React.createElement(ErrorSnackbar, { error: null }));
-        expect(component.find(Snackbar).props()).toMatchObject({
-            open: false,
-            message: null
-        });
+        var container = setUp({ error: null }).container;
+        expect(container).toBeEmptyDOMElement();
     });
     it('should render correctly with error is not "null"', function () {
-        var component = shallow(React.createElement(ErrorSnackbar, { error: "Some error" }));
-        expect(component.find(Snackbar).props()).toMatchObject({
-            open: true,
-            message: 'Some error'
-        });
-    });
-    it('onClose handler work correctly', function () {
-        var onClose = jest.fn();
-        var component = shallow(React.createElement(ErrorSnackbar, { error: "Some error", onClose: onClose }));
-        var closeEvent = {};
-        component.find(Snackbar).prop('onClose')(closeEvent, 'clickaway');
-        expect(onClose).toHaveBeenCalledTimes(1);
-        var action = component.find(Snackbar).prop('action');
-        action.props.onClick();
-        expect(onClose).toHaveBeenCalledTimes(2);
+        setUp({ error: 'Some error' });
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+        expect(screen.getByText('Some error')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
     });
+    it('onClose handler work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClose = jest.fn();
+                    user = setUp({ error: 'Some error', onClose: onClose }).user;
+                    expect(onClose).toHaveBeenCalledTimes(0);
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Close' }))];
+                case 1:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, user.click(screen.getByRole('presentation').parentElement)];
+                case 2:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalledTimes(2);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/UploadImageDialog/components/ImageByUrlField/ImageByUrlField.js

@@ -33,5 +33,5 @@ export var ImageByUrlField = function (_a) {
         React.createElement(Paper, { className: styles.paper },
             React.createElement(InputBase, { value: value, onChange: handleChange, classes: { root: styles.inputRoot, input: styles.input }, placeholder: i18n.text('Paste an image URL here') }),
             React.createElement(Button, { disabled: Boolean(error) || isEmptyField(value), variant: "outlined", color: "primary", onClick: handleSend }, i18n.text('Send'))),
-        error && React.createElement(Typography, { className: styles.errorMessage }, error)));
+        error && (React.createElement(Typography, { "data-reltio-id": "url-error-message", className: styles.errorMessage }, error))));
 };

package/UploadImageDialog/components/ImageByUrlField/ImageByUrlField.test.js

@@ -1,59 +1,172 @@
+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 { shallow } from 'enzyme';
-import InputBase from '@mui/material/InputBase';
-import Button from '@mui/material/Button';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ImageByUrlField } from './ImageByUrlField';
 describe('ImageByUrlField tests', function () {
-    var onSend;
+    var defaultProps = { onSend: jest.fn() };
     beforeEach(function () {
-        onSend = jest.fn();
+        jest.clearAllMocks();
     });
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(ImageByUrlField, __assign({}, defaultProps, props))));
+    };
     it('should not render error message if error is null', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        expect(component.find('.errorMessage')).toHaveLength(0);
-    });
-    it('should not render error message if value is correct', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase).simulate('change', { target: { value: 'https://reltio.com' } });
-        expect(component.find('.errorMessage')).toHaveLength(0);
-    });
-    it('should not render error message if value is empty string', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase).simulate('change', { target: { value: '' } });
-        expect(component.find('.errorMessage')).toHaveLength(0);
-    });
-    it('should render error message if value is not correct', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase).simulate('change', { target: { value: 'wrong url' } });
-        expect(component.find('.errorMessage').text()).toBe('URL is not correct');
-    });
-    it('should update input value', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        expect(component.find(InputBase).prop('value')).toBe('');
-        component.find(InputBase).simulate('change', { target: { value: 'value' } });
-        expect(component.find(InputBase).prop('value')).toBe('value');
+        setUp();
+        expect(screen.queryByTestId('url-error-message')).not.toBeInTheDocument();
     });
+    it('should not render error message if value is correct', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'https://reltio.com')];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByTestId('url-error-message')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not render error message if value is empty string', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.clear(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByTestId('url-error-message')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render error message if value is not correct', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'wrong url')];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByTestId('url-error-message')).toHaveTextContent('URL is not correct');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should update input value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'value')];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('textbox')).toHaveValue('value');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should disable Send button if value is empty string', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        expect(component.find(InputBase).prop('value')).toBe('');
-        expect(component.find(Button).prop('disabled')).toBe(true);
-    });
-    it('should disable Send button if value is incorrect url', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase).simulate('change', { target: { value: 'wrong url' } });
-        expect(component.find(Button).prop('disabled')).toBe(true);
-    });
-    it('should not disable Send button if value is correct url', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase).simulate('change', { target: { value: 'https://reltio.com' } });
-        expect(component.find(Button).prop('disabled')).toBe(false);
-    });
-    it('onSend handler should work correctly', function () {
-        var component = shallow(React.createElement(ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase).simulate('change', { target: { value: 'https://reltio.com' } });
-        expect(component.find(InputBase).prop('value')).toBe('https://reltio.com');
-        component.find(Button).simulate('click');
-        expect(onSend).toHaveBeenCalledWith('https://reltio.com');
-        expect(component.find(InputBase).prop('value')).toBe('');
+        setUp();
+        expect(screen.getByRole('textbox')).toHaveValue('');
+        expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     });
+    it('should disable Send button if value is incorrect url', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'wrong url')];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not disable Send button if value is correct url', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'https://reltio.com')];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('button', { name: 'Send' })).not.toBeDisabled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('onSend handler should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'https://reltio.com')];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Send' }))];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onSend).toHaveBeenCalledWith('https://reltio.com');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/ValueChip/ValueChip.test.js

@@ -1,34 +1,18 @@
 import React from 'react';
-import { shallow, ReactWrapper } from 'enzyme';
-import Chip from '@mui/material/Chip';
-import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
+import { render, screen } from '@testing-library/react';
 import { ValueChip } from './ValueChip';
 describe('ValueChip tests', function () {
     it('should render main parts', function () {
         var label = '123';
-        var component = shallow(React.createElement(ValueChip, { label: label }));
-        var chip = component.find(Chip);
-        expect(chip.length).toBe(1);
-        var chipLabel = new ReactWrapper(chip.prop('label'));
-        var valueTooltip = chipLabel.find(ExpandedValueTooltip);
-        expect(valueTooltip.length).toBe(1);
-        expect(valueTooltip.prop('value')).toBe(label);
-        expect(valueTooltip.text()).toBe(label);
-        expect(chipLabel.find('.count')).toHaveLength(0);
+        var container = render(React.createElement(ValueChip, { label: label })).container;
+        expect(screen.getByText('123')).toBeInTheDocument();
+        expect(container.querySelector('.count')).toBeNull();
     });
     it('should render main parts with count', function () {
         var label = '123';
         var count = '15K';
-        var component = shallow(React.createElement(ValueChip, { label: label, count: count }));
-        var chip = component.find(Chip);
-        expect(chip.length).toBe(1);
-        var chipLabel = new ReactWrapper(chip.prop('label'));
-        var valueTooltip = chipLabel.find(ExpandedValueTooltip);
-        expect(valueTooltip.length).toBe(1);
-        expect(valueTooltip.prop('value')).toBe(label);
-        expect(valueTooltip.text()).toBe(label);
-        var countComponent = chipLabel.find('.count');
-        expect(countComponent).toHaveLength(1);
-        expect(countComponent.text()).toBe(count);
+        render(React.createElement(ValueChip, { label: label, count: count }));
+        expect(screen.getByText('123')).toBeInTheDocument();
+        expect(screen.getByText('15K')).toHaveClass('count');
     });
 });

package/VirtualGroupedList/VirtualGroupedList.d.ts

@@ -1,32 +1,20 @@
-export function VirtualGroupedList({ items, getItemSize, renderItem, renderGroupTitle, width, height, fixedTitle, itemKey, disableHorizontalScrollbar, hideSubtitles, focusIndex, onInnerContainerResize }: {
-    items: any;
-    getItemSize: any;
-    renderItem: any;
-    renderGroupTitle: any;
-    width?: string;
-    height: any;
-    fixedTitle?: boolean;
-    itemKey?: (i: any) => any;
-    disableHorizontalScrollbar: any;
-    hideSubtitles: any;
-    focusIndex?: any;
-    onInnerContainerResize: any;
-}): React.JSX.Element;
-export namespace VirtualGroupedList {
-    namespace propTypes {
-        let items: PropTypes.Validator<object[]>;
-        let getItemSize: PropTypes.Validator<(...args: any[]) => any>;
-        let renderItem: PropTypes.Validator<(...args: any[]) => any>;
-        let width: PropTypes.Requireable<NonNullable<string | number>>;
-        let height: PropTypes.Validator<number>;
-        let renderGroupTitle: PropTypes.Requireable<(...args: any[]) => any>;
-        let fixedTitle: PropTypes.Requireable<boolean>;
-        let hideSubtitles: PropTypes.Requireable<boolean>;
-        let itemKey: PropTypes.Requireable<(...args: any[]) => any>;
-        let disableHorizontalScrollbar: PropTypes.Requireable<boolean>;
-        let focusIndex: PropTypes.Requireable<number>;
-        let onInnerContainerResize: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import { VariableSizeList as List } from 'react-window';
+import { OnResizeCallback } from 'react-resize-detector/build/types/types';
+import { VirtualGroupedListItem, VirtualGroupedListMainItem, VirtualGroupedListRenderGroupTitle, VirtualGroupedListRenderItem } from './types';
+type Props<T> = {
+    items: VirtualGroupedListMainItem<T>[];
+    getItemSize: (index: number, item: VirtualGroupedListItem<T>) => number;
+    renderItem: VirtualGroupedListRenderItem<T>;
+    renderGroupTitle?: VirtualGroupedListRenderGroupTitle<T>;
+    width?: string | number;
+    height: number;
+    fixedTitle?: boolean;
+    itemKey?: React.ComponentProps<typeof List>['itemKey'];
+    disableHorizontalScrollbar?: boolean;
+    hideSubtitles?: boolean;
+    focusIndex?: number;
+    onInnerContainerResize?: OnResizeCallback;
+};
+export declare const VirtualGroupedList: <Data>({ items, getItemSize, renderItem, renderGroupTitle, width, height, fixedTitle, itemKey, disableHorizontalScrollbar, hideSubtitles, focusIndex, onInnerContainerResize }: Props<Data>) => React.JSX.Element;
+export {};

package/VirtualGroupedList/VirtualGroupedList.js

@@ -8,27 +8,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useCallback, useEffect, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import { VariableSizeList as List } from 'react-window';
 import ReactResizeDetector from 'react-resize-detector';
 import { useScrollToFocusItem } from './useScrollToFocusItem';
 import { isTitleListItem } from './helpers';
 import { useStyles } from './styles';
-/*
-items = [
-    {
-        item: {
-            item: {},
-            level: number
-        },
-        titleItemIndex: number,
-        index: number,
-        moveTo: true|false,
-        items: [...]
-        ...
-    }
-]
-*/
 var OVERSCAN_COUNT = 5;
 export var VirtualGroupedList = function (_a) {
     var items = _a.items, getItemSize = _a.getItemSize, renderItem = _a.renderItem, renderGroupTitle = _a.renderGroupTitle, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, _c = _a.fixedTitle, fixedTitle = _c === void 0 ? true : _c, _d = _a.itemKey, itemKey = _d === void 0 ? function (i) { return i; } : _d, disableHorizontalScrollbar = _a.disableHorizontalScrollbar, hideSubtitles = _a.hideSubtitles, _e = _a.focusIndex, focusIndex = _e === void 0 ? null : _e, onInnerContainerResize = _a.onInnerContainerResize;
@@ -40,9 +24,12 @@ export var VirtualGroupedList = function (_a) {
     var stepCalcOffset = 10;
     var stickyItemClass = 'stickyTitleItem';
     var currentTitleParams = {
-        topMargin: 0
+        topMargin: 0,
+        index: undefined
+    };
+    var isGroupHasSubTitles = function (groupedItems) {
+        return (groupedItems || []).some(function (item) { return item.titleItemIndex !== null; });
     };
-    var isGroupHasSubTitles = function (groupedItems) { return (groupedItems || []).some(function (item) { return item.titleItemIndex !== null; }); };
     var hasSubTitles = useMemo(function () { return !hideSubtitles || isGroupHasSubTitles(items); }, [items, hideSubtitles]);
     var calcOffsetsToIndex = useCallback(function (index) {
         var curItemsLength = itemOffsets.current.length;
@@ -176,9 +163,11 @@ export var VirtualGroupedList = function (_a) {
     var render = useCallback(function (_a) {
         var index = _a.index, style = _a.style, data = _a.data;
         var listItem = getItemByIndex(index);
-        return (listItem.item &&
-            ((isTitleListItem(listItem) && renderGroupTitle(style, listItem.item)) ||
-                renderItem(style, listItem.item, index, data)));
+        if (!listItem.item)
+            return null;
+        return isTitleListItem(listItem)
+            ? renderGroupTitle(style, listItem.item)
+            : renderItem(style, listItem.item, index, data);
     }, [getItemByIndex, renderGroupTitle, renderItem]);
     var handleOnItemsRendered = useScrollToFocusItem({ items: items, focusIndex: focusIndex, listRef: listRef }).handleOnItemsRendered;
     var renderTitles = useCallback(function () {
@@ -186,21 +175,7 @@ export var VirtualGroupedList = function (_a) {
         return items.filter(function (listItem) { return isTitleListItem(listItem); }).map(function (listItem) { return renderTitle(listItem); });
     }, [getItemSize, items, renderGroupTitle]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: titlesRef, className: styles.stickyTitlesWrapper }, fixedTitle && renderTitles()),
+        React.createElement("div", { ref: titlesRef, "data-reltio-id": "grouped-list-sticky-titles", className: styles.stickyTitlesWrapper }, fixedTitle && renderTitles()),
         onInnerContainerResize && itemsRef.current && (React.createElement(ReactResizeDetector, { handleHeight: true, onResize: onInnerContainerResize, targetRef: itemsRef })),
         React.createElement(List, { ref: listRef, itemCount: items.length, itemSize: _getItemSize, width: width, height: height, itemKey: itemKey, innerRef: itemsRef, onScroll: onScroll, style: disableHorizontalScrollbar ? { overflowX: 'hidden' } : undefined, overscanCount: OVERSCAN_COUNT, onItemsRendered: handleOnItemsRendered }, render)));
 };
-VirtualGroupedList.propTypes = {
-    items: PropTypes.arrayOf(PropTypes.object).isRequired,
-    getItemSize: PropTypes.func.isRequired,
-    renderItem: PropTypes.func.isRequired,
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    height: PropTypes.number.isRequired,
-    renderGroupTitle: PropTypes.func,
-    fixedTitle: PropTypes.bool,
-    hideSubtitles: PropTypes.bool,
-    itemKey: PropTypes.func,
-    disableHorizontalScrollbar: PropTypes.bool,
-    focusIndex: PropTypes.number,
-    onInnerContainerResize: PropTypes.func
-};