@reltio/components 1.4.2071 → 1.4.2072

package/cjs/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/cjs/VirtualGroupedList/VirtualGroupedList.js

@@ -37,27 +37,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VirtualGroupedList = void 0;
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var react_window_1 = require("react-window");
 var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
 var useScrollToFocusItem_1 = require("./useScrollToFocusItem");
 var helpers_1 = require("./helpers");
 var styles_1 = require("./styles");
-/*
-items = [
-    {
-        item: {
-            item: {},
-            level: number
-        },
-        titleItemIndex: number,
-        index: number,
-        moveTo: true|false,
-        items: [...]
-        ...
-    }
-]
-*/
 var OVERSCAN_COUNT = 5;
 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;
@@ -69,9 +53,12 @@ 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 = (0, react_1.useMemo)(function () { return !hideSubtitles || isGroupHasSubTitles(items); }, [items, hideSubtitles]);
     var calcOffsetsToIndex = (0, react_1.useCallback)(function (index) {
         var curItemsLength = itemOffsets.current.length;
@@ -205,9 +192,11 @@ var VirtualGroupedList = function (_a) {
     var render = (0, react_1.useCallback)(function (_a) {
         var index = _a.index, style = _a.style, data = _a.data;
         var listItem = getItemByIndex(index);
-        return (listItem.item &&
-            (((0, helpers_1.isTitleListItem)(listItem) && renderGroupTitle(style, listItem.item)) ||
-                renderItem(style, listItem.item, index, data)));
+        if (!listItem.item)
+            return null;
+        return (0, helpers_1.isTitleListItem)(listItem)
+            ? renderGroupTitle(style, listItem.item)
+            : renderItem(style, listItem.item, index, data);
     }, [getItemByIndex, renderGroupTitle, renderItem]);
     var handleOnItemsRendered = (0, useScrollToFocusItem_1.useScrollToFocusItem)({ items: items, focusIndex: focusIndex, listRef: listRef }).handleOnItemsRendered;
     var renderTitles = (0, react_1.useCallback)(function () {
@@ -215,22 +204,8 @@ var VirtualGroupedList = function (_a) {
         return items.filter(function (listItem) { return (0, helpers_1.isTitleListItem)(listItem); }).map(function (listItem) { return renderTitle(listItem); });
     }, [getItemSize, items, renderGroupTitle]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { ref: titlesRef, className: styles.stickyTitlesWrapper }, fixedTitle && renderTitles()),
+        react_1.default.createElement("div", { ref: titlesRef, "data-reltio-id": "grouped-list-sticky-titles", className: styles.stickyTitlesWrapper }, fixedTitle && renderTitles()),
         onInnerContainerResize && itemsRef.current && (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: onInnerContainerResize, targetRef: itemsRef })),
         react_1.default.createElement(react_window_1.VariableSizeList, { 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)));
 };
 exports.VirtualGroupedList = VirtualGroupedList;
-exports.VirtualGroupedList.propTypes = {
-    items: prop_types_1.default.arrayOf(prop_types_1.default.object).isRequired,
-    getItemSize: prop_types_1.default.func.isRequired,
-    renderItem: prop_types_1.default.func.isRequired,
-    width: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-    height: prop_types_1.default.number.isRequired,
-    renderGroupTitle: prop_types_1.default.func,
-    fixedTitle: prop_types_1.default.bool,
-    hideSubtitles: prop_types_1.default.bool,
-    itemKey: prop_types_1.default.func,
-    disableHorizontalScrollbar: prop_types_1.default.bool,
-    focusIndex: prop_types_1.default.number,
-    onInnerContainerResize: prop_types_1.default.func
-};

package/cjs/VirtualGroupedList/VirtualGroupedList.test.js

