@reltio/components 1.4.890 → 1.4.891

package/cjs/components/MatchRulesBlock/MatchRulesBlock.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import { Entity, Metadata, PotentialMatch } from '@reltio/mdm-sdk';
 declare type Props = {
+    entitiesMap: {
+        [key: string]: Pick<Entity, 'uri' | 'type' | 'label'>;
+    };
     entity: Entity;
+    match: PotentialMatch;
     metadata: Metadata;
-    transitiveMatches: PotentialMatch[];
 };
-declare const MatchRulesBlock: ({ entity, metadata, transitiveMatches }: Props) => JSX.Element;
+declare const MatchRulesBlock: ({ entitiesMap, entity, match, metadata }: Props) => JSX.Element;
 export default MatchRulesBlock;

package/cjs/components/MatchRulesBlock/MatchRulesBlock.js

@@ -4,21 +4,12 @@ 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 mdm_sdk_1 = require("@reltio/mdm-sdk");
 var SimpleMatchRulesBlock_1 = __importDefault(require("./SimpleMatchRulesBlock/SimpleMatchRulesBlock"));
 var TransitiveMatchBlock_1 = __importDefault(require("./TransitiveMatchBlock/TransitiveMatchBlock"));
 var SimpleMatchRulesBuilder_1 = __importDefault(require("./SimpleMatchRulesBuilder/SimpleMatchRulesBuilder"));
 var MatchRulesBlock = function (_a) {
-    var entity = _a.entity, metadata = _a.metadata, transitiveMatches = _a.transitiveMatches;
-    var transitiveMatchRules = mdm_sdk_1.getTransitiveMatchesForEntity(metadata, transitiveMatches, entity);
-    if (ramda_1.isEmpty(transitiveMatchRules)) {
-        var entityMatchRules = mdm_sdk_1.getEntityMatchRules(entity);
-        var matchRules = mdm_sdk_1.getMatchRules(metadata, entity.type, entityMatchRules);
-        return react_1.default.createElement(SimpleMatchRulesBuilder_1.default, { matchRules: matchRules, Component: SimpleMatchRulesBlock_1.default });
-    }
-    else {
-        return react_1.default.createElement(TransitiveMatchBlock_1.default, { transitiveMatchRules: transitiveMatchRules });
-    }
+    var entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata;
+    return mdm_sdk_1.isTransitiveMatch(match) ? (react_1.default.createElement(TransitiveMatchBlock_1.default, { transitiveMatchRules: mdm_sdk_1.getTransitiveMatchRules(metadata, match, entitiesMap) })) : (react_1.default.createElement(SimpleMatchRulesBuilder_1.default, { matchRules: mdm_sdk_1.getMatchRules(metadata, entity.type, match.matchRules), Component: SimpleMatchRulesBlock_1.default }));
 };
 exports.default = MatchRulesBlock;

package/cjs/components/ProfileCard/ProfileCard.d.ts

@@ -1,21 +1,13 @@
-declare var _default: React.MemoExoticComponent<{
-    ({ entity, classes, ...otherProps }: {
-        [x: string]: any;
-        entity: any;
-        classes?: {};
-    }): JSX.Element;
-    propTypes: {
-        entity: PropTypes.Requireable<PropTypes.InferProps<{
-            uri: PropTypes.Requireable<string>;
-            type: PropTypes.Requireable<string>;
-        }>>;
-        classes: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-            secondaryLabel: PropTypes.Requireable<string>;
-            container: PropTypes.Requireable<string>;
-        }>>;
+import React from 'react';
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entity: Entity;
+    disableEntityTypeColor?: boolean;
+    classes?: {
+        label?: string;
+        secondaryLabel?: string;
+        container?: string;
     };
-}>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.MemoExoticComponent<({ entity, classes, disableEntityTypeColor, ...otherProps }: Props) => JSX.Element>;
 export default _default;
-import PropTypes from "prop-types";
-import React from "react";

package/cjs/components/ProfileCard/ProfileCard.js

