npm - @reltio/components - Versions diffs - 1.4.1262 → 1.4.1264 - Mend

@reltio/components 1.4.1262 → 1.4.1264

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/cjs/components/DataTypeValue/DataTypeValue.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ declare function DataTypeValue({ value, dataTypeDefinition, rich }: {
     value?: any;
     dataTypeDefinition: any;
     rich?: boolean;
-}): any;
+}): JSX.Element;
 declare namespace DataTypeValue {
     namespace propTypes {
         const value: PropTypes.Requireable<any>;

package/cjs/components/DataTypeValue/DataTypeValue.js CHANGED Viewed

@@ -10,6 +10,7 @@ var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var react_redux_1 = require("react-redux");
 var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var SearchHighlighter_1 = __importDefault(require("../SearchHighlighter/SearchHighlighter"));
 var DataTypeValue = function (_a) {
     var _b = _a.value, value = _b === void 0 ? null : _b, dataTypeDefinition = _a.dataTypeDefinition, _c = _a.rich, rich = _c === void 0 ? true : _c;
     var attributePresentations = react_redux_1.useSelector(mdm_module_1.default.selectors.getAttributePresentations);
@@ -18,7 +19,8 @@ var DataTypeValue = function (_a) {
     var dateMask = react_redux_1.useSelector(mdm_module_1.default.selectors.getDateMask) || localeDateFormat;
     var dateTimeMask = react_redux_1.useSelector(mdm_module_1.default.selectors.getDateTimeMask) || localeDateFormat + ' ' + localeTimeFormat;
     var formattedValue = mdm_sdk_1.formatDataTypeValue({ attributePresentations: attributePresentations, dataTypeDefinition: dataTypeDefinition, dateMask: dateMask, dateTimeMask: dateTimeMask }, value);
-    return rich && mdm_sdk_1.isAttributeValueLink(dataTypeDefinition, value) ? (react_1.default.createElement(Link_1.default, { target: "_blank", href: mdm_sdk_1.addProtocolToLink(formattedValue), underline: "none" }, formattedValue)) : (formattedValue);
+    return rich && mdm_sdk_1.isAttributeValueLink(dataTypeDefinition, value) ? (react_1.default.createElement(Link_1.default, { target: "_blank", href: mdm_sdk_1.addProtocolToLink(formattedValue), underline: "none" },
+        react_1.default.createElement(SearchHighlighter_1.default, { text: formattedValue }))) : (react_1.default.createElement(SearchHighlighter_1.default, { text: formattedValue }));
 };
 DataTypeValue.propTypes = {
     value: prop_types_1.default.any,

package/cjs/components/Highlighter/Highlighter.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ declare type Props = {
     text?: string;
     highlight?: string;
     className?: string;
+    multiTerm?: boolean;
 };
-declare const Highlighter: ({ text, highlight, className }: Props) => JSX.Element;
+declare const Highlighter: ({ text, highlight, className, multiTerm }: Props) => JSX.Element;
 export default Highlighter;

package/cjs/components/Highlighter/Highlighter.js CHANGED Viewed

@@ -4,15 +4,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
 var styles_1 = require("./styles");
 var Highlighter = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.highlight, highlight = _c === void 0 ? '' : _c, className = _a.className;
+    var text = _a.text, highlight = _a.highlight, className = _a.className, _b = _a.multiTerm, multiTerm = _b === void 0 ? false : _b;
     var styles = styles_1.useStyles();
-    var parts = highlight && text.split(new RegExp("(" + highlight + ")", 'gi'));
-    return (react_1.default.createElement("span", null, highlight
-        ? parts.map(function (part, i) { return (react_1.default.createElement("span", { key: i, className: part.toLocaleLowerCase() === highlight.toLocaleLowerCase()
-                ? className || styles.highlight
-                : '' }, part)); })
-        : text));
+    var hasHighlights = text && highlight;
+    if (!hasHighlights) {
+        return react_1.default.createElement(react_1.default.Fragment, null, text);
+    }
+    var REG_SPACES = new RegExp(/\s+/);
+    var getMultiTerms = ramda_1.pipe(ramda_1.trim, ramda_1.split(REG_SPACES), ramda_1.map(ramda_1.toLower), ramda_1.sort(ramda_1.ascend), ramda_1.reverse);
+    var highlightedValues = multiTerm ? getMultiTerms(highlight) : [ramda_1.toLower(highlight)];
+    var regValues = highlightedValues.map(function (item) { return item.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); });
+    var parts = text.split(new RegExp("(" + regValues.join('|') + ")", 'gi'));
+    return (react_1.default.createElement("span", null, parts.map(function (part, i) {
+        var isHighlightedText = highlightedValues.includes(part.toLocaleLowerCase());
+        return isHighlightedText ? (react_1.default.createElement("span", { key: i, className: className || styles.highlight }, part)) : (part);
+    })));
 };
 exports.default = Highlighter;

package/cjs/components/SearchHighlighter/SearchHighlighter.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    text?: string;
+};
+declare const SearchHighlighter: ({ text }: Props) => JSX.Element;
+export default SearchHighlighter;

package/cjs/components/SearchHighlighter/SearchHighlighter.js ADDED Viewed

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var contexts_1 = require("../../contexts");
+var Highlighter_1 = __importDefault(require("../Highlighter/Highlighter"));
+var styles_1 = require("./styles");
+var SearchHighlighter = function (_a) {
+    var text = _a.text;
+    var styles = styles_1.useStyles();
+    var keywordValue = react_1.useContext(contexts_1.SearchValueContext);
+    return react_1.default.createElement(Highlighter_1.default, { text: text, highlight: keywordValue, className: styles.highlightedText, multiTerm: true });
+};
+exports.default = SearchHighlighter;

package/cjs/components/SearchHighlighter/styles.d.ts ADDED Viewed

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

package/cjs/components/SearchHighlighter/styles.js ADDED Viewed

@@ -0,0 +1,9 @@
+"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({
+    highlightedText: {
+        background: 'rgb(255, 235, 203)'
+    }
+});

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