@@ -0,0 +1,252 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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 react_2 = require("@testing-library/react");
+var react_window_1 = require("react-window");
+var useScrollToFocusItemImport = __importStar(require("./useScrollToFocusItem"));
+var helpers_1 = require("./helpers");
+var VirtualGroupedList_1 = require("./VirtualGroupedList");
+describe('VirtualGroupedList tests', function () {
+    var getItems = function (type) {
+        var simpleItems = [
+            { item: { label: 'Label 1', id: 'some_id1' } },
+            { item: { label: 'Label 2', id: 'some_id2' } },
+            { item: { label: 'Label 3', id: 'some_id3' } }
+        ];
+        var newSimpleItems = [{ item: { label: 'Label 1', id: 'some_id1' } }, { item: { label: 'Label 2', id: 'some_id2' } }];
+        var groupedItems = [
+            {
+                item: { label: 'Label 1', id: 'some_id1' },
+                items: [
+                    { item: { label: 'Label 1.1', id: 'some_id1.1' } },
+                    { item: { label: 'Label 1.2', id: 'some_id1.2' } },
+                    { item: { label: 'Label 1.3', id: 'some_id1.3' } }
+                ]
+            },
+            {
+                item: { label: 'Label 2', id: 'some_id2' },
+                items: [
+                    { item: { label: 'Label 2.1', id: 'some_id2.1' } },
+                    { item: { label: 'Label 2.2', id: 'some_id2.2' }, moveTo: false }
+                ]
+            }
+        ];
+        switch (type) {
+            case 'grouped':
+                return (0, helpers_1.flattenGroupedItemsData)(groupedItems);
+            case 'groupedWithMove': {
+                groupedItems[1].items[1].moveTo = true;
+                return (0, helpers_1.flattenGroupedItemsData)(groupedItems);
+            }
+            case 'newSimpleItems': {
+                return (0, helpers_1.flattenGroupedItemsData)(newSimpleItems);
+            }
+            case 'simple':
+            default:
+                return (0, helpers_1.flattenGroupedItemsData)(simpleItems);
+        }
+    };
+    var renderItem = function (style, _a) {
+        var item = _a.item;
+        return (react_1.default.createElement("div", { style: style, "data-reltio-id": "grouped-list-item" }, item.label));
+    };
+    var defaultProps = {
+        getItemSize: function () { return 50; },
+        renderItem: renderItem,
+        renderGroupTitle: renderItem,
+        items: getItems('simple'),
+        height: 500
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        return (0, react_2.render)(react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, __assign({}, defaultProps, props)));
+    };
+    afterEach(function () {
+        jest.restoreAllMocks();
+    });
+    it('should correct render simple items', function () {
+        setUp({ items: getItems('simple') });
+        expect(react_2.screen.getByText('Label 1')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Label 2')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Label 3')).toBeInTheDocument();
+    });
+    it('should correct render grouped items', function () {
+        setUp({ items: getItems('grouped') });
+        var stickyTitles = react_2.screen.getByTestId('grouped-list-sticky-titles');
+        expect(stickyTitles.childNodes).toHaveLength(2);
+        expect((0, react_2.within)(stickyTitles).getByText('Label 1')).toHaveStyle('visibility: visible');
+        expect((0, react_2.within)(stickyTitles).getByText('Label 2')).toHaveStyle('visibility: hidden');
+        var items = react_2.screen.getAllByTestId('grouped-list-item');
+        expect(items).toHaveLength(9);
+        expect(items.map(function (item) { return item.textContent; })).toEqual([
+            'Label 1',
+            'Label 2',
+            'Label 1',
+            'Label 1.1',
+            'Label 1.2',
+            'Label 1.3',
+            'Label 2',
+            'Label 2.1',
+            'Label 2.2'
+        ]);
+    });
+    it('should set sticky titles width if items width changed', function () {
+        var _a = setUp({ items: getItems('grouped') }), container = _a.container, rerender = _a.rerender;
+        var stickyTitles = react_2.screen.getByTestId('grouped-list-sticky-titles');
+        Object.defineProperties(container.childNodes[1].firstChild, {
+            offsetWidth: {
+                get: function () {
+                    return 200;
+                }
+            }
+        });
+        rerender(react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, __assign({}, defaultProps, { items: getItems('grouped'), height: 100 })));
+        expect(stickyTitles).toHaveStyle('width: 200px');
+    });
+    it('should not render fixed group title when fixedTitle is false', function () {
+        setUp({ items: getItems('grouped'), fixedTitle: false });
+        var stickyTitles = react_2.screen.getByTestId('grouped-list-sticky-titles');
+        expect(stickyTitles.childNodes).toHaveLength(0);
+    });
+    it('should clear index when items is updated', function () {
+        var useScrollToFocusItemSpy = jest.spyOn(useScrollToFocusItemImport, 'useScrollToFocusItem');
+        var rerender = setUp({ items: getItems('simple') }).rerender;
+        var listRef = useScrollToFocusItemSpy.mock.calls[0][0].listRef;
+        var resetAfterIndexSpy = jest.spyOn(listRef.current, 'resetAfterIndex');
+        rerender(react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, __assign({}, defaultProps, { items: getItems('simple') })));
+        expect(resetAfterIndexSpy).toHaveBeenCalledWith(0);
+    });
+    describe('Scroll behavior', function () {
+        var setHeightForNode = function (node, height, scrollHeight) {
+            Object.defineProperties(node, {
+                clientHeight: {
+                    get: function () { return height; },
+                    configurable: true
+                },
+                scrollHeight: {
+                    get: function () { return scrollHeight; },
+                    configurable: true
+                }
+            });
+        };
+        /*
+            Some scroll offsets for grouped items(getItems('grouped')):
+            First title offset: 0
+            First title will be showing in offset range: 0-199
+            Second title offset: 200
+            Second title will be showing in offset range: 200+
+            Offset range when titles is touching each other: 150-200
+        */
+        it('should scroll to moveTo item', function () {
+            var requestAnimationFrameMock = jest
+                .spyOn(window, 'requestAnimationFrame')
+                .mockImplementation(function (callback) {
+                callback(0);
+                return 0;
+            });
+            var scrollToSpy = jest.spyOn(react_window_1.VariableSizeList.prototype, 'scrollTo').mockImplementation(function () { return null; });
+            var rerender = setUp({ items: getItems('grouped'), height: 150 }).rerender;
+            rerender(react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, __assign({}, defaultProps, { items: getItems('groupedWithMove'), height: 150 })));
+            expect(scrollToSpy).toHaveBeenCalledTimes(2);
+            expect(scrollToSpy).toHaveBeenCalledWith(200);
+            requestAnimationFrameMock.mockRestore();
+        });
+        it('should scroll to top of item', function () {
+            var scrollToSpy = jest.spyOn(react_window_1.VariableSizeList.prototype, 'scrollTo').mockImplementation(function () { return null; });
+            var rerender = setUp({ items: getItems('grouped'), height: 150 }).rerender;
+            var requestAnimationFrameMock = jest
+                .spyOn(window, 'requestAnimationFrame')
+                .mockImplementation(function (callback) {
+                callback(0);
+                return 0;
+            });
+            rerender(react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, __assign({}, defaultProps, { items: getItems('newSimpleItems'), height: 150 })));
+            expect(scrollToSpy).toHaveBeenCalledTimes(1);
+            expect(scrollToSpy).toHaveBeenCalledWith(0);
+            requestAnimationFrameMock.mockRestore();
+        });
+        it('should change fixed title on forward scroll', function () {
+            var container = setUp({ items: getItems('grouped'), height: 150 }).container;
+            var titlesContainer = react_2.screen.getByTestId('grouped-list-sticky-titles');
+            var titles = (0, react_2.within)(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            react_2.fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 210 } });
+            expect(titles).toHaveLength(2);
+            expect(titlesContainer).toHaveStyle('top: 0px');
+            expect(titles[0]).toHaveStyle('visibility: hidden');
+            expect(titles[1]).toHaveStyle('visibility: visible');
+        });
+        it('should move current fixed title on forward scroll when next title start touching the current title', function () {
+            var container = setUp({ items: getItems('grouped'), height: 150 }).container;
+            var titlesContainer = react_2.screen.getByTestId('grouped-list-sticky-titles');
+            var titles = (0, react_2.within)(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            react_2.fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 151 } });
+            expect(titles).toHaveLength(2);
+            expect(titlesContainer).toHaveStyle('top: -1px');
+            expect(titles[0]).toHaveStyle('visibility: visible');
+            expect(titles[1]).toHaveStyle('visibility: hidden');
+        });
+        it('should change fixed title on backward scroll', function () {
+            var container = setUp({ items: getItems('grouped'), height: 150 }).container;
+            var titlesContainer = react_2.screen.getByTestId('grouped-list-sticky-titles');
+            var titles = (0, react_2.within)(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            react_2.fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 210 } });
+            react_2.fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 140 } });
+            expect(titles).toHaveLength(2);
+            expect(titlesContainer).toHaveStyle('top: 0px');
+            expect(titles[0]).toHaveStyle('visibility: visible');
+            expect(titles[1]).toHaveStyle('visibility: hidden');
+        });
+        it('should move current fixed title on backward scroll when previous title start touching the current title', function () {
+            var container = setUp({ items: getItems('grouped'), height: 150 }).container;
+            var titlesContainer = react_2.screen.getByTestId('grouped-list-sticky-titles');
+            var titles = (0, react_2.within)(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            react_2.fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 210 } });
+            react_2.fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 199 } });
+            expect(titles).toHaveLength(2);
+            expect(titlesContainer).toHaveStyle('top: -49px');
+            expect(titles[0]).toHaveStyle('visibility: visible');
+            expect(titles[1]).toHaveStyle('visibility: hidden');
+        });
+    });
+});