@@ -45,7 +45,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_redux_1 = require("react-redux");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -56,7 +55,7 @@ var EntityUriLink_1 = __importDefault(require("../EntityUriLink/EntityUriLink"))
 var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
 var EntityTypeBadge_1 = __importDefault(require("../EntityTypeBadge/EntityTypeBadge"));
 var ProfileCard = function (_a) {
-    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entity", "classes"]);
+    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, disableEntityTypeColor = _a.disableEntityTypeColor, otherProps = __rest(_a, ["entity", "classes", "disableEntityTypeColor"]);
     var styles = styles_1.default();
     var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label, containerClass = classes.container;
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
@@ -65,7 +64,7 @@ var ProfileCard = function (_a) {
     var entityType = mdm_sdk_1.getEntityType(metadata, type) || {};
     var entityTypeColor = mdm_sdk_1.getPropWithInheritance(metadata, entityType, 'typeColor') || mdm_sdk_1.theme.palette.primary.main;
     return (react_1.default.createElement("div", __assign({ className: classnames_1.default(styles.container, containerClass) }, otherProps),
-        react_1.default.createElement("div", { className: styles.colorBox, style: { backgroundColor: entityTypeColor } }),
+        react_1.default.createElement("div", { className: styles.colorBox, style: disableEntityTypeColor ? undefined : { backgroundColor: entityTypeColor } }),
         react_1.default.createElement(EntityAvatar_1.default, { entity: entity, avatarClassName: styles.avatar, imageClassName: styles.image }),
         react_1.default.createElement("div", { className: styles.info },
             react_1.default.createElement("div", { className: styles.firstRow },
@@ -73,17 +72,9 @@ var ProfileCard = function (_a) {
                     react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label, placement: "top", showOnExceededHeight: true },
                         react_1.default.createElement("span", { className: classnames_1.default(styles.label, labelClass) }, label)))),
             react_1.default.createElement("div", { className: styles.secondRow }, secondaryLabel && (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
-                react_1.default.createElement("span", { className: classnames_1.default(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel)))),
+                react_1.default.createElement("span", { className: secondaryLabelClass }, secondaryLabel)))),
             react_1.default.createElement("div", { className: styles.thirdRow },
                 react_1.default.createElement(EntityTypeBadge_1.default, { entity: entity }),
                 react_1.default.createElement("div", null, mdm_sdk_1.getEntityId(entity))))));
 };
-ProfileCard.propTypes = {
-    entity: mdm_sdk_1.EntityType,
-    classes: prop_types_1.default.shape({
-        label: prop_types_1.default.string,
-        secondaryLabel: prop_types_1.default.string,
-        container: prop_types_1.default.string
-    })
-};
 exports.default = react_1.memo(ProfileCard);

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

@@ -1,2 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "link" | "avatar" | "firstRow" | "container" | "colorBox" | "info" | "secondRow" | "thirdRow">;
 export default useStyles;
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "link" | "avatar" | "firstRow" | "container" | "info" | "colorBox" | "secondRow" | "thirdRow">;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Entity, Metadata, PotentialMatch } from '@reltio/mdm-sdk';
+declare type Props = {
+    entitiesMap: {
+        [key: string]: Pick<Entity, 'uri' | 'type' | 'label'>;
+    };
+    entity: Entity;
+    match: PotentialMatch;
+    metadata: Metadata;
+    children?: React.ReactNode;
+};
+export declare const ProfileMatchCard: ({ children, entitiesMap, entity, match, metadata }: Props) => JSX.Element;
+export {};

package/cjs/components/ProfileMatchCard/ProfileMatchCard.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileMatchCard = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("./styles");
+var ProfileCard_1 = __importDefault(require("../ProfileCard/ProfileCard"));
+var MatchRulesBlock_1 = __importDefault(require("../MatchRulesBlock/MatchRulesBlock"));
+var ProfileMatchCard = function (_a) {
+    var children = _a.children, entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement("div", { className: styles.profileCardWrapper },
+            react_1.default.createElement(ProfileCard_1.default, { entity: match.object, classes: { container: styles.profileCardContainer }, disableEntityTypeColor: true }),
+            children),
+        react_1.default.createElement("div", { className: styles.rulesContainer },
+            react_1.default.createElement(MatchRulesBlock_1.default, { match: match, metadata: metadata, entitiesMap: entitiesMap, entity: entity }))));
+};
+exports.ProfileMatchCard = ProfileMatchCard;

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

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

package/cjs/components/ProfileMatchCard/styles.js

@@ -0,0 +1,28 @@
+"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({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        paddingRight: '12px',
+        paddingTop: '8px',
+        paddingBottom: '8px',
+        '& + &': {
+            borderTop: '1px solid rgba(0,0,0, 0.12)'
+        }
+    },
+    profileCardWrapper: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '4px'
+    },
+    profileCardContainer: {
+        flexGrow: 1
+    },
+    rulesContainer: {
+        paddingLeft: '40px'
+    }
+});

package/cjs/components/index.d.ts

@@ -121,3 +121,4 @@ export * from './history';
 export { default as OvIcon } from './attributes/OvIcon';
 export { default as RelationEditor } from './RelationEditor';
 export * from './workflow';
+export { ProfileMatchCard } from './ProfileMatchCard/ProfileMatchCard';

