@reltio/components 1.4.908 → 1.4.912

package/cjs/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare enum ActionButtonMode {
+    iconButton = "iconButton",
+    button = "button",
+    menuItem = "menuItem"
+}
+export declare type Props = {
+    className?: string;
+    disabled?: boolean;
+    icon: React.ElementType;
+    label: string;
+    mode: ActionButtonMode;
+    onClick: () => void;
+    onMenuClose?: () => void;
+};
+export declare const ActionButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/cjs/components/ActionButton/ActionButton.js

@@ -0,0 +1,90 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionButton = exports.ActionButtonMode = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var core_1 = require("../../core");
+var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
+var SmallIconButton_1 = require("../SmallIconButton");
+var ActionButtonMode;
+(function (ActionButtonMode) {
+    ActionButtonMode["iconButton"] = "iconButton";
+    ActionButtonMode["button"] = "button";
+    ActionButtonMode["menuItem"] = "menuItem";
+})(ActionButtonMode = exports.ActionButtonMode || (exports.ActionButtonMode = {}));
+exports.ActionButton = react_1.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, label = _a.label, disabled = _a.disabled, Icon = _a.icon, _c = _a.onClick, onClick = _c === void 0 ? core_1.noop : _c, _d = _a.onMenuClose, onMenuClose = _d === void 0 ? core_1.noop : _d, otherProps = __rest(_a, ["className", "mode", "label", "disabled", "icon", "onClick", "onMenuClose"]);
+    var styles = styles_1.useStyles();
+    var getButtonView = function () {
+        switch (mode) {
+            case 'iconButton': {
+                return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({ disabled: disabled, className: classnames_1.default(styles.iconButton, className), size: "S", tooltipTitle: label, onClick: onClick, icon: Icon }, otherProps)));
+            }
+            case 'button': {
+                return (react_1.default.createElement(Button_1.default, __assign({ className: classnames_1.default(styles.button, className), disabled: disabled, startIcon: react_1.default.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon, label: styles.label } }, otherProps),
+                    react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label },
+                        react_1.default.createElement("div", { className: styles.overflowStyle }, label))));
+            }
+            case 'menuItem': {
+                var handleClick = function () {
+                    onMenuClose();
+                    onClick();
+                };
+                return (react_1.default.createElement(MenuItem_1.default, __assign({ classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref }, otherProps),
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Icon, { className: styles.menuIcon }),
+                        react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, label))));
+            }
+        }
+    };
+    return getButtonView();
+});
+exports.ActionButton.displayName = 'ActionButton';

package/cjs/components/ActionButton/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "button" | "startIcon" | "menuItem" | "menuText" | "iconButton" | "overflowStyle" | "menuIcon">;

package/cjs/components/ActionButton/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    button: {
+        padding: '9px 16px 9px 12px',
+        '& svg g path': {
+            fill: theme.palette.primary.main,
+            fillOpacity: 1
+        }
+    },
+    iconButton: {
+        '& svg g path': {
+            fill: theme.palette.primary.main,
+            fillOpacity: 1
+        }
+    },
+    startIcon: {
+        marginLeft: 0,
+        marginRight: '8px',
+        width: '18px',
+        height: '18px',
+        alignItems: 'center'
+    },
+    label: {
+        whiteSpace: 'nowrap',
+        fontSize: '14px',
+        lineHeight: '16px',
+        letterSpacing: 0
+    },
+    overflowStyle: {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    menuIcon: {
+        marginRight: '12px'
+    },
+    menuItem: {
+        minHeight: '28px',
+        padding: '2px 16px 2px 12px'
+    },
+    menuText: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    }
+}); });

package/cjs/components/MergeButton/MergeButton.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ActionButtonMode } from '../ActionButton/ActionButton';
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    className?: string;
+    entities: Entity[];
+    entity: Entity;
+    mode?: ActionButtonMode;
+    onMenuClose?: () => void;
+    disabled?: boolean;
+    onStartRequest?: () => void;
+    onFinishRequest?: () => void;
+};
+export declare const MergeButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export {};

package/cjs/components/MergeButton/MergeButton.js

