@reltio/components 1.4.2119 → 1.4.2121

package/DataTypeValueEditor/useEditorContext.d.ts

@@ -1,15 +1,15 @@
-import { DataTypeDefinition } from '@reltio/mdm-sdk';
+import { DataTypeDefinition, Lookups } from '@reltio/mdm-sdk';
 export declare const useEditorContext: (fieldName: string, dataTypeDefinition: DataTypeDefinition) => {
-    lookups: import("@reltio/mdm-sdk").Lookups;
+    lookups: Lookups;
     lookupCode: string;
-    getLookups: () => any;
+    getLookups: () => Promise<void>;
     resolveLookups?: undefined;
     getSuggestions?: undefined;
     format?: undefined;
     tenant?: undefined;
     entries?: undefined;
 } | {
-    lookups: import("@reltio/mdm-sdk").Lookups;
+    lookups: Lookups;
     lookupCode: string;
     getLookups: ({ type, parents, displayNamePrefix, max, offset }: {
         type: any;

package/EditModeAttributesView/EditModeAttributesView.test.js

@@ -45,17 +45,26 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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 _a;
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, act, within } from '@testing-library/react';
 import { assocPath } from 'ramda';
-import { ErrorType, Mode, uploadImage } from '@reltio/mdm-sdk';
+import { ErrorType, Mode, uploadImage, getLookups } from '@reltio/mdm-sdk';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { ScrollToElementProvider } from '../contexts/ScrollToElementContext';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
 import { EditModeAttributesView } from './EditModeAttributesView';
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { uploadImage: jest.fn() })); });
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { uploadImage: jest.fn(), getLookups: jest.fn().mockResolvedValue({}) })); });
 var defaultEntity = {
     uri: 'entities/1E4APrQW',
     type: 'configuration/entityTypes/HCP'
@@ -121,7 +130,12 @@ var defaultMdmValues = {
     metadata: defaultMetadata,
     dependentLookups: { editors: {}, structure: {}, initedTypeUris: [] },
     profileErrors: [],
-    user: { roles: [] }
+    lookups: {},
+    user: { roles: [] },
+    tenant: {
+        id: 'tenant',
+        name: 'tenant'
+    }
 };
 var mdmActions = {
     addAttributes: jest.fn(),
@@ -360,5 +374,49 @@ describe('Edit mode attributes view tests', function () {
                 }
             });
         }); });
+        it('should request lookups if there are no dependent lookups and store already has some lookups', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var modifiedEntities, metadata, lookups, mdmValues;
+            var _a;
+            return __generator(this, function (_b) {
+                modifiedEntities = __assign(__assign({}, defaultModifiedEntities), (_a = {}, _a[defaultEntity.uri] = __assign(__assign({}, defaultEntity), { attributes: {
+                        CountryCode: [
+                            {
+                                uri: 'entities/1E4APrQW/attributes/CountryCode/uri1',
+                                value: 'Portugal',
+                                lookupCode: 'PT',
+                                type: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                            }
+                        ]
+                    } }), _a));
+                metadata = {
+                    uri: 'configuration',
+                    entityTypes: [
+                        {
+                            uri: 'configuration/entityTypes/HCP',
+                            attributes: __spreadArray(__spreadArray([], defaultMetadata.entityTypes[0].attributes, true), [
+                                {
+                                    label: 'Country',
+                                    name: 'CountryCode',
+                                    type: 'String',
+                                    uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                                    lookupCode: 'CountryCode'
+                                }
+                            ], false)
+                        }
+                    ]
+                };
+                lookups = {
+                    CountryCode: {
+                        PT: {
+                            displayName: 'Portugal'
+                        }
+                    }
+                };
+                mdmValues = __assign(__assign({}, defaultMdmValues), { metadata: metadata, modifiedEntities: modifiedEntities, lookups: lookups });
+                setUp({ mdmValues: mdmValues });
+                expect(getLookups).toHaveBeenCalled();
+                return [2 /*return*/];
+            });
+        }); });
     });
 });