package/cjs/components/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ScoreLabel = exports.Score = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = void 0;
-exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
+exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -258,3 +258,5 @@ Object.defineProperty(exports, "OvIcon", { enumerable: true, get: function () {
 var RelationEditor_1 = require("./RelationEditor");
 Object.defineProperty(exports, "RelationEditor", { enumerable: true, get: function () { return __importDefault(RelationEditor_1).default; } });
 __exportStar(require("./workflow"), exports);
+var ProfileMatchCard_1 = require("./ProfileMatchCard/ProfileMatchCard");
+Object.defineProperty(exports, "ProfileMatchCard", { enumerable: true, get: function () { return ProfileMatchCard_1.ProfileMatchCard; } });

package/cjs/hooks/helpers/pagingSimulator.d.ts

@@ -0,0 +1,12 @@
+declare type RequestProps = {
+    max: number;
+    offset: number;
+    force?: boolean;
+    [key: string]: unknown;
+};
+export declare const createPagingSimulator: (request: any) => ({ max, offset, force, ...requestParams }: RequestProps) => Promise<{
+    response: any[];
+    total: number;
+    originalResponse: any[];
+}>;
+export {};

package/cjs/hooks/helpers/pagingSimulator.js

@@ -0,0 +1,86 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPagingSimulator = void 0;
+var ramda_1 = require("ramda");
+var createPagingSimulator = function (request) {
+    var previousValues = {};
+    var requestResponse = [];
+    return function (_a) { return __awaiter(void 0, void 0, void 0, function () {
+        var shouldSendRequest, previousValuesKeys, _i, previousValuesKeys_1, key;
+        var max = _a.max, offset = _a.offset, force = _a.force, requestParams = __rest(_a, ["max", "offset", "force"]);
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    shouldSendRequest = force;
+                    previousValuesKeys = Object.keys(previousValues);
+                    shouldSendRequest = shouldSendRequest || !ramda_1.equals(Object.keys(requestParams), previousValuesKeys);
+                    if (!shouldSendRequest) {
+                        for (_i = 0, previousValuesKeys_1 = previousValuesKeys; _i < previousValuesKeys_1.length; _i++) {
+                            key = previousValuesKeys_1[_i];
+                            shouldSendRequest = shouldSendRequest || !ramda_1.equals(previousValues[key], requestParams[key]);
+                        }
+                    }
+                    if (!shouldSendRequest) return [3 /*break*/, 2];
+                    return [4 /*yield*/, request(requestParams)];
+                case 1:
+                    // eslint-disable-next-line no-unused-vars
+                    requestResponse = _b.sent();
+                    previousValues = requestParams;
+                    _b.label = 2;
+                case 2: return [2 /*return*/, {
+                        response: requestResponse.slice(offset, offset + max),
+                        total: requestResponse.length,
+                        originalResponse: requestResponse
+                    }];
+            }
+        });
+    }); };
+};
+exports.createPagingSimulator = createPagingSimulator;

package/cjs/hooks/index.d.ts

@@ -11,3 +11,5 @@ export { useSavedState } from './useSavedState';
 export { useUsers } from './useUsers';
 export { useWhyDidYouUpdate } from './useWhyDidYouUpdate';
 export { useConfigPermissions } from './useConfigPermissions';
+export { useMatchesLoader } from './useMatchesLoader';
+export { usePagingSimulator } from './usePagingSimulator';

package/cjs/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCollaboration = exports.useAsyncMount = exports.useActions = void 0;
+exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCollaboration = exports.useAsyncMount = exports.useActions = void 0;
 var useActions_1 = require("./useActions");
 Object.defineProperty(exports, "useActions", { enumerable: true, get: function () { return useActions_1.useActions; } });
 var useAsyncMount_1 = require("./useAsyncMount");
@@ -27,3 +27,7 @@ var useWhyDidYouUpdate_1 = require("./useWhyDidYouUpdate");
 Object.defineProperty(exports, "useWhyDidYouUpdate", { enumerable: true, get: function () { return useWhyDidYouUpdate_1.useWhyDidYouUpdate; } });
 var useConfigPermissions_1 = require("./useConfigPermissions");
 Object.defineProperty(exports, "useConfigPermissions", { enumerable: true, get: function () { return useConfigPermissions_1.useConfigPermissions; } });
+var useMatchesLoader_1 = require("./useMatchesLoader");
+Object.defineProperty(exports, "useMatchesLoader", { enumerable: true, get: function () { return useMatchesLoader_1.useMatchesLoader; } });
+var usePagingSimulator_1 = require("./usePagingSimulator");
+Object.defineProperty(exports, "usePagingSimulator", { enumerable: true, get: function () { return usePagingSimulator_1.usePagingSimulator; } });

