@reltio/components 1.4.2255 → 1.4.2257

package/AttributesView/AttributesView.test.js

@@ -47,6 +47,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import React from 'react';
 import { Mode } from '@reltio/mdm-sdk';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { AttributesView } from './AttributesView';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { render, screen, within } from '@testing-library/react';
@@ -110,7 +112,8 @@ describe('AttributesView tests', function () {
         if (mdmValues === void 0) { mdmValues = mdmDefaultValues; }
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(MdmModuleProvider, { values: mdmValues, actions: actions }, children));
+            return (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                React.createElement(MdmModuleProvider, { values: mdmValues, actions: actions }, children)));
         };
         var user = userEvent.setup();
         return __assign(__assign({}, render(React.createElement(AttributesView, __assign({}, props)), { wrapper: Providers })), { user: user });
@@ -151,11 +154,14 @@ describe('AttributesView tests', function () {
     it('should render always visible attributes in editing mode', function () {
         var alwaysVisible = [
             'configuration/entityTypes/HCP/attributes/LastName',
-            'configuration/entityTypes/HCP/attributes/Phone'
+            'configuration/entityTypes/HCP/attributes/Phone',
+            'startDate'
         ];
         setUp({ mode: Mode.Editing, entity: entity, alwaysVisible: alwaysVisible });
         expect(screen.getByText('Last Name')).toBeInTheDocument();
         expect(screen.getByText('Phone')).toBeInTheDocument();
+        expect(screen.getByText('Start date')).toBeInTheDocument();
+        expect(screen.queryByText('End date')).not.toBeInTheDocument();
     });
     it('should render always visible attributes in read mode for entity without filled attributes', function () {
         var alwaysVisible = [

package/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { createNewAttribute, EntityAttrTypes, isEditableMode as checkIsEditableMode, isEmptyValue, isActivenessAttrType } from '@reltio/mdm-sdk';
 import classnames from 'classnames';
 import { pipe, T } from 'ramda';
@@ -33,6 +33,7 @@ import { RolesEditor } from '../../../RolesEditor';
 import { TagsEditor } from '../../../TagsEditor';
 import { HasDeletionsContext } from '../../../contexts/HasDeletionsContext';
 import { withContext } from '../../../HOCs/withContext';
+import { AlwaysVisibleAttributesContext } from '../../../contexts/AlwaysVisibleAttributesContext';
 import { useScrollToAttribute } from '../../../hooks/useScrollToAttribute';
 import { useStyles } from '../../styles';
 var SpecialRenderer = function (_a) {
@@ -52,7 +53,9 @@ var SpecialRenderer = function (_a) {
         updateHasDeletions
     ]);
     var isEmptyValues = isEmptyValue(values);
-    var showEmpty = !hasDeletions && showEmptyEditors && isEmptyValues;
+    var alwaysVisibleAttributes = useContext(AlwaysVisibleAttributesContext);
+    var isAlwaysVisible = useMemo(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeType.uri); }, [attributeType.uri, alwaysVisibleAttributes]);
+    var showEmpty = ((!hasDeletions && showEmptyEditors) || isAlwaysVisible) && isEmptyValues;
     var emptyEditorValue = useRef(createNewAttribute({
         parentUri: parentUri,
         attributeType: attributeType

package/cjs/AttributesView/AttributesView.test.js

@@ -52,6 +52,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
+var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var AttributesView_1 = require("./AttributesView");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var react_2 = require("@testing-library/react");
@@ -115,7 +117,8 @@ describe('AttributesView tests', function () {
         if (mdmValues === void 0) { mdmValues = mdmDefaultValues; }
         var Providers = function (_a) {
             var children = _a.children;
-            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: actions }, children));
+            return (react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+                react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: actions }, children)));
         };
         var user = user_event_1.default.setup();
         return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(AttributesView_1.AttributesView, __assign({}, props)), { wrapper: Providers })), { user: user });
