@reltio/components 1.4.887 → 1.4.892

package/esm/components/editors/DateEditor/DateEditor.js

@@ -20,28 +20,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import PropTypes from 'prop-types';
+import { KeyboardDatePicker } from '@material-ui/pickers';
+import { debounce, utils } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import moment from 'moment';
+import { invoker, isNil, pipe, when } from 'ramda';
 import React, { useState } from 'react';
 import i18n from 'ui-i18n';
-import moment from 'moment';
-import classnames from 'classnames';
-import { pipe, when, isNil, invoker } from 'ramda';
-import { utils, debounce } from '@reltio/mdm-sdk';
-import { KeyboardDatePicker } from '@material-ui/pickers';
-import { InputVariant } from '../../../constants/prop-types';
 import CalendarIcon from '../../../icons/Calendar';
+import { noop } from '../../../core';
 import { useStyles } from './styles';
 var format = moment.localeData().longDateFormat('L');
 var DateEditor = function (_a) {
     var _b, _c;
     var _d;
-    var _e = _a.value, value = _e === void 0 ? null : _e, label = _a.label, _f = _a.variant, variant = _f === void 0 ? 'filled' : _f, onChange = _a.onChange, _g = _a.InputProps, InputProps = _g === void 0 ? {} : _g, _h = _a.InputLabelProps, InputLabelProps = _h === void 0 ? {} : _h, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps", "InputLabelProps"]);
+    var _e = _a.value, value = _e === void 0 ? null : _e, label = _a.label, _f = _a.variant, variant = _f === void 0 ? 'filled' : _f, onChange = _a.onChange, _g = _a.InputProps, InputProps = _g === void 0 ? {} : _g, _h = _a.InputLabelProps, InputLabelProps = _h === void 0 ? {} : _h, _j = _a.onBlur, onBlur = _j === void 0 ? noop : _j, _k = _a.onFocus, onFocus = _k === void 0 ? noop : _k, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps", "InputLabelProps", "onBlur", "onFocus"]);
     var styles = useStyles();
-    var _j = useState(false), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
-    return (React.createElement(KeyboardDatePicker, __assign({ format: format, variant: "inline", invalidDateMessage: i18n.text('Invalid Date Format'), maxDateMessage: i18n.text('Date should not be after maximal date'), minDateMessage: i18n.text('Date should not be before minimal date'), inputVariant: variant, autoOk: true, InputAdornmentProps: { position: 'end', classes: { positionEnd: styles.adornmentPositionEnd } }, KeyboardButtonProps: {
+    var _l = useState(false), isCalendarOpen = _l[0], setIsCalendarOpen = _l[1];
+    return (React.createElement(KeyboardDatePicker, __assign({ format: format, variant: "inline", invalidDateMessage: i18n.text('Invalid Date Format'), maxDateMessage: i18n.text('Date should not be after maximal date'), minDateMessage: i18n.text('Date should not be before minimal date'), inputVariant: variant, autoOk: true, onBlur: onBlur, onFocus: onFocus, InputAdornmentProps: { position: 'end', classes: { positionEnd: styles.adornmentPositionEnd } }, KeyboardButtonProps: {
             classes: { root: styles.iconButtonRoot },
             onKeyPress: invoker(0, 'stopPropagation')
-        }, keyboardIcon: React.createElement(CalendarIcon, { className: styles.icon }), onChange: debounce(when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, utils.dates.clearDateTime, onChange)), 0), label: label, "aria-label": label, value: value, placeholder: i18n.text(format), disableToolbar: true, onClose: function () { return setIsCalendarOpen(false); }, onOpen: function () { return setIsCalendarOpen(true); }, InputProps: __assign({ classes: {
+        }, keyboardIcon: React.createElement(CalendarIcon, { className: styles.icon }), onChange: debounce(when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, utils.dates.clearDateTime, onChange)), 0), label: label, "aria-label": label, value: value, placeholder: i18n.text(format), onClose: function () { return setIsCalendarOpen(false); }, onOpen: function () { return setIsCalendarOpen(true); }, InputProps: __assign({ classes: {
                 root: styles.inputRoot,
                 underline: classnames((_b = {}, _b[styles.underline] = isCalendarOpen, _b)),
                 adornedEnd: styles.adornedEnd
@@ -56,12 +55,4 @@ var DateEditor = function (_a) {
             }
         }, InputLabelProps: __assign({ classes: __assign({ root: classnames((_c = {}, _c[styles.inputLabel] = isCalendarOpen, _c), (_d = InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.classes) === null || _d === void 0 ? void 0 : _d.root) }, InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.classes), shrink: !isNil(label) }, InputLabelProps) }, otherProps)));
 };
-DateEditor.propTypes = {
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
-    label: PropTypes.string,
-    variant: InputVariant,
-    InputProps: PropTypes.object,
-    InputLabelProps: PropTypes.object,
-    onChange: PropTypes.func.isRequired
-};
 export default DateEditor;

package/esm/components/editors/DateEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "icon" | "adornedEnd" | "inputRoot" | "inputLabel" | "iconButtonRoot" | "adornmentPositionEnd">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "icon" | "adornedEnd" | "iconButtonRoot" | "inputLabel" | "inputRoot" | "adornmentPositionEnd">;

package/esm/components/editors/DateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "dropdownIndicator" | "adornedEnd" | "inputRoot" | "paper" | "menuItem" | "menuText" | "inputLabel">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "dropdownIndicator" | "adornedEnd" | "inputLabel" | "inputRoot" | "paper" | "menuItem" | "menuText">;

package/esm/components/editors/TimestampEditor/TimestampEditor.d.ts

@@ -1,22 +1,19 @@
+/// <reference types="react" />
+import { InputLabelProps } from '@material-ui/core/InputLabel';
+import { TextFieldProps } from '@material-ui/core/TextField';
+import { Moment } from 'moment';
+import { KeyboardDateTimePickerProps } from '@material-ui/pickers/DateTimePicker';
+declare type TimestampEditorProps = {
+    value: number | Date;
+    label?: string;
+    variant: TextFieldProps['variant'];
+    InputProps: TextFieldProps['InputProps'];
+    format?: string;
+    InputLabelProps?: Partial<InputLabelProps>;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onChange: (value: number | Date) => void;
+    onAccept: (value: number | Date | Moment) => void;
+} & Omit<KeyboardDateTimePickerProps, 'value' | 'label' | 'variant' | 'size' | 'hiddenLabel' | 'onBlur' | 'onFocus' | 'onChange' | 'onAccept'>;
+declare const TimestampEditor: ({ value, label, variant, onChange, InputProps, format, ...otherProps }: TimestampEditorProps) => JSX.Element;
 export default TimestampEditor;
-declare function TimestampEditor({ value, label, variant, onChange, InputProps, format, ...otherProps }: {
-    [x: string]: any;
-    value?: any;
-    label: any;
-    variant?: string;
-    onChange: any;
-    InputProps: any;
-    format: any;
-}): JSX.Element;
-declare namespace TimestampEditor {
-    namespace propTypes {
-        export const value: PropTypes.Requireable<number | Date>;
-        export const format: PropTypes.Requireable<string>;
-        export const label: PropTypes.Requireable<string>;
-        export { InputVariant as variant };
-        export const InputProps: PropTypes.Requireable<object>;
-        export const onChange: PropTypes.Validator<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";
-import { InputVariant } from "../../../constants/prop-types";

package/esm/components/editors/TimestampEditor/TimestampEditor.js

@@ -20,17 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import i18n from 'ui-i18n';
-import moment from 'moment';
-import classnames from 'classnames';
-import { pipe, when, isNil, invoker } from 'ramda';
-import { makeMaskFromFormat, maskedDateFormatter } from '@material-ui/pickers/_helpers/text-field-helper';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
 import DateRangeIcon from '@material-ui/icons/DateRange';
+import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { makeMaskFromFormat, maskedDateFormatter } from '@material-ui/pickers/_helpers/text-field-helper';
 import { utils } from '@reltio/mdm-sdk';
-import { InputVariant } from '../../../constants/prop-types';
+import classnames from 'classnames';
+import moment from 'moment';
+import { invoker, isNil, pipe, when } from 'ramda';
+import React, { useState } from 'react';
+import i18n from 'ui-i18n';
 import { useStyles } from './styles';
 var dateFormat = moment.localeData().longDateFormat('L');
 var timeFormat = moment.localeData().longDateFormat('LTS');
@@ -42,10 +40,10 @@ var TimestampEditor = function (_a) {
     var _e = useState(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
     var timestampFormat = format || dateFormat + " " + timeFormat;
     var isAmPmFormat = timestampFormat && timestampFormat.toLowerCase().includes('a');
-    return (React.createElement(KeyboardDateTimePicker, __assign({ format: timestampFormat, rifmFormatter: isAmPmFormat ? makeAmPmFormatter(timestampFormat) : undefined, variant: "inline", invalidDateMessage: i18n.text('Invalid Date Format'), maxDateMessage: i18n.text('Date should not be after maximal date'), minDateMessage: i18n.text('Date should not be before minimal date'), inputVariant: variant, views: ['year', 'date', 'hours', 'minutes', 'seconds'], autoOk: true, InputAdornmentProps: { position: 'end' }, KeyboardButtonProps: {
+    return (React.createElement(KeyboardDateTimePicker, __assign({ format: timestampFormat, rifmFormatter: isAmPmFormat ? makeAmPmFormatter(timestampFormat) : undefined, variant: "inline", invalidDateMessage: i18n.text('Invalid Date Format'), maxDateMessage: i18n.text('Date should not be after maximal date'), minDateMessage: i18n.text('Date should not be before minimal date'), inputVariant: variant, views: ['year', 'date', 'hours', 'minutes'], autoOk: true, InputAdornmentProps: { position: 'end' }, KeyboardButtonProps: {
             classes: { root: styles.iconButtonRoot },
             onKeyPress: invoker(0, 'stopPropagation')
-        }, keyboardIcon: React.createElement(DateRangeIcon, null), onChange: when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, onChange)), label: label, "aria-label": label, value: value, placeholder: i18n.text((dateFormat + " HH:MM").toUpperCase()), ampm: false, disableToolbar: true, onClose: function () { return setIsCalendarOpen(false); }, onOpen: function () { return setIsCalendarOpen(true); }, InputProps: __assign({ classes: {
+        }, keyboardIcon: React.createElement(DateRangeIcon, null), onChange: when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, onChange)), label: label, "aria-label": label, value: value, placeholder: i18n.text((dateFormat + " HH:MM").toUpperCase()), ampm: false, onClose: function () { return setIsCalendarOpen(false); }, onOpen: function () { return setIsCalendarOpen(true); }, InputProps: __assign({ classes: {
                 root: styles.inputRoot,
                 underline: classnames((_b = {}, _b[styles.underline] = isCalendarOpen, _b)),
                 adornedEnd: styles.adornedEnd
@@ -65,12 +63,4 @@ var TimestampEditor = function (_a) {
             shrink: !isNil(label)
         } }, otherProps)));
 };
-TimestampEditor.propTypes = {
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
-    format: PropTypes.string,
-    label: PropTypes.string,
-    variant: InputVariant,
-    InputProps: PropTypes.object,
-    onChange: PropTypes.func.isRequired
-};
 export default TimestampEditor;

package/esm/components/editors/TimestampEditor/styles.d.ts

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

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/components/workflow/components/DueDateField/styles.d.ts

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

package/esm/constants/prop-types.d.ts

@@ -44,7 +44,6 @@ export const ColumnFilterType: PropTypes.Requireable<PropTypes.InferProps<{
     }>)[])[]>;
     filter: PropTypes.Requireable<string>;
 }>>;
-export const InputVariant: PropTypes.Requireable<string>;
 export const ColumnsDataType: PropTypes.Requireable<PropTypes.InferProps<{
     id: PropTypes.Requireable<string>;
     label: PropTypes.Requireable<string>;

package/esm/constants/prop-types.js

@@ -34,7 +34,6 @@ var ColumnFilterType = PropTypes.shape({
     value: PropTypes.oneOfType([FilterValueType, PropTypes.arrayOf(FilterValueType)]),
     filter: PropTypes.string
 });
-var InputVariant = PropTypes.oneOf(['standard', 'outlined', 'filled']);
 var PlainColumnsDataType = PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string,
@@ -62,4 +61,4 @@ var QueryBuilderAttributeType = PropTypes.shape({
     filter: PropTypes.string,
     operator: PropTypes.string
 });
-export { NumberFormatType, SelectValueType, DropDownEntryType, DropDownGroupEntryType, ColumnDataType, SortingType, ColumnFilterType, InputVariant, ColumnsDataType, GroupedColumnsDataType, QueryBuilderAttributeDataType, QueryBuilderAttributeType };
+export { NumberFormatType, SelectValueType, DropDownEntryType, DropDownGroupEntryType, ColumnDataType, SortingType, ColumnFilterType, ColumnsDataType, GroupedColumnsDataType, QueryBuilderAttributeDataType, QueryBuilderAttributeType };

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,20 +1,25 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.887",
+  "version": "1.4.892",
   "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.887",
-    "@reltio/mdm-sdk": "^1.4.887",
+    "@reltio/mdm-module": "^1.4.892",
+    "@reltio/mdm-sdk": "^1.4.892",
     "classnames": "^2.2.5",
+    "d3-cloud": "^1.2.5",
+    "d3-geo": "^2.0.1",
+    "d3-hierarchy": "^2.0.0",
+    "d3-scale": "^3.3.0",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",
     "prop-types": "^15.6.2",
     "ramda": "^0.27.0",
     "react-autosuggest": "^9.4.3",
+    "react-components": "git+ssh://git@bitbucket.org/reltio-ondemand/react-components.git#v3.5.4",
     "react-dnd": "^9.4.0",
     "react-dnd-html5-backend": "^10.0.2",
     "react-grid-layout": "^1.1.1",
@@ -26,8 +31,10 @@
     "react-resize-detector": "^4.2.0",
     "react-select": "^3.0.4",
     "react-simple-maps": "^2.3.0",
+    "react-split-pane": "^0.1.89",
     "react-virtualized": "^9.21.2",
     "react-window": "^1.8.5",
+    "recharts": "^1.8.5",
     "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.3.0"
   },
   "peerDependencies": {