package/cjs/hooks/useMatchesLoader.d.ts

@@ -0,0 +1,27 @@
+import { Entity, PotentialMatch } from '@reltio/mdm-sdk';
+declare type Props = {
+    enabled: boolean;
+    entity: Entity;
+    filter: string;
+    onFinishLoading?: () => void;
+    onStartLoading?: () => void;
+    options: {
+        showTransitiveMatches?: boolean;
+        showInactiveEntities?: boolean;
+    };
+    page: number;
+    rowsPerPage: number;
+    sorting?: {
+        order: string;
+        field: string;
+    };
+};
+export declare const useMatchesLoader: ({ enabled, entity, filter, onFinishLoading, onStartLoading, options, page, rowsPerPage, sorting }: Props) => {
+    total: number;
+    matches: PotentialMatch[];
+    entitiesMap: {
+        [key: string]: Pick<Entity, "uri" | "type" | "label">;
+    };
+    loadMatches: () => void;
+};
+export {};

package/cjs/hooks/useMatchesLoader.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchesLoader = void 0;
+var react_1 = require("react");
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+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 _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];
+    var _e = react_1.useState({}), entitiesMap = _e[0], setEntitiesMap = _e[1];
+    var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
+    var dtssPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getDtssPath);
+    var dataTenants = react_redux_1.useSelector(mdm_module_1.default.selectors.getDataTenants);
+    var dtssParams = react_1.useMemo(function () { return ({
+        dtssPath: dtssPath,
+        dataTenants: dataTenants,
+        entity: entity,
+        customerTenant: tenant,
+        dtssRequest: mdm_sdk_1.getMatchesFromDataTenants
+    }); }, [dtssPath, dataTenants, entity, tenant]);
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    var getTransitiveMatchesWithDtss = react_1.useCallback(mdm_sdk_1.withDtssPotentialItems(dtssParams, mdm_sdk_1.getTransitiveMatches), [
+        dtssParams
+    ]);
+    var getTransitiveMatchesWithPaging = usePagingSimulator_1.usePagingSimulator(getTransitiveMatchesWithDtss);
+    var getPagedMatchesForDataTenantEntity = usePagingSimulator_1.usePagingSimulator(mdm_sdk_1.getMatchesForDataTenantEntity);
+    var entityUri = ramda_1.prop('uri', entity);
+    var safePromise = useSafePromise_1.useSafePromise();
+    var getMatches = react_1.useCallback(function (force) {
+        if (force === void 0) { force = false; }
+        if (!enabled) {
+            return;
+        }
+        onStartLoading === null || onStartLoading === void 0 ? void 0 : onStartLoading();
+        safePromise(mdm_sdk_1.isDataTenantEntity(entity)
+            ? getPagedMatchesForDataTenantEntity({
+                dtssPath: dtssPath,
+                entity: entity,
+                customerTenant: tenant,
+                offset: page * rowsPerPage,
+                max: rowsPerPage,
+                force: force
+            })
+            : getTransitiveMatchesWithPaging({
+                entityUri: entityUri,
+                offset: page * rowsPerPage,
+                max: rowsPerPage,
+                filter: filter,
+                sort: field,
+                order: order,
+                force: force,
+                deep: options.showTransitiveMatches ? undefined : 1,
+                activeness: options.showInactiveEntities ? mdm_sdk_1.ActivityFilters.ALL : mdm_sdk_1.ActivityFilters.ACTIVE_ONLY
+            }))
+            .then(function (result) {
+            var response = result.response, total = result.total, originalResponse = result.originalResponse;
+            setTotal(total);
+            setMatches(response);
+            var matchUris = mdm_sdk_1.collectAllTransitiveEntitiesUris(originalResponse);
+            if (matchUris.length > 0) {
+                setEntitiesMap(mdm_sdk_1.getEntitiesMap(originalResponse));
+            }
+        })
+            .finally(function () {
+            onFinishLoading === null || onFinishLoading === void 0 ? void 0 : onFinishLoading();
+        });
+    }, [
+        dtssPath,
+        enabled,
+        entityUri,
+        field,
+        filter,
+        getPagedMatchesForDataTenantEntity,
+        getTransitiveMatchesWithPaging,
+        onFinishLoading,
+        onStartLoading,
+        options,
+        order,
+        page,
+        rowsPerPage,
+        safePromise,
+        tenant
+    ]); // eslint-disable-line
+    react_1.useEffect(function () {
+        getMatches();
+    }, [getMatches]);
+    var loadMatches = react_1.useCallback(function () {
+        getMatches(true);
+    }, [getMatches]);
+    return {
+        total: total,
+        matches: matches,
+        entitiesMap: entitiesMap,
+        loadMatches: loadMatches
+    };
+};
+exports.useMatchesLoader = useMatchesLoader;