package/LookupEditor/LookupEditor.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect } from 'react';
-import { always, defaultTo, isEmpty, map, path, pipe, pluck, prop, propEq } from 'ramda';
+import { always, defaultTo, map, path, pipe, pluck, prop, propEq } from 'ramda';
 import { GroupedDropDownEditor } from './components/GroupedDropDownEditor';
 import { buildLookupEntries } from './helpers';
 export var LookupEditor = function (_a) {
@@ -32,10 +32,10 @@ export var LookupEditor = function (_a) {
     }); };
     useEffect(function () {
         var _a;
-        if (isEmpty(lookups) && getLookups) {
+        if (getLookups) {
             (_a = getLookups()) === null || _a === void 0 ? void 0 : _a.catch(function () { });
         }
-    }, [lookups, getLookups]);
+    }, [getLookups]);
     var entries = buildLookupEntries(lookupTypeCode, lookups); // TODO: this code could be not valid if lookups are not loaded
     var commonProps = __assign(__assign({}, otherProps), { multiple: multiple, entries: entries });
     value = defaultTo(multiple ? [] : {}, value);

package/LookupEditor/LookupEditor.test.js

@@ -94,11 +94,6 @@ describe('LookupEditor', function () {
         setUp({ getLookups: getLookups, lookups: {} });
         expect(getLookups).toHaveBeenCalled();
     });
