@reltio/components 1.4.1858 → 1.4.1860

package/cjs/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js

@@ -68,7 +68,7 @@ var TextFieldWithMentions = function (_a) {
         })));
     };
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className) },
-        react_1.default.createElement(react_mentions_1.MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: MENTIONS_TEXTAREA_CLASSNAME, suggestionsPortalHost: document.body, classNames: (_b = {},
+        react_1.default.createElement(react_mentions_1.MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: MENTIONS_TEXTAREA_CLASSNAME, suggestionsPortalHost: document.body, allowSuggestionsAboveCursor: true, classNames: (_b = {},
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__input")] = styles.mentionsInput,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = styles.mentionsHighlighter,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__control")] = styles.mentionsControl,

package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.js

@@ -34,8 +34,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         zIndex: suggestionsZIndex + '!important',
         borderRadius: '4px',
         backgroundColor: '#fafafa !important',
-        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
-        transform: 'translateY(-100%)'
+        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)'
     },
     mentionsSuggestionsList: {
         maxHeight: '200px',

package/cjs/MaskingSwitcher/MaskingSwitcher.d.ts

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

package/cjs/MaskingSwitcher/MaskingSwitcher.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskingSwitcher = void 0;
+var react_1 = __importDefault(require("react"));
+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"));
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+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 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 }))))));
+};
+exports.MaskingSwitcher = MaskingSwitcher;

package/cjs/MaskingSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { MaskingSwitcher } from './MaskingSwitcher';

package/cjs/MaskingSwitcher/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskingSwitcher = void 0;
+var MaskingSwitcher_1 = require("./MaskingSwitcher");
+Object.defineProperty(exports, "MaskingSwitcher", { enumerable: true, get: function () { return MaskingSwitcher_1.MaskingSwitcher; } });

package/cjs/MaskingSwitcher/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "switcherWrapper">;

package/cjs/MaskingSwitcher/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    icon: {
+        color: theme.palette.text.secondary,
+        fontSize: 18
+    },
+    switcherWrapper: {
+        verticalAlign: 'middle',
+        marginLeft: 8,
+        width: '16px',
+        height: '16px'
+    }
+}); });

package/cjs/SaveSegmentDialog/SaveSegmentDialog.js