package/cjs/hooks/usePagingSimulator.d.ts

@@ -0,0 +1,10 @@
+export declare const usePagingSimulator: (request: any) => ({ max, offset, force, ...requestParams }: {
+    [key: string]: unknown;
+    max: number;
+    offset: number;
+    force?: boolean;
+}) => Promise<{
+    response: any[];
+    total: number;
+    originalResponse: any[];
+}>;

package/cjs/hooks/usePagingSimulator.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePagingSimulator = void 0;
+var react_1 = require("react");
+var pagingSimulator_1 = require("./helpers/pagingSimulator");
+var usePagingSimulator = function (request) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return react_1.useCallback(pagingSimulator_1.createPagingSimulator(request), [request]);
+};
+exports.usePagingSimulator = usePagingSimulator;

package/esm/components/MatchRulesBlock/MatchRulesBlock.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import { Entity, Metadata, PotentialMatch } from '@reltio/mdm-sdk';
 declare type Props = {
+    entitiesMap: {
+        [key: string]: Pick<Entity, 'uri' | 'type' | 'label'>;
+    };
     entity: Entity;
+    match: PotentialMatch;
     metadata: Metadata;
-    transitiveMatches: PotentialMatch[];
 };
-declare const MatchRulesBlock: ({ entity, metadata, transitiveMatches }: Props) => JSX.Element;
+declare const MatchRulesBlock: ({ entitiesMap, entity, match, metadata }: Props) => JSX.Element;
 export default MatchRulesBlock;

package/esm/components/MatchRulesBlock/MatchRulesBlock.js

@@ -1,19 +1,10 @@
 import React from 'react';
-import { isEmpty } from 'ramda';
-import { getEntityMatchRules, getMatchRules, getTransitiveMatchesForEntity } from '@reltio/mdm-sdk';
+import { getMatchRules, getTransitiveMatchRules, isTransitiveMatch } from '@reltio/mdm-sdk';
 import SimpleMatchRulesBlock from './SimpleMatchRulesBlock/SimpleMatchRulesBlock';
 import TransitiveMatchBlock from './TransitiveMatchBlock/TransitiveMatchBlock';
 import SimpleMatchRulesBuilder from './SimpleMatchRulesBuilder/SimpleMatchRulesBuilder';
 var MatchRulesBlock = function (_a) {
-    var entity = _a.entity, metadata = _a.metadata, transitiveMatches = _a.transitiveMatches;
-    var transitiveMatchRules = getTransitiveMatchesForEntity(metadata, transitiveMatches, entity);
-    if (isEmpty(transitiveMatchRules)) {
-        var entityMatchRules = getEntityMatchRules(entity);
-        var matchRules = getMatchRules(metadata, entity.type, entityMatchRules);
-        return React.createElement(SimpleMatchRulesBuilder, { matchRules: matchRules, Component: SimpleMatchRulesBlock });
-    }
-    else {
-        return React.createElement(TransitiveMatchBlock, { transitiveMatchRules: transitiveMatchRules });
-    }
+    var entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata;
+    return isTransitiveMatch(match) ? (React.createElement(TransitiveMatchBlock, { transitiveMatchRules: getTransitiveMatchRules(metadata, match, entitiesMap) })) : (React.createElement(SimpleMatchRulesBuilder, { matchRules: getMatchRules(metadata, entity.type, match.matchRules), Component: SimpleMatchRulesBlock }));
 };
 export default MatchRulesBlock;

package/esm/components/ProfileCard/ProfileCard.d.ts

@@ -1,21 +1,13 @@
-declare var _default: React.MemoExoticComponent<{
-    ({ entity, classes, ...otherProps }: {
-        [x: string]: any;
-        entity: any;
-        classes?: {};
-    }): JSX.Element;
-    propTypes: {
-        entity: PropTypes.Requireable<PropTypes.InferProps<{
-            uri: PropTypes.Requireable<string>;
-            type: PropTypes.Requireable<string>;
-        }>>;
-        classes: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-            secondaryLabel: PropTypes.Requireable<string>;
-            container: PropTypes.Requireable<string>;
-        }>>;
+import React from 'react';
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entity: Entity;
+    disableEntityTypeColor?: boolean;
+    classes?: {
+        label?: string;
+        secondaryLabel?: string;
+        container?: string;
     };
-}>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.MemoExoticComponent<({ entity, classes, disableEntityTypeColor, ...otherProps }: Props) => JSX.Element>;
 export default _default;
-import PropTypes from "prop-types";
-import React from "react";