package/cjs/VirtualGroupedList/helpers.d.ts

@@ -1,2 +1,7 @@
-export function flattenGroupedItemsData(groupedItems: any): any;
-export function isTitleListItem(listItem: any): boolean;
+import { VirtualGroupedListItem, VirtualGroupedListMainItem } from './types';
+export type GroupedItem<T> = {
+    item: T;
+    items?: GroupedItem<T>[];
+};
+export declare const flattenGroupedItemsData: <T>(groupedItems: VirtualGroupedListItem<T>[]) => VirtualGroupedListMainItem<T>[];
+export declare const isTitleListItem: <T>(listItem: VirtualGroupedListMainItem<T>) => boolean;

package/cjs/VirtualGroupedList/helpers.js

@@ -16,5 +16,7 @@ var flattenGroupedItemsData = function (groupedItems) {
     return items;
 };
 exports.flattenGroupedItemsData = flattenGroupedItemsData;
-var isTitleListItem = function (listItem) { return listItem.titleItemIndex === listItem.index; };
+var isTitleListItem = function (listItem) {
+    return listItem.titleItemIndex === listItem.index;
+};
 exports.isTitleListItem = isTitleListItem;

package/cjs/VirtualGroupedList/index.d.ts

@@ -1,3 +1,3 @@
 export { VirtualGroupedList } from './VirtualGroupedList';