-    it('should not load lookups if lookups are available', function () {
-        var getLookups = jest.fn();
-        setUp({ getLookups: getLookups });
-        expect(getLookups).not.toHaveBeenCalled();
-    });
     describe('single mode', function () {
         it('should show lookup value as label if lookups do not contain specified lookupCode', function () {
             var value = { value: 'L3value', lookupCode: 'L3' };

package/TypeaheadEditor/TypeaheadEditor.js

@@ -199,7 +199,7 @@ export var TypeaheadEditor = function (_a) {
         }
     }, [multiple, onChange, value]);
     var handleKeyDown = useCallback(function (event) {
-        if (event.code !== 'Enter' || highlightedItem)
+        if (event.key !== 'Enter' || highlightedItem)
             return;
         if (multiple === true) {
             handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
@@ -209,9 +209,13 @@ export var TypeaheadEditor = function (_a) {
         }
     }, [handleInputValueChange, onChange, highlightedItem, inputValue, multiple]);
     var handleBlur = useCallback(function () {
-        if (multiple !== true)
+        if (multiple !== true) {
             onChange(inputValue);
-    }, [inputValue, onChange, multiple]);
+        }
+        else {
+            handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
+        }
+    }, [inputValue, onChange, multiple, handleInputValueChange]);
     useEffect(function () {
         var _a;
         if (multiple !== true)
@@ -224,7 +228,7 @@ export var TypeaheadEditor = function (_a) {
             container: fullWidth ? styles.suggestionsContainer : '',
             suggestionsList: styles.suggestionsList,
             suggestionsContainerOpen: styles.suggestionsContainerOpen
-        }, inputProps: __assign({ value: inputValue, onChange: pipe(nthArg(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'nope' }, inputProps), renderInputComponent: function (_a) {
+        }, inputProps: __assign({ value: inputValue, onChange: pipe(nthArg(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'off' }, inputProps), renderInputComponent: function (_a) {
             var _b, _c;
             var ref = _a.ref, otherProps = __rest(_a, ["ref"]);
             var commonClasses = {

package/TypeaheadEditor/TypeaheadEditor.test.js

@@ -421,6 +421,28 @@ describe('TypeaheadEditor', function () {
                 }
             });
         }); });
+        it('should add chip correctly on input blur', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var values, props, user, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        values = ['value 1', 'value 2'];
+                        props = __assign(__assign({}, defaultMultipleProps), { value: values });
+                        user = setUp(props).user;
+                        input = screen.getByRole('textbox');
+                        return [4 /*yield*/, user.type(input, 'value 3')];
+                    case 1:
+                        _a.sent();
+                        expect(input).toHaveAttribute('value', 'value 3');
+                        return [4 /*yield*/, user.tab()];
+                    case 2:
+                        _a.sent(); // simulating input blur
+                        expect(input).toHaveAttribute('value', '');
+                        expect(props.onChange).toHaveBeenCalledWith(['value 1', 'value 2', 'value 3']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
         it('should add chip correctly after select suggestion item using keyboard', function () { return __awaiter(void 0, void 0, void 0, function () {
             var values, props, user, input;
             return __generator(this, function (_a) {

package/cjs/DataTypeValueEditor/useEditorContext.d.ts

@@ -1,15 +1,15 @@
-import { DataTypeDefinition } from '@reltio/mdm-sdk';
+import { DataTypeDefinition, Lookups } from '@reltio/mdm-sdk';
 export declare const useEditorContext: (fieldName: string, dataTypeDefinition: DataTypeDefinition) => {
-    lookups: import("@reltio/mdm-sdk").Lookups;
+    lookups: Lookups;
     lookupCode: string;
-    getLookups: () => any;
+    getLookups: () => Promise<void>;
     resolveLookups?: undefined;
     getSuggestions?: undefined;
     format?: undefined;
     tenant?: undefined;
     entries?: undefined;
 } | {
-    lookups: import("@reltio/mdm-sdk").Lookups;
+    lookups: Lookups;
     lookupCode: string;
     getLookups: ({ type, parents, displayNamePrefix, max, offset }: {
         type: any;

package/cjs/EditModeAttributesView/EditModeAttributesView.test.js

@@ -46,6 +46,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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 };
 };
@@ -60,7 +69,7 @@ var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var ScrollToElementContext_1 = require("../contexts/ScrollToElementContext");
 var HiddenAttributesContext_1 = require("../contexts/HiddenAttributesContext");
 var EditModeAttributesView_1 = require("./EditModeAttributesView");
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { uploadImage: jest.fn() })); });
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { uploadImage: jest.fn(), getLookups: jest.fn().mockResolvedValue({}) })); });
 var defaultEntity = {
     uri: 'entities/1E4APrQW',
     type: 'configuration/entityTypes/HCP'
@@ -126,7 +135,12 @@ var defaultMdmValues = {
     metadata: defaultMetadata,
     dependentLookups: { editors: {}, structure: {}, initedTypeUris: [] },
     profileErrors: [],
-    user: { roles: [] }
+    lookups: {},
+    user: { roles: [] },
+    tenant: {
+        id: 'tenant',
+        name: 'tenant'
+    }
 };
 var mdmActions = {
     addAttributes: jest.fn(),
@@ -365,5 +379,49 @@ describe('Edit mode attributes view tests', function () {
                 }
             });
         }); });
+        it('should request lookups if there are no dependent lookups and store already has some lookups', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var modifiedEntities, metadata, lookups, mdmValues;
+            var _a;
+            return __generator(this, function (_b) {
+                modifiedEntities = __assign(__assign({}, defaultModifiedEntities), (_a = {}, _a[defaultEntity.uri] = __assign(__assign({}, defaultEntity), { attributes: {
+                        CountryCode: [
+                            {
+                                uri: 'entities/1E4APrQW/attributes/CountryCode/uri1',
+                                value: 'Portugal',
+                                lookupCode: 'PT',
+                                type: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                            }
+                        ]
+                    } }), _a));
+                metadata = {
+                    uri: 'configuration',
+                    entityTypes: [
+                        {
+                            uri: 'configuration/entityTypes/HCP',
+                            attributes: __spreadArray(__spreadArray([], defaultMetadata.entityTypes[0].attributes, true), [
+                                {
+                                    label: 'Country',
+                                    name: 'CountryCode',
+                                    type: 'String',
+                                    uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                                    lookupCode: 'CountryCode'
+                                }
+                            ], false)
+                        }
+                    ]
+                };
+                lookups = {
+                    CountryCode: {
+                        PT: {
+                            displayName: 'Portugal'
+                        }
+                    }
+                };
+                mdmValues = __assign(__assign({}, defaultMdmValues), { metadata: metadata, modifiedEntities: modifiedEntities, lookups: lookups });
+                setUp({ mdmValues: mdmValues });
+                expect(mdm_sdk_1.getLookups).toHaveBeenCalled();
+                return [2 /*return*/];
+            });
+        }); });
     });
 });

package/cjs/LookupEditor/LookupEditor.js