@@ -41,10 +41,10 @@ var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var AttributesList_1 = __importDefault(require("../AttributesList/AttributesList"));
 var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/ArrowExpandButton"));
 var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/CommentsContainer"));
-var classnames_2 = require("../../../../constants/classnames");
-var styles_1 = require("./styles");
 var contexts_1 = require("../../../../contexts");
 var commonStyles_1 = require("../helpers/commonStyles");
+var classnames_2 = require("../../../../constants/classnames");
+var styles_1 = require("./styles");
 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, RightSlot = _a.RightSlot;

package/cjs/components/attributes/readMode/NestedAttribute/NestedAttribute.js CHANGED Viewed

@@ -52,6 +52,7 @@ var contexts_1 = require("../../../../contexts");
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
 var PivotingTooltip_1 = require("../../PivotingAttributes/PivotingTooltip");
+var SearchHighlighter_1 = __importDefault(require("../../../SearchHighlighter/SearchHighlighter"));
 var styles_1 = __importDefault(require("./styles"));
 var NestedAttribute = function (_a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType, otherProps = __rest(_a, ["attributeValue", "attributeType"]);
@@ -64,7 +65,8 @@ var NestedAttribute = function (_a) {
             ? attributeValue.label
             : mdm_sdk_1.evaluateDeepEntityLabel(attributeValue, attributeType.dataLabelPattern);
         return (react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { className: styles.pivotingTooltip, value: attributeValue, attributeType: attributeType },
-            react_1.default.createElement(Box_1.default, { component: "span", className: classnames_1.default(styles[historyAttributesClassName], styles.label) }, mdm_sdk_1.getLabel(label))));
+            react_1.default.createElement(Box_1.default, { component: "span", className: classnames_1.default(styles[historyAttributesClassName], styles.label) },
+                react_1.default.createElement(SearchHighlighter_1.default, { text: mdm_sdk_1.getLabel(label) }))));
     }, [appearance, styles, attributeValue, attributeType]);
     return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ label: attributeLabel, attributeValue: attributeValue, attributeTypesList: mdm_sdk_1.getAttributeTypeSubAttributes({}, attributeType), attributeType: attributeType }, otherProps)));
 };

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

