@reltio/components 1.4.1202 → 1.4.1207

package/cjs/components/DropDownMenuButton/DropDownMenuButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MenuProps } from '@material-ui/core/Menu';
-import { Item } from './MenuItemRenderer';
+import { DropDownMenuItem } from '../../types';
 declare type Props<T> = {
     className?: string;
     buttonComponent?: React.ElementType;
@@ -13,7 +13,7 @@ declare type Props<T> = {
     onMenuClose?: () => void;
     MenuItemRenderer?: (props: any) => JSX.Element;
 };
-declare function DropDownMenuButton<T = Item>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
+declare function DropDownMenuButton<T = DropDownMenuItem>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
 declare namespace DropDownMenuButton {
     var displayName: string;
 }

package/cjs/components/DropDownMenuButton/MenuItemRenderer.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
-export declare type Item = {
-    text?: string;
-    disabled?: boolean;
-    tooltip?: string;
-    id?: string;
-    onClick?: (e: any) => void;
-};
+import { DropDownMenuItem } from '../../types';
 declare type Props = {
-    item: Item;
+    item: DropDownMenuItem;
     onMenuClose?: (e: any) => void;
 };
 declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/cjs/components/DropDownMenuButton/MenuItemRenderer.js

@@ -24,6 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
 var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var withTooltip_1 = __importDefault(require("../../HOCs/withTooltip/withTooltip"));
@@ -32,12 +33,13 @@ var MenuItemWithTooltip = withTooltip_1.default(MenuItem_1.default);
 var MenuItemRenderer = react_1.forwardRef(function (_a, ref) {
     var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? ramda_1.identity : _b;
     var styles = styles_1.useStyles();
-    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c;
+    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c, selectable = item.selectable, selected = item.selected;
     var handleClick = function (e) {
         onMenuClose(e);
         onClick(e);
     };
     return (react_1.default.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-modal": true, "data-reltio-id": "reltio-search-menu-item" + id },
+        selectable && react_1.default.createElement(Checkbox_1.default, { checked: selected, color: "primary" }),
         react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, text)));
 });
 MenuItemRenderer.displayName = 'MenuItemRenderer';

package/cjs/components/MergeButton/MergeButton.js

@@ -61,6 +61,6 @@ exports.MergeButton = react_1.forwardRef(function (_a, ref) {
         onError: onError,
         onSuccess: onSuccess
     }).sendMergeAllRequest;
-    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : ui_i18n_1.default.text('Merge'), icon: MergeDark_1.default, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: ui_i18n_1.default.text('Merge'), icon: MergeDark_1.default, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 exports.MergeButton.displayName = 'mergeButton';

package/cjs/components/NotMatchButton/NotMatchButton.js

@@ -60,6 +60,6 @@ exports.NotMatchButton = react_1.forwardRef(function (_a, ref) {
         onFinishRequest: onFinishRequest,
         onSuccess: onSuccess
     }).sendMarkAsNotMatchRequest;
-    return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : ui_i18n_1.default.text('Not a match'), icon: NotMatchDark_1.default, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    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: NotMatchDark_1.default, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 exports.NotMatchButton.displayName = 'notMatchButton';

package/cjs/components/attributes/readMode/AttributeValuesBlock/AttributeValuesBlock.d.ts

@@ -9,6 +9,7 @@ declare type Props = {
         attributeType: any;
         attributeValue: any;
     }) => JSX.Element;
+    showNonOv?: boolean;
 };
 declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, ...props }: Props) => JSX.Element>;
 export default _default;

package/cjs/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -44,10 +44,12 @@ var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/Co
 var classnames_2 = require("../../../../constants/classnames");
 var styles_1 = require("./styles");
 var contexts_1 = require("../../../../contexts");
