@reltio/components 1.4.1861 → 1.4.1863

package/cjs/ConnectionEditor/ConnectionEditor.js

@@ -113,7 +113,7 @@ var ConnectionEditor = function (_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         onChangeRelationType && (react_1.default.createElement(ConnectionRelationTypeSelector_1.ConnectionRelationTypeSelector, { className: styles.item, relation: selectorCompatibleRelation, metadata: metadata, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: handleChangeRelationType })),
         onChangeEntity && (react_1.default.createElement(ErrorWrapper_1.ErrorWrapper, { errorMessage: entityErrorMessage, className: styles.item },
-            react_1.default.createElement(EntitySelector_1.EntitySelector, { key: relationTypeUri, className: (0, classnames_1.default)((_b = {}, _b[styles.dense] = entityErrorMessage, _b)), entity: selectorCompatibleEntity || {}, entityTypesUris: availableEntityTypeUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mdm_sdk_1.Mode.Editing, onChange: onChangeEntity, onCreate: undefined, metadata: metadata, attributeTypesSelectionStrategy: undefined }))),
+            react_1.default.createElement(EntitySelector_1.EntitySelector, { key: relationTypeUri, className: (0, classnames_1.default)((_b = {}, _b[styles.dense] = entityErrorMessage, _b)), entity: selectorCompatibleEntity || {}, entityTypesUris: availableEntityTypeUris, globalSearchRequestOptions: globalSearchRequestOptions, mode: mdm_sdk_1.Mode.Editing, onChange: onChangeEntity, onCreate: undefined, metadata: metadata, attributeTypesSelectionStrategy: undefined }))),
         relationTypeUri && (react_1.default.createElement(EditModeAttributesList_1.EditModeAttributesList, { attrTypes: relationAttrTypes, entity: attributeListEntity, showEmptyEditors: showEmptyEditors, mode: mdm_sdk_1.Mode.Editing, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onRemoveAttribute }))));
 };
 exports.ConnectionEditor = ConnectionEditor;

package/cjs/EntitySelector/EntitySelector.d.ts

@@ -4,7 +4,7 @@ type Props = {
     entity?: ConnectionEntity;
     entityTypesUris?: string[];
     mode: Mode;
-    max: number;
+    max?: number;
     onChange: (entity: ConnectionEntity) => void;
     onCreate?: (entityTypeUri: string, value: PrimitiveValue) => void;
     metadata: Metadata;

package/cjs/EntitySelector/EntitySelector.js

@@ -62,10 +62,11 @@ var Group_1 = require("./components/Group");
 var EntityCreator_1 = require("../EntityCreator");
 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, max = _a.max, onChange = _a.onChange, onCreate = _a.onCreate, metadata = _a.metadata, globalSearchRequestOptions = _a.globalSearchRequestOptions, attributeTypesSelectionStrategy = _a.attributeTypesSelectionStrategy, _d = _a.disableLinkClick, disableLinkClick = _d === void 0 ? false : _d, 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, otherProps = __rest(_a, ["entity", "entityTypesUris", "mode", "max", "onChange", "onCreate", "metadata", "globalSearchRequestOptions", "attributeTypesSelectionStrategy", "disableLinkClick"]);
     var styles = (0, styles_1.useStyles)();
-    var _e = (0, react_1.useState)(''), inputValue = _e[0], setInputValue = _e[1];
+    var _f = (0, react_1.useState)(''), inputValue = _f[0], setInputValue = _f[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 handleCreate = onCreate

package/cjs/EntitySelector/EntitySelector.test.js

@@ -166,6 +166,25 @@ describe('EntitySelector', function () {
             done();
         });
     });
