@reltio/components 1.4.1765 → 1.4.1767

package/cjs/components/BasicTableView/BasicTable/BasicTable.js

@@ -87,7 +87,7 @@ var BasicTable = (0, react_1.forwardRef)(function (_a, ref) {
     }
     return (react_1.default.createElement(RowCollapseContext_1.RowCollapseContext.Provider, { value: collapseContextValue },
         react_1.default.createElement(TableContext_1.TableContext.Provider, { value: context },
-            react_1.default.createElement(Table_1.default, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48, onStartDragRow: onStartDragRow }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: (0, ramda_1.prop)('field', sorting), sortOrder: (0, ramda_1.prop)('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + styles_1.COLUMN_FILTER_HEIGHT : headRowHeight, ref: ref })))));
+            react_1.default.createElement(Table_1.default, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48, onStartDragRow: onStartDragRow }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: (0, ramda_1.prop)('field', sorting), sortOrder: (0, ramda_1.prop)('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + styles_1.COLUMN_FILTER_HEIGHT : headRowHeight, shouldRenderDndProvider: false, ref: ref })))));
 });
 exports.BasicTableType = {
     columnsData: prop_types_1.default.arrayOf(prop_types_2.ColumnDataType).isRequired,

package/cjs/components/CommentsContainer/buttons/CommentButton.js

@@ -12,7 +12,7 @@ var CommentButton = react_1.default.forwardRef(function (_a, ref) {
     var children = _a.children, onClick = _a.onClick;
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Show comment') },
-        react_1.default.createElement("div", { ref: ref, className: styles.root, onClick: onClick },
+        react_1.default.createElement("div", { ref: ref, className: styles.root, onClick: onClick, "data-reltio-id": "reltio-comment-button" },
             react_1.default.createElement(CommentBubble_1.default, { className: styles.icon }),
             react_1.default.createElement("div", { className: styles.childrenWrapper }, children))));
 });

package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts

@@ -1,6 +1,9 @@
 export declare const useEntityDetails: (entityUri: string) => {
     isLoading: boolean;
     entityDetails: any;
-    showEntityDetails: () => void;
+    showEntityDetails: {
+        (): void;
+        cancel: () => void;
+    };
     hideEntityDetails: () => void;
 };

package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.js

@@ -7,25 +7,22 @@ var useSafePromise_1 = require("../../../hooks/useSafePromise");
 var useEntityDetails = function (entityUri) {
     var _a = (0, react_1.useState)(null), entityDetails = _a[0], setEntityDetails = _a[1];
     var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
-    var timerId = (0, react_1.useRef)(null);
     var safePromise = (0, useSafePromise_1.useSafePromise)();
     var cancelRequest = (0, react_1.useCallback)(function () { return safePromise(Promise.resolve()); }, [safePromise]);
-    var showEntityDetails = (0, react_1.useCallback)(function () {
-        timerId.current = setTimeout(function () {
-            setIsLoading(true);
-            safePromise((0, mdm_sdk_1.getEntity)(entityUri))
-                .then(setEntityDetails)
-                .finally(function () { return setIsLoading(false); });
-        }, 1000);
-    }, [entityUri, safePromise]);
+    var showEntityDetails = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(function () {
+        setIsLoading(true);
+        safePromise((0, mdm_sdk_1.getEntity)(entityUri))
+            .then(setEntityDetails)
+            .finally(function () { return setIsLoading(false); });
+    }, 1000), [entityUri, safePromise]);
     var hideEntityDetails = (0, react_1.useCallback)(function () {
         cancelRequest();
-        clearTimeout(timerId.current);
+        showEntityDetails.cancel();
         setIsLoading(false);
         setEntityDetails(null);
-    }, [cancelRequest]);
+    }, [showEntityDetails, cancelRequest]);
     (0, react_1.useEffect)(function () {
-        return function () { return clearTimeout(timerId.current); };
+        return function () { return showEntityDetails.cancel(); };
     }, []);
     return {
         isLoading: isLoading,

package/cjs/components/ReactSortableTree/index.d.ts

@@ -1,6 +1,4 @@
 export * from "./utils/default-handlers";
 export * from "./utils/tree-data-utils";
 export default SortableTree;
-export { SortableTreeWithoutDndContext };
 import SortableTree from './react-sortable-tree';
-import { SortableTreeWithoutDndContext } from './react-sortable-tree';

package/cjs/components/ReactSortableTree/index.js

@@ -10,25 +10,14 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     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 __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableTreeWithoutDndContext = void 0;
-var react_sortable_tree_1 = __importStar(require("./react-sortable-tree"));
-Object.defineProperty(exports, "SortableTreeWithoutDndContext", { enumerable: true, get: function () { return react_sortable_tree_1.SortableTreeWithoutDndContext; } });
+var react_sortable_tree_1 = __importDefault(require("./react-sortable-tree"));
 __exportStar(require("./utils/default-handlers"), exports);
 __exportStar(require("./utils/tree-data-utils"), exports);
 exports.default = react_sortable_tree_1.default;

package/cjs/components/ReactSortableTree/react-sortable-tree.d.ts

@@ -1,3 +1,2 @@
 export default SortableTree;
-export function SortableTreeWithoutDndContext(props: any): JSX.Element;
 declare function SortableTree(props: any): JSX.Element;

package/cjs/components/ReactSortableTree/react-sortable-tree.js

@@ -52,7 +52,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableTreeWithoutDndContext = void 0;
 var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var react_virtualized_1 = require("react-virtualized");
@@ -61,7 +60,6 @@ var frontend_collective_react_dnd_scrollzone_1 = __importStar(require("frontend-
 var react_dnd_1 = require("react-dnd");
 var react_lifecycles_compat_1 = require("react-lifecycles-compat");
 var withStyles_1 = __importDefault(require("@mui/styles/withStyles"));
-var DragAndDrop_1 = require("../DragAndDrop/DragAndDrop");
 var tree_node_1 = __importDefault(require("./tree-node"));
 var node_renderer_default_1 = __importDefault(require("./node-renderer-default"));
 var tree_placeholder_1 = __importDefault(require("./tree-placeholder"));
@@ -803,13 +801,8 @@ ReactSortableTree.defaultProps = {
 };
 (0, react_lifecycles_compat_1.polyfill)(ReactSortableTree);
 var StyledReactSortableTree = (0, withStyles_1.default)(reactSortableTreeStyles_1.styles)(ReactSortableTree);
-var SortableTreeWithoutDndContext = function (props) { return (react_1.default.createElement(react_dnd_1.DndContext.Consumer, null, function (_a) {
+var SortableTree = function (props) { return (react_1.default.createElement(react_dnd_1.DndContext.Consumer, null, function (_a) {
     var dragDropManager = _a.dragDropManager;
     return dragDropManager === undefined ? null : (react_1.default.createElement(StyledReactSortableTree, __assign({}, props, { dragDropManager: dragDropManager })));
 })); };
-exports.SortableTreeWithoutDndContext = SortableTreeWithoutDndContext;
-var SortableTree = function (props) {
-    return (react_1.default.createElement(DragAndDrop_1.DragAndDrop, null,
-        react_1.default.createElement(SortableTreeWithoutDndContext, __assign({}, props))));
-};
 exports.default = SortableTree;

package/cjs/components/RelationEditor/RelationEditor.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Connection, RelationsViewConfig, Mode, Metadata } from '@reltio/mdm-sdk';
+import { Connection, RelationsViewConfig, RelationsTableViewConfig, Mode, Metadata } from '@reltio/mdm-sdk';
 import { ScrollToElementContext } from '../../contexts';
 type Props = {
     connection: Connection;
-    config: RelationsViewConfig;
+    config: RelationsViewConfig | RelationsTableViewConfig;
     mode: Mode;
     metadata: Metadata;
     highlightedError?: React.ContextType<typeof ScrollToElementContext>;

package/cjs/components/RelationEditor/RelationEditor.js

@@ -187,7 +187,7 @@ var RelationEditor = function (_a) {
     }, [setModifiedEntity, onChangeEntity, mode, metadata]);
     var errorMessage = (0, mdm_sdk_1.getErrorMessage)(error);
     var getEntityTypesUris = (0, react_1.useCallback)(function () {
-        var content = config.content, contentSecondLevel = config.contentSecondLevel;
+        var _a = config, content = _a.content, contentSecondLevel = _a.contentSecondLevel;
         if (contentSecondLevel && connection.parentEntityUri) {
             return contentSecondLevel.entityTypes;
         }

package/cjs/components/UploadImageDialog/UploadImageDialog.js

@@ -40,7 +40,6 @@ var DividerWithText_1 = require("./DividerWithText/DividerWithText");
 var ErrorSnackbar_1 = require("./ErrorSnackbar/ErrorSnackbar");
 var constants_1 = require("./constants");
 var styles_1 = require("./styles");
-var DragAndDrop_1 = require("../DragAndDrop/DragAndDrop");
 var contexts_1 = require("../../contexts");
 var UploadImageDialog = function (_a) {
     var open = _a.open, onClose = _a.onClose, onUpload = _a.onUpload;
@@ -81,14 +80,13 @@ var UploadImageDialog = function (_a) {
     var handleSendImage = function (url) {
         uploadImage(url);
     };
-    return (react_1.default.createElement(DragAndDrop_1.DragAndDrop, null,
-        react_1.default.createElement(Dialog_1.default, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
-            react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Add new image')),
-            react_1.default.createElement(Box_1.default, { className: styles.body },
-                react_1.default.createElement(TargetBox_1.TargetBox, { className: styles.targetBox, onAppendFile: handleAppendImage }),
-                react_1.default.createElement(DividerWithText_1.DividerWithText, { className: styles.divider }, ui_i18n_1.default.text('or')),
-                react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: handleSendImage })),
-            loading && react_1.default.createElement(LinearLoadIndicator_1.default, null),
-            react_1.default.createElement(ErrorSnackbar_1.ErrorSnackbar, { error: error, onClose: function () { return setError(null); } }))));
+    return (react_1.default.createElement(Dialog_1.default, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
+        react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Add new image')),
+        react_1.default.createElement(Box_1.default, { className: styles.body },
+            react_1.default.createElement(TargetBox_1.TargetBox, { className: styles.targetBox, onAppendFile: handleAppendImage }),
+            react_1.default.createElement(DividerWithText_1.DividerWithText, { className: styles.divider }, ui_i18n_1.default.text('or')),
+            react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: handleSendImage })),
+        loading && react_1.default.createElement(LinearLoadIndicator_1.default, null),
+        react_1.default.createElement(ErrorSnackbar_1.ErrorSnackbar, { error: error, onClose: function () { return setError(null); } })));
 };
 exports.UploadImageDialog = UploadImageDialog;

package/cjs/components/index.d.ts

@@ -141,7 +141,6 @@ export { default as AttributeGroupIcon } from './AttributeGroupIcon/AttributeGro
 export { default as AttributesFiltersButton } from './AttributesFiltersButton/AttributesFiltersButton';
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
-export { DragAndDrop } from './DragAndDrop/DragAndDrop';
 export * from './AttributesFiltersBuilder';
 export { default as MultiValueSelector } from './MultiValueSelector/MultiValueSelector';
 export { default as MatchRulesSelector } from './MatchRulesSelector/MatchRulesSelector';

package/cjs/components/index.js

@@ -19,8 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.MenuList = exports.LoadMoreButton = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = 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.DescriptionIcon = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SearchInput = exports.ProfileResizablePanes = 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.SimpleMatchRules = exports.MatchRuleVariant = 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.ExternalInvalidRelations = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.AttributesErrorsPanel = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
-exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = 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.ColoredSourceIcon = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = void 0;
-exports.ActionsPanel = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.MultilineMenuItem = exports.RelevanceScoreBadge = exports.RequiredMark = exports.HierarchyNodeTitle = void 0;
+exports.HierarchyNodeTitle = exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = 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.ColoredSourceIcon = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = void 0;
+exports.ActionsPanel = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.MultilineMenuItem = exports.RelevanceScoreBadge = exports.RequiredMark = 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; } });
@@ -306,8 +306,6 @@ var AttributesFiltersBuilder_1 = require("./AttributesFiltersBuilder/AttributesF
 Object.defineProperty(exports, "AttributesFiltersBuilder", { enumerable: true, get: function () { return __importDefault(AttributesFiltersBuilder_1).default; } });
 var ConnectionEditor_1 = require("./ConnectionEditor");
 Object.defineProperty(exports, "ConnectionEditor", { enumerable: true, get: function () { return ConnectionEditor_1.ConnectionEditor; } });
-var DragAndDrop_1 = require("./DragAndDrop/DragAndDrop");
-Object.defineProperty(exports, "DragAndDrop", { enumerable: true, get: function () { return DragAndDrop_1.DragAndDrop; } });
 __exportStar(require("./AttributesFiltersBuilder"), exports);
 var MultiValueSelector_1 = require("./MultiValueSelector/MultiValueSelector");
 Object.defineProperty(exports, "MultiValueSelector", { enumerable: true, get: function () { return __importDefault(MultiValueSelector_1).default; } });

package/cjs/hooks/useRelationsLoader.d.ts

@@ -1,4 +1,4 @@
-import { ActivityFilter, Entity, Mode, RelationsViewConfig } from '@reltio/mdm-sdk';
+import { ActivityFilter, Entity, Mode, RelationsViewConfig, RelationsTableViewConfig } from '@reltio/mdm-sdk';
 type Props = {
     sorting?: {
         field: string;
@@ -7,7 +7,7 @@ type Props = {
     filter?: string;
     page: number;
     rowsPerPage: number;
-    config: Pick<RelationsViewConfig, 'suggested' | 'content' | 'id'>;
+    config: Pick<RelationsViewConfig | RelationsTableViewConfig, 'suggested' | 'content' | 'id'>;
     entity: Entity;
     relationActivityFilter?: ActivityFilter;
     mode: Mode;

package/esm/components/BasicTableView/BasicTable/BasicTable.js

@@ -58,7 +58,7 @@ var BasicTable = forwardRef(function (_a, ref) {
     }
     return (React.createElement(RowCollapseContext.Provider, { value: collapseContextValue },
         React.createElement(TableContext.Provider, { value: context },
-            React.createElement(Table, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48, onStartDragRow: onStartDragRow }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: prop('field', sorting), sortOrder: prop('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + COLUMN_FILTER_HEIGHT : headRowHeight, ref: ref })))));
+            React.createElement(Table, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48, onStartDragRow: onStartDragRow }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: prop('field', sorting), sortOrder: prop('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + COLUMN_FILTER_HEIGHT : headRowHeight, shouldRenderDndProvider: false, ref: ref })))));
 });
 export var BasicTableType = {
     columnsData: PropTypes.arrayOf(ColumnDataType).isRequired,

package/esm/components/CommentsContainer/buttons/CommentButton.js

@@ -7,7 +7,7 @@ var CommentButton = React.forwardRef(function (_a, ref) {
     var children = _a.children, onClick = _a.onClick;
     var styles = useStyles();
     return (React.createElement(Tooltip, { title: i18n.text('Show comment') },
-        React.createElement("div", { ref: ref, className: styles.root, onClick: onClick },
+        React.createElement("div", { ref: ref, className: styles.root, onClick: onClick, "data-reltio-id": "reltio-comment-button" },
             React.createElement(CommentIcon, { className: styles.icon }),
             React.createElement("div", { className: styles.childrenWrapper }, children))));
 });

package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts

@@ -1,6 +1,9 @@
 export declare const useEntityDetails: (entityUri: string) => {
     isLoading: boolean;
     entityDetails: any;
-    showEntityDetails: () => void;
+    showEntityDetails: {
+        (): void;
+        cancel: () => void;
+    };
     hideEntityDetails: () => void;
 };

package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.js

@@ -1,28 +1,25 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { getEntity } from '@reltio/mdm-sdk';
+import { useState, useCallback, useEffect } from 'react';
+import { getEntity, debounce } from '@reltio/mdm-sdk';
 import { useSafePromise } from '../../../hooks/useSafePromise';
 export var useEntityDetails = function (entityUri) {
     var _a = useState(null), entityDetails = _a[0], setEntityDetails = _a[1];
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var timerId = useRef(null);
     var safePromise = useSafePromise();
     var cancelRequest = useCallback(function () { return safePromise(Promise.resolve()); }, [safePromise]);
-    var showEntityDetails = useCallback(function () {
-        timerId.current = setTimeout(function () {
-            setIsLoading(true);
-            safePromise(getEntity(entityUri))
-                .then(setEntityDetails)
-                .finally(function () { return setIsLoading(false); });
-        }, 1000);
-    }, [entityUri, safePromise]);
+    var showEntityDetails = useCallback(debounce(function () {
+        setIsLoading(true);
+        safePromise(getEntity(entityUri))
+            .then(setEntityDetails)
+            .finally(function () { return setIsLoading(false); });
+    }, 1000), [entityUri, safePromise]);
     var hideEntityDetails = useCallback(function () {
         cancelRequest();
-        clearTimeout(timerId.current);
+        showEntityDetails.cancel();
         setIsLoading(false);
         setEntityDetails(null);
-    }, [cancelRequest]);
+    }, [showEntityDetails, cancelRequest]);
     useEffect(function () {
-        return function () { return clearTimeout(timerId.current); };
+        return function () { return showEntityDetails.cancel(); };
     }, []);
     return {
         isLoading: isLoading,

package/esm/components/ReactSortableTree/index.d.ts

@@ -1,6 +1,4 @@
 export * from "./utils/default-handlers";
 export * from "./utils/tree-data-utils";
 export default SortableTree;
-export { SortableTreeWithoutDndContext };
 import SortableTree from './react-sortable-tree';
-import { SortableTreeWithoutDndContext } from './react-sortable-tree';

package/esm/components/ReactSortableTree/index.js

@@ -1,8 +1,4 @@
-import SortableTree, { SortableTreeWithoutDndContext } from './react-sortable-tree';
+import SortableTree from './react-sortable-tree';
 export * from './utils/default-handlers';
 export * from './utils/tree-data-utils';
 export default SortableTree;
-// Export the tree component without the react-dnd DragDropContext,
-// for when component is used with other components using react-dnd.
-// see: https://github.com/gaearon/react-dnd/issues/186
-export { SortableTreeWithoutDndContext };

package/esm/components/ReactSortableTree/react-sortable-tree.d.ts

@@ -1,3 +1,2 @@
 export default SortableTree;
-export function SortableTreeWithoutDndContext(props: any): JSX.Element;
 declare function SortableTree(props: any): JSX.Element;

package/esm/components/ReactSortableTree/react-sortable-tree.js

@@ -32,7 +32,6 @@ import withScrolling, { createScrollingComponent, createVerticalStrength, create
 import { DndContext } from 'react-dnd';
 import { polyfill } from 'react-lifecycles-compat';
 import withStyles from '@mui/styles/withStyles';
-import { DragAndDrop } from '../DragAndDrop/DragAndDrop';
 import TreeNode from './tree-node';
 import NodeRendererDefault from './node-renderer-default';
 import TreePlaceholder from './tree-placeholder';
@@ -774,16 +773,8 @@ ReactSortableTree.defaultProps = {
 };
 polyfill(ReactSortableTree);
 var StyledReactSortableTree = withStyles(styles)(ReactSortableTree);
-var SortableTreeWithoutDndContext = function (props) { return (React.createElement(DndContext.Consumer, null, function (_a) {
+var SortableTree = function (props) { return (React.createElement(DndContext.Consumer, null, function (_a) {
     var dragDropManager = _a.dragDropManager;
     return dragDropManager === undefined ? null : (React.createElement(StyledReactSortableTree, __assign({}, props, { dragDropManager: dragDropManager })));
 })); };
-var SortableTree = function (props) {
-    return (React.createElement(DragAndDrop, null,
-        React.createElement(SortableTreeWithoutDndContext, __assign({}, props))));
-};
-// Export the tree component without the react-dnd DragDropContext,
-// for when component is used with other components using react-dnd.
-// see: https://github.com/gaearon/react-dnd/issues/186
-export { SortableTreeWithoutDndContext };
 export default SortableTree;

package/esm/components/RelationEditor/RelationEditor.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Connection, RelationsViewConfig, Mode, Metadata } from '@reltio/mdm-sdk';
+import { Connection, RelationsViewConfig, RelationsTableViewConfig, Mode, Metadata } from '@reltio/mdm-sdk';
 import { ScrollToElementContext } from '../../contexts';
 type Props = {
     connection: Connection;
-    config: RelationsViewConfig;
+    config: RelationsViewConfig | RelationsTableViewConfig;
     mode: Mode;
     metadata: Metadata;
     highlightedError?: React.ContextType<typeof ScrollToElementContext>;

package/esm/components/RelationEditor/RelationEditor.js

@@ -159,7 +159,7 @@ var RelationEditor = function (_a) {
     }, [setModifiedEntity, onChangeEntity, mode, metadata]);
     var errorMessage = getErrorMessage(error);
     var getEntityTypesUris = useCallback(function () {
-        var content = config.content, contentSecondLevel = config.contentSecondLevel;
+        var _a = config, content = _a.content, contentSecondLevel = _a.contentSecondLevel;
         if (contentSecondLevel && connection.parentEntityUri) {
             return contentSecondLevel.entityTypes;
         }

package/esm/components/UploadImageDialog/UploadImageDialog.js

@@ -11,7 +11,6 @@ import { DividerWithText } from './DividerWithText/DividerWithText';
 import { ErrorSnackbar } from './ErrorSnackbar/ErrorSnackbar';
 import { IMAGE_TYPES, MAX_IMAGE_SIZE } from './constants';
 import { useStyles } from './styles';
-import { DragAndDrop } from '../DragAndDrop/DragAndDrop';
 import { useMdmEnvironment, useMdmImageServicePath, useMdmTenant } from '../../contexts';
 export var UploadImageDialog = function (_a) {
     var open = _a.open, onClose = _a.onClose, onUpload = _a.onUpload;
@@ -52,13 +51,12 @@ export var UploadImageDialog = function (_a) {
     var handleSendImage = function (url) {
         uploadImage(url);
     };
-    return (React.createElement(DragAndDrop, null,
-        React.createElement(Dialog, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
-            React.createElement(Typography, { className: styles.title }, i18n.text('Add new image')),
-            React.createElement(Box, { className: styles.body },
-                React.createElement(TargetBox, { className: styles.targetBox, onAppendFile: handleAppendImage }),
-                React.createElement(DividerWithText, { className: styles.divider }, i18n.text('or')),
-                React.createElement(ImageByUrlField, { onSend: handleSendImage })),
-            loading && React.createElement(LinearLoadIndicator, null),
-            React.createElement(ErrorSnackbar, { error: error, onClose: function () { return setError(null); } }))));
+    return (React.createElement(Dialog, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
+        React.createElement(Typography, { className: styles.title }, i18n.text('Add new image')),
+        React.createElement(Box, { className: styles.body },
+            React.createElement(TargetBox, { className: styles.targetBox, onAppendFile: handleAppendImage }),
+            React.createElement(DividerWithText, { className: styles.divider }, i18n.text('or')),
+            React.createElement(ImageByUrlField, { onSend: handleSendImage })),
+        loading && React.createElement(LinearLoadIndicator, null),
+        React.createElement(ErrorSnackbar, { error: error, onClose: function () { return setError(null); } })));
 };

package/esm/components/index.d.ts

@@ -141,7 +141,6 @@ export { default as AttributeGroupIcon } from './AttributeGroupIcon/AttributeGro
 export { default as AttributesFiltersButton } from './AttributesFiltersButton/AttributesFiltersButton';
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
-export { DragAndDrop } from './DragAndDrop/DragAndDrop';
 export * from './AttributesFiltersBuilder';
 export { default as MultiValueSelector } from './MultiValueSelector/MultiValueSelector';
 export { default as MatchRulesSelector } from './MatchRulesSelector/MatchRulesSelector';

package/esm/components/index.js

@@ -141,7 +141,6 @@ export { default as AttributeGroupIcon } from './AttributeGroupIcon/AttributeGro
 export { default as AttributesFiltersButton } from './AttributesFiltersButton/AttributesFiltersButton';
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
-export { DragAndDrop } from './DragAndDrop/DragAndDrop';
 export * from './AttributesFiltersBuilder';
 export { default as MultiValueSelector } from './MultiValueSelector/MultiValueSelector';
 export { default as MatchRulesSelector } from './MatchRulesSelector/MatchRulesSelector';

package/esm/hooks/useRelationsLoader.d.ts

@@ -1,4 +1,4 @@
-import { ActivityFilter, Entity, Mode, RelationsViewConfig } from '@reltio/mdm-sdk';
+import { ActivityFilter, Entity, Mode, RelationsViewConfig, RelationsTableViewConfig } from '@reltio/mdm-sdk';
 type Props = {
     sorting?: {
         field: string;
@@ -7,7 +7,7 @@ type Props = {
     filter?: string;
     page: number;
     rowsPerPage: number;
-    config: Pick<RelationsViewConfig, 'suggested' | 'content' | 'id'>;
+    config: Pick<RelationsViewConfig | RelationsTableViewConfig, 'suggested' | 'content' | 'id'>;
     entity: Entity;
     relationActivityFilter?: ActivityFilter;
     mode: Mode;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1765",
+  "version": "1.4.1767",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1743",
+    "@reltio/mdm-sdk": "^1.4.1744",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
@@ -19,7 +19,7 @@
     "prop-types": "^15.6.2",
     "ramda": "^0.28.0",
     "react-autosuggest": "^9.4.3",
-    "react-components": "bitbucket:reltio-ondemand/react-components#v3.25.0",
+    "react-components": "bitbucket:reltio-ondemand/react-components#v3.25.1",
     "react-dnd": "^9.4.0",
     "react-dnd-html5-backend": "^10.0.2",
     "react-grid-layout": "1.4.2",

package/cjs/components/DragAndDrop/DragAndDrop.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-type Props = {
-    children?: React.ReactNode;
-};
-export declare const DragAndDrop: (props: Props) => JSX.Element;
-export {};

package/cjs/components/DragAndDrop/DragAndDrop.js

@@ -1,46 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 });
-exports.DragAndDrop = void 0;
-// This component fixes "Cannot have two HTML5 backends at the same time" error.
-// Check issue and solution https://github.com/react-dnd/react-dnd/issues/186#issuecomment-561631584
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
-var react_1 = __importStar(require("react"));
-var RNDContext = (0, react_dnd_1.createDndContext)(react_dnd_html5_backend_1.default);
-var useDNDProviderElement = function (props) {
-    var manager = (0, react_1.useRef)(RNDContext);
-    if (!props.children)
-        return null;
-    return react_1.default.createElement(react_dnd_1.DndProvider, { manager: manager.current.dragDropManager }, props.children);
-};
-var DragAndDrop = function (props) {
-    var DNDElement = useDNDProviderElement(props);
-    return react_1.default.createElement(react_1.default.Fragment, null, DNDElement);
-};
-exports.DragAndDrop = DragAndDrop;

package/esm/components/DragAndDrop/DragAndDrop.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-type Props = {
-    children?: React.ReactNode;
-};
-export declare const DragAndDrop: (props: Props) => JSX.Element;
-export {};

package/esm/components/DragAndDrop/DragAndDrop.js

@@ -1,16 +0,0 @@
-// This component fixes "Cannot have two HTML5 backends at the same time" error.
-// Check issue and solution https://github.com/react-dnd/react-dnd/issues/186#issuecomment-561631584
-import { DndProvider, createDndContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
-import React, { useRef } from 'react';
-var RNDContext = createDndContext(HTML5Backend);
-var useDNDProviderElement = function (props) {
-    var manager = useRef(RNDContext);
-    if (!props.children)
-        return null;
-    return React.createElement(DndProvider, { manager: manager.current.dragDropManager }, props.children);
-};
-export var DragAndDrop = function (props) {
-    var DNDElement = useDNDProviderElement(props);
-    return React.createElement(React.Fragment, null, DNDElement);
-};