@@ -156,11 +159,14 @@ describe('AttributesView tests', function () {
     it('should render always visible attributes in editing mode', function () {
         var alwaysVisible = [
             'configuration/entityTypes/HCP/attributes/LastName',
-            'configuration/entityTypes/HCP/attributes/Phone'
+            'configuration/entityTypes/HCP/attributes/Phone',
+            'startDate'
         ];
         setUp({ mode: mdm_sdk_1.Mode.Editing, entity: entity, alwaysVisible: alwaysVisible });
         expect(react_2.screen.getByText('Last Name')).toBeInTheDocument();
         expect(react_2.screen.getByText('Phone')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Start date')).toBeInTheDocument();
+        expect(react_2.screen.queryByText('End date')).not.toBeInTheDocument();
     });
     it('should render always visible attributes in read mode for entity without filled attributes', function () {
         var alwaysVisible = [

package/cjs/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.js

@@ -61,6 +61,7 @@ var RolesEditor_1 = require("../../../RolesEditor");
 var TagsEditor_1 = require("../../../TagsEditor");
 var HasDeletionsContext_1 = require("../../../contexts/HasDeletionsContext");
 var withContext_1 = require("../../../HOCs/withContext");
+var AlwaysVisibleAttributesContext_1 = require("../../../contexts/AlwaysVisibleAttributesContext");
 var useScrollToAttribute_1 = require("../../../hooks/useScrollToAttribute");
 var styles_1 = require("../../styles");
 var SpecialRenderer = function (_a) {
@@ -80,7 +81,9 @@ var SpecialRenderer = function (_a) {
         updateHasDeletions
     ]);
     var isEmptyValues = (0, mdm_sdk_1.isEmptyValue)(values);
-    var showEmpty = !hasDeletions && showEmptyEditors && isEmptyValues;
+    var alwaysVisibleAttributes = (0, react_1.useContext)(AlwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
+    var isAlwaysVisible = (0, react_1.useMemo)(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeType.uri); }, [attributeType.uri, alwaysVisibleAttributes]);
+    var showEmpty = ((!hasDeletions && showEmptyEditors) || isAlwaysVisible) && isEmptyValues;
     var emptyEditorValue = (0, react_1.useRef)((0, mdm_sdk_1.createNewAttribute)({
         parentUri: parentUri,
         attributeType: attributeType

package/cjs/features/crosswalks/AttributesTable/AttributesTable.d.ts

@@ -22,6 +22,8 @@ type Props = {
     className?: string;
     activeSurvivorshipGroupUri?: string;
     tableRef?: React.ElementRef<typeof BasicTable>;
+    onHideAttributeType?: (attributeType: AttributeType) => void;
+    attributeRowReorderingEnabled?: boolean;
 };
-declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef, onHideAttributeType, attributeRowReorderingEnabled }: Props) => React.JSX.Element>;
 export default _default;

package/cjs/features/crosswalks/AttributesTable/AttributesTable.js

@@ -65,7 +65,7 @@ var getRowCellKey = function (_a) {
 };
 var debouncedNotifyLazyRenderer = (0, mdm_sdk_1.debounce)(LazyRenderer_1.LazyRenderer.notify, 0);
 var AttributesTable = function (_a) {
-    var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
+    var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef, onHideAttributeType = _a.onHideAttributeType, _j = _a.attributeRowReorderingEnabled, attributeRowReorderingEnabled = _j === void 0 ? false : _j;
     var styles = (0, styles_1.useStyles)();
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var visibleColumnsData = (0, react_1.useMemo)(function () {
@@ -74,7 +74,7 @@ var AttributesTable = function (_a) {
             return visibleColumns.includes(id);
         }), helpers_1.getBasicTableColumnsData)(helpers_1.COLUMNS_DATA);
     }, [visibleColumns]);
-    var _j = entity || {}, parentTypeUri = _j.type, parentUri = _j.uri, _k = _j.attributes, attributes = _k === void 0 ? {} : _k;
+    var _k = entity || {}, parentTypeUri = _k.type, parentUri = _k.uri, _l = _k.attributes, attributes = _l === void 0 ? {} : _l;
     (0, react_1.useEffect)(function () {
         if (entity && (0, ramda_1.isNil)(selectedAttributeTypes)) {
             var initialAttrTypes = (0, ramda_1.pipe)(ramda_1.keys, (0, ramda_1.without)(['paging']), (0, ramda_1.map)((0, mdm_sdk_1.makeAttrTypeUri)(parentTypeUri)), (0, ramda_1.map)(function (attrTypeUri) { return (0, mdm_sdk_1.findAttributeTypeByUri)(metadata, attrTypeUri, parentTypeUri); }), (0, ramda_1.filter)((0, ramda_1.both)(ramda_1.identity, mdm_sdk_1.isReadableAttribute)))(attributes);
@@ -94,7 +94,7 @@ var AttributesTable = function (_a) {
         crosswalksMap,
         activeSurvivorshipGroupUri
     ]);
-    var _l = (0, useDynamicRowCellHeight_1.useDynamicRowCellHeight)(getRowCellKey), getDynamicRowCellHeight = _l.getDynamicRowCellHeight, changeRowCellHeight = _l.changeRowCellHeight;
+    var _m = (0, useDynamicRowCellHeight_1.useDynamicRowCellHeight)(getRowCellKey), getDynamicRowCellHeight = _m.getDynamicRowCellHeight, changeRowCellHeight = _m.changeRowCellHeight;
     var renderRowCell = (0, react_1.useCallback)(function (props) { return react_1.default.createElement(CommonRowCellRenderer_1.CommonRowCellRenderer, __assign({ changeRowCellHeight: changeRowCellHeight }, props)); }, [changeRowCellHeight]);
     var getRowCellHeight = (0, react_1.useCallback)((0, ramda_1.either)(getDynamicRowCellHeight, (0, ramda_1.always)(DEFAULT_ROW_HEIGHT)), [
         getDynamicRowCellHeight
@@ -102,8 +102,8 @@ var AttributesTable = function (_a) {
     (0, react_1.useEffect)(function () {
         debouncedNotifyLazyRenderer();
     }, [getRowCellHeight]);
-    var _m = (0, react_1.useState)(null), pendingDeletion = _m[0], setPendingDeletion = _m[1];
-    var _o = (0, react_1.useState)(null), pendingIgnoredEditing = _o[0], setPendingIgnoredEditing = _o[1];
+    var _o = (0, react_1.useState)(null), pendingDeletion = _o[0], setPendingDeletion = _o[1];
+    var _p = (0, react_1.useState)(null), pendingIgnoredEditing = _p[0], setPendingIgnoredEditing = _p[1];
     var handleEdit = (0, react_1.useCallback)(function (event) {
         if (event.attributeValue.ignored) {
             setPendingIgnoredEditing(event);
@@ -130,7 +130,9 @@ var AttributesTable = function (_a) {
         selectedAttributeTypes: selectedAttributeTypes,
         onSelectAttributeTypes: onSelectAttributeTypes,
         emptyTempAttributeUris: emptyTempAttributeUris,
-        readOnly: readOnly
+        readOnly: readOnly,
+        onHideAttributeType: onHideAttributeType,
+        attributeRowReorderingEnabled: attributeRowReorderingEnabled
     }); }, [
         setPendingDeletion,
         onPin,
@@ -142,7 +144,9 @@ var AttributesTable = function (_a) {
         selectedAttributeTypes,
         onSelectAttributeTypes,
         emptyTempAttributeUris,
-        readOnly
+        readOnly,
+        onHideAttributeType,
+        attributeRowReorderingEnabled
     ]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.tableContainer, className) },
         react_1.default.createElement(BasicViewHeader_1.BasicViewHeader, { classes: { root: styles.tableHeader, title: styles.tableTitle }, title: ui_i18n_1.default.text('Sources') },
@@ -153,7 +157,7 @@ var AttributesTable = function (_a) {
             react_1.default.createElement(AttributeValuesSortContext_1.AttributeValuesSortContext.Provider, { value: helpers_1.sortByPinIgnorePriority },
                 react_1.default.createElement(SyncedExpandedAttributesContext_1.SyncedExpandedAttributesProvider, null,
                     react_1.default.createElement(SyncedValueHeightsContext_1.SyncedValueHeightsProvider, null,
-                        react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))))),
+                        react_1.default.createElement(BasicTable_1.BasicTable, { columnsData: visibleColumnsData, context: tableContext, defaultColumnMinWidth: 200, defaultColumnWidth: 250, dndRowReorderingEnabled: attributeRowReorderingEnabled, dndRowReorderingHandler: handleReorderAttributeTypes, externalDndContext: true, fixFirstColumn: true, getIdFromRowValue: getIdFromRowValue, getRowCellHeight: getRowCellHeight, headRowHeight: 48, hoverStateEnabled: Boolean(onHideAttributeType), onScroll: debouncedNotifyLazyRenderer, ref: tableRef, renderRowCell: renderRowCell, rowsData: rowsData }))))),
         react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         react_1.default.createElement(ConfirmEditIgnoredDialog_1.ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-import { OvValues } from '../../types';
-import { DraggableProps } from '../../../../../types/basicTable';
-type Props = {
-    value: OvValues;
-    someRowIsDragging?: boolean;
-    draggableProps?: DraggableProps;
-};
-export declare const OvValuesRenderer: ({ value: { values, attributeType }, someRowIsDragging, draggableProps }: Props) => React.JSX.Element;
-export {};
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js

@@ -37,30 +37,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OvValuesRenderer = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
 var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+var Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var SmallIconButton_1 = require("../../../../../SmallIconButton");
 var AttributeValuesSortContext_1 = require("../../../contexts/AttributeValuesSortContext");
 var ReadOnlyAttributeValuesBlock_1 = require("../../../../../ReadOnlyAttributeValuesBlock");
 var AttributeTitle_1 = require("../../../../../AttributeTitle");
 var EntityContext_1 = require("../../../../../contexts/EntityContext");
 var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
+var withTableContext_1 = require("../../../../../HOCs/withTableContext");
 var FallbackIndicator_1 = require("../FallbackIndicator");
 var styles_1 = require("../../styles");
 var SyncedValueHeight_1 = require("../../../../../SyncedValueHeight");
-var styles_2 = require("./styles");
+var OvValuesRenderer_module_css_1 = __importDefault(require("./OvValuesRenderer.module.css"));
 var OvValuesRenderer = function (_a) {
-    var _b = _a.value, values = _b.values, attributeType = _b.attributeType, someRowIsDragging = _a.someRowIsDragging, draggableProps = _a.draggableProps;
-    var styles = (0, styles_2.useStyles)();
+    var _b = _a.value, values = _b.values, attributeType = _b.attributeType, draggableProps = _a.draggableProps, onHideAttributeType = _a.onHideAttributeType, someRowIsDragging = _a.someRowIsDragging;
     var commonStyles = (0, styles_1.useCommonStyles)();
     var entity = (0, MdmModuleContext_1.useMdmEntity)();
+    var handleHideClick = (0, react_1.useCallback)(function () {
+        onHideAttributeType === null || onHideAttributeType === void 0 ? void 0 : onHideAttributeType(attributeType);
+    }, [onHideAttributeType, attributeType]);
     var sortAttributeValuesForDisplay = (0, react_1.useContext)(AttributeValuesSortContext_1.AttributeValuesSortContext);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, commonStyles.basicCell) },
-        react_1.default.createElement("div", __assign({}, draggableProps, { className: styles.dragIndicator }),
-            react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon })),
-        react_1.default.createElement(AttributeTitle_1.AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(OvValuesRenderer_module_css_1.default.root, commonStyles.basicCell) },
+        react_1.default.createElement("div", __assign({}, draggableProps, { className: OvValuesRenderer_module_css_1.default.dragIndicator }),
+            react_1.default.createElement(DragIndicator_1.default, { className: OvValuesRenderer_module_css_1.default.dragIndicatorIcon })),
+        react_1.default.createElement(AttributeTitle_1.AttributeTitle, { className: OvValuesRenderer_module_css_1.default.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity },
-            react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: SyncedValueHeight_1.ValueHeightReporter, FallbackSlot: FallbackIndicator_1.FallbackIndicator })))));
+            react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: OvValuesRenderer_module_css_1.default.ovValue, AttributeValueWrapper: SyncedValueHeight_1.ValueHeightReporter, FallbackSlot: FallbackIndicator_1.FallbackIndicator }))),
+        onHideAttributeType && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { type: "button", className: OvValuesRenderer_module_css_1.default.hideButton, "aria-label": ui_i18n_1.default.text('Hide attribute'), tooltipTitle: ui_i18n_1.default.text('Hide attribute'), icon: Clear_1.default, iconClassName: OvValuesRenderer_module_css_1.default.hideIcon, onClick: handleHideClick }))));
 };
