@reltio/components 1.4.1124 → 1.4.1128-hf

package/cjs/components/InternalLink/InternalLink.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InternalLink: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => JSX.Element;
+export default InternalLink;

package/cjs/components/InternalLink/InternalLink.js

@@ -0,0 +1,39 @@
+"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 __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 });
+var react_1 = __importDefault(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var InternalLink = function (props) {
+    var styles = styles_1.useStyles();
+    var inRouterContext = react_router_dom_1.useInRouterContext();
+    var href = props.href, className = props.className, otherProps = __rest(props, ["href", "className"]);
+    var linkClassName = classnames_1.default(styles.link, className);
+    return inRouterContext ? (react_1.default.createElement(react_router_dom_1.Link, __assign({ to: href === null || href === void 0 ? void 0 : href.replace(window.location.origin, ''), className: linkClassName }, otherProps))) : (react_1.default.createElement("a", __assign({ href: href, className: linkClassName }, otherProps)));
+};
+exports.default = InternalLink;

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

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

package/cjs/components/InternalLink/styles.js

@@ -0,0 +1,10 @@
+"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 ({
+    link: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none'
+    }
+}); });

package/cjs/components/VerticalHeadingsTable/TableCell/TableCell.js

@@ -9,7 +9,8 @@ var helpers_1 = require("../helpers");
 var TableCell = function (_a) {
     var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
     var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
-    return (react_1.default.createElement("td", { onMouseOver: function () { return setHoveredColumn(columnValue); }, onMouseLeave: resetHoveredColumn },
+    var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
+    return (react_1.default.createElement("td", { onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
         react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));
 };
 exports.TableCell = TableCell;

package/cjs/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.js

@@ -81,7 +81,8 @@ var TableCellWithDnd = function (_a) {
         drop(dropRef);
         drag(dragRef);
     }, []);
-    return (react_1.default.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: function () { return setHoveredColumn(columnValue); }, onMouseLeave: resetHoveredColumn },
+    var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
+    return (react_1.default.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
         shouldRenderDragIndicator && (react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
             react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon }))),
         react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));

package/cjs/components/VerticalHeadingsTable/TableRow/TableRow.js

@@ -16,7 +16,7 @@ var TableRow = function (_a) {
         columnsData.map(function (columnValue, index) {
             var isDraggableColumn = columnValue.isDraggable;
             var shouldRenderDragIndicator = isFirstRow && isDraggableColumn;
-            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: shouldRenderDragIndicator, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id, rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: shouldRenderDragIndicator, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
         })));
 };
 exports.TableRow = TableRow;

package/cjs/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.js

@@ -72,7 +72,7 @@ var TableRowWithDnd = function (_a) {
     return (react_1.default.createElement("tr", { className: rowData.rowClassName, style: { opacity: opacity }, ref: dropRef, "data-target-id": targetId, "data-source-id": sourceId },
         react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }),
         columnsData.map(function (columnValue, index) {
-            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
         })));
 };
 exports.TableRowWithDnd = TableRowWithDnd;

package/cjs/components/VerticalHeadingsTable/VerticalHeadingsTable.js

@@ -28,12 +28,13 @@ var VerticalHeadingsTable = function (_a) {
     var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
     var tableRef = react_1.useRef(null);
     var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
+    var isDNDActive = !!onMoveRow || !!onMoveColumn;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TableColumnDragLayer_1.TableColumnDragLayer, { columnHeight: tableHeight }),
+        isDNDActive && react_1.default.createElement(TableColumnDragLayer_1.TableColumnDragLayer, { columnHeight: tableHeight }),
         react_1.default.createElement("table", { ref: tableRef, className: className },
-            theadRowsNumber > 0 && (react_1.default.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
+            theadRowsNumber > 0 && (react_1.default.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
             react_1.default.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
-                return onMoveRow ? (react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { key: rowData.id, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+                return onMoveRow ? (react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
             })))));
 };
 exports.default = react_1.memo(VerticalHeadingsTable);

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

@@ -32,6 +32,7 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
 var ramda_1 = require("ramda");
 var ComplexAttributeLabel_1 = require("../common/ComplexAttributeLabel");
+var InternalLink_1 = __importDefault(require("../../../InternalLink/InternalLink"));
 var styles_1 = require("./styles");
 var ReferenceAttribute = function (_a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType, other = __rest(_a, ["attributeValue", "attributeType"]);
@@ -39,7 +40,7 @@ var ReferenceAttribute = function (_a) {
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var uiPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getUIPath);
     var entityLabel = (react_1.default.createElement(ComplexAttributeLabel_1.ComplexAttributeLabel, null,
-        react_1.default.createElement("a", { href: mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: mdm_sdk_1.getReferencedEntityUriFromAttrValue(attributeValue) }), className: styles.label },
+        react_1.default.createElement(InternalLink_1.default, { href: mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: mdm_sdk_1.getReferencedEntityUriFromAttrValue(attributeValue) }) },
             mdm_sdk_1.getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (react_1.default.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel)))));
     var attributeTypesList = ramda_1.pipe(mdm_sdk_1.getReferencedRelationAttrTypesUris, ramda_1.map(function (attrTypeUri) { return mdm_sdk_1.findAttributeTypeByUri(metadata, attrTypeUri); }), ramda_1.reject(ramda_1.isNil))(attributeType);

