@reltio/components 1.4.1939 → 1.4.1941

package/cjs/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -16,10 +16,13 @@ type Props = {
     onTogglePopup?: (open: boolean) => void;
     isFiltersApplied?: boolean;
     dataReltioId?: string;
+    ButtonIcon?: React.ElementType;
     onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
     onClear?: () => void;
     onCancel?: () => void;
     onApply?: () => void;
+    popoverAnchorRef?: React.MutableRefObject<HTMLDivElement>;
+    title?: string;
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply, ButtonIcon, popoverAnchorRef, title }: Props) => JSX.Element>;
 export default _default;

package/cjs/AttributesFiltersButton/AttributesFiltersButton.js

@@ -39,11 +39,12 @@ var AttributesFiltersBuilder_1 = require("../AttributesFiltersBuilder");
 var ActionButtons_1 = require("./components/ActionButtons/");
 var styles_1 = require("./styles");
 var AttributesFiltersButton = function (_a) {
-    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply;
+    var _b;
+    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply, _c = _a.ButtonIcon, ButtonIcon = _c === void 0 ? FilterList_1.default : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title;
     var styles = (0, styles_1.useStyles)();
     var buttonRef = (0, react_1.useRef)();
-    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = (0, react_1.useState)([]), filters = _c[0], setFilters = _c[1];
+    var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = (0, react_1.useState)([]), filters = _e[0], setFilters = _e[1];
     var isFiltersApplied = isFiltersAppliedProp !== null && isFiltersAppliedProp !== void 0 ? isFiltersAppliedProp : !!(0, mdm_sdk_1.buildFilterQueryString)()(filtersProp);
     var buttonColor = isFiltersApplied ? 'primary' : 'inherit';
     var togglePopup = function () {
@@ -72,19 +73,19 @@ var AttributesFiltersButton = function (_a) {
     }, [onClear]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Button_1.default, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
-                root: styles.triggerButton,
+                root: (0, classnames_1.default)(styles.triggerButton, classes === null || classes === void 0 ? void 0 : classes.triggerButton),
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
-            react_1.default.createElement(FilterList_1.default, { color: buttonColor })),
-        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: (0, classnames_1.default)(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+            react_1.default.createElement(ButtonIcon, { color: buttonColor })),
+        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: (0, classnames_1.default)(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: (_b = popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) !== null && _b !== void 0 ? _b : buttonRef.current, onClose: togglePopup, anchorOrigin: {
                 vertical: 'bottom',
-                horizontal: 'right'
+                horizontal: (popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) ? 'left' : 'right'
             }, transformOrigin: {
                 vertical: 'top',
                 horizontal: 'left'
             } },
             react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('Filter')),
+                react_1.default.createElement(Typography_1.default, { variant: "h6" }, title !== null && title !== void 0 ? title : ui_i18n_1.default.text('Filter')),
                 react_1.default.createElement("div", { className: styles.filtersBuilderWrapper },
                     children,
                     react_1.default.createElement(AttributesFiltersBuilder_1.AttributesFiltersBuilder, { attributesTypesGroups: attributesTypesGroups, attributesTypesGroupFilter: attributesTypesGroupFilter, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),

package/cjs/AttributesFiltersButton/AttributesFiltersButton.test.js

@@ -247,4 +247,19 @@ describe('AttributesFiltersButton tests', function () {
             }
         });
     }); });
+    it('should use title if defined', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var title, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    title = 'TestTitle';
+                    user = setUp(__assign(__assign({}, defaultProps), { title: title })).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByText(title)).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/EditModeAttributesList/EditModeAttributesList.js