-exports.OvValuesRenderer = OvValuesRenderer;
+exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pick)(['onHideAttributeType']))(OvValuesRenderer);

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"OvValuesRenderer-root--WVjxR","hideButton":"OvValuesRenderer-hideButton--oOX09","dragIndicatorIcon":"OvValuesRenderer-dragIndicatorIcon--CLnlx","hideIcon":"OvValuesRenderer-hideIcon--gdZkH","dragIndicator":"OvValuesRenderer-dragIndicator--GQHS9","attributeTitle":"OvValuesRenderer-attributeTitle--Gnp-c","ovValue":"OvValuesRenderer-ovValue--bO54I"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.OvValuesRenderer-root--WVjxR{position:relative}.OvValuesRenderer-hideButton--oOX09{display:none;position:absolute;right:8px;top:8px;z-index:1}.hoveredRow .OvValuesRenderer-hideButton--oOX09{display:flex}.hoveredRow .OvValuesRenderer-dragIndicatorIcon--CLnlx{display:inline}.OvValuesRenderer-hideIcon--gdZkH{height:16px;width:16px}.OvValuesRenderer-dragIndicator--GQHS9{cursor:move;left:0;position:absolute;top:15px}.OvValuesRenderer-dragIndicatorIcon--CLnlx{display:none;height:16px;opacity:.38;width:16px}.OvValuesRenderer-attributeTitle--Gnp-c{display:block;margin-left:3px}.OvValuesRenderer-attributeTitle--Gnp-c:not(:last-child){margin-bottom:5px}.OvValuesRenderer-ovValue--bO54I+.OvValuesRenderer-ovValue--bO54I{margin-top:4px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.d.ts

@@ -1 +1 @@
-export { OvValuesRenderer } from './OvValuesRenderer';
+export { default as OvValuesRenderer } from './OvValuesRenderer';

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.js

@@ -1,5 +1,8 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OvValuesRenderer = void 0;
 var OvValuesRenderer_1 = require("./OvValuesRenderer");
-Object.defineProperty(exports, "OvValuesRenderer", { enumerable: true, get: function () { return OvValuesRenderer_1.OvValuesRenderer; } });
+Object.defineProperty(exports, "OvValuesRenderer", { enumerable: true, get: function () { return __importDefault(OvValuesRenderer_1).default; } });

package/cjs/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BasicTable } from '../../../BasicTable';
-type Props = {
-    tableRef: React.ElementRef<typeof BasicTable>;
+export type CrosswalkDndComponentProps = {
+    tableRef: React.RefObject<React.ElementRef<typeof BasicTable> | null>;
     children: React.ReactNode;
+    tableRowReorderingEnabled?: boolean;
 };
-export declare const CrosswalkDndComponent: ({ children, tableRef }: Props) => React.JSX.Element;
-export {};
+export declare const CrosswalkDndComponent: ({ children, tableRef, tableRowReorderingEnabled }: CrosswalkDndComponentProps) => React.JSX.Element;

package/cjs/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.js

@@ -30,22 +30,27 @@ var useDraggingCrosswalk_1 = require("../hooks/useDraggingCrosswalk");
 var modifiers_1 = require("@dnd-kit/modifiers");
 var core_1 = require("@dnd-kit/core");
 var CrosswalkDragPreview_1 = require("../CrosswalkDragPreview");
+var useTableDndKit_1 = require("react-components/dist/Table/hooks/useTableDndKit");
 var CrosswalkDndComponent = function (_a) {
-    var children = _a.children, tableRef = _a.tableRef;
-    var _b = (0, useDndBasicTableScrollModifier_1.useDndBasicTableScrollModifier)({ tableRef: tableRef }), scrollModifier = _b.scrollModifier, stopScroll = _b.stopScroll;
-    var dragOverlayStyles = (0, react_1.useMemo)(function () { return ({ width: 'max-content' }); }, []);
-    var _c = (0, useDraggingCrosswalk_1.useDraggingCrosswalk)(), draggingCrosswalk = _c.draggingCrosswalk, onDragEndCrosswalk = _c.onDragEnd, onDragStart = _c.onDragStart;
+    var children = _a.children, tableRef = _a.tableRef, _b = _a.tableRowReorderingEnabled, tableRowReorderingEnabled = _b === void 0 ? false : _b;
+    var _c = (0, useDndBasicTableScrollModifier_1.useDndBasicTableScrollModifier)({ tableRef: tableRef }), scrollModifier = _c.scrollModifier, stopScroll = _c.stopScroll;
+    var _d = (0, useDraggingCrosswalk_1.useDraggingCrosswalk)(), draggingCrosswalk = _d.draggingCrosswalk, onDragEndCrosswalk = _d.onDragEnd, onCrosswalkDragStart = _d.onDragStart;
+    var tableDnd = (0, useTableDndKit_1.useTableDndKit)({
+        dndColumnReorderingEnabled: false,
+        dndRowReorderingEnabled: tableRowReorderingEnabled
+    });
+    var onDragStart = (0, react_1.useCallback)(function (event) {
+        onCrosswalkDragStart(event);
+    }, [onCrosswalkDragStart]);
     var onDragEnd = (0, react_1.useCallback)(function () {
         onDragEndCrosswalk();
         stopScroll();
     }, [onDragEndCrosswalk, stopScroll]);
     var dndContextModifiers = (0, react_1.useMemo)(function () { return [scrollModifier]; }, [scrollModifier]);
-    var dragOverlayModifiers = (0, react_1.useMemo)(function () { return [modifiers_1.snapCenterToCursor]; }, []);
-    var mouseSensor = (0, core_1.useSensor)(core_1.MouseSensor);
-    var sensors = (0, core_1.useSensors)(mouseSensor);
-    return (react_1.default.createElement(core_1.DndContext, { sensors: sensors, modifiers: dndContextModifiers, autoScroll: false, onDragStart: onDragStart, onDragEnd: onDragEnd },
-        react_1.default.createElement(core_1.DragOverlay, { style: dragOverlayStyles, modifiers: dragOverlayModifiers, dropAnimation: null },
-            react_1.default.createElement(CrosswalkDragPreview_1.CrosswalkDragPreview, { crosswalk: draggingCrosswalk })),
-        children));
+    var crosswalkOverlayModifiers = (0, react_1.useMemo)(function () { return [modifiers_1.snapCenterToCursor]; }, []);
+    return (react_1.default.createElement(core_1.DndContext, { sensors: tableDnd.sensors, collisionDetection: tableDnd.collisionDetection, measuring: tableDnd.measuring, autoScroll: tableDnd.autoScrollOptions, modifiers: dndContextModifiers, onDragStart: onDragStart, onDragEnd: onDragEnd },
+        children,
+        draggingCrosswalk ? (react_1.default.createElement(core_1.DragOverlay, { style: { width: 'max-content' }, modifiers: crosswalkOverlayModifiers, dropAnimation: null },
+            react_1.default.createElement(CrosswalkDragPreview_1.CrosswalkDragPreview, { crosswalk: draggingCrosswalk }))) : null));
 };
 exports.CrosswalkDndComponent = CrosswalkDndComponent;

package/cjs/features/crosswalks/CrosswalkDndComponent/index.d.ts

@@ -1 +1 @@
-export { CrosswalkDndComponent } from './CrosswalkDndComponent';
+export { CrosswalkDndComponent, type CrosswalkDndComponentProps } from './CrosswalkDndComponent';

package/cjs/features/crosswalks/types/DnD.d.ts

@@ -0,0 +1,7 @@
+import { DND_ROW_TYPE } from 'react-components/dist/Table/constants';
+export type TableRowDragPayload = {
+    type: DND_ROW_TYPE;
+};
+export type CrosswalkDragPayload = {
+    type: 'Crosswalk';
+};

package/cjs/features/crosswalks/types/DnD.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/features/crosswalks/types/index.d.ts

@@ -1,3 +1,4 @@
 export type { AddCrosswalkEvent, CreateAttributeEvent, DeleteCrosswalkEvent, EditCrosswalkEvent } from './events';
 export type { CrosswalksByOwnerTypeMap, CrosswalksByTypes } from './crosswalks';
 export { CrosswalkType } from './crosswalks';
+export type { TableRowDragPayload } from './DnD';

package/cjs/features/crosswalks/utils/DnD.d.ts

@@ -0,0 +1,2 @@
+import { TableRowDragPayload } from '../types/DnD';
+export declare const isTableRowDrag: (data: TableRowDragPayload) => boolean;

package/cjs/features/crosswalks/utils/DnD.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTableRowDrag = void 0;
+var constants_1 = require("react-components/dist/Table/constants");
+var isTableRowDrag = function (data) { return data.type === constants_1.DND_ROW_TYPE; };
+exports.isTableRowDrag = isTableRowDrag;

package/features/crosswalks/AttributesTable/AttributesTable.d.ts

@@ -22,6 +22,8 @@ type Props = {
     className?: string;
     activeSurvivorshipGroupUri?: string;
     tableRef?: React.ElementRef<typeof BasicTable>;
+    onHideAttributeType?: (attributeType: AttributeType) => void;
+    attributeRowReorderingEnabled?: boolean;
 };
-declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef, onHideAttributeType, attributeRowReorderingEnabled }: Props) => React.JSX.Element>;
 export default _default;