-export type { VirtualListGroupedItem, VirtualListItem } from './types';
+export type { VirtualGroupedListItem, VirtualGroupedListMainItem, VirtualGroupedListRenderGroupTitle, VirtualGroupedListRenderItem } from './types';
 export { isTitleListItem, flattenGroupedItemsData } from './helpers';

package/cjs/VirtualGroupedList/types.d.ts

@@ -1,10 +1,14 @@
-export type VirtualListItem = {
-    item: Record<string, unknown>;
-    moveTo?: number;
+export type VirtualGroupedListItem<T, E = Record<string, unknown>> = E & {
+    item: T;
+    level?: number;
+    moveTo?: boolean;
+    items?: VirtualGroupedListItem<T, E>[];
 };
-export type VirtualListGroupedItem = {
-    item: VirtualListItem;
+export type VirtualGroupedListMainItem<T, E = Record<string, unknown>> = E & {
+    item: VirtualGroupedListItem<T, E>;
     titleItemIndex?: number;
     index: number;
-    items?: VirtualListGroupedItem[];
+    moveTo?: boolean;
 };
+export type VirtualGroupedListRenderItem<T, E = Record<string, unknown>> = (style: React.CSSProperties, item: VirtualGroupedListItem<T, E>, index: number, data: VirtualGroupedListMainItem<T, E>) => React.ReactElement;
+export type VirtualGroupedListRenderGroupTitle<T, E = Record<string, unknown>> = (style: React.CSSProperties, item: VirtualGroupedListItem<T, E>) => React.ReactElement;

package/cjs/VirtualGroupedList/useScrollToFocusItem.d.ts

@@ -1,7 +1,10 @@
-export declare const useScrollToFocusItem: ({ focusIndex, listRef, items }: {
-    focusIndex: any;
-    listRef: any;
-    items: any;
-}) => {
+import { VariableSizeList } from 'react-window';
+type Props<T> = {
+    focusIndex: number;
+    listRef: React.MutableRefObject<VariableSizeList>;
+    items: T[];
+};
+export declare const useScrollToFocusItem: <T>({ focusIndex, listRef, items }: Props<T>) => {
     handleOnItemsRendered: ({ visibleStartIndex, visibleStopIndex }: any) => void;
 };
+export {};

package/cjs/WhiteSearchInput/{WhiteSearchInput.spec.js → WhiteSearchInput.test.js}

@@ -15,8 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var SearchInput_1 = require("../SearchInput");
+var react_2 = require("@testing-library/react");
 var WhiteSearchInput_1 = require("./WhiteSearchInput");
 describe('WhiteSearchInput tests', function () {
     var defaultProps = {
@@ -26,11 +25,7 @@ describe('WhiteSearchInput tests', function () {
         height: 40
     };
     it('should render SearchInput with specified focused class', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(WhiteSearchInput_1.WhiteSearchInput, __assign({}, defaultProps)));
-        var searchInput = component.find(SearchInput_1.SearchInput);
-        expect(searchInput).toHaveLength(1);
-        expect(searchInput.prop('classes')).toMatchObject({
-            focused: 'white'
-        });
+        (0, react_2.render)(react_1.default.createElement(WhiteSearchInput_1.WhiteSearchInput, __assign({}, defaultProps)));
+        expect(react_2.screen.getByRole('textbox').parentElement).toHaveClass('white');
     });
 });