@@ -0,0 +1,64 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MergeButton = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mergeIcon_svg_1 = __importDefault(require("./mergeIcon.svg"));
+var core_1 = require("../../core");
+var ActionButton_1 = require("../ActionButton/ActionButton");
+var hooks_1 = require("../../hooks");
+exports.MergeButton = react_1.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButton_1.ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? core_1.noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest"]);
+    var sendMergeAllRequest = hooks_1.useMergeAllRequest({
+        entity: entity,
+        entities: entities,
+        onStartRequest: onStartRequest,
+        onFinishRequest: onFinishRequest
+    }).sendMergeAllRequest;
+    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: ui_i18n_1.default.text('Merge'), icon: mergeIcon_svg_1.default, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+});
+exports.MergeButton.displayName = 'mergeButton';

package/cjs/components/NotMatchButton/NotMatchButton.d.ts

@@ -0,0 +1,15 @@
+import { Entity } from '@reltio/mdm-sdk';
+import { ActionButtonMode } from '../ActionButton/ActionButton';
+import React from 'react';
+declare type Props = {
+    className?: string;
+    entities: Entity[];
+    entity: Entity;
+    mode?: ActionButtonMode;
+    onMenuClose?: () => void;
+    disabled?: boolean;
+    onStartRequest?: () => void;
+    onFinishRequest?: () => void;
+};
+export declare const NotMatchButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export {};

package/cjs/components/NotMatchButton/NotMatchButton.js

@@ -0,0 +1,64 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotMatchButton = void 0;
+var ActionButton_1 = require("../ActionButton/ActionButton");
+var react_1 = __importStar(require("react"));
+var notMatch_svg_1 = __importDefault(require("./notMatch.svg"));
+var core_1 = require("../../core");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var useMarkAsNotMatchRequest_1 = require("../../hooks/useMarkAsNotMatchRequest");
+exports.NotMatchButton = react_1.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButton_1.ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? core_1.noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest"]);
+    var sendMarkAsNotMatchRequest = useMarkAsNotMatchRequest_1.useMarkAsNotMatchRequest({
+        entity: entity,
+        entities: entities,
+        onStartRequest: onStartRequest,
+        onFinishRequest: onFinishRequest
+    }).sendMarkAsNotMatchRequest;
+    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: ui_i18n_1.default.text('Not a match'), icon: notMatch_svg_1.default, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+});
+exports.NotMatchButton.displayName = 'notMatchButton';

package/cjs/components/ProfileMatchCard/ProfileMatchCard.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     match: PotentialMatch;
     metadata: Metadata;
     children?: React.ReactNode;
+    className?: string;
 };
-export declare const ProfileMatchCard: ({ children, entitiesMap, entity, match, metadata }: Props) => JSX.Element;
+export declare const ProfileMatchCard: ({ children, entitiesMap, entity, match, metadata, className }: Props) => JSX.Element;
 export {};

package/cjs/components/ProfileMatchCard/ProfileMatchCard.js

@@ -8,10 +8,11 @@ var react_1 = __importDefault(require("react"));
 var styles_1 = require("./styles");
 var ProfileCard_1 = __importDefault(require("../ProfileCard/ProfileCard"));
 var MatchRulesBlock_1 = __importDefault(require("../MatchRulesBlock/MatchRulesBlock"));
+var classnames_1 = __importDefault(require("classnames"));
 var ProfileMatchCard = function (_a) {
-    var children = _a.children, entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata;
+    var children = _a.children, entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata, className = _a.className;
     var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: styles.root },
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
         react_1.default.createElement("div", { className: styles.profileCardWrapper },
             react_1.default.createElement(ProfileCard_1.default, { entity: match.object, classes: { container: styles.profileCardContainer }, disableEntityTypeColor: true }),
             children),

package/cjs/components/attributes/AttributesView/AttributesView.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AttributesViewOwnProps } from '../types';
-declare const AttributesView: ({ mode, attributesCount, ...restProps }: AttributesViewOwnProps) => JSX.Element;
+declare const AttributesView: ({ mode, attributesCount, pinnedAttributes, ...restProps }: AttributesViewOwnProps) => JSX.Element;
 export default AttributesView;

package/cjs/components/attributes/AttributesView/AttributesView.js