@@ -115,7 +115,7 @@ var SaveSegmentDialog = function (_a) {
         }
     }, [isOpen, data]);
     return (react_1.default.createElement(Dialog_1.default, { onClose: onClose, open: isOpen, PaperProps: { classes: { root: styles.root } } },
-        react_1.default.createElement(DialogTitle_1.default, null, shouldSaveAsNew ? ui_i18n_1.default.text('Save as new segment') : ui_i18n_1.default.text('Save segment')),
+        react_1.default.createElement(DialogTitle_1.default, null, shouldSaveAsNew ? ui_i18n_1.default.text('Save as a new segment') : ui_i18n_1.default.text('Save segment')),
         react_1.default.createElement(DialogContent_1.default, { className: styles.dialogContent },
             react_1.default.createElement(TextEditor_1.TextEditor, { label: ui_i18n_1.default.text('Name'), required: true, variant: "filled", onInput: handleChangeName, value: name, size: "small", autoFocus: true }),
             react_1.default.createElement(TextEditor_1.TextEditor, { label: ui_i18n_1.default.text('Description (optional)'), multiline: true, variant: "filled", value: description, onInput: handleChangeDescription, size: "small", rows: 5 }),

package/cjs/SimpleAttribute/IntegrationSimpleAttribute.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/SimpleAttribute/IntegrationSimpleAttribute.test.js

@@ -0,0 +1,189 @@
+"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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ramda_1 = require("ramda");
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var mdmSdk = __importStar(require("@reltio/mdm-sdk"));
+var MaskedAttributesContext_1 = require("../contexts/MaskedAttributesContext");
+var SimpleAttribute_1 = require("./SimpleAttribute");
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getUnmaskedAttributeValue: jest.fn() })); });
+describe('masking/unmasking behaviour', function () {
+    var getUnmaskedAttributeValueMock = jest.spyOn(mdmSdk, 'getUnmaskedAttributeValue');
+    beforeAll(function () {
+        getUnmaskedAttributeValueMock.mockResolvedValue({
+            value: 'Unmasked value',
+            uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh'
+        });
+    });
+    var defaultAttributeType = { type: 'String', name: 'Name', uri: 'URI', masking: { regexPattern: '.*' } };
+    var defaultAttributeValue = { value: 'Masked value', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
+    var setUp = function (isMaskingNeeded) {
+        if (isMaskingNeeded === void 0) { isMaskingNeeded = true; }
+        var attributeType = isMaskingNeeded ? defaultAttributeType : (0, ramda_1.dissoc)('masking', defaultAttributeType);
+        var container = (0, react_2.render)(react_1.default.createElement(MaskedAttributesContext_1.MaskedAttributesProvider, null,
+            react_1.default.createElement(SimpleAttribute_1.SimpleAttribute, { attributeType: attributeType, attributeValue: defaultAttributeValue }))).container;
+        var user = user_event_1.default.setup();
+        return { container: container, user: user };
+    };
+    it('should not render MaskingSwitcher if attribute should not be masked', function () {
+        var container = setUp(false).container;
+        expect(container.querySelector('.switcherWrapper')).not.toBeInTheDocument();
+    });
+    it('should render MaskingSwitcher if attribute should be masked', function () {
+        var container = setUp().container;
+        expect(container.querySelector('.switcherWrapper')).toBeInTheDocument();
+    });
+    it('should call getUnmaskedAttributeValue when MaskingSwitcher is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(getUnmaskedAttributeValueMock).toHaveBeenCalledWith(defaultAttributeValue.uri);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render unmasked value when MaskingSwitcher is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    expect(react_2.screen.getByText('Masked value')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(react_2.screen.queryByText('Masked value')).not.toBeInTheDocument();
+                    expect(react_2.screen.getByText('Unmasked value')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render masked value when MaskingSwitcher is clicked twice', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    expect(react_2.screen.getByText('Masked value')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(container.querySelector('.switcherWrapper'))];
+                case 1:
+                    _b.sent();
+                    expect(react_2.screen.queryByText('Masked value')).not.toBeInTheDocument();
+                    expect(react_2.screen.getByText('Unmasked value')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(container.querySelector('.switcherWrapper'))];
+                case 2:
+                    _b.sent();
+                    expect(react_2.screen.getByText('Masked value')).toBeInTheDocument();
+                    expect(react_2.screen.queryByText('Unmasked value')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render CircularProgress while unmasked attribute value is loading', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resolveGetUnmaskedAttributeValue, _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    getUnmaskedAttributeValueMock.mockImplementation(function () { return new Promise(function (resolve) { return (resolveGetUnmaskedAttributeValue = resolve); }); });
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(react_2.screen.getByRole('progressbar')).toBeInTheDocument();
+                    return [4 /*yield*/, resolveGetUnmaskedAttributeValue({
+                            value: 'Unmasked value',
+                            uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh'
+                        })];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, react_2.screen.findByText('Unmasked value')];
+                case 3:
+                    _b.sent();
+                    expect(react_2.screen.queryByRole('progressbar')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/cjs/SimpleAttribute/SimpleAttribute.d.ts

@@ -5,5 +5,5 @@ type Props = {
     attributeType: AttributeType;
     inlined?: boolean;
 };
-export declare const SimpleAttribute: ({ className, attributeType, attributeValue, inlined }: Props) => JSX.Element;
+export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => JSX.Element;
 export {};

package/cjs/SimpleAttribute/SimpleAttribute.js

@@ -29,7 +29,9 @@ 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");
 var HistoryAppearanceContext_1 = require("../contexts/HistoryAppearanceContext");
 var HighlightedValuesContext_1 = require("../contexts/HighlightedValuesContext");
@@ -39,27 +41,36 @@ var PivotingTooltip_1 = require("../PivotingTooltip");
 var styles_1 = require("./styles");
 var SimpleAttribute = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
+    var _h = (0, useMaskedAttribute_1.default)({
+        attributeType: attributeType,
+        attributeValue: rawAttributeValue
+    }), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
     var styles = (0, styles_1.useStyles)();
-    var _h = (0, react_1.useContext)(HighlightedValuesContext_1.HighlightedValuesContext), _j = _h.highlightedValuesUris, highlightedValuesUris = _j === void 0 ? [] : _j, highlightedClassName = _h.highlightedClassName;
+    var _j = (0, react_1.useContext)(HighlightedValuesContext_1.HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
     var appearance = (0, react_1.useContext)(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
     var attributeAppearance = (0, mdm_sdk_1.getHistoryAppearanceByUri)(attributeValue.uri, appearance);
     var historyClassName = (0, mdm_sdk_1.getHistoryAttributeClassName)(attributeAppearance);
-    var dataTypeValue = (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType) }));
+    var dataTypeValue = (0, react_1.useMemo)(function () { return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType) })); }, [attributeValue, attributeType]);
     var objectType = (0, mdm_sdk_1.isRelationUri)(attributeValue.uri)
         ? mdm_sdk_1.CollaborationObjectTypes.RELATION_ATTRIBUTE
         : mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE;
+    var unmaskingControl = isUnmaskingNeeded && (react_1.default.createElement(MaskingSwitcher_1.MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
     return inlined || historyClassName ? (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, (_b = {},
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
             react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, styles[historyClassName], (_d = {},
                     _d[styles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
-                    _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+                    _d)), "data-reltio-id": "reltio-attribute-value" },
+                dataTypeValue,
+                unmaskingControl)))) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
             _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _e)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