package/esm/components/ProfileCard/ProfileCard.js

@@ -21,10 +21,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useSelector } from 'react-redux';
-import { EntityType, getEntityId, getEntityType, getEntityUriForLink, getLabel, getPropWithInheritance, theme } from '@reltio/mdm-sdk';
+import { getEntityId, getEntityType, getEntityUriForLink, getLabel, getPropWithInheritance, theme } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';
 import useStyles from './styles';
 import EntityAvatar from '../EntityAvatar/EntityAvatar';
@@ -32,7 +31,7 @@ import EntityUriLink from '../EntityUriLink/EntityUriLink';
 import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
 import EntityTypeBadge from '../EntityTypeBadge/EntityTypeBadge';
 var ProfileCard = function (_a) {
-    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entity", "classes"]);
+    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, disableEntityTypeColor = _a.disableEntityTypeColor, otherProps = __rest(_a, ["entity", "classes", "disableEntityTypeColor"]);
     var styles = useStyles();
     var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label, containerClass = classes.container;
     var metadata = useSelector(mdmModule.selectors.getMetadata);
@@ -41,7 +40,7 @@ var ProfileCard = function (_a) {
     var entityType = getEntityType(metadata, type) || {};
     var entityTypeColor = getPropWithInheritance(metadata, entityType, 'typeColor') || theme.palette.primary.main;
     return (React.createElement("div", __assign({ className: classnames(styles.container, containerClass) }, otherProps),
-        React.createElement("div", { className: styles.colorBox, style: { backgroundColor: entityTypeColor } }),
+        React.createElement("div", { className: styles.colorBox, style: disableEntityTypeColor ? undefined : { backgroundColor: entityTypeColor } }),
         React.createElement(EntityAvatar, { entity: entity, avatarClassName: styles.avatar, imageClassName: styles.image }),
         React.createElement("div", { className: styles.info },
             React.createElement("div", { className: styles.firstRow },
@@ -49,17 +48,9 @@ var ProfileCard = function (_a) {
                     React.createElement(ExpandedValueTooltip, { value: label, placement: "top", showOnExceededHeight: true },
                         React.createElement("span", { className: classnames(styles.label, labelClass) }, label)))),
             React.createElement("div", { className: styles.secondRow }, secondaryLabel && (React.createElement(ExpandedValueTooltip, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
-                React.createElement("span", { className: classnames(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel)))),
+                React.createElement("span", { className: secondaryLabelClass }, secondaryLabel)))),
             React.createElement("div", { className: styles.thirdRow },
                 React.createElement(EntityTypeBadge, { entity: entity }),
                 React.createElement("div", null, getEntityId(entity))))));
 };
-ProfileCard.propTypes = {
-    entity: EntityType,
-    classes: PropTypes.shape({
-        label: PropTypes.string,
-        secondaryLabel: PropTypes.string,
-        container: PropTypes.string
-    })
-};
 export default memo(ProfileCard);

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

@@ -1,2 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "link" | "avatar" | "firstRow" | "container" | "colorBox" | "info" | "secondRow" | "thirdRow">;
 export default useStyles;
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "image" | "link" | "avatar" | "firstRow" | "container" | "info" | "colorBox" | "secondRow" | "thirdRow">;

package/esm/components/ProfileMatchCard/ProfileMatchCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Entity, Metadata, PotentialMatch } from '@reltio/mdm-sdk';
+declare type Props = {
+    entitiesMap: {
+        [key: string]: Pick<Entity, 'uri' | 'type' | 'label'>;
+    };
+    entity: Entity;
+    match: PotentialMatch;
+    metadata: Metadata;
+    children?: React.ReactNode;
+};
+export declare const ProfileMatchCard: ({ children, entitiesMap, entity, match, metadata }: Props) => JSX.Element;
+export {};

package/esm/components/ProfileMatchCard/ProfileMatchCard.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useStyles } from './styles';
+import ProfileCard from '../ProfileCard/ProfileCard';
+import MatchRulesBlock from '../MatchRulesBlock/MatchRulesBlock';
+export var ProfileMatchCard = function (_a) {
+    var children = _a.children, entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata;
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.root },
+        React.createElement("div", { className: styles.profileCardWrapper },
+            React.createElement(ProfileCard, { entity: match.object, classes: { container: styles.profileCardContainer }, disableEntityTypeColor: true }),
+            children),
+        React.createElement("div", { className: styles.rulesContainer },
+            React.createElement(MatchRulesBlock, { match: match, metadata: metadata, entitiesMap: entitiesMap, entity: entity }))));
+};

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

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

package/esm/components/ProfileMatchCard/styles.js

