@reltio/components 1.4.1939 → 1.4.1941

package/cjs/types/index.d.ts

@@ -135,6 +135,7 @@ export type AttributesFilterComponentsClasses = {
     filterSelectorContainer?: string;
     actionsContainer?: string;
     filterPopup?: string;
+    triggerButton?: string;
 };
 export declare enum ActionButtonMode {
     iconButton = "iconButton",

package/esm/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/esm/AttributesFiltersButton/AttributesFiltersButton.js

@@ -11,11 +11,12 @@ import { AttributesFiltersBuilder } from '../AttributesFiltersBuilder';
 import { ActionButtons } from './components/ActionButtons/';
 import { useStyles } from './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 ? FilterIcon : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title;
     var styles = useStyles();
     var buttonRef = useRef();
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = useState([]), filters = _c[0], setFilters = _c[1];
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = useState([]), filters = _e[0], setFilters = _e[1];
     var isFiltersApplied = isFiltersAppliedProp !== null && isFiltersAppliedProp !== void 0 ? isFiltersAppliedProp : !!buildFilterQueryString()(filtersProp);
     var buttonColor = isFiltersApplied ? 'primary' : 'inherit';
     var togglePopup = function () {
@@ -44,19 +45,19 @@ var AttributesFiltersButton = function (_a) {
     }, [onClear]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
-                root: styles.triggerButton,
+                root: classNames(styles.triggerButton, classes === null || classes === void 0 ? void 0 : classes.triggerButton),
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
-            React.createElement(FilterIcon, { color: buttonColor })),
-        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+            React.createElement(ButtonIcon, { color: buttonColor })),
+        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(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.createElement(React.Fragment, null,
-                React.createElement(Typography, { variant: "h6" }, i18n.text('Filter')),
+                React.createElement(Typography, { variant: "h6" }, title !== null && title !== void 0 ? title : i18n.text('Filter')),
                 React.createElement("div", { className: styles.filtersBuilderWrapper },
                     children,
                     React.createElement(AttributesFiltersBuilder, { attributesTypesGroups: attributesTypesGroups, attributesTypesGroupFilter: attributesTypesGroupFilter, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),

package/esm/AttributesFiltersButton/AttributesFiltersButton.test.js

@@ -242,4 +242,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(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText(title)).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/esm/EditModeAttributesList/EditModeAttributesList.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import React, { useCallback, useContext, useMemo, useState, useEffect } from 'react';
 import i18n from 'ui-i18n';
-import { getCreatableAttributeTypes, getAttributesListForEditMode, getParentUri, checkCanCreateAttribute, getBaseUri } from '@reltio/mdm-sdk';
+import { getCreatableAttributeTypes, getAttributesListForEditMode, getParentUri, checkCanCreateAttribute, getBaseUri, Mode } from '@reltio/mdm-sdk';
 import { last, path } from 'ramda';
 import { EditModeAttributesPager } from '../EditModeAttributesPager';
 import { BranchDecorator } from '../BranchDecorator';
@@ -67,7 +67,7 @@ var EditModeAttributesList = function (_a) {
     }); }, [hasDeletionsMap, setHasDeletions]);
     return (React.createElement("div", { className: className },
         children && React.createElement(BranchDecorator, __assign({}, decoratorProps), children),
-        React.createElement(BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && (React.createElement(MoreAttributesButton, { label: i18n.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
+        React.createElement(BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && mode !== Mode.Viewing && (React.createElement(MoreAttributesButton, { label: i18n.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
         React.createElement(HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(alwaysVisiblePagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
             return (React.createElement(EditModeAttributesPager, { key: "".concat(attrType.uri, "_").concat(parentUri), attributeType: attrType, drawLines: drawLines, values: values, paging: path(['paging', attrType.uri], attributes), parentUri: parentUri, showEmptyEditors: showEmptyEditors, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }));

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

@@ -185,4 +185,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 = screen.getAllByTestId('reltio-attribute-value');
+        expect(attributeValues).toHaveLength(2);
+        expect(within(attributeValues[0]).getAllByRole('checkbox')).toHaveLength(2);
+        expect(within(attributeValues[0]).getByText('Yes')).toBeInTheDocument();
+        expect(within(attributeValues[0]).getByText('No')).toBeInTheDocument();
+        expect(within(attributeValues[1]).queryAllByRole('checkbox')).toHaveLength(0);
+        expect(within(attributeValues[1]).getByText('Yes')).toBeInTheDocument();
+        expect(within(attributeValues[1]).queryByText('No')).not.toBeInTheDocument();
+    });
 });

package/esm/EditModeComplexAttribute/EditModeComplexAttribute.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState, useEffect } from 'react';
 import { pipe, propOr, pathEq, any } from 'ramda';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
-import { checkCanDeleteAttribute, isReltioCrosswalk, isTempUri, getErrorMessage, hasAttributeDescendantsWithErrors, isAnalyticAttribute } from '@reltio/mdm-sdk';
+import { checkCanDeleteAttribute, isReltioCrosswalk, isTempUri, getErrorMessage, hasAttributeDescendantsWithErrors, isAnalyticAttribute, Mode } from '@reltio/mdm-sdk';
 import Button from '@mui/material/Button';
 import DeleteIcon from '@mui/icons-material/Delete';
 import Typography from '@mui/material/Typography';
@@ -17,7 +17,7 @@ import { useScrollToAttributeError } from '../hooks/useScrollToAttributeError';
 import { useStyles } from './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 = useStyles();
     var deleted = state === 'deleted';
     var edited = state === 'edited';
@@ -26,6 +26,7 @@ var EditModeComplexAttribute = function (_a) {
     var defaultExpand = isNew || expandedProp;
     var _d = useState(defaultExpand), expanded = _d[0], setExpanded = _d[1];
     var _e = useScrollToAttributeError({ highlightedError: highlightedError }), ref = _e.ref, errorClassName = _e.errorClassName;
+    var mode = attributeValue.masked ? Mode.Viewing : modeProp;
     useEffect(function () {
         if (isHighlightedPath) {
             setExpanded(true);
@@ -45,7 +46,12 @@ var EditModeComplexAttribute = function (_a) {
                 isReltioCrosswalk: isReltioCrosswalk(crosswalks, attributeValue)
             });
     }, [attributeType, attributeValue, mode, metadata, crosswalks, configCanDelete]);
-    var showDeleteButton = !deleted && !hideDeleteButton && !!onDeleteAttribute && canDelete;
+    var showDeleteButton = !deleted &&
+        !hideDeleteButton &&
+        !!onDeleteAttribute &&
+        canDelete &&
+        !attributeValue.masked &&
+        mode !== Mode.Viewing;
     var onDeleteThis = function () { return onDeleteAttribute({ uri: uri, attributeType: attributeType, attributeValue: attributeValue }); };
     var hasDescendantsWithErrors = useMemo(function () { return hasAttributeDescendantsWithErrors(attributeValue, errors); }, [errors, attributeValue]);
     useEffect(function () {

package/esm/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/esm/EntitySelector/EntitySelector.js

@@ -35,11 +35,11 @@ import { buildEntityOptions } from './helpers';
 import { useStyles } from './styles';
 var DEFAULT_MAX_TYPEAHEAD_SEARCH_OPTION = 20;
 export 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 = useStyles();
-    var _f = useState(''), inputValue = _f[0], setInputValue = _f[1];
+    var _g = useState(''), inputValue = _g[0], setInputValue = _g[1];
     var entityTypes = useMemo(function () { return entityTypesUris.map(function (type) { return getEntityType(metadata, type); }).filter(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/esm/EntitySelector/EntitySelector.test.js

@@ -133,7 +133,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();
         });
@@ -151,7 +151,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/esm/ReferenceAttributeEditor/ReferenceAttributeEditor.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useMemo, useCallback, useRef } from 'react';
 import classnames from 'classnames';
 import { identity, pipe, isEmpty } from 'ramda';
-import { evaluateDeepEntityLabel, referencedEntityAttributeTypesSelectionStrategy, getEntityType, getReferencedEntityFromAttrValue, getReferencedRelationFromAttrValue, getReferencedEntityUri, getReferencedEntityTypeUri, getReferencedEntityTypeUriFromAttrType, getReferencedRelationAttrTypesUris, findAttributeTypeByUri, getCreatableAttributeTypes, createTemporaryEntity, convertReferencedEntityForAttrValue, createReferencedRelationForAttrValue, addReferencedRelationCrosswalks, getReferencedEntityUriFromAttrValue, checkCanEditAttribute, checkMetadataForCreate, isReltioCrosswalk, getErrorMessage, getErrorId, getReferencedEntityActiveError, isTempUri, getLabel, isAttributeTypeError } from '@reltio/mdm-sdk';
+import { evaluateDeepEntityLabel, referencedEntityAttributeTypesSelectionStrategy, getEntityType, getReferencedEntityFromAttrValue, getReferencedRelationFromAttrValue, getReferencedEntityUri, getReferencedEntityTypeUri, getReferencedEntityTypeUriFromAttrType, getReferencedRelationAttrTypesUris, findAttributeTypeByUri, getCreatableAttributeTypes, createTemporaryEntity, convertReferencedEntityForAttrValue, createReferencedRelationForAttrValue, addReferencedRelationCrosswalks, getReferencedEntityUriFromAttrValue, checkCanEditAttribute, checkMetadataForCreate, isReltioCrosswalk, getErrorMessage, getErrorId, getReferencedEntityActiveError, isTempUri, getLabel, isAttributeTypeError, isAttributeHasMaskedValue } from '@reltio/mdm-sdk';
 import { EditModeComplexAttribute } from '../EditModeComplexAttribute';
 import { EntitySelector } from '../EntitySelector';
 import { ErrorWrapper } from '../ErrorWrapper';
@@ -122,7 +122,7 @@ var ReferenceAttributeEditor = function (props) {
             React.createElement(ErrorWrapper, { errorMessage: errorMessage },
                 React.createElement(EntitySelector, { className: classnames(styles.item, (_a = {},
                         _a[styles.dense] = errorMessage || (selectedEntity && 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: isAttributeHasMaskedValue(attributeValue) })))));
 };
 export default withContext(ScrollToElementContext, function (contextValue, _a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType;

package/esm/RelationEditor/IntegrationRelationEditor.test.js

@@ -179,7 +179,8 @@ describe('RelationEditor behaviour', function () {
                     expect(typeAheadSearch).toBeCalledWith([{ label: 'Address', uri: 'configuration/entityTypes/Location' }], '', {
                         globalFilter: '',
                         max: 20,
-                        searchOptions: ''
+                        searchOptions: '',
+                        sendMasked: false
                     });
                     screen.getByText('Create new Address');
                     return [2 /*return*/];
@@ -275,4 +276,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 = screen.getAllByRole('textbox');
+                    return [4 /*yield*/, user.click(inputs[0])];
+                case 1:
+                    _a.sent();
+                    expect(typeAheadSearch).toBeCalledWith([{ label: 'Address', uri: 'configuration/entityTypes/Location' }], '', {
+                        globalFilter: '',
+                        max: 20,
+                        searchOptions: '',
+                        sendMasked: true
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/esm/RelationEditor/RelationEditor.js

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
-import { always, assoc, concat, differenceWith, equals, forEach, map, path, pick, pipe, prop, propEq, when, uniq, curry } from 'ramda';
+import { always, assoc, concat, differenceWith, equals, forEach, map, path, pick, pipe, prop, propEq, when, uniq, curry, values, flatten, any } from 'ramda';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import { createTemporaryEntity, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, omitMarks, relationEditorAttributeTypesSelectionStrategy, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection, evaluateErrorPath, AttributeValuePathItemType, getAllRelationEditorActiveErrors } from '@reltio/mdm-sdk';
+import { createTemporaryEntity, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, omitMarks, relationEditorAttributeTypesSelectionStrategy, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection, evaluateErrorPath, AttributeValuePathItemType, getAllRelationEditorActiveErrors, isAttributeHasMaskedValue } from '@reltio/mdm-sdk';
 import { ConnectionRelationTypeSelector } from '../ConnectionRelationTypeSelector';
 import { ErrorWrapper } from '../ErrorWrapper';
 import { EntitySelector } from '../EntitySelector';
@@ -33,9 +33,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 = 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 = getEntityUriFromConnection(connection);
     var relationUri = getRelationUriFromConnection(connection);
@@ -66,8 +67,8 @@ var RelationEditor = function (_a) {
     var allRelationEditorErrors = getAllRelationEditorActiveErrors(connection, profileErrors);
     var modifiedEntity = isTempEntity ? mdmModifiedEntity : null;
     var allModifiedEntities = isTempEntity ? mdmAllModifiedEntities : null;
-    var _d = useScrollToAttributeError({ highlightedError: highlightedError, isSimple: true }), ref = _d.ref, errorClassName = _d.errorClassName;
-    var _e = useMemo(function () {
+    var _f = useScrollToAttributeError({ highlightedError: highlightedError, isSimple: true }), ref = _f.ref, errorClassName = _f.errorClassName;
+    var _g = useMemo(function () {
         return getInOutRelations({
             content: connection.parentEntityUri
                 ? config.contentSecondLevel
@@ -77,7 +78,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 = useMemo(function () { return getRelationAttributesList(metadata, relationType); }, [relationType, metadata]);
     var attributeListEntity = useMemo(function () { return (__assign({ attributes: __assign({}, getRelationAttributesFromConnection(connection)) }, getActivenessAttributes(connection.relation))); }, [connection]);
     var relatedTempEntities = useMemo(function () { return findRelatedTemporaryEntities(allModifiedEntities, modifiedEntity); }, [allModifiedEntities, modifiedEntity]);
@@ -187,6 +188,7 @@ var RelationEditor = function (_a) {
         }
         return content.entityTypes;
     }, [config, connection.parentEntityUri]);
+    var isEntityHasMaskedAttrValue = pipe(values, flatten, any(isAttributeHasMaskedValue))(((_d = (_c = connection.entity) === null || _c === void 0 ? void 0 : _c.object) === null || _d === void 0 ? void 0 : _d.attributes) || {});
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles.editor },
             React.createElement(Typography, { className: styles.title }, isNew ? i18n.text('Add new item') : i18n.text('Edit item')),
@@ -197,7 +199,7 @@ var RelationEditor = function (_a) {
                         React.createElement(EntitySelector, { className: classnames(styles.item, (_b = {},
                                 _b[styles.dense] = errorMessage ||
                                     (connection.entity && isTempUri(connection.entity.entityUri)),
-                                _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: relationEditorAttributeTypesSelectionStrategy }))),
+                                _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: relationEditorAttributeTypesSelectionStrategy, isMasked: isEntityHasMaskedAttrValue }))),
                 React.createElement(HiddenAttributesContext.Provider, { value: emptyHiddenAttributes },
                     React.createElement(EditModeAttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))))),
         React.createElement("div", { className: styles.actionButtons },

package/esm/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/esm/SearchInput/SearchInput.js

@@ -32,13 +32,15 @@ import { getValue } from '../helpers/events';
 import { SmallIconButton } from '../SmallIconButton';
 import { useStyles } from './styles';
 var SearchInput = function (_a) {
-    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? i18n.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 ? identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? i18n.text('Search') : _d, endAdornmentContent = _a.endAdornmentContent, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder", "endAdornmentContent"]);
     var styles = useStyles({ height: height });
     var _e = useState(''), localValue = _e[0], setLocalValue = _e[1];
     var updateValue = pipe(tap(onSearch), setLocalValue);
     var clearValue = function () { return updateValue(''); };
     var inputValue = isNil(value) ? localValue : value;
     return (React.createElement(Input, __assign({ startAdornment: React.createElement(InputAdornment, { position: "start" },
-            React.createElement(SearchIcon, { className: styles.icon })), endAdornment: React.createElement(InputAdornment, { position: "end" }, inputValue.length > 0 && (React.createElement(SmallIconButton, { icon: CloseIcon, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classNames(styles.input, classes.input), root: classNames(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: pipe(getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
+            React.createElement(SearchIcon, { className: styles.icon })), endAdornment: React.createElement(InputAdornment, { position: "end" },
+            inputValue.length > 0 && (React.createElement(SmallIconButton, { icon: CloseIcon, className: styles.clearButton, onClick: clearValue })),
+            endAdornmentContent), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classNames(styles.input, classes.input), root: classNames(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: pipe(getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
 };
 export default memo(SearchInput);

package/esm/SearchInput/SearchInput.spec.js

@@ -9,51 +9,131 @@ 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 };
+    }
+};
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import Input from '@mui/material/Input';
-import { SmallIconButton } from '../SmallIconButton';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import SearchInput from './SearchInput';
+import { getMuiIconByName } from '../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 = mount(React.createElement(SearchInput, __assign({}, defaultProps)));
-        expect(component.find(Input)).toHaveLength(1);
-        expect(component.find('svg')).toHaveLength(1);
-        expect(component.find(Input).prop('placeholder')).toEqual('Search');
-    });
-    it('should call onSearch prop on change', function () {
-        var onSearch = jest.fn();
-        var component = shallow(React.createElement(SearchInput, __assign({}, defaultProps, { onSearch: onSearch })));
-        var input = component.find(Input);
-        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 = mount(React.createElement(SearchInput, __assign({}, defaultProps, { onSearch: onSearch, value: 'test' })));
-        component.find(SmallIconButton).find('button').simulate('click');
-        expect(onSearch).toBeCalledWith('');
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(SearchInput, __assign({}, props))));
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should not fail when onSearch prop is undefined', function () {
-        var component = shallow(React.createElement(SearchInput, __assign({}, defaultProps)));
-        var input = component.find(Input);
-        input.simulate('change', { target: { value: 'test' } });
+    it('should render all components', function () {
+        setUp();
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+        expect(getMuiIconByName('Search')).toBeInTheDocument();
     });
-    it('should forward props to Input', function () {
-        var onKeyDown = jest.fn();
-        var onFocus = jest.fn();
-        var component = shallow(React.createElement(SearchInput, __assign({}, defaultProps, { fullWidth: true, onFocus: onFocus, onKeyDown: onKeyDown })));
-        var input = component.find(Input);
-        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(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(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(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(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.createElement("div", null, "testContent");
+        setUp(__assign(__assign({}, defaultProps), { endAdornmentContent: endAdornmentContent }));
+        expect(screen.getByText('testContent')).toBeInTheDocument();
     });
 });

package/esm/SimpleAttribute/IntegrationSimpleAttribute.test.js

@@ -51,6 +51,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as mdmSdk from '@reltio/mdm-sdk';
 import { MaskedAttributesProvider } from '../contexts/MaskedAttributesContext';
+import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { SimpleAttribute } from './SimpleAttribute';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getUnmaskedAttributeValue: jest.fn() })); });
 describe('masking/unmasking behaviour', function () {
@@ -66,10 +67,15 @@ describe('masking/unmasking behaviour', function () {
     var setUp = function (isMaskingNeeded) {
         if (isMaskingNeeded === void 0) { isMaskingNeeded = true; }
         var attributeType = isMaskingNeeded ? defaultAttributeType : dissoc('masking', defaultAttributeType);
-        var container = render(React.createElement(MaskedAttributesProvider, null,
-            React.createElement(SimpleAttribute, { attributeType: attributeType, attributeValue: defaultAttributeValue }))).container;
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: { mode: mdmSdk.Mode.Viewing } },
+                React.createElement(MaskedAttributesProvider, null, children)));
+        };
         var user = userEvent.setup();
-        return { container: container, user: user };
+        return __assign({ user: user }, render(React.createElement(SimpleAttribute, { attributeType: attributeType, attributeValue: defaultAttributeValue }), {
+            wrapper: Providers
+        }));
     };
     it('should not render MaskingSwitcher if attribute should not be masked', function () {
         var container = setUp(false).container;