-            react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
+            react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
+                dataTypeValue,
+                unmaskingControl)),
         react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

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

@@ -0,0 +1,3 @@
+import { SimpleAttributeValue } from '@reltio/mdm-sdk';
+export declare const useUnmaskedAttributeValue: (attributeValue: SimpleAttributeValue) => SimpleAttributeValue;
+export declare const useAddUnmaskedAttributeValue: () => (attributeValue: SimpleAttributeValue) => Promise<void>;

package/cjs/contexts/MaskedAttributesContext/hooks.js

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

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

@@ -0,0 +1,13 @@
+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 {};

package/cjs/contexts/MaskedAttributesContext/index.js

@@ -0,0 +1,106 @@
+"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;

package/cjs/contexts/index.d.ts

@@ -34,3 +34,4 @@ export { ConfigPermissionsContext, ConfigPermissionsContextProvider, useAttribut
 export * from './MdmModuleContext';
 export { ReloadDataProvider, useReloadData } from './ReloadDataContext';
 export { SegmentationContext } from './SegmentationContext';
+export { MaskedAttributesProvider } 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.SegmentationContext = exports.useReloadData = exports.ReloadDataProvider = void 0;
+exports.MaskedAttributesProvider = 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,3 +105,5 @@ 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; } });

package/cjs/hooks/useMaskedAttribute.d.ts

@@ -0,0 +1,13 @@
+import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeValue: SimpleAttributeValue;
+    attributeType: AttributeType;
+};
+declare const useMaskedAttribute: ({ attributeType, attributeValue }: Props) => {
+    isUnmaskingNeeded: boolean;
+    isMasked: boolean;
+    toggleMasking: () => void;
+    isUnmasking: boolean;
+    attributeValue: SimpleAttributeValue;
+};
+export default useMaskedAttribute;