@@ -0,0 +1,25 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        paddingRight: '12px',
+        paddingTop: '8px',
+        paddingBottom: '8px',
+        '& + &': {
+            borderTop: '1px solid rgba(0,0,0, 0.12)'
+        }
+    },
+    profileCardWrapper: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '4px'
+    },
+    profileCardContainer: {
+        flexGrow: 1
+    },
+    rulesContainer: {
+        paddingLeft: '40px'
+    }
+});

package/esm/components/index.d.ts

@@ -121,3 +121,4 @@ export * from './history';
 export { default as OvIcon } from './attributes/OvIcon';
 export { default as RelationEditor } from './RelationEditor';
 export * from './workflow';
+export { ProfileMatchCard } from './ProfileMatchCard/ProfileMatchCard';

package/esm/components/index.js

@@ -120,3 +120,4 @@ export * from './history';
 export { default as OvIcon } from './attributes/OvIcon';
 export { default as RelationEditor } from './RelationEditor';
 export * from './workflow';
+export { ProfileMatchCard } from './ProfileMatchCard/ProfileMatchCard';

package/esm/hooks/helpers/pagingSimulator.d.ts

@@ -0,0 +1,12 @@
+declare type RequestProps = {
+    max: number;
+    offset: number;
+    force?: boolean;
+    [key: string]: unknown;
+};
+export declare const createPagingSimulator: (request: any) => ({ max, offset, force, ...requestParams }: RequestProps) => Promise<{
+    response: any[];
+    total: number;
+    originalResponse: any[];
+}>;
+export {};

package/esm/hooks/helpers/pagingSimulator.js

@@ -0,0 +1,82 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 { equals } from 'ramda';
+export var createPagingSimulator = function (request) {
+    var previousValues = {};
+    var requestResponse = [];
+    return function (_a) { return __awaiter(void 0, void 0, void 0, function () {
+        var shouldSendRequest, previousValuesKeys, _i, previousValuesKeys_1, key;
+        var max = _a.max, offset = _a.offset, force = _a.force, requestParams = __rest(_a, ["max", "offset", "force"]);
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    shouldSendRequest = force;
+                    previousValuesKeys = Object.keys(previousValues);
+                    shouldSendRequest = shouldSendRequest || !equals(Object.keys(requestParams), previousValuesKeys);
+                    if (!shouldSendRequest) {
+                        for (_i = 0, previousValuesKeys_1 = previousValuesKeys; _i < previousValuesKeys_1.length; _i++) {
+                            key = previousValuesKeys_1[_i];
+                            shouldSendRequest = shouldSendRequest || !equals(previousValues[key], requestParams[key]);
+                        }
+                    }
+                    if (!shouldSendRequest) return [3 /*break*/, 2];
+                    return [4 /*yield*/, request(requestParams)];
+                case 1:
+                    // eslint-disable-next-line no-unused-vars
+                    requestResponse = _b.sent();
+                    previousValues = requestParams;
+                    _b.label = 2;
+                case 2: return [2 /*return*/, {
+                        response: requestResponse.slice(offset, offset + max),
+                        total: requestResponse.length,
+                        originalResponse: requestResponse
+                    }];
+            }
+        });
+    }); };
+};

package/esm/hooks/index.d.ts

@@ -11,3 +11,5 @@ export { useSavedState } from './useSavedState';
 export { useUsers } from './useUsers';
 export { useWhyDidYouUpdate } from './useWhyDidYouUpdate';
 export { useConfigPermissions } from './useConfigPermissions';
+export { useMatchesLoader } from './useMatchesLoader';
+export { usePagingSimulator } from './usePagingSimulator';

package/esm/hooks/index.js

@@ -11,3 +11,5 @@ export { useSavedState } from './useSavedState';
 export { useUsers } from './useUsers';
 export { useWhyDidYouUpdate } from './useWhyDidYouUpdate';
 export { useConfigPermissions } from './useConfigPermissions';
+export { useMatchesLoader } from './useMatchesLoader';
+export { usePagingSimulator } from './usePagingSimulator';

package/esm/hooks/useMatchesLoader.d.ts

@@ -0,0 +1,27 @@
+import { Entity, PotentialMatch } from '@reltio/mdm-sdk';
+declare type Props = {
+    enabled: boolean;
+    entity: Entity;
+    filter: string;
+    onFinishLoading?: () => void;
+    onStartLoading?: () => void;
+    options: {
+        showTransitiveMatches?: boolean;
+        showInactiveEntities?: boolean;
+    };
+    page: number;
+    rowsPerPage: number;
+    sorting?: {
+        order: string;
+        field: string;
+    };
+};
+export declare const useMatchesLoader: ({ enabled, entity, filter, onFinishLoading, onStartLoading, options, page, rowsPerPage, sorting }: Props) => {
+    total: number;
+    matches: PotentialMatch[];
+    entitiesMap: {
+        [key: string]: Pick<Entity, "uri" | "type" | "label">;
+    };
+    loadMatches: () => void;
+};
+export {};

