@reltio/components 1.4.1861 → 1.4.1863

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

@@ -1,13 +1,2 @@
-import { ReactNode } from 'react';
-import { SimpleAttributeValue } from '@reltio/mdm-sdk';
-type UnmaskedAttributesValues = Record<string, SimpleAttributeValue>;
-export type MaskedAttributesContextType = {
-    unmaskedAttributesValues: UnmaskedAttributesValues;
-    addUnmaskedAttributeValue: (attributeValue: SimpleAttributeValue) => Promise<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 {};
+export { MaskedAttributesProvider } from './context';
+export { useUnmaskedAttributeValue, useUnmaskAttributeValue, useMaskAttributeValue } from './hooks';

package/cjs/contexts/MaskedAttributesContext/index.js

@@ -1,106 +1,9 @@
 "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 errors_1 = require("../../core/errors");
-exports.MaskedAttributesContext = (0, react_context_selector_1.createContext)(null);
-var MaskedAttributesProvider = function (_a) {
-    var children = _a.children;
-    var _b = (0, react_1.useState)({}), unmaskedAttributesValues = _b[0], setUnmaskedAttributesValues = _b[1];
-    var addUnmaskedAttributeValue = (0, react_1.useCallback)(function (attributeValue) { return __awaiter(void 0, void 0, void 0, function () {
-        var unmaskedAttributeValue_1, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, (0, mdm_sdk_1.getUnmaskedAttributeValue)(attributeValue.uri)];
-                case 1:
-                    unmaskedAttributeValue_1 = _a.sent();
-                    setUnmaskedAttributesValues(function (prev) {
-                        var _a;
-                        return (__assign(__assign({}, prev), (_a = {}, _a[attributeValue.uri] = unmaskedAttributeValue_1, _a)));
-                    });
-                    return [3 /*break*/, 3];
-                case 2:
-                    error_1 = _a.sent();
-                    (0, errors_1.showErrorMessage)(error_1);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    return (react_1.default.createElement(exports.MaskedAttributesContext.Provider, { value: { unmaskedAttributesValues: unmaskedAttributesValues, addUnmaskedAttributeValue: addUnmaskedAttributeValue } }, children));
-};
-exports.MaskedAttributesProvider = MaskedAttributesProvider;
+exports.useMaskAttributeValue = exports.useUnmaskAttributeValue = exports.useUnmaskedAttributeValue = exports.MaskedAttributesProvider = void 0;
+var context_1 = require("./context");
+Object.defineProperty(exports, "MaskedAttributesProvider", { enumerable: true, get: function () { return context_1.MaskedAttributesProvider; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useUnmaskedAttributeValue", { enumerable: true, get: function () { return hooks_1.useUnmaskedAttributeValue; } });
+Object.defineProperty(exports, "useUnmaskAttributeValue", { enumerable: true, get: function () { return hooks_1.useUnmaskAttributeValue; } });
+Object.defineProperty(exports, "useMaskAttributeValue", { enumerable: true, get: function () { return hooks_1.useMaskAttributeValue; } });

package/cjs/contexts/index.d.ts

@@ -34,4 +34,4 @@ export { ConfigPermissionsContext, ConfigPermissionsContextProvider, useAttribut
 export * from './MdmModuleContext';
 export { ReloadDataProvider, useReloadData } from './ReloadDataContext';
 export { SegmentationContext } from './SegmentationContext';
-export { MaskedAttributesProvider } from './MaskedAttributesContext';
+export * from './MaskedAttributesContext';

package/cjs/contexts/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
-exports.MaskedAttributesProvider = exports.SegmentationContext = exports.useReloadData = exports.ReloadDataProvider = void 0;
+exports.SegmentationContext = exports.useReloadData = exports.ReloadDataProvider = void 0;
 var AsyncMountContext_1 = require("./AsyncMountContext");
 Object.defineProperty(exports, "AsyncMountContext", { enumerable: true, get: function () { return AsyncMountContext_1.AsyncMountContext; } });
 var HistoryAppearanceContext_1 = require("./HistoryAppearanceContext");
@@ -105,5 +105,4 @@ Object.defineProperty(exports, "ReloadDataProvider", { enumerable: true, get: fu
 Object.defineProperty(exports, "useReloadData", { enumerable: true, get: function () { return ReloadDataContext_1.useReloadData; } });
 var SegmentationContext_1 = require("./SegmentationContext");
 Object.defineProperty(exports, "SegmentationContext", { enumerable: true, get: function () { return SegmentationContext_1.SegmentationContext; } });
-var MaskedAttributesContext_1 = require("./MaskedAttributesContext");
-Object.defineProperty(exports, "MaskedAttributesProvider", { enumerable: true, get: function () { return MaskedAttributesContext_1.MaskedAttributesProvider; } });
+__exportStar(require("./MaskedAttributesContext"), exports);

package/cjs/hooks/useMaskedAttribute.d.ts

@@ -8,6 +8,7 @@ declare const useMaskedAttribute: ({ attributeType, attributeValue }: Props) =>
     isMasked: boolean;
     toggleMasking: () => void;
     isUnmasking: boolean;
+    unmask: () => Promise<void> | Promise<SimpleAttributeValue>;
     attributeValue: SimpleAttributeValue;
 };
 export default useMaskedAttribute;

package/cjs/hooks/useMaskedAttribute.js

@@ -1,29 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var hooks_1 = require("../contexts/MaskedAttributesContext/hooks");
+var MaskedAttributesContext_1 = require("../contexts/MaskedAttributesContext");
 var useMaskedAttribute = function (_a) {
     var attributeType = _a.attributeType, attributeValue = _a.attributeValue;
-    var isUnmaskingNeeded = !!attributeType.masking;
-    var _b = (0, react_1.useState)(isUnmaskingNeeded), isMasked = _b[0], setIsMasked = _b[1];
-    var _c = (0, react_1.useState)(false), isUnmasking = _c[0], setIsUnmasking = _c[1];
-    var addUnmaskedAttributeValue = (0, hooks_1.useAddUnmaskedAttributeValue)();
-    var unmaskedAttributeValue = (0, hooks_1.useUnmaskedAttributeValue)(attributeValue);
-    (0, react_1.useEffect)(function () {
-        if (isUnmaskingNeeded && addUnmaskedAttributeValue && !isMasked && unmaskedAttributeValue === undefined) {
-            setIsUnmasking(true);
-            addUnmaskedAttributeValue(attributeValue).finally(function () { return setIsUnmasking(false); });
-        }
-    }, [isUnmaskingNeeded, isMasked, addUnmaskedAttributeValue, attributeValue, unmaskedAttributeValue]);
+    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 unmask = (0, react_1.useCallback)(function () {
+        return isUnmaskingNeeded ? unmaskAttributeValue(attributeValue.uri) : Promise.resolve();
+    }, [unmaskAttributeValue, attributeValue.uri, isUnmaskingNeeded]);
     var toggleMasking = (0, react_1.useCallback)(function () {
-        setIsMasked(function (prev) { return !prev; });
-    }, []);
+        if (isUnmasked) {
+            maskAttributeValue(attributeValue.uri);
+        }
+        else {
+            unmask();
+        }
+    }, [attributeValue.uri, isUnmasked, maskAttributeValue, unmask]);
     return {
         isUnmaskingNeeded: isUnmaskingNeeded,
-        isMasked: isMasked,
+        isMasked: !isUnmasked,
         toggleMasking: toggleMasking,
-        isUnmasking: isUnmasking,
-        attributeValue: isMasked ? attributeValue : unmaskedAttributeValue || attributeValue
+        isUnmasking: loading,
+        unmask: unmask,
+        attributeValue: isUnmaskingNeeded && isUnmasked ? unmaskedAttributeValue || attributeValue : attributeValue
     };
 };
 exports.default = useMaskedAttribute;

package/esm/ConnectionEditor/ConnectionEditor.js

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

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

@@ -33,10 +33,11 @@ import { Group } from './components/Group';
 import { EntityCreator } from '../EntityCreator';
 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, 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 = useStyles();
-    var _e = useState(''), inputValue = _e[0], setInputValue = _e[1];
+    var _f = useState(''), inputValue = _f[0], setInputValue = _f[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 handleCreate = onCreate

package/esm/EntitySelector/EntitySelector.test.js

@@ -138,6 +138,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 = shallow(React.createElement(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/esm/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/esm/InlineSimpleAttribute/InlineSimpleAttribute.js

@@ -14,10 +14,16 @@ import { PinButton } from '../PinButton';
 import { CrosswalkMenuItem } from './components/CrosswalkMenuItem';
 import { useAttributeState } from '../hooks/useAttributeState';
 import { useCrosswalkColor, useCrosswalkHighlight } from '../contexts/CrosswalksDisplayContext';
+import useMaskedAttribute from '../hooks/useMaskedAttribute';
+import { MaskingSwitcher } from '../MaskingSwitcher';
 import { useStyles } from './styles';
 export 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 = useAttributeState(), isReadingMode = _c.isReadingMode, isEditingMode = _c.isEditingMode, isHovered = _c.isHovered, onMouseEnter = _c.onMouseEnter, onMouseLeave = _c.onMouseLeave, setReadingMode = _c.setReadingMode, setEditingMode = _c.setEditingMode;
+    var _d = useMaskedAttribute({
+        attributeType: attributeType,
+        attributeValue: rawAttributeValue
+    }), isUnmaskingNeeded = _d.isUnmaskingNeeded, isMasked = _d.isMasked, toggleMasking = _d.toggleMasking, attributeValue = _d.attributeValue, isUnmasking = _d.isUnmasking, unmask = _d.unmask;
     var containerRef = useRef();
     var id = getLastUriPart(attributeValue.uri);
     var crosswalkDisabled = isCrosswalkDisabled(crosswalk);
@@ -28,18 +34,20 @@ export var InlineSimpleAttribute = function (_a) {
     var hasBasicPermission = checkBasicMetadataPermission(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;
     useEffect(function () {
         if (isTemporary && !isEmpty) {
             setEditingMode();
         }
     }, [isEmpty]);
     var color = useCrosswalkColor(crosswalk);
-    var _d = useCrosswalkHighlight(crosswalk), isHighlighted = _d.isHighlighted, isDimmed = _d.isDimmed, highlightCrosswalk = _d.highlightCrosswalk, removeHighlight = _d.removeHighlight;
+    var _e = useCrosswalkHighlight(crosswalk), isHighlighted = _e.isHighlighted, isDimmed = _e.isDimmed, highlightCrosswalk = _e.highlightCrosswalk, removeHighlight = _e.removeHighlight;
     var styles = 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 = [
         {
@@ -51,7 +59,9 @@ export var InlineSimpleAttribute = function (_a) {
             text: i18n.text('Edit'),
             icon: React.createElement(EditIcon, null),
             tooltip: canEdit ? null : i18n.text("You don't have permissions to edit"),
-            onClick: function () { return setEditingMode(); },
+            onClick: function () {
+                unmask().then(setEditingMode);
+            },
             id: 'edit'
         },
         {
@@ -85,6 +95,7 @@ export var InlineSimpleAttribute = function (_a) {
         React.createElement("div", { className: styles.actions },
             showPin && (React.createElement(PinButton, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); }, disabled: !hasBasicPermission })),
             showIgnore && (React.createElement(IgnoreButton, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); }, disabled: !hasBasicPermission })),
+            showMaskingSwitcher && (React.createElement(MaskingSwitcher, { className: styles.maskingControl, isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking })),
             isHovered && !isAutoGeneratedAttribute(attributeType) && (React.createElement(DropDownMenuButton, { MenuItemRenderer: CrosswalkMenuItem, menuId: "simple-attribute-additional-actions-".concat(id), buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
                     icon: MoreVertIcon,
                     size: 'XS',

package/esm/InlineSimpleAttribute/InlineSimpleAttribute.spec.js

@@ -9,6 +9,42 @@ 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 { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
@@ -287,48 +323,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');
-        act(function () {
-            onMouseEnter();
-        });
-        wrapper.update();
-        var actionItems = wrapper.find(DropDownMenuButton).prop('menuItems');
-        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)).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 = {};
-        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).prop('menuItems');
-        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).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');
+                    act(function () {
+                        onMouseEnter();
+                    });
+                    wrapper.update();
+                    actionItems = wrapper.find(DropDownMenuButton).prop('menuItems');
+                    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)).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 = {};
+                    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).prop('menuItems');
+                    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).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/esm/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/esm/InlineSimpleAttribute/styles.js

@@ -44,10 +44,19 @@ export var useStyles = 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/esm/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/esm/MaskingSwitcher/MaskingSwitcher.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import Tooltip from '@mui/material/Tooltip';
@@ -7,7 +8,9 @@ import CircularProgress from '@mui/material/CircularProgress';
 import i18n from 'ui-i18n';
 import { useStyles } from './styles';
 export 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 = useStyles();
-    return (React.createElement(Tooltip, { title: isMasked ? i18n.text('Show') : i18n.text('Hide'), placement: "right" }, isUnmasking ? (React.createElement(CircularProgress, { size: 14, className: styles.switcherWrapper })) : (React.createElement(IconButton, { onClick: onToggleMasking, className: styles.switcherWrapper }, isMasked ? (React.createElement(VisibilityIcon, { className: styles.icon })) : (React.createElement(VisibilityOffIcon, { className: styles.icon }))))));
+    var tooltipTitle = isMasked ? i18n.text('Show') : i18n.text('Hide');
+    return isUnmasking ? (React.createElement(CircularProgress, { size: 16, className: classnames(className, styles.switcherWrapper) })) : (React.createElement(Tooltip, { key: String(isMasked), title: tooltipTitle },
+        React.createElement(IconButton, { "aria-label": tooltipTitle, onClick: onToggleMasking, className: classnames(className, styles.switcherWrapper) }, isMasked ? React.createElement(VisibilityIcon, { className: styles.icon }) : React.createElement(VisibilityOffIcon, { className: styles.icon }))));
 };

package/esm/ReferenceAttributeEditor/ReferenceAttributeEditor.js

@@ -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, 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 })))));
 };
 export default withContext(ScrollToElementContext, function (contextValue, _a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType;

package/esm/ReferenceAttributeEditor/ReferenceAttributeEditor.test.js

@@ -267,11 +267,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: Mode.Suggesting });
                 var component = setUp({ props: props });
                 var entitySelector = component.find(EntitySelector);
-                expect(entitySelector.prop('max')).toBe(20);
                 expect(entitySelector.prop('mode')).toBe(props.mode);
                 expect(entitySelector.prop('metadata')).toBe(defaultMdmValues.metadata);
             });

package/esm/SimpleAttribute/SimpleAttribute.js

@@ -1,6 +1,5 @@
 import React, { useContext, useMemo } from 'react';
 import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, CollaborationObjectTypes, createRelatedObjectUris, isOv, getHistoryAttributeClassName, isRelationUri } from '@reltio/mdm-sdk';
-import { MaskingSwitcher } from '../MaskingSwitcher';
 import classnames from 'classnames';
 import useMaskedAttribute from '../hooks/useMaskedAttribute';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
@@ -10,6 +9,7 @@ import { CommentsContainer } from '../CommentsContainer';
 import { DataTypeValue } from '../DataTypeValue';
 import { PivotingTooltip } from '../PivotingTooltip';
 import { useStyles } from './styles';
+import { MaskingSwitcher } from '../MaskingSwitcher';
 export 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;