package/cjs/hooks/useMaskedAttribute.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var hooks_1 = require("../contexts/MaskedAttributesContext/hooks");
+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 toggleMasking = (0, react_1.useCallback)(function () {
+        setIsMasked(function (prev) { return !prev; });
+    }, []);
+    return {
+        isUnmaskingNeeded: isUnmaskingNeeded,
+        isMasked: isMasked,
+        toggleMasking: toggleMasking,
+        isUnmasking: isUnmasking,
+        attributeValue: isMasked ? attributeValue : unmaskedAttributeValue || attributeValue
+    };
+};
+exports.default = useMaskedAttribute;

package/cjs/index.d.ts

@@ -110,6 +110,7 @@ export { FilterValueEditor } from './FilterValueEditor';
 export { DropDownEditor } from './DropDownEditor';
 export { EmptySearchResult } from './EmptySearchResult';
 export { FileTypeEditor } from './FileTypeEditor';
+export { MaskingSwitcher } from './MaskingSwitcher';
 export { SaveSegmentDialog } from './SaveSegmentDialog';
 export { withChartDataPercents as withPercents } from './HOCs/withChartDataPercents';
 export { withFilterAtBottom } from './HOCs/withFilterAtBottom';

package/cjs/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReadOnlyAttributeValuesBlock = exports.PieChart = exports.OvIcon = exports.NestedAttributeEditor = exports.NestedAttribute = exports.MoreAttributesButton = exports.InlineReferenceAttribute = exports.InlineNestedAttribute = exports.InlineImageAttribute = exports.InlineAttributesPager = exports.EditableImageAttributesLine = exports.FilterButton = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.EntitySelector = exports.EntityCreator = exports.AttributesPager = exports.AttributesList = exports.EditableAttribute = exports.DropDownMenuButton = exports.DescriptionIcon = exports.DefaultCellValueRenderer = exports.ColumnsSettingsPopup = exports.ColumnsSettings = exports.ColorBar = exports.CollapseRowButton = exports.ChartsFactory = exports.CardinalityMessage = exports.BranchDecorator = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.BasicTablePagination = exports.basicTableViewState = exports.BasicTable = exports.BasicAttributeSelector = exports.BarChart = exports.AvatarWithFallback = exports.AutoSizeList = exports.AttributesView = exports.AttributesValuesEditor = exports.AttributesFiltersButton = exports.AttributesFiltersBuilder = exports.AttributesFilterSelector = exports.AttributesErrorsPanel = exports.AttributeListItem = exports.AttributeGroupIcon = exports.ArrowExpandButton = exports.ActionsPanel = exports.ActionButton = void 0;
 exports.ErrorWrapper = exports.ErrorMessage = exports.ConfigureColumnsPopup = exports.ConnectionEditor = exports.DropDownSelector = exports.ReactSelectOptionWithCheckIcon = exports.ReactSelectMenuWithPopper = exports.ReactSelectMenuList = exports.ReactSelectLoadMoreButton = exports.ReactSelectDropdownIndicatorWithIconButton = exports.ReactSelectDropdownIndicator = exports.Highlighter = exports.HierarchyNodeTitle = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.ExpandableSearchInput = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.Drawer = exports.DataTypeValue = exports.DataTenantBadge = exports.ConnectionRelationTypeSelector = exports.CollaborationItem = exports.ConfirmationDialog = exports.CommentsContainer = exports.ColoredSourceIcon = exports.CollapseButton = exports.TreeChart = exports.TableWithBars = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleAttributeEditor = exports.SimpleAttribute = exports.RowCellAutoSizer = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.ReferenceAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesPager = exports.ReadOnlyAttributesList = exports.ReadOnlyAttribute = void 0;