package/esm/hooks/useMatchesLoader.js

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import { ActivityFilters, collectAllTransitiveEntitiesUris, getEntitiesMap, getMatchesForDataTenantEntity, getMatchesFromDataTenants, getTransitiveMatches, isDataTenantEntity, withDtssPotentialItems } from '@reltio/mdm-sdk';
+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 _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];
+    var _e = useState({}), entitiesMap = _e[0], setEntitiesMap = _e[1];
+    var tenant = useSelector(mdmModule.selectors.getTenant);
+    var dtssPath = useSelector(mdmModule.selectors.getDtssPath);
+    var dataTenants = useSelector(mdmModule.selectors.getDataTenants);
+    var dtssParams = useMemo(function () { return ({
+        dtssPath: dtssPath,
+        dataTenants: dataTenants,
+        entity: entity,
+        customerTenant: tenant,
+        dtssRequest: getMatchesFromDataTenants
+    }); }, [dtssPath, dataTenants, entity, tenant]);
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    var getTransitiveMatchesWithDtss = useCallback(withDtssPotentialItems(dtssParams, getTransitiveMatches), [
+        dtssParams
+    ]);
+    var getTransitiveMatchesWithPaging = usePagingSimulator(getTransitiveMatchesWithDtss);
+    var getPagedMatchesForDataTenantEntity = usePagingSimulator(getMatchesForDataTenantEntity);
+    var entityUri = prop('uri', entity);
+    var safePromise = useSafePromise();
+    var getMatches = useCallback(function (force) {
+        if (force === void 0) { force = false; }
+        if (!enabled) {
+            return;
+        }
+        onStartLoading === null || onStartLoading === void 0 ? void 0 : onStartLoading();
+        safePromise(isDataTenantEntity(entity)
+            ? getPagedMatchesForDataTenantEntity({
+                dtssPath: dtssPath,
+                entity: entity,
+                customerTenant: tenant,
+                offset: page * rowsPerPage,
+                max: rowsPerPage,
+                force: force
+            })
+            : getTransitiveMatchesWithPaging({
+                entityUri: entityUri,
+                offset: page * rowsPerPage,
+                max: rowsPerPage,
+                filter: filter,
+                sort: field,
+                order: order,
+                force: force,
+                deep: options.showTransitiveMatches ? undefined : 1,
+                activeness: options.showInactiveEntities ? ActivityFilters.ALL : ActivityFilters.ACTIVE_ONLY
+            }))
+            .then(function (result) {
+            var response = result.response, total = result.total, originalResponse = result.originalResponse;
+            setTotal(total);
+            setMatches(response);
+            var matchUris = collectAllTransitiveEntitiesUris(originalResponse);
+            if (matchUris.length > 0) {
+                setEntitiesMap(getEntitiesMap(originalResponse));
+            }
+        })
+            .finally(function () {
+            onFinishLoading === null || onFinishLoading === void 0 ? void 0 : onFinishLoading();
+        });
+    }, [
+        dtssPath,
+        enabled,
+        entityUri,
+        field,
+        filter,
+        getPagedMatchesForDataTenantEntity,
+        getTransitiveMatchesWithPaging,
+        onFinishLoading,
+        onStartLoading,
+        options,
+        order,
+        page,
+        rowsPerPage,
+        safePromise,
+        tenant
+    ]); // eslint-disable-line
+    useEffect(function () {
+        getMatches();
+    }, [getMatches]);
+    var loadMatches = useCallback(function () {
+        getMatches(true);
+    }, [getMatches]);
+    return {
+        total: total,
+        matches: matches,
+        entitiesMap: entitiesMap,
+        loadMatches: loadMatches
+    };
+};

package/esm/hooks/usePagingSimulator.d.ts

@@ -0,0 +1,10 @@
+export declare const usePagingSimulator: (request: any) => ({ max, offset, force, ...requestParams }: {
+    [key: string]: unknown;
+    max: number;
+    offset: number;
+    force?: boolean;
+}) => Promise<{
+    response: any[];
+    total: number;
+    originalResponse: any[];
+}>;

package/esm/hooks/usePagingSimulator.js

@@ -0,0 +1,6 @@
+import { useCallback } from 'react';
+import { createPagingSimulator } from './helpers/pagingSimulator';
+export var usePagingSimulator = function (request) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback(createPagingSimulator(request), [request]);
+};

package/package.json

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