package/cjs/components/attributes/inline/ReferenceAttribute/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "relationshipLabel">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"relationshipLabel">;

package/cjs/components/attributes/inline/ReferenceAttribute/styles.js

@@ -3,10 +3,6 @@ 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 ({
-    label: {
-        color: theme.palette.primary.main,
-        textDecoration: 'none'
-    },
     relationshipLabel: {
         marginLeft: '4px',
         color: theme.palette.text.primary

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

@@ -5,6 +5,10 @@ declare type Props = {
     attributeType: AttributeType;
     expanded?: boolean;
     valueContainerClassName?: string;
+    LabelRenderer?: ({ attributeType: AttributeType, attributeValue: AttributeValue }: {
+        attributeType: any;
+        attributeValue: any;
+    }) => JSX.Element;
 };
-declare const _default: React.MemoExoticComponent<({ expanded, ...props }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, ...props }: Props) => JSX.Element>;
 export default _default;

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

@@ -54,12 +54,12 @@ var renderAttributesList = function (_a) {
         react_1.default.createElement(__1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))); })));
 };
 var AttributeValuesBlock = function (_a) {
-    var expanded = _a.expanded, props = __rest(_a, ["expanded"]);
+    var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, props = __rest(_a, ["expanded", "LabelRenderer"]);
     var attributeType = props.attributeType, values = props.values, valueContainerClassName = props.valueContainerClassName;
     switch (attributeType.type) {
         case mdm_sdk_1.DataTypes.TYPE_NESTED:
         case mdm_sdk_1.DataTypes.TYPE_REFERENCE: {
-            return renderAttributesList(__assign({ expanded: expanded }, props));
+            return renderAttributesList(__assign({ expanded: expanded, LabelRenderer: LabelRenderer }, props));
         }
         case mdm_sdk_1.DataTypes.TYPE_IMAGE: {
             return (react_1.default.createElement("div", { className: valueContainerClassName },

package/cjs/components/attributes/readMode/AttributesPager/SpecialRenderer.js

@@ -27,7 +27,7 @@ var SpecialRenderer = function (_a) {
                 return react_1.default.createElement(Roles_1.default, { className: className, values: values });
             }
             default: {
-                //startDate, endDate
+                //startDate, endDate, "crosswalk" fake nested subattibutes
                 return (react_1.default.createElement(Attribute_1.default, { className: className, attributeValue: { value: values[0] }, attributeType: attributeType, inlined: true }));
             }
         }

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

@@ -1,5 +1,5 @@
 export default ComplexAttribute;
-declare function ComplexAttribute({ attributeTypesList, attributeValue, label, expanded: expandedProp, children, showNonOv, attributeType }: {
+declare function ComplexAttribute({ attributeTypesList, attributeValue, label, expanded: expandedProp, children, showNonOv, attributeType, LabelRenderer }: {
     attributeTypesList: any;
     attributeValue: any;
     label: any;
@@ -7,6 +7,7 @@ declare function ComplexAttribute({ attributeTypesList, attributeValue, label, e
     children: any;
     showNonOv: any;
     attributeType: any;
+    LabelRenderer: any;
 }): JSX.Element;
 declare namespace ComplexAttribute {
     namespace propTypes {
@@ -36,6 +37,7 @@ declare namespace ComplexAttribute {
         export const expanded: PropTypes.Requireable<boolean>;
         export const showNonOv: PropTypes.Requireable<boolean>;
         export { AttributeTypeType as attributeType };
+        export const LabelRenderer: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1,4 +1,15 @@
 "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]; } });
@@ -32,30 +43,35 @@ var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/Ar
 var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/CommentsContainer"));
 var classnames_2 = require("../../../../constants/classnames");
 var styles_1 = require("./styles");
+var contexts_1 = require("../../../../contexts");
 var ComplexAttribute = function (_a) {
-    var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _b = _a.expanded, expandedProp = _b === void 0 ? false : _b, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType;
+    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 uri = attributeValue.uri;
-    var _c = react_1.useState(false), expanded = _c[0], setExpanded = _c[1];
+    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;
     react_1.useEffect(function () {
         setExpanded(expandedProp);
     }, [expandedProp]);
     var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return mdm_sdk_1.isAnalyticAttribute(attributeType); });
-    var attributeListEntity = react_1.useMemo(function () { return ({
-        attributes: hasAnalyticValue ? null : attributeValue.value,
-        analyticsAttributes: hasAnalyticValue ? attributeValue.value : null
-    }); }, [attributeValue, hasAnalyticValue]);
+    var attributeListEntity = react_1.useMemo(function () { return (__assign({ attributes: hasAnalyticValue ? null : attributeValue.value, analyticsAttributes: hasAnalyticValue ? attributeValue.value : null }, (mdm_sdk_1.isSpecialAttribute(attributeType) ? attributeValue.value : {}))); }, [attributeValue, hasAnalyticValue, attributeType]);
     var objectType = mdm_sdk_1.isRelationAttrType(attributeType)
         ? mdm_sdk_1.CollaborationObjectTypes.RELATION_ATTRIBUTE
         : mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE;
     return (react_1.default.createElement("div", { className: styles.complexContainer },
         react_1.default.createElement("div", { className: classnames_1.default(styles.labelContainer, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA) },
             react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
-            react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: styles.label }, "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, {
-                    uri: attributeValue.uri
-                }), objectType: objectType })),
+            LabelRenderer ? (react_1.default.createElement(LabelRenderer, { attributeType: attributeType, attributeValue: attributeValue })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: styles.label }, className: classnames_1.default((_b = {},
+                        _b[highlightedClassName] = highlightedValuesUris.some(function (uri) {
+                            return mdm_sdk_1.areOneHierarchyUris(uri, attributeValue.uri);
+                        }),
+                        _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, {
+                        uri: attributeValue.uri
+                    }), objectType: objectType })))),
         expanded && (react_1.default.createElement(AttributesList_1.default, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv }, children))));
 };
 ComplexAttribute.propTypes = {
@@ -65,6 +81,7 @@ ComplexAttribute.propTypes = {
     attributeValue: prop_types_1.default.oneOfType([mdm_sdk_1.NestedAttributeValueType, mdm_sdk_1.ReferenceAttributeValueType]),
     expanded: prop_types_1.default.bool,
     showNonOv: prop_types_1.default.bool,
-    attributeType: mdm_sdk_1.AttributeTypeType
+    attributeType: mdm_sdk_1.AttributeTypeType,
+    LabelRenderer: prop_types_1.default.func
 };
 exports.default = ComplexAttribute;

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

@@ -45,11 +45,11 @@ 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 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"]);
@@ -63,7 +63,7 @@ var ReferenceAttribute = function (_a) {
     var entityLabel = react_1.useMemo(function () {
         var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
         var historyAttributesClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
-        return (react_1.default.createElement("a", { href: mdm_sdk_1.isEmptyValue(appearance) ? mdm_sdk_1.getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: classnames_1.default(styles.label, 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: styles[historyAttributesClassName] },
             mdm_sdk_1.getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (react_1.default.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel))));
     }, [

package/cjs/components/attributes/readMode/ReferenceAttribute/styles.d.ts

@@ -1,2 +1,2 @@
 export default styles;
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "relationshipLabel" | "updateAttribute" | "insertAttribute" | "deleteAttribute">;
+declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"relationshipLabel" | "updateAttribute" | "insertAttribute" | "deleteAttribute">;

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

@@ -14,10 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var styles_1 = require("@material-ui/core/styles");
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var styles = styles_1.makeStyles(function (theme) { return ({
-    label: {
-        color: theme.palette.primary.main,
-        textDecoration: 'none'
-    },
     relationshipLabel: {
         marginLeft: '4px',
         color: theme.palette.text.primary

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

@@ -32,10 +32,12 @@ var DataTypeValue_1 = __importDefault(require("../../../DataTypeValue/DataTypeVa
 var PivotingTooltip_1 = require("../../PivotingAttributes/PivotingTooltip");
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var styles_1 = require("./styles");
+var contexts_1 = require("../../../../contexts");
 var SimpleAttribute = function (_a) {
-    var _b;
-    var className = _a.className, _c = _a.attributeType, attributeType = _c === void 0 ? null : _c, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var _b, _c, _d;
+    var className = _a.className, _e = _a.attributeType, attributeType = _e === void 0 ? null : _e, 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 appearance = react_1.useContext(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
     var attributeAppearance = historyAppearance_1.getHistoryAppearanceByUri(attributeValue.uri, appearance);
     var historyClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
@@ -43,9 +45,13 @@ var SimpleAttribute = function (_a) {
     var objectType = mdm_sdk_1.isRelationAttrType(attributeType)
         ? mdm_sdk_1.CollaborationObjectTypes.RELATION_ATTRIBUTE
         : mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE;
-    return inlined || historyClassName ? (react_1.default.createElement("div", { className: className },
-        react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames_1.default((_b = {}, _b[styles.multilineAttribute] = !inlined, _b)) },
-            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) },
+    return inlined || historyClassName ? (react_1.default.createElement("div", { className: 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: 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(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(CommentsContainer_1.default, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(objectType, {

package/cjs/components/attributes/readMode/SpecialAttributes/Tags/Tag.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var InternalLink_1 = __importDefault(require("../../../../InternalLink/InternalLink"));
 var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -40,7 +40,7 @@ var Tag = function (_a) {
     var attributeAppearance = historyAppearance_1.getHistoryAppearanceBySpecialAttributeValue('tags', value, appearance);
     var historyClassName = historyAppearance_1.getHistoryAttributeClassName(attributeAppearance);
     var entity = ownEntity || currentEntity;
-    return (react_1.default.createElement(Link_1.default, { underline: "none", className: styles[historyClassName], href: mdm_sdk_1.getTagLink({
+    return (react_1.default.createElement(InternalLink_1.default, { className: styles[historyClassName], href: mdm_sdk_1.getTagLink({
             uiPath: uiPath,
             tag: value,
             entityUri: entity.dataTenant ? mdm_sdk_1.getDataTenantEntityUri(entity) : entity.uri

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const HighlightedValuesContext: React.Context<{
+    highlightedValuesUris: string[];
+    highlightedClassName: string;
+}>;

package/cjs/contexts/HighlightedValuesContext/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HighlightedValuesContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.HighlightedValuesContext = react_1.default.createContext({
+    highlightedValuesUris: [],
+    highlightedClassName: ''
+});
+exports.HighlightedValuesContext.displayName = 'HighlightedValuesContext';

package/cjs/contexts/index.d.ts

@@ -19,3 +19,4 @@ export { SandboxAPIContext } from './SandboxAPIContext';
 export { useReloadAllFacets, ReloadFacetProvider, useReloadFacet } from './ReloadFacetContext';
 export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
+export { HighlightedValuesContext } from './HighlightedValuesContext';

package/cjs/contexts/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
+exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
 var AsyncMountContext_1 = require("./AsyncMountContext");
 Object.defineProperty(exports, "AsyncMountContext", { enumerable: true, get: function () { return AsyncMountContext_1.AsyncMountContext; } });
 var HistoryAppearanceContext_1 = require("./HistoryAppearanceContext");
@@ -50,3 +50,5 @@ var SearchFiltersContext_1 = require("./SearchFiltersContext");
 Object.defineProperty(exports, "SearchFiltersContext", { enumerable: true, get: function () { return SearchFiltersContext_1.SearchFiltersContext; } });
 var SnackbarContext_1 = require("./SnackbarContext");
 Object.defineProperty(exports, "SnackbarContext", { enumerable: true, get: function () { return SnackbarContext_1.SnackbarContext; } });
+var HighlightedValuesContext_1 = require("./HighlightedValuesContext");
+Object.defineProperty(exports, "HighlightedValuesContext", { enumerable: true, get: function () { return HighlightedValuesContext_1.HighlightedValuesContext; } });

package/cjs/hooks/useMatchesLoader.d.ts

@@ -15,8 +15,9 @@ declare type Props = {
         order: string;
         field: string;
     };
+    markMatchedValues?: boolean;
 };
-export declare const useMatchesLoader: ({ enabled, entity, filter, onFinishLoading, onStartLoading, options, page, rowsPerPage, sorting }: Props) => {
+export declare const useMatchesLoader: ({ enabled, entity, filter, onFinishLoading, onStartLoading, options, page, rowsPerPage, sorting, markMatchedValues }: Props) => {
     total: number;
     matches: PotentialMatch[];
     entitiesMap: {

package/cjs/hooks/useMatchesLoader.js

@@ -12,7 +12,7 @@ var usePagingSimulator_1 = require("./usePagingSimulator");
 var useSafePromise_1 = require("./useSafePromise");
 var ramda_1 = require("ramda");
 var useMatchesLoader = function (_a) {
-    var enabled = _a.enabled, entity = _a.entity, filter = _a.filter, onFinishLoading = _a.onFinishLoading, onStartLoading = _a.onStartLoading, options = _a.options, page = _a.page, rowsPerPage = _a.rowsPerPage, sorting = _a.sorting;
+    var enabled = _a.enabled, entity = _a.entity, filter = _a.filter, onFinishLoading = _a.onFinishLoading, onStartLoading = _a.onStartLoading, options = _a.options, page = _a.page, rowsPerPage = _a.rowsPerPage, sorting = _a.sorting, markMatchedValues = _a.markMatchedValues;
     var _b = sorting || {}, order = _b.order, field = _b.field;
     var _c = react_1.useState(0), total = _c[0], setTotal = _c[1];
     var _d = react_1.useState([]), matches = _d[0], setMatches = _d[1];
@@ -67,6 +67,7 @@ var useMatchesLoader = function (_a) {
                 sort: field,
                 order: order,
                 force: force,
+                markMatchedValues: markMatchedValues,
                 deep: options.showTransitiveMatches ? undefined : 1,
                 activeness: activeness
             }))
@@ -90,6 +91,7 @@ var useMatchesLoader = function (_a) {
         entityUri,
         field,
         filter,
+        markMatchedValues,
         getPagedMatchesForDataTenantEntity,
         getTransitiveMatchesWithPaging,
         onFinishLoading,

package/esm/components/InternalLink/InternalLink.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InternalLink: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => JSX.Element;
+export default InternalLink;

package/esm/components/InternalLink/InternalLink.js

@@ -0,0 +1,34 @@
+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 __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;
+};
+import React from 'react';
+import { useInRouterContext, Link } from 'react-router-dom';
+import classnames from 'classnames';
+import { useStyles } from './styles';
+var InternalLink = function (props) {
+    var styles = useStyles();
+    var inRouterContext = useInRouterContext();
+    var href = props.href, className = props.className, otherProps = __rest(props, ["href", "className"]);
+    var linkClassName = classnames(styles.link, className);
+    return inRouterContext ? (React.createElement(Link, __assign({ to: href === null || href === void 0 ? void 0 : href.replace(window.location.origin, ''), className: linkClassName }, otherProps))) : (React.createElement("a", __assign({ href: href, className: linkClassName }, otherProps)));
+};
+export default InternalLink;

package/esm/components/InternalLink/styles.d.ts

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

package/esm/components/InternalLink/styles.js

@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    link: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none'
+    }
+}); });

package/esm/components/VerticalHeadingsTable/TableCell/TableCell.js

@@ -3,6 +3,7 @@ import { DefaultCellRenderer } from '../helpers';
 export var TableCell = function (_a) {
     var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
     var CellRenderer = rowData.cellRenderer || DefaultCellRenderer;
-    return (React.createElement("td", { onMouseOver: function () { return setHoveredColumn(columnValue); }, onMouseLeave: resetHoveredColumn },
+    var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
+    return (React.createElement("td", { onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
         React.createElement(CellRenderer, { value: columnValue[rowData.id] })));
 };

package/esm/components/VerticalHeadingsTable/TableCellWithDnd/TableCellWithDnd.js

@@ -56,7 +56,8 @@ export var TableCellWithDnd = function (_a) {
         drop(dropRef);
         drag(dragRef);
     }, []);
-    return (React.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: function () { return setHoveredColumn(columnValue); }, onMouseLeave: resetHoveredColumn },
+    var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
+    return (React.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
         shouldRenderDragIndicator && (React.createElement("div", { ref: dragRef, className: styles.dragIndicator },
             React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon }))),
         React.createElement(CellRenderer, { value: columnValue[rowData.id] })));

package/esm/components/VerticalHeadingsTable/TableRow/TableRow.js

@@ -10,6 +10,6 @@ export var TableRow = function (_a) {
         columnsData.map(function (columnValue, index) {
             var isDraggableColumn = columnValue.isDraggable;
             var shouldRenderDragIndicator = isFirstRow && isDraggableColumn;
-            return onMoveColumn ? (React.createElement(TableCellWithDnd, { key: columnValue.id, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: shouldRenderDragIndicator, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableCell, { key: columnValue.id, rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+            return onMoveColumn ? (React.createElement(TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: shouldRenderDragIndicator, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableCell, { key: columnValue.id || index, rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
         })));
 };

package/esm/components/VerticalHeadingsTable/TableRowWithDnd/TableRowWithDnd.js

@@ -50,6 +50,6 @@ export var TableRowWithDnd = function (_a) {
     return (React.createElement("tr", { className: rowData.rowClassName, style: { opacity: opacity }, ref: dropRef, "data-target-id": targetId, "data-source-id": sourceId },
         React.createElement(TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }),
         columnsData.map(function (columnValue, index) {
-            return onMoveColumn ? (React.createElement(TableCellWithDnd, { key: columnValue.id, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableCell, { key: columnValue.id, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+            return onMoveColumn ? (React.createElement(TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
         })));
 };

package/esm/components/VerticalHeadingsTable/VerticalHeadingsTable.js

@@ -7,12 +7,13 @@ var VerticalHeadingsTable = function (_a) {
     var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
     var tableRef = useRef(null);
     var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
+    var isDNDActive = !!onMoveRow || !!onMoveColumn;
     return (React.createElement(React.Fragment, null,
-        React.createElement(TableColumnDragLayer, { columnHeight: tableHeight }),
+        isDNDActive && React.createElement(TableColumnDragLayer, { columnHeight: tableHeight }),
         React.createElement("table", { ref: tableRef, className: className },
-            theadRowsNumber > 0 && (React.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (React.createElement(TableRow, { key: rowData.id, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
+            theadRowsNumber > 0 && (React.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (React.createElement(TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
             React.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
-                return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableRow, { key: rowData.id, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+                return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
             })))));
 };
 export default memo(VerticalHeadingsTable);

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

@@ -27,6 +27,7 @@ import { findAttributeTypeByUri, getEntityLink, getLabel, getReferencedEntityUri
 import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
 import { isNil, map, pipe, reject } from 'ramda';
 import { ComplexAttributeLabel } from '../common/ComplexAttributeLabel';
+import InternalLink from '../../../InternalLink/InternalLink';
 import { useStyles } from './styles';
 var ReferenceAttribute = function (_a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType, other = __rest(_a, ["attributeValue", "attributeType"]);
@@ -34,7 +35,7 @@ var ReferenceAttribute = function (_a) {
     var metadata = useSelector(mdmModule.selectors.getMetadata);
     var uiPath = useSelector(mdmModule.selectors.getUIPath);
     var entityLabel = (React.createElement(ComplexAttributeLabel, null,
-        React.createElement("a", { href: getEntityLink({ uiPath: uiPath, uri: getReferencedEntityUriFromAttrValue(attributeValue) }), className: styles.label },
+        React.createElement(InternalLink, { href: getEntityLink({ uiPath: uiPath, uri: getReferencedEntityUriFromAttrValue(attributeValue) }) },
             getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (React.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel)))));
     var attributeTypesList = pipe(getReferencedRelationAttrTypesUris, map(function (attrTypeUri) { return findAttributeTypeByUri(metadata, attrTypeUri); }), reject(isNil))(attributeType);

package/esm/components/attributes/inline/ReferenceAttribute/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "relationshipLabel">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"relationshipLabel">;

package/esm/components/attributes/inline/ReferenceAttribute/styles.js

@@ -1,9 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles(function (theme) { return ({
-    label: {
-        color: theme.palette.primary.main,
-        textDecoration: 'none'
-    },
     relationshipLabel: {
         marginLeft: '4px',
         color: theme.palette.text.primary

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

@@ -5,6 +5,10 @@ declare type Props = {
     attributeType: AttributeType;
     expanded?: boolean;
     valueContainerClassName?: string;
+    LabelRenderer?: ({ attributeType: AttributeType, attributeValue: AttributeValue }: {
+        attributeType: any;
+        attributeValue: any;
+    }) => JSX.Element;
 };
-declare const _default: React.MemoExoticComponent<({ expanded, ...props }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, ...props }: Props) => JSX.Element>;
 export default _default;

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

@@ -30,12 +30,12 @@ var renderAttributesList = function (_a) {
         React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))); })));
 };
 var AttributeValuesBlock = function (_a) {
-    var expanded = _a.expanded, props = __rest(_a, ["expanded"]);
+    var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, props = __rest(_a, ["expanded", "LabelRenderer"]);
     var attributeType = props.attributeType, values = props.values, valueContainerClassName = props.valueContainerClassName;
     switch (attributeType.type) {
         case DataTypes.TYPE_NESTED:
         case DataTypes.TYPE_REFERENCE: {
-            return renderAttributesList(__assign({ expanded: expanded }, props));
+            return renderAttributesList(__assign({ expanded: expanded, LabelRenderer: LabelRenderer }, props));
         }
         case DataTypes.TYPE_IMAGE: {
             return (React.createElement("div", { className: valueContainerClassName },

package/esm/components/attributes/readMode/AttributesPager/SpecialRenderer.js

@@ -22,7 +22,7 @@ var SpecialRenderer = function (_a) {
                 return React.createElement(Roles, { className: className, values: values });
             }
             default: {
-                //startDate, endDate
+                //startDate, endDate, "crosswalk" fake nested subattibutes
                 return (React.createElement(Attribute, { className: className, attributeValue: { value: values[0] }, attributeType: attributeType, inlined: true }));
             }
         }

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

@@ -1,5 +1,5 @@
 export default ComplexAttribute;
-declare function ComplexAttribute({ attributeTypesList, attributeValue, label, expanded: expandedProp, children, showNonOv, attributeType }: {
+declare function ComplexAttribute({ attributeTypesList, attributeValue, label, expanded: expandedProp, children, showNonOv, attributeType, LabelRenderer }: {
     attributeTypesList: any;
     attributeValue: any;
     label: any;
@@ -7,6 +7,7 @@ declare function ComplexAttribute({ attributeTypesList, attributeValue, label, e
     children: any;
     showNonOv: any;
     attributeType: any;
+    LabelRenderer: any;
 }): JSX.Element;
 declare namespace ComplexAttribute {
     namespace propTypes {
@@ -36,6 +37,7 @@ declare namespace ComplexAttribute {
         export const expanded: PropTypes.Requireable<boolean>;
         export const showNonOv: PropTypes.Requireable<boolean>;
         export { AttributeTypeType as attributeType };
+        export const LabelRenderer: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -1,37 +1,53 @@
-import React, { useEffect, useMemo, useState } from 'react';
+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);
+};
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { AttributeTypeType, isAnalyticAttribute, NestedAttributeValueType, ReferenceAttributeValueType, CollaborationObjectTypes, createRelatedObjectUris, isRelationAttrType } from '@reltio/mdm-sdk';
+import { AttributeTypeType, areOneHierarchyUris, isAnalyticAttribute, NestedAttributeValueType, ReferenceAttributeValueType, CollaborationObjectTypes, createRelatedObjectUris, isRelationAttrType, isSpecialAttribute } from '@reltio/mdm-sdk';
 import Typography from '@material-ui/core/Typography';
 import AttributesList from '../AttributesList/AttributesList';
 import ArrowExpandButton from '../../../ArrowExpandButton/ArrowExpandButton';
 import CommentsContainer from '../../../CommentsContainer/CommentsContainer';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
 import { useStyles } from './styles';
+import { HighlightedValuesContext } from '../../../../contexts';
 var ComplexAttribute = function (_a) {
-    var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _b = _a.expanded, expandedProp = _b === void 0 ? false : _b, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType;
+    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 uri = attributeValue.uri;
-    var _c = useState(false), expanded = _c[0], setExpanded = _c[1];
+    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;
     useEffect(function () {
         setExpanded(expandedProp);
     }, [expandedProp]);
     var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return isAnalyticAttribute(attributeType); });
-    var attributeListEntity = useMemo(function () { return ({
-        attributes: hasAnalyticValue ? null : attributeValue.value,
-        analyticsAttributes: hasAnalyticValue ? attributeValue.value : null
-    }); }, [attributeValue, hasAnalyticValue]);
+    var attributeListEntity = useMemo(function () { return (__assign({ attributes: hasAnalyticValue ? null : attributeValue.value, analyticsAttributes: hasAnalyticValue ? attributeValue.value : null }, (isSpecialAttribute(attributeType) ? attributeValue.value : {}))); }, [attributeValue, hasAnalyticValue, attributeType]);
     var objectType = isRelationAttrType(attributeType)
         ? CollaborationObjectTypes.RELATION_ATTRIBUTE
         : CollaborationObjectTypes.ENTITY_ATTRIBUTE;
     return (React.createElement("div", { className: styles.complexContainer },
         React.createElement("div", { className: classnames(styles.labelContainer, COMMENTS_CONTAINER_VISIBILITY_AREA) },
             React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
-            React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label }, "data-reltio-id": "reltio-attribute-complex-label" }, label),
-            React.createElement("div", { className: styles.spacer }),
-            React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
-                    uri: attributeValue.uri
-                }), objectType: objectType })),
+            LabelRenderer ? (React.createElement(LabelRenderer, { attributeType: attributeType, attributeValue: attributeValue })) : (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label }, className: classnames((_b = {},
+                        _b[highlightedClassName] = highlightedValuesUris.some(function (uri) {
+                            return areOneHierarchyUris(uri, attributeValue.uri);
+                        }),
+                        _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
+                React.createElement("div", { className: styles.spacer }),
+                React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
+                        uri: attributeValue.uri
+                    }), objectType: objectType })))),
         expanded && (React.createElement(AttributesList, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv }, children))));
 };
 ComplexAttribute.propTypes = {
@@ -41,6 +57,7 @@ ComplexAttribute.propTypes = {
     attributeValue: PropTypes.oneOfType([NestedAttributeValueType, ReferenceAttributeValueType]),
     expanded: PropTypes.bool,
     showNonOv: PropTypes.bool,
-    attributeType: AttributeTypeType
+    attributeType: AttributeTypeType,
+    LabelRenderer: PropTypes.func
 };
 export default ComplexAttribute;

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

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo, useContext, useMemo } from 'react';
-import classnames from 'classnames';
 import { getAttributeTypeSubAttributes, getEntityLink, getLabel, getReferencedEntityUriFromAttrValue, isEmptyValue, 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 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"]);
@@ -39,7 +39,7 @@ var ReferenceAttribute = function (_a) {
     var entityLabel = useMemo(function () {
         var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
         var historyAttributesClassName = getHistoryAttributeClassName(attributeAppearance);
-        return (React.createElement("a", { href: isEmptyValue(appearance) ? getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: classnames(styles.label, styles[historyAttributesClassName]) },
+        return (React.createElement(InternalLink, { href: isEmptyValue(appearance) ? getEntityLink({ uiPath: uiPath, uri: refEntityURI }) : undefined, className: styles[historyAttributesClassName] },
             getLabel(attributeValue.label),
             attributeValue.relationshipLabel && (React.createElement("span", { className: styles.relationshipLabel }, attributeValue.relationshipLabel))));
     }, [

package/esm/components/attributes/readMode/ReferenceAttribute/styles.d.ts

@@ -1,2 +1,2 @@
 export default styles;
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "relationshipLabel" | "updateAttribute" | "insertAttribute" | "deleteAttribute">;
+declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"relationshipLabel" | "updateAttribute" | "insertAttribute" | "deleteAttribute">;

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

@@ -12,10 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import { makeStyles } from '@material-ui/core/styles';
 import { HistoryOperations, historyPalettes } from '../helpers/historyAppearance';
 var styles = makeStyles(function (theme) { return ({
-    label: {
-        color: theme.palette.primary.main,
-        textDecoration: 'none'
-    },
     relationshipLabel: {
         marginLeft: '4px',
         color: theme.palette.text.primary

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

@@ -8,10 +8,12 @@ import DataTypeValue from '../../../DataTypeValue/DataTypeValue';
 import { PivotingTooltip } from '../../PivotingAttributes/PivotingTooltip';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import { useStyles } from './styles';
+import { HighlightedValuesContext } from '../../../../contexts';
 var SimpleAttribute = function (_a) {
-    var _b;
-    var className = _a.className, _c = _a.attributeType, attributeType = _c === void 0 ? null : _c, attributeValue = _a.attributeValue, inlined = _a.inlined;
+    var _b, _c, _d;
+    var className = _a.className, _e = _a.attributeType, attributeType = _e === void 0 ? null : _e, 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 appearance = useContext(HistoryDiffContext).appearance;
     var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
     var historyClassName = getHistoryAttributeClassName(attributeAppearance);
@@ -19,9 +21,13 @@ var SimpleAttribute = function (_a) {
     var objectType = isRelationAttrType(attributeType)
         ? CollaborationObjectTypes.RELATION_ATTRIBUTE
         : CollaborationObjectTypes.ENTITY_ATTRIBUTE;
-    return inlined || historyClassName ? (React.createElement("div", { className: className },
-        React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_b = {}, _b[styles.multilineAttribute] = !inlined, _b)) },
-            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) },
+    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: 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(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
             React.createElement("span", { className: styles.attributeValue, "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
         React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {

package/esm/components/attributes/readMode/SpecialAttributes/Tags/Tag.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import Link from '@material-ui/core/Link';
+import InternalLink from '../../../../InternalLink/InternalLink';
 import { useSelector } from 'react-redux';
 import mdmModule from '@reltio/mdm-module';
 import { getDataTenantEntityUri, getTagLink } from '@reltio/mdm-sdk';
@@ -16,7 +16,7 @@ var Tag = function (_a) {
     var attributeAppearance = getHistoryAppearanceBySpecialAttributeValue('tags', value, appearance);
     var historyClassName = getHistoryAttributeClassName(attributeAppearance);
     var entity = ownEntity || currentEntity;
-    return (React.createElement(Link, { underline: "none", className: styles[historyClassName], href: getTagLink({
+    return (React.createElement(InternalLink, { className: styles[historyClassName], href: getTagLink({
             uiPath: uiPath,
             tag: value,
             entityUri: entity.dataTenant ? getDataTenantEntityUri(entity) : entity.uri

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const HighlightedValuesContext: React.Context<{
+    highlightedValuesUris: string[];
+    highlightedClassName: string;
+}>;

package/esm/contexts/HighlightedValuesContext/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export var HighlightedValuesContext = React.createContext({
+    highlightedValuesUris: [],
+    highlightedClassName: ''
+});
+HighlightedValuesContext.displayName = 'HighlightedValuesContext';

package/esm/contexts/index.d.ts

@@ -19,3 +19,4 @@ export { SandboxAPIContext } from './SandboxAPIContext';
 export { useReloadAllFacets, ReloadFacetProvider, useReloadFacet } from './ReloadFacetContext';
 export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
+export { HighlightedValuesContext } from './HighlightedValuesContext';

package/esm/contexts/index.js

@@ -19,3 +19,4 @@ export { SandboxAPIContext } from './SandboxAPIContext';
 export { useReloadAllFacets, ReloadFacetProvider, useReloadFacet } from './ReloadFacetContext';
 export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
+export { HighlightedValuesContext } from './HighlightedValuesContext';

package/esm/hooks/useMatchesLoader.d.ts

@@ -15,8 +15,9 @@ declare type Props = {
         order: string;
         field: string;
     };
+    markMatchedValues?: boolean;
 };
-export declare const useMatchesLoader: ({ enabled, entity, filter, onFinishLoading, onStartLoading, options, page, rowsPerPage, sorting }: Props) => {
+export declare const useMatchesLoader: ({ enabled, entity, filter, onFinishLoading, onStartLoading, options, page, rowsPerPage, sorting, markMatchedValues }: Props) => {
     total: number;
     matches: PotentialMatch[];
     entitiesMap: {

package/esm/hooks/useMatchesLoader.js

@@ -6,7 +6,7 @@ import { usePagingSimulator } from './usePagingSimulator';
 import { useSafePromise } from './useSafePromise';
 import { prop } from 'ramda';
 export var useMatchesLoader = function (_a) {
-    var enabled = _a.enabled, entity = _a.entity, filter = _a.filter, onFinishLoading = _a.onFinishLoading, onStartLoading = _a.onStartLoading, options = _a.options, page = _a.page, rowsPerPage = _a.rowsPerPage, sorting = _a.sorting;
+    var enabled = _a.enabled, entity = _a.entity, filter = _a.filter, onFinishLoading = _a.onFinishLoading, onStartLoading = _a.onStartLoading, options = _a.options, page = _a.page, rowsPerPage = _a.rowsPerPage, sorting = _a.sorting, markMatchedValues = _a.markMatchedValues;
     var _b = sorting || {}, order = _b.order, field = _b.field;
     var _c = useState(0), total = _c[0], setTotal = _c[1];
     var _d = useState([]), matches = _d[0], setMatches = _d[1];
@@ -61,6 +61,7 @@ export var useMatchesLoader = function (_a) {
                 sort: field,
                 order: order,
                 force: force,
+                markMatchedValues: markMatchedValues,
                 deep: options.showTransitiveMatches ? undefined : 1,
                 activeness: activeness
             }))
@@ -84,6 +85,7 @@ export var useMatchesLoader = function (_a) {
         entityUri,
         field,
         filter,
+        markMatchedValues,
         getPagedMatchesForDataTenantEntity,
         getTransitiveMatchesWithPaging,
         onFinishLoading,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1124",
+  "version": "1.4.1128-hf",
   "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.1124",
-    "@reltio/mdm-sdk": "^1.4.1124",
+    "@reltio/mdm-module": "^1.4.1128-hf",
+    "@reltio/mdm-sdk": "^1.4.1128-hf",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
@@ -29,6 +29,7 @@
     "react-number-format": "^4.3.0",
     "react-redux": "^7.2.3",
     "react-resize-detector": "^4.2.0",
+    "react-router-dom": "^6.2.1",
     "react-select": "^3.0.4",
     "react-simple-maps": "^2.3.0",
     "react-split-pane": "^0.1.89",