+var commonStyles_1 = require("../helpers/commonStyles");
 var ComplexAttribute = function (_a) {
     var _b;
     var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, LabelRenderer = _a.LabelRenderer;
     var styles = styles_1.useStyles();
+    var ovValueStyles = commonStyles_1.useOvValueStyles();
     var uri = attributeValue.uri;
     var _d = react_1.useState(false), expanded = _d[0], setExpanded = _d[1];
     var _e = react_1.useContext(contexts_1.HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
@@ -67,6 +69,7 @@ var ComplexAttribute = function (_a) {
                         _b[highlightedClassName] = highlightedValuesUris.some(function (uri) {
                             return mdm_sdk_1.areOneHierarchyUris(uri, attributeValue.uri);
                         }),
+                        _b[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue),
                         _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
                 react_1.default.createElement("div", { className: styles.spacer }),
                 react_1.default.createElement(CommentsContainer_1.default, { uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(objectType, {

package/cjs/components/attributes/readMode/ReferenceAttribute/ReferenceAttribute.js

@@ -45,15 +45,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var contexts_1 = require("../../../../contexts");
 var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var InternalLink_1 = __importDefault(require("../../../InternalLink/InternalLink"));
+var commonStyles_1 = require("../helpers/commonStyles");
 var styles_1 = __importDefault(require("./styles"));
 var ReferenceAttribute = function (_a) {
     var attributeValue = _a.attributeValue, metadata = _a.metadata, attributeType = _a.attributeType, uiPath = _a.uiPath, otherProps = __rest(_a, ["attributeValue", "metadata", "attributeType", "uiPath"]);
     var styles = styles_1.default();
+    var ovValueStyles = commonStyles_1.useOvValueStyles();
     var refEntityURI = mdm_sdk_1.getReferencedEntityUriFromAttrValue(attributeValue);
     var attributeTypeList = react_1.useMemo(function () { return mdm_sdk_1.getAttributeTypeSubAttributes(metadata, attributeType); }, [
         attributeType,
@@ -61,20 +64,15 @@ var ReferenceAttribute = function (_a) {
     ]);
     var appearance = react_1.useContext(contexts_1.HistoryDiffContext).appearance;
     var entityLabel = react_1.useMemo(function () {
+        var _a;
         var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
         var historyAttributesClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
-        return (react_1.default.createElement(InternalLink_1.default, { href: mdm_sdk_1.isEmptyValue(appearance) ? mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: styles[historyAttributesClassName] },
+        return (react_1.default.createElement(InternalLink_1.default, { href: mdm_sdk_1.isEmptyValue(appearance) ? mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: classnames_1.default(styles[historyAttributesClassName], (_a = {},
+                _a[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue),
+                _a)) },
             mdm_sdk_1.getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (react_1.default.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel))));
-    }, [
-        attributeValue.uri,
-        attributeValue.label,
-        attributeValue.relationshipLabel,
-        appearance,
-        refEntityURI,
-        styles,
-        uiPath
-    ]);
+    }, [attributeValue, appearance, uiPath, refEntityURI, styles, ovValueStyles.ovFalse]);
     return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ attributeTypesList: attributeTypeList, attributeValue: attributeValue, label: entityLabel, attributeType: attributeType }, otherProps)));
 };
 ReferenceAttribute.propTypes = mdm_sdk_1.ReferenceAttributeType;

package/cjs/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -33,11 +33,13 @@ var PivotingTooltip_1 = require("../../PivotingAttributes/PivotingTooltip");
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var styles_1 = require("./styles");
 var contexts_1 = require("../../../../contexts");
+var commonStyles_1 = require("../helpers/commonStyles");
 var SimpleAttribute = function (_a) {
-    var _b, _c, _d;
-    var className = _a.className, _e = _a.attributeType, attributeType = _e === void 0 ? null : _e, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    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 styles = styles_1.useStyles();
-    var _f = react_1.useContext(contexts_1.HighlightedValuesContext), _g = _f.highlightedValuesUris, highlightedValuesUris = _g === void 0 ? [] : _g, highlightedClassName = _f.highlightedClassName;
+    var ovValueStyles = commonStyles_1.useOvValueStyles();
+    var _h = react_1.useContext(contexts_1.HighlightedValuesContext), _j = _h.highlightedValuesUris, highlightedValuesUris = _j === void 0 ? [] : _j, highlightedClassName = _h.highlightedClassName;
     var appearance = react_1.useContext(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
     var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
     var historyClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
@@ -49,11 +51,11 @@ var SimpleAttribute = function (_a) {
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames_1.default((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
-            react_1.default.createElement("span", { className: styles[historyClassName], "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: classnames_1.default(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_d = {},
-            _d[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
-            _d)) },
+            react_1.default.createElement("span", { className: classnames_1.default(styles[historyClassName], (_d = {}, _d[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue), _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: 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: styles.attributeValue, "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
+            react_1.default.createElement("span", { className: classnames_1.default(styles.attributeValue, (_f = {}, _f[ovValueStyles.ovFalse] = !mdm_sdk_1.isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
         react_1.default.createElement(CommentsContainer_1.default, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

package/cjs/components/attributes/readMode/helpers/commonStyles.d.ts

@@ -0,0 +1 @@
+export declare const useOvValueStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"ovFalse">;

package/cjs/components/attributes/readMode/helpers/commonStyles.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOvValueStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useOvValueStyles = styles_1.makeStyles(function (theme) { return ({
+    ovFalse: theme.inactive
+}); });

package/cjs/types/index.d.ts

@@ -103,3 +103,20 @@ export declare enum RequestStates {
     LOADED = "loaded",
     ERROR = "error"
 }
+export declare type SelectableItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selected?: boolean;
+};
+export declare type DropDownMenuItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selectable?: boolean;
+    selected?: boolean;
+};

package/esm/components/DropDownMenuButton/DropDownMenuButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MenuProps } from '@material-ui/core/Menu';
-import { Item } from './MenuItemRenderer';
+import { DropDownMenuItem } from '../../types';
 declare type Props<T> = {
     className?: string;
     buttonComponent?: React.ElementType;
@@ -13,7 +13,7 @@ declare type Props<T> = {
     onMenuClose?: () => void;
     MenuItemRenderer?: (props: any) => JSX.Element;
 };
-declare function DropDownMenuButton<T = Item>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
+declare function DropDownMenuButton<T = DropDownMenuItem>({ className, menuId, buttonComponent, buttonContent, menuItems, buttonProps, popoverProps, onMenuOpen, onMenuClose, MenuItemRenderer }: Props<T>): JSX.Element;
 declare namespace DropDownMenuButton {
     var displayName: string;
 }

package/esm/components/DropDownMenuButton/MenuItemRenderer.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
-export declare type Item = {
-    text?: string;
-    disabled?: boolean;
-    tooltip?: string;
-    id?: string;
-    onClick?: (e: any) => void;
-};
+import { DropDownMenuItem } from '../../types';
 declare type Props = {
-    item: Item;
+    item: DropDownMenuItem;
     onMenuClose?: (e: any) => void;
 };
 declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/esm/components/DropDownMenuButton/MenuItemRenderer.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { identity } from 'ramda';
+import Checkbox from '@material-ui/core/Checkbox';
 import MenuItem from '@material-ui/core/MenuItem';
 import Typography from '@material-ui/core/Typography';
 import withTooltip from '../../HOCs/withTooltip/withTooltip';
@@ -8,12 +9,13 @@ var MenuItemWithTooltip = withTooltip(MenuItem);
 var MenuItemRenderer = forwardRef(function (_a, ref) {
     var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? identity : _b;
     var styles = useStyles();
-    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c;
+    var disabled = item.disabled, text = item.text, tooltip = item.tooltip, onClick = item.onClick, _c = item.id, id = _c === void 0 ? '' : _c, selectable = item.selectable, selected = item.selected;
     var handleClick = function (e) {
         onMenuClose(e);
         onClick(e);
     };
     return (React.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-modal": true, "data-reltio-id": "reltio-search-menu-item" + id },
+        selectable && React.createElement(Checkbox, { checked: selected, color: "primary" }),
         React.createElement(Typography, { classes: { root: styles.menuText } }, text)));
 });
 MenuItemRenderer.displayName = 'MenuItemRenderer';

package/esm/components/MergeButton/MergeButton.js

@@ -36,6 +36,6 @@ export var MergeButton = forwardRef(function (_a, ref) {
         onError: onError,
         onSuccess: onSuccess
     }).sendMergeAllRequest;
-    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : i18n.text('Merge'), icon: MergeIcon, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: i18n.text('Merge'), icon: MergeIcon, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 MergeButton.displayName = 'mergeButton';

package/esm/components/NotMatchButton/NotMatchButton.js

@@ -35,6 +35,6 @@ export var NotMatchButton = forwardRef(function (_a, ref) {
         onFinishRequest: onFinishRequest,
         onSuccess: onSuccess
     }).sendMarkAsNotMatchRequest;
-    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: disabled ? '' : i18n.text('Not a match'), icon: NotMatchIcon, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: i18n.text('Not a match'), icon: NotMatchIcon, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });
 NotMatchButton.displayName = 'notMatchButton';

package/esm/components/attributes/readMode/AttributeValuesBlock/AttributeValuesBlock.d.ts

@@ -9,6 +9,7 @@ declare type Props = {
         attributeType: any;
         attributeValue: any;
     }) => JSX.Element;
+    showNonOv?: boolean;
 };
 declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, ...props }: Props) => JSX.Element>;
 export default _default;

package/esm/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { AttributeTypeType, areOneHierarchyUris, isAnalyticAttribute, NestedAttributeValueType, ReferenceAttributeValueType, CollaborationObjectTypes, createRelatedObjectUris, isRelationAttrType, isSpecialAttribute } from '@reltio/mdm-sdk';
+import { AttributeTypeType, areOneHierarchyUris, isAnalyticAttribute, NestedAttributeValueType, ReferenceAttributeValueType, CollaborationObjectTypes, createRelatedObjectUris, isOv, isRelationAttrType, isSpecialAttribute } from '@reltio/mdm-sdk';
 import Typography from '@material-ui/core/Typography';
 import AttributesList from '../AttributesList/AttributesList';
 import ArrowExpandButton from '../../../ArrowExpandButton/ArrowExpandButton';
@@ -20,10 +20,12 @@ import CommentsContainer from '../../../CommentsContainer/CommentsContainer';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
 import { useStyles } from './styles';
 import { HighlightedValuesContext } from '../../../../contexts';
+import { useOvValueStyles } from '../helpers/commonStyles';
 var ComplexAttribute = function (_a) {
     var _b;
     var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, LabelRenderer = _a.LabelRenderer;
     var styles = useStyles();
+    var ovValueStyles = useOvValueStyles();
     var uri = attributeValue.uri;
     var _d = useState(false), expanded = _d[0], setExpanded = _d[1];
     var _e = useContext(HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
@@ -43,6 +45,7 @@ var ComplexAttribute = function (_a) {
                         _b[highlightedClassName] = highlightedValuesUris.some(function (uri) {
                             return areOneHierarchyUris(uri, attributeValue.uri);
                         }),
+                        _b[ovValueStyles.ovFalse] = !isOv(attributeValue),
                         _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
                 React.createElement("div", { className: styles.spacer }),
                 React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {

package/esm/components/attributes/readMode/ReferenceAttribute/ReferenceAttribute.js

@@ -21,15 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo, useContext, useMemo } from 'react';
-import { getAttributeTypeSubAttributes, getEntityLink, getLabel, getReferencedEntityUriFromAttrValue, isEmptyValue, ReferenceAttributeType } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import { getAttributeTypeSubAttributes, getEntityLink, getLabel, getReferencedEntityUriFromAttrValue, isEmptyValue, isOv, ReferenceAttributeType } from '@reltio/mdm-sdk';
 import { HistoryDiffContext } from '../../../../contexts';
 import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import InternalLink from '../../../InternalLink/InternalLink';
+import { useOvValueStyles } from '../helpers/commonStyles';
 import useStyles from './styles';
 var ReferenceAttribute = function (_a) {
     var attributeValue = _a.attributeValue, metadata = _a.metadata, attributeType = _a.attributeType, uiPath = _a.uiPath, otherProps = __rest(_a, ["attributeValue", "metadata", "attributeType", "uiPath"]);
     var styles = useStyles();
+    var ovValueStyles = useOvValueStyles();
     var refEntityURI = getReferencedEntityUriFromAttrValue(attributeValue);
     var attributeTypeList = useMemo(function () { return getAttributeTypeSubAttributes(metadata, attributeType); }, [
         attributeType,
@@ -37,20 +40,15 @@ var ReferenceAttribute = function (_a) {
     ]);
     var appearance = useContext(HistoryDiffContext).appearance;
     var entityLabel = useMemo(function () {
+        var _a;
         var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
         var historyAttributesClassName = getHistoryAttributeClassName(attributeAppearance);
-        return (React.createElement(InternalLink, { href: isEmptyValue(appearance) ? getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: styles[historyAttributesClassName] },
+        return (React.createElement(InternalLink, { href: isEmptyValue(appearance) ? getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: classnames(styles[historyAttributesClassName], (_a = {},
+                _a[ovValueStyles.ovFalse] = !isOv(attributeValue),
+                _a)) },
             getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (React.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel))));
-    }, [
-        attributeValue.uri,
-        attributeValue.label,
-        attributeValue.relationshipLabel,
-        appearance,
-        refEntityURI,
-        styles,
-        uiPath
-    ]);
+    }, [attributeValue, appearance, uiPath, refEntityURI, styles, ovValueStyles.ovFalse]);
     return (React.createElement(ComplexAttribute, __assign({ attributeTypesList: attributeTypeList, attributeValue: attributeValue, label: entityLabel, attributeType: attributeType }, otherProps)));
 };
 ReferenceAttribute.propTypes = ReferenceAttributeType;

package/esm/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { getAttrDataTypeDefinition, getAttributeValue, CollaborationObjectTypes, createRelatedObjectUris, isRelationAttrType } from '@reltio/mdm-sdk';
+import { getAttrDataTypeDefinition, getAttributeValue, CollaborationObjectTypes, createRelatedObjectUris, isOv, isRelationAttrType } from '@reltio/mdm-sdk';
 import classnames from 'classnames';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
 import { HistoryDiffContext } from '../../../../contexts/HistoryAppearanceContext';
@@ -9,11 +9,13 @@ import { PivotingTooltip } from '../../PivotingAttributes/PivotingTooltip';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import { useStyles } from './styles';
 import { HighlightedValuesContext } from '../../../../contexts';
+import { useOvValueStyles } from '../helpers/commonStyles';
 var SimpleAttribute = function (_a) {
-    var _b, _c, _d;
-    var className = _a.className, _e = _a.attributeType, attributeType = _e === void 0 ? null : _e, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    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 styles = useStyles();
-    var _f = useContext(HighlightedValuesContext), _g = _f.highlightedValuesUris, highlightedValuesUris = _g === void 0 ? [] : _g, highlightedClassName = _f.highlightedClassName;
+    var ovValueStyles = useOvValueStyles();
+    var _h = useContext(HighlightedValuesContext), _j = _h.highlightedValuesUris, highlightedValuesUris = _j === void 0 ? [] : _j, highlightedClassName = _h.highlightedClassName;
     var appearance = useContext(HistoryDiffContext).appearance;
     var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
     var historyClassName = getHistoryAttributeClassName(attributeAppearance);
@@ -25,11 +27,11 @@ var SimpleAttribute = function (_a) {
             _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: styles[historyClassName], "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_d = {},
-            _d[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
-            _d)) },
+            React.createElement("span", { className: classnames(styles[historyClassName], (_d = {}, _d[ovValueStyles.ovFalse] = !isOv(attributeValue), _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (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: styles.attributeValue, "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
+            React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[ovValueStyles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
         React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

package/esm/components/attributes/readMode/helpers/commonStyles.d.ts

@@ -0,0 +1 @@
+export declare const useOvValueStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"ovFalse">;

package/esm/components/attributes/readMode/helpers/commonStyles.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useOvValueStyles = makeStyles(function (theme) { return ({
+    ovFalse: theme.inactive
+}); });

package/esm/types/index.d.ts

@@ -103,3 +103,20 @@ export declare enum RequestStates {
     LOADED = "loaded",
     ERROR = "error"
 }
+export declare type SelectableItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selected?: boolean;
+};
+export declare type DropDownMenuItem = {
+    text?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    id?: string;
+    onClick?: (e: any) => void;
+    selectable?: boolean;
+    selected?: boolean;
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1202",
+  "version": "1.4.1207",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1202",
-    "@reltio/mdm-sdk": "^1.4.1202",
+    "@reltio/mdm-module": "^1.4.1207",
+    "@reltio/mdm-sdk": "^1.4.1207",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",