@@ -95,7 +95,7 @@ var EditModeAttributesList = function (_a) {
     }); }, [hasDeletionsMap, setHasDeletions]);
     return (react_1.default.createElement("div", { className: className },
         children && react_1.default.createElement(BranchDecorator_1.BranchDecorator, __assign({}, decoratorProps), children),
-        react_1.default.createElement(BranchDecorator_1.BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && (react_1.default.createElement(MoreAttributesButton_1.MoreAttributesButton, { label: ui_i18n_1.default.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
+        react_1.default.createElement(BranchDecorator_1.BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && mode !== mdm_sdk_1.Mode.Viewing && (react_1.default.createElement(MoreAttributesButton_1.MoreAttributesButton, { label: ui_i18n_1.default.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
         react_1.default.createElement(HasDeletionsContext_1.HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(alwaysVisiblePagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
             return (react_1.default.createElement(EditModeAttributesPager_1.EditModeAttributesPager, { key: "".concat(attrType.uri, "_").concat(parentUri), attributeType: attrType, drawLines: drawLines, values: values, paging: (0, ramda_1.path)(['paging', attrType.uri], attributes), parentUri: parentUri, showEmptyEditors: showEmptyEditors, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }));

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

@@ -190,4 +190,31 @@ describe('Attribute renderer tests', function () {
             }
         });
     }); });
+    it('should render correct if one of the values is masked', function () {
+        var values = [
+            {
+                ov: true,
+                type: 'configuration/entityTypes/HCP/attributes/PrescriberIndicator',
+                uri: 'entities/0XAnnkw/attributes/PrescriberIndicator/ESG66YW',
+                value: false
+            },
+            {
+                ov: true,
+                type: 'configuration/entityTypes/HCP/attributes/PrescriberIndicator',
+                uri: 'entities/0XAnnkw/attributes/PrescriberIndicator/ESG66YW',
+                value: true,
+                masked: true
+            }
+        ];
+        var props = __assign(__assign({}, defaultProps), { values: values });
+        setUp({ props: props });
+        var attributeValues = react_2.screen.getAllByTestId('reltio-attribute-value');
+        expect(attributeValues).toHaveLength(2);
+        expect((0, react_2.within)(attributeValues[0]).getAllByRole('checkbox')).toHaveLength(2);
+        expect((0, react_2.within)(attributeValues[0]).getByText('Yes')).toBeInTheDocument();
+        expect((0, react_2.within)(attributeValues[0]).getByText('No')).toBeInTheDocument();
+        expect((0, react_2.within)(attributeValues[1]).queryAllByRole('checkbox')).toHaveLength(0);
+        expect((0, react_2.within)(attributeValues[1]).getByText('Yes')).toBeInTheDocument();
+        expect((0, react_2.within)(attributeValues[1]).queryByText('No')).not.toBeInTheDocument();
+    });
 });

package/cjs/EditModeComplexAttribute/EditModeComplexAttribute.js

@@ -45,7 +45,7 @@ var useScrollToAttributeError_1 = require("../hooks/useScrollToAttributeError");
 var styles_1 = require("./styles");
 var EditModeComplexAttribute = function (_a) {
     var _b;
-    var label = _a.label, attributeTypesList = _a.attributeTypesList, attributeType = _a.attributeType, attributeValue = _a.attributeValue, children = _a.children, errors = _a.errors, ownError = _a.ownError, mode = _a.mode, metadata = _a.metadata, crosswalks = _a.crosswalks, lazy = _a.lazy, showEmptyEditors = _a.showEmptyEditors, onAddOneMore = _a.onAddOneMore, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, hideDeleteButton = _a.hideDeleteButton, state = _a.state, showNonOv = _a.showNonOv, isHighlightedPath = _a.isHighlightedPath, highlightedError = _a.highlightedError, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c;
+    var label = _a.label, attributeTypesList = _a.attributeTypesList, attributeType = _a.attributeType, attributeValue = _a.attributeValue, children = _a.children, errors = _a.errors, ownError = _a.ownError, modeProp = _a.mode, metadata = _a.metadata, crosswalks = _a.crosswalks, lazy = _a.lazy, showEmptyEditors = _a.showEmptyEditors, onAddOneMore = _a.onAddOneMore, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, hideDeleteButton = _a.hideDeleteButton, state = _a.state, showNonOv = _a.showNonOv, isHighlightedPath = _a.isHighlightedPath, highlightedError = _a.highlightedError, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c;
     var styles = (0, styles_1.useStyles)();
     var deleted = state === 'deleted';
     var edited = state === 'edited';
@@ -54,6 +54,7 @@ var EditModeComplexAttribute = function (_a) {
     var defaultExpand = isNew || expandedProp;
     var _d = (0, react_1.useState)(defaultExpand), expanded = _d[0], setExpanded = _d[1];
     var _e = (0, useScrollToAttributeError_1.useScrollToAttributeError)({ highlightedError: highlightedError }), ref = _e.ref, errorClassName = _e.errorClassName;
+    var mode = attributeValue.masked ? mdm_sdk_1.Mode.Viewing : modeProp;
     (0, react_1.useEffect)(function () {
         if (isHighlightedPath) {
             setExpanded(true);
@@ -73,7 +74,12 @@ var EditModeComplexAttribute = function (_a) {
                 isReltioCrosswalk: (0, mdm_sdk_1.isReltioCrosswalk)(crosswalks, attributeValue)
             });
     }, [attributeType, attributeValue, mode, metadata, crosswalks, configCanDelete]);
-    var showDeleteButton = !deleted && !hideDeleteButton && !!onDeleteAttribute && canDelete;
+    var showDeleteButton = !deleted &&
+        !hideDeleteButton &&
+        !!onDeleteAttribute &&
+        canDelete &&
+        !attributeValue.masked &&
+        mode !== mdm_sdk_1.Mode.Viewing;
     var onDeleteThis = function () { return onDeleteAttribute({ uri: uri, attributeType: attributeType, attributeValue: attributeValue }); };
     var hasDescendantsWithErrors = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.hasAttributeDescendantsWithErrors)(attributeValue, errors); }, [errors, attributeValue]);
     (0, react_1.useEffect)(function () {

package/cjs/EntitySelector/EntitySelector.d.ts

@@ -17,6 +17,7 @@ type Props = {
     className?: string;
     height?: number;
     isDisabled?: boolean;
+    isMasked?: boolean;
 };
-export declare const EntitySelector: ({ entity, entityTypesUris, mode, max, onChange, onCreate, metadata, globalSearchRequestOptions, attributeTypesSelectionStrategy, disableLinkClick, ...otherProps }: Props) => JSX.Element;
+export declare const EntitySelector: ({ entity, entityTypesUris, mode, max, onChange, onCreate, metadata, globalSearchRequestOptions, attributeTypesSelectionStrategy, disableLinkClick, isMasked, ...otherProps }: Props) => JSX.Element;
 export {};

package/cjs/EntitySelector/EntitySelector.js

@@ -64,11 +64,11 @@ var helpers_1 = require("./helpers");
 var styles_1 = require("./styles");
 var DEFAULT_MAX_TYPEAHEAD_SEARCH_OPTION = 20;
 var EntitySelector = function (_a) {
-    var _b = _a.entity, entity = _b === void 0 ? {} : _b, _c = _a.entityTypesUris, entityTypesUris = _c === void 0 ? [] : _c, mode = _a.mode, _d = _a.max, max = _d === void 0 ? DEFAULT_MAX_TYPEAHEAD_SEARCH_OPTION : _d, onChange = _a.onChange, onCreate = _a.onCreate, metadata = _a.metadata, globalSearchRequestOptions = _a.globalSearchRequestOptions, attributeTypesSelectionStrategy = _a.attributeTypesSelectionStrategy, _e = _a.disableLinkClick, disableLinkClick = _e === void 0 ? false : _e, otherProps = __rest(_a, ["entity", "entityTypesUris", "mode", "max", "onChange", "onCreate", "metadata", "globalSearchRequestOptions", "attributeTypesSelectionStrategy", "disableLinkClick"]);
+    var _b = _a.entity, entity = _b === void 0 ? {} : _b, _c = _a.entityTypesUris, entityTypesUris = _c === void 0 ? [] : _c, mode = _a.mode, _d = _a.max, max = _d === void 0 ? DEFAULT_MAX_TYPEAHEAD_SEARCH_OPTION : _d, onChange = _a.onChange, onCreate = _a.onCreate, metadata = _a.metadata, globalSearchRequestOptions = _a.globalSearchRequestOptions, attributeTypesSelectionStrategy = _a.attributeTypesSelectionStrategy, _e = _a.disableLinkClick, disableLinkClick = _e === void 0 ? false : _e, _f = _a.isMasked, isMasked = _f === void 0 ? false : _f, otherProps = __rest(_a, ["entity", "entityTypesUris", "mode", "max", "onChange", "onCreate", "metadata", "globalSearchRequestOptions", "attributeTypesSelectionStrategy", "disableLinkClick", "isMasked"]);
     var styles = (0, styles_1.useStyles)();
-    var _f = (0, react_1.useState)(''), inputValue = _f[0], setInputValue = _f[1];
+    var _g = (0, react_1.useState)(''), inputValue = _g[0], setInputValue = _g[1];
     var entityTypes = (0, react_1.useMemo)(function () { return entityTypesUris.map(function (type) { return (0, mdm_sdk_1.getEntityType)(metadata, type); }).filter(mdm_sdk_1.isAvailableEntityType); }, [entityTypesUris, metadata]);
-    var options = __assign(__assign({}, globalSearchRequestOptions), { max: max });
+    var options = __assign(__assign({}, globalSearchRequestOptions), { max: max, sendMasked: isMasked });
     var handleCreate = onCreate
         ? function (value, entityTypeUri) {
             onCreate(entityTypeUri || entityTypesUris[0], value);

package/cjs/EntitySelector/EntitySelector.test.js

@@ -161,7 +161,7 @@ describe('EntitySelector', function () {
             .prop('getOptions')()
             .then(function () {
             var entityTypes = [metadata.entityTypes[0]];
-            var options = __assign(__assign({}, globalSearchRequestOptions), { max: 5 });
+            var options = __assign(__assign({}, globalSearchRequestOptions), { max: 5, sendMasked: false });
             expect(typeAheadSearchSpy).toHaveBeenCalledWith(entityTypes, undefined, options);
             done();
         });
@@ -179,7 +179,8 @@ describe('EntitySelector', function () {
             .then(function () {
             var entityTypes = [metadata.entityTypes[0]];
             var options = {
-                max: 20
+                max: 20,
+                sendMasked: false
             };
             expect(typeAheadSearchSpy).toHaveBeenCalledWith(entityTypes, undefined, options);
             done();

package/cjs/ReferenceAttributeEditor/ReferenceAttributeEditor.js

@@ -150,7 +150,7 @@ var ReferenceAttributeEditor = function (props) {
             react_1.default.createElement(ErrorWrapper_1.ErrorWrapper, { errorMessage: errorMessage },
                 react_1.default.createElement(EntitySelector_1.EntitySelector, { className: (0, classnames_1.default)(styles.item, (_a = {},
                         _a[styles.dense] = errorMessage || (selectedEntity && (0, mdm_sdk_1.isTempUri)(selectedEntity.entityUri)),
-                        _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, isDisabled: !canChangeReferencedEntity, onChange: onChangeEntity, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy })))));
+                        _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, isDisabled: !canChangeReferencedEntity || !!attributeValue.masked, onChange: onChangeEntity, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy, isMasked: (0, mdm_sdk_1.isAttributeHasMaskedValue)(attributeValue) })))));
 };
 exports.default = (0, withContext_1.withContext)(ScrollToElementContext_1.ScrollToElementContext, function (contextValue, _a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType;

package/cjs/RelationEditor/IntegrationRelationEditor.test.js

@@ -184,7 +184,8 @@ describe('RelationEditor behaviour', function () {
                     expect(mdm_sdk_1.typeAheadSearch).toBeCalledWith([{ label: 'Address', uri: 'configuration/entityTypes/Location' }], '', {
                         globalFilter: '',
                         max: 20,
-                        searchOptions: ''
+                        searchOptions: '',
+                        sendMasked: false
                     });
                     react_2.screen.getByText('Create new Address');
                     return [2 /*return*/];
@@ -280,4 +281,62 @@ describe('RelationEditor behaviour', function () {
             }
         });
     }); });
+    it('should add sendMasked option if connection entity has attribute with masked value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, inputs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { connection: {
+                            relation: defaultRelation,
+                            entity: {
+                                uri: 'entities/uri$$123',
+                                type: 'configuration/entityTypes/HCP',
+                                object: {
+                                    uri: 'entities/04B1CqH',
+                                    type: 'configuration/entityTypes/Location',
+                                    attributes: {
+                                        Address: [
+                                            {
+                                                label: 'AcOEvPaVqTfzZCE Josogaf VA',
+                                                relationshipLabel: '',
+                                                value: {
+                                                    AddressLine1: [
+                                                        {
+                                                            type: 'configuration/entityTypes/Location/attributes/AddressLine1',
+                                                            ov: true,
+                                                            value: 'AcOEvPaVqTfzZCE',
+                                                            uri: 'entities/04B1CqH/attributes/Address/03R51aT/AddressLine1/1XFBcmPYm'
+                                                        }
+                                                    ],
+                                                    AddressLine2: [
+                                                        {
+                                                            type: 'configuration/entityTypes/Location/attributes/AddressLine2',
+                                                            ov: true,
+                                                            masked: true,
+                                                            value: 'KBmiSMlqhElLHMH',
+                                                            uri: 'entities/04B1CqH/attributes/Address/03R51aT/AddressLine2/1XFBcmTp2'
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        } });
+                    user = setUp({ props: props }).user;
+                    inputs = react_2.screen.getAllByRole('textbox');
+                    return [4 /*yield*/, user.click(inputs[0])];
+                case 1:
+                    _a.sent();
+                    expect(mdm_sdk_1.typeAheadSearch).toBeCalledWith([{ label: 'Address', uri: 'configuration/entityTypes/Location' }], '', {
+                        globalFilter: '',
+                        max: 20,
+                        searchOptions: '',
+                        sendMasked: true
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/RelationEditor/RelationEditor.js

@@ -61,9 +61,10 @@ var areRelatedEntitiesChanged = function (initial, actual) {
 var emptyHiddenAttributes = {};
 var RelationEditor = function (_a) {
     var _b;
+    var _c, _d;
     var connection = _a.connection, config = _a.config, mode = _a.mode, metadata = _a.metadata, highlightedError = _a.highlightedError;
     var styles = (0, styles_1.useStyles)();
-    var _c = connection.relation, relationType = _c.relationType, direction = _c.direction;
+    var _e = connection.relation, relationType = _e.relationType, direction = _e.direction;
     var isNew = connection.isNew;
     var entityUri = (0, mdm_sdk_1.getEntityUriFromConnection)(connection);
     var relationUri = (0, mdm_sdk_1.getRelationUriFromConnection)(connection);
@@ -94,8 +95,8 @@ var RelationEditor = function (_a) {
     var allRelationEditorErrors = (0, mdm_sdk_1.getAllRelationEditorActiveErrors)(connection, profileErrors);
     var modifiedEntity = isTempEntity ? mdmModifiedEntity : null;
     var allModifiedEntities = isTempEntity ? mdmAllModifiedEntities : null;
-    var _d = (0, useScrollToAttributeError_1.useScrollToAttributeError)({ highlightedError: highlightedError, isSimple: true }), ref = _d.ref, errorClassName = _d.errorClassName;
-    var _e = (0, react_1.useMemo)(function () {
+    var _f = (0, useScrollToAttributeError_1.useScrollToAttributeError)({ highlightedError: highlightedError, isSimple: true }), ref = _f.ref, errorClassName = _f.errorClassName;
+    var _g = (0, react_1.useMemo)(function () {
         return (0, mdm_sdk_1.getInOutRelations)({
             content: connection.parentEntityUri
                 ? config.contentSecondLevel
@@ -105,7 +106,7 @@ var RelationEditor = function (_a) {
             mode: mode,
             metadata: metadata
         });
-    }, [config, direction, relationType, mode, metadata, connection.parentEntityUri]), _f = _e.inRelations, inRelationTypes = _f === void 0 ? [] : _f, _g = _e.outRelations, outRelationTypes = _g === void 0 ? [] : _g;
+    }, [config, direction, relationType, mode, metadata, connection.parentEntityUri]), _h = _g.inRelations, inRelationTypes = _h === void 0 ? [] : _h, _j = _g.outRelations, outRelationTypes = _j === void 0 ? [] : _j;
     var firstLevelRelationAttrTypes = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getRelationAttributesList)(metadata, relationType); }, [relationType, metadata]);
     var attributeListEntity = (0, react_1.useMemo)(function () { return (__assign({ attributes: __assign({}, (0, mdm_sdk_1.getRelationAttributesFromConnection)(connection)) }, (0, mdm_sdk_1.getActivenessAttributes)(connection.relation))); }, [connection]);
     var relatedTempEntities = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.findRelatedTemporaryEntities)(allModifiedEntities, modifiedEntity); }, [allModifiedEntities, modifiedEntity]);
@@ -215,6 +216,7 @@ var RelationEditor = function (_a) {
         }
         return content.entityTypes;
     }, [config, connection.parentEntityUri]);
+    var isEntityHasMaskedAttrValue = (0, ramda_1.pipe)(ramda_1.values, ramda_1.flatten, (0, ramda_1.any)(mdm_sdk_1.isAttributeHasMaskedValue))(((_d = (_c = connection.entity) === null || _c === void 0 ? void 0 : _c.object) === null || _d === void 0 ? void 0 : _d.attributes) || {});
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: styles.editor },
             react_1.default.createElement(Typography_1.default, { className: styles.title }, isNew ? ui_i18n_1.default.text('Add new item') : ui_i18n_1.default.text('Edit item')),
@@ -225,7 +227,7 @@ var RelationEditor = function (_a) {
                         react_1.default.createElement(EntitySelector_1.EntitySelector, { className: (0, classnames_1.default)(styles.item, (_b = {},
                                 _b[styles.dense] = errorMessage ||
                                     (connection.entity && (0, mdm_sdk_1.isTempUri)(connection.entity.entityUri)),
-                                _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy }))),
+                                _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy, isMasked: isEntityHasMaskedAttrValue }))),
                 react_1.default.createElement(HiddenAttributesContext_1.HiddenAttributesContext.Provider, { value: emptyHiddenAttributes },
                     react_1.default.createElement(EditModeAttributesList_1.EditModeAttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))))),
         react_1.default.createElement("div", { className: styles.actionButtons },

package/cjs/SearchInput/SearchInput.d.ts

@@ -7,6 +7,7 @@ type Props = InputProps & {
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;
     placeholder?: string;
+    endAdornmentContent?: React.ReactNode;
 };
-declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, ...otherProps }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, endAdornmentContent, ...otherProps }: Props) => JSX.Element>;
 export default _default;

package/cjs/SearchInput/SearchInput.js

@@ -60,13 +60,15 @@ var events_1 = require("../helpers/events");
 var SmallIconButton_1 = require("../SmallIconButton");
 var styles_1 = require("./styles");
 var SearchInput = function (_a) {
-    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? ramda_1.identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? ui_i18n_1.default.text('Search') : _d, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder"]);
+    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? ramda_1.identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? ui_i18n_1.default.text('Search') : _d, endAdornmentContent = _a.endAdornmentContent, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder", "endAdornmentContent"]);
     var styles = (0, styles_1.useStyles)({ height: height });
     var _e = (0, react_1.useState)(''), localValue = _e[0], setLocalValue = _e[1];
     var updateValue = (0, ramda_1.pipe)((0, ramda_1.tap)(onSearch), setLocalValue);
     var clearValue = function () { return updateValue(''); };
     var inputValue = (0, ramda_1.isNil)(value) ? localValue : value;
     return (react_1.default.createElement(Input_1.default, __assign({ startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
-            react_1.default.createElement(Search_1.default, { className: styles.icon })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, inputValue.length > 0 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Close_1.default, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: (0, classnames_1.default)(styles.input, classes.input), root: (0, classnames_1.default)(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: (0, ramda_1.pipe)(events_1.getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
+            react_1.default.createElement(Search_1.default, { className: styles.icon })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" },
+            inputValue.length > 0 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Close_1.default, className: styles.clearButton, onClick: clearValue })),
+            endAdornmentContent), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: (0, classnames_1.default)(styles.input, classes.input), root: (0, classnames_1.default)(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: (0, ramda_1.pipe)(events_1.getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
 };
 exports.default = (0, react_1.memo)(SearchInput);

package/cjs/SearchInput/SearchInput.spec.js

@@ -10,55 +10,135 @@ 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 __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 Input_1 = __importDefault(require("@mui/material/Input"));
-var SmallIconButton_1 = require("../SmallIconButton");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var SearchInput_1 = __importDefault(require("./SearchInput"));
+var test_utils_1 = require("../test-utils");
 describe('SearchInput tests', function () {
+    var onSearch = jest.fn();
     var defaultProps = {
         value: '',
         autofocus: true,
-        onSearch: function () { },
+        onSearch: onSearch,
         height: 40
     };
-    it('should render all components', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps)));
-        expect(component.find(Input_1.default)).toHaveLength(1);
-        expect(component.find('svg')).toHaveLength(1);
-        expect(component.find(Input_1.default).prop('placeholder')).toEqual('Search');
-    });
-    it('should call onSearch prop on change', function () {
-        var onSearch = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps, { onSearch: onSearch })));
-        var input = component.find(Input_1.default);
-        input.simulate('change', { target: { value: 'test' } });
-        expect(onSearch).toBeCalledWith('test');
-    });
-    it('should call onSearch prop on clear input', function () {
-        var onSearch = jest.fn();
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps, { onSearch: onSearch, value: 'test' })));
-        component.find(SmallIconButton_1.SmallIconButton).find('button').simulate('click');
-        expect(onSearch).toBeCalledWith('');
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(SearchInput_1.default, __assign({}, props))));
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should not fail when onSearch prop is undefined', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps)));
-        var input = component.find(Input_1.default);
-        input.simulate('change', { target: { value: 'test' } });
+    it('should render all components', function () {
+        setUp();
+        expect(react_2.screen.getByRole('textbox')).toBeInTheDocument();
+        expect(react_2.screen.getByPlaceholderText('Search')).toBeInTheDocument();
+        expect((0, test_utils_1.getMuiIconByName)('Search')).toBeInTheDocument();
     });