-exports.CrosswalkType = exports.AttributesTable = exports.CrosswalkDragLayer = exports.SourceCrosswalksRow = exports.CrosswalkEditor = exports.useModifiedEntity = exports.useCrosswalkActions = exports.groupCrosswalksByTypesAndSources = exports.ActivityTypes = exports.useProfileActivitiesLoader = exports.useActivitiesLoader = exports.ActivityLogFilter = exports.ActivityLog = exports.rerenderWrapper = exports.mockElementSizes = exports.mockBasicTableSizing = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsFilter = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.SaveSegmentDialog = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = void 0;
+exports.CrosswalkType = exports.AttributesTable = exports.CrosswalkDragLayer = exports.SourceCrosswalksRow = exports.CrosswalkEditor = exports.useModifiedEntity = exports.useCrosswalkActions = exports.groupCrosswalksByTypesAndSources = exports.ActivityTypes = exports.useProfileActivitiesLoader = exports.useActivitiesLoader = exports.ActivityLogFilter = exports.ActivityLog = exports.rerenderWrapper = exports.mockElementSizes = exports.mockBasicTableSizing = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsFilter = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.SaveSegmentDialog = exports.MaskingSwitcher = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = void 0;
 __exportStar(require("./HOCs"), exports);
 __exportStar(require("./components"), exports);
 __exportStar(require("./constants"), exports);
@@ -240,6 +240,8 @@ var EmptySearchResult_1 = require("./EmptySearchResult");
 Object.defineProperty(exports, "EmptySearchResult", { enumerable: true, get: function () { return EmptySearchResult_1.EmptySearchResult; } });
 var FileTypeEditor_1 = require("./FileTypeEditor");
 Object.defineProperty(exports, "FileTypeEditor", { enumerable: true, get: function () { return FileTypeEditor_1.FileTypeEditor; } });
+var MaskingSwitcher_1 = require("./MaskingSwitcher");
+Object.defineProperty(exports, "MaskingSwitcher", { enumerable: true, get: function () { return MaskingSwitcher_1.MaskingSwitcher; } });
 var SaveSegmentDialog_1 = require("./SaveSegmentDialog");
 Object.defineProperty(exports, "SaveSegmentDialog", { enumerable: true, get: function () { return SaveSegmentDialog_1.SaveSegmentDialog; } });
 // HOCs

package/esm/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js

@@ -39,7 +39,7 @@ export var TextFieldWithMentions = function (_a) {
         })));
     };
     return (React.createElement("div", { className: classnames(styles.root, className) },
-        React.createElement(MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: MENTIONS_TEXTAREA_CLASSNAME, suggestionsPortalHost: document.body, classNames: (_b = {},
+        React.createElement(MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: MENTIONS_TEXTAREA_CLASSNAME, suggestionsPortalHost: document.body, allowSuggestionsAboveCursor: true, classNames: (_b = {},
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__input")] = styles.mentionsInput,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = styles.mentionsHighlighter,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__control")] = styles.mentionsControl,

package/esm/CollaborationItem/components/TextFieldWithMentions/styles.js

@@ -31,8 +31,7 @@ export var useStyles = makeStyles(function (theme) { return ({
         zIndex: suggestionsZIndex + '!important',
         borderRadius: '4px',
         backgroundColor: '#fafafa !important',
-        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
-        transform: 'translateY(-100%)'
+        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)'
     },
     mentionsSuggestionsList: {
         maxHeight: '200px',

package/esm/MaskingSwitcher/MaskingSwitcher.d.ts

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

package/esm/MaskingSwitcher/MaskingSwitcher.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+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 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 }))))));
+};

package/esm/MaskingSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { MaskingSwitcher } from './MaskingSwitcher';

package/esm/MaskingSwitcher/index.js

@@ -0,0 +1 @@
+export { MaskingSwitcher } from './MaskingSwitcher';

package/esm/MaskingSwitcher/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "switcherWrapper">;

package/esm/MaskingSwitcher/styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    icon: {
+        color: theme.palette.text.secondary,
+        fontSize: 18
+    },
+    switcherWrapper: {
+        verticalAlign: 'middle',
+        marginLeft: 8,
+        width: '16px',
+        height: '16px'
+    }
+}); });