@@ -30,7 +30,7 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AttributesView_1 = __importDefault(require("../readMode/AttributesView"));
 var AttributesView_2 = __importDefault(require("../editMode/AttributesView"));
 var AttributesView = function (_a) {
-    var _b = _a.mode, mode = _b === void 0 ? mdm_sdk_1.Mode.Viewing : _b, attributesCount = _a.attributesCount, restProps = __rest(_a, ["mode", "attributesCount"]);
-    return mdm_sdk_1.isViewMode(mode) ? (react_1.default.createElement(AttributesView_1.default, __assign({ attributesCount: attributesCount }, restProps))) : (react_1.default.createElement(AttributesView_2.default, __assign({ mode: mode }, restProps)));
+    var _b = _a.mode, mode = _b === void 0 ? mdm_sdk_1.Mode.Viewing : _b, attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, restProps = __rest(_a, ["mode", "attributesCount", "pinnedAttributes"]);
+    return mdm_sdk_1.isViewMode(mode) ? (react_1.default.createElement(AttributesView_1.default, __assign({ attributesCount: attributesCount }, restProps))) : (react_1.default.createElement(AttributesView_2.default, __assign({ mode: mode, pinnedAttributes: pinnedAttributes }, restProps)));
 };
 exports.default = AttributesView;

package/cjs/components/attributes/AttributesView/index.d.ts

@@ -3,5 +3,5 @@ import { AttributesViewOwnProps } from '../types';
 import AttributesView from './AttributesView';
 declare type Props = Pick<AttributesViewOwnProps, 'entity' | 'mode'>;
 export { AttributesView };
-declare const _default: import("react-redux").ConnectedComponent<({ mode, attributesCount, ...restProps }: AttributesViewOwnProps) => JSX.Element, import("react-redux").Omit<AttributesViewOwnProps, "entity" | "mode"> & Props>;
+declare const _default: import("react-redux").ConnectedComponent<({ mode, attributesCount, pinnedAttributes, ...restProps }: AttributesViewOwnProps) => JSX.Element, import("react-redux").Omit<AttributesViewOwnProps, "entity" | "mode"> & Props>;
 export default _default;

package/cjs/components/attributes/editMode/AttributesList/AttributesList.js

@@ -44,12 +44,14 @@ var MoreAttributesButton_1 = __importDefault(require("../MoreAttributesButton"))
 var constants_1 = require("../../../../constants");
 var attributesView_1 = require("../../helpers/attributesView");
 var helpers_1 = require("./helpers");