@@ -51,6 +51,7 @@ 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 SearchHighlighter_1 = __importDefault(require("../../../SearchHighlighter/SearchHighlighter"));
 var commonStyles_1 = require("../helpers/commonStyles");
 var styles_1 = __importDefault(require("./styles"));
 var ReferenceAttribute = function (_a) {
@@ -70,8 +71,9 @@ var ReferenceAttribute = function (_a) {
         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))));
+            react_1.default.createElement(SearchHighlighter_1.default, { text: mdm_sdk_1.getLabel(attributeValue.label) }),
+            attributeValue.relationshipLabel && (react_1.default.createElement("span", { className: styles.relationshipLabel },
+                react_1.default.createElement(SearchHighlighter_1.default, { text: attributeValue.relationshipLabel })))));
     }, [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)));
 };

package/cjs/contexts/SearchValueContext/index.d.ts ADDED Viewed

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

package/cjs/contexts/SearchValueContext/index.js ADDED Viewed

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

package/cjs/contexts/index.d.ts CHANGED Viewed

@@ -21,3 +21,4 @@ export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
 export { HighlightedValuesContext } from './HighlightedValuesContext';
 export { InterceptHandlersContext } from './InterceptHandlersContext';
+export { SearchValueContext } from './SearchValueContext';

package/cjs/contexts/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InterceptHandlersContext = 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;
+exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.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");
@@ -54,3 +54,5 @@ var HighlightedValuesContext_1 = require("./HighlightedValuesContext");
 Object.defineProperty(exports, "HighlightedValuesContext", { enumerable: true, get: function () { return HighlightedValuesContext_1.HighlightedValuesContext; } });
 var InterceptHandlersContext_1 = require("./InterceptHandlersContext");
 Object.defineProperty(exports, "InterceptHandlersContext", { enumerable: true, get: function () { return InterceptHandlersContext_1.InterceptHandlersContext; } });
+var SearchValueContext_1 = require("./SearchValueContext");
+Object.defineProperty(exports, "SearchValueContext", { enumerable: true, get: function () { return SearchValueContext_1.SearchValueContext; } });