-    it('should forward props to Input', function () {
-        var onKeyDown = jest.fn();
-        var onFocus = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps, { fullWidth: true, onFocus: onFocus, onKeyDown: onKeyDown })));
-        var input = component.find(Input_1.default);
-        expect(input.props()).toMatchObject({
-            fullWidth: true,
-            onKeyDown: onKeyDown,
-            onFocus: onFocus
+    it('should call onSearch prop on change', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, searchValue;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp(__assign(__assign({}, defaultProps), { value: null })).user;
+                    searchValue = 'searchValue';
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), searchValue)];
+                case 1:
+                    _a.sent();
+                    expect(onSearch).toHaveBeenLastCalledWith(searchValue);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call onSearch prop on clear input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp(__assign(__assign({}, defaultProps), { value: 'test' })).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(onSearch).toBeCalledWith('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not fail when onSearch prop is undefined', 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.type(react_2.screen.getByRole('textbox'), 'q')];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should forward props to Input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onKeyDown, onFocus, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onKeyDown = jest.fn();
+                    onFocus = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { fullWidth: true, onKeyDown: onKeyDown, onFocus: onFocus })).user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'q')];
+                case 1:
+                    _a.sent();
+                    expect(onKeyDown).toHaveBeenCalled();
+                    expect(onFocus).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
+    }); });
+    it('should use provided endAdornmentContent', function () {
+        var endAdornmentContent = react_1.default.createElement("div", null, "testContent");
+        setUp(__assign(__assign({}, defaultProps), { endAdornmentContent: endAdornmentContent }));
+        expect(react_2.screen.getByText('testContent')).toBeInTheDocument();
     });
 });