package/features/crosswalks/AttributesTable/AttributesTable.js

@@ -37,7 +37,7 @@ var getRowCellKey = function (_a) {
 };
 var debouncedNotifyLazyRenderer = debounce(LazyRenderer.notify, 0);
 var AttributesTable = function (_a) {
-    var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? identity : _c, _d = _a.onPin, onPin = _d === void 0 ? identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
+    var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? identity : _c, _d = _a.onPin, onPin = _d === void 0 ? identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef, onHideAttributeType = _a.onHideAttributeType, _j = _a.attributeRowReorderingEnabled, attributeRowReorderingEnabled = _j === void 0 ? false : _j;
     var styles = useStyles();
     var metadata = useMdmMetadata();
     var visibleColumnsData = useMemo(function () {
@@ -46,7 +46,7 @@ var AttributesTable = function (_a) {
             return visibleColumns.includes(id);
         }), getBasicTableColumnsData)(COLUMNS_DATA);
     }, [visibleColumns]);
-    var _j = entity || {}, parentTypeUri = _j.type, parentUri = _j.uri, _k = _j.attributes, attributes = _k === void 0 ? {} : _k;
+    var _k = entity || {}, parentTypeUri = _k.type, parentUri = _k.uri, _l = _k.attributes, attributes = _l === void 0 ? {} : _l;
     useEffect(function () {
         if (entity && isNil(selectedAttributeTypes)) {
             var initialAttrTypes = pipe(keys, without(['paging']), map(makeAttrTypeUri(parentTypeUri)), map(function (attrTypeUri) { return findAttributeTypeByUri(metadata, attrTypeUri, parentTypeUri); }), filter(both(identity, isReadableAttribute)))(attributes);
@@ -66,7 +66,7 @@ var AttributesTable = function (_a) {
         crosswalksMap,
         activeSurvivorshipGroupUri
     ]);
-    var _l = useDynamicRowCellHeight(getRowCellKey), getDynamicRowCellHeight = _l.getDynamicRowCellHeight, changeRowCellHeight = _l.changeRowCellHeight;
+    var _m = useDynamicRowCellHeight(getRowCellKey), getDynamicRowCellHeight = _m.getDynamicRowCellHeight, changeRowCellHeight = _m.changeRowCellHeight;
     var renderRowCell = useCallback(function (props) { return React.createElement(CommonRowCellRenderer, __assign({ changeRowCellHeight: changeRowCellHeight }, props)); }, [changeRowCellHeight]);
     var getRowCellHeight = useCallback(either(getDynamicRowCellHeight, always(DEFAULT_ROW_HEIGHT)), [
         getDynamicRowCellHeight
@@ -74,8 +74,8 @@ var AttributesTable = function (_a) {
     useEffect(function () {
         debouncedNotifyLazyRenderer();
     }, [getRowCellHeight]);
-    var _m = useState(null), pendingDeletion = _m[0], setPendingDeletion = _m[1];
-    var _o = useState(null), pendingIgnoredEditing = _o[0], setPendingIgnoredEditing = _o[1];
+    var _o = useState(null), pendingDeletion = _o[0], setPendingDeletion = _o[1];
+    var _p = useState(null), pendingIgnoredEditing = _p[0], setPendingIgnoredEditing = _p[1];
     var handleEdit = useCallback(function (event) {
         if (event.attributeValue.ignored) {
             setPendingIgnoredEditing(event);
@@ -102,7 +102,9 @@ var AttributesTable = function (_a) {
         selectedAttributeTypes: selectedAttributeTypes,
         onSelectAttributeTypes: onSelectAttributeTypes,
         emptyTempAttributeUris: emptyTempAttributeUris,
-        readOnly: readOnly
+        readOnly: readOnly,
+        onHideAttributeType: onHideAttributeType,
+        attributeRowReorderingEnabled: attributeRowReorderingEnabled
     }); }, [
         setPendingDeletion,
         onPin,
@@ -114,7 +116,9 @@ var AttributesTable = function (_a) {
         selectedAttributeTypes,
         onSelectAttributeTypes,
         emptyTempAttributeUris,
-        readOnly
+        readOnly,
+        onHideAttributeType,
+        attributeRowReorderingEnabled
     ]);
     return (React.createElement("div", { className: classnames(styles.tableContainer, className) },
         React.createElement(BasicViewHeader, { classes: { root: styles.tableHeader, title: styles.tableTitle }, title: i18n.text('Sources') },
@@ -125,7 +129,7 @@ var AttributesTable = function (_a) {
             React.createElement(AttributeValuesSortContext.Provider, { value: sortByPinIgnorePriority },
                 React.createElement(SyncedExpandedAttributesProvider, null,
                     React.createElement(SyncedValueHeightsProvider, null,
-                        React.createElement(BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))))),
+                        React.createElement(BasicTable, { columnsData: visibleColumnsData, context: tableContext, defaultColumnMinWidth: 200, defaultColumnWidth: 250, dndRowReorderingEnabled: attributeRowReorderingEnabled, dndRowReorderingHandler: handleReorderAttributeTypes, externalDndContext: true, fixFirstColumn: true, getIdFromRowValue: getIdFromRowValue, getRowCellHeight: getRowCellHeight, headRowHeight: 48, hoverStateEnabled: Boolean(onHideAttributeType), onScroll: debouncedNotifyLazyRenderer, ref: tableRef, renderRowCell: renderRowCell, rowsData: rowsData }))))),
         React.createElement(ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         React.createElement(ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-import { OvValues } from '../../types';
-import { DraggableProps } from '../../../../../types/basicTable';
-type Props = {
-    value: OvValues;
-    someRowIsDragging?: boolean;
-    draggableProps?: DraggableProps;
-};
-export declare const OvValuesRenderer: ({ value: { values, attributeType }, someRowIsDragging, draggableProps }: Props) => React.JSX.Element;
-export {};
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js

@@ -9,28 +9,37 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import classnames from 'classnames';
+import { pick } from 'ramda';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import ClearIcon from '@mui/icons-material/Clear';
+import i18n from 'ui-i18n';
+import { SmallIconButtonWithTooltip } from '../../../../../SmallIconButton';
 import { AttributeValuesSortContext } from '../../../contexts/AttributeValuesSortContext';
 import { ReadOnlyAttributeValuesBlock } from '../../../../../ReadOnlyAttributeValuesBlock';
 import { AttributeTitle } from '../../../../../AttributeTitle';
 import { EntityContext } from '../../../../../contexts/EntityContext';
 import { useMdmEntity } from '../../../../../contexts/MdmModuleContext';
+import { withTableContext } from '../../../../../HOCs/withTableContext';
 import { FallbackIndicator } from '../FallbackIndicator';
 import { useCommonStyles } from '../../styles';
 import { ValueHeightReporter } from '../../../../../SyncedValueHeight';
-import { useStyles } from './styles';
-export var OvValuesRenderer = function (_a) {
-    var _b = _a.value, values = _b.values, attributeType = _b.attributeType, someRowIsDragging = _a.someRowIsDragging, draggableProps = _a.draggableProps;
-    var styles = useStyles();
+import styles from './OvValuesRenderer.module.css';
+var OvValuesRenderer = function (_a) {
+    var _b = _a.value, values = _b.values, attributeType = _b.attributeType, draggableProps = _a.draggableProps, onHideAttributeType = _a.onHideAttributeType, someRowIsDragging = _a.someRowIsDragging;
     var commonStyles = useCommonStyles();
     var entity = useMdmEntity();
+    var handleHideClick = useCallback(function () {
+        onHideAttributeType === null || onHideAttributeType === void 0 ? void 0 : onHideAttributeType(attributeType);
+    }, [onHideAttributeType, attributeType]);
     var sortAttributeValuesForDisplay = useContext(AttributeValuesSortContext);
     return (React.createElement("div", { className: classnames(styles.root, commonStyles.basicCell) },
         React.createElement("div", __assign({}, draggableProps, { className: styles.dragIndicator }),
             React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon })),
         React.createElement(AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (React.createElement(EntityContext.Provider, { value: entity },
-            React.createElement(ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: ValueHeightReporter, FallbackSlot: FallbackIndicator })))));
+            React.createElement(ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: ValueHeightReporter, FallbackSlot: FallbackIndicator }))),
+        onHideAttributeType && (React.createElement(SmallIconButtonWithTooltip, { type: "button", className: styles.hideButton, "aria-label": i18n.text('Hide attribute'), tooltipTitle: i18n.text('Hide attribute'), icon: ClearIcon, iconClassName: styles.hideIcon, onClick: handleHideClick }))));
 };
+export default withTableContext(pick(['onHideAttributeType']))(OvValuesRenderer);

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"OvValuesRenderer-root--WVjxR","hideButton":"OvValuesRenderer-hideButton--oOX09","dragIndicatorIcon":"OvValuesRenderer-dragIndicatorIcon--CLnlx","hideIcon":"OvValuesRenderer-hideIcon--gdZkH","dragIndicator":"OvValuesRenderer-dragIndicator--GQHS9","attributeTitle":"OvValuesRenderer-attributeTitle--Gnp-c","ovValue":"OvValuesRenderer-ovValue--bO54I"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.OvValuesRenderer-root--WVjxR{position:relative}.OvValuesRenderer-hideButton--oOX09{display:none;position:absolute;right:8px;top:8px;z-index:1}.hoveredRow .OvValuesRenderer-hideButton--oOX09{display:flex}.hoveredRow .OvValuesRenderer-dragIndicatorIcon--CLnlx{display:inline}.OvValuesRenderer-hideIcon--gdZkH{height:16px;width:16px}.OvValuesRenderer-dragIndicator--GQHS9{cursor:move;left:0;position:absolute;top:15px}.OvValuesRenderer-dragIndicatorIcon--CLnlx{display:none;height:16px;opacity:.38;width:16px}.OvValuesRenderer-attributeTitle--Gnp-c{display:block;margin-left:3px}.OvValuesRenderer-attributeTitle--Gnp-c:not(:last-child){margin-bottom:5px}.OvValuesRenderer-ovValue--bO54I+.OvValuesRenderer-ovValue--bO54I{margin-top:4px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.d.ts

@@ -1 +1 @@
-export { OvValuesRenderer } from './OvValuesRenderer';
+export { default as OvValuesRenderer } from './OvValuesRenderer';

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.js

@@ -1 +1 @@
-export { OvValuesRenderer } from './OvValuesRenderer';
+export { default as OvValuesRenderer } from './OvValuesRenderer';

package/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BasicTable } from '../../../BasicTable';
-type Props = {
-    tableRef: React.ElementRef<typeof BasicTable>;
+export type CrosswalkDndComponentProps = {
+    tableRef: React.RefObject<React.ElementRef<typeof BasicTable> | null>;
     children: React.ReactNode;
+    tableRowReorderingEnabled?: boolean;
 };
-export declare const CrosswalkDndComponent: ({ children, tableRef }: Props) => React.JSX.Element;
-export {};
+export declare const CrosswalkDndComponent: ({ children, tableRef, tableRowReorderingEnabled }: CrosswalkDndComponentProps) => React.JSX.Element;

package/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.js

@@ -2,23 +2,28 @@ import React, { useCallback, useMemo } from 'react';
 import { useDndBasicTableScrollModifier } from '../../../hooks/useDndBasicTableScrollModifier';
 import { useDraggingCrosswalk } from '../hooks/useDraggingCrosswalk';
 import { snapCenterToCursor } from '@dnd-kit/modifiers';
-import { DndContext, DragOverlay, MouseSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { CrosswalkDragPreview } from '../CrosswalkDragPreview';
+import { useTableDndKit } from 'react-components/dist/Table/hooks/useTableDndKit';
 export var CrosswalkDndComponent = function (_a) {
-    var children = _a.children, tableRef = _a.tableRef;
-    var _b = useDndBasicTableScrollModifier({ tableRef: tableRef }), scrollModifier = _b.scrollModifier, stopScroll = _b.stopScroll;
-    var dragOverlayStyles = useMemo(function () { return ({ width: 'max-content' }); }, []);
-    var _c = useDraggingCrosswalk(), draggingCrosswalk = _c.draggingCrosswalk, onDragEndCrosswalk = _c.onDragEnd, onDragStart = _c.onDragStart;
+    var children = _a.children, tableRef = _a.tableRef, _b = _a.tableRowReorderingEnabled, tableRowReorderingEnabled = _b === void 0 ? false : _b;
+    var _c = useDndBasicTableScrollModifier({ tableRef: tableRef }), scrollModifier = _c.scrollModifier, stopScroll = _c.stopScroll;
+    var _d = useDraggingCrosswalk(), draggingCrosswalk = _d.draggingCrosswalk, onDragEndCrosswalk = _d.onDragEnd, onCrosswalkDragStart = _d.onDragStart;
+    var tableDnd = useTableDndKit({
+        dndColumnReorderingEnabled: false,
+        dndRowReorderingEnabled: tableRowReorderingEnabled
+    });
+    var onDragStart = useCallback(function (event) {
+        onCrosswalkDragStart(event);
+    }, [onCrosswalkDragStart]);
     var onDragEnd = useCallback(function () {
         onDragEndCrosswalk();
         stopScroll();
     }, [onDragEndCrosswalk, stopScroll]);
     var dndContextModifiers = useMemo(function () { return [scrollModifier]; }, [scrollModifier]);
-    var dragOverlayModifiers = useMemo(function () { return [snapCenterToCursor]; }, []);
-    var mouseSensor = useSensor(MouseSensor);
-    var sensors = useSensors(mouseSensor);
-    return (React.createElement(DndContext, { sensors: sensors, modifiers: dndContextModifiers, autoScroll: false, onDragStart: onDragStart, onDragEnd: onDragEnd },
-        React.createElement(DragOverlay, { style: dragOverlayStyles, modifiers: dragOverlayModifiers, dropAnimation: null },
-            React.createElement(CrosswalkDragPreview, { crosswalk: draggingCrosswalk })),
-        children));
+    var crosswalkOverlayModifiers = useMemo(function () { return [snapCenterToCursor]; }, []);
+    return (React.createElement(DndContext, { sensors: tableDnd.sensors, collisionDetection: tableDnd.collisionDetection, measuring: tableDnd.measuring, autoScroll: tableDnd.autoScrollOptions, modifiers: dndContextModifiers, onDragStart: onDragStart, onDragEnd: onDragEnd },
+        children,
+        draggingCrosswalk ? (React.createElement(DragOverlay, { style: { width: 'max-content' }, modifiers: crosswalkOverlayModifiers, dropAnimation: null },
+            React.createElement(CrosswalkDragPreview, { crosswalk: draggingCrosswalk }))) : null));
 };

package/features/crosswalks/CrosswalkDndComponent/index.d.ts

@@ -1 +1 @@
-export { CrosswalkDndComponent } from './CrosswalkDndComponent';
+export { CrosswalkDndComponent, type CrosswalkDndComponentProps } from './CrosswalkDndComponent';

package/features/crosswalks/types/DnD.d.ts

@@ -0,0 +1,7 @@
+import { DND_ROW_TYPE } from 'react-components/dist/Table/constants';
+export type TableRowDragPayload = {
+    type: DND_ROW_TYPE;
+};
+export type CrosswalkDragPayload = {
+    type: 'Crosswalk';
+};

package/features/crosswalks/types/DnD.js

@@ -0,0 +1 @@
+export {};

package/features/crosswalks/types/index.d.ts

@@ -1,3 +1,4 @@
 export type { AddCrosswalkEvent, CreateAttributeEvent, DeleteCrosswalkEvent, EditCrosswalkEvent } from './events';
 export type { CrosswalksByOwnerTypeMap, CrosswalksByTypes } from './crosswalks';
 export { CrosswalkType } from './crosswalks';
+export type { TableRowDragPayload } from './DnD';

package/features/crosswalks/utils/DnD.d.ts

@@ -0,0 +1,2 @@
+import { TableRowDragPayload } from '../types/DnD';
+export declare const isTableRowDrag: (data: TableRowDragPayload) => boolean;

package/features/crosswalks/utils/DnD.js

@@ -0,0 +1,2 @@
+import { DND_ROW_TYPE } from 'react-components/dist/Table/constants';
+export var isTableRowDrag = function (data) { return data.type === DND_ROW_TYPE; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2255",
+  "version": "1.4.2257",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "dragIndicator" | "dragIndicatorIcon" | "attributeTitle" | "ovValue">;

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
-    root: {
-        position: 'relative'
-        // '&:hover $dragIndicator': {
-        //     display: 'block'
-        // }
-    },
-    dragIndicator: {
-        display: 'none',
-        position: 'absolute',
-        top: '15px',
-        left: 0,
-        cursor: 'grab'
-    },
-    dragIndicatorIcon: {
-        fill: theme.palette.text.secondary,
-        width: '14px',
-        height: '14px'
-    },
-    attributeTitle: {
-        display: 'block',
-        marginLeft: '3px',
-        '&:not(:last-child)': {
-            marginBottom: '5px'
-        }
-    },
-    ovValue: {
-        '& + &': {
-            marginTop: '4px'
-        }
-    }
-}); });

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "dragIndicator" | "dragIndicatorIcon" | "attributeTitle" | "ovValue">;

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.js

@@ -1,33 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function (theme) { return ({
-    root: {
-        position: 'relative'
-        // '&:hover $dragIndicator': {
-        //     display: 'block'
-        // }
-    },
-    dragIndicator: {
-        display: 'none',
-        position: 'absolute',
-        top: '15px',
-        left: 0,
-        cursor: 'grab'
-    },
-    dragIndicatorIcon: {
-        fill: theme.palette.text.secondary,
-        width: '14px',
-        height: '14px'
-    },
-    attributeTitle: {
-        display: 'block',
-        marginLeft: '3px',
-        '&:not(:last-child)': {
-            marginBottom: '5px'
-        }
-    },
-    ovValue: {
-        '& + &': {
-            marginTop: '4px'
-        }
-    }
-}); });