package/esm/components/DataTypeValue/DataTypeValue.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ declare function DataTypeValue({ value, dataTypeDefinition, rich }: {
     value?: any;
     dataTypeDefinition: any;
     rich?: boolean;
-}): any;
+}): JSX.Element;
 declare namespace DataTypeValue {
     namespace propTypes {
         const value: PropTypes.Requireable<any>;

package/esm/components/DataTypeValue/DataTypeValue.js CHANGED Viewed

@@ -5,6 +5,7 @@ import mdm from '@reltio/mdm-module';
 import { formatDataTypeValue, isAttributeValueLink, addProtocolToLink } from '@reltio/mdm-sdk';
 import { useSelector } from 'react-redux';
 import Link from '@material-ui/core/Link';
+import SearchHighlighter from '../SearchHighlighter/SearchHighlighter';
 var DataTypeValue = function (_a) {
     var _b = _a.value, value = _b === void 0 ? null : _b, dataTypeDefinition = _a.dataTypeDefinition, _c = _a.rich, rich = _c === void 0 ? true : _c;
     var attributePresentations = useSelector(mdm.selectors.getAttributePresentations);
@@ -13,7 +14,8 @@ var DataTypeValue = function (_a) {
     var dateMask = useSelector(mdm.selectors.getDateMask) || localeDateFormat;
     var dateTimeMask = useSelector(mdm.selectors.getDateTimeMask) || localeDateFormat + ' ' + localeTimeFormat;
     var formattedValue = formatDataTypeValue({ attributePresentations: attributePresentations, dataTypeDefinition: dataTypeDefinition, dateMask: dateMask, dateTimeMask: dateTimeMask }, value);
-    return rich && isAttributeValueLink(dataTypeDefinition, value) ? (React.createElement(Link, { target: "_blank", href: addProtocolToLink(formattedValue), underline: "none" }, formattedValue)) : (formattedValue);
+    return rich && isAttributeValueLink(dataTypeDefinition, value) ? (React.createElement(Link, { target: "_blank", href: addProtocolToLink(formattedValue), underline: "none" },
+        React.createElement(SearchHighlighter, { text: formattedValue }))) : (React.createElement(SearchHighlighter, { text: formattedValue }));
 };
 DataTypeValue.propTypes = {
     value: PropTypes.any,

package/esm/components/Highlighter/Highlighter.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ declare type Props = {
     text?: string;
     highlight?: string;
     className?: string;
+    multiTerm?: boolean;
 };
-declare const Highlighter: ({ text, highlight, className }: Props) => JSX.Element;
+declare const Highlighter: ({ text, highlight, className, multiTerm }: Props) => JSX.Element;
 export default Highlighter;

package/esm/components/Highlighter/Highlighter.js CHANGED Viewed

@@ -1,13 +1,21 @@
 import React from 'react';
+import { ascend, map, pipe, reverse, sort, split, toLower, trim } from 'ramda';
 import { useStyles } from './styles';
 var Highlighter = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.highlight, highlight = _c === void 0 ? '' : _c, className = _a.className;
+    var text = _a.text, highlight = _a.highlight, className = _a.className, _b = _a.multiTerm, multiTerm = _b === void 0 ? false : _b;
     var styles = useStyles();
-    var parts = highlight && text.split(new RegExp("(" + highlight + ")", 'gi'));
-    return (React.createElement("span", null, highlight
-        ? parts.map(function (part, i) { return (React.createElement("span", { key: i, className: part.toLocaleLowerCase() === highlight.toLocaleLowerCase()
-                ? className || styles.highlight
-                : '' }, part)); })
-        : text));
+    var hasHighlights = text && highlight;
+    if (!hasHighlights) {
+        return React.createElement(React.Fragment, null, text);
+    }
+    var REG_SPACES = new RegExp(/\s+/);
+    var getMultiTerms = pipe(trim, split(REG_SPACES), map(toLower), sort(ascend), reverse);
+    var highlightedValues = multiTerm ? getMultiTerms(highlight) : [toLower(highlight)];
+    var regValues = highlightedValues.map(function (item) { return item.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); });
+    var parts = text.split(new RegExp("(" + regValues.join('|') + ")", 'gi'));
+    return (React.createElement("span", null, parts.map(function (part, i) {
+        var isHighlightedText = highlightedValues.includes(part.toLocaleLowerCase());
+        return isHighlightedText ? (React.createElement("span", { key: i, className: className || styles.highlight }, part)) : (part);
+    })));
 };
 export default Highlighter;

package/esm/components/SearchHighlighter/SearchHighlighter.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    text?: string;
+};
+declare const SearchHighlighter: ({ text }: Props) => JSX.Element;
+export default SearchHighlighter;

package/esm/components/SearchHighlighter/SearchHighlighter.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { SearchValueContext } from '../../contexts';
+import Highlighter from '../Highlighter/Highlighter';
+import { useStyles } from './styles';
+var SearchHighlighter = function (_a) {
+    var text = _a.text;
+    var styles = useStyles();
+    var keywordValue = useContext(SearchValueContext);
+    return React.createElement(Highlighter, { text: text, highlight: keywordValue, className: styles.highlightedText, multiTerm: true });
+};
+export default SearchHighlighter;

package/esm/components/SearchHighlighter/styles.d.ts ADDED Viewed

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

package/esm/components/SearchHighlighter/styles.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    highlightedText: {
+        background: 'rgb(255, 235, 203)'
+    }
+});

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

