@reltio/components 1.4.2071 → 1.4.2072

package/AttributesView/AttributesView.js

@@ -26,7 +26,7 @@ import { ReadOnlyAttributesView } from '../ReadOnlyAttributesView';
 import { EditModeAttributesView } from '../EditModeAttributesView';
 import { EntityContext } from '../contexts/EntityContext';
 import { useMdmEntityWithDiff, useMdmMode } from '../contexts/MdmModuleContext';
-import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 export var AttributesView = function (_a) {
     var attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, _b = _a.alwaysVisible, alwaysVisible = _b === void 0 ? [] : _b, restProps = __rest(_a, ["attributesCount", "pinnedAttributes", "alwaysVisible"]);
     var mdmEntity = useMdmEntityWithDiff();

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import { GroupedColumnsData } from '../../../types/basicTable';
+import { ListItem } from '../../types';
 type Props = {
     anchorEl: HTMLElement;
     onClose: () => void;
     title?: string;
     inputPlaceholder?: string;
     columnsData: GroupedColumnsData[];
-    onColumnClick: (column: {
-        id: string;
-    }) => void;
+    onColumnClick: (column: ListItem) => void;
     selectedColumns: string[];
     hideCheckBox?: boolean;
 };

package/ColumnsSettings/helpers.d.ts

@@ -1,6 +1,8 @@
 import { ColumnData, GroupedColumnsData } from '../types/basicTable';
+import { VirtualGroupedListItem } from '../VirtualGroupedList/types';
+import { ListItem } from './types';
 declare const isGroupColumn: (column: ColumnData) => boolean;
-declare const buildColumnItems: (columnsData: GroupedColumnsData[], filterText: string) => ColumnData[];
+declare const buildColumnItems: (columnsData: GroupedColumnsData[], filterText: string) => VirtualGroupedListItem<ListItem>[];
 declare const getChildColumns: (column: ColumnData) => ColumnData[];
 declare const isColumnSelected: (selectedColumns: string[], column: ColumnData) => boolean;
 export { buildColumnItems, getChildColumns, isGroupColumn, isColumnSelected };

package/ColumnsSettings/types.d.ts

@@ -0,0 +1,8 @@
+import { DataTypeDefinition } from '@reltio/mdm-sdk';
+export type ListItem = {
+    id: string;
+    label: string;
+    groupId?: string;
+    filterText?: string;
+    attrType?: DataTypeDefinition;
+};

package/CommentsContainer/CommentsContainer.js

@@ -53,7 +53,7 @@ export var CommentsContainer = function (_a) {
     var allRelatedObjectUris = useMemo(function () {
         return additionalRelatedObjectUris ? __spreadArray(__spreadArray([], relatedObjectUris, true), additionalRelatedObjectUris, true) : relatedObjectUris;
     }, [additionalRelatedObjectUris, relatedObjectUris]);
-    return (showComments && (React.createElement("div", { className: classnames(styles.root, className) },
+    return (showComments && (React.createElement("div", { "data-reltio-id": "comments-container", className: classnames(styles.root, className) },
         shouldShowAddCommentButton && (React.createElement(AddCommentButton, { className: classnames(styles.addButton, (_b = {},
                 _b[styles.showAlways] = showAlways || isOpenPopupWithNewComment,
                 _b)), onClick: handleClickAddCommentButton })),

package/ConfigureColumnsPopup/ConfigureColumnsPopup.d.ts

@@ -1,41 +1,24 @@
-export function ConfigureColumnsPopup({ open, anchorEl, data, onSearch, onClose, titleText, filterText, onListItemClick, selected, hideCheckBox, renderGroupTitle, ...otherProps }: {
-    [x: string]: any;
-    open: any;
-    anchorEl: any;
-    data: any;
-    onSearch: any;
-    onClose: any;
-    titleText: any;
-    filterText: any;
-    onListItemClick: any;
-    selected: any;
-    hideCheckBox: any;
-    renderGroupTitle: any;
-}): React.JSX.Element;
-export namespace ConfigureColumnsPopup {
-    namespace propTypes {
-        let open: PropTypes.Requireable<boolean>;
-        let hideCheckBox: PropTypes.Requireable<boolean>;
-        let anchorEl: PropTypes.Requireable<any>;
-        let selected: PropTypes.Requireable<any[]>;
-        let data: PropTypes.Requireable<any[]>;
-        let filterText: PropTypes.Requireable<string>;
-        let titleText: PropTypes.Requireable<string>;
-        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        let onListItemClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let onSearch: PropTypes.Requireable<(...args: any[]) => any>;
-        let renderGroupTitle: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        let data_1: any[];
-        export { data_1 as data };
-        let selected_1: any[];
-        export { selected_1 as selected };
-        let titleText_1: string;
-        export { titleText_1 as titleText };
-        let filterText_1: string;
-        export { filterText_1 as filterText };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import { SelectionPopup } from '../SelectionPopup';
+import { VirtualGroupedListRenderGroupTitle } from '../VirtualGroupedList';
+import { AttributeOption } from '../types';
+type Item = AttributeOption & {
+    id: string;
+    groupId: string;
+    filterText?: string;
+    notSelectable?: boolean;
+    LogoIcon?: React.ElementType;
+    children?: Item[];
+    attributes?: Item[];
+};
+type Props = Omit<React.ComponentProps<typeof SelectionPopup>, 'title'> & {
+    hideCheckBox: boolean;
+    titleText?: string;
+    filterText?: string;
+    selected: Item[];
+    data: Item[];
+    onListItemClick: (item: Item, checked: boolean) => void;
+    renderGroupTitle: VirtualGroupedListRenderGroupTitle<Item>;
+};
+export declare const ConfigureColumnsPopup: ({ open, anchorEl, data, onSearch, onClose, titleText, filterText, onListItemClick, selected, hideCheckBox, renderGroupTitle, ...otherProps }: Props) => React.JSX.Element;
+export {};

package/ConfigureColumnsPopup/ConfigureColumnsPopup.js

@@ -30,22 +30,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useCallback, useMemo, useRef } from 'react';
-import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { chain, curry, map } from 'ramda';
 import { getMaxItemWidth } from '@reltio/mdm-sdk';
+import { Highlighter } from '../Highlighter';
 import { SelectionPopup } from '../SelectionPopup';
+import { AttributeListItem } from '../AttributeListItem';
 import { VirtualGroupedList, flattenGroupedItemsData } from '../VirtualGroupedList';
 import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
-import { AttributeListItem } from '../AttributeListItem';
-import { Highlighter } from '../Highlighter';
 import { useStyles } from './styles';
 var ITEM_HEIGHT = 32;
 var LIST_CONTAINER_HEIGHT = 300;
 var DEFAULT_MIN_CONTAINER_WIDTH = 308;
 export var ConfigureColumnsPopup = function (_a) {
-    var open = _a.open, anchorEl = _a.anchorEl, data = _a.data, onSearch = _a.onSearch, onClose = _a.onClose, titleText = _a.titleText, filterText = _a.filterText, onListItemClick = _a.onListItemClick, selected = _a.selected, hideCheckBox = _a.hideCheckBox, renderGroupTitle = _a.renderGroupTitle, otherProps = __rest(_a, ["open", "anchorEl", "data", "onSearch", "onClose", "titleText", "filterText", "onListItemClick", "selected", "hideCheckBox", "renderGroupTitle"]);
+    var open = _a.open, anchorEl = _a.anchorEl, _b = _a.data, data = _b === void 0 ? [] : _b, onSearch = _a.onSearch, onClose = _a.onClose, _c = _a.titleText, titleText = _c === void 0 ? i18n.text('Show/hide columns') : _c, _d = _a.filterText, filterText = _d === void 0 ? '' : _d, onListItemClick = _a.onListItemClick, _e = _a.selected, selected = _e === void 0 ? [] : _e, hideCheckBox = _a.hideCheckBox, renderGroupTitle = _a.renderGroupTitle, otherProps = __rest(_a, ["open", "anchorEl", "data", "onSearch", "onClose", "titleText", "filterText", "onListItemClick", "selected", "hideCheckBox", "renderGroupTitle"]);
     var filterItem = useCallback(function (item) {
         return item.label.toLowerCase().includes(filterText.toLowerCase());
     }, [filterText]);
@@ -82,12 +81,12 @@ export var ConfigureColumnsPopup = function (_a) {
     }, [onListItemClick, selected]);
     var groupedItems = useMemo(function () { return (renderGroupTitle ? getGroupsData : getAttributesData)(data); }, [data, renderGroupTitle, getGroupsData, getAttributesData]);
     var items = useMemo(function () { return flattenGroupedItemsData(groupedItems); }, [groupedItems]);
-    var _b = useKeyboardNavigation({
+    var _f = useKeyboardNavigation({
         items: items,
         open: open,
         onSelectFocusedItem: handleSearchOnEnter,
         selectedItems: selected
-    }), focusIndex = _b.focusIndex, handleKeyDown = _b.handleKeyDown;
+    }), focusIndex = _f.focusIndex, handleKeyDown = _f.handleKeyDown;
     var focusIndexRef = useRef(null);
     focusIndexRef.current = focusIndex;
     var renderListItem = useCallback(function (style, _a, index) {
@@ -99,24 +98,5 @@ export var ConfigureColumnsPopup = function (_a) {
     var containerWidth = getMaxItemWidth('label')(groupedItems) || DEFAULT_MIN_CONTAINER_WIDTH;
     var classes = useStyles();
     return (React.createElement(SelectionPopup, __assign({ open: open, className: classnames(classes.container, classes.popupContainer), anchorEl: anchorEl, onClose: onClose, onSearch: onSearch, title: titleText, containerWidth: containerWidth, searchInputOnKeyDown: handleKeyDown }, otherProps),
-        React.createElement(VirtualGroupedList, { height: LIST_CONTAINER_HEIGHT, renderItem: renderListItem, items: items, hideSubtitles: true, getItemSize: getItemSize, containerWidth: containerWidth, focusIndex: focusIndex, renderGroupTitle: renderGroupTitle })));
-};
-ConfigureColumnsPopup.propTypes = {
-    open: PropTypes.bool,
-    hideCheckBox: PropTypes.bool,
-    anchorEl: PropTypes.any,
-    selected: PropTypes.array,
-    data: PropTypes.array,
-    filterText: PropTypes.string,
-    titleText: PropTypes.string,
-    onClose: PropTypes.func,
-    onListItemClick: PropTypes.func,
-    onSearch: PropTypes.func,
-    renderGroupTitle: PropTypes.func
-};
-ConfigureColumnsPopup.defaultProps = {
-    data: [],
-    selected: [],
-    titleText: i18n.text('Show/hide columns'),
-    filterText: ''
+        React.createElement(VirtualGroupedList, { height: LIST_CONTAINER_HEIGHT, renderItem: renderListItem, items: items, hideSubtitles: true, getItemSize: getItemSize, focusIndex: focusIndex, renderGroupTitle: renderGroupTitle })));
 };

package/EditModeAttributesList/EditModeAttributesList.js

@@ -25,7 +25,7 @@ import { withContext } from '../HOCs/withContext';
 import { ConfigPermissionsContext } from '../contexts/ConfigPermissionsContext';
 import { ScrollType, ScrollToElementContext } from '../contexts/ScrollToElementContext';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
-import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 var EditModeAttributesList = function (_a) {
     var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.fixedTypeUris, fixedTypeUris = _b === void 0 ? FIXED_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
     var hiddenAttributes = useContext(HiddenAttributesContext);

package/EditModeAttributesPager/EditModeAttributesPager.test.js

@@ -59,7 +59,7 @@ import React from 'react';
 import { mockResizeObserver } from 'jsdom-testing-mocks';
 import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { LocalizationProvider } from '@mui/x-date-pickers';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { DataTypes, EntityAttrTypes, ErrorSource, ErrorType, Mode } from '@reltio/mdm-sdk';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';

package/EditModeAttributesPager/components/AttributeRenderer/AttributeRenderer.js

@@ -11,7 +11,7 @@ import { ShowMore } from '../../../ShowMore';
 import { EditModeAttribute } from '../../../EditModeAttributesFactory';
 import { CardinalityMessage } from '../../../CardinalityMessage';
 import { PinnedAttributesContext } from '../../../contexts/PinnedAttributesContext';
-import { AlwaysVisibleAttributesContext } from '../../../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../../../contexts/AlwaysVisibleAttributesContext';
 import { DescriptionIcon } from '../../../DescriptionIcon';
 import { ControlAttributeIcon } from '../../../ControlAttributeIcon';
 import { useScrollToAttribute } from '../../../hooks/useScrollToAttribute';

package/MetadataTypesSelector/MetadataTypesSelector.d.ts

@@ -8,8 +8,9 @@ type Classes = {
     root?: string;
     label?: string;
 };
+type Item = TEntityType | TRelationType;
 type Props = {
-    items: (TEntityType | TRelationType)[];
+    items: Item[];
     selectedItemsUris: string[];
     onChange: (values: string[]) => void;
     label: string;

package/MetadataTypesSelector/components/SelectMetadataTypesList/SelectMetadataTypesList.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
 import { AttributeListItem } from '../../../AttributeListItem';
+import { VirtualGroupedListMainItem } from '../../../VirtualGroupedList';
 type AttributeListItemProps = React.ComponentPropsWithoutRef<typeof AttributeListItem>;
-type Item = {
-    item: {
-        item: TEntityType | TRelationType;
-    };
-    index: number;
+type Item = (TEntityType | TRelationType) & {
+    filterText?: string;
+    LogoIcon?: React.ComponentType;
 };
 type Props = {
     selectedItems: string[];
     onItemClick: AttributeListItemProps['onClick'];
     focusIndex: number;
-    items: Item[];
+    items: VirtualGroupedListMainItem<Item>[];
     width: number;
     height: number;
 };

package/MoreAttributesButton/useMoreAttributesItems.d.ts

@@ -14,7 +14,7 @@ export type GroupedItem = {
     items?: GroupedItem[];
 };
 export declare const useMoreAttributesItems: ({ data, parent, filter }: Props) => {
-    items: any;
+    items: import("../VirtualGroupedList").VirtualGroupedListMainItem<Item>[];
     hasGroups: boolean;
     parentGroupLength: number;
     attributesGroupLength: number;

package/ReadOnlyAttributesList/ReadOnlyAttributesList.js

@@ -19,7 +19,7 @@ import { ShowLess } from '../ShowLess';
 import { FIXED_TYPE_URIS } from '../constants';
 import { splitPagersData } from '../helpers/attributesView';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
-import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 var ReadOnlyAttributesList = function (_a) {
     var _b = _a.attrTypes, attrTypes = _b === void 0 ? [] : _b, entity = _a.entity, parentUri = _a.parentUri, drawLines = _a.drawLines, children = _a.children, className = _a.className, max = _a.max, _c = _a.fixedTypeUris, fixedTypeUris = _c === void 0 ? FIXED_TYPE_URIS : _c, showNonOv = _a.showNonOv, classes = _a.classes;
     var hiddenAttributes = useContext(HiddenAttributesContext);

package/ReadOnlyAttributesPager/ReadOnlyAttributesPager.js

@@ -20,7 +20,7 @@ import { SpecialRenderer } from './components/SpecialRenderer';
 import { ImageLineRenderer } from './components/ImageLineRenderer';
 import { EmptyRenderer } from './components/EmptyRenderer';
 import { useMdmAction, useMdmMaxValuesInResponse } from '../contexts/MdmModuleContext';
-import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 import { useStyles } from './styles';
 var RENDERER_TYPES = {
     oneLine: 'oneLine',

package/ReadOnlyAttributesView/ReadOnlyAttributesView.js

@@ -6,7 +6,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { PivotingAttributeContext } from '../contexts/PivotingAttributeContext';
 import { useMdmMetadata, useMdmPivotingAttributes } from '../contexts/MdmModuleContext';
-import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 import { BasicView } from '../BasicView';
 import { FacetViewHeader } from '../FacetViewHeader';
 import { ReadOnlyAttributesList } from '../ReadOnlyAttributesList';

package/ScrollableTabs/ScrollableTabs.test.js

@@ -9,13 +9,47 @@ 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 { mount, shallow } from 'enzyme';
 import { range } from 'ramda';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ScrollableTabs } from './ScrollableTabs';
-import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
 describe('ScrollableTabs', function () {
     var generateTabs = function (count, additionalLabel) {
         if (additionalLabel === void 0) { additionalLabel = false; }
@@ -26,23 +60,39 @@ describe('ScrollableTabs', function () {
         tabs: generateTabs(3),
         onChange: jest.fn()
     };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(ScrollableTabs, __assign({}, defaultProps, props))));
+    };
     it('should render main parts', function () {
-        var wrapper = mount(React.createElement(ScrollableTabs, __assign({}, defaultProps)));
-        expect(wrapper.find(Tabs)).toHaveLength(1);
-        expect(wrapper.find(Tabs).prop('value')).toBe(defaultProps.value);
-        expect(wrapper.find(Tab)).toHaveLength(3);
-        expect(wrapper.find(ExpandedValueTooltip)).toHaveLength(3);
+        setUp();
+        expect(screen.getByRole('tablist')).toBeInTheDocument();
+        var tabs = screen.getAllByRole('tab');
+        expect(tabs).toHaveLength(3);
+        expect(tabs[0]).toHaveTextContent('label0');
+        expect(tabs[1]).toHaveTextContent('label1');
+        expect(tabs[2]).toHaveTextContent('label2');
     });
     it('should render additional label', function () {
-        var additionalLabel = React.createElement("div", { className: "additionalLabel" });
-        var wrapper = mount(React.createElement(ScrollableTabs, __assign({}, defaultProps, { tabs: generateTabs(1, additionalLabel) })));
-        expect(wrapper.find('.additionalLabel')).toHaveLength(1);
-    });
-    it('should call prop onChange', function () {
-        var wrapper = shallow(React.createElement(ScrollableTabs, __assign({}, defaultProps)));
-        var event = {};
-        var value = 'value2';
-        wrapper.find(Tabs).prop('onChange')(event, value);
-        expect(defaultProps.onChange).toHaveBeenCalledWith(value);
+        var additionalLabel = React.createElement("div", { "data-reltio-id": "additional-label" });
+        setUp({ tabs: generateTabs(1, additionalLabel) });
+        var tab = screen.getByRole('tab');
+        expect(tab).toHaveTextContent('label0');
+        expect(within(tab).getByTestId('additional-label')).toBeInTheDocument();
     });
+    it('should call prop onChange', 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.click(screen.getByText('label2'))];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith('value2');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/SearchHighlighter/SearchHighlighter.test.js

@@ -1,16 +1,27 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { SearchValueContext } from '../contexts/SearchValueContext';
 import { SearchHighlighter } from './SearchHighlighter';
-import { Highlighter } from '../Highlighter';
 describe('SearchHighlighter test', function () {
     it('should render SearchHighlighter as well', function () {
         var highlightedValue = '1';
         var attributeValue = 'Attribute 1 Label';
-        var component = mount(React.createElement(SearchValueContext.Provider, { value: highlightedValue },
-            React.createElement(SearchHighlighter, { text: attributeValue })));
-        expect(component.find(Highlighter).prop('text')).toBe(attributeValue);
-        expect(component.find(Highlighter).prop('highlight')).toBe(highlightedValue);
-        expect(component.find(Highlighter).hasClass('highlightedText')).toBeTruthy();
+        var container = render(React.createElement(SearchValueContext.Provider, { value: highlightedValue },
+            React.createElement(SearchHighlighter, { text: attributeValue }))).container;
+        var highlightedText = screen.getByText(highlightedValue);
+        expect(highlightedText).toBeInTheDocument();
+        expect(highlightedText).toHaveClass('highlightedText');
+        expect(container).toHaveTextContent(attributeValue);
+    });
+    it('should work without SearchValueContext', function () {
+        render(React.createElement(SearchHighlighter, { text: 'Attribute text' }));
+        expect(screen.getByText('Attribute text')).toBeInTheDocument();
+    });
+    it('should work without highlighted value', function () {
+        var attributeValue = 'Attribute 1 Label';
+        var container = render(React.createElement(SearchValueContext.Provider, { value: undefined },
+            React.createElement(SearchHighlighter, { text: attributeValue }))).container;
+        expect(container).toHaveTextContent(attributeValue);
+        expect(container.querySelector('.highlightedText')).toBeNull();
     });
 });

package/SelectAttributesList/SelectAttributesList.d.ts

@@ -1,14 +1,19 @@
 import React from 'react';
-import { AttributeType } from '@reltio/mdm-sdk';
+import { VirtualGroupedList } from '../VirtualGroupedList';
 import { AttributeSelectorItem } from '../types';
-type Data = {
-    attrType?: AttributeType;
+type Data = AttributeSelectorItem & {
+    id: string;
+    label: string;
+    filterText?: string;
+    notSelectable?: boolean;
+    needGroupIcon?: boolean;
+    LogoIcon?: React.ElementType;
 };
-type Props = {
+type Props = Omit<React.ComponentProps<typeof VirtualGroupedList>, 'renderItem' | 'getItemSize'> & {
     selectedAttributes: AttributeSelectorItem[];
     focusIndex: number;
     hideCheckBox: boolean;
     onItemClick: (data: Data, checked: boolean, groupId: string) => void;
-} & Record<string, unknown>;
-declare const _default: React.MemoExoticComponent<({ selectedAttributes, onItemClick, focusIndex, hideCheckBox, ...otherProps }: Props) => React.JSX.Element>;
+};
+declare const _default: ({ selectedAttributes, onItemClick, focusIndex, hideCheckBox, ...otherProps }: Props) => React.JSX.Element;
 export default _default;

package/SelectAttributesList/SelectAttributesList.js

@@ -34,7 +34,9 @@ var ITEM_GROUP_TITLE_HEIGHT = 40;
 var SelectAttributesList = function (_a) {
     var selectedAttributes = _a.selectedAttributes, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, hideCheckBox = _a.hideCheckBox, otherProps = __rest(_a, ["selectedAttributes", "onItemClick", "focusIndex", "hideCheckBox"]);
     var metadata = useMdmMetadata();
-    var getItemSize = function (i, item) { return (item.items ? ITEM_GROUP_TITLE_HEIGHT : ITEM_HEIGHT); };
+    var getItemSize = function (i, item) {
+        return item.items ? ITEM_GROUP_TITLE_HEIGHT : ITEM_HEIGHT;
+    };
     var renderGroupTitle = function (style, item) { return (React.createElement(ListItem, { component: 'div', className: styles.subHeader, style: style, key: "group-".concat(item.item.id) },
         item.item.needGroupIcon && React.createElement(AttributeGroupIcon, { group: item.item, metadata: metadata }),
         React.createElement("div", { className: styles.subHeaderTitle }, item.item.title))); };
@@ -46,4 +48,5 @@ var SelectAttributesList = function (_a) {
     };
     return (React.createElement(VirtualGroupedList, __assign({ getItemSize: getItemSize, renderItem: renderItem, renderGroupTitle: renderGroupTitle, focusIndex: focusIndex }, otherProps)));
 };
-export default memo(SelectAttributesList);
+var typedMemo = memo;
+export default typedMemo(SelectAttributesList);