@reltio/components 1.4.1261 → 1.4.1263

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/cjs/components/SearchHighlighter/styles.js

@@ -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/editMode/EntitySelector/EntitySelector.js

@@ -96,13 +96,6 @@ var EntitySelector = function (_a) {
         entityTypesUris,
         metadata
     ]);
-    var filters = [
-        {
-            filter: 'equals',
-            fieldName: 'type',
-            values: entityTypesUris.map(mdm_sdk_1.getLastUriPart)
-        }
-    ];
     var options = __assign(__assign({}, globalSearchRequestOptions), { max: max });
     var handleCreate = onCreate
         ? function (value, entityTypeUri) {
@@ -124,7 +117,7 @@ var EntitySelector = function (_a) {
     };
     var groupMode = react_1.useMemo(function () { return entityTypes.length !== 1; }, [entityTypes]);
     var getOptions = function (value) {
-        return mdm_sdk_1.getFilteredEntities(filters, options, value).then(buildEntityOptions(entityTypes, onCreate));
+        return mdm_sdk_1.typeAheadSearch(entityTypes, value, options).then(buildEntityOptions(entityTypes, onCreate));
     };
     var currentEntityType = (ramda_1.isEmpty(entity) ? entityTypes[0] : mdm_sdk_1.getEntityType(metadata, entity.entityType)) || {};
     var createLabel = onCreate && ui_i18n_1.default.text("Create " + (inputValue ? "\"" + inputValue + "\" as " : '') + "new " + currentEntityType.label);

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

@@ -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

@@ -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

@@ -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

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

package/cjs/contexts/SearchValueContext/index.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/esm/components/SearchHighlighter/styles.js

@@ -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/editMode/EntitySelector/EntitySelector.js

@@ -24,7 +24,7 @@ import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
 import { isEmpty, prop } from 'ramda';
-import { getFilteredEntities, getEntityType, MetadataType, ConnectionEntityType, ModeType, isTempUri, getLastUriPart, getLabel } from '@reltio/mdm-sdk';
+import { typeAheadSearch, getEntityType, MetadataType, ConnectionEntityType, ModeType, isTempUri, getLabel } from '@reltio/mdm-sdk';
 import DropDownSelector from '../../../DropDownSelector/DropDownSelector';
 import EntityOption from './components/EntityOption';
 import SingleValue from './components/SingleValue';
@@ -72,13 +72,6 @@ var EntitySelector = function (_a) {
         entityTypesUris,
         metadata
     ]);
-    var filters = [
-        {
-            filter: 'equals',
-            fieldName: 'type',
-            values: entityTypesUris.map(getLastUriPart)
-        }
-    ];
     var options = __assign(__assign({}, globalSearchRequestOptions), { max: max });
     var handleCreate = onCreate
         ? function (value, entityTypeUri) {
@@ -100,7 +93,7 @@ var EntitySelector = function (_a) {
     };
     var groupMode = useMemo(function () { return entityTypes.length !== 1; }, [entityTypes]);
     var getOptions = function (value) {
-        return getFilteredEntities(filters, options, value).then(buildEntityOptions(entityTypes, onCreate));
+        return typeAheadSearch(entityTypes, value, options).then(buildEntityOptions(entityTypes, onCreate));
     };
     var currentEntityType = (isEmpty(entity) ? entityTypes[0] : getEntityType(metadata, entity.entityType)) || {};
     var createLabel = onCreate && i18n.text("Create " + (inputValue ? "\"" + inputValue + "\" as " : '') + "new " + currentEntityType.label);

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

@@ -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

@@ -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

@@ -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

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

package/esm/contexts/SearchValueContext/index.js

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

package/esm/contexts/index.d.ts

@@ -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

@@ -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

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