@@ -17,10 +17,10 @@ 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';
 import { useOvValueStyles } from '../helpers/commonStyles';
+import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants/classnames';
+import { useStyles } from './styles';
 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, RightSlot = _a.RightSlot;

package/esm/components/attributes/readMode/NestedAttribute/NestedAttribute.js CHANGED Viewed

@@ -28,6 +28,7 @@ import { HistoryDiffContext } from '../../../../contexts';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
 import { PivotingTooltip } from '../../PivotingAttributes/PivotingTooltip';
+import SearchHighlighter from '../../../SearchHighlighter/SearchHighlighter';
 import useStyles from './styles';
 var NestedAttribute = function (_a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType, otherProps = __rest(_a, ["attributeValue", "attributeType"]);
@@ -40,7 +41,8 @@ var NestedAttribute = function (_a) {
             ? attributeValue.label
             : evaluateDeepEntityLabel(attributeValue, attributeType.dataLabelPattern);
         return (React.createElement(PivotingTooltip, { className: styles.pivotingTooltip, value: attributeValue, attributeType: attributeType },
-            React.createElement(Box, { component: "span", className: classnames(styles[historyAttributesClassName], styles.label) }, getLabel(label))));
+            React.createElement(Box, { component: "span", className: classnames(styles[historyAttributesClassName], styles.label) },
+                React.createElement(SearchHighlighter, { text: getLabel(label) }))));
     }, [appearance, styles, attributeValue, attributeType]);
     return (React.createElement(ComplexAttribute, __assign({ label: attributeLabel, attributeValue: attributeValue, attributeTypesList: getAttributeTypeSubAttributes({}, attributeType), attributeType: attributeType }, otherProps)));
 };

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

@@ -27,6 +27,7 @@ import { HistoryDiffContext } from '../../../../contexts';
 import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import InternalLink from '../../../InternalLink/InternalLink';
+import SearchHighlighter from '../../../SearchHighlighter/SearchHighlighter';
 import { useOvValueStyles } from '../helpers/commonStyles';
 import useStyles from './styles';
 var ReferenceAttribute = function (_a) {
@@ -46,8 +47,9 @@ var ReferenceAttribute = function (_a) {
         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))));
+            React.createElement(SearchHighlighter, { text: getLabel(attributeValue.label) }),
+            attributeValue.relationshipLabel && (React.createElement("span", { className: styles.relationshipLabel },
+                React.createElement(SearchHighlighter, { text: attributeValue.relationshipLabel })))));
     }, [attributeValue, appearance, uiPath, refEntityURI, styles, ovValueStyles.ovFalse]);
     return (React.createElement(ComplexAttribute, __assign({ attributeTypesList: attributeTypeList, attributeValue: attributeValue, label: entityLabel, attributeType: attributeType }, otherProps)));
 };

package/esm/contexts/SearchValueContext/index.d.ts ADDED Viewed

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

package/esm/contexts/SearchValueContext/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import React from 'react';
+export var SearchValueContext = React.createContext('');
+SearchValueContext.displayName = 'SearchValueContext';

package/esm/contexts/index.d.ts CHANGED Viewed

@@ -21,3 +21,4 @@ export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
 export { HighlightedValuesContext } from './HighlightedValuesContext';
 export { InterceptHandlersContext } from './InterceptHandlersContext';
+export { SearchValueContext } from './SearchValueContext';

package/esm/contexts/index.js CHANGED Viewed

@@ -21,3 +21,4 @@ export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
 export { HighlightedValuesContext } from './HighlightedValuesContext';
 export { InterceptHandlersContext } from './InterceptHandlersContext';
+export { SearchValueContext } from './SearchValueContext';

package/package.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1262",
+  "version": "1.4.1264",
   "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.1262",
-    "@reltio/mdm-sdk": "^1.4.1262",
+    "@reltio/mdm-module": "^1.4.1264",
+    "@reltio/mdm-sdk": "^1.4.1264",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",