+    it('should call typeAheadSearch on DropDownSelector "getOptions" prop calling with default max param', function (done) {
+        var entityTypesUris = ['configuration/entityTypes/HCP'];
+        var tempEntity = {
+            entityUri: 'entities/uri$$12345',
+            entityType: entityTypesUris[0]
+        };
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(EntitySelector_1.EntitySelector, { entity: tempEntity, onChange: mockOnChange, entityTypesUris: entityTypesUris, metadata: metadata }));
+        wrapper
+            .find('DropDownSelector')
+            .prop('getOptions')()
+            .then(function () {
+            var entityTypes = [metadata.entityTypes[0]];
+            var options = {
+                max: 20
+            };
+            expect(typeAheadSearchSpy).toHaveBeenCalledWith(entityTypes, undefined, options);
+            done();
+        });
+    });
     it('should render EntityCreator in case temp entity', function () {
         var mdmValues = { modifiedEntities: {} };
         var entityTypesUris = ['configuration/entityTypes/HCP'];

package/cjs/InlineSimpleAttribute/InlineSimpleAttribute.d.ts

@@ -14,5 +14,5 @@ type Props = {
     onIgnore: (event: IgnoreInlineAttributeEvent) => void;
     isEmpty: boolean;
 };
-export declare const InlineSimpleAttribute: ({ className, dataReltioId, attributeType, attributeValue, crosswalk, disableEdit, disableDelete, onIgnore, onEdit, onPin, onDelete, isEmpty }: Props) => JSX.Element;
+export declare const InlineSimpleAttribute: ({ className, dataReltioId, attributeType, attributeValue: rawAttributeValue, crosswalk, disableEdit, disableDelete, onIgnore, onEdit, onPin, onDelete, isEmpty }: Props) => JSX.Element;
 export {};

package/cjs/InlineSimpleAttribute/InlineSimpleAttribute.js

@@ -43,10 +43,16 @@ var PinButton_1 = require("../PinButton");
 var CrosswalkMenuItem_1 = require("./components/CrosswalkMenuItem");
 var useAttributeState_1 = require("../hooks/useAttributeState");
 var CrosswalksDisplayContext_1 = require("../contexts/CrosswalksDisplayContext");
+var useMaskedAttribute_1 = __importDefault(require("../hooks/useMaskedAttribute"));
+var MaskingSwitcher_1 = require("../MaskingSwitcher");
 var styles_1 = require("./styles");
 var InlineSimpleAttribute = function (_a) {
-    var className = _a.className, dataReltioId = _a.dataReltioId, _b = _a.attributeType, attributeType = _b === void 0 ? null : _b, attributeValue = _a.attributeValue, crosswalk = _a.crosswalk, disableEdit = _a.disableEdit, disableDelete = _a.disableDelete, onIgnore = _a.onIgnore, onEdit = _a.onEdit, onPin = _a.onPin, onDelete = _a.onDelete, isEmpty = _a.isEmpty;
+    var className = _a.className, dataReltioId = _a.dataReltioId, _b = _a.attributeType, attributeType = _b === void 0 ? null : _b, rawAttributeValue = _a.attributeValue, crosswalk = _a.crosswalk, disableEdit = _a.disableEdit, disableDelete = _a.disableDelete, onIgnore = _a.onIgnore, onEdit = _a.onEdit, onPin = _a.onPin, onDelete = _a.onDelete, isEmpty = _a.isEmpty;
     var _c = (0, useAttributeState_1.useAttributeState)(), isReadingMode = _c.isReadingMode, isEditingMode = _c.isEditingMode, isHovered = _c.isHovered, onMouseEnter = _c.onMouseEnter, onMouseLeave = _c.onMouseLeave, setReadingMode = _c.setReadingMode, setEditingMode = _c.setEditingMode;
+    var _d = (0, useMaskedAttribute_1.default)({
+        attributeType: attributeType,
+        attributeValue: rawAttributeValue
+    }), isUnmaskingNeeded = _d.isUnmaskingNeeded, isMasked = _d.isMasked, toggleMasking = _d.toggleMasking, attributeValue = _d.attributeValue, isUnmasking = _d.isUnmasking, unmask = _d.unmask;
     var containerRef = (0, react_1.useRef)();
     var id = (0, mdm_sdk_1.getLastUriPart)(attributeValue.uri);
     var crosswalkDisabled = (0, mdm_sdk_1.isCrosswalkDisabled)(crosswalk);
@@ -57,18 +63,20 @@ var InlineSimpleAttribute = function (_a) {
     var hasBasicPermission = (0, mdm_sdk_1.checkBasicMetadataPermission)(mdm_sdk_1.MetadataPermissions.UPDATE, attributeType) && !disableEdit && canModifyAttribute;
     var showPin = !isTemporary && ((!isReadingMode && hasBasicPermission) || attributeValue.pin);
     var showIgnore = !isTemporary && ((!isReadingMode && hasBasicPermission) || attributeValue.ignored);
+    var showMaskingSwitcher = (isUnmaskingNeeded && !isTemporary && !isReadingMode) || isUnmasking;
     (0, react_1.useEffect)(function () {
         if (isTemporary && !isEmpty) {
             setEditingMode();
         }
     }, [isEmpty]);
     var color = (0, CrosswalksDisplayContext_1.useCrosswalkColor)(crosswalk);
-    var _d = (0, CrosswalksDisplayContext_1.useCrosswalkHighlight)(crosswalk), isHighlighted = _d.isHighlighted, isDimmed = _d.isDimmed, highlightCrosswalk = _d.highlightCrosswalk, removeHighlight = _d.removeHighlight;
+    var _e = (0, CrosswalksDisplayContext_1.useCrosswalkHighlight)(crosswalk), isHighlighted = _e.isHighlighted, isDimmed = _e.isDimmed, highlightCrosswalk = _e.highlightCrosswalk, removeHighlight = _e.removeHighlight;
     var styles = (0, styles_1.useStyles)({
         variant: crosswalkDisabled ? 'outlined' : 'filled',
         opaque: !isDimmed,
         fullyColored: isHighlighted,
-        color: isDimmed ? 'rgba(0, 0, 0, 0.12)' : color
+        color: isDimmed ? 'rgba(0, 0, 0, 0.12)' : color,
+        hasMasking: isUnmaskingNeeded
     });
     var actions = [
         {
@@ -80,7 +88,9 @@ var InlineSimpleAttribute = function (_a) {
             text: ui_i18n_1.default.text('Edit'),
             icon: react_1.default.createElement(Edit_1.default, null),
             tooltip: canEdit ? null : ui_i18n_1.default.text("You don't have permissions to edit"),
-            onClick: function () { return setEditingMode(); },
+            onClick: function () {
+                unmask().then(setEditingMode);
+            },
             id: 'edit'
         },
         {
@@ -114,6 +124,7 @@ var InlineSimpleAttribute = function (_a) {
         react_1.default.createElement("div", { className: styles.actions },
             showPin && (react_1.default.createElement(PinButton_1.PinButton, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); }, disabled: !hasBasicPermission })),
             showIgnore && (react_1.default.createElement(IgnoreButton_1.IgnoreButton, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); }, disabled: !hasBasicPermission })),
+            showMaskingSwitcher && (react_1.default.createElement(MaskingSwitcher_1.MaskingSwitcher, { className: styles.maskingControl, isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking })),
             isHovered && !(0, mdm_sdk_1.isAutoGeneratedAttribute)(attributeType) && (react_1.default.createElement(DropDownMenuButton_1.DropDownMenuButton, { MenuItemRenderer: CrosswalkMenuItem_1.CrosswalkMenuItem, menuId: "simple-attribute-additional-actions-".concat(id), buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
                     icon: MoreVert_1.default,
                     size: 'XS',

package/cjs/InlineSimpleAttribute/InlineSimpleAttribute.spec.js

@@ -33,6 +33,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 };
 };
@@ -315,48 +351,68 @@ describe('Inline simple attribute tests', function () {
             attributeValue: value
         });
     });
-    it('should render InlineSimpleAttributeEditor on Edit menu item click', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var onMouseEnter = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter');
-        (0, test_utils_1.act)(function () {
-            onMouseEnter();
-        });
-        wrapper.update();
-        var actionItems = wrapper.find(DropDownMenuButton_1.DropDownMenuButton).prop('menuItems');
-        (0, test_utils_1.act)(function () {
-            var _a, _b;
-            (_b = (_a = actionItems[1]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        });
-        wrapper.update();
-        expect(wrapper.find(InlineSimpleAttributeEditor_1.InlineSimpleAttributeEditor)).toHaveLength(1);
-    });
-    it('should call props.onEdit when call onEdit prop of InlineSimpleAttributeEditor', function () {
-        var props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
-        var wrapper = setUp(props);
-        var event = {};
-        (0, test_utils_1.act)(function () {
-            var _a;
-            (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
-        });
-        wrapper.update();
-        var actionItems = wrapper.find(DropDownMenuButton_1.DropDownMenuButton).prop('menuItems');
-        (0, test_utils_1.act)(function () {
-            var _a, _b;
-            (_b = (_a = actionItems[1]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        });
-        wrapper.update();
-        var newAttributeValue = {
-            uri: 'entities/123/attributes/String/123',
-            value: 'Test update'
-        };
-        wrapper.find(InlineSimpleAttributeEditor_1.InlineSimpleAttributeEditor).prop('onEdit')(newAttributeValue);
-        expect(actions.onEdit).toBeCalledWith({
-            attributeType: attributeType,
-            attributeValue: newAttributeValue,
-            crosswalk: crosswalk
-        });
-    });
+    it('should render InlineSimpleAttributeEditor on Edit menu item click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, wrapper, onMouseEnter, actionItems;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
+                    wrapper = setUp(props);
+                    onMouseEnter = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter');
+                    (0, test_utils_1.act)(function () {
+                        onMouseEnter();
+                    });
+                    wrapper.update();
+                    actionItems = wrapper.find(DropDownMenuButton_1.DropDownMenuButton).prop('menuItems');
+                    (0, test_utils_1.act)(function () {
+                        var _a, _b;
+                        (_b = (_a = actionItems[1]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    });
+                    return [4 /*yield*/, Promise.resolve()];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    expect(wrapper.find(InlineSimpleAttributeEditor_1.InlineSimpleAttributeEditor)).toHaveLength(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call props.onEdit when call onEdit prop of InlineSimpleAttributeEditor', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, wrapper, event, actionItems, newAttributeValue;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign({ attributeValue: value, attributeType: attributeType, crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
+                    wrapper = setUp(props);
+                    event = {};
+                    (0, test_utils_1.act)(function () {
+                        var _a;
+                        (_a = wrapper.find('.simpleAttribute').at(2).prop('onMouseEnter')) === null || _a === void 0 ? void 0 : _a(event);
+                    });
+                    wrapper.update();
+                    actionItems = wrapper.find(DropDownMenuButton_1.DropDownMenuButton).prop('menuItems');
+                    (0, test_utils_1.act)(function () {
+                        var _a, _b;
+                        (_b = (_a = actionItems[1]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    });
+                    return [4 /*yield*/, Promise.resolve()];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    newAttributeValue = {
+                        uri: 'entities/123/attributes/String/123',
+                        value: 'Test update'
+                    };
+                    wrapper.find(InlineSimpleAttributeEditor_1.InlineSimpleAttributeEditor).prop('onEdit')(newAttributeValue);
+                    expect(actions.onEdit).toBeCalledWith({
+                        attributeType: attributeType,
+                        attributeValue: newAttributeValue,
+                        crosswalk: crosswalk
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should disable edit, pin, delete and ignore actions if it is system attribute', function () {
         var props = __assign({ attributeValue: value, attributeType: __assign(__assign({}, attributeType), { system: true }), crosswalk: crosswalk, className: 'simpleAttribute' }, actions);
         var wrapper = setUp(props);

package/cjs/InlineSimpleAttribute/styles.d.ts

@@ -3,6 +3,7 @@ type StylesProps = {
     fullyColored: boolean;
     opaque: boolean;
     color: string;
+    hasMasking: boolean;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"attributeValue" | "root" | "actions">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"attributeValue" | "root" | "actions" | "maskingControl">;
 export {};

package/cjs/InlineSimpleAttribute/styles.js

@@ -47,10 +47,19 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         lineHeight: '14px',
         width: 'calc(100% - 71px)'
     },
-    actions: {
-        display: 'flex',
-        width: '71px',
-        justifyContent: 'flex-end',
-        marginRight: '4px'
+    actions: function (_a) {
+        var hasMasking = _a.hasMasking;
+        return ({
+            display: 'flex',
+            width: "".concat(71 + (hasMasking ? 20 : 0), "px"),
+            justifyContent: 'flex-end',
+            marginRight: '4px'
+        });
+    },
+    maskingControl: {
+        flexShrink: 0,
+        marginLeft: '2px',
+        height: '20px !important', // important to override inline circular progress styles
+        width: '20px !important'
     }
 }); });

package/cjs/MaskingSwitcher/MaskingSwitcher.d.ts

@@ -1,7 +1,8 @@
 type MaskingSwitcherProps = {
+    className?: string;
     isMasked: boolean;
     isUnmasking?: boolean;
     onToggleMasking: () => void;
 };
-export declare const MaskingSwitcher: ({ isMasked, isUnmasking, onToggleMasking }: MaskingSwitcherProps) => JSX.Element;
+export declare const MaskingSwitcher: ({ className, isMasked, isUnmasking, onToggleMasking }: MaskingSwitcherProps) => JSX.Element;
 export {};

package/cjs/MaskingSwitcher/MaskingSwitcher.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MaskingSwitcher = void 0;
 var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var VisibilityOff_1 = __importDefault(require("@mui/icons-material/VisibilityOff"));
 var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
 var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
@@ -13,8 +14,10 @@ var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var styles_1 = require("./styles");
 var MaskingSwitcher = function (_a) {
-    var isMasked = _a.isMasked, isUnmasking = _a.isUnmasking, onToggleMasking = _a.onToggleMasking;
+    var className = _a.className, isMasked = _a.isMasked, isUnmasking = _a.isUnmasking, onToggleMasking = _a.onToggleMasking;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(Tooltip_1.default, { title: isMasked ? ui_i18n_1.default.text('Show') : ui_i18n_1.default.text('Hide'), placement: "right" }, isUnmasking ? (react_1.default.createElement(CircularProgress_1.default, { size: 14, className: styles.switcherWrapper })) : (react_1.default.createElement(IconButton_1.default, { onClick: onToggleMasking, className: styles.switcherWrapper }, isMasked ? (react_1.default.createElement(Visibility_1.default, { className: styles.icon })) : (react_1.default.createElement(VisibilityOff_1.default, { className: styles.icon }))))));
+    var tooltipTitle = isMasked ? ui_i18n_1.default.text('Show') : ui_i18n_1.default.text('Hide');
+    return isUnmasking ? (react_1.default.createElement(CircularProgress_1.default, { size: 16, className: (0, classnames_1.default)(className, styles.switcherWrapper) })) : (react_1.default.createElement(Tooltip_1.default, { key: String(isMasked), title: tooltipTitle },
+        react_1.default.createElement(IconButton_1.default, { "aria-label": tooltipTitle, onClick: onToggleMasking, className: (0, classnames_1.default)(className, styles.switcherWrapper) }, isMasked ? react_1.default.createElement(Visibility_1.default, { className: styles.icon }) : react_1.default.createElement(VisibilityOff_1.default, { className: styles.icon }))));
 };
 exports.MaskingSwitcher = MaskingSwitcher;

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, max: 20, 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, onChange: onChangeEntity, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy })))));
 };
 exports.default = (0, withContext_1.withContext)(ScrollToElementContext_1.ScrollToElementContext, function (contextValue, _a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType;

package/cjs/ReferenceAttributeEditor/ReferenceAttributeEditor.test.js

@@ -295,11 +295,10 @@ describe('ReferenceAttributeEditor', function () {
                     entityType: 'refEntityType'
                 });
             });
-            it('should has correct max, mode and metadata props', function () {
+            it('should has correct mode and metadata props', function () {
                 var props = __assign(__assign({}, defaultProps), { mode: mdm_sdk_1.Mode.Suggesting });
                 var component = setUp({ props: props });
                 var entitySelector = component.find(EntitySelector_1.EntitySelector);
-                expect(entitySelector.prop('max')).toBe(20);
                 expect(entitySelector.prop('mode')).toBe(props.mode);
                 expect(entitySelector.prop('metadata')).toBe(defaultMdmValues.metadata);
             });

package/cjs/SimpleAttribute/SimpleAttribute.js

@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleAttribute = void 0;
 var react_1 = __importStar(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var MaskingSwitcher_1 = require("../MaskingSwitcher");
 var classnames_1 = __importDefault(require("classnames"));
 var useMaskedAttribute_1 = __importDefault(require("../hooks/useMaskedAttribute"));
 var classnames_2 = require("../constants/classnames");
@@ -39,6 +38,7 @@ var CommentsContainer_1 = require("../CommentsContainer");
 var DataTypeValue_1 = require("../DataTypeValue");
 var PivotingTooltip_1 = require("../PivotingTooltip");
 var styles_1 = require("./styles");
+var MaskingSwitcher_1 = require("../MaskingSwitcher");
 var SimpleAttribute = function (_a) {
     var _b, _c, _d, _e, _f;
     var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;

package/cjs/components/RelationEditor/RelationEditor.js

@@ -221,7 +221,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() || [], max: config.max || 20, 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 }))),
                 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 },
             react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),

package/cjs/contexts/MaskedAttributesContext/context.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { SimpleAttributeValue } from '@reltio/mdm-sdk';
+type UnmaskedAttributes = Record<string, {
+    attributeValue?: SimpleAttributeValue;
+    loading?: boolean;
+    isUnmasked?: boolean;
+}>;
+export type MaskedAttributesContextType = {
+    unmaskedAttributes: UnmaskedAttributes;
+    unmaskAttributeValue: (attributeValueUri: string) => Promise<SimpleAttributeValue>;
+    maskAttributeValue: (attributeValueUri: string) => void;
+};
+export declare const MaskedAttributesContext: import("@fluentui/react-context-selector").Context<MaskedAttributesContextType>;
+type Props = {
+    children: ReactNode;
+};
+export declare const MaskedAttributesProvider: ({ children }: Props) => JSX.Element;
+export {};

package/cjs/contexts/MaskedAttributesContext/context.js

@@ -0,0 +1,141 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskedAttributesProvider = exports.MaskedAttributesContext = void 0;
+var react_1 = __importStar(require("react"));
+var react_context_selector_1 = require("@fluentui/react-context-selector");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var core_1 = require("../../core");
+var MdmModuleContext_1 = require("../MdmModuleContext");
+exports.MaskedAttributesContext = (0, react_context_selector_1.createContext)({
+    unmaskedAttributes: {},
+    unmaskAttributeValue: undefined,
+    maskAttributeValue: undefined
+});
+var MaskedAttributesProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)({}), unmaskedAttributes = _b[0], setUnmaskedAttributes = _b[1];
+    var profileLastLoadedTime = (0, MdmModuleContext_1.useMdmProfileLastLoadedTime)();
+    var unmaskedAttributesRef = (0, react_1.useRef)(unmaskedAttributes);
+    //performance optimization to avoid unnecessary re-renders
+    unmaskedAttributesRef.current = unmaskedAttributes;
+    (0, react_1.useEffect)(function () {
+        setUnmaskedAttributes({});
+    }, [profileLastLoadedTime]);
+    var unmaskAttributeValue = (0, react_1.useCallback)(function (attributeValueUri) { return __awaiter(void 0, void 0, void 0, function () {
+        var unmaskedAttributes_1, unmaskedAttributeValue_1, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 4, , 5]);
+                    unmaskedAttributes_1 = unmaskedAttributesRef.current;
+                    if (!!unmaskedAttributes_1[attributeValueUri]) return [3 /*break*/, 2];
+                    setUnmaskedAttributes(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[attributeValueUri] = __assign(__assign({}, prev[attributeValueUri]), { loading: true }), _a)));
+                    });
+                    return [4 /*yield*/, (0, mdm_sdk_1.getUnmaskedAttributeValue)(attributeValueUri)];
+                case 1:
+                    unmaskedAttributeValue_1 = _a.sent();
+                    setUnmaskedAttributes(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[attributeValueUri] = {
+                            attributeValue: unmaskedAttributeValue_1,
+                            isUnmasked: true,
+                            loading: false
+                        }, _a)));
+                    });
+                    return [2 /*return*/, unmaskedAttributeValue_1];
+                case 2:
+                    setUnmaskedAttributes(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[attributeValueUri] = __assign(__assign({}, prev[attributeValueUri]), { isUnmasked: true }), _a)));
+                    });
+                    return [2 /*return*/, unmaskedAttributes_1[attributeValueUri].attributeValue];
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _a.sent();
+                    (0, core_1.showErrorMessage)(error_1);
+                    return [2 /*return*/, null];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var maskAttributeValue = (0, react_1.useCallback)(function (attributeValueUri) {
+        setUnmaskedAttributes(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[attributeValueUri] = __assign(__assign({}, prev[attributeValueUri]), { isUnmasked: false }), _a)));
+        });
+    }, []);
+    return (react_1.default.createElement(exports.MaskedAttributesContext.Provider, { value: { unmaskedAttributes: unmaskedAttributes, unmaskAttributeValue: unmaskAttributeValue, maskAttributeValue: maskAttributeValue } }, children));
+};
+exports.MaskedAttributesProvider = MaskedAttributesProvider;