+var PinnedAttributesContext_1 = require("../contexts/PinnedAttributesContext");
 var AttributesList = function (_a) {
     var attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? constants_1.ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv;
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var creatableAttrTypes = react_1.useMemo(function () { return mdm_sdk_1.getCreatableAttributeTypes(mode, attrTypes); }, [attrTypes, mode]);
     var moreAttrTypes = helpers_1.getMoreAttrTypes(creatableAttrTypes, entity);
-    var pagersData = react_1.useMemo(function () { return mdm_sdk_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors, showNonOv); }, [attrTypes, mode, entity, showEmptyEditors, showNonOv]);
+    var pinnedAttributes = react_1.useContext(PinnedAttributesContext_1.PinnedAttributesContext);
+    var pagersData = react_1.useMemo(function () { return mdm_sdk_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes); }, [attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes]);
     var _d = react_1.useMemo(function () { return attributesView_1.splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _d[0], regularPagersData = _d[1];
     var onAddMoreAttributes = react_1.useCallback(function (attributeTypes) {
         onAddAttributes(attributeTypes.map(function (attributeType) { return ({ attributeType: attributeType, parentUri: parentUri }); }));

package/cjs/components/attributes/editMode/AttributesPager/AttributeRenderer.js

@@ -34,6 +34,7 @@ var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
 var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
+var PinnedAttributesContext_1 = require("../contexts/PinnedAttributesContext");
 var AttributeRenderer = function (_a) {
     var max = _a.max, values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, drawLines = _a.drawLines, showEmptyEditors = _a.showEmptyEditors, errorMessage = _a.errorMessage, errors = _a.errors, paging = _a.paging, crosswalks = _a.crosswalks, showNonOv = _a.showNonOv, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
     var styles = styles_1.useStyles();
@@ -41,8 +42,10 @@ var AttributeRenderer = function (_a) {
     var _c = react_1.useState(false), hadDeletions = _c[0], setHadDeletions = _c[1];
     var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality, name = attributeType.name, attributeTypeUri = attributeType.uri;
     var isEditableMode = mdm_sdk_1.isEditableMode(mode);
+    var pinnedAttributes = react_1.useContext(PinnedAttributesContext_1.PinnedAttributesContext);
+    var isPinned = react_1.useMemo(function () { return pinnedAttributes === null || pinnedAttributes === void 0 ? void 0 : pinnedAttributes.includes(attributeTypeUri); }, [attributeTypeUri, pinnedAttributes]);
     var isEmptyValues = mdm_sdk_1.isEmptyValue(values);
-    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired) && isEmptyValues;
+    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired || isPinned) && isEmptyValues;
     var emptyEditorValue = react_1.useRef(mdm_sdk_1.createNewAttribute({
         parentUri: parentUri,
         attributeType: attributeType

package/cjs/components/attributes/editMode/AttributesView/AttributesView.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { AttributesViewProps } from '../../types';
 declare type Props = Omit<AttributesViewProps, 'attributesCount'>;
-declare const AttributesView: ({ className, entity, mode, metadata, caption, excludeUris, includeUris }: Props) => JSX.Element;
+declare const AttributesView: ({ className, entity, mode, metadata, caption, excludeUris, includeUris, pinnedAttributes }: Props) => JSX.Element;
 export default AttributesView;

package/cjs/components/attributes/editMode/AttributesView/AttributesView.js

@@ -46,12 +46,18 @@ var AttributesList_1 = __importDefault(require("../AttributesList"));
 var contexts_1 = require("../../../../contexts");
 var attributesView_1 = require("../../helpers/attributesView");
 var styles_1 = require("./styles");
+var PinnedAttributesContext_1 = require("../contexts/PinnedAttributesContext");
 var AttributesView = function (_a) {
     var _b;
-    var className = _a.className, _c = _a.entity, entity = _c === void 0 ? {} : _c, mode = _a.mode, metadata = _a.metadata, _d = _a.caption, caption = _d === void 0 ? '' : _d, _e = _a.excludeUris, excludeUris = _e === void 0 ? [] : _e, _f = _a.includeUris, includeUris = _f === void 0 ? [] : _f;
+    var className = _a.className, _c = _a.entity, entity = _c === void 0 ? {} : _c, mode = _a.mode, metadata = _a.metadata, _d = _a.caption, caption = _d === void 0 ? '' : _d, _e = _a.excludeUris, excludeUris = _e === void 0 ? [] : _e, _f = _a.includeUris, includeUris = _f === void 0 ? [] : _f, pinnedAttributes = _a.pinnedAttributes;
     var styles = styles_1.useStyles();
     var dispatch = react_redux_1.useDispatch();
     var viewId = react_1.useContext(contexts_1.ViewIdContext);
+    var userRoles = react_redux_1.useSelector(mdm_module_1.default.selectors.getUserRoles);
+    var pinnedAttributeUris = react_1.useMemo(function () { return mdm_sdk_1.getPinnedAttributesForUser(pinnedAttributes, userRoles); }, [
+        pinnedAttributes,
+        userRoles
+    ]);
     var modifiedEntity = react_redux_1.useSelector(function (state) { return mdm_module_1.default.selectors.getModifiedEntity(state, entity.uri) || {}; });
     var filteredAttrTypes = react_1.useMemo(function () { return attributesView_1.getFilteredAttrTypes(metadata, modifiedEntity.type, includeUris, excludeUris); }, [excludeUris, includeUris, metadata, modifiedEntity.type]);
     var onAddAttributes = react_1.useCallback(function (params) {
@@ -62,6 +68,7 @@ var AttributesView = function (_a) {
     return (react_1.default.createElement(BasicView_1.default, { className: className },
         caption && react_1.default.createElement(FacetViewHeader_1.default, { className: styles.header, title: caption }),
         react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) },
-            react_1.default.createElement(AttributesList_1.default, { entity: modifiedEntity, attrTypes: filteredAttrTypes, parentUri: modifiedEntity.uri, drawLines: false, mode: mode, showEmptyEditors: mdm_sdk_1.isTempUri(modifiedEntity.uri), crosswalks: modifiedEntity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))));
+            react_1.default.createElement(PinnedAttributesContext_1.PinnedAttributesContext.Provider, { value: pinnedAttributeUris },
+                react_1.default.createElement(AttributesList_1.default, { entity: modifiedEntity, attrTypes: filteredAttrTypes, parentUri: modifiedEntity.uri, drawLines: false, mode: mode, showEmptyEditors: mdm_sdk_1.isTempUri(modifiedEntity.uri), crosswalks: modifiedEntity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))));
 };
 exports.default = AttributesView;

package/cjs/components/attributes/editMode/AttributesView/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import AttributesView from './AttributesView';
 export { AttributesView };
-declare const _default: import("react-redux").ConnectedComponent<({ className, entity, mode, metadata, caption, excludeUris, includeUris }: {
+declare const _default: import("react-redux").ConnectedComponent<({ className, entity, mode, metadata, caption, excludeUris, includeUris, pinnedAttributes }: {
     entity?: import("@reltio/mdm-sdk").Entity | Record<string, never>;
     metadata: import("@reltio/mdm-sdk").Metadata;
     mode?: import("@reltio/mdm-sdk").Mode;
@@ -9,6 +9,10 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     includeUris?: string[];
     excludeUris?: string[];
     className?: string;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }) => JSX.Element, import("react-redux").Omit<{
     entity?: import("@reltio/mdm-sdk").Entity | Record<string, never>;
     metadata: import("@reltio/mdm-sdk").Metadata;
@@ -17,5 +21,9 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     includeUris?: string[];
     excludeUris?: string[];
     className?: string;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }, "metadata">>;
 export default _default;

package/cjs/components/attributes/editMode/contexts/PinnedAttributesContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PinnedAttributesContext: React.Context<string[]>;

package/cjs/components/attributes/editMode/contexts/PinnedAttributesContext.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinnedAttributesContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.PinnedAttributesContext = react_1.default.createContext(null);

package/cjs/components/attributes/readMode/AttributesView/index.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     excludeUris?: string[];
     className?: string;
     attributesCount?: number;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }) => JSX.Element, import("react-redux").Omit<{
     entity?: import("@reltio/mdm-sdk").Entity | Record<string, never>;
     metadata: import("@reltio/mdm-sdk").Metadata;
@@ -17,5 +21,9 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     excludeUris?: string[];
     className?: string;
     attributesCount?: number;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }, "metadata">>;
 export default _default;

package/cjs/components/attributes/types/attributesView.d.ts

@@ -6,6 +6,10 @@ declare type OwnProps = {
     entity?: Entity | Record<string, never>;
     excludeUris?: string[];
     includeUris?: string[];
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
     mode?: Mode;
 };
 declare type StateProps = {

package/cjs/components/history/HistoryMenuButton/HistoryMenuButton.js

@@ -1,14 +1,59 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var SmallIconButton_1 = require("../../SmallIconButton");
+var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
+var MenuItemRenderer_1 = __importDefault(require("./MenuItemRenderer"));
 var styles_1 = require("./styles");
 var HistoryMenuButton = function () {
     var styles = styles_1.useStyles();
-    return react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: MoreVert_1.default, size: "XS", onClick: function () { }, className: styles.icon });
+    var mode = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryMode);
+    var dispatch = react_redux_1.useDispatch();
+    var handleModeChange = function (selectedMode) {
+        dispatch(mdm_module_1.profile.history.actions.setHistoryMode(selectedMode));
+    };
+    var menuItems = [
+        {
+            text: ui_i18n_1.default.text('Compare to Current view'),
+            selected: mode === mdm_module_1.HistoryMode.Current,
+            onClick: function () { return handleModeChange(mdm_module_1.HistoryMode.Current); }
+        },
+        {
+            text: ui_i18n_1.default.text('Compare to Previous view'),
+            selected: mode === mdm_module_1.HistoryMode.Previous,
+            onClick: function () { return handleModeChange(mdm_module_1.HistoryMode.Previous); }
+        }
+    ];
+    return (react_1.default.createElement(DropDownMenuButton_1.default, { MenuItemRenderer: MenuItemRenderer_1.default, buttonComponent: SmallIconButton_1.SmallIconButton, buttonProps: {
+            icon: MoreVert_1.default,
+            size: 'L',
+            className: styles.icon
+        }, menuId: 'history-menu', menuItems: menuItems }));
 };
 exports.default = HistoryMenuButton;

package/cjs/components/history/HistoryMenuButton/MenuItemRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type Item = {
+    text: string;
+    selected: boolean;
+    onClick: (e: any) => void;
+};
+declare type Props = {
+    item: Item;
+    onMenuClose?: () => void;
+};
+declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export default MenuItemRenderer;