package/cjs/SimpleAttribute/IntegrationSimpleAttribute.test.js

@@ -79,6 +79,7 @@ var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var mdmSdk = __importStar(require("@reltio/mdm-sdk"));
 var MaskedAttributesContext_1 = require("../contexts/MaskedAttributesContext");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var SimpleAttribute_1 = require("./SimpleAttribute");
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getUnmaskedAttributeValue: jest.fn() })); });
 describe('masking/unmasking behaviour', function () {
@@ -94,10 +95,15 @@ describe('masking/unmasking behaviour', function () {
     var setUp = function (isMaskingNeeded) {
         if (isMaskingNeeded === void 0) { isMaskingNeeded = true; }
         var attributeType = isMaskingNeeded ? defaultAttributeType : (0, ramda_1.dissoc)('masking', defaultAttributeType);
-        var container = (0, react_2.render)(react_1.default.createElement(MaskedAttributesContext_1.MaskedAttributesProvider, null,
-            react_1.default.createElement(SimpleAttribute_1.SimpleAttribute, { attributeType: attributeType, attributeValue: defaultAttributeValue }))).container;
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { mode: mdmSdk.Mode.Viewing } },
+                react_1.default.createElement(MaskedAttributesContext_1.MaskedAttributesProvider, null, children)));
+        };
         var user = user_event_1.default.setup();
-        return { container: container, user: user };
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(SimpleAttribute_1.SimpleAttribute, { attributeType: attributeType, attributeValue: defaultAttributeValue }), {
+            wrapper: Providers
+        }));
     };
     it('should not render MaskingSwitcher if attribute should not be masked', function () {
         var container = setUp(false).container;

package/cjs/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -89,7 +89,7 @@ var SimpleAttributeEditor = function (_a) {
         mode: mode,
         isReltioCrosswalk: isReltioCrosswalk
     }), canCreate = _e.canCreate, canEdit = _e.canEdit, canDelete = _e.canDelete;
-    var showToEdit = canEdit && isEditableMode;
+    var showToEdit = canEdit && isEditableMode && !attributeValue.masked;
     var errorMessage = (0, mdm_sdk_1.getErrorMessage)(ownError);
     var dependentLookupEditorContext = (0, MdmModuleContext_1.useMdmDependentLookupEditorContext)(attributeValue, attributeType);
     var _f = (0, useScrollToAttributeError_1.useScrollToAttributeError)({ highlightedError: highlightedError, isSimple: true }), ref = _f.ref, errorClassName = _f.errorClassName;
@@ -118,8 +118,8 @@ var SimpleAttributeEditor = function (_a) {
             deactivateError();
         }
     };