package/cjs/contexts/MaskedAttributesContext/hooks.d.ts

@@ -1,3 +1,7 @@
-import { SimpleAttributeValue } from '@reltio/mdm-sdk';
-export declare const useUnmaskedAttributeValue: (attributeValue: SimpleAttributeValue) => SimpleAttributeValue;
-export declare const useAddUnmaskedAttributeValue: () => (attributeValue: SimpleAttributeValue) => Promise<void>;
+export declare const useUnmaskedAttributeValue: (attributeValueUri: string) => {
+    attributeValue?: import("@reltio/mdm-sdk").SimpleAttributeValue;
+    loading?: boolean;
+    isUnmasked?: boolean;
+};
+export declare const useUnmaskAttributeValue: () => (attributeValueUri: string) => Promise<import("@reltio/mdm-sdk").SimpleAttributeValue>;
+export declare const useMaskAttributeValue: () => (attributeValueUri: string) => void;

package/cjs/contexts/MaskedAttributesContext/hooks.js

@@ -1,18 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAddUnmaskedAttributeValue = exports.useUnmaskedAttributeValue = void 0;
+exports.useMaskAttributeValue = exports.useUnmaskAttributeValue = exports.useUnmaskedAttributeValue = void 0;
 var react_context_selector_1 = require("@fluentui/react-context-selector");
