@reltio/components 1.4.2070 → 1.4.2072

package/VirtualGroupedList/VirtualGroupedList.test.js

@@ -0,0 +1,224 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import { VariableSizeList } from 'react-window';
+import * as useScrollToFocusItemImport from './useScrollToFocusItem';
+import { flattenGroupedItemsData } from './helpers';
+import { VirtualGroupedList } from './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 flattenGroupedItemsData(groupedItems);
+            case 'groupedWithMove': {
+                groupedItems[1].items[1].moveTo = true;
+                return flattenGroupedItemsData(groupedItems);
+            }
+            case 'newSimpleItems': {
+                return flattenGroupedItemsData(newSimpleItems);
+            }
+            case 'simple':
+            default:
+                return flattenGroupedItemsData(simpleItems);
+        }
+    };
+    var renderItem = function (style, _a) {
+        var item = _a.item;
+        return (React.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 render(React.createElement(VirtualGroupedList, __assign({}, defaultProps, props)));
+    };
+    afterEach(function () {
+        jest.restoreAllMocks();
+    });
+    it('should correct render simple items', function () {
+        setUp({ items: getItems('simple') });
+        expect(screen.getByText('Label 1')).toBeInTheDocument();
+        expect(screen.getByText('Label 2')).toBeInTheDocument();
+        expect(screen.getByText('Label 3')).toBeInTheDocument();
+    });
+    it('should correct render grouped items', function () {
+        setUp({ items: getItems('grouped') });
+        var stickyTitles = screen.getByTestId('grouped-list-sticky-titles');
+        expect(stickyTitles.childNodes).toHaveLength(2);
+        expect(within(stickyTitles).getByText('Label 1')).toHaveStyle('visibility: visible');
+        expect(within(stickyTitles).getByText('Label 2')).toHaveStyle('visibility: hidden');
+        var items = 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 = screen.getByTestId('grouped-list-sticky-titles');
+        Object.defineProperties(container.childNodes[1].firstChild, {
+            offsetWidth: {
+                get: function () {
+                    return 200;
+                }
+            }
+        });
+        rerender(React.createElement(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 = 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.createElement(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(VariableSizeList.prototype, 'scrollTo').mockImplementation(function () { return null; });
+            var rerender = setUp({ items: getItems('grouped'), height: 150 }).rerender;
+            rerender(React.createElement(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(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.createElement(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 = screen.getByTestId('grouped-list-sticky-titles');
+            var titles = within(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            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 = screen.getByTestId('grouped-list-sticky-titles');
+            var titles = within(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            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 = screen.getByTestId('grouped-list-sticky-titles');
+            var titles = within(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 210 } });
+            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 = screen.getByTestId('grouped-list-sticky-titles');
+            var titles = within(titlesContainer).getAllByTestId('grouped-list-item');
+            setHeightForNode(container.childNodes[1], 150, 400);
+            fireEvent.scroll(container.childNodes[1], { target: { scrollTop: 210 } });
+            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/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/VirtualGroupedList/helpers.js

@@ -12,4 +12,6 @@ export var flattenGroupedItemsData = function (groupedItems) {
     });
     return items;
 };
-export var isTitleListItem = function (listItem) { return listItem.titleItemIndex === listItem.index; };
+export var isTitleListItem = function (listItem) {
+    return listItem.titleItemIndex === listItem.index;
+};

package/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/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/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/WhiteSearchInput/{WhiteSearchInput.spec.js → WhiteSearchInput.test.js}

@@ -10,8 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { shallow } from 'enzyme';
-import { SearchInput } from '../SearchInput';
+import { render, screen } from '@testing-library/react';
 import { WhiteSearchInput } from './WhiteSearchInput';
 describe('WhiteSearchInput tests', function () {
     var defaultProps = {
@@ -21,11 +20,7 @@ describe('WhiteSearchInput tests', function () {
         height: 40
     };
     it('should render SearchInput with specified focused class', function () {
-        var component = shallow(React.createElement(WhiteSearchInput, __assign({}, defaultProps)));
-        var searchInput = component.find(SearchInput);
-        expect(searchInput).toHaveLength(1);
-        expect(searchInput.prop('classes')).toMatchObject({
-            focused: 'white'
-        });
+        render(React.createElement(WhiteSearchInput, __assign({}, defaultProps)));
+        expect(screen.getByRole('textbox').parentElement).toHaveClass('white');
     });
 });

package/cjs/AttributesView/AttributesView.js

@@ -32,7 +32,7 @@ var ReadOnlyAttributesView_1 = require("../ReadOnlyAttributesView");
 var EditModeAttributesView_1 = require("../EditModeAttributesView");
 var EntityContext_1 = require("../contexts/EntityContext");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
-var AllwaysVisibleAttributesContext_1 = require("../contexts/AllwaysVisibleAttributesContext");
+var AlwaysVisibleAttributesContext_1 = require("../contexts/AlwaysVisibleAttributesContext");
 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 = (0, MdmModuleContext_1.useMdmEntityWithDiff)();
@@ -40,6 +40,6 @@ var AttributesView = function (_a) {
     var entity = restProps.entity || mdmEntity;
     var mode = restProps.mode || mdmMode;
     return (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity },
-        react_1.default.createElement(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext.Provider, { value: alwaysVisible }, (0, mdm_sdk_1.isViewMode)(mode) ? (react_1.default.createElement(ReadOnlyAttributesView_1.ReadOnlyAttributesView, __assign({}, restProps, { attributesCount: attributesCount, entity: entity }))) : (react_1.default.createElement(EditModeAttributesView_1.EditModeAttributesView, __assign({}, restProps, { mode: mode, pinnedAttributes: pinnedAttributes, entity: entity }))))));
+        react_1.default.createElement(AlwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext.Provider, { value: alwaysVisible }, (0, mdm_sdk_1.isViewMode)(mode) ? (react_1.default.createElement(ReadOnlyAttributesView_1.ReadOnlyAttributesView, __assign({}, restProps, { attributesCount: attributesCount, entity: entity }))) : (react_1.default.createElement(EditModeAttributesView_1.EditModeAttributesView, __assign({}, restProps, { mode: mode, pinnedAttributes: pinnedAttributes, entity: entity }))))));
 };
 exports.AttributesView = AttributesView;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/CommentsContainer/CommentsContainer.js

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

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

@@ -59,22 +59,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfigureColumnsPopup = void 0;
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Highlighter_1 = require("../Highlighter");
 var SelectionPopup_1 = require("../SelectionPopup");
+var AttributeListItem_1 = require("../AttributeListItem");
 var VirtualGroupedList_1 = require("../VirtualGroupedList");
 var useKeyboardNavigation_1 = require("../hooks/useKeyboardNavigation");
-var AttributeListItem_1 = require("../AttributeListItem");
-var Highlighter_1 = require("../Highlighter");
 var styles_1 = require("./styles");
 var ITEM_HEIGHT = 32;
 var LIST_CONTAINER_HEIGHT = 300;
 var DEFAULT_MIN_CONTAINER_WIDTH = 308;
 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 ? ui_i18n_1.default.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 = (0, react_1.useCallback)(function (item) {
         return item.label.toLowerCase().includes(filterText.toLowerCase());
     }, [filterText]);
@@ -111,12 +110,12 @@ var ConfigureColumnsPopup = function (_a) {
     }, [onListItemClick, selected]);
     var groupedItems = (0, react_1.useMemo)(function () { return (renderGroupTitle ? getGroupsData : getAttributesData)(data); }, [data, renderGroupTitle, getGroupsData, getAttributesData]);
     var items = (0, react_1.useMemo)(function () { return (0, VirtualGroupedList_1.flattenGroupedItemsData)(groupedItems); }, [groupedItems]);
-    var _b = (0, useKeyboardNavigation_1.useKeyboardNavigation)({
+    var _f = (0, useKeyboardNavigation_1.useKeyboardNavigation)({
         items: items,
         open: open,
         onSelectFocusedItem: handleSearchOnEnter,
         selectedItems: selected
-    }), focusIndex = _b.focusIndex, handleKeyDown = _b.handleKeyDown;
+    }), focusIndex = _f.focusIndex, handleKeyDown = _f.handleKeyDown;
     var focusIndexRef = (0, react_1.useRef)(null);
     focusIndexRef.current = focusIndex;
     var renderListItem = (0, react_1.useCallback)(function (style, _a, index) {
@@ -128,25 +127,6 @@ var ConfigureColumnsPopup = function (_a) {
     var containerWidth = (0, mdm_sdk_1.getMaxItemWidth)('label')(groupedItems) || DEFAULT_MIN_CONTAINER_WIDTH;
     var classes = (0, styles_1.useStyles)();
     return (react_1.default.createElement(SelectionPopup_1.SelectionPopup, __assign({ open: open, className: (0, classnames_1.default)(classes.container, classes.popupContainer), anchorEl: anchorEl, onClose: onClose, onSearch: onSearch, title: titleText, containerWidth: containerWidth, searchInputOnKeyDown: handleKeyDown }, otherProps),
-        react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, { height: LIST_CONTAINER_HEIGHT, renderItem: renderListItem, items: items, hideSubtitles: true, getItemSize: getItemSize, containerWidth: containerWidth, focusIndex: focusIndex, renderGroupTitle: renderGroupTitle })));
+        react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, { height: LIST_CONTAINER_HEIGHT, renderItem: renderListItem, items: items, hideSubtitles: true, getItemSize: getItemSize, focusIndex: focusIndex, renderGroupTitle: renderGroupTitle })));
 };
 exports.ConfigureColumnsPopup = ConfigureColumnsPopup;
-exports.ConfigureColumnsPopup.propTypes = {
-    open: prop_types_1.default.bool,
-    hideCheckBox: prop_types_1.default.bool,
-    anchorEl: prop_types_1.default.any,
-    selected: prop_types_1.default.array,
-    data: prop_types_1.default.array,
-    filterText: prop_types_1.default.string,
-    titleText: prop_types_1.default.string,
-    onClose: prop_types_1.default.func,
-    onListItemClick: prop_types_1.default.func,
-    onSearch: prop_types_1.default.func,
-    renderGroupTitle: prop_types_1.default.func
-};
-exports.ConfigureColumnsPopup.defaultProps = {
-    data: [],
-    selected: [],
-    titleText: ui_i18n_1.default.text('Show/hide columns'),
-    filterText: ''
-};

package/cjs/EditModeAttributesList/EditModeAttributesList.js

@@ -53,13 +53,13 @@ var withContext_1 = require("../HOCs/withContext");
 var ConfigPermissionsContext_1 = require("../contexts/ConfigPermissionsContext");
 var ScrollToElementContext_1 = require("../contexts/ScrollToElementContext");
 var HiddenAttributesContext_1 = require("../contexts/HiddenAttributesContext");
-var AllwaysVisibleAttributesContext_1 = require("../contexts/AllwaysVisibleAttributesContext");
+var AlwaysVisibleAttributesContext_1 = require("../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 ? constants_1.FIXED_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
     var hiddenAttributes = (0, react_1.useContext)(HiddenAttributesContext_1.HiddenAttributesContext);
     var entityUri = parentUri && (0, mdm_sdk_1.getBaseUri)(parentUri);
     var currentEntityHiddenAttributes = (0, react_1.useMemo)(function () { return hiddenAttributes[entityUri] || []; }, [hiddenAttributes, entityUri]);
-    var alwaysVisibleAttributes = (0, react_1.useContext)(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
+    var alwaysVisibleAttributes = (0, react_1.useContext)(AlwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
     var filteredAttrTypes = (0, react_1.useMemo)(function () { return attrTypes.filter(function (attrType) { return !currentEntityHiddenAttributes.includes(attrType.uri); }); }, [attrTypes, currentEntityHiddenAttributes]);
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var _d = (0, react_1.useState)({}), hasDeletionsMap = _d[0], setHasDeletionsMap = _d[1];

package/cjs/EditModeAttributesPager/EditModeAttributesPager.test.js

@@ -64,7 +64,7 @@ var react_1 = __importDefault(require("react"));
 var jsdom_testing_mocks_1 = require("jsdom-testing-mocks");
 var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
-var x_date_pickers_1 = require("@mui/x-date-pickers");
+var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
 var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
@@ -114,7 +114,7 @@ var setUp = function (_a) {
     var Providers = function (_a) {
         var children = _a.children;
         return (react_1.default.createElement(CustomProviders, null,
-            react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+            react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
                 react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
                     react_1.default.createElement(HiddenAttributesContext_1.HiddenAttributesContext.Provider, { value: hiddenAttributesContextValue },
                         react_1.default.createElement(PinnedAttributesContext_1.PinnedAttributesContext.Provider, { value: pinnedAttributesContextValue },

package/cjs/EditModeAttributesPager/components/AttributeRenderer/AttributeRenderer.js

@@ -39,7 +39,7 @@ var ShowMore_1 = require("../../../ShowMore");
 var EditModeAttributesFactory_1 = require("../../../EditModeAttributesFactory");
 var CardinalityMessage_1 = require("../../../CardinalityMessage");
 var PinnedAttributesContext_1 = require("../../../contexts/PinnedAttributesContext");
-var AllwaysVisibleAttributesContext_1 = require("../../../contexts/AllwaysVisibleAttributesContext");
+var AlwaysVisibleAttributesContext_1 = require("../../../contexts/AlwaysVisibleAttributesContext");
 var DescriptionIcon_1 = require("../../../DescriptionIcon");
 var ControlAttributeIcon_1 = require("../../../ControlAttributeIcon");
 var useScrollToAttribute_1 = require("../../../hooks/useScrollToAttribute");
@@ -57,7 +57,7 @@ var AttributeRenderer = function (_a) {
     var _d = (0, useScrollToAttributeError_1.useScrollToAttributeError)({ highlightedError: highlightedError }), errorRef = _d.ref, errorClassName = _d.errorClassName;
     var _e = (0, useScrollToAttribute_1.useScrollToAttribute)(highlightedAttribute), attributeRef = _e.ref, highlightedClassName = _e.highlightedClassName;
     var pinnedAttributes = (0, react_1.useContext)(PinnedAttributesContext_1.PinnedAttributesContext);
-    var alwaysVisibleAttributes = (0, react_1.useContext)(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
+    var alwaysVisibleAttributes = (0, react_1.useContext)(AlwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
     var isPinned = (0, react_1.useMemo)(function () { return pinnedAttributes === null || pinnedAttributes === void 0 ? void 0 : pinnedAttributes.includes(attributeTypeUri); }, [attributeTypeUri, pinnedAttributes]);
     var isAlwaysVisible = (0, react_1.useMemo)(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeTypeUri); }, [attributeTypeUri, alwaysVisibleAttributes]);
     var isEmptyValues = (0, mdm_sdk_1.isEmptyValue)(values);

package/cjs/FacetViewHeader/FacetViewHeader.js

@@ -11,6 +11,6 @@ var styles_1 = require("./styles");
 var FacetViewHeader = function (_a) {
     var className = _a.className, title = _a.title, children = _a.children;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(BasicViewHeader_1.BasicViewHeader, { title: title, classes: { root: (0, classnames_1.default)(styles.container, className), title: styles.title } }, children));
+    return (react_1.default.createElement(BasicViewHeader_1.BasicViewHeader, { "data-reltio-id": "facet-view-header", title: title, classes: { root: (0, classnames_1.default)(styles.container, className), title: styles.title } }, children));
 };
 exports.FacetViewHeader = FacetViewHeader;

package/cjs/ImageAttributesLine/imageAttributeValues.test-data.js

@@ -49,6 +49,14 @@ exports.imageAttributeValues = [
                     value: '/test.jpg',
                     uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZv/CdnUrlThumbnail/39V5GWj9T'
                 }
+            ],
+            UrlPreview: [
+                {
+                    type: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/UrlPreview',
+                    ov: true,
+                    value: '/test.jpg',
+                    uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZv/UrlPreview/38Man0dAs'
+                }
             ]
         },
         ov: true,

package/cjs/ImageAttributesLine/index.d.ts

@@ -2,4 +2,4 @@ export { ImageAttributesLine } from './ImageAttributesLine';
 export type { RenderImage, ImageRenderProps } from './types';
 export { DEFAULT_IMAGE_SIZE } from './constants';
 export { downloadImagesByURLs } from './helpers';
-export { imageAttributeValues } from './imageAttributeValues.test-data';
+export { imageAttributeValues, attributeType } from './imageAttributeValues.test-data';

package/cjs/ImageAttributesLine/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageAttributeValues = exports.downloadImagesByURLs = exports.DEFAULT_IMAGE_SIZE = exports.ImageAttributesLine = void 0;
+exports.attributeType = exports.imageAttributeValues = exports.downloadImagesByURLs = exports.DEFAULT_IMAGE_SIZE = exports.ImageAttributesLine = void 0;
 var ImageAttributesLine_1 = require("./ImageAttributesLine");
 Object.defineProperty(exports, "ImageAttributesLine", { enumerable: true, get: function () { return ImageAttributesLine_1.ImageAttributesLine; } });
 var constants_1 = require("./constants");
@@ -9,3 +9,4 @@ var helpers_1 = require("./helpers");
 Object.defineProperty(exports, "downloadImagesByURLs", { enumerable: true, get: function () { return helpers_1.downloadImagesByURLs; } });
 var imageAttributeValues_test_data_1 = require("./imageAttributeValues.test-data");
 Object.defineProperty(exports, "imageAttributeValues", { enumerable: true, get: function () { return imageAttributeValues_test_data_1.imageAttributeValues; } });
+Object.defineProperty(exports, "attributeType", { enumerable: true, get: function () { return imageAttributeValues_test_data_1.attributeType; } });