@reltio/components 1.4.1974 → 1.4.1976

package/cjs/MetadataTypesSelector/MetadataTypesSelector.js

@@ -49,6 +49,7 @@ var SmallIconButton_1 = require("../SmallIconButton");
 var SelectionPopup_1 = require("../SelectionPopup");
 var useKeyboardNavigation_1 = require("../hooks/useKeyboardNavigation");
 var SelectMetadataTypesList_1 = require("./components/SelectMetadataTypesList");
+var helpers_1 = require("./helpers");
 var styles_1 = require("./styles");
 var MIN_CONTAINER_WIDTH = 255;
 var LIST_HEIGHT = 245;
@@ -70,7 +71,7 @@ exports.MetadataTypesSelector = (0, react_1.memo)(function (_a) {
     })
         .map(function (item, index) { return ({ item: { item: __assign(__assign({}, item), { filterText: filterText }) }, index: index }); });
     var selectedLabels = (0, react_1.useMemo)(function () {
-        return (0, ramda_1.pipe)((0, ramda_1.map)(function (uri) { return items.find((0, ramda_1.propEq)('uri', uri)); }), (0, ramda_1.reject)(ramda_1.isNil), (0, ramda_1.pluck)('label'))(selectedItemsUris);
+        return (0, ramda_1.pipe)((0, ramda_1.map)(function (uri) { return items.find((0, ramda_1.propEq)('uri', uri)); }), (0, ramda_1.reject)(ramda_1.isNil), helpers_1.getItemLabels)(selectedItemsUris);
     }, [selectedItemsUris, items]);
     var handleListItemClick = (0, react_1.useCallback)(function (item, checked) {
         if (single) {

package/cjs/MetadataTypesSelector/MetadataTypesSelector.test.js

@@ -10,12 +10,59 @@ 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;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var enzyme_1 = require("enzyme");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var test_utils_1 = require("react-dom/test-utils");
 var TextField_1 = __importDefault(require("@mui/material/TextField"));
 var AttributeListItem_1 = require("../AttributeListItem");
@@ -42,6 +89,19 @@ var setUp = function (method, _a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.selectedItemsUris, selectedItemsUris = _c === void 0 ? [] : _c, _d = _b.onChange, onChange = _d === void 0 ? jest.fn() : _d, single = _b.single, placeholder = _b.placeholder, enableEmptyValueUnderline = _b.enableEmptyValueUnderline;
     return method(react_1.default.createElement(MetadataTypesSelector_1.MetadataTypesSelector, { items: items, selectedItemsUris: selectedItemsUris, onChange: onChange, single: single, placeholder: placeholder, enableEmptyValueUnderline: enableEmptyValueUnderline, label: "Entity Type", dataReltioId: "entity-type-selector", selectionPopupTitle: 'Select entity types' }));
 };
+var defaultProps = {
+    items: items,
+    selectedItemsUris: [],
+    onChange: jest.fn(),
+    label: 'Entity Type',
+    dataReltioId: 'entity-type-selector',
+    selectionPopupTitle: 'Select entity types'
+};
+var setUpRTL = function (props) {
+    if (props === void 0) { props = {}; }
+    var user = user_event_1.default.setup();
+    return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(MetadataTypesSelector_1.MetadataTypesSelector, __assign({}, defaultProps, props))));
+};
 describe('MetadataTypesSelector tests', function () {
     it('should render correctly', function () {
         var selectedItemsUris = ['configuration/entityTypes/HCP'];
@@ -170,4 +230,52 @@ describe('MetadataTypesSelector tests', function () {
         wrapper.find(SelectMetadataTypesList_1.SelectMetadataTypesList).prop('onItemClick')(items[0], false);
         expect(onChange).toHaveBeenCalledWith([]);
     });
+    describe('MetadataTypesSelector behavior with RTL', function () {
+        var originalRange = document.createRange;
+        beforeEach(function () {
+            document.createRange = function () {
+                var range = new Range();
+                range.getBoundingClientRect = jest.fn(function () {
+                    return { width: 0 };
+                });
+                return range;
+            };
+        });
+        afterEach(function () {
+            document.createRange = originalRange;
+        });
+        it('should not throw an error on clicking list item if entity does not have a label', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var itemWithoutLabel, selectedItemsUris, user, button, popover, blankListItem, checkbox;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        itemWithoutLabel = {
+                            uri: 'configuration/entityTypes/CompanyUri',
+                            attributes: []
+                        };
+                        selectedItemsUris = [itemWithoutLabel.uri];
+                        user = setUpRTL({ selectedItemsUris: selectedItemsUris, items: __spreadArray(__spreadArray([], items, true), [itemWithoutLabel], false) }).user;
+                        expect(react_2.screen.getAllByText('CompanyUri')[0]).toBeInTheDocument();
+                        button = react_2.screen.getByRole('button');
+                        return [4 /*yield*/, user.click(button)];
+                    case 1:
+                        _a.sent();
+                        popover = react_2.screen.getByRole('presentation');
+                        expect(popover).toBeInTheDocument();
+                        expect((0, react_2.within)(popover).getByText('Select entity types')).toBeInTheDocument();
+                        blankListItem = react_2.screen.getAllByRole('menuitem')[2];
+                        expect(blankListItem).toHaveTextContent('CompanyUri');
+                        checkbox = (0, react_2.within)(blankListItem).getByRole('checkbox');
+                        return [4 /*yield*/, user.click(checkbox)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('[Escape]')];
+                    case 3:
+                        _a.sent();
+                        expect(popover).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/cjs/MetadataTypesSelector/components/SelectMetadataTypesList/SelectMetadataTypesList.js

@@ -51,6 +51,7 @@ var ramda_1 = require("ramda");
 var AttributeListItem_1 = require("../../../AttributeListItem");
 var Highlighter_1 = require("../../../Highlighter");
 var VirtualGroupedList_1 = require("../../../VirtualGroupedList");
+var helpers_1 = require("../../helpers");
 var ITEM_HEIGHT = 32;
 var getItemSize = (0, ramda_1.always)(ITEM_HEIGHT);
 exports.SelectMetadataTypesList = (0, react_1.memo)(function (_a) {
@@ -59,7 +60,7 @@ exports.SelectMetadataTypesList = (0, react_1.memo)(function (_a) {
         var item = _a.item;
         var isSelected = !!selectedItems.find(function (uri) { return item.uri === uri; });
         var isFocused = index === focusIndex;
-        return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { key: item.uri, onClick: onItemClick, checked: isSelected, data: item, label: react_1.default.createElement(Highlighter_1.Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: true, LogoIcon: item.LogoIcon }));
+        return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { key: item.uri, onClick: onItemClick, checked: isSelected, data: item, label: react_1.default.createElement(Highlighter_1.Highlighter, { text: (0, helpers_1.getItemLabel)(item), highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: true, LogoIcon: item.LogoIcon }));
     };
     return (react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, __assign({ getItemSize: getItemSize, renderItem: renderItem, focusIndex: focusIndex, fixedTitle: false, disableHorizontalScrollbar: true, width: width, height: height }, otherProps)));
 });

package/cjs/MetadataTypesSelector/helpers.d.ts

@@ -0,0 +1,3 @@
+import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
+export declare const getItemLabels: (items: (TEntityType | TRelationType)[]) => any[];
+export declare const getItemLabel: (item: TEntityType | TRelationType) => any;

package/cjs/MetadataTypesSelector/helpers.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemLabel = exports.getItemLabels = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var getItemLabels = function (items) { return items.map(exports.getItemLabel); };
+exports.getItemLabels = getItemLabels;
+var getItemLabel = function (item) { return item.label || (0, mdm_sdk_1.getLastUriPart)(item.uri); };
+exports.getItemLabel = getItemLabel;

package/esm/MetadataTypesSelector/MetadataTypesSelector.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import React, { useRef, useState, useCallback, useMemo, memo } from 'react';
 import classnames from 'classnames';
-import { isNil, map, pipe, pluck, propEq, reject } from 'ramda';
+import { isNil, map, pipe, propEq, reject } from 'ramda';
 import { utils } from '@reltio/mdm-sdk';
 import TextField from '@mui/material/TextField';
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
@@ -20,6 +20,7 @@ import { SmallIconButton } from '../SmallIconButton';
 import { SelectionPopup } from '../SelectionPopup';
 import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
 import { SelectMetadataTypesList } from './components/SelectMetadataTypesList';
+import { getItemLabels } from './helpers';
 import { useStyles } from './styles';
 var MIN_CONTAINER_WIDTH = 255;
 var LIST_HEIGHT = 245;
@@ -41,7 +42,7 @@ export var MetadataTypesSelector = memo(function (_a) {
     })
         .map(function (item, index) { return ({ item: { item: __assign(__assign({}, item), { filterText: filterText }) }, index: index }); });
     var selectedLabels = useMemo(function () {
-        return pipe(map(function (uri) { return items.find(propEq('uri', uri)); }), reject(isNil), pluck('label'))(selectedItemsUris);
+        return pipe(map(function (uri) { return items.find(propEq('uri', uri)); }), reject(isNil), getItemLabels)(selectedItemsUris);
     }, [selectedItemsUris, items]);
     var handleListItemClick = useCallback(function (item, checked) {
         if (single) {

package/esm/MetadataTypesSelector/MetadataTypesSelector.test.js

@@ -9,8 +9,55 @@ 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;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import { screen, render, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
 import TextField from '@mui/material/TextField';
 import { AttributeListItem } from '../AttributeListItem';
@@ -37,6 +84,19 @@ var setUp = function (method, _a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.selectedItemsUris, selectedItemsUris = _c === void 0 ? [] : _c, _d = _b.onChange, onChange = _d === void 0 ? jest.fn() : _d, single = _b.single, placeholder = _b.placeholder, enableEmptyValueUnderline = _b.enableEmptyValueUnderline;
     return method(React.createElement(MetadataTypesSelector, { items: items, selectedItemsUris: selectedItemsUris, onChange: onChange, single: single, placeholder: placeholder, enableEmptyValueUnderline: enableEmptyValueUnderline, label: "Entity Type", dataReltioId: "entity-type-selector", selectionPopupTitle: 'Select entity types' }));
 };
+var defaultProps = {
+    items: items,
+    selectedItemsUris: [],
+    onChange: jest.fn(),
+    label: 'Entity Type',
+    dataReltioId: 'entity-type-selector',
+    selectionPopupTitle: 'Select entity types'
+};
+var setUpRTL = function (props) {
+    if (props === void 0) { props = {}; }
+    var user = userEvent.setup();
+    return __assign({ user: user }, render(React.createElement(MetadataTypesSelector, __assign({}, defaultProps, props))));
+};
 describe('MetadataTypesSelector tests', function () {
     it('should render correctly', function () {
         var selectedItemsUris = ['configuration/entityTypes/HCP'];
@@ -165,4 +225,52 @@ describe('MetadataTypesSelector tests', function () {
         wrapper.find(SelectMetadataTypesList).prop('onItemClick')(items[0], false);
         expect(onChange).toHaveBeenCalledWith([]);
     });
+    describe('MetadataTypesSelector behavior with RTL', function () {
+        var originalRange = document.createRange;
+        beforeEach(function () {
+            document.createRange = function () {
+                var range = new Range();
+                range.getBoundingClientRect = jest.fn(function () {
+                    return { width: 0 };
+                });
+                return range;
+            };
+        });
+        afterEach(function () {
+            document.createRange = originalRange;
+        });
+        it('should not throw an error on clicking list item if entity does not have a label', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var itemWithoutLabel, selectedItemsUris, user, button, popover, blankListItem, checkbox;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        itemWithoutLabel = {
+                            uri: 'configuration/entityTypes/CompanyUri',
+                            attributes: []
+                        };
+                        selectedItemsUris = [itemWithoutLabel.uri];
+                        user = setUpRTL({ selectedItemsUris: selectedItemsUris, items: __spreadArray(__spreadArray([], items, true), [itemWithoutLabel], false) }).user;
+                        expect(screen.getAllByText('CompanyUri')[0]).toBeInTheDocument();
+                        button = screen.getByRole('button');
+                        return [4 /*yield*/, user.click(button)];
+                    case 1:
+                        _a.sent();
+                        popover = screen.getByRole('presentation');
+                        expect(popover).toBeInTheDocument();
+                        expect(within(popover).getByText('Select entity types')).toBeInTheDocument();
+                        blankListItem = screen.getAllByRole('menuitem')[2];
+                        expect(blankListItem).toHaveTextContent('CompanyUri');
+                        checkbox = within(blankListItem).getByRole('checkbox');
+                        return [4 /*yield*/, user.click(checkbox)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.keyboard('[Escape]')];
+                    case 3:
+                        _a.sent();
+                        expect(popover).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/esm/MetadataTypesSelector/components/SelectMetadataTypesList/SelectMetadataTypesList.js

@@ -25,6 +25,7 @@ import { always } from 'ramda';
 import { AttributeListItem } from '../../../AttributeListItem';
 import { Highlighter } from '../../../Highlighter';
 import { VirtualGroupedList } from '../../../VirtualGroupedList';
+import { getItemLabel } from '../../helpers';
 var ITEM_HEIGHT = 32;
 var getItemSize = always(ITEM_HEIGHT);
 export var SelectMetadataTypesList = memo(function (_a) {
@@ -33,7 +34,7 @@ export var SelectMetadataTypesList = memo(function (_a) {
         var item = _a.item;
         var isSelected = !!selectedItems.find(function (uri) { return item.uri === uri; });
         var isFocused = index === focusIndex;
-        return (React.createElement(AttributeListItem, { key: item.uri, onClick: onItemClick, checked: isSelected, data: item, label: React.createElement(Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: true, LogoIcon: item.LogoIcon }));
+        return (React.createElement(AttributeListItem, { key: item.uri, onClick: onItemClick, checked: isSelected, data: item, label: React.createElement(Highlighter, { text: getItemLabel(item), highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: true, LogoIcon: item.LogoIcon }));
     };
     return (React.createElement(VirtualGroupedList, __assign({ getItemSize: getItemSize, renderItem: renderItem, focusIndex: focusIndex, fixedTitle: false, disableHorizontalScrollbar: true, width: width, height: height }, otherProps)));
 });

package/esm/MetadataTypesSelector/helpers.d.ts

@@ -0,0 +1,3 @@
+import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
+export declare const getItemLabels: (items: (TEntityType | TRelationType)[]) => any[];
+export declare const getItemLabel: (item: TEntityType | TRelationType) => any;

package/esm/MetadataTypesSelector/helpers.js

@@ -0,0 +1,3 @@
+import { getLastUriPart } from '@reltio/mdm-sdk';
+export var getItemLabels = function (items) { return items.map(getItemLabel); };
+export var getItemLabel = function (item) { return item.label || getLastUriPart(item.uri); };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1974",
+  "version": "1.4.1976",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1876",
+    "@reltio/mdm-sdk": "^1.4.1877",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",