-var _1 = require(".");
+var context_1 = require("./context");
 var useMaskedAttributesContext = function (selector) {
-    return (0, react_context_selector_1.useContextSelector)(_1.MaskedAttributesContext, selector);
+    return (0, react_context_selector_1.useContextSelector)(context_1.MaskedAttributesContext, selector);
 };
-var useUnmaskedAttributeValue = function (attributeValue) {
-    return useMaskedAttributesContext(function (context) {
-        return context ? context.unmaskedAttributesValues[attributeValue.uri] : attributeValue;
+var useUnmaskedAttributeValue = function (attributeValueUri) {
+    return useMaskedAttributesContext(function (_a) {
+        var unmaskedAttributes = _a.unmaskedAttributes;
+        return unmaskedAttributes[attributeValueUri];
     });
 };
 exports.useUnmaskedAttributeValue = useUnmaskedAttributeValue;
-var useAddUnmaskedAttributeValue = function () {
-    return useMaskedAttributesContext(function (context) { return (context ? context.addUnmaskedAttributeValue : Promise.resolve); });
+var useUnmaskAttributeValue = function () {
+    return useMaskedAttributesContext(function (_a) {
+        var unmaskAttributeValue = _a.unmaskAttributeValue;
+        return unmaskAttributeValue;
+    });
 };
-exports.useAddUnmaskedAttributeValue = useAddUnmaskedAttributeValue;
+exports.useUnmaskAttributeValue = useUnmaskAttributeValue;
+var useMaskAttributeValue = function () { return useMaskedAttributesContext(function (_a) {
+    var maskAttributeValue = _a.maskAttributeValue;
+    return maskAttributeValue;
+}); };
+exports.useMaskAttributeValue = useMaskAttributeValue;