@@ -58,10 +58,10 @@ var LookupEditor = function (_a) {
     }); };
     (0, react_1.useEffect)(function () {
         var _a;
-        if ((0, ramda_1.isEmpty)(lookups) && getLookups) {
+        if (getLookups) {
             (_a = getLookups()) === null || _a === void 0 ? void 0 : _a.catch(function () { });
         }
-    }, [lookups, getLookups]);
+    }, [getLookups]);
     var entries = (0, helpers_1.buildLookupEntries)(lookupTypeCode, lookups); // TODO: this code could be not valid if lookups are not loaded
     var commonProps = __assign(__assign({}, otherProps), { multiple: multiple, entries: entries });
     value = (0, ramda_1.defaultTo)(multiple ? [] : {}, value);

package/cjs/LookupEditor/LookupEditor.test.js

@@ -99,11 +99,6 @@ describe('LookupEditor', function () {
         setUp({ getLookups: getLookups, lookups: {} });
         expect(getLookups).toHaveBeenCalled();
     });
-    it('should not load lookups if lookups are available', function () {
-        var getLookups = jest.fn();
-        setUp({ getLookups: getLookups });
-        expect(getLookups).not.toHaveBeenCalled();
-    });
     describe('single mode', function () {
         it('should show lookup value as label if lookups do not contain specified lookupCode', function () {
             var value = { value: 'L3value', lookupCode: 'L3' };

package/cjs/TypeaheadEditor/TypeaheadEditor.js

@@ -228,7 +228,7 @@ var TypeaheadEditor = function (_a) {
         }
     }, [multiple, onChange, value]);
     var handleKeyDown = (0, react_1.useCallback)(function (event) {
-        if (event.code !== 'Enter' || highlightedItem)
+        if (event.key !== 'Enter' || highlightedItem)
             return;
         if (multiple === true) {
             handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
@@ -238,9 +238,13 @@ var TypeaheadEditor = function (_a) {
         }
     }, [handleInputValueChange, onChange, highlightedItem, inputValue, multiple]);
     var handleBlur = (0, react_1.useCallback)(function () {
-        if (multiple !== true)
+        if (multiple !== true) {
             onChange(inputValue);
-    }, [inputValue, onChange, multiple]);
+        }
+        else {
+            handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
+        }
+    }, [inputValue, onChange, multiple, handleInputValueChange]);
     (0, react_1.useEffect)(function () {
         var _a;
         if (multiple !== true)
@@ -253,7 +257,7 @@ var TypeaheadEditor = function (_a) {
             container: fullWidth ? styles.suggestionsContainer : '',
             suggestionsList: styles.suggestionsList,
             suggestionsContainerOpen: styles.suggestionsContainerOpen
-        }, inputProps: __assign({ value: inputValue, onChange: (0, ramda_1.pipe)((0, ramda_1.nthArg)(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'nope' }, inputProps), renderInputComponent: function (_a) {
+        }, inputProps: __assign({ value: inputValue, onChange: (0, ramda_1.pipe)((0, ramda_1.nthArg)(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'off' }, inputProps), renderInputComponent: function (_a) {
             var _b, _c;
             var ref = _a.ref, otherProps = __rest(_a, ["ref"]);
             var commonClasses = {

package/cjs/TypeaheadEditor/TypeaheadEditor.test.js

@@ -426,6 +426,28 @@ describe('TypeaheadEditor', function () {
                 }
             });
         }); });
+        it('should add chip correctly on input blur', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var values, props, user, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        values = ['value 1', 'value 2'];
+                        props = __assign(__assign({}, defaultMultipleProps), { value: values });
+                        user = setUp(props).user;
+                        input = react_2.screen.getByRole('textbox');
+                        return [4 /*yield*/, user.type(input, 'value 3')];
+                    case 1:
+                        _a.sent();
+                        expect(input).toHaveAttribute('value', 'value 3');
+                        return [4 /*yield*/, user.tab()];
+                    case 2:
+                        _a.sent(); // simulating input blur
+                        expect(input).toHaveAttribute('value', '');
+                        expect(props.onChange).toHaveBeenCalledWith(['value 1', 'value 2', 'value 3']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
         it('should add chip correctly after select suggestion item using keyboard', function () { return __awaiter(void 0, void 0, void 0, function () {
             var values, props, user, input;
             return __generator(this, function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2119",
+  "version": "1.4.2121",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -11,7 +11,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1951",
+    "@reltio/mdm-sdk": "^1.4.1952",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",