-    var showAddButton = !!onAddOneMore && canCreate && !attributeType.singleValue;
-    var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
+    var showAddButton = !!onAddOneMore && canCreate && !attributeType.singleValue && !attributeValue.masked && mode !== mdm_sdk_1.Mode.Viewing;
+    var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete && !attributeValue.masked && mode !== mdm_sdk_1.Mode.Viewing;
     var hasError = !!errorMessage;
     var deletedProps = deleted ? { disabled: true, isCrossedOut: true } : {};
     var isProfilePerspectiveView = (0, react_1.useContext)(ProfilePerspectiveViewContext_1.ProfilePerspectiveViewContext);

package/cjs/hooks/useMaskedAttribute/useMaskedAttribute.js

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMaskedAttribute = void 0;
 var react_1 = require("react");
+var MdmModuleContext_1 = require("../../contexts/MdmModuleContext");
 var MaskedAttributesContext_1 = require("../../contexts/MaskedAttributesContext");
 var useMaskedAttribute = function (_a) {
     var attributeType = _a.attributeType, attributeValue = _a.attributeValue;
+    var isViewMode = (0, MdmModuleContext_1.useMdmIsViewMode)();
     var unmaskAttributeValue = (0, MaskedAttributesContext_1.useUnmaskAttributeValue)();
     var maskAttributeValue = (0, MaskedAttributesContext_1.useMaskAttributeValue)();
     var _b = (0, MaskedAttributesContext_1.useUnmaskedAttributeValue)(attributeValue.uri) || {}, unmaskedAttributeValue = _b.attributeValue, _c = _b.isUnmasked, isUnmasked = _c === void 0 ? false : _c, _d = _b.loading, loading = _d === void 0 ? false : _d;
-    var isUnmaskingNeeded = unmaskAttributeValue && maskAttributeValue && !!attributeType.masking;
+    var isUnmaskingNeeded = unmaskAttributeValue && maskAttributeValue && !!attributeType.masking && isViewMode;
     var unmask = (0, react_1.useCallback)(function () {
         return isUnmaskingNeeded ? unmaskAttributeValue(attributeValue.uri) : Promise.resolve();
     }, [unmaskAttributeValue, attributeValue.uri, isUnmaskingNeeded]);