package/esm/SaveSegmentDialog/SaveSegmentDialog.js

@@ -86,7 +86,7 @@ export var SaveSegmentDialog = function (_a) {
         }
     }, [isOpen, data]);
     return (React.createElement(Dialog, { onClose: onClose, open: isOpen, PaperProps: { classes: { root: styles.root } } },
-        React.createElement(DialogTitle, null, shouldSaveAsNew ? i18n.text('Save as new segment') : i18n.text('Save segment')),
+        React.createElement(DialogTitle, null, shouldSaveAsNew ? i18n.text('Save as a new segment') : i18n.text('Save segment')),
         React.createElement(DialogContent, { className: styles.dialogContent },
             React.createElement(TextEditor, { label: i18n.text('Name'), required: true, variant: "filled", onInput: handleChangeName, value: name, size: "small", autoFocus: true }),
             React.createElement(TextEditor, { label: i18n.text('Description (optional)'), multiline: true, variant: "filled", value: description, onInput: handleChangeDescription, size: "small", rows: 5 }),

package/esm/SimpleAttribute/IntegrationSimpleAttribute.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/SimpleAttribute/IntegrationSimpleAttribute.test.js

@@ -0,0 +1,161 @@
+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 __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 { dissoc } from 'ramda';
+import React from 'react';
+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 { 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 () {
+    var getUnmaskedAttributeValueMock = jest.spyOn(mdmSdk, 'getUnmaskedAttributeValue');
+    beforeAll(function () {
+        getUnmaskedAttributeValueMock.mockResolvedValue({
+            value: 'Unmasked value',
+            uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh'
+        });
+    });
+    var defaultAttributeType = { type: 'String', name: 'Name', uri: 'URI', masking: { regexPattern: '.*' } };
+    var defaultAttributeValue = { value: 'Masked value', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
+    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 user = userEvent.setup();
+        return { container: container, user: user };
+    };
+    it('should not render MaskingSwitcher if attribute should not be masked', function () {
+        var container = setUp(false).container;
+        expect(container.querySelector('.switcherWrapper')).not.toBeInTheDocument();
+    });
+    it('should render MaskingSwitcher if attribute should be masked', function () {
+        var container = setUp().container;
+        expect(container.querySelector('.switcherWrapper')).toBeInTheDocument();
+    });
+    it('should call getUnmaskedAttributeValue when MaskingSwitcher is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(getUnmaskedAttributeValueMock).toHaveBeenCalledWith(defaultAttributeValue.uri);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render unmasked value when MaskingSwitcher is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    expect(screen.getByText('Masked value')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(screen.queryByText('Masked value')).not.toBeInTheDocument();
+                    expect(screen.getByText('Unmasked value')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render masked value when MaskingSwitcher is clicked twice', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    expect(screen.getByText('Masked value')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(container.querySelector('.switcherWrapper'))];
+                case 1:
+                    _b.sent();
+                    expect(screen.queryByText('Masked value')).not.toBeInTheDocument();
+                    expect(screen.getByText('Unmasked value')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(container.querySelector('.switcherWrapper'))];
+                case 2:
+                    _b.sent();
+                    expect(screen.getByText('Masked value')).toBeInTheDocument();
+                    expect(screen.queryByText('Unmasked value')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render CircularProgress while unmasked attribute value is loading', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resolveGetUnmaskedAttributeValue, _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    getUnmaskedAttributeValueMock.mockImplementation(function () { return new Promise(function (resolve) { return (resolveGetUnmaskedAttributeValue = resolve); }); });
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+                    return [4 /*yield*/, resolveGetUnmaskedAttributeValue({
+                            value: 'Unmasked value',
+                            uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh'
+                        })];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, screen.findByText('Unmasked value')];
+                case 3:
+                    _b.sent();
+                    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/esm/SimpleAttribute/SimpleAttribute.d.ts

@@ -5,5 +5,5 @@ type Props = {
     attributeType: AttributeType;
     inlined?: boolean;
 };
-export declare const SimpleAttribute: ({ className, attributeType, attributeValue, inlined }: Props) => JSX.Element;
+export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => JSX.Element;
 export {};

package/esm/SimpleAttribute/SimpleAttribute.js

@@ -1,6 +1,8 @@
-import React, { useContext } from 'react';
+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';
 import { HistoryDiffContext } from '../contexts/HistoryAppearanceContext';
 import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
@@ -10,27 +12,36 @@ import { PivotingTooltip } from '../PivotingTooltip';
 import { useStyles } from './styles';
 export var SimpleAttribute = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
+    var _h = useMaskedAttribute({
+        attributeType: attributeType,
+        attributeValue: rawAttributeValue
+    }), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
     var styles = useStyles();
-    var _h = useContext(HighlightedValuesContext), _j = _h.highlightedValuesUris, highlightedValuesUris = _j === void 0 ? [] : _j, highlightedClassName = _h.highlightedClassName;
+    var _j = useContext(HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
     var appearance = useContext(HistoryDiffContext).appearance;
     var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
     var historyClassName = getHistoryAttributeClassName(attributeAppearance);
-    var dataTypeValue = (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) }));
+    var dataTypeValue = useMemo(function () { return (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) })); }, [attributeValue, attributeType]);
     var objectType = isRelationUri(attributeValue.uri)
         ? CollaborationObjectTypes.RELATION_ATTRIBUTE
         : CollaborationObjectTypes.ENTITY_ATTRIBUTE;
+    var unmaskingControl = isUnmaskingNeeded && (React.createElement(MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
     return inlined || historyClassName ? (React.createElement("div", { className: classnames(className, (_b = {},
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
             React.createElement("span", { className: classnames(styles.attributeValue, styles[historyClassName], (_d = {},
                     _d[styles.ovFalse] = !isOv(attributeValue),
-                    _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+                    _d)), "data-reltio-id": "reltio-attribute-value" },
+                dataTypeValue,
+                unmaskingControl)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
             _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _e)) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
-            React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
+            React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
+                dataTypeValue,
+                unmaskingControl)),
         React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

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

@@ -0,0 +1,3 @@
+import { SimpleAttributeValue } from '@reltio/mdm-sdk';
+export declare const useUnmaskedAttributeValue: (attributeValue: SimpleAttributeValue) => SimpleAttributeValue;
+export declare const useAddUnmaskedAttributeValue: () => (attributeValue: SimpleAttributeValue) => Promise<void>;

package/esm/contexts/MaskedAttributesContext/hooks.js

@@ -0,0 +1,13 @@
+import { useContextSelector } from '@fluentui/react-context-selector';
+import { MaskedAttributesContext } from '.';
+var useMaskedAttributesContext = function (selector) {
+    return useContextSelector(MaskedAttributesContext, selector);
+};
+export var useUnmaskedAttributeValue = function (attributeValue) {
+    return useMaskedAttributesContext(function (context) {
+        return context ? context.unmaskedAttributesValues[attributeValue.uri] : attributeValue;
+    });
+};
+export var useAddUnmaskedAttributeValue = function () {
+    return useMaskedAttributesContext(function (context) { return (context ? context.addUnmaskedAttributeValue : Promise.resolve); });
+};

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

@@ -0,0 +1,13 @@
+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 {};

package/esm/contexts/MaskedAttributesContext/index.js

@@ -0,0 +1,79 @@
+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 __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, { useState, useCallback } from 'react';
+import { createContext } from '@fluentui/react-context-selector';
+import { getUnmaskedAttributeValue } from '@reltio/mdm-sdk';
+import { showErrorMessage } from '../../core/errors';
+export var MaskedAttributesContext = createContext(null);
+export var MaskedAttributesProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState({}), unmaskedAttributesValues = _b[0], setUnmaskedAttributesValues = _b[1];
+    var addUnmaskedAttributeValue = 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*/, 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();
+                    showErrorMessage(error_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    return (React.createElement(MaskedAttributesContext.Provider, { value: { unmaskedAttributesValues: unmaskedAttributesValues, addUnmaskedAttributeValue: addUnmaskedAttributeValue } }, children));
+};

package/esm/contexts/index.d.ts

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

package/esm/contexts/index.js

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

package/esm/hooks/useMaskedAttribute.d.ts

@@ -0,0 +1,13 @@
+import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeValue: SimpleAttributeValue;
+    attributeType: AttributeType;
+};
+declare const useMaskedAttribute: ({ attributeType, attributeValue }: Props) => {
+    isUnmaskingNeeded: boolean;
+    isMasked: boolean;
+    toggleMasking: () => void;
+    isUnmasking: boolean;
+    attributeValue: SimpleAttributeValue;
+};
+export default useMaskedAttribute;

package/esm/hooks/useMaskedAttribute.js

@@ -0,0 +1,27 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useUnmaskedAttributeValue, useAddUnmaskedAttributeValue } from '../contexts/MaskedAttributesContext/hooks';
+var useMaskedAttribute = function (_a) {
+    var attributeType = _a.attributeType, attributeValue = _a.attributeValue;
+    var isUnmaskingNeeded = !!attributeType.masking;
+    var _b = useState(isUnmaskingNeeded), isMasked = _b[0], setIsMasked = _b[1];
+    var _c = useState(false), isUnmasking = _c[0], setIsUnmasking = _c[1];
+    var addUnmaskedAttributeValue = useAddUnmaskedAttributeValue();
+    var unmaskedAttributeValue = useUnmaskedAttributeValue(attributeValue);
+    useEffect(function () {
+        if (isUnmaskingNeeded && addUnmaskedAttributeValue && !isMasked && unmaskedAttributeValue === undefined) {
+            setIsUnmasking(true);
+            addUnmaskedAttributeValue(attributeValue).finally(function () { return setIsUnmasking(false); });
+        }
+    }, [isUnmaskingNeeded, isMasked, addUnmaskedAttributeValue, attributeValue, unmaskedAttributeValue]);
+    var toggleMasking = useCallback(function () {
+        setIsMasked(function (prev) { return !prev; });
+    }, []);
+    return {
+        isUnmaskingNeeded: isUnmaskingNeeded,
+        isMasked: isMasked,
+        toggleMasking: toggleMasking,
+        isUnmasking: isUnmasking,
+        attributeValue: isMasked ? attributeValue : unmaskedAttributeValue || attributeValue
+    };
+};
+export default useMaskedAttribute;

package/esm/index.d.ts

@@ -110,6 +110,7 @@ export { FilterValueEditor } from './FilterValueEditor';
 export { DropDownEditor } from './DropDownEditor';
 export { EmptySearchResult } from './EmptySearchResult';
 export { FileTypeEditor } from './FileTypeEditor';
+export { MaskingSwitcher } from './MaskingSwitcher';
 export { SaveSegmentDialog } from './SaveSegmentDialog';
 export { withChartDataPercents as withPercents } from './HOCs/withChartDataPercents';
 export { withFilterAtBottom } from './HOCs/withFilterAtBottom';

package/esm/index.js

@@ -111,6 +111,7 @@ export { FilterValueEditor } from './FilterValueEditor';
 export { DropDownEditor } from './DropDownEditor';
 export { EmptySearchResult } from './EmptySearchResult';
 export { FileTypeEditor } from './FileTypeEditor';
+export { MaskingSwitcher } from './MaskingSwitcher';
 export { SaveSegmentDialog } from './SaveSegmentDialog';
 // HOCs
 export { withChartDataPercents as withPercents } from './HOCs/withChartDataPercents';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1858",
+  "version": "1.4.1860",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1805",
+    "@reltio/mdm